From b6bc617e5e24c0ae973416d0b343c05843f594c9 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Fri, 31 May 2024 13:50:05 +0530 Subject: [PATCH] refactor header --- src/components/Layouts/Header.tsx | 221 ++++++++++++++++++++++++++++ src/components/Layouts/Layout.tsx | 230 ++---------------------------- 2 files changed, 233 insertions(+), 218 deletions(-) create mode 100644 src/components/Layouts/Header.tsx diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx new file mode 100644 index 0000000..af180c9 --- /dev/null +++ b/src/components/Layouts/Header.tsx @@ -0,0 +1,221 @@ +import { useStorage } from "@plasmohq/storage/hook" +import { + BrainCog, + ChevronLeft, + CogIcon, + ComputerIcon, + GithubIcon, + PanelLeftIcon, + SquarePen, + ZapIcon +} from "lucide-react" +import { useTranslation } from "react-i18next" +import { useLocation, NavLink } from "react-router-dom" +import { OllamaIcon } from "../Icons/Ollama" +import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge" +import { ModelSelect } from "../Common/ModelSelect" +import { PromptSelect } from "../Common/PromptSelect" +import { useQuery } from "@tanstack/react-query" +import { fetchChatModels } from "~/services/ollama" +import { useMessageOption } from "~/hooks/useMessageOption" +import { Select, Tooltip } from "antd" +import { getAllPrompts } from "@/db" +import { ShareBtn } from "~/components/Common/ShareBtn" +type Props = { + setSidebarOpen: (open: boolean) => void + setOpenModelSettings: (open: boolean) => void +} + +export const Header: React.FC = ({ + setOpenModelSettings, + setSidebarOpen +}) => { + const { t } = useTranslation(["option", "common"]) + const [shareModeEnabled] = useStorage("shareMode", false) + const [hideCurrentChatModelSettings] = useStorage( + "hideCurrentChatModelSettings", + false + ) + const { + selectedModel, + setSelectedModel, + clearChat, + selectedSystemPrompt, + setSelectedQuickPrompt, + setSelectedSystemPrompt, + messages, + streaming + } = useMessageOption() + const { + data: models, + isLoading: isModelsLoading, + isFetching: isModelsFetching + } = useQuery({ + queryKey: ["fetchModel"], + queryFn: () => fetchChatModels({ returnEmpty: true }), + refetchInterval: 15000 + }) + + const { data: prompts, isLoading: isPromptLoading } = useQuery({ + queryKey: ["fetchAllPromptsLayout"], + queryFn: getAllPrompts + }) + + const { pathname } = useLocation() + + const getPromptInfoById = (id: string) => { + return prompts?.find((prompt) => prompt.id === id) + } + + const handlePromptChange = (value?: string) => { + if (!value) { + setSelectedSystemPrompt(undefined) + setSelectedQuickPrompt(undefined) + return + } + const prompt = getPromptInfoById(value) + if (prompt?.is_system) { + setSelectedSystemPrompt(prompt.id) + } else { + setSelectedSystemPrompt(undefined) + setSelectedQuickPrompt(prompt!.content) + } + } + + return ( +
+
+ {pathname !== "/" && ( +
+ + + +
+ )} +
+ +
+
+ +
+ + {"/"} + +
+ + //@ts-ignore + option.label.key.toLowerCase().indexOf(input.toLowerCase()) >= 0 + } + options={prompts?.map((prompt) => ({ + label: ( + + {prompt.is_system ? ( + + ) : ( + + )} + {prompt.title} + + ), + value: prompt.id + }))} + /> +
+
+ +
+ +
+
+
+
+ {!hideCurrentChatModelSettings && ( + + + + )} + {pathname === "/" && + messages.length > 0 && + !streaming && + shareModeEnabled && } + + + + + + + + + + +
+
+
+
+ ) +} diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx index eeb8e5b..699fce0 100644 --- a/src/components/Layouts/Layout.tsx +++ b/src/components/Layouts/Layout.tsx @@ -1,30 +1,12 @@ import React, { useState } from "react" -import { useLocation, NavLink } from "react-router-dom" import { Sidebar } from "../Option/Sidebar" -import { Drawer, Select, Tooltip } from "antd" -import { useQuery } from "@tanstack/react-query" -import { fetchChatModels, getAllModels } from "~/services/ollama" -import { useMessageOption } from "~/hooks/useMessageOption" -import { - BrainCog, - ChevronLeft, - CogIcon, - ComputerIcon, - GithubIcon, - PanelLeftIcon, - SquarePen, - ZapIcon -} from "lucide-react" -import { getAllPrompts } from "@/db" -import { ShareBtn } from "~/components/Common/ShareBtn" +import { Drawer } from "antd" + import { useTranslation } from "react-i18next" -import { OllamaIcon } from "../Icons/Ollama" -import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge" -import { useStorage } from "@plasmohq/storage/hook" -import { ModelSelect } from "../Common/ModelSelect" -import { PromptSelect } from "../Common/PromptSelect" + import { CurrentChatModelSettings } from "../Common/Settings/CurrentChatModelSettings" +import { Header } from "./Header" export default function OptionLayout({ children @@ -33,204 +15,16 @@ export default function OptionLayout({ }) { const [sidebarOpen, setSidebarOpen] = useState(false) const { t } = useTranslation(["option", "common"]) - const [shareModeEnabled] = useStorage("shareMode", false) const [openModelSettings, setOpenModelSettings] = useState(false) - const [hideCurrentChatModelSettings] = useStorage( - "hideCurrentChatModelSettings", - false - ) - - const { - selectedModel, - setSelectedModel, - clearChat, - selectedSystemPrompt, - setSelectedQuickPrompt, - setSelectedSystemPrompt, - messages, - streaming - } = useMessageOption() - - const { - data: models, - isLoading: isModelsLoading, - isFetching: isModelsFetching - } = useQuery({ - queryKey: ["fetchModel"], - queryFn: () => fetchChatModels({ returnEmpty: true }), - refetchInterval: 15000 - }) - - const { data: prompts, isLoading: isPromptLoading } = useQuery({ - queryKey: ["fetchAllPromptsLayout"], - queryFn: getAllPrompts - }) - - const { pathname } = useLocation() - - const getPromptInfoById = (id: string) => { - return prompts?.find((prompt) => prompt.id === id) - } - - const handlePromptChange = (value?: string) => { - if (!value) { - setSelectedSystemPrompt(undefined) - setSelectedQuickPrompt(undefined) - return - } - const prompt = getPromptInfoById(value) - if (prompt?.is_system) { - setSelectedSystemPrompt(prompt.id) - } else { - setSelectedSystemPrompt(undefined) - setSelectedQuickPrompt(prompt!.content) - } - } return ( -
-
-
-
-
- {pathname !== "/" && ( -
- - - -
- )} -
- -
-
- -
- - {"/"} - -
- - //@ts-ignore - option.label.key - .toLowerCase() - .indexOf(input.toLowerCase()) >= 0 - } - options={prompts?.map((prompt) => ({ - label: ( - - {prompt.is_system ? ( - - ) : ( - - )} - {prompt.title} - - ), - value: prompt.id - }))} - /> -
-
- -
- -
-
-
-
- {!hideCurrentChatModelSettings && ( - - - - )} - {pathname === "/" && - messages.length > 0 && - !streaming && - shareModeEnabled && } - - - - - - - - - - -
-
-
-
-
{children}
-
+ <> +
+
+
{children}
-
+ ) }