From 9f66249f0c217b7db95b16de626583e364dc52ba Mon Sep 17 00:00:00 2001
From: weilirs <weilirs@umich.edu>
Date: Tue, 12 Nov 2024 10:29:59 +0800
Subject: [PATCH 1/2] fix: match size with the output

---
 src/components/WritingAssistant/ConversationHistory.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WritingAssistant/ConversationHistory.tsx b/src/components/WritingAssistant/ConversationHistory.tsx
index 7505bead..48626832 100644
--- a/src/components/WritingAssistant/ConversationHistory.tsx
+++ b/src/components/WritingAssistant/ConversationHistory.tsx
@@ -59,7 +59,7 @@ const ConversationHistory: React.FC<ConversationHistoryProps> = ({
     : history.slice(currentIndex, currentIndex + 2)
 
   return (
-    <div className="mt-4 flex flex-col" style={{ height: markdownMaxHeight }}>
+    <div className="mt-4 flex flex-col" style={{ maxHeight: markdownMaxHeight }}>
       <div className="mb-2 flex justify-between">
         <button
           onClick={() => onNavigate('prev')}

From 5a283e5a73e72efabb7f8494a4ce54430ed9f074 Mon Sep 17 00:00:00 2001
From: weilirs <weilirs@umich.edu>
Date: Wed, 13 Nov 2024 18:20:44 +0800
Subject: [PATCH 2/2] fix: fixate writing assistant window size

---
 .../WritingAssistant/ConversationHistory.tsx  |  6 +--
 .../WritingAssistant/WritingAssistant.tsx     | 42 ++++++++++---------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/WritingAssistant/ConversationHistory.tsx b/src/components/WritingAssistant/ConversationHistory.tsx
index 48626832..4ccf8db4 100644
--- a/src/components/WritingAssistant/ConversationHistory.tsx
+++ b/src/components/WritingAssistant/ConversationHistory.tsx
@@ -8,7 +8,7 @@ import { convertMessageToString } from '../../lib/llm/chat'
 interface ConversationHistoryProps {
   history: ReorChatMessage[]
   streamingMessage: string
-  markdownMaxHeight: string | number
+  // markdownMaxHeight: string | number
   customPrompt: string
   setCustomPrompt: (value: string) => void
   handleCustomPrompt: () => void
@@ -27,7 +27,7 @@ interface ConversationHistoryProps {
 const ConversationHistory: React.FC<ConversationHistoryProps> = ({
   history,
   streamingMessage,
-  markdownMaxHeight,
+  // markdownMaxHeight,
   customPrompt,
   setCustomPrompt,
   handleCustomPrompt,
@@ -59,7 +59,7 @@ const ConversationHistory: React.FC<ConversationHistoryProps> = ({
     : history.slice(currentIndex, currentIndex + 2)
 
   return (
-    <div className="mt-4 flex flex-col" style={{ maxHeight: markdownMaxHeight }}>
+    <div className="flex flex-col" style={{ height: '400px' }}>
       <div className="mb-2 flex justify-between">
         <button
           onClick={() => onNavigate('prev')}
diff --git a/src/components/WritingAssistant/WritingAssistant.tsx b/src/components/WritingAssistant/WritingAssistant.tsx
index d615a563..e58cc974 100644
--- a/src/components/WritingAssistant/WritingAssistant.tsx
+++ b/src/components/WritingAssistant/WritingAssistant.tsx
@@ -19,7 +19,7 @@ const WritingAssistant: React.FC = () => {
   const [isOptionsVisible, setIsOptionsVisible] = useState<boolean>(false)
   const [prevPrompt, setPrevPrompt] = useState<string>('')
   const [positionStyle, setPositionStyle] = useState({ top: 0, left: 0 })
-  const [markdownMaxHeight, setMarkdownMaxHeight] = useState('auto')
+  // const [markdownMaxHeight, setMarkdownMaxHeight] = useState('auto')
   const [isSpaceTrigger, setIsSpaceTrigger] = useState<boolean>(false)
   const [spacePosition, setSpacePosition] = useState<number | null>(null)
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
@@ -86,27 +86,27 @@ const WritingAssistant: React.FC = () => {
     calculatePosition()
   }, [isSpaceTrigger, highlightData, editor, isOptionsVisible])
 
-  useLayoutEffect(() => {
-    if (hasValidMessages) {
-      const calculateMaxHeight = () => {
-        if (!markdownContainerRef.current) return
+  // useLayoutEffect(() => {
+  //   if (hasValidMessages) {
+  //     const calculateMaxHeight = () => {
+  //       if (!markdownContainerRef.current) return
 
-        const screenHeight = window.innerHeight
-        const containerTop = positionStyle.top
-        const buttonHeight = 30
-        const padding = 54
-        const availableHeight = screenHeight - containerTop - buttonHeight - padding
+  //       const screenHeight = window.innerHeight
+  //       const containerTop = positionStyle.top
+  //       const buttonHeight = 30
+  //       const padding = 54
+  //       const availableHeight = screenHeight - containerTop - buttonHeight - padding
 
-        setMarkdownMaxHeight(`${availableHeight}px`)
-      }
+  //       /setMarkdownMaxHeight(`${availableHeight}px`)
+  //     }
 
-      calculateMaxHeight()
-      window.addEventListener('resize', calculateMaxHeight)
+  //     calculateMaxHeight()
+  //     window.addEventListener('resize', calculateMaxHeight)
 
-      return () => window.removeEventListener('resize', calculateMaxHeight)
-    }
-    return () => {}
-  }, [hasValidMessages, positionStyle.top])
+  //     return () => window.removeEventListener('resize', calculateMaxHeight)
+  //   }
+  //   return () => {}
+  // }, [hasValidMessages, positionStyle.top])
 
   useEffect(() => {
     if (editor) {
@@ -461,12 +461,16 @@ const WritingAssistant: React.FC = () => {
             top: positionStyle.top,
             left: positionStyle.left,
             width: '385px',
+            maxHeight: '500px',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <ConversationHistory
             history={messages}
             streamingMessage={streamingMessage}
-            markdownMaxHeight={markdownMaxHeight}
+            // markdownMaxHeight={markdownMaxHeight}
             customPrompt={customPrompt}
             setCustomPrompt={setCustomPrompt}
             handleCustomPrompt={() => handleOption('custom', customPrompt)}