Update SidepanelChat imports and add SidepanelSettingsHeader route
This commit is contained in:
		
							parent
							
								
									ca84cc3b64
								
							
						
					
					
						commit
						23e488770d
					
				| @ -1,7 +1,7 @@ | |||||||
| import React from "react" | import React from "react" | ||||||
| import { PlaygroundMessage } from "~components/Common/Playground/Message" | import { PlaygroundMessage } from "~components/Common/Playground/Message" | ||||||
| import { useMessage } from "~hooks/useMessage" | import { useMessage } from "~hooks/useMessage" | ||||||
| import { EmptySidePanel } from "./empty" | import { EmptySidePanel } from "../Chat/empty" | ||||||
| 
 | 
 | ||||||
| export const SidePanelBody = () => { | export const SidePanelBody = () => { | ||||||
|   const { messages } = useMessage() |   const { messages } = useMessage() | ||||||
| @ -2,6 +2,7 @@ import logoImage from "data-base64:~assets/icon.png" | |||||||
| import CogIcon from "@heroicons/react/24/outline/CogIcon" | import CogIcon from "@heroicons/react/24/outline/CogIcon" | ||||||
| import { ArrowPathIcon } from "@heroicons/react/24/outline" | import { ArrowPathIcon } from "@heroicons/react/24/outline" | ||||||
| import { useMessage } from "~hooks/useMessage" | import { useMessage } from "~hooks/useMessage" | ||||||
|  | import { Link } from "react-router-dom" | ||||||
| export const SidepanelHeader = () => { | export const SidepanelHeader = () => { | ||||||
|   const { clearChat } = useMessage() |   const { clearChat } = useMessage() | ||||||
|   return ( |   return ( | ||||||
| @ -19,7 +20,9 @@ export const SidepanelHeader = () => { | |||||||
|           className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700"> |           className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700"> | ||||||
|           <ArrowPathIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" /> |           <ArrowPathIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" /> | ||||||
|         </button> |         </button> | ||||||
|         <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" /> |         <Link to="/settings"> | ||||||
|  |           <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" /> | ||||||
|  |         </Link> | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|   ) |   ) | ||||||
							
								
								
									
										16
									
								
								src/components/Sidepanel/Settings/header.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								src/components/Sidepanel/Settings/header.tsx
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,16 @@ | |||||||
|  | import logoImage from "data-base64:~assets/icon.png" | ||||||
|  | import { ChevronLeftIcon } from "@heroicons/react/24/outline" | ||||||
|  | import { Link } from "react-router-dom" | ||||||
|  | export const SidepanelSettingsHeader = () => { | ||||||
|  |   return ( | ||||||
|  |     <div className="flex px-3 justify-start gap-3 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center"> | ||||||
|  |       <Link to="/"> | ||||||
|  |         <ChevronLeftIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" /> | ||||||
|  |       </Link> | ||||||
|  |       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white"> | ||||||
|  |         <img className="h-6 w-auto" src={logoImage} alt="Page Assist" /> | ||||||
|  |         <span className="ml-1 text-sm ">Page Assist</span> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   ) | ||||||
|  | } | ||||||
| @ -1,25 +0,0 @@ | |||||||
| import { HumanMessage, AIMessage } from "@langchain/core/messages" |  | ||||||
| import { ChatMessageHistory } from "langchain/stores/message/in_memory" |  | ||||||
| import { ChatOllama } from "@langchain/community/chat_models/ollama" |  | ||||||
| import { getOllamaURL } from "~services/ollama" |  | ||||||
| import { cleanUrl } from "~libs/clean-url" |  | ||||||
| 
 |  | ||||||
| export class NormalChatOllama { |  | ||||||
|   ollama: ChatOllama |  | ||||||
| 
 |  | ||||||
|   async _init() { |  | ||||||
|     const ollamaURL = await getOllamaURL() |  | ||||||
|     this.ollama = new ChatOllama({ |  | ||||||
|       baseUrl: cleanUrl(ollamaURL), |  | ||||||
|       model: "qwen:1.8b-chat" |  | ||||||
|     }) |  | ||||||
|   } |  | ||||||
| 
 |  | ||||||
|   constructor() { |  | ||||||
|     this._init() |  | ||||||
|   } |  | ||||||
| 
 |  | ||||||
|   async send(message: HumanMessage) { |  | ||||||
|     if (!this.ollama) return null |  | ||||||
|   } |  | ||||||
| } |  | ||||||
| @ -1,5 +1,6 @@ | |||||||
| import { Route, Routes } from "react-router-dom" | import { Route, Routes } from "react-router-dom" | ||||||
| import { SidepanelChat } from "./sidepanel-chat" | import { SidepanelChat } from "./sidepanel-chat" | ||||||
|  | import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header" | ||||||
| 
 | 
 | ||||||
| export const Routing = () => <Routes></Routes> | export const Routing = () => <Routes></Routes> | ||||||
| 
 | 
 | ||||||
| @ -7,6 +8,7 @@ export const SidepanelRouting = () => ( | |||||||
|   <div className="dark"> |   <div className="dark"> | ||||||
|     <Routes> |     <Routes> | ||||||
|       <Route path="/" element={<SidepanelChat />} /> |       <Route path="/" element={<SidepanelChat />} /> | ||||||
|  |       <Route path="/settings" element={<SidepanelSettingsHeader />} />   | ||||||
|     </Routes> |     </Routes> | ||||||
|   </div> |   </div> | ||||||
| ) | ) | ||||||
|  | |||||||
| @ -1,6 +1,6 @@ | |||||||
| import { SidePanelBody } from "~components/Sidepanel/body" | import { SidePanelBody } from "~components/Sidepanel/Chat/body" | ||||||
| import { SidepanelForm } from "~components/Sidepanel/form" | import { SidepanelForm } from "~components/Sidepanel/Chat/form" | ||||||
| import { SidepanelHeader } from "~components/Sidepanel/header" | import { SidepanelHeader } from "~components/Sidepanel/Chat/header" | ||||||
| 
 | 
 | ||||||
| export const SidepanelChat = () => { | export const SidepanelChat = () => { | ||||||
|   return ( |   return ( | ||||||
|  | |||||||
							
								
								
									
										11
									
								
								src/routes/sidepanel-settings.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								src/routes/sidepanel-settings.tsx
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,11 @@ | |||||||
|  | import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header" | ||||||
|  | 
 | ||||||
|  | export const SidepanelSettings = () => { | ||||||
|  |   return ( | ||||||
|  |     <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl"> | ||||||
|  |       <div className="sticky top-0 z-10"> | ||||||
|  |         <SidepanelSettingsHeader /> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   ) | ||||||
|  | } | ||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user