Add chat mode functionality to EmptySidePanel component
This commit is contained in:
		
							parent
							
								
									28361c47e6
								
							
						
					
					
						commit
						84f4205b56
					
				| @ -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> | ||||||
|  | |||||||
| @ -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 | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | |||||||
| @ -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 () => { | ||||||
|  | |||||||
| @ -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 }), | ||||||
| })) | })) | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user