Add name property to Message type

src/components/Sidepanel/body.tsx

@@ -19,6 +19,7 @@ export const SidePanelBody = () => {
           key={index}
           isBot={message.isBot}
           message={message.message}
+          name={message.name}
         />
       ))}
       <div className="w-full h-32 md:h-48 flex-shrink-0"></div>

src/components/Sidepanel/empty.tsx

@@ -97,7 +97,7 @@ export const EmptySidePanel = () => {
                 setSelectedModel(e.target.value)
               }}
               value={selectedModel}
-              className="bg-gray-100 w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2">
+              className="bg-gray-100 truncate w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2">
               <option value={""}>Select a model</option>
               {ollamaInfo.models.map((model) => (
                 <option value={model.name}>{model.name}</option>

src/components/Sidepanel/form.tsx

@@ -1,15 +1,11 @@
 import { useForm } from "@mantine/form"
 import { useMutation } from "@tanstack/react-query"
 import React from "react"
+import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
 import { useMessage } from "~hooks/useMessage"
 
 export const SidepanelForm = () => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
-  React.useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.focus()
-    }
-  }, [])
 
   const resetHeight = () => {
     const textarea = textareaRef.current
@@ -23,6 +19,11 @@ export const SidepanelForm = () => {
     }
   })
 
+  useDynamicTextareaSize(
+    textareaRef,
+    form.values.message,
+  )
+
   const { onSubmit, selectedModel } = useMessage()
 
   const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
@@ -44,7 +45,7 @@ export const SidepanelForm = () => {
               await sendMessage(value.message)
             })}
             className="shrink-0 flex-grow  flex items-center ">
-            <div className="flex items-center p-2 rounded-full border  bg-gray-100 w-full dark:bg-black dark:border-gray-800">
+            <div className="flex items-center p-2 rounded-2xl border  bg-gray-100 w-full dark:bg-black dark:border-gray-800">
               <textarea
                 disabled={isSending}
                 onKeyDown={(e) => {