Update dependencies and import paths

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pageassist",
   "displayName": "Page Assist - A Web UI for Local AI Models",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Use your locally running AI models to assist you in your web browsing.",
   "author": "n4ze3m",
   "scripts": {
@@ -24,7 +24,6 @@
     "dayjs": "^1.11.10",
     "html-to-text": "^9.0.5",
     "langchain": "^0.1.9",
-    "lucide-react": "^0.323.0",
     "plasmo": "0.84.1",
     "property-information": "^6.4.1",
     "react": "18.2.0",

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 
+          <Tooltip title="It may take a few minutes to embed the page. Please wait...">
-          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" />
-          >
-          <Squares2X2Icon 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" />

src/icons/ArrowPathIcon.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const ArrowPathIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M3 12a9 9 0 019-9 9.75 9.75 0 016.74 2.74L21 8"></path>
+      <path d="M21 3v5h-5M21 12a9 9 0 01-9 9 9.75 9.75 0 01-6.74-2.74L3 16"></path>
+      <path d="M8 16H3v5"></path>
+    </svg>
+  )
+}

src/icons/BoxesIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const BoxesIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M2.97 12.92A2 2 0 002 14.63v3.24a2 2 0 00.97 1.71l3 1.8a2 2 0 002.06 0L12 19v-5.5l-5-3-4.03 2.42zM7 16.5l-4.74-2.85M7 16.5l5-3M7 16.5v5.17M12 13.5V19l3.97 2.38a2 2 0 002.06 0l3-1.8a2 2 0 00.97-1.71v-3.24a2 2 0 00-.97-1.71L17 10.5l-5 3zM17 16.5l-5-3M17 16.5l4.74-2.85M17 16.5v5.17"></path>
+      <path d="M7.97 4.42A2 2 0 007 6.13v4.37l5 3 5-3V6.13a2 2 0 00-.97-1.71l-3-1.8a2 2 0 00-2.06 0l-3 1.8zM12 8L7.26 5.15M12 8l4.74-2.85M12 13.5V8"></path>
+    </svg>
+  )
+}

src/icons/BrainCircuit.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const BrainCircuit: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24">
+      <path d="M12 4.5a2.5 2.5 0 00-4.96-.46 2.5 2.5 0 00-1.98 3 2.5 2.5 0 00-1.32 4.24 3 3 0 00.34 5.58 2.5 2.5 0 002.96 3.08 2.5 2.5 0 004.91.05L12 20V4.5zM16 8V5c0-1.1.9-2 2-2M12 13h4"></path>
+      <path d="M12 18h6a2 2 0 012 2v1M12 8h8M20.5 8a.5.5 0 11-1 0 .5.5 0 011 0zM16.5 13a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
+      <path d="M20.5 21a.5.5 0 11-1 0 .5.5 0 011 0zM18.5 3a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
+    </svg>
+  )
+}

src/icons/CheckIcon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const CheckIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M20 6L9 17l-5-5"></path>
+    </svg>
+  )
+}

src/icons/ChevronLeft.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const ChevronLeft: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M15 18l-6-6 6-6"></path>
+    </svg>
+  )
+}

src/icons/ClipboardIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const ClipboardIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+      <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"></path>
+    </svg>
+  )
+}

src/icons/CogIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const CogIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  )
+}

src/icons/Download.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const Download: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
+      <path d="M7 10L12 15 17 10"></path>
+      <path d="M12 15L12 3"></path>
+    </svg>
+  )
+}

src/icons/GithubIcon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const GithubIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24">
+      <path d="M15 22v-4a4.8 4.8 0 00-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 004 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2"></path>
+    </svg>
+  )
+}

src/icons/MicIcon.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const MicIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M12 2a3 3 0 00-3 3v7a3 3 0 006 0V5a3 3 0 00-3-3z"></path>
+      <path d="M19 10v2a7 7 0 01-14 0v-2"></path>
+      <path d="M12 19L12 22"></path>
+    </svg>
+  )
+}

