fix: fix system prompt scrollbar displaying (#231)(#106)

src/components/Chat/SystemPrompt.tsx

@@ -209,22 +209,23 @@ export const SystemPrompt: FC<Props> = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (textareaRef && textareaRef.current) {
+      textareaRef.current.style.height = 'inherit'; // reset height
+      const scrollHeight = textareaRef.current.scrollHeight; // then check scroll height
+      textareaRef.current.style.height = `${scrollHeight}px`;
+      textareaRef.current.style.overflow = `${
+        scrollHeight > 300 ? 'auto' : 'hidden'
+      }`;
+    }
+  }, [value, textareaRef]);
+
   return (
     <div className="flex flex-col">
       <label className="mb-4 text-left">{t('System prompt')}</label>
       <textarea
         ref={textareaRef}
-        className="w-full rounded border border-gray-400 bg-transparent px-4 py-3 outline-none placeholder:text-gray-500 focus-within:border-blue-500 dark:border-gray-600 dark:focus-within:border-blue-500"
-        style={{
-          resize: 'none',
-          bottom: `${textareaRef?.current?.scrollHeight}px`,
-          maxHeight: '300px',
-          overflow: `${
-            textareaRef.current && textareaRef.current.scrollHeight > 400
-              ? 'auto'
-              : 'hidden'
-          }`,
-        }}
+        className="max-h-[300px] w-full resize-none overflow-y-auto rounded border border-gray-400 bg-transparent px-4 py-3 outline-none placeholder:text-gray-500 focus-within:border-blue-500 dark:border-gray-600 dark:focus-within:border-blue-500"
         placeholder={
           t(`Enter a prompt or type "/" to select a prompt...`) || ''
         }