feat(ChatDraft): change to make chat ui better

Sinaptik-AI · Oct 29, 2024 · 1d8767f · 1d8767f
1 parent 2484c43
commit 1d8767f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/frontend/src/app/style/globals.css b/frontend/src/app/style/globals.css
@@ -268,3 +268,9 @@ tr:hover .action-icons {
   margin: 0; /* Remove default margins */
   padding: 0; /* Remove default padding */
 }
+
+
+.ql-editor {
+  max-height: 80vh; /* Set fixed max height */
+  overflow-y: auto;  /* Enable scrolling */
+}
diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
@@ -69,6 +69,9 @@ const ChatBox = ({
   const [openChatDraftDrawer, setOpenChatDraftDrawer] =
     useState<boolean>(false);
 
+  const [scrollToEditorBottom, setScrollToEditorBottom] =
+    useState<boolean>(false);
+
   const { data: statusData, isLoading } = useQuery({
     queryKey: ["chatStatus", project_id],
     queryFn: async () => {
@@ -106,8 +109,6 @@ const ChatBox = ({
   };
 
   const handleAddToDraft = (index: number) => {
-    setOpenChatDraftDrawer(true);
-
     const new_draft =
       chatDraft.draft +
       `<br/><p><strong>${messages[index - 1].text}</strong></p><p>${messages[index].text}</p>`;
@@ -116,6 +117,8 @@ const ChatBox = ({
       draft: new_draft,
       draftedMessageIndexes: [...chatDraft.draftedMessageIndexes, index],
     });
+    setOpenChatDraftDrawer(true);
+    setScrollToEditorBottom(true);
   };
 
   const onCloseChatDraft = () => {
@@ -124,6 +127,7 @@ const ChatBox = ({
 
   const onOpenChatDraft = () => {
     setOpenChatDraftDrawer(true);
+    setScrollToEditorBottom(false);
   };
 
   const handleDraftEdit = (draft: string) => {
@@ -224,6 +228,7 @@ const ChatBox = ({
         draft={chatDraft?.draft}
         onCancel={onCloseChatDraft}
         onSubmit={handleDraftEdit}
+        scrollToEnd={scrollToEditorBottom}
       />
     </div>
   );

diff --git a/frontend/src/components/ChatDraftDrawer.tsx b/frontend/src/components/ChatDraftDrawer.tsx
@@ -1,15 +1,16 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import Drawer from "./ui/Drawer";
 import { Button } from "./ui/Button";
 import ReactQuill from "react-quill";
-import { Save, BookTextIcon } from "lucide-react";
+import { BookTextIcon } from "lucide-react";
 
 interface IProps {
   draft: string;
   isOpen?: boolean;
   onCancel: () => void;
   onSubmit: (data: string) => void;
+  scrollToEnd?: boolean;
 }
 
 const modules = {
@@ -46,23 +47,32 @@ const ChatDraftDrawer = ({
   draft,
   onSubmit,
   onCancel,
+  scrollToEnd = false,
 }: IProps) => {
-  const [draftEdit, setDraftEdit] = useState<string>(draft);
-
-  useEffect(() => {
-    setDraftEdit(draft);
-  }, [draft, isOpen]);
+  const quillRef = useRef<ReactQuill | null>(null);
 
   const setEditedSummary = (data: string) => {
-    setDraftEdit(data);
+    onSubmit(data);
   };
 
+  useEffect(() => {
+    if (quillRef.current) {
+      console.log("Exists!");
+      const editor = quillRef.current.getEditor();
+      const editorContainer = editor.root;
+      if (editorContainer) {
+        editorContainer.scrollTop = editorContainer.scrollHeight;
+      }
+    }
+  }, [draft]);
+
   return (
     <Drawer isOpen={isOpen} onClose={onCancel} title="Draft Chat">
       <div className="flex flex-col h-full">
         <ReactQuill
+          ref={quillRef}
           theme="snow"
-          value={draftEdit}
+          value={draft}
           onChange={setEditedSummary}
           modules={modules}
           formats={formats}
@@ -74,16 +84,7 @@ const ChatDraftDrawer = ({
               className="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark"
             >
               <BookTextIcon className="inline-block mr-2" size={16} />
-              Format
-            </Button>
-            <Button
-              onClick={() => {
-                onSubmit(draftEdit);
-              }}
-              className="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark"
-            >
-              <Save className="inline-block mr-2" size={16} />
-              Save
+              Rewrite with AI
             </Button>
           </div>
         </div>