chore: Refactor Sidepanel Chat body and form components

src/components/Sidepanel/Chat/body.tsx

@@ -5,7 +5,8 @@ import { EmptySidePanel } from "../Chat/empty"
 import { useWebUI } from "@/store/webui"
 
 export const SidePanelBody = () => {
-  const { messages, streaming } = useMessage()
+  const { messages, streaming, regenerateLastMessage, editMessage } =
+    useMessage()
   const divRef = React.useRef<HTMLDivElement>(null)
   const { ttsEnabled } = useWebUI()
   React.useEffect(() => {
@@ -18,7 +19,6 @@ export const SidePanelBody = () => {
       {messages.length === 0 && <EmptySidePanel />}
       {messages.map((message, index) => (
         <PlaygroundMessage
-          onEditFormSubmit={(value) => {}}
           key={index}
           isBot={message.isBot}
           message={message.message}
@@ -26,15 +26,19 @@ export const SidePanelBody = () => {
           images={message.images || []}
           currentMessageIndex={index}
           totalMessages={messages.length}
-          onRengerate={() => {}}
+          onRengerate={regenerateLastMessage}
+          onEditFormSubmit={(value) => {
+            editMessage(index, value, !message.isBot)
+          }}
           isProcessing={streaming}
-          hideEditAndRegenerate
           isTTSEnabled={ttsEnabled}
         />
       ))}
-      {
-        import.meta.env.BROWSER === "chrome" ? <div className="w-full h-32 md:h-48 flex-shrink-0"></div> : <div className="w-full h-48 flex-shrink-0"></div>
-      }
+      {import.meta.env.BROWSER === "chrome" ? (
+        <div className="w-full h-32 md:h-48 flex-shrink-0"></div>
+      ) : (
+        <div className="w-full h-48 flex-shrink-0"></div>
+      )}
       <div ref={divRef} />
     </div>
   )

src/components/Sidepanel/Chat/form.tsx

@@ -23,11 +23,6 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   const [typing, setTyping] = React.useState<boolean>(false)
   const { t } = useTranslation(["playground", "common"])
 
-  const textAreaFocus = () => {
-    if (textareaRef.current) {
-      textareaRef.current.focus()
-    }
-  }
   const form = useForm({
     initialValues: {
       message: "",
@@ -48,39 +43,11 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
       }
     }
   }
-
-  React.useEffect(() => {
-    if (dropedFile) {
-      onInputChange(dropedFile)
+  const textAreaFocus = () => {
+    if (textareaRef.current) {
+      textareaRef.current.focus()
     }
-  }, [dropedFile])
-
-  useDynamicTextareaSize(textareaRef, form.values.message, 120)
-
-  const {
-    onSubmit,
-    selectedModel,
-    chatMode,
-    speechToTextLanguage,
-    stopStreamingRequest
-  } = useMessage()
-  const { isListening, start, stop, transcript } = useSpeechRecognition()
-
-  React.useEffect(() => {
-    if (isListening) {
-      form.setFieldValue("message", transcript)
-    }
-  }, [transcript])
-  const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
-    mutationFn: onSubmit,
-    onSuccess: () => {
-      textAreaFocus()
-    },
-    onError: (error) => {
-      textAreaFocus()
-    }
-  })
-
+  }
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Process" || e.key === "229") return
     if (
@@ -116,6 +83,39 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
     }
   }
 
+  const {
+    onSubmit,
+    selectedModel,
+    chatMode,
+    speechToTextLanguage,
+    stopStreamingRequest,
+    streaming
+  } = useMessage()
+  const { isListening, start, stop, transcript } = useSpeechRecognition()
+
+  React.useEffect(() => {
+    if (dropedFile) {
+      onInputChange(dropedFile)
+    }
+  }, [dropedFile])
+
+  useDynamicTextareaSize(textareaRef, form.values.message, 120)
+
+  React.useEffect(() => {
+    if (isListening) {
+      form.setFieldValue("message", transcript)
+    }
+  }, [transcript])
+  const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
+    mutationFn: onSubmit,
+    onSuccess: () => {
+      textAreaFocus()
+    },
+    onError: (error) => {
+      textAreaFocus()
+    }
+  })
+
   return (
     <div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-600">
       <div
@@ -224,7 +224,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                     <ImageIcon className="h-5 w-5" />
                   </button>
                 </Tooltip>
-                {!isSending ? (
+                {!streaming ? (
                   <Dropdown.Button
                     htmlType="submit"
                     disabled={isSending}