From af4bdeb0a4eb1dea33c5a891f70bcd4b599da662 Mon Sep 17 00:00:00 2001
From: mxcoppell <minxie.dallas@gmail.com>
Date: Fri, 17 Oct 2025 18:55:09 -0500
Subject: [PATCH] feat: make OpenAI Realtime API model selectable

- Add model parameter to route.ts to accept selected models
- Update voice chat state to store both voice and model in providerOptions
- Add dedicated model selector UI in voice chat settings
- Support gpt-4o-realtime-preview, gpt-realtime, and gpt-realtime-mini models
- Rename voice selector from 'Open AI' to 'Voice' for clarity
---
 src/app/api/chat/openai-realtime/route.ts |  4 +-
 src/app/store/index.ts                    |  3 +-
 src/components/chat-bot-voice.tsx         | 57 ++++++++++++++++++++++-
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/app/api/chat/openai-realtime/route.ts b/src/app/api/chat/openai-realtime/route.ts
index b3bac3f16..60ba468c2 100644
--- a/src/app/api/chat/openai-realtime/route.ts
+++ b/src/app/api/chat/openai-realtime/route.ts
@@ -43,7 +43,7 @@ export async function POST(request: NextRequest) {
       return new Response("Unauthorized", { status: 401 });
     }
 
-    const { voice, mentions, agentId } = (await request.json()) as {
+    const { model, voice, mentions, agentId } = (await request.json()) as {
       model: string;
       voice: string;
       agentId?: string;
@@ -102,7 +102,7 @@ export async function POST(request: NextRequest) {
       },
 
       body: JSON.stringify({
-        model: "gpt-4o-realtime-preview",
+        model: model || "gpt-4o-realtime-preview",
         voice: voice || "alloy",
         input_audio_transcription: {
           model: "whisper-1",
diff --git a/src/app/store/index.ts b/src/app/store/index.ts
index 44a7ba541..07052f774 100644
--- a/src/app/store/index.ts
+++ b/src/app/store/index.ts
@@ -103,7 +103,8 @@ const initialState: AppState = {
     options: {
       provider: "openai",
       providerOptions: {
-        model: OPENAI_VOICE["Alloy"],
+        voice: OPENAI_VOICE.Alloy,
+        model: "gpt-4o-realtime-preview",
       },
     },
   },
diff --git a/src/components/chat-bot-voice.tsx b/src/components/chat-bot-voice.tsx
index de692606b..58096f886 100644
--- a/src/components/chat-bot-voice.tsx
+++ b/src/components/chat-bot-voice.tsx
@@ -21,6 +21,7 @@ import {
   MessageSquareMoreIcon,
   WrenchIcon,
   ChevronRight,
+  BrainCircuitIcon,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -67,6 +68,12 @@ const prependTools: EnabledTools[] = [
   },
 ];
 
+export const OPENAI_REALTIME_MODELS = {
+  "GPT-4o Realtime": "gpt-4o-realtime-preview",
+  "GPT Realtime": "gpt-realtime",
+  "GPT Realtime Mini": "gpt-realtime-mini",
+} as const;
+
 export function ChatBotVoice() {
   const t = useTranslations("Chat");
   const [
@@ -358,13 +365,57 @@ export function ChatBotVoice() {
                     align="start"
                   >
                     <DropdownMenuGroup className="cursor-pointer">
+                      <DropdownMenuSub>
+                        <DropdownMenuSubTrigger
+                          className="flex items-center gap-2 cursor-pointer"
+                          icon=""
+                        >
+                          <BrainCircuitIcon className="size-3.5" />
+                          Model
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuPortal>
+                          <DropdownMenuSubContent>
+                            {Object.entries(OPENAI_REALTIME_MODELS).map(
+                              ([key, value]) => (
+                                <DropdownMenuItem
+                                  className="cursor-pointer flex items-center justify-between"
+                                  onClick={() =>
+                                    appStoreMutate({
+                                      voiceChat: {
+                                        ...voiceChat,
+                                        options: {
+                                          ...voiceChat.options,
+                                          providerOptions: {
+                                            ...voiceChat.options
+                                              .providerOptions,
+                                            model: value,
+                                          },
+                                        },
+                                      },
+                                    })
+                                  }
+                                  key={key}
+                                >
+                                  {key}
+
+                                  {value ===
+                                    voiceChat.options.providerOptions
+                                      ?.model && (
+                                    <CheckIcon className="size-3.5" />
+                                  )}
+                                </DropdownMenuItem>
+                              ),
+                            )}
+                          </DropdownMenuSubContent>
+                        </DropdownMenuPortal>
+                      </DropdownMenuSub>
                       <DropdownMenuSub>
                         <DropdownMenuSubTrigger
                           className="flex items-center gap-2 cursor-pointer"
                           icon=""
                         >
                           <OpenAIIcon className="size-3.5 stroke-none fill-foreground" />
-                          Open AI
+                          Voice
                         </DropdownMenuSubTrigger>
                         <DropdownMenuPortal>
                           <DropdownMenuSubContent>
@@ -377,8 +428,10 @@ export function ChatBotVoice() {
                                       voiceChat: {
                                         ...voiceChat,
                                         options: {
-                                          provider: "openai",
+                                          ...voiceChat.options,
                                           providerOptions: {
+                                            ...voiceChat.options
+                                              .providerOptions,
                                             voice: value,
                                           },
                                         },