feat: resubmit historical dialogues

fixes #4

src/components/Chat/ChatContent/Message/MessageContent.tsx

@@ -16,6 +16,8 @@ import useSubmit from '@hooks/useSubmit';
 
 import { MessageInterface } from '@type/chat';
 
+import PopupModal from '@components/PopupModal';
+
 const MessageContent = ({
   role,
   content,
@@ -286,6 +288,7 @@ const EditView = ({
   ]);
 
   const [_content, _setContent] = useState<string>(content);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const textareaRef = React.createRef<HTMLTextAreaElement>();
 
   const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -318,17 +321,22 @@ const EditView = ({
     setMessages(updatedMessages);
   };
 
-  // only for sticky forms
   const { handleSubmit } = useSubmit();
   const handleSaveAndSubmit = () => {
-    if (!sticky) return;
     if (_content == '') return;
     const updatedMessages: MessageInterface[] = JSON.parse(
       JSON.stringify(messages)
     );
-    updatedMessages.push({ role: inputRole, content: _content });
-    _setContent('');
-    setMessages(updatedMessages);
+    if (sticky) {
+      updatedMessages.push({ role: inputRole, content: _content });
+      _setContent('');
+      setMessages(updatedMessages);
+    } else {
+      updatedMessages[messageIndex].content = _content;
+      const _updatedMessages = updatedMessages.slice(0, messageIndex + 1);
+      setMessages(_updatedMessages);
+      setIsEdit(false);
+    }
     handleSubmit();
   };
 
@@ -357,11 +365,11 @@ const EditView = ({
       <div className='text-center mt-2 flex justify-center'>
         {sticky && (
           <button
-            className='btn relative btn-primary mr-2'
+            className='btn relative mr-2 btn-primary'
             onClick={handleSaveAndSubmit}
           >
             <div className='flex items-center justify-center gap-2'>
-              Save and Submit
+              Save & Submit
             </div>
           </button>
         )}
@@ -375,6 +383,19 @@ const EditView = ({
           <div className='flex items-center justify-center gap-2'>Save</div>
         </button>
 
+        {sticky || (
+          <button
+            className='btn relative mr-2 btn-neutral'
+            onClick={() => {
+              setIsModalOpen(true);
+            }}
+          >
+            <div className='flex items-center justify-center gap-2'>
+              Save & Submit
+            </div>
+          </button>
+        )}
+
         {sticky || (
           <button
             className='btn relative btn-neutral'
@@ -384,6 +405,14 @@ const EditView = ({
           </button>
         )}
       </div>
+      {isModalOpen && (
+        <PopupModal
+          setIsModalOpen={setIsModalOpen}
+          title='Warning'
+          message='Please be advised that by submitting this message, all subsequent messages will be deleted!'
+          handleConfirm={handleSaveAndSubmit}
+        />
+      )}
     </>
   );
 };

src/components/PopupModal/index.ts

@@ -0,0 +1 @@
+export { default } from './PopupModal';

tsconfig.json

@@ -22,7 +22,8 @@
       "@store/*": ["./src/store/*"],
       "@hooks/*": ["./src/hooks/*"],
       "@constants/*": ["./src/constants/*"],
-      "@api/*": ["./src/api/*"]
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"]
     }
   },
   "include": ["src"],

vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
       '@hooks/': new URL('./src/hooks/', import.meta.url).pathname,
       '@constants/': new URL('./src/constants/', import.meta.url).pathname,
       '@api/': new URL('./src/api/', import.meta.url).pathname,
+      '@components/': new URL('./src/components/', import.meta.url).pathname,
     },
   },
 });