Fix styling issues in various components

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">
-          Change Theme
-        </span>
+        <span className="text-gray-500 dark:text-neutral-50 ">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 " />