Update package.json and code files

package.json

@@ -77,24 +77,8 @@
       "activeTab",
       "scripting",
       "declarativeNetRequest",
-      "declarativeNetRequestFeedback"
-    ],
-    "commands": {
-      "open-ai-sidebar": {
-        "suggested_key": {
-          "default": "Ctrl+Shift+0",
-          "mac": "Command+Shift+0"
-        },
-        "description": "Open AI Sidebar for Page Assist"
-      },
-      "_execute_action": {
-        "suggested_key": {
-          "windows": "Ctrl+Shift+0",
-          "mac": "Command+Shift+0",
-          "chromeos": "Ctrl+Shift+0",
-          "linux": "Ctrl+Shift+0"
-        }
-      }
-    }
+      "declarativeNetRequestFeedback",
+      "action"
+    ]
   }
 }

src/background.ts

@@ -1,6 +1,5 @@
 export {}
 
-
 chrome.runtime.onMessage.addListener(async (message) => {
   if (message.type === "sidepanel") {
     chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
@@ -11,3 +10,12 @@ chrome.runtime.onMessage.addListener(async (message) => {
     })
   }
 })
+
+chrome.action.onClicked.addListener((tab) => {
+  chrome.tabs.create({url: chrome.runtime.getURL("options.html")});
+});
+
+// listen to commadns
+chrome.commands.onCommand.addListener((command) => {
+  console.log('Command', command)
+})

src/chain/chat-with-website.ts

@@ -14,12 +14,13 @@ import {
   RunnableMap,
   RunnableSequence,
 } from "langchain/schema/runnable";
+import type { ChatHistory } from "~store";
 type RetrievalChainInput = {
   chat_history: string;
   question: string;
 };
 
-export function groupMessagesByConversation(messages: any[]) {
+export function groupMessagesByConversation(messages: ChatHistory) {
   if (messages.length % 2 !== 0) {
     messages.pop();
   }

src/components/Common/SaveButton.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react"
+
+type Props = {
+  onClick: () => void
+  disabled?: boolean
+  className?: string
+  text?: string
+  textOnSave?: string
+}
+
+export const SaveButton = ({
+  onClick,
+  disabled,
+  className,
+  text = "Save",
+  textOnSave = "Saved"
+}: Props) => {
+  const [clickedSave, setClickedSave] = useState(false)
+  return (
+    <button
+      onClick={() => {
+        setClickedSave(true)
+        onClick()
+        setTimeout(() => {
+          setClickedSave(false)
+        }, 1000)
+      }}
+      disabled={disabled}
+      className={`bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700 ${className}`}>
+      {clickedSave ? textOnSave : text}
+    </button>
+  )
+}

src/components/Sidepanel/Settings/body.tsx

@@ -11,6 +11,7 @@ import {
 
 import { Skeleton, Radio } from "antd"
 import { useDarkMode } from "~hooks/useDarkmode"
+import { SaveButton } from "~components/Common/SaveButton"
 
 export const SettingsBody = () => {
   const [ollamaURL, setOllamaURL] = React.useState<string>("")
@@ -78,13 +79,11 @@ export const SettingsBody = () => {
           placeholder="Enter Ollama URL here"
         />
         <div className="flex justify-end">
-          <button
+          <SaveButton
             onClick={() => {
               saveOllamaURL(ollamaURL)
             }}
-            className="bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
-            Save
-          </button>
+          />
         </div>
       </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4">
@@ -109,13 +108,11 @@ export const SettingsBody = () => {
               onChange={(e) => setSystemPrompt(e.target.value)}
             />
             <div className="flex justify-end">
-              <button
+              <SaveButton
                 onClick={() => {
                   setSystemPromptForNonRag(systemPrompt)
                 }}
-                className="bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
-                Save
-              </button>
+              />
             </div>
           </div>
         )}
@@ -144,13 +141,11 @@ export const SettingsBody = () => {
             </div>
 
             <div className="flex justify-end">
-              <button
+              <SaveButton
                 onClick={() => {
                   setPromptForRag(ragPrompt, ragQuestionPrompt)
                 }}
-                className="bg-pink-500  hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
-                Save
-              </button>
+              />
             </div>
           </div>
         )}

src/hooks/useMessage.tsx

@@ -17,7 +17,7 @@ import { getHtmlOfCurrentTab } from "~libs/get-html"
 import { PageAssistHtmlLoader } from "~loader/html"
 import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"
 import { OllamaEmbeddings } from "@langchain/community/embeddings/ollama"
-import { createChatWithWebsiteChain } from "~chain/chat-with-website"
+import { createChatWithWebsiteChain, groupMessagesByConversation } from "~chain/chat-with-website"
 import { MemoryVectorStore } from "langchain/vectorstores/memory"
 
 export type BotResponse = {
@@ -205,7 +205,8 @@ export const useMessage = () => {
 
     try {
       const chunks = await chain.stream({
-        question: sanitizedQuestion
+        question: sanitizedQuestion,
+        chat_history: groupMessagesByConversation(history),
       })
       let count = 0
       for await (const chunk of chunks) {

src/routes/index.tsx

@@ -2,8 +2,13 @@ import { Route, Routes } from "react-router-dom"
 import { SidepanelChat } from "./sidepanel-chat"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { SidepanelSettings } from "./sidepanel-settings"
+import { OptionIndex } from "./option-index"
 
-export const Routing = () => <Routes></Routes>
+export const OptionRouting = () => (
+  <Routes>
+    <Route path="/" element={<OptionIndex />} />
+  </Routes>
+)
 
 export const SidepanelRouting = () => {
   const { mode } = useDarkMode()

src/routes/option-index.tsx

@@ -0,0 +1,10 @@
+import { SettingsBody } from "~components/Sidepanel/Settings/body"
+import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
+
+export const OptionIndex = () => {
+  return (
+    <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
+      hey
+    </div>
+  )
+}