Add name property to Message type

src/components/Common/Markdown.tsx

@@ -4,9 +4,10 @@ import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism"
 import rehypeMathjax from "rehype-mathjax"
 import remarkMath from "remark-math"
 import ReactMarkdown from "react-markdown"
-import { ClipboardIcon, CheckIcon, EyeIcon } from "@heroicons/react/24/outline"
+import "property-information"
+import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline"
 import React from "react"
-import {  Tooltip } from "antd"
+import { Tooltip } from "antd"
 
 export default function Markdown({ message }: { message: string }) {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
@@ -23,8 +24,8 @@ export default function Markdown({ message }: { message: string }) {
     <React.Fragment>
       <ReactMarkdown
         className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
-        remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeMathjax]}
+        // remarkPlugins={[remarkGfm, remarkMath]}
+        // rehypePlugins={[rehypeMathjax]}
         components={{
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || "")
@@ -36,7 +37,6 @@ export default function Markdown({ message }: { message: string }) {
                   </span>
 
                   <div className="flex items-center">
-                    
                     <Tooltip title="Copy to clipboard">
                       <button
                         onClick={() => {
@@ -92,7 +92,6 @@ export default function Markdown({ message }: { message: string }) {
         }}>
         {message}
       </ReactMarkdown>
-
     </React.Fragment>
   )
 }

src/components/Common/Playground/Message.tsx

@@ -11,6 +11,7 @@ type Props = {
   botAvatar?: JSX.Element
   userAvatar?: JSX.Element
   isBot: boolean
+  name: string
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -47,6 +48,13 @@ export const PlaygroundMessage = (props: Props) => {
             </div>
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+          {
+            props.isBot && (
+              <span className="absolute mb-8 -top-4 left-0 text-xs text-gray-400 dark:text-gray-500">
+                {props.name}
+              </span>
+            )
+          }
             <div className="flex flex-grow flex-col gap-3">
               <Markdown message={props.message} />
             </div>

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) => {