Remove unused dependencies and update routing

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.18.4",
-    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@langchain/community": "^0.0.21",
     "@langchain/core": "^0.1.22",

src/components/Common/Markdown.tsx

@@ -24,8 +24,8 @@ export default function Markdown({ message }: { message: string }) {
     <React.Fragment>
       <ReactMarkdown
         className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
-        // remarkPlugins={[remarkGfm, remarkMath]}
+        remarkPlugins={[remarkGfm, remarkMath]}
-        // rehypePlugins={[rehypeMathjax]}
+        rehypePlugins={[rehypeMathjax]}
         components={{
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || "")

src/components/Option/Layout.tsx

@@ -1,51 +1,20 @@
-import React, { Fragment, useState } from "react"
+import React, { useState } from "react"
-import { Dialog, Menu, Transition } from "@headlessui/react"
+import { CogIcon } from "@heroicons/react/24/outline"
-import {
-  Bars3BottomLeftIcon,
-  XMarkIcon,
-  TagIcon,
-  CircleStackIcon,
-  CogIcon,
-  ChatBubbleLeftIcon,
-  Bars3Icon,
-  Bars4Icon,
-  ArrowPathIcon
-} from "@heroicons/react/24/outline"
-import logoImage from "data-base64:~assets/icon.png"
 
-import { Link, useParams, useLocation, useNavigate } from "react-router-dom"
+import { useLocation, NavLink } from "react-router-dom"
 import { Sidebar } from "./Sidebar"
-import { Drawer, Layout, Modal, Select } from "antd"
+import { Drawer, Layout, Modal, Select, Tooltip } from "antd"
 import { useQuery } from "@tanstack/react-query"
 import { fetchModels } from "~services/ollama"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { GithubIcon, PanelLeftIcon, Settings2, SquarePen } from "lucide-react"
+import {
+  GithubIcon,
+  PanelLeftIcon,
+  BrainCircuit,
+  SquarePen,
+  ChevronLeft
+} from "lucide-react"
 import { Settings } from "./Settings"
-import { useDarkMode } from "~hooks/useDarkmode"
-
-const navigation = [
-  { name: "Embed", href: "/bot/:id", icon: TagIcon },
-  {
-    name: "Preview",
-    href: "/bot/:id/preview",
-    icon: ChatBubbleLeftIcon
-  },
-  {
-    name: "Data Sources",
-    href: "/bot/:id/data-sources",
-    icon: CircleStackIcon
-  },
-  {
-    name: "Settings",
-    href: "/bot/:id/settings",
-    icon: CogIcon
-  }
-]
-
-//@ts-ignore -
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ")
-}
 
 export default function OptionLayout({
   children
@@ -58,19 +27,29 @@ export default function OptionLayout({
   const {
     data: models,
     isLoading: isModelsLoading,
-    refetch: refetchModels,
     isFetching: isModelsFetching
   } = useQuery({
     queryKey: ["fetchModel"],
-    queryFn: fetchModels
+    queryFn: fetchModels,
+    refetchInterval: 15000
   })
 
+  const { pathname } = useLocation()
   const { selectedModel, setSelectedModel, clearChat } = useMessageOption()
 
   return (
     <Layout className="bg-white dark:bg-[#171717] md:flex">
       <div className="flex items-center p-3 fixed flex-row justify-between border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-[#171717] w-full z-10">
         <div className="flex items-center flex-row gap-3">
+          {pathname !== "/" && (
+            <div>
+              <NavLink
+                to="/"
+                className="text-gray-500 items-center dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+                <ChevronLeft className="w-6 h-6" />
+              </NavLink>
+            </div>
+          )}
           <div>
             <button
               className="text-gray-500 dark:text-gray-400"
@@ -109,13 +88,22 @@ export default function OptionLayout({
             />
           </div>
         </div>
-        <div className="flex gap-3 items-center">
+        <div className="flex gap-4 items-center">
-          <a
+          <Tooltip title="Github Repository">
-            href="https://github.com/n4ze3m/page-assist"
+            <a
-            target="_blank"
+              href="https://github.com/n4ze3m/page-assist"
-            className="text-gray-500 dark:text-gray-400">
+              target="_blank"
-            <GithubIcon className="w-6 h-6" />
+              className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-          </a>
+              <GithubIcon className="w-6 h-6" />
+            </a>
+          </Tooltip>
+          <Tooltip title="Manage Ollama Models">
+            <NavLink
+              to="/models"
+              className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+              <BrainCircuit className="w-6 h-6" />
+            </NavLink>
+          </Tooltip>
           <button
             onClick={() => setOpen(true)}
             className="text-gray-500 dark:text-gray-400">

src/components/Option/Playground/PlaygroundNewChat.tsx

@@ -4,7 +4,6 @@ import { useMessage } from "../../../hooks/useMessage"
 export const PlaygroundNewChat = () => {
   const { setHistory, setMessages, setHistoryId } = useMessage()
 
-
   const handleClick = () => {
     setHistoryId(null)
     setMessages([])

src/hooks/useMessageOption.tsx

@@ -11,6 +11,7 @@ import {
 } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~store/option"
 import { saveHistory, saveMessage } from "~libs/db"
+import { useNavigate } from "react-router-dom"
 
 export type BotResponse = {
   bot: {
@@ -94,6 +95,8 @@ export const useMessageOption = () => {
     setSpeechToTextLanguage
   } = useStoreMessageOption()
 
+  const navigate = useNavigate()
+
   const abortControllerRef = React.useRef<AbortController | null>(null)
 
   const clearChat = () => {
@@ -105,6 +108,7 @@ export const useMessageOption = () => {
     setIsLoading(false)
     setIsProcessing(false)
     setStreaming(false)
+    navigate("/")
   }
 
   const normalChatMode = async (message: string, image: string) => {

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { SidepanelChat } from "./sidepanel-chat"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { SidepanelSettings } from "./sidepanel-settings"
 import { OptionIndex } from "./option-index"
+import { OptionModal } from "./option-model"
 
 export const OptionRouting = () => {
   const { mode } = useDarkMode()
@@ -11,6 +12,7 @@ export const OptionRouting = () => {
     <div className={mode === "dark" ? "dark" : "light"}>
       <Routes>
         <Route path="/" element={<OptionIndex />} />
+        <Route path="/models" element={<OptionModal />} />
       </Routes>
     </div>
   )

src/routes/option-index.tsx

@@ -1,7 +1,5 @@
 import OptionLayout from "~components/Option/Layout"
 import { Playground } from "~components/Option/Playground/Playground"
-import { SettingsBody } from "~components/Sidepanel/Settings/body"
-import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
 
 export const OptionIndex = () => {
   return (

src/routes/option-model.tsx

@@ -0,0 +1,9 @@
+import OptionLayout from "~components/Option/Layout"
+
+export const OptionModal = () => {
+  return (
+    <OptionLayout>
+        yo
+    </OptionLayout>
+  )
+}

yarn.lock

@@ -456,14 +456,6 @@
   dependencies:
     cross-spawn "^7.0.3"
 
-"@headlessui/react@^1.7.18":
-  version "1.7.18"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
-  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
-  dependencies:
-    "@tanstack/react-virtual" "^3.0.0-beta.60"
-    client-only "^0.0.1"
-
 "@heroicons/react@^2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.1.tgz#422deb80c4d6caf3371aec6f4bee8361a354dc13"
@@ -2314,18 +2306,6 @@
   dependencies:
     "@tanstack/query-core" "5.18.0"
 
-"@tanstack/react-virtual@^3.0.0-beta.60":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.2.tgz#e5a979f2585d3f583944840319cddf2c2d1b0e51"
-  integrity sha512-9XbRLPKgnhMwwmuQMnJMv+5a9sitGNCSEtf/AZXzmJdesYk7XsjYHaEDny+IrJzvPNwZliIIDwCRiaUqR3zzCA==
-  dependencies:
-    "@tanstack/virtual-core" "3.0.0"
-
-"@tanstack/virtual-core@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b"
-  integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==
-
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -3098,11 +3078,6 @@ cli-width@^4.1.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-4.1.0.tgz#42daac41d3c254ef38ad8ac037672130173691c5"
   integrity sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==
 
-client-only@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
-  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
-
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"