Remove unused dependencies and update routing

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]}
-        // rehypePlugins={[rehypeMathjax]}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        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 { Dialog, Menu, Transition } from "@headlessui/react"
-import {
-  Bars3BottomLeftIcon,
-  XMarkIcon,
-  TagIcon,
-  CircleStackIcon,
-  CogIcon,
-  ChatBubbleLeftIcon,
-  Bars3Icon,
-  Bars4Icon,
-  ArrowPathIcon
-} from "@heroicons/react/24/outline"
-import logoImage from "data-base64:~assets/icon.png"
+import React, { useState } from "react"
+import { CogIcon } from "@heroicons/react/24/outline"
 
-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">
-          <a
-            href="https://github.com/n4ze3m/page-assist"
-            target="_blank"
-            className="text-gray-500 dark:text-gray-400">
-            <GithubIcon className="w-6 h-6" />
-          </a>
+        <div className="flex gap-4 items-center">
+          <Tooltip title="Github Repository">
+            <a
+              href="https://github.com/n4ze3m/page-assist"
+              target="_blank"
+              className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+              <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>
+  )
+}