ChatGPTNextWeb · LauraGPT · Jul 23, 2026
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -48,6 +48,8 @@ import PluginIcon from "../icons/plugin.svg";
 import ShortcutkeyIcon from "../icons/shortcutkey.svg";
 import McpToolIcon from "../icons/tool.svg";
 import HeadphoneIcon from "../icons/headphone.svg";
+import VoiceIcon from "../icons/voice.svg";
+import VoiceOffIcon from "../icons/voice-off.svg";
 import {
   BOT_HELLO,
   ChatMessage,
@@ -118,6 +120,12 @@ import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
 import { ClientApi, MultimodalContent } from "../client/api";
 import { createTTSPlayer } from "../utils/audio";
+import {
+  ActiveAudioRecording,
+  mergeTranscriptionInput,
+  startAudioRecording,
+  transcribeAudio,
+} from "../utils/transcription";
 import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
 
 import { isEmpty } from "lodash-es";
@@ -501,14 +509,61 @@ export function ChatActions(props: {
   hitBottom: boolean;
   uploading: boolean;
   setShowShortcutKeyModal: React.Dispatch<React.SetStateAction<boolean>>;
-  setUserInput: (input: string) => void;
+  setUserInput: React.Dispatch<React.SetStateAction<string>>;
   setShowChatSidePanel: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const config = useAppConfig();
   const navigate = useNavigate();
   const chatStore = useChatStore();
   const pluginStore = usePluginStore();
   const session = chatStore.currentSession();
+  const accessStore = useAccessStore();
+  const recordingRef = useRef<ActiveAudioRecording | null>(null);
+  const [transcriptionStatus, setTranscriptionStatus] = useState<
+    "idle" | "recording" | "transcribing"
+  >("idle");
+
+  useEffect(() => {
+    return () => {
+      const recording = recordingRef.current;
+      recordingRef.current = null;
+      if (recording) {
+        void recording.stop().catch(() => undefined);
+      }
+    };
+  }, []);
+
+  async function toggleTranscription() {
+    if (transcriptionStatus === "transcribing") return;
+
+    try {
+      if (recordingRef.current) {
+        const recording = recordingRef.current;
+        recordingRef.current = null;
+        setTranscriptionStatus("transcribing");
+
+        const audio = await recording.stop();
+        const transcription = await transcribeAudio(audio, {
+          ...config.transcriptionConfig,
+          apiKey: accessStore.transcriptionApiKey,
+        });
+        props.setUserInput((current) =>
+          mergeTranscriptionInput(current, transcription),
+        );
+        setTranscriptionStatus("idle");
+        return;
+      }
+
+      recordingRef.current = await startAudioRecording();
+      setTranscriptionStatus("recording");
+    } catch (error) {
+      recordingRef.current = null;
+      setTranscriptionStatus("idle");
+      showToast(
+        error instanceof Error ? error.message : "Voice transcription failed",
+      );
+    }
+  }
 
   // switch themes
   const theme = config.theme;
@@ -835,6 +890,27 @@ export function ChatActions(props: {
         {!isMobileScreen && <MCPAction />}
       </>
       <div className={styles["chat-input-actions-end"]}>
+        {config.transcriptionConfig.enable && (
+          <ChatAction
+            onClick={() => void toggleTranscription()}
+            text={
+              transcriptionStatus === "recording"
+                ? "Stop recording"
+                : transcriptionStatus === "transcribing"
+                ? "Transcribing"
+                : "Voice input"
+            }
+            icon={
+              transcriptionStatus === "transcribing" ? (
+                <LoadingButtonIcon />
+              ) : transcriptionStatus === "recording" ? (
+                <VoiceOffIcon />
+              ) : (
+                <VoiceIcon />
+              )
+            }
+          />
+        )}
         {config.realtimeConfig.enable && (
           <ChatAction
             onClick={() => props.setShowChatSidePanel(true)}

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -89,6 +89,7 @@ import { useMaskStore } from "../store/mask";
 import { ProviderType } from "../utils/cloud";
 import { TTSConfigList } from "./tts-config";
 import { RealtimeConfigList } from "./realtime-chat/realtime-config";
+import { TranscriptionConfigList } from "./transcription-config";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();
@@ -1952,6 +1953,27 @@ export function Settings() {
           />
         </List>
 
+        <List>
+          <TranscriptionConfigList
+            transcriptionConfig={config.transcriptionConfig}
+            apiKey={accessStore.transcriptionApiKey}
+            updateApiKey={(apiKey) => {
+              accessStore.update(
+                (access) => (access.transcriptionApiKey = apiKey),
+              );
+            }}
+            updateConfig={(updater) => {
+              const transcriptionConfig = {
+                ...config.transcriptionConfig,
+              };
+              updater(transcriptionConfig);
+              config.update(
+                (config) => (config.transcriptionConfig = transcriptionConfig),
+              );
+            }}
+          />
+        </List>
+
         <DangerItems />
       </div>
     </ErrorBoundary>

diff --git a/app/components/transcription-config.tsx b/app/components/transcription-config.tsx
@@ -0,0 +1,74 @@
+import type { TranscriptionConfig } from "../store/config";
+import { ListItem } from "./ui-lib";
+
+export function TranscriptionConfigList(props: {
+  transcriptionConfig: TranscriptionConfig;
+  apiKey: string;
+  updateConfig: (updater: (config: TranscriptionConfig) => void) => void;
+  updateApiKey: (apiKey: string) => void;
+}) {
+  const config = props.transcriptionConfig;
+
+  return (
+    <>
+      <ListItem
+        title="Voice transcription"
+        subTitle="OpenAI-compatible speech-to-text"
+      >
+        <input
+          aria-label="Enable voice transcription"
+          type="checkbox"
+          checked={config.enable}
+          onChange={(event) =>
+            props.updateConfig(
+              (value) => (value.enable = event.currentTarget.checked),
+            )
+          }
+        />
+      </ListItem>
+      {config.enable && (
+        <>
+          <ListItem
+            title="Transcription endpoint"
+            subTitle="/v1/audio/transcriptions"
+          >
+            <input
+              aria-label="Transcription endpoint"
+              type="text"
+              value={config.baseUrl}
+              placeholder="http://localhost:8000/v1"
+              onChange={(event) =>
+                props.updateConfig(
+                  (value) => (value.baseUrl = event.currentTarget.value),
+                )
+              }
+            />
+          </ListItem>
+          <ListItem title="Transcription model">
+            <input
+              aria-label="Transcription model"
+              type="text"
+              value={config.model}
+              placeholder="sensevoice"
+              onChange={(event) =>
+                props.updateConfig(
+                  (value) => (value.model = event.currentTarget.value),
+                )
+              }
+            />
+          </ListItem>
+          <ListItem title="Transcription API key" subTitle="Optional">
+            <input
+              aria-label="Transcription API key"
+              type="password"
+              value={props.apiKey}
+              onChange={(event) =>
+                props.updateApiKey(event.currentTarget.value)
+              }
+            />
+          </ListItem>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/app/store/access.ts b/app/store/access.ts
@@ -149,6 +149,9 @@ const DEFAULT_ACCESS_STATE = {
   defaultModel: "",
   visionModels: "",
 
+  // speech-to-text
+  transcriptionApiKey: "",
+
   // tts config
   edgeTTSVoiceName: "zh-CN-YunxiNeural",
 };

diff --git a/app/store/config.ts b/app/store/config.ts
@@ -104,13 +104,20 @@ export const DEFAULT_CONFIG = {
     temperature: 0.9,
     voice: "alloy" as Voice,
   },
+
+  transcriptionConfig: {
+    enable: false,
+    baseUrl: "http://localhost:8000/v1",
+    model: "sensevoice",
+  },
 };
 
 export type ChatConfig = typeof DEFAULT_CONFIG;
 
 export type ModelConfig = ChatConfig["modelConfig"];
 export type TTSConfig = ChatConfig["ttsConfig"];
 export type RealtimeConfig = ChatConfig["realtimeConfig"];
+export type TranscriptionConfig = ChatConfig["transcriptionConfig"];
 
 export function limitNumber(
   x: number,