fix: flow edit message (#2113)

* fix flow edit message

* flx flow eidt message

* remove unused import

web/containers/Layout/Ribbon/index.tsx

@@ -6,7 +6,7 @@ import {
 } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 
-import { useAtom } from 'jotai'
+import { useAtom, useSetAtom } from 'jotai'
 import {
   MessageCircleIcon,
   SettingsIcon,
@@ -23,16 +23,19 @@ import { MainViewState } from '@/constants/screens'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
 
+import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 export default function RibbonNav() {
   const { mainViewState, setMainViewState } = useMainViewState()
   const [serverEnabled] = useAtom(serverEnabledAtom)
+  const setEditMessage = useSetAtom(editMessageAtom)
 
   const onMenuClick = (state: MainViewState) => {
     if (mainViewState === state) return
     if (serverEnabled && state === MainViewState.Thread) return
     setMainViewState(state)
+    setEditMessage('')
   }
 
   const primaryMenus = [

web/screens/Chat/EditChatInput/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
   ConversationalExtension,
@@ -10,7 +10,17 @@ import {
   events,
 } from '@janhq/core'
 
-import { Textarea, Button } from '@janhq/uikit'
+import {
+  Textarea,
+  Button,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalPortal,
+  ModalTitle,
+} from '@janhq/uikit'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 import { twMerge } from 'tailwind-merge'
@@ -51,6 +61,7 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
   const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const setEditMessage = useSetAtom(editMessageAtom)
+  const [showDialog, setshowDialog] = useState(false)
 
   const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setEditPrompt(e.target.value)
@@ -152,6 +163,28 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
           Cancel
         </Button>
       </div>
+
+      <Modal open={showDialog} onOpenChange={() => setshowDialog(false)}>
+        <ModalPortal />
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>Edit Message</ModalTitle>
+          </ModalHeader>
+          <p className="text-muted-foreground">
+            Do you want to discard the change
+          </p>
+          <ModalFooter>
+            <div className="flex gap-x-2">
+              <ModalClose asChild onClick={() => setshowDialog(false)}>
+                <Button themes="outline">Cancel</Button>
+              </ModalClose>
+              <ModalClose asChild onClick={() => setEditMessage('')}>
+                <Button autoFocus>Yes</Button>
+              </ModalClose>
+            </div>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </div>
   )
 }

web/screens/Chat/MessageToolbar/index.tsx

@@ -6,7 +6,7 @@ import {
   ConversationalExtension,
   ContentType,
 } from '@janhq/core'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import {
   RefreshCcw,
   CopyIcon,
@@ -30,7 +30,7 @@ import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
   const deleteMessage = useSetAtom(deleteMessageAtom)
-  const [editMessage, setEditMessage] = useAtom(editMessageAtom)
+  const setEditMessage = useSetAtom(editMessageAtom)
   const thread = useAtomValue(activeThreadAtom)
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const { resendChatMessage } = useSendChatMessage()
@@ -49,11 +49,7 @@ const MessageToolbar = ({ message }: { message: ThreadMessage }) => {
   }
 
   const onEditClick = async () => {
-    if (!editMessage.length) {
+    setEditMessage(message.id ?? '')
-      setEditMessage(message.id ?? '')
-    } else {
-      setEditMessage('')
-    }
   }
 
   const onRegenerateClick = async () => {

web/screens/Chat/ThreadList/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react'
 import { Thread } from '@janhq/core/'
 
 import { motion as m } from 'framer-motion'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import { GalleryHorizontalEndIcon, MoreVerticalIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
@@ -18,6 +18,7 @@ import CleanThreadModal from '../CleanThreadModal'
 import DeleteThreadModal from '../DeleteThreadModal'
 
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
+import { editMessageAtom } from '@/helpers/atoms/ChatMessage.atom'
 import {
   getActiveThreadIdAtom,
   threadDataReadyAtom,
@@ -33,12 +34,14 @@ export default function ThreadList() {
   const assistants = useAtomValue(assistantsAtom)
   const threadDataReady = useAtomValue(threadDataReadyAtom)
   const { requestCreateNewThread } = useCreateNewThread()
+  const setEditMessage = useSetAtom(editMessageAtom)
 
   const onThreadClick = useCallback(
     (thread: Thread) => {
       setActiveThread(thread)
+      setEditMessage('')
     },
-    [setActiveThread]
+    [setActiveThread, setEditMessage]
   )
 
   /**