Update dependencies and import paths

src/components/Common/Markdown.tsx

@@ -5,9 +5,10 @@ import rehypeMathjax from "rehype-mathjax"
 import remarkMath from "remark-math"
 import ReactMarkdown from "react-markdown"
 import "property-information"
-import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline"
 import React from "react"
 import { Tooltip } from "antd"
+import { ClipboardIcon } from "~icons/ClipboardIcon"
+import { CheckIcon } from "~icons/CheckIcon"
 
 export default function Markdown({ message }: { message: string }) {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)

src/components/Common/Playground/Message.tsx

@@ -1,7 +1,8 @@
-import { CheckIcon, ClipboardIcon } from "@heroicons/react/24/outline"
 import Markdown from "../../Common/Markdown"
 import React from "react"
 import { Image } from "antd"
+import { ClipboardIcon } from "~icons/ClipboardIcon"
+import { CheckIcon } from "~icons/CheckIcon"
 
 type Props = {
   message: string

src/components/Option/Layout.tsx

@@ -1,20 +1,18 @@
 import React, { useState } from "react"
-import { CogIcon } from "@heroicons/react/24/outline"
 
 import { useLocation, NavLink } from "react-router-dom"
 import { Sidebar } from "./Sidebar"
 import { Drawer, Layout, Modal, Select, Tooltip } from "antd"
 import { useQuery } from "@tanstack/react-query"
-import { fetchModels } from "~services/ollama"
+import { fetchChatModels } from "~services/ollama"
 import { useMessageOption } from "~hooks/useMessageOption"
-import {
-  GithubIcon,
-  PanelLeftIcon,
-  BrainCircuit,
-  SquarePen,
-  ChevronLeft
-} from "lucide-react"
 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"
 
 export default function OptionLayout({
   children
@@ -30,7 +28,7 @@ export default function OptionLayout({
     isFetching: isModelsFetching
   } = useQuery({
     queryKey: ["fetchModel"],
-    queryFn: fetchModels,
+    queryFn: fetchChatModels,
     refetchInterval: 15000
   })
 

src/components/Option/Models/index.tsx

@@ -2,11 +2,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { Skeleton, Table, Tag, Tooltip, notification, Modal, Input } from "antd"
 import { bytePerSecondFormatter } from "~libs/byte-formater"
 import { deleteModel, getAllModels } from "~services/ollama"
-import { Trash, RotateCcw, Download } from "lucide-react"
 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"
 
 dayjs.extend(relativeTime)
 

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/PlaygroundForm.tsx

@@ -2,14 +2,15 @@ import { useForm } from "@mantine/form"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import React from "react"
 import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
-import PhotoIcon from "@heroicons/react/24/outline/PhotoIcon"
-import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"
 import { toBase64 } from "~libs/to-base64"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { Tooltip } from "antd"
-import { MicIcon, StopCircleIcon } from "lucide-react"
 import { Image } from "antd"
 import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
+import { MicIcon } from "~icons/MicIcon"
+import { StopCircleIcon } from "~icons/StopCircleIcon"
+import { PhotoIcon } from "~icons/PhotoIcon"
+import { XMarkIcon } from "~icons/XMarkIcon"
 
 type Props = {
   dropedFile: File | undefined

src/components/Option/Playground/PlaygroundMessage.tsx

@@ -1,7 +1,8 @@
-import { CheckIcon, ClipboardIcon } from "@heroicons/react/24/outline"
 import Markdown from "../../Common/Markdown"
 import React from "react"
 import { Image } from "antd"
+import { ClipboardIcon } from "~icons/ClipboardIcon"
+import { CheckIcon } from "~icons/CheckIcon"
 
 type Props = {
   message: string

src/components/Option/Playground/PlaygroundNewChat.tsx

@@ -1,4 +1,4 @@
-import { PencilSquareIcon } from "@heroicons/react/24/outline"
+import { PencilSquareIcon } from "~icons/PencilSquareIcon"
 import { useMessage } from "../../../hooks/useMessage"
 
 export const PlaygroundNewChat = () => {
@@ -8,7 +8,6 @@ export const PlaygroundNewChat = () => {
     setHistoryId(null)
     setMessages([])
     setHistory([])
-    // navigate(`/bot/${params.id}`);
   }
 
   return (

src/components/Option/Settings/other.tsx

@@ -3,8 +3,9 @@ import { useDarkMode } from "~hooks/useDarkmode"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { PageAssitDatabase } from "~libs/db"
 import { Select } from "antd"
-import { Sun, Moon } from "lucide-react"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
+import { Sun } from "~icons/Sun"
+import { Moon } from "~icons/Moon"
 
 export const SettingOther = () => {
   const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =

src/components/Sidepanel/Chat/empty.tsx

@@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query"
-import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
 import { useMessage } from "~hooks/useMessage"
+import { RotateCcw } from "~icons/RotateCcw"
 import {
-  fetchModels,
+  fetchChatModels,
   getOllamaURL,
   isOllamaRunning,
   setOllamaURL as saveOllamaURL
@@ -21,7 +21,7 @@ export const EmptySidePanel = () => {
     queryFn: async () => {
       const ollamaURL = await getOllamaURL()
       const isOk = await isOllamaRunning()
-      const models = await fetchModels()
+      const models = await fetchChatModels()
 
       return {
         isOk,

src/components/Sidepanel/Chat/form.tsx

@@ -3,12 +3,12 @@ import { useMutation } from "@tanstack/react-query"
 import React from "react"
 import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
 import { useMessage } from "~hooks/useMessage"
-import PhotoIcon from "@heroicons/react/24/outline/PhotoIcon"
-import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"
 import { toBase64 } from "~libs/to-base64"
-import { MicIcon } from "lucide-react"
 import { Image, Tooltip } from "antd"
 import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
+import { MicIcon } from "~icons/MicIcon"
+import { PhotoIcon } from "~icons/PhotoIcon"
+import { XMarkIcon } from "~icons/XMarkIcon"
 
 type Props = {
   dropedFile: File | undefined

src/components/Sidepanel/Chat/header.tsx

@@ -1,10 +1,10 @@
 import logoImage from "data-base64:~assets/icon.png"
-import CogIcon from "@heroicons/react/24/outline/CogIcon"
-import Squares2X2Icon from "@heroicons/react/24/outline/Squares2X2Icon"
-import { ArrowPathIcon } from "@heroicons/react/24/outline"
 import { useMessage } from "~hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
+import { CogIcon } from "~icons/CogIcon"
+import { BoxesIcon } from "~icons/BoxesIcon"
+import { ArrowPathIcon } from "~icons/ArrowPathIcon"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding } = useMessage()
   return (
@@ -16,11 +16,8 @@ export const SidepanelHeader = () => {
 
       <div className="flex items-center space-x-3">
         {isEmbedding ? (
-          <Tooltip 
-          title="It may take a few minutes to embed the page. Please wait..."
-          >
-          <Squares2X2Icon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
-
+          <Tooltip title="It may take a few minutes to embed the page. Please wait...">
+            <BoxesIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
           </Tooltip>
         ) : null}
         <button

src/components/Sidepanel/Settings/body.tsx

@@ -12,9 +12,10 @@ import {
 import { Skeleton, Radio, Select } from "antd"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { SaveButton } from "~components/Common/SaveButton"
-import { Moon, Sun } from "lucide-react"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
 import { useMessage } from "~hooks/useMessage"
+import { Sun } from "~icons/Sun"
+import { Moon } from "~icons/Moon"
 
 export const SettingsBody = () => {
   const [ollamaURL, setOllamaURL] = React.useState<string>("")

src/components/Sidepanel/Settings/header.tsx

@@ -1,11 +1,11 @@
 import logoImage from "data-base64:~assets/icon.png"
-import { ChevronLeftIcon } from "@heroicons/react/24/outline"
 import { Link } from "react-router-dom"
+import { ChevronLeft } from "~icons/ChevronLeft"
 export const SidepanelSettingsHeader = () => {
   return (
     <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700  py-4 items-center">
       <Link to="/">
-        <ChevronLeftIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+        <ChevronLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" />
       </Link>
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
         <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />