From ff371d6eef3f178bd1047402dfc19c0d3b07e888 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 12 Oct 2024 16:53:42 +0530 Subject: [PATCH] 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/assets/locale/en/openai.json | 5 +-- src/components/Common/Playground/Message.tsx | 7 ++-- src/components/Common/ProviderIcon.tsx | 4 +-- .../Layouts/SettingsOptionLayout.tsx | 4 +-- .../Option/Settings/openai-fetch-model.tsx | 17 +++++++--- src/components/Option/Settings/openai.tsx | 19 +++++++++-- src/db/models.ts | 7 ++-- src/db/openai.ts | 1 + src/hooks/useMessage.tsx | 21 ++---------- src/hooks/useMessageOption.tsx | 28 +++------------- src/utils/oai-api-providers.ts | 32 +++++++++++++++++++ 11 files changed, 86 insertions(+), 59 deletions(-) create mode 100644 src/utils/oai-api-providers.ts diff --git a/src/assets/locale/en/openai.json b/src/assets/locale/en/openai.json index 48f0430..460e450 100644 --- a/src/assets/locale/en/openai.json +++ b/src/assets/locale/en/openai.json @@ -17,7 +17,7 @@ }, "baseUrl": { "label": "Base URL", - "help": "The base URL of the OpenAI API provider. eg (http://loocalhost:8080/v1)", + "help": "The base URL of the OpenAI API provider. eg (http://localhost:1234/v1)", "required": "Base URL is required.", "placeholder": "Enter base URL" }, @@ -58,5 +58,6 @@ "confirm": { "delete": "Are you sure you want to delete this model?" } - } + }, + "noModelFound": "No model found. Make sure you have added correct provider with base URL and API key." } \ No newline at end of file diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx index 268d0b6..c2d4290 100644 --- a/src/components/Common/Playground/Message.tsx +++ b/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"} @@ -135,7 +138,7 @@ export const PlaygroundMessage = (props: Props) => { key: "1", label: (
- {t('citations')} + {t("citations")}
), children: ( diff --git a/src/components/Common/ProviderIcon.tsx b/src/components/Common/ProviderIcon.tsx index 83a8cca..54ecbf0 100644 --- a/src/components/Common/ProviderIcon.tsx +++ b/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 case "custom": - return + return default: return } diff --git a/src/components/Layouts/SettingsOptionLayout.tsx b/src/components/Layouts/SettingsOptionLayout.tsx index 6365381..8d4d2cf 100644 --- a/src/components/Layouts/SettingsOptionLayout.tsx +++ b/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 }) => { diff --git a/src/components/Option/Settings/openai-fetch-model.tsx b/src/components/Option/Settings/openai-fetch-model.tsx index e847544..ce86dad 100644 --- a/src/components/Option/Settings/openai-fetch-model.tsx +++ b/src/components/Option/Settings/openai-fetch-model.tsx @@ -79,11 +79,15 @@ export const OpenAIFetchModel = ({ openaiId, setOpenModelModal }: Props) => { if (status === "pending") { return } - if (status === "error" || !data || data.length === 0) { - return
{t("noModelFound")}
+ return ( +
+

+ {t("noModelFound")} +

+
+ ) } - return (

@@ -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} +

+ {`${model?.name || model.id}`.replaceAll( + /accounts\/[^\/]+\/models\//g, + "" + )} +
))}
diff --git a/src/components/Option/Settings/openai.tsx b/src/components/Option/Settings/openai.tsx index 5178628..b3a9b1d 100644 --- a/src/components/Option/Settings/openai.tsx +++ b/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 && ( +