Add chat mode functionality to EmptySidePanel component

This commit is contained in:
n4ze3m 2024-02-03 00:33:31 +05:30
parent 28361c47e6
commit 84f4205b56
4 changed files with 65 additions and 12 deletions

View File

@ -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>

View File

@ -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
}
}

View File

@ -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 () => {

View File

@ -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 }),
}))