Add edit functionality to PlaygroundMessage component

src/components/Common/Playground/EditMessageForm.tsx

@@ -0,0 +1,62 @@
+import { useForm } from "@mantine/form"
+import React from "react"
+import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
+
+type Props = {
+  value: string
+  onSumbit: (value: string) => void
+  onClose: () => void
+  isBot: boolean
+}
+
+export const EditMessageForm = (props: Props) => {
+  const [isComposing, setIsComposing] = React.useState(false)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const form = useForm({
+    initialValues: {
+      message: props.value
+    }
+  })
+  useDynamicTextareaSize(textareaRef, form.values.message, 300)
+
+  React.useEffect(() => {
+    form.setFieldValue("message", props.value)
+  }, [props.value])
+
+  return (
+    <form
+      onSubmit={form.onSubmit((data) => {
+        if (isComposing) return
+        props.onClose()
+        props.onSumbit(data.message)
+      })}
+      className="flex flex-col gap-2">
+      <textarea
+        {...form.getInputProps("message")}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
+        required
+        rows={1}
+        style={{ minHeight: "60px" }}
+        tabIndex={0}
+        placeholder="Type a message..."
+        ref={textareaRef}
+        className="w-full  bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
+      />
+      <div className="flex justify-center space-x-2 mt-2">
+        <button
+          aria-label="Save"
+          className="bg-white dark:bg-black px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
+          {props.isBot ? "Save" : "Save & Submit"}
+        </button>
+        <button
+          onClick={props.onClose}
+          aria-label="Cancel"
+          className="border dark:border-gray-600 px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}

src/components/Common/Playground/Message.tsx

@@ -3,6 +3,7 @@ import React from "react"
 import { Image, Tooltip } from "antd"
 import { WebSearch } from "./WebSearch"
 import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react"
+import { EditMessageForm } from "./EditMessageForm"
 
 type Props = {
   message: string
@@ -15,6 +16,7 @@ type Props = {
   currentMessageIndex: number
   totalMessages: number
   onRengerate: () => void
+  onEditFormSubmit: (value: string) => void
   isProcessing: boolean
   webSearch?: {}
   isSearchingInternet?: boolean
@@ -23,6 +25,7 @@ type Props = {
 
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
+  const [editMode, setEditMode] = React.useState(false)
 
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
@@ -55,7 +58,16 @@ export const PlaygroundMessage = (props: Props) => {
             ) : null}
 
             <div className="flex flex-grow flex-col">
-              <Markdown message={props.message} />
+              {!editMode ? (
+                <Markdown message={props.message} />
+              ) : (
+                <EditMessageForm
+                  value={props.message}
+                  onSumbit={props.onEditFormSubmit}
+                  onClose={() => setEditMode(false)}
+                  isBot={props.isBot}
+                />
+              )}
             </div>
             {/* source if aviable */}
             {props.images &&
@@ -89,7 +101,7 @@ export const PlaygroundMessage = (props: Props) => {
                 ))}
               </div>
             )}
-            {!props.isProcessing && (
+            {!props.isProcessing && !editMode && (
               <div
                 className={`space-x-2 gap-2 mt-3 ${
                   props.currentMessageIndex !== props.totalMessages - 1
@@ -130,7 +142,9 @@ export const PlaygroundMessage = (props: Props) => {
                   </>
                 )}
                 <Tooltip title="Edit">
-                  <button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                  <button
+                    onClick={() => setEditMode(true)}
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                     <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                   </button>
                 </Tooltip>