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]) }, [ollamaInfo])
const { setSelectedModel, selectedModel } = useMessage() const { setSelectedModel, selectedModel, chatMode, setChatMode } =
useMessage()
return ( return (
<div className="mx-auto sm:max-w-md px-4 mt-10"> <div className="mx-auto sm:max-w-md px-4 mt-10">
@ -107,6 +108,43 @@ export const EmptySidePanel = () => {
</option> </option>
))} ))}
</select> </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>
)} )}
</div> </div>

View File

@ -72,7 +72,9 @@ export const useMessage = () => {
isProcessing, isProcessing,
setIsProcessing, setIsProcessing,
selectedModel, selectedModel,
setSelectedModel setSelectedModel,
chatMode,
setChatMode
} = useStoreMessage() } = useStoreMessage()
const abortControllerRef = React.useRef<AbortController | null>(null) const abortControllerRef = React.useRef<AbortController | null>(null)
@ -89,7 +91,7 @@ export const useMessage = () => {
setIsFirstMessage(true) setIsFirstMessage(true)
} }
const voyEmbedding = async ( const memoryEmbedding = async (
url: string, url: string,
html: string, html: string,
ollamaEmbedding: OllamaEmbeddings ollamaEmbedding: OllamaEmbeddings
@ -155,7 +157,7 @@ export const useMessage = () => {
if (isAlreadyExistEmbedding) { if (isAlreadyExistEmbedding) {
vectorstore = isAlreadyExistEmbedding vectorstore = isAlreadyExistEmbedding
} else { } else {
vectorstore = await voyEmbedding(url, html, ollamaEmbedding) vectorstore = await memoryEmbedding(url, html, ollamaEmbedding)
} }
const questionPrompt = const questionPrompt =
@ -173,8 +175,6 @@ export const useMessage = () => {
retriever: vectorstore.asRetriever() retriever: vectorstore.asRetriever()
}) })
try { try {
const chunks = await chain.stream({ const chunks = await chain.stream({
question: sanitizedQuestion question: sanitizedQuestion
@ -336,7 +336,11 @@ export const useMessage = () => {
} }
const onSubmit = async (message: string) => { const onSubmit = async (message: string) => {
await chatWithWebsiteMode(message) if (chatMode === "normal") {
await normalChatMode(message)
} else {
await chatWithWebsiteMode(message)
}
} }
const stopStreamingRequest = () => { const stopStreamingRequest = () => {
@ -362,6 +366,8 @@ export const useMessage = () => {
stopStreamingRequest, stopStreamingRequest,
clearChat, clearChat,
selectedModel, selectedModel,
setSelectedModel setSelectedModel,
chatMode,
setChatMode
} }
} }

View File

@ -1,7 +1,12 @@
const _getHtml = () => { const _getHtml = () => {
const url = window.location.href const url = window.location.href
const html = document.documentElement.outerHTML const html = Array.from(document.querySelectorAll("script")).reduce(
return { url, html } (acc, script) => {
return acc.replace(script.outerHTML, "")
},
document.documentElement.outerHTML
)
return { url, html }
} }
export const getHtmlOfCurrentTab = async () => { export const getHtmlOfCurrentTab = async () => {

View File

@ -29,6 +29,8 @@ type State = {
setIsProcessing: (isProcessing: boolean) => void setIsProcessing: (isProcessing: boolean) => void
selectedModel: string | null selectedModel: string | null
setSelectedModel: (selectedModel: string) => void setSelectedModel: (selectedModel: string) => void
chatMode: "normal" | "rag"
setChatMode: (chatMode: "normal" | "rag") => void
} }
export const useStoreMessage = create<State>((set) => ({ export const useStoreMessage = create<State>((set) => ({
@ -48,5 +50,7 @@ export const useStoreMessage = create<State>((set) => ({
setIsProcessing: (isProcessing) => set({ isProcessing }), setIsProcessing: (isProcessing) => set({ isProcessing }),
defaultSpeechToTextLanguage: "en-US", defaultSpeechToTextLanguage: "en-US",
selectedModel: null, selectedModel: null,
setSelectedModel: (selectedModel) => set({ selectedModel }) setSelectedModel: (selectedModel) => set({ selectedModel }),
chatMode: "normal",
setChatMode: (chatMode) => set({ chatMode }),
})) }))