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