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