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/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")}