feat: add OpenAI model support

Adds support for OpenAI models, allowing users to leverage various OpenAI models directly from the application. This includes custom OpenAI models and OpenAI-specific configurations for seamless integration.

src/components/Common/ModelSelect.tsx

@@ -38,10 +38,10 @@ export const ModelSelect: React.FC = () => {
                   </div>
                 ),
                 onClick: () => {
-                  if (selectedModel === d.name) {
+                  if (selectedModel === d.model) {
                     setSelectedModel(null)
                   } else {
-                    setSelectedModel(d.name)
+                    setSelectedModel(d.model)
                   }
                 }
               })) || [],

src/components/Common/ProviderIcon.tsx

@@ -1,4 +1,4 @@
-import { ChromeIcon } from "lucide-react"
+import { ChromeIcon, CloudCog } from "lucide-react"
 import { OllamaIcon } from "../Icons/Ollama"
 
 export const ProviderIcons = ({
@@ -11,6 +11,8 @@ export const ProviderIcons = ({
   switch (provider) {
     case "chrome":
       return <ChromeIcon className={className} />
+    case "custom":
+      return <CloudCog className={className} />
     default:
       return <OllamaIcon className={className} />
   }

src/components/Layouts/Header.tsx

@@ -11,7 +11,6 @@ import {
 } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { useLocation, NavLink } from "react-router-dom"
-import { OllamaIcon } from "../Icons/Ollama"
 import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge"
 import { ModelSelect } from "../Common/ModelSelect"
 import { PromptSelect } from "../Common/PromptSelect"

src/components/Option/Models/index.tsx

@@ -1,9 +1,5 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useMutation, } from "@tanstack/react-query"
 import {
-  Skeleton,
-  Table,
-  Tag,
-  Tooltip,
   notification,
   Modal,
   Input,
@@ -23,7 +19,7 @@ dayjs.extend(relativeTime)
 export const ModelsBody = () => {
   const [open, setOpen] = useState(false)
   const [segmented, setSegmented] = useState<string>("ollama")
-  
+
   const { t } = useTranslation(["settings", "common", "openai"])
 
   const form = useForm({