feat: dynamic max-height and width (#1)

src/components/ConversationCard/index.jsx

@@ -9,6 +9,7 @@ import { WindowDesktop, XLg } from 'react-bootstrap-icons'
 import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
+import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
 
 const logo = Browser.runtime.getURL('logo.png')
 
@@ -32,6 +33,7 @@ function ConversationCard(props) {
   const [isReady, setIsReady] = useState(!props.question)
   const [port, setPort] = useState(() => Browser.runtime.connect())
   const [session, setSession] = useState(props.session)
+  const windowSize = useClampWindowSize([0, Infinity], [250, 1100])
   /**
    * @type {[ConversationItemData[], (conversationItemData: ConversationItemData[]) => void]}
    */
@@ -213,7 +215,7 @@ function ConversationCard(props) {
         </span>
       </div>
       <hr />
-      <div className="markdown-body">
+      <div className="markdown-body" style={{ maxHeight: windowSize[1] * 0.75 + 'px' }}>
         {conversationItemData.map((data, idx) => (
           <ConversationItem
             content={data.content}

src/components/FloatingToolbar/index.jsx

@@ -6,6 +6,7 @@ import { defaultConfig, getUserConfig } from '../../config.mjs'
 import { config as toolsConfig } from '../../content-script/selection-tools'
 import { setElementPositionInViewport } from '../../utils'
 import Draggable from 'react-draggable'
+import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
 
 const logo = Browser.runtime.getURL('logo.png')
 
@@ -16,6 +17,7 @@ function FloatingToolbar(props) {
   const [render, setRender] = useState(false)
   const [position, setPosition] = useState(props.position)
   const [virtualPosition, setVirtualPosition] = useState({ x: 0, y: 0 })
+  const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
 
   useEffect(() => {
     getUserConfig()
@@ -68,7 +70,7 @@ function FloatingToolbar(props) {
           onStop={dragEvent.onStop}
           position={virtualPosition}
         >
-          <div className="gpt-selection-window">
+          <div className="gpt-selection-window" style={{ width: windowSize[0] * 0.4 + 'px' }}>
             <div className="chat-gpt-container">
               <ConversationCard
                 session={props.session}