From 84f4205b56961cd1d681f8d54da1ecb1b24564ca Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 3 Feb 2024 00:33:31 +0530
Subject: [PATCH] Add chat mode functionality to EmptySidePanel component

---
 src/components/Sidepanel/Chat/empty.tsx | 40 ++++++++++++++++++++++++-
 src/hooks/useMessage.tsx                | 20 ++++++++-----
 src/libs/get-html.ts                    | 11 +++++--
 src/store/index.tsx                     |  6 +++-
 4 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index 7573cad..6f7b2b2 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -36,7 +36,8 @@ export const EmptySidePanel = () => {
     }
   }, [ollamaInfo])
 
-  const { setSelectedModel, selectedModel } = useMessage()
+  const { setSelectedModel, selectedModel, chatMode, setChatMode } =
+    useMessage()
 
   return (
     <div className="mx-auto sm:max-w-md px-4 mt-10">
@@ -107,6 +108,43 @@ export const EmptySidePanel = () => {
                 </option>
               ))}
             </select>
+
+            <div className="mt-4">
+              <div className="inline-flex items-center">
+                <label
+                  className="relative flex items-center p-3 rounded-full cursor-pointer"
+                  htmlFor="check">
+                  <input
+                    type="checkbox"
+                    checked={chatMode === "rag"}
+                    onChange={(e) => {
+                      setChatMode(e.target.checked ? "rag" : "normal")
+                    }}
+                    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">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-3.5 w-3.5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      stroke="currentColor"
+                      stroke-width="1">
+                      <path
+                        fill-rule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clip-rule="evenodd"></path>
+                    </svg>
+                  </span>
+                </label>
+                <label
+                  className="mt-px font-light  cursor-pointer select-none text-gray-900 dark:text-gray-400"
+                  htmlFor="check">
+                  Chat with Current Page
+                </label>
+              </div>
+            </div>
           </div>
         )}
       </div>
diff --git a/src/hooks/useMessage.tsx b/src/hooks/useMessage.tsx
index 380bf73..beb76cc 100644
--- a/src/hooks/useMessage.tsx
+++ b/src/hooks/useMessage.tsx
@@ -72,7 +72,9 @@ export const useMessage = () => {
     isProcessing,
     setIsProcessing,
     selectedModel,
-    setSelectedModel
+    setSelectedModel,
+    chatMode,
+    setChatMode
   } = useStoreMessage()
 
   const abortControllerRef = React.useRef<AbortController | null>(null)
@@ -89,7 +91,7 @@ export const useMessage = () => {
     setIsFirstMessage(true)
   }
 
-  const voyEmbedding = async (
+  const memoryEmbedding = async (
     url: string,
     html: string,
     ollamaEmbedding: OllamaEmbeddings
@@ -155,7 +157,7 @@ export const useMessage = () => {
     if (isAlreadyExistEmbedding) {
       vectorstore = isAlreadyExistEmbedding
     } else {
-      vectorstore = await voyEmbedding(url, html, ollamaEmbedding)
+      vectorstore = await memoryEmbedding(url, html, ollamaEmbedding)
     }
 
     const questionPrompt =
@@ -173,8 +175,6 @@ export const useMessage = () => {
       retriever: vectorstore.asRetriever()
     })
 
-    
-
     try {
       const chunks = await chain.stream({
         question: sanitizedQuestion
@@ -336,7 +336,11 @@ export const useMessage = () => {
   }
 
   const onSubmit = async (message: string) => {
-    await chatWithWebsiteMode(message)
+    if (chatMode === "normal") {
+      await normalChatMode(message)
+    } else {
+      await chatWithWebsiteMode(message)
+    }
   }
 
   const stopStreamingRequest = () => {
@@ -362,6 +366,8 @@ export const useMessage = () => {
     stopStreamingRequest,
     clearChat,
     selectedModel,
-    setSelectedModel
+    setSelectedModel,
+    chatMode,
+    setChatMode
   }
 }
diff --git a/src/libs/get-html.ts b/src/libs/get-html.ts
index 699352a..4ced3ff 100644
--- a/src/libs/get-html.ts
+++ b/src/libs/get-html.ts
@@ -1,7 +1,12 @@
 const _getHtml = () => {
-    const url = window.location.href
-    const html = document.documentElement.outerHTML
-    return { url, html }
+  const url = window.location.href
+  const html = Array.from(document.querySelectorAll("script")).reduce(
+    (acc, script) => {
+      return acc.replace(script.outerHTML, "")
+    },
+    document.documentElement.outerHTML
+  )
+  return { url, html }
 }
 
 export const getHtmlOfCurrentTab = async () => {
diff --git a/src/store/index.tsx b/src/store/index.tsx
index f0596e9..4569357 100644
--- a/src/store/index.tsx
+++ b/src/store/index.tsx
@@ -29,6 +29,8 @@ type State = {
   setIsProcessing: (isProcessing: boolean) => void
   selectedModel: string | null
   setSelectedModel: (selectedModel: string) => void
+  chatMode: "normal" | "rag"
+  setChatMode: (chatMode: "normal" | "rag") => void
 }
 
 export const useStoreMessage = create<State>((set) => ({
@@ -48,5 +50,7 @@ export const useStoreMessage = create<State>((set) => ({
   setIsProcessing: (isProcessing) => set({ isProcessing }),
   defaultSpeechToTextLanguage: "en-US",
   selectedModel: null,
-  setSelectedModel: (selectedModel) => set({ selectedModel })
+  setSelectedModel: (selectedModel) => set({ selectedModel }),
+  chatMode: "normal",
+  setChatMode: (chatMode) => set({ chatMode }),
 }))