Fix styling issues in various components

src/components/Layouts/Layout.tsx

@@ -70,7 +70,7 @@ export default function OptionLayout({
     <div>
       <div>
         <div className="flex flex-col">
-          <div className="sticky top-0 z-[999] flex h-16 p-3  bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600">
+          <div className="sticky top-0 z-[999] flex h-16 p-3  bg-white border-b  dark:bg-[#171717] dark:border-gray-600">
             <div className="flex gap-2 items-center">
               {pathname !== "/" && (
                 <div>
@@ -91,7 +91,7 @@ export default function OptionLayout({
               <div>
                 <button
                   onClick={clearChat}
-                  className="inline-flex items-center rounded-lg border  dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 shadow-sm  dark:text-white disabled:opacity-50 ">
+                  className="inline-flex items-center rounded-lg border  dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800  dark:text-white disabled:opacity-50 ">
                   <SquarePen className="h-4 w-4 mr-3" />
                   New Chat
                 </button>
@@ -161,13 +161,6 @@ export default function OptionLayout({
                   {pathname === "/" && messages.length > 0 && !streaming && (
                     <ShareBtn messages={messages} />
                   )}
-                  {/* <Tooltip title="Manage Prompts">
-                    <NavLink
-                      to="/prompts"
-                      className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
-                      <Book className="w-6 h-6" />
-                    </NavLink>
-                  </Tooltip> */}
                   <Tooltip title="Github Repository">
                     <a
                       href="https://github.com/n4ze3m/page-assist"
@@ -176,13 +169,6 @@ export default function OptionLayout({
                       <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> */}
                   <Tooltip title="Manage Ollama Models">
                     <NavLink
                       to="/settings"
@@ -204,7 +190,9 @@ export default function OptionLayout({
         closeIcon={null}
         onClose={() => setSidebarOpen(false)}
         open={sidebarOpen}>
-        <Sidebar />
+        <Sidebar 
+        onClose={() => setSidebarOpen(false)}
+        />
       </Drawer>
     </div>
   )

src/components/Layouts/SettingsOptionLayout.tsx

@@ -23,15 +23,15 @@ const LinkComponent = (item: {
         to={item.href}
         className={classNames(
           item.current === item.href
-            ? "bg-gray-100 text-indigo-600 dark:bg-[#262626] dark:text-white"
+            ? "bg-gray-100 text-gray-600 dark:bg-[#262626] dark:text-white"
-            : "text-gray-700 hover:text-indigo-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
+            : "text-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
           "group flex gap-x-3 rounded-md py-2 pl-2 pr-3 text-sm leading-6 font-semibold"
         )}>
         <item.icon
           className={classNames(
             item.current === item.href
-              ? "text-indigo-600 dark:text-white"
+              ? "text-gray-600 dark:text-white"
-              : "text-gray-400 group-hover:text-indigo-600 dark:text-gray-200 dark:group-hover:text-white",
+              : "text-gray-400 group-hover:text-gray-600 dark:text-gray-200 dark:group-hover:text-white",
             "h-6 w-6 shrink-0"
           )}
           aria-hidden="true"

src/components/Option/Playground/PlaygroundEmpty.tsx

@@ -35,7 +35,7 @@ export const PlaygroundEmpty = () => {
 
   return (
     <div className="mx-auto sm:max-w-xl px-4 mt-10">
-      <div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-[#262626] shadow-sm dark:border-gray-600">
+      <div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-[#262626]  dark:border-gray-600">
         {(ollamaStatus === "pending" || isRefetching) && (
           <div className="inline-flex items-center space-x-2">
             <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>

src/components/Option/Playground/PlaygroundForm.tsx

@@ -154,7 +154,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   }
   return (
-    <div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-600">
+    <div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl  dark:border-gray-600">
       <div
         className={`h-full rounded-md shadow relative ${
           form.values.image.length === 0 ? "hidden" : "block"

src/components/Option/Settings/other.tsx

@@ -24,7 +24,7 @@ export const SettingOther = () => {
         <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
       </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-lg">
+        <span className="text-gray-500 dark:text-neutral-50">
           Speech Recognition Language
         </span>
 
@@ -44,9 +44,7 @@ export const SettingOther = () => {
         />
       </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-lg">
+        <span className="text-gray-500 dark:text-neutral-50 ">Change Theme</span>
-          Change Theme
-        </span>
 
         <button
           onClick={toggleDarkMode}
@@ -59,8 +57,9 @@ export const SettingOther = () => {
           {mode === "dark" ? "Light" : "Dark"}
         </button>
       </div>
+      <SearchModeSettings />
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-lg">
+        <span className="text-gray-500 dark:text-neutral-50 ">
           Delete Chat History
         </span>
 
@@ -83,7 +82,6 @@ export const SettingOther = () => {
           Delete
         </button>
       </div>
-      <SearchModeSettings />
     </dl>
   )
 }

src/components/Option/Settings/search-mode.tsx

@@ -19,7 +19,7 @@ export const SearchModeSettings = () => {
 
   return (
     <div className="flex flex-row justify-between">
-      <span className="text-gray-500 dark:text-gray-400 text-lg">
+      <span className="text-gray-500 dark:text-neutral-50 ">
         Perform Simple Internet Search
       </span>
 

src/components/Option/Sidebar.tsx

@@ -10,14 +10,17 @@ import { Empty, Skeleton } from "antd"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { useState } from "react"
 import { PencilIcon, Trash2 } from "lucide-react"
+import { useNavigate } from "react-router-dom"
 
-type Props = {}
+type Props = {
+  onClose: () => void
+}
 
-export const Sidebar = ({}: Props) => {
+export const Sidebar = ({ onClose }: Props) => {
   const { setMessages, setHistory, setHistoryId, historyId, clearChat } =
     useMessageOption()
-  const [processingId, setProcessingId] = useState<string>("")
   const client = useQueryClient()
+  const navigate = useNavigate()
 
   const { data: chatHistories, status } = useQuery({
     queryKey: ["fetchChatHistory"],
@@ -28,21 +31,20 @@ export const Sidebar = ({}: Props) => {
     }
   })
 
-  const { isPending: isDeleting, mutate: deleteHistory } = useMutation({
+  const { mutate: deleteHistory } = useMutation({
     mutationKey: ["deleteHistory"],
     mutationFn: deleteByHistoryId,
     onSuccess: (history_id) => {
       client.invalidateQueries({
         queryKey: ["fetchChatHistory"]
       })
-      setProcessingId("")
       if (historyId === history_id) {
         clearChat()
       }
     }
   })
 
-  const { isPending: isEditing, mutate: editHistory } = useMutation({
+  const { mutate: editHistory } = useMutation({
     mutationKey: ["editHistory"],
     mutationFn: async (data: { id: string; title: string }) => {
       return await updateHistory(data.id, data.title)
@@ -51,7 +53,6 @@ export const Sidebar = ({}: Props) => {
       client.invalidateQueries({
         queryKey: ["fetchChatHistory"]
       })
-      setProcessingId("")
     }
   })
 
@@ -86,6 +87,8 @@ export const Sidebar = ({}: Props) => {
                   setHistoryId(chat.id)
                   setHistory(formatToChatHistory(history))
                   setMessages(formatToMessage(history))
+                  navigate("/")
+                  onClose()
                 }}>
                 <span className="flex-grow truncate">{chat.title}</span>
               </button>
@@ -97,8 +100,6 @@ export const Sidebar = ({}: Props) => {
                     if (newTitle) {
                       editHistory({ id: chat.id, title: newTitle })
                     }
-
-                    setProcessingId(chat.id)
                   }}
                   className="text-gray-500 dark:text-gray-400 opacity-80">
                   <PencilIcon className="w-4 h-4" />
@@ -111,7 +112,6 @@ export const Sidebar = ({}: Props) => {
                     )
                       return
                     deleteHistory(chat.id)
-                    setProcessingId(chat.id)
                   }}
                   className="text-red-500 dark:text-red-400 opacity-80">
                   <Trash2 className=" w-4 h-4 " />