From 4c17d2f52c914f5ad6845a5fab846699073783cf Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 3 Feb 2024 11:18:15 +0530
Subject: [PATCH] Fix UI issues and add embedding feature

---
 src/components/Sidepanel/Chat/empty.tsx  |  2 +-
 src/components/Sidepanel/Chat/form.tsx   |  1 -
 src/components/Sidepanel/Chat/header.tsx | 12 +++++++++++-
 src/hooks/useMessage.tsx                 | 14 +++++++++++---
 src/store/index.tsx                      |  4 ++++
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index 6f7b2b2..188e4af 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -123,7 +123,7 @@ export const EmptySidePanel = () => {
                     className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity"
                     id="check"
                   />
-                  <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100 dark:text-gray-400">
+                  <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100 ">
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       className="h-3.5 w-3.5"
diff --git a/src/components/Sidepanel/Chat/form.tsx b/src/components/Sidepanel/Chat/form.tsx
index 397f05f..b5d9081 100644
--- a/src/components/Sidepanel/Chat/form.tsx
+++ b/src/components/Sidepanel/Chat/form.tsx
@@ -47,7 +47,6 @@ export const SidepanelForm = () => {
             className="shrink-0 flex-grow  flex items-center ">
             <div className="flex items-center p-2 rounded-2xl border  bg-gray-100 w-full dark:bg-black dark:border-gray-800">
               <textarea
-                disabled={isSending}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey && !isSending) {
                     e.preventDefault()
diff --git a/src/components/Sidepanel/Chat/header.tsx b/src/components/Sidepanel/Chat/header.tsx
index 084337b..82d386a 100644
--- a/src/components/Sidepanel/Chat/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -1,10 +1,12 @@
 import logoImage from "data-base64:~assets/icon.png"
 import CogIcon from "@heroicons/react/24/outline/CogIcon"
+import Squares2X2Icon from "@heroicons/react/24/outline/Squares2X2Icon"
 import { ArrowPathIcon } from "@heroicons/react/24/outline"
 import { useMessage } from "~hooks/useMessage"
 import { Link } from "react-router-dom"
+import { Tooltip } from "antd"
 export const SidepanelHeader = () => {
-  const { clearChat } = useMessage()
+  const { clearChat, isEmbedding } = useMessage()
   return (
     <div className="flex px-3 justify-between bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
@@ -13,6 +15,14 @@ export const SidepanelHeader = () => {
       </div>
 
       <div className="flex items-center space-x-3">
+        {isEmbedding ? (
+          <Tooltip 
+          title="It may take a few minutes to embed the page. Please wait..."
+          >
+          <Squares2X2Icon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
+
+          </Tooltip>
+        ) : null}
         <button
           onClick={() => {
             clearChat()
diff --git a/src/hooks/useMessage.tsx b/src/hooks/useMessage.tsx
index beb76cc..b29a549 100644
--- a/src/hooks/useMessage.tsx
+++ b/src/hooks/useMessage.tsx
@@ -74,7 +74,9 @@ export const useMessage = () => {
     selectedModel,
     setSelectedModel,
     chatMode,
-    setChatMode
+    setChatMode,
+    setIsEmbedding,
+    isEmbedding
   } = useStoreMessage()
 
   const abortControllerRef = React.useRef<AbortController | null>(null)
@@ -89,6 +91,9 @@ export const useMessage = () => {
     setHistory([])
     setHistoryId(null)
     setIsFirstMessage(true)
+    setIsLoading(false)
+    setIsProcessing(false)
+    setStreaming(false)
   }
 
   const memoryEmbedding = async (
@@ -110,12 +115,14 @@ export const useMessage = () => {
 
     const store = new MemoryVectorStore(ollamaEmbedding)
 
-    await store.addDocuments(chunks)
+    setIsEmbedding(true)
 
+    await store.addDocuments(chunks)
     setKeepTrackOfEmbedding({
       ...keepTrackOfEmbedding,
       [url]: store
     })
+    setIsEmbedding(false)
 
     return store
   }
@@ -368,6 +375,7 @@ export const useMessage = () => {
     selectedModel,
     setSelectedModel,
     chatMode,
-    setChatMode
+    setChatMode,
+    isEmbedding
   }
 }
diff --git a/src/store/index.tsx b/src/store/index.tsx
index 4569357..7015c9d 100644
--- a/src/store/index.tsx
+++ b/src/store/index.tsx
@@ -31,6 +31,8 @@ type State = {
   setSelectedModel: (selectedModel: string) => void
   chatMode: "normal" | "rag"
   setChatMode: (chatMode: "normal" | "rag") => void
+  isEmbedding: boolean
+  setIsEmbedding: (isEmbedding: boolean) => void
 }
 
 export const useStoreMessage = create<State>((set) => ({
@@ -53,4 +55,6 @@ export const useStoreMessage = create<State>((set) => ({
   setSelectedModel: (selectedModel) => set({ selectedModel }),
   chatMode: "normal",
   setChatMode: (chatMode) => set({ chatMode }),
+  isEmbedding: false,
+  setIsEmbedding: (isEmbedding) => set({ isEmbedding }),
 }))