src/icons/Moon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const Moon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M12 3a6 6 0 009 9 9 9 0 11-9-9z"></path>
+    </svg>
+  )
+}

src/icons/PanelLeftIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const PanelLeftIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24">
+      <rect width="18" height="18" x="3" y="3" rx="2"></rect>
+      <path d="M9 3v18"></path>
+    </svg>
+  )
+}

src/icons/PencilSquareIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const PencilSquareIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M12 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path>
+      <path d="M18.375 2.625a2.121 2.121 0 113 3L12 15l-4 1 1-4z"></path>
+    </svg>
+  )
+}

src/icons/PhotoIcon.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const PhotoIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+      <circle cx="9" cy="9" r="2"></circle>
+      <path d="M21 15l-3.086-3.086a2 2 0 00-2.828 0L6 21"></path>
+    </svg>
+  )
+}

src/icons/RotateCcw.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const RotateCcw: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"></path>
+      <path d="M3 3v5h5"></path>
+    </svg>
+  )
+}

src/icons/SquarePen.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const SquarePen: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24">
+      <path d="M12 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path>
+      <path d="M18.375 2.625a2.121 2.121 0 113 3L12 15l-4 1 1-4z"></path>
+    </svg>
+  )
+}

src/icons/StopCircleIcon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+    className: string
+}
+
+export const StopCircleIcon: React.FC<Props> = ({ className }) => {
+    return     <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M9 9H15V15H9z"></path>
+  </svg>
+}

src/icons/Sun.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  className: string
+}
+
+export const Sun: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <circle cx="12" cy="12" r="4"></circle>
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
+    </svg>
+  )
+}

src/icons/Trash.tsx

@@ -0,0 +1,21 @@
+type Props = {
+  className: string
+}
+
+export const Trash: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M3 6h18M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+      <path d="M10 11L10 17"></path>
+      <path d="M14 11L14 17"></path>
+    </svg>
+  )
+}

src/icons/XMarkIcon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const XMarkIcon: React.FC<Props> = ({ className }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24">
+      <path d="M18 6L6 18M6 6l12 12"></path>
+    </svg>
+  )
+}

src/services/ollama.ts

@@ -78,7 +78,7 @@ export const getAllModels = async () => {
   }[]
 }
 
-export const deleteModel= async (model: string) => {
+export const deleteModel = async (model: string) => {
   const baseUrl = await getOllamaURL()
   const response = await fetch(`${cleanUrl(baseUrl)}/api/delete`, {
     method: "DELETE",
@@ -94,7 +94,7 @@ export const deleteModel= async (model: string) => {
   return response.json()
 }
 
-export const fetchModels = async () => {
+export const fetchChatModels = async () => {
   try {
     const baseUrl = await getOllamaURL()
     const response = await fetch(`${cleanUrl(baseUrl)}/api/tags`)
@@ -102,8 +102,7 @@ export const fetchModels = async () => {
       throw new Error(response.statusText)
     }
     const json = await response.json()
-
+    const models = json.models as {
-    return json.models as {
       name: string
       model: string
       modified_at: string
@@ -118,6 +117,12 @@ export const fetchModels = async () => {
         quantization_level: string
       }
     }[]
+    return models.filter((model) => {
+      return (
+        !model.details.families.includes("bert") &&
+        !model.details.families.includes("nomic-bert")
+      )
+    })
   } catch (e) {
     console.error(e)
     return []

yarn.lock

@@ -4937,11 +4937,6 @@ lru-cache@^6.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
-lucide-react@^0.323.0:
-  version "0.323.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.323.0.tgz#d1dfae7b212a29bbc513b9d7fd0ce5e8f93e6b13"
-  integrity sha512-rTXZFILl2Y4d1SG9p1Mdcf17AcPvPvpc/egFIzUrp7IUy60MUQo3Oi1mu8LGYXUVwuRZYsSMt3csHRW5mAovJg==
-
 magic-string@^0.30.0:
   version "0.30.6"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.6.tgz#996e21b42f944e45591a68f0905d6a740a12506c"