Update Lucide icons imports

src/components/Option/Layout.tsx

@@ -7,12 +7,8 @@ import { useQuery } from "@tanstack/react-query"
 import { fetchChatModels } from "~services/ollama"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { Settings } from "./Settings"
-import { GithubIcon } from "~icons/GithubIcon"
-import { PanelLeftIcon } from "~icons/PanelLeftIcon"
-import { BrainCircuit } from "~icons/BrainCircuit"
-import { SquarePen } from "~icons/SquarePen"
-import { ChevronLeft } from "~icons/ChevronLeft"
-import { CogIcon } from "~icons/CogIcon"
+import { BrainCircuit, ChevronLeft, CogIcon, GithubIcon, PanelLeftIcon, SquarePen } from "lucide-react"
+
 
 export default function OptionLayout({
   children

src/components/Option/Models/index.tsx

@@ -6,9 +6,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { useState } from "react"
 import { useForm } from "@mantine/form"
-import { Download } from "~icons/Download"
-import { RotateCcw } from "~icons/RotateCcw"
-import { Trash } from "~icons/Trash"
+import { Download, RotateCcw, Trash2 } from "lucide-react"
 
 dayjs.extend(relativeTime)
 
@@ -134,7 +132,7 @@ export const ModelsBody = () => {
                           }
                         }}
                         className="text-red-500 dark:text-red-400">
-                        <Trash className="w-5 h-5" />
+                        <Trash2 className="w-5 h-5" />
                       </button>
                     </Tooltip>
                     <Tooltip title="Re-Pull Model">

src/components/Option/Playground/PlaygroundEmpty.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query"
+import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
-import { RotateCcw } from "~icons/RotateCcw"
 import {
   getOllamaURL,
   isOllamaRunning,

src/components/Option/Playground/PlaygroundNewChat.tsx

@@ -1,4 +1,4 @@
-import { PencilSquareIcon } from "~icons/PencilSquareIcon"
+import { PencilIcon } from "lucide-react"
 import { useMessage } from "../../../hooks/useMessage"
 
 export const PlaygroundNewChat = () => {
@@ -14,7 +14,7 @@ export const PlaygroundNewChat = () => {
     <button
       onClick={handleClick}
       className="flex w-full border bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100 rounded-md p-2 dark:border-gray-800">
-      <PencilSquareIcon className="mx-3 h-5 w-5" aria-hidden="true" />
+      <PencilIcon className="mx-3 h-5 w-5" aria-hidden="true" />
       <span className="inline-flex font-semibol text-white text-sm">
         New Chat
       </span>

src/components/Option/Settings/other.tsx

@@ -4,8 +4,7 @@ import { useMessageOption } from "~hooks/useMessageOption"
 import { PageAssitDatabase } from "~libs/db"
 import { Select } from "antd"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
-import { Sun } from "~icons/Sun"
-import { Moon } from "~icons/Moon"
+import { MoonIcon, SunIcon } from "lucide-react"
 
 export const SettingOther = () => {
   const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -46,9 +45,9 @@ export const SettingOther = () => {
           onClick={toggleDarkMode}
           className={`inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm  dark:bg-white dark:text-gray-800 disabled:opacity-50 `}>
           {mode === "dark" ? (
-            <Sun className="w-4 h-4 mr-2" />
+            <SunIcon className="w-4 h-4 mr-2" />
           ) : (
-            <Moon className="w-4 h-4 mr-2" />
+            <MoonIcon className="w-4 h-4 mr-2" />
           )}
           {mode === "dark" ? "Light" : "Dark"}
         </button>

src/components/Option/Sidebar.tsx

@@ -6,13 +6,10 @@ import {
   deleteByHistoryId,
   updateHistory
 } from "~libs/db"
-import { Dropdown, Empty, Skeleton, Spin } from "antd"
+import { Empty, Skeleton } from "antd"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { Trash } from "~icons/Trash"
-import { Fragment, useState } from "react"
-import { PencilIcon } from "~icons/PencilIcon"
-import { EllipsisHorizontalIcon } from "~icons/EllipsisHorizontalIcon"
-import { Menu, Transition } from "@headlessui/react"
+import { useState } from "react"
+import { PencilIcon, Trash2 } from "lucide-react"
 
 type Props = {}
 
@@ -117,7 +114,7 @@ export const Sidebar = ({}: Props) => {
                     setProcessingId(chat.id)
                   }}
                   className="text-red-500 dark:text-red-400 opacity-80">
-                  <Trash className=" w-4 h-4 " />
+                  <Trash2 className=" w-4 h-4 " />
                 </button>
               </div>
             </div>