feat: Add OpenAI Provider Selection

Add a provider selection dropdown to the OpenAI settings, enabling users to choose from pre-configured options like "Azure" or "Custom." This streamlines setup and allows for more flexibility in configuring OpenAI API endpoints. The dropdown pre-populates base URLs and names based on the selected provider.

The dropdown also automatically populates base URLs and names based on the selected provider, further simplifying the configuration process.

src/components/Common/Playground/Message.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next"
 import { MessageSource } from "./MessageSource"
 import { useTTS } from "@/hooks/useTTS"
 import { tagColors } from "@/utils/color"
+import { removeModelSuffix } from "@/db/models"
 
 type Props = {
   message: string
@@ -69,7 +70,9 @@ export const PlaygroundMessage = (props: Props) => {
               {props.isBot
                 ? props.name === "chrome::gemini-nano::page-assist"
                   ? "Gemini Nano"
-                  : props.name
+                  : removeModelSuffix(
+                      props.name?.replaceAll(/accounts\/[^\/]+\/models\//g, "")
+                    )
                 : "You"}
             </span>
 
@@ -135,7 +138,7 @@ export const PlaygroundMessage = (props: Props) => {
                     key: "1",
                     label: (
                       <div className="italic text-gray-500 dark:text-gray-400">
-                        {t('citations')}
+                        {t("citations")}
                       </div>
                     ),
                     children: (

src/components/Common/ProviderIcon.tsx

@@ -1,4 +1,4 @@
-import { ChromeIcon, CloudCog } from "lucide-react"
+import { ChromeIcon, CpuIcon } from "lucide-react"
 import { OllamaIcon } from "../Icons/Ollama"
 
 export const ProviderIcons = ({
@@ -12,7 +12,7 @@ export const ProviderIcons = ({
     case "chrome":
       return <ChromeIcon className={className} />
     case "custom":
-      return <CloudCog className={className} />
+      return <CpuIcon className={className} />
     default:
       return <OllamaIcon className={className} />
   }

src/components/Layouts/SettingsOptionLayout.tsx

@@ -7,7 +7,7 @@ import {
   InfoIcon,
   CombineIcon,
   ChromeIcon,
-  CloudCogIcon
+  CpuIcon
 } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
@@ -93,7 +93,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
               <LinkComponent
                 href="/settings/openai"
                 name={t("openai:settings")}
-                icon={CloudCogIcon}
+                icon={CpuIcon}
                 current={location.pathname}
                 beta
               />

src/components/Option/Settings/openai-fetch-model.tsx

@@ -79,11 +79,15 @@ export const OpenAIFetchModel = ({ openaiId, setOpenModelModal }: Props) => {
   if (status === "pending") {
     return <Spin />
   }
-
   if (status === "error" || !data || data.length === 0) {
-    return <div>{t("noModelFound")}</div>
+    return (
+      <div className="flex items-center justify-center h-40">
+        <p className="text-md text-center text-gray-600 dark:text-gray-300">
+          {t("noModelFound")}
+        </p>
+      </div>
+    )
   }
-
   return (
     <div className="space-y-4">
       <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -116,7 +120,12 @@ export const OpenAIFetchModel = ({ openaiId, setOpenModelModal }: Props) => {
               key={model.id}
               checked={selectedModels.includes(model.id)}
               onChange={(e) => handleModelSelect(model.id, e.target.checked)}>
-              {model?.name || model.id}
+              <div className="max-w-[200px] truncate">
+                {`${model?.name || model.id}`.replaceAll(
+                  /accounts\/[^\/]+\/models\//g,
+                  ""
+                )}
+              </div>
             </Checkbox>
           ))}
         </div>

src/components/Option/Settings/openai.tsx

@@ -1,4 +1,4 @@
-import { Form, Input, Modal, Table, message, Tooltip } from "antd"
+import { Form, Input, Modal, Table, message, Tooltip, Select } from "antd"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import {
@@ -10,6 +10,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { Pencil, Trash2, RotateCwIcon } from "lucide-react"
 import { OpenAIFetchModel } from "./openai-fetch-model"
+import { OAI_API_PROVIDERS } from "@/utils/oai-api-providers"
 
 export const OpenAIApp = () => {
   const { t } = useTranslation("openai")
@@ -182,11 +183,25 @@ export const OpenAIApp = () => {
             form.resetFields()
           }}
           footer={null}>
+          {!editingConfig && (
+            <Select
+              defaultValue="custom"
+              onSelect={(e) => {
+                const value = OAI_API_PROVIDERS.find((item) => item.value === e)
+                form.setFieldsValue({
+                  baseUrl: value?.baseUrl,
+                  name: value?.label
+                })
+              }}
+              className="w-full !mb-4"
+              options={OAI_API_PROVIDERS}
+            />
+          )}
           <Form
             form={form}
             layout="vertical"
             onFinish={handleSubmit}
-            initialValues={editingConfig}>
+            initialValues={{ ...editingConfig }}>
             <Form.Item
               name="name"
               label={t("modal.name.label")}