@superinterface/react 3.10.3 → 3.12.0

package/dist/index.js

@@ -2713,11 +2713,11 @@ function _asyncToGenerator3(n) {
 }
 var threadRunRequiresAction = /* @__PURE__ */ function() {
     var _ref2 = _asyncToGenerator3(function(_ref) {
-        var value, queryClient, messagesQueryKey, superinterfaceContext, toolCalls, toolOutputs;
+        var value, superinterfaceContext, toolCalls, toolOutputs;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    value = _ref.value, queryClient = _ref.queryClient, messagesQueryKey = _ref.messagesQueryKey, superinterfaceContext = _ref.superinterfaceContext;
+                    value = _ref.value, superinterfaceContext = _ref.superinterfaceContext;
                     if (!(value.data.required_action.type === "submit_client_tool_outputs")) return [
                         3,
                         2
@@ -8601,125 +8601,23 @@ ThreadDialog.Root = Root9;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Content = Content7;
 // src/components/threads/AudioThread/Root/index.tsx
-import { c as _c51 } from "react-compiler-runtime";
+import { c as _c52 } from "react-compiler-runtime";
 import { Flex as Flex29 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
 import { createContext as createContext13 } from "react";
-function asyncGeneratorStep10(n, t, e, r, o, a, c) {
-    try {
-        var i = n[a](c), u = i.value;
-    } catch (n2) {
-        return void e(n2);
-    }
-    i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator10(n) {
-    return function() {
-        var t = this, e = arguments;
-        return new Promise(function(r, o) {
-            var a = n.apply(t, e);
-            function _next(n2) {
-                asyncGeneratorStep10(a, r, o, _next, _throw, "next", n2);
-            }
-            function _throw(n2) {
-                asyncGeneratorStep10(a, r, o, _next, _throw, "throw", n2);
-            }
-            _next(void 0);
-        });
-    };
-}
 var AudioThreadContext = /* @__PURE__ */ createContext13({
-    status: "idle",
-    recorderProps: {
-        status: "idle",
-        start: function() {
-            var _start = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function start() {
-                return _start.apply(this, arguments);
-            }
-            return start;
-        }(),
-        stop: function() {
-            var _stop = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function stop() {
-                return _stop.apply(this, arguments);
-            }
-            return stop;
-        }(),
-        pause: function() {
-            var _pause = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function pause() {
-                return _pause.apply(this, arguments);
-            }
-            return pause;
-        }(),
-        resume: function() {
-            var _resume = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function resume() {
-                return _resume.apply(this, arguments);
-            }
-            return resume;
-        }(),
-        visualizationAnalyser: null
-    },
-    // @ts-ignore-next-line
-    messageAudioProps: {
-        visualizationAnalyser: null,
-        playing: false,
-        paused: false,
-        isReady: false,
-        play: function() {
-            var _play = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function play() {
-                return _play.apply(this, arguments);
-            }
-            return play;
-        }(),
-        pause: function() {
-            var _pause2 = _asyncToGenerator10(function() {
-                return _ts_generator(this, function(_state) {
-                    return [
-                        2
-                    ];
-                });
-            });
-            function pause() {
-                return _pause2.apply(this, arguments);
-            }
-            return pause;
-        }()
-    }
+    audioRuntime: null
 });
+// src/hooks/threads/useAudioThreadContext/index.ts
+import { useContext as useContext15 } from "react";
+var useAudioThreadContext = function() {
+    return useContext15(AudioThreadContext);
+};
+// src/components/audioRuntimes/TtsAudioRuntimeProvider.tsx
+import { c as _c51 } from "react-compiler-runtime";
+// src/hooks/audioRuntimes/useTtsAudioRuntime/index.ts
+import { c as _c50 } from "react-compiler-runtime";
+import { useMemo as useMemo18 } from "react";
 // src/hooks/misc/usePermission/index.ts
 import { c as _c47 } from "react-compiler-runtime";
 import { useEffect as useEffect7, useState as useState7 } from "react";
@@ -8788,83 +8686,16 @@ var usePermission = function(permissionDesc) {
     useEffect7(t0, t1);
     return state;
 };
-// src/components/threads/AudioThread/Root/lib/blobToData.ts
-var blobToData = function(blob) {
-    return new Promise(function(resolve) {
-        var reader = new FileReader();
-        reader.onloadend = function() {
-            return resolve(reader.result);
-        };
-        reader.readAsDataURL(blob);
-    });
-};
-// src/hooks/audioThreads/useStatus/index.ts
-import { c as _c48 } from "react-compiler-runtime";
-import { useMemo as useMemo16 } from "react";
-var useStatus = function(t0) {
-    var $ = _c48(2);
-    var messageAudioProps = t0.messageAudioProps, recorderProps = t0.recorderProps, createMessageProps = t0.createMessageProps;
-    var latestMessageProps = useLatestMessage();
-    var t1;
-    bb0: {
-        var _latestMessageProps$l;
-        if (recorderProps.status === "recording") {
-            t1 = "recording";
-            break bb0;
-        }
-        if (createMessageProps.isPending) {
-            t1 = "creatingMessage";
-            break bb0;
-        }
-        if (messageAudioProps.paused || !messageAudioProps.isAudioPlayed) {
-            t1 = "playerPaused";
-            break bb0;
-        }
-        if (messageAudioProps.playing || messageAudioProps.isPending) {
-            t1 = "playing";
-            break bb0;
-        }
-        if (!messageAudioProps.isAudioPlayed && !messageAudioProps.isReady) {
-            t1 = "loading";
-            break bb0;
-        }
-        if (((_latestMessageProps$l = latestMessageProps.latestMessage) === null || _latestMessageProps$l === void 0 ? void 0 : _latestMessageProps$l.status) === "in_progress") {
-            t1 = "creatingMessage";
-            break bb0;
-        }
-        if (recorderProps.status === "idle") {
-            t1 = "idle";
-            break bb0;
-        }
-        if (recorderProps.status === "paused") {
-            t1 = "recorderPaused";
-            break bb0;
-        }
-        t1 = "loading";
-    }
-    var status = t1;
-    var t2;
-    if ($[0] !== status) {
-        t2 = {
-            status: status
-        };
-        $[0] = status;
-        $[1] = t2;
-    } else {
-        t2 = $[1];
-    }
-    return t2;
-};
 // src/hooks/audioThreads/useRecorder/index.ts
 import dayjs3 from "dayjs";
 import { useAudioCapture } from "use-audio-capture";
-import { useMemo as useMemo17, useRef as useRef7, useState as useState8, useCallback as useCallback5, useEffect as useEffect9 } from "react";
+import { useMemo as useMemo16, useRef as useRef7, useState as useState8, useCallback as useCallback5, useEffect as useEffect9 } from "react";
 import { useAudioPlayer } from "react-use-audio-player";
 // src/hooks/misc/useInterval.ts
-import { c as _c49 } from "react-compiler-runtime";
+import { c as _c48 } from "react-compiler-runtime";
 import { useEffect as useEffect8, useRef as useRef6 } from "react";
 var useInterval = function(callback, delay) {
-    var $ = _c49(5);
+    var $ = _c48(5);
     var savedCallback = useRef6(_temp10);
     var t0;
     if ($[0] !== callback) {
@@ -8947,7 +8778,7 @@ function _toPrimitive44(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-function asyncGeneratorStep11(n, t, e, r, o, a, c) {
+function asyncGeneratorStep10(n, t, e, r, o, a, c) {
     try {
         var i = n[a](c), u = i.value;
     } catch (n2) {
@@ -8955,16 +8786,16 @@ function asyncGeneratorStep11(n, t, e, r, o, a, c) {
     }
     i.done ? t(u) : Promise.resolve(u).then(r, o);
 }
-function _asyncToGenerator11(n) {
+function _asyncToGenerator10(n) {
     return function() {
         var t = this, e = arguments;
         return new Promise(function(r, o) {
             var a = n.apply(t, e);
             function _next(n2) {
-                asyncGeneratorStep11(a, r, o, _next, _throw, "next", n2);
+                asyncGeneratorStep10(a, r, o, _next, _throw, "next", n2);
             }
             function _throw(n2) {
-                asyncGeneratorStep11(a, r, o, _next, _throw, "throw", n2);
+                asyncGeneratorStep10(a, r, o, _next, _throw, "throw", n2);
             }
             _next(void 0);
         });
@@ -8997,7 +8828,7 @@ var useRecorder = function(_ref) {
             setNoiseStart(null);
         },
         onStop: function() {
-            var _onStop2 = _asyncToGenerator11(function() {
+            var _onStop2 = _asyncToGenerator10(function() {
                 var _arguments = arguments;
                 return _ts_generator(this, function(_state) {
                     switch(_state.label){
@@ -9054,7 +8885,7 @@ var useRecorder = function(_ref) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = useMemo17(function() {
+    var visualizationAnalyser = useMemo16(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -9062,7 +8893,7 @@ var useRecorder = function(_ref) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = useMemo17(function() {
+    var silenceAnalyser = useMemo16(function() {
         if (!audioEngine) return null;
         var result_0 = audioEngine.audioContext.createAnalyser();
         result_0.minDecibels = -60;
@@ -9117,8 +8948,8 @@ var useRecorder = function(_ref) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-import { c as _c50 } from "react-compiler-runtime";
-import { useMemo as useMemo18, useRef as useRef8, useState as useState9, useEffect as useEffect10, useCallback as useCallback6 } from "react";
+import { c as _c49 } from "react-compiler-runtime";
+import { useMemo as useMemo17, useRef as useRef8, useState as useState9, useEffect as useEffect10, useCallback as useCallback6 } from "react";
 import nlp from "compromise";
 import { Howler } from "howler";
 import { useAudioPlayer as useAudioPlayer2 } from "react-use-audio-player";
@@ -9199,7 +9030,8 @@ var getMessageSentences = function(_ref) {
     });
 };
 var useMessageAudio = function(t0) {
-    var $ = _c50(50);
+    var _latestMessageProps$l;
+    var $ = _c49(50);
     var _onEnd = t0.onEnd, passedPlay = t0.play;
     var _useState9 = _sliced_to_array(useState9(false), 2), isAudioPlayed = _useState9[0], setIsAudioPlayed = _useState9[1];
     var t1;
@@ -9309,7 +9141,7 @@ var useMessageAudio = function(t0) {
             var searchParams = new URLSearchParams(_objectSpread45({
                 input: input_0
             }, superinterfaceContext.variables));
-            audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(searchParams), {
+            audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/audio-runtimes/tts?").concat(searchParams), {
                 format: "mp3",
                 autoplay: isAudioPlayed,
                 html5: isHtmlAudioSupported,
@@ -9327,7 +9159,7 @@ var useMessageAudio = function(t0) {
                     var nextSearchParams = new URLSearchParams(_objectSpread45({
                         input: nextUnplayedMessageSentence.sentence
                     }, superinterfaceContext.variables));
-                    nextAudioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?").concat(nextSearchParams), {
+                    nextAudioPlayer.load("".concat(superinterfaceContext.baseUrl, "/audio-runtimes/tts?").concat(nextSearchParams), {
                         format: "mp3",
                         autoplay: false,
                         html5: isHtmlAudioSupported
@@ -9514,7 +9346,7 @@ var useMessageAudio = function(t0) {
     }
     var visualizationAnalyser = t11;
     var t12;
-    t12 = isPlaying || unplayedMessageSentences.length > 0;
+    t12 = isPlaying || unplayedMessageSentences.length > 0 || ((_latestMessageProps$l = latestMessageProps.latestMessage) === null || _latestMessageProps$l === void 0 ? void 0 : _latestMessageProps$l.status) === "in_progress";
     var isPending = t12;
     var t13;
     if ($[45] !== audioPlayer || $[46] !== isAudioPlayed || $[47] !== isPending || $[48] !== visualizationAnalyser) {
@@ -9543,74 +9375,20 @@ function _temp11() {
         Howler._howls[0]._sounds[0]._node.crossOrigin = "anonymous";
     }
 }
-// src/components/threads/AudioThread/Root/index.tsx
+// src/hooks/audioRuntimes/useTtsAudioRuntime/index.ts
 import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
-import { jsx as _jsx82 } from "react/jsx-runtime";
-var _excluded5 = [
-    "children"
-];
-function ownKeys46(e, r) {
-    var t = Object.keys(e);
-    if (Object.getOwnPropertySymbols) {
-        var o = Object.getOwnPropertySymbols(e);
-        r && (o = o.filter(function(r2) {
-            return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-        })), t.push.apply(t, o);
-    }
-    return t;
-}
-function _objectSpread46(e) {
-    for(var r = 1; r < arguments.length; r++){
-        var t = null != arguments[r] ? arguments[r] : {};
-        r % 2 ? ownKeys46(Object(t), true).forEach(function(r2) {
-            _defineProperty46(e, r2, t[r2]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys46(Object(t)).forEach(function(r2) {
-            Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-        });
-    }
-    return e;
-}
-function _defineProperty46(e, r, t) {
-    return (r = _toPropertyKey46(r)) in e ? Object.defineProperty(e, r, {
-        value: t,
-        enumerable: true,
-        configurable: true,
-        writable: true
-    }) : e[r] = t, e;
-}
-function _toPropertyKey46(t) {
-    var i = _toPrimitive46(t, "string");
-    return "symbol" == (typeof i === "undefined" ? "undefined" : _type_of(i)) ? i : i + "";
-}
-function _toPrimitive46(t, r) {
-    if ("object" != (typeof t === "undefined" ? "undefined" : _type_of(t)) || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-        var i = e.call(t, r || "default");
-        if ("object" != (typeof i === "undefined" ? "undefined" : _type_of(i))) return i;
-        throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return ("string" === r ? String : Number)(t);
-}
-function _objectWithoutProperties5(e, t) {
-    if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose5(e, t);
-    if (Object.getOwnPropertySymbols) {
-        var s = Object.getOwnPropertySymbols(e);
-        for(r = 0; r < s.length; r++)o = s[r], t.includes(o) || ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-    }
-    return i;
-}
-function _objectWithoutPropertiesLoose5(r, e) {
-    if (null == r) return {};
-    var t = {};
-    for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
-        if (e.includes(n)) continue;
-        t[n] = r[n];
-    }
-    return t;
-}
-function asyncGeneratorStep12(n, t, e, r, o, a, c) {
+// src/hooks/audioRuntimes/useTtsAudioRuntime/blobToData.ts
+var blobToData = function(blob) {
+    return new Promise(function(resolve) {
+        var reader = new FileReader();
+        reader.onloadend = function() {
+            return resolve(reader.result);
+        };
+        reader.readAsDataURL(blob);
+    });
+};
+// src/hooks/audioRuntimes/useTtsAudioRuntime/index.ts
+function asyncGeneratorStep11(n, t, e, r, o, a, c) {
     try {
         var i = n[a](c), u = i.value;
     } catch (n2) {
@@ -9618,27 +9396,37 @@ function asyncGeneratorStep12(n, t, e, r, o, a, c) {
     }
     i.done ? t(u) : Promise.resolve(u).then(r, o);
 }
-function _asyncToGenerator12(n) {
+function _asyncToGenerator11(n) {
     return function() {
         var t = this, e = arguments;
         return new Promise(function(r, o) {
             var a = n.apply(t, e);
             function _next(n2) {
-                asyncGeneratorStep12(a, r, o, _next, _throw, "next", n2);
+                asyncGeneratorStep11(a, r, o, _next, _throw, "next", n2);
             }
             function _throw(n2) {
-                asyncGeneratorStep12(a, r, o, _next, _throw, "throw", n2);
+                asyncGeneratorStep11(a, r, o, _next, _throw, "throw", n2);
             }
             _next(void 0);
         });
     };
 }
-var Content8 = function(t0) {
-    var $ = _c51(24);
-    var children = t0.children, className = t0.className, style = t0.style, play = t0.play;
+var useTtsAudioRuntime = function(t0) {
+    var $ = _c50(30);
+    var play = t0.play;
     var addToast = useToasts().addToast;
     var queryClient = useQueryClient6();
     var threadContext = useSuperinterfaceContext();
+    var t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = {
+            name: "microphone"
+        };
+        $[0] = t1;
+    } else {
+        t1 = $[0];
+    }
+    var microphonePermission = usePermission(t1);
     var createMessageProps = useCreateMessage({
         onError: function(error) {
             createMessageDefaultOnError({
@@ -9649,13 +9437,13 @@ var Content8 = function(t0) {
             recorderProps.start();
         }
     });
-    var t1;
-    if ($[0] !== createMessageProps) {
-        t1 = {
+    var t2;
+    if ($[1] !== createMessageProps) {
+        t2 = {
             isStopOnSilence: true,
             onStart: _temp12,
             onStop: function() {
-                var _onStop = _asyncToGenerator12(function(_event, chunks) {
+                var _onStop = _asyncToGenerator11(function(_event, chunks) {
                     var blob, audioContent;
                     return _ts_generator(this, function(_state) {
                         switch(_state.label){
@@ -9684,22 +9472,12 @@ var Content8 = function(t0) {
                 return onStop;
             }()
         };
-        $[0] = createMessageProps;
-        $[1] = t1;
-    } else {
-        t1 = $[1];
-    }
-    var recorderProps = useRecorder(t1);
-    var t2;
-    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = {
-            name: "microphone"
-        };
+        $[1] = createMessageProps;
         $[2] = t2;
     } else {
         t2 = $[2];
     }
-    var microphonePermission = usePermission(t2);
+    var recorderProps = useRecorder(t2);
     var t3;
     if ($[3] !== microphonePermission || $[4] !== recorderProps) {
         t3 = function() {
@@ -9726,81 +9504,91 @@ var Content8 = function(t0) {
         t4 = $[8];
     }
     var messageAudioProps = useMessageAudio(t4);
-    var t5 = recorderProps;
-    var t6;
-    if ($[9] !== createMessageProps || $[10] !== messageAudioProps || $[11] !== t5) {
-        t6 = {
-            recorderProps: t5,
-            createMessageProps: createMessageProps,
-            messageAudioProps: messageAudioProps
-        };
-        $[9] = createMessageProps;
-        $[10] = messageAudioProps;
-        $[11] = t5;
-        $[12] = t6;
-    } else {
-        t6 = $[12];
-    }
-    var status = useStatus(t6).status;
+    recorderProps;
+    recorderProps;
+    recorderProps;
+    recorderProps;
+    recorderProps;
+    recorderProps;
+    recorderProps;
+    var t5;
+    var t6 = recorderProps;
     var t7 = recorderProps;
-    var t8;
-    if ($[13] !== messageAudioProps || $[14] !== status || $[15] !== t7) {
-        t8 = {
-            status: status,
-            recorderProps: t7,
-            messageAudioProps: messageAudioProps
+    var t8 = recorderProps;
+    var t9 = recorderProps;
+    var t10 = recorderProps;
+    var t11 = recorderProps;
+    var t12;
+    if ($[9] !== createMessageProps.isPending || $[10] !== t10.visualizationAnalyser || $[11] !== t11.status || $[12] !== t6.start || $[13] !== t7.stop || $[14] !== t8.pause || $[15] !== t9.resume) {
+        t12 = {
+            start: t6.start,
+            stop: t7.stop,
+            pause: t8.pause,
+            resume: t9.resume,
+            isPending: createMessageProps.isPending,
+            visualizationAnalyser: t10.visualizationAnalyser,
+            rawStatus: t11.status
         };
-        $[13] = messageAudioProps;
-        $[14] = status;
-        $[15] = t7;
-        $[16] = t8;
+        $[9] = createMessageProps.isPending;
+        $[10] = t10.visualizationAnalyser;
+        $[11] = t11.status;
+        $[12] = t6.start;
+        $[13] = t7.stop;
+        $[14] = t8.pause;
+        $[15] = t9.resume;
+        $[16] = t12;
     } else {
-        t8 = $[16];
+        t12 = $[16];
     }
-    var t9;
-    if ($[17] !== children || $[18] !== className || $[19] !== style) {
-        t9 = /* @__PURE__ */ _jsx82(Flex29, {
-            direction: "column",
-            flexGrow: "1",
-            p: "9",
-            className: className,
-            style: style,
-            children: children
-        });
-        $[17] = children;
-        $[18] = className;
-        $[19] = style;
-        $[20] = t9;
-    } else {
-        t9 = $[20];
-    }
-    var t10;
-    if ($[21] !== t8 || $[22] !== t9) {
-        t10 = /* @__PURE__ */ _jsx82(AudioThreadContext.Provider, {
-            value: t8,
-            children: t9
-        });
-        $[21] = t8;
-        $[22] = t9;
-        $[23] = t10;
+    var t13;
+    if ($[17] !== messageAudioProps.isAudioPlayed || $[18] !== messageAudioProps.isPending || $[19] !== messageAudioProps.isReady || $[20] !== messageAudioProps.pause || $[21] !== messageAudioProps.paused || $[22] !== messageAudioProps.play || $[23] !== messageAudioProps.playing || $[24] !== messageAudioProps.stop || $[25] !== messageAudioProps.visualizationAnalyser) {
+        t13 = {
+            play: messageAudioProps.play,
+            pause: messageAudioProps.pause,
+            stop: messageAudioProps.stop,
+            visualizationAnalyser: messageAudioProps.visualizationAnalyser,
+            playing: messageAudioProps.playing,
+            paused: messageAudioProps.paused,
+            isPending: messageAudioProps.isPending,
+            isReady: messageAudioProps.isReady,
+            isAudioPlayed: messageAudioProps.isAudioPlayed,
+            rawStatus: void 0
+        };
+        $[17] = messageAudioProps.isAudioPlayed;
+        $[18] = messageAudioProps.isPending;
+        $[19] = messageAudioProps.isReady;
+        $[20] = messageAudioProps.pause;
+        $[21] = messageAudioProps.paused;
+        $[22] = messageAudioProps.play;
+        $[23] = messageAudioProps.playing;
+        $[24] = messageAudioProps.stop;
+        $[25] = messageAudioProps.visualizationAnalyser;
+        $[26] = t13;
+    } else {
+        t13 = $[26];
+    }
+    var t14;
+    if ($[27] !== t12 || $[28] !== t13) {
+        t14 = {
+            ttsAudioRuntime: {
+                user: t12,
+                assistant: t13
+            }
+        };
+        $[27] = t12;
+        $[28] = t13;
+        $[29] = t14;
     } else {
-        t10 = $[23];
+        t14 = $[29];
     }
-    return t10;
-};
-var Root12 = function(_ref) {
-    var children = _ref.children, rest = _objectWithoutProperties5(_ref, _excluded5);
-    return /* @__PURE__ */ _jsx82(ToastsProvider, {
-        children: /* @__PURE__ */ _jsx82(Content8, _objectSpread46(_objectSpread46({}, rest), {}, {
-            children: children
-        }))
-    });
+    t5 = t14;
+    return t5;
 };
 function _temp12() {
     return _temp23.apply(this, arguments);
 }
 function _temp23() {
-    _temp23 = _asyncToGenerator12(function() {
+    _temp23 = _asyncToGenerator11(function() {
         return _ts_generator(this, function(_state) {
             return [
                 2
@@ -9809,21 +9597,215 @@ function _temp23() {
     });
     return _temp23.apply(this, arguments);
 }
+// src/components/audioRuntimes/TtsAudioRuntimeProvider.tsx
+import { jsx as _jsx82 } from "react/jsx-runtime";
+var TtsAudioRuntimeProvider = function(t0) {
+    var $ = _c51(7);
+    var children = t0.children, play = t0.play;
+    var t1;
+    if ($[0] !== play) {
+        t1 = {
+            play: play
+        };
+        $[0] = play;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var ttsAudioRuntime = useTtsAudioRuntime(t1).ttsAudioRuntime;
+    var t2;
+    if ($[2] !== ttsAudioRuntime) {
+        t2 = {
+            audioRuntime: ttsAudioRuntime
+        };
+        $[2] = ttsAudioRuntime;
+        $[3] = t2;
+    } else {
+        t2 = $[3];
+    }
+    var t3;
+    if ($[4] !== children || $[5] !== t2) {
+        t3 = /* @__PURE__ */ _jsx82(AudioThreadContext.Provider, {
+            value: t2,
+            children: children
+        });
+        $[4] = children;
+        $[5] = t2;
+        $[6] = t3;
+    } else {
+        t3 = $[6];
+    }
+    return t3;
+};
+// src/components/threads/AudioThread/Root/index.tsx
+import { jsx as _jsx83 } from "react/jsx-runtime";
+var _excluded5 = [
+    "children"
+];
+var _excluded22 = [
+    "children",
+    "play",
+    "className",
+    "style"
+];
+function ownKeys46(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+        var o = Object.getOwnPropertySymbols(e);
+        r && (o = o.filter(function(r2) {
+            return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+        })), t.push.apply(t, o);
+    }
+    return t;
+}
+function _objectSpread46(e) {
+    for(var r = 1; r < arguments.length; r++){
+        var t = null != arguments[r] ? arguments[r] : {};
+        r % 2 ? ownKeys46(Object(t), true).forEach(function(r2) {
+            _defineProperty46(e, r2, t[r2]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys46(Object(t)).forEach(function(r2) {
+            Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+        });
+    }
+    return e;
+}
+function _defineProperty46(e, r, t) {
+    return (r = _toPropertyKey46(r)) in e ? Object.defineProperty(e, r, {
+        value: t,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    }) : e[r] = t, e;
+}
+function _toPropertyKey46(t) {
+    var i = _toPrimitive46(t, "string");
+    return "symbol" == (typeof i === "undefined" ? "undefined" : _type_of(i)) ? i : i + "";
+}
+function _toPrimitive46(t, r) {
+    if ("object" != (typeof t === "undefined" ? "undefined" : _type_of(t)) || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+        var i = e.call(t, r || "default");
+        if ("object" != (typeof i === "undefined" ? "undefined" : _type_of(i))) return i;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+}
+function _objectWithoutProperties5(e, t) {
+    if (null == e) return {};
+    var o, r, i = _objectWithoutPropertiesLoose5(e, t);
+    if (Object.getOwnPropertySymbols) {
+        var s = Object.getOwnPropertySymbols(e);
+        for(r = 0; r < s.length; r++)o = s[r], t.includes(o) || ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    }
+    return i;
+}
+function _objectWithoutPropertiesLoose5(r, e) {
+    if (null == r) return {};
+    var t = {};
+    for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
+        if (e.includes(n)) continue;
+        t[n] = r[n];
+    }
+    return t;
+}
+var Content8 = function(_ref) {
+    var children = _ref.children, className = _ref.className, style = _ref.style;
+    return /* @__PURE__ */ _jsx83(Flex29, {
+        direction: "column",
+        flexGrow: "1",
+        p: "9",
+        className: className,
+        style: style,
+        children: children
+    });
+};
+var AudioRuntimeProvider = function(t0) {
+    var $ = _c52(3);
+    var children = t0.children, play = t0.play;
+    var audioThreadContext = useAudioThreadContext();
+    if (audioThreadContext.audioRuntime) {
+        return children;
+    }
+    var t1;
+    if ($[0] !== children || $[1] !== play) {
+        t1 = /* @__PURE__ */ _jsx83(TtsAudioRuntimeProvider, {
+            play: play,
+            children: children
+        });
+        $[0] = children;
+        $[1] = play;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    return t1;
+};
+var Provider5 = function(t0) {
+    var $ = _c52(9);
+    var children;
+    var rest;
+    if ($[0] !== t0) {
+        var _t = t0;
+        children = _t.children;
+        rest = _objectWithoutProperties5(_t, _excluded5);
+        _t;
+        $[0] = t0;
+        $[1] = children;
+        $[2] = rest;
+    } else {
+        children = $[1];
+        rest = $[2];
+    }
+    var audioThreadContext = useAudioThreadContext();
+    var t1;
+    if ($[3] !== audioThreadContext || $[4] !== rest) {
+        t1 = _objectSpread46(_objectSpread46({}, audioThreadContext), rest);
+        $[3] = audioThreadContext;
+        $[4] = rest;
+        $[5] = t1;
+    } else {
+        t1 = $[5];
+    }
+    var t2;
+    if ($[6] !== children || $[7] !== t1) {
+        t2 = /* @__PURE__ */ _jsx83(AudioThreadContext.Provider, {
+            value: t1,
+            children: children
+        });
+        $[6] = children;
+        $[7] = t1;
+        $[8] = t2;
+    } else {
+        t2 = $[8];
+    }
+    return t2;
+};
+var Root12 = function(_ref2) {
+    var children = _ref2.children, play = _ref2.play, className = _ref2.className, style = _ref2.style, rest = _objectWithoutProperties5(_ref2, _excluded22);
+    return /* @__PURE__ */ _jsx83(Provider5, _objectSpread46(_objectSpread46({}, rest), {}, {
+        children: /* @__PURE__ */ _jsx83(AudioRuntimeProvider, {
+            play: play,
+            children: /* @__PURE__ */ _jsx83(ToastsProvider, {
+                children: /* @__PURE__ */ _jsx83(Content8, {
+                    className: className,
+                    style: style,
+                    children: children
+                })
+            })
+        })
+    }));
+};
 // src/components/threads/AudioThread/Visualization/index.tsx
 import { useContext as useContext16, useState as useState11, useCallback as useCallback8, useEffect as useEffect12 } from "react";
 import _9 from "lodash";
 import { Flex as Flex31 } from "@radix-ui/themes";
-// src/hooks/threads/useAudioThreadContext/index.ts
-import { useContext as useContext15 } from "react";
-var useAudioThreadContext = function() {
-    return useContext15(AudioThreadContext);
-};
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
 import { Flex as Flex30, Grid } from "@radix-ui/themes";
 import { useState as useState10, useEffect as useEffect11, useCallback as useCallback7 } from "react";
 import { cluster } from "radash";
-import { jsx as _jsx83 } from "react/jsx-runtime";
+import { jsx as _jsx84 } from "react/jsx-runtime";
 var barCount = 4;
 var BarsVisualizer = function(_ref) {
     var visualizationAnalyser = _ref.visualizationAnalyser, backgroundColor = _ref.backgroundColor, height = _ref.height, barWidth = _ref.barWidth;
@@ -9854,7 +9836,7 @@ var BarsVisualizer = function(_ref) {
         draw,
         visualizationAnalyser
     ]);
-    return /* @__PURE__ */ _jsx83(Grid, {
+    return /* @__PURE__ */ _jsx84(Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -9863,12 +9845,12 @@ var BarsVisualizer = function(_ref) {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ _jsx83(Flex30, {
+            return /* @__PURE__ */ _jsx84(Flex30, {
                 direction: "column",
                 align: "center",
                 justify: "center",
                 height: height,
-                children: /* @__PURE__ */ _jsx83(Flex30, {
+                children: /* @__PURE__ */ _jsx84(Flex30, {
                     minHeight: "50%",
                     maxHeight: "100%",
                     height: "".concat(barHeight + 20, "%"),
@@ -9882,8 +9864,59 @@ var BarsVisualizer = function(_ref) {
         })
     });
 };
+// src/hooks/audioThreads/useStatus/index.ts
+import { c as _c53 } from "react-compiler-runtime";
+import { useMemo as useMemo19 } from "react";
+var useStatus = function() {
+    var $ = _c53(2);
+    var audioRuntime = useAudioThreadContext().audioRuntime;
+    var t0;
+    bb0: {
+        if (audioRuntime.user.rawStatus === "recording") {
+            t0 = "recording";
+            break bb0;
+        }
+        if (audioRuntime.user.isPending) {
+            t0 = "creatingMessage";
+            break bb0;
+        }
+        if (audioRuntime.assistant.paused || !audioRuntime.assistant.isAudioPlayed) {
+            t0 = "playerPaused";
+            break bb0;
+        }
+        if (audioRuntime.assistant.playing || audioRuntime.assistant.isPending) {
+            t0 = "playing";
+            break bb0;
+        }
+        if (!audioRuntime.assistant.isAudioPlayed && !audioRuntime.assistant.isReady) {
+            t0 = "loading";
+            break bb0;
+        }
+        if (audioRuntime.user.rawStatus === "idle") {
+            t0 = "idle";
+            break bb0;
+        }
+        if (audioRuntime.user.rawStatus === "paused") {
+            t0 = "recorderPaused";
+            break bb0;
+        }
+        t0 = "loading";
+    }
+    var status = t0;
+    var t1;
+    if ($[0] !== status) {
+        t1 = {
+            status: status
+        };
+        $[0] = status;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    return t1;
+};
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { jsx as _jsx84, jsxs as _jsxs31 } from "react/jsx-runtime";
+import { jsx as _jsx85, jsxs as _jsxs31 } from "react/jsx-runtime";
 function ownKeys47(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -9928,6 +9961,7 @@ function _toPrimitive47(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Visualization = function(props) {
+    var status = useStatus().status;
     var audioThreadContext = useAudioThreadContext();
     var assistantNameContext = useContext16(AssistantNameContext);
     var _useState11 = _sliced_to_array(useState11(0), 2), scale = _useState11[0], setScale = _useState11[1];
@@ -9948,7 +9982,7 @@ var Visualization = function(props) {
     }, []);
     useEffect12(function() {
         draw({
-            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
+            visualizationAnalyser: audioThreadContext.audioRuntime.user.visualizationAnalyser
         });
     }, [
         draw,
@@ -9962,19 +9996,19 @@ var Visualization = function(props) {
         flexGrow: "1"
     }, props), {}, {
         children: [
-            /* @__PURE__ */ _jsx84(Flex31, {
+            /* @__PURE__ */ _jsx85(Flex31, {
                 align: "center",
                 justify: "center",
                 height: "200px",
                 width: "200px",
                 style: {
-                    backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
+                    backgroundColor: status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
                     borderRadius: "9999px",
                     scale: scale
                 },
-                children: /* @__PURE__ */ _jsx84(BarsVisualizer, {
-                    visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
-                    backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
+                children: /* @__PURE__ */ _jsx85(BarsVisualizer, {
+                    visualizationAnalyser: audioThreadContext.audioRuntime.assistant.visualizationAnalyser,
+                    backgroundColor: status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
                     height: "40px",
                     barWidth: "24px"
                 })
@@ -9984,8 +10018,8 @@ var Visualization = function(props) {
                 gap: "3",
                 pt: "5",
                 children: [
-                    /* @__PURE__ */ _jsx84(AssistantAvatar, {}),
-                    /* @__PURE__ */ _jsx84(Name, {
+                    /* @__PURE__ */ _jsx85(AssistantAvatar, {}),
+                    /* @__PURE__ */ _jsx85(Name, {
                         children: assistantNameContext
                     })
                 ]
@@ -9994,10 +10028,10 @@ var Visualization = function(props) {
     }));
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { c as _c52 } from "react-compiler-runtime";
+import { c as _c54 } from "react-compiler-runtime";
 // src/components/threads/AudioThread/Status/StatusMessages.tsx
 import { Flex as Flex32, Text as Text9 } from "@radix-ui/themes";
-import { jsx as _jsx85, jsxs as _jsxs32 } from "react/jsx-runtime";
+import { jsx as _jsx86, jsxs as _jsxs32 } from "react/jsx-runtime";
 var html = function(_ref) {
     var texts = _ref.texts;
     return "\n  .status-messages-texts:after {\n    content: '".concat(texts[0], "';\n    animation: texts ").concat(texts.length * 5, "s linear infinite;\n  }\n\n  @keyframes texts {\n    ").concat(texts.map(function(_10, i) {
@@ -10012,13 +10046,13 @@ var StatusMessages = function(_ref2) {
         className: className,
         style: style,
         children: [
-            /* @__PURE__ */ _jsx85(Text9, {
+            /* @__PURE__ */ _jsx86(Text9, {
                 size: "2",
                 weight: "regular",
                 color: "gray",
                 className: "status-messages-texts"
             }),
-            /* @__PURE__ */ _jsx85("style", {
+            /* @__PURE__ */ _jsx86("style", {
                 dangerouslySetInnerHTML: {
                     __html: html({
                         texts: texts
@@ -10029,7 +10063,7 @@ var StatusMessages = function(_ref2) {
     });
 };
 // src/components/threads/AudioThread/Status/index.tsx
-import { jsx as _jsx86 } from "react/jsx-runtime";
+import { jsx as _jsx87 } from "react/jsx-runtime";
 function ownKeys48(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -10074,9 +10108,9 @@ function _toPrimitive48(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Status = function(props) {
-    var $ = _c52(12);
-    var audioThreadContext = useAudioThreadContext();
-    if (audioThreadContext.status === "recording") {
+    var $ = _c54(12);
+    var status = useStatus().status;
+    if (status === "recording") {
         var _t;
         if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
             _t = [
@@ -10091,7 +10125,7 @@ var Status = function(props) {
         }
         var _t2;
         if ($[1] !== props) {
-            _t2 = /* @__PURE__ */ _jsx86(StatusMessages, _objectSpread48({
+            _t2 = /* @__PURE__ */ _jsx87(StatusMessages, _objectSpread48({
                 texts: _t
             }, props));
             $[1] = props;
@@ -10105,7 +10139,7 @@ var Status = function(props) {
         "recorderPaused",
         "idle",
         "playerPaused"
-    ].includes(audioThreadContext.status)) {
+    ].includes(status)) {
         var _t3;
         if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
             _t3 = [
@@ -10117,7 +10151,7 @@ var Status = function(props) {
         }
         var _t4;
         if ($[4] !== props) {
-            _t4 = /* @__PURE__ */ _jsx86(StatusMessages, _objectSpread48({
+            _t4 = /* @__PURE__ */ _jsx87(StatusMessages, _objectSpread48({
                 texts: _t3
             }, props));
             $[4] = props;
@@ -10127,7 +10161,7 @@ var Status = function(props) {
         }
         return _t4;
     }
-    if (audioThreadContext.status === "playing") {
+    if (status === "playing") {
         var _t5;
         if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
             _t5 = [
@@ -10139,7 +10173,7 @@ var Status = function(props) {
         }
         var _t6;
         if ($[7] !== props) {
-            _t6 = /* @__PURE__ */ _jsx86(StatusMessages, _objectSpread48({
+            _t6 = /* @__PURE__ */ _jsx87(StatusMessages, _objectSpread48({
                 texts: _t5
             }, props));
             $[7] = props;
@@ -10160,7 +10194,7 @@ var Status = function(props) {
     }
     var t1;
     if ($[10] !== props) {
-        t1 = /* @__PURE__ */ _jsx86(StatusMessages, _objectSpread48({
+        t1 = /* @__PURE__ */ _jsx87(StatusMessages, _objectSpread48({
             texts: t0
         }, props));
         $[10] = props;
@@ -10171,10 +10205,10 @@ var Status = function(props) {
     return t1;
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { c as _c54 } from "react-compiler-runtime";
+import { c as _c56 } from "react-compiler-runtime";
 import { Flex as Flex34 } from "@radix-ui/themes";
 // src/components/threads/AudioThread/Form/MicIcon.tsx
-import { jsx as _jsx87 } from "react/jsx-runtime";
+import { jsx as _jsx88 } from "react/jsx-runtime";
 function ownKeys49(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -10219,7 +10253,7 @@ function _toPrimitive49(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var MicIcon = function(props) {
-    return /* @__PURE__ */ _jsx87("svg", _objectSpread49(_objectSpread49({
+    return /* @__PURE__ */ _jsx88("svg", _objectSpread49(_objectSpread49({
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         stroke: "currentColor",
@@ -10228,64 +10262,65 @@ var MicIcon = function(props) {
         height: "15",
         width: "15"
     }, props), {}, {
-        children: /* @__PURE__ */ _jsx87("path", {
+        children: /* @__PURE__ */ _jsx88("path", {
             stroke: "none",
             d: "M192 0c-53 0-96 43-96 96v160c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464h-48c-13.3 0-24 10.7-24 24s10.7 24 24 24h144c13.3 0 24-10.7 24-24s-10.7-24-24-24h-48v-33.6c85.8-11.7 152-85.3 152-174.4v-40c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128S64 326.7 64 256v-40z"
         })
     }));
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-import { c as _c53 } from "react-compiler-runtime";
+import { c as _c55 } from "react-compiler-runtime";
 import { Flex as Flex33, IconButton as IconButton10 } from "@radix-ui/themes";
 import { StopIcon as StopIcon2, PauseIcon as PauseIcon2, ArrowUpIcon as ArrowUpIcon3, ResumeIcon } from "@radix-ui/react-icons";
-import { jsx as _jsx88, jsxs as _jsxs33 } from "react/jsx-runtime";
+import { jsx as _jsx89, jsxs as _jsxs33 } from "react/jsx-runtime";
 var ActionButton = function() {
-    var $ = _c53(27);
+    var $ = _c55(27);
+    var status = useStatus().status;
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
-    if (audioThreadContext.status === "recording") {
+    if (status === "recording") {
         var _t;
         if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-            _t = /* @__PURE__ */ _jsx88(PauseIcon2, {});
+            _t = /* @__PURE__ */ _jsx89(PauseIcon2, {});
             $[0] = _t;
         } else {
             _t = $[0];
         }
         var t1;
-        if ($[1] !== audioThreadContext.recorderProps.pause) {
-            t1 = /* @__PURE__ */ _jsx88(Flex33, {
+        if ($[1] !== audioThreadContext.audioRuntime.user.pause) {
+            t1 = /* @__PURE__ */ _jsx89(Flex33, {
                 mr: "3",
                 ml: "-7",
-                children: /* @__PURE__ */ _jsx88(IconButton10, {
-                    onClick: audioThreadContext.recorderProps.pause,
+                children: /* @__PURE__ */ _jsx89(IconButton10, {
+                    onClick: audioThreadContext.audioRuntime.user.pause,
                     color: "gray",
                     variant: "soft",
                     size: "1",
                     children: _t
                 })
             });
-            $[1] = audioThreadContext.recorderProps.pause;
+            $[1] = audioThreadContext.audioRuntime.user.pause;
             $[2] = t1;
         } else {
             t1 = $[2];
         }
         var t2;
         if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-            t2 = /* @__PURE__ */ _jsx88(ArrowUpIcon3, {});
+            t2 = /* @__PURE__ */ _jsx89(ArrowUpIcon3, {});
             $[3] = t2;
         } else {
             t2 = $[3];
         }
         var t3;
-        if ($[4] !== audioThreadContext.recorderProps.stop) {
-            t3 = /* @__PURE__ */ _jsx88(IconButton10, {
-                onClick: audioThreadContext.recorderProps.stop,
+        if ($[4] !== audioThreadContext.audioRuntime.user.stop) {
+            t3 = /* @__PURE__ */ _jsx89(IconButton10, {
+                onClick: audioThreadContext.audioRuntime.user.stop,
                 highContrast: true,
                 variant: "soft",
                 size: "4",
                 children: t2
             });
-            $[4] = audioThreadContext.recorderProps.stop;
+            $[4] = audioThreadContext.audioRuntime.user.stop;
             $[5] = t3;
         } else {
             t3 = $[5];
@@ -10307,57 +10342,57 @@ var ActionButton = function() {
         }
         return t4;
     }
-    if (audioThreadContext.status === "recorderPaused") {
+    if (status === "recorderPaused") {
         var _t2;
         if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-            _t2 = /* @__PURE__ */ _jsx88(ResumeIcon, {});
+            _t2 = /* @__PURE__ */ _jsx89(ResumeIcon, {});
             $[9] = _t2;
         } else {
             _t2 = $[9];
         }
         var _t3;
-        if ($[10] !== audioThreadContext.recorderProps.resume) {
-            _t3 = /* @__PURE__ */ _jsx88(IconButton10, {
-                onClick: audioThreadContext.recorderProps.resume,
+        if ($[10] !== audioThreadContext.audioRuntime.user.resume) {
+            _t3 = /* @__PURE__ */ _jsx89(IconButton10, {
+                onClick: audioThreadContext.audioRuntime.user.resume,
                 color: "red",
                 size: "4",
                 children: _t2
             });
-            $[10] = audioThreadContext.recorderProps.resume;
+            $[10] = audioThreadContext.audioRuntime.user.resume;
             $[11] = _t3;
         } else {
             _t3 = $[11];
         }
         return _t3;
     }
-    if (audioThreadContext.status === "idle") {
+    if (status === "idle") {
         var _t4;
-        if ($[12] !== audioThreadContext.recorderProps) {
-            _t4 = /* @__PURE__ */ _jsx88(IconButton10, {
+        if ($[12] !== audioThreadContext.audioRuntime.user) {
+            _t4 = /* @__PURE__ */ _jsx89(IconButton10, {
                 onClick: function() {
-                    return audioThreadContext.recorderProps.start();
+                    return audioThreadContext.audioRuntime.user.start();
                 },
                 size: "4",
                 color: "red"
             });
-            $[12] = audioThreadContext.recorderProps;
+            $[12] = audioThreadContext.audioRuntime.user;
             $[13] = _t4;
         } else {
             _t4 = $[13];
         }
         return _t4;
     }
-    if (audioThreadContext.status === "playing") {
+    if (status === "playing") {
         var _t5;
-        if ($[14] !== audioThreadContext.messageAudioProps || $[15] !== audioThreadContext.recorderProps || $[16] !== superinterfaceContext.createMessageAbortControllerRef.current) {
+        if ($[14] !== audioThreadContext.audioRuntime.assistant || $[15] !== audioThreadContext.audioRuntime.user || $[16] !== superinterfaceContext.createMessageAbortControllerRef.current) {
             _t5 = function() {
                 var _superinterfaceContex;
-                audioThreadContext.messageAudioProps.stop();
+                audioThreadContext.audioRuntime.assistant.stop();
                 (_superinterfaceContex = superinterfaceContext.createMessageAbortControllerRef.current) === null || _superinterfaceContex === void 0 || _superinterfaceContex.abort();
-                audioThreadContext.recorderProps.start();
+                audioThreadContext.audioRuntime.user.start();
             };
-            $[14] = audioThreadContext.messageAudioProps;
-            $[15] = audioThreadContext.recorderProps;
+            $[14] = audioThreadContext.audioRuntime.assistant;
+            $[15] = audioThreadContext.audioRuntime.user;
             $[16] = superinterfaceContext.createMessageAbortControllerRef.current;
             $[17] = _t5;
         } else {
@@ -10365,14 +10400,14 @@ var ActionButton = function() {
         }
         var _t6;
         if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-            _t6 = /* @__PURE__ */ _jsx88(StopIcon2, {});
+            _t6 = /* @__PURE__ */ _jsx89(StopIcon2, {});
             $[18] = _t6;
         } else {
             _t6 = $[18];
         }
         var _t7;
         if ($[19] !== _t5) {
-            _t7 = /* @__PURE__ */ _jsx88(IconButton10, {
+            _t7 = /* @__PURE__ */ _jsx89(IconButton10, {
                 onClick: _t5,
                 size: "4",
                 color: "gray",
@@ -10386,27 +10421,27 @@ var ActionButton = function() {
         }
         return _t7;
     }
-    if (audioThreadContext.status === "playerPaused") {
+    if (status === "playerPaused") {
         var _t8;
-        if ($[21] !== audioThreadContext.messageAudioProps) {
+        if ($[21] !== audioThreadContext.audioRuntime.assistant) {
             _t8 = function() {
-                return audioThreadContext.messageAudioProps.play();
+                return audioThreadContext.audioRuntime.assistant.play();
             };
-            $[21] = audioThreadContext.messageAudioProps;
+            $[21] = audioThreadContext.audioRuntime.assistant;
             $[22] = _t8;
         } else {
             _t8 = $[22];
         }
         var _t9;
         if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-            _t9 = /* @__PURE__ */ _jsx88(ResumeIcon, {});
+            _t9 = /* @__PURE__ */ _jsx89(ResumeIcon, {});
             $[23] = _t9;
         } else {
             _t9 = $[23];
         }
         var _t10;
         if ($[24] !== _t8) {
-            _t10 = /* @__PURE__ */ _jsx88(IconButton10, {
+            _t10 = /* @__PURE__ */ _jsx89(IconButton10, {
                 onClick: _t8,
                 size: "4",
                 children: _t9
@@ -10420,7 +10455,7 @@ var ActionButton = function() {
     }
     var t0;
     if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-        t0 = /* @__PURE__ */ _jsx88(IconButton10, {
+        t0 = /* @__PURE__ */ _jsx89(IconButton10, {
             size: "4",
             variant: "soft",
             disabled: true
@@ -10432,7 +10467,7 @@ var ActionButton = function() {
     return t0;
 };
 // src/components/threads/AudioThread/Form/index.tsx
-import { jsx as _jsx89, jsxs as _jsxs34 } from "react/jsx-runtime";
+import { jsx as _jsx90, jsxs as _jsxs34 } from "react/jsx-runtime";
 function ownKeys50(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -10477,16 +10512,17 @@ function _toPrimitive50(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var Form = function(props) {
-    var $ = _c54(17);
+    var $ = _c56(17);
+    var status = useStatus().status;
     var audioThreadContext = useAudioThreadContext();
-    var t0 = audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)";
+    var t0 = status === "recording" ? "var(--accent-11)" : "var(--gray-11)";
     var t1;
     if ($[0] !== t0) {
-        t1 = /* @__PURE__ */ _jsx89(Flex34, {
+        t1 = /* @__PURE__ */ _jsx90(Flex34, {
             ml: "-22.5px",
             mr: "2",
             align: "center",
-            children: /* @__PURE__ */ _jsx89(MicIcon, {
+            children: /* @__PURE__ */ _jsx90(MicIcon, {
                 style: {
                     color: t0
                 }
@@ -10497,7 +10533,7 @@ var Form = function(props) {
     } else {
         t1 = $[1];
     }
-    var t2 = audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)";
+    var t2 = status === "recording" ? "var(--accent-4)" : "var(--gray-4)";
     var t3;
     if ($[2] !== t2) {
         t3 = {
@@ -10509,16 +10545,16 @@ var Form = function(props) {
     } else {
         t3 = $[3];
     }
-    var t4 = audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)";
+    var t4 = status === "recording" ? "var(--accent-11)" : "var(--gray-11)";
     var t5;
-    if ($[4] !== audioThreadContext.recorderProps.visualizationAnalyser || $[5] !== t4) {
-        t5 = /* @__PURE__ */ _jsx89(BarsVisualizer, {
-            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
+    if ($[4] !== audioThreadContext.audioRuntime.user.visualizationAnalyser || $[5] !== t4) {
+        t5 = /* @__PURE__ */ _jsx90(BarsVisualizer, {
+            visualizationAnalyser: audioThreadContext.audioRuntime.user.visualizationAnalyser,
             backgroundColor: t4,
             height: "20px",
             barWidth: "12px"
         });
-        $[4] = audioThreadContext.recorderProps.visualizationAnalyser;
+        $[4] = audioThreadContext.audioRuntime.user.visualizationAnalyser;
         $[5] = t4;
         $[6] = t5;
     } else {
@@ -10526,7 +10562,7 @@ var Form = function(props) {
     }
     var t6;
     if ($[7] !== t3 || $[8] !== t5) {
-        t6 = /* @__PURE__ */ _jsx89(Flex34, {
+        t6 = /* @__PURE__ */ _jsx90(Flex34, {
             px: "2",
             py: "1",
             style: t3,
@@ -10556,7 +10592,7 @@ var Form = function(props) {
     }
     var t8;
     if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-        t8 = /* @__PURE__ */ _jsx89(ActionButton, {});
+        t8 = /* @__PURE__ */ _jsx90(ActionButton, {});
         $[13] = t8;
     } else {
         t8 = $[13];
@@ -10581,7 +10617,7 @@ var Form = function(props) {
     return t9;
 };
 // src/components/threads/AudioThread/index.tsx
-import { jsx as _jsx90, jsxs as _jsxs35 } from "react/jsx-runtime";
+import { jsx as _jsx91, jsxs as _jsxs35 } from "react/jsx-runtime";
 function ownKeys51(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -10628,9 +10664,9 @@ function _toPrimitive51(t, r) {
 var AudioThread = function(props) {
     return /* @__PURE__ */ _jsxs35(Root12, _objectSpread51(_objectSpread51({}, props), {}, {
         children: [
-            /* @__PURE__ */ _jsx90(Visualization, {}),
-            /* @__PURE__ */ _jsx90(Status, {}),
-            /* @__PURE__ */ _jsx90(Form, {})
+            /* @__PURE__ */ _jsx91(Visualization, {}),
+            /* @__PURE__ */ _jsx91(Status, {}),
+            /* @__PURE__ */ _jsx91(Form, {})
         ]
     }));
 };
@@ -10639,7 +10675,7 @@ AudioThread.Visualization = Visualization;
 AudioThread.Status = Status;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-import { jsx as _jsx91, jsxs as _jsxs36 } from "react/jsx-runtime";
+import { jsx as _jsx92, jsxs as _jsxs36 } from "react/jsx-runtime";
 function ownKeys52(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -10686,20 +10722,483 @@ function _toPrimitive52(t, r) {
 var AudioThreadDialog = function(props) {
     return /* @__PURE__ */ _jsxs36(Root9, _objectSpread52(_objectSpread52({}, props), {}, {
         children: [
-            /* @__PURE__ */ _jsx91(Content7.Root, {
-                children: /* @__PURE__ */ _jsx91(AudioThread, {})
+            /* @__PURE__ */ _jsx92(Content7.Root, {
+                children: /* @__PURE__ */ _jsx92(AudioThread, {})
             }),
-            /* @__PURE__ */ _jsx91(Trigger, {})
+            /* @__PURE__ */ _jsx92(Trigger, {})
         ]
     }));
 };
 AudioThreadDialog.Root = Root9;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Content = Content7;
+// src/hooks/audioRuntimes/useWebrtcAudioRuntime/index.ts
+import { useEffect as useEffect13, useMemo as useMemo20, useRef as useRef9, useState as useState12 } from "react";
+function asyncGeneratorStep12(n, t, e, r, o, a, c) {
+    try {
+        var i = n[a](c), u = i.value;
+    } catch (n2) {
+        return void e(n2);
+    }
+    i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator12(n) {
+    return function() {
+        var t = this, e = arguments;
+        return new Promise(function(r, o) {
+            var a = n.apply(t, e);
+            function _next(n2) {
+                asyncGeneratorStep12(a, r, o, _next, _throw, "next", n2);
+            }
+            function _throw(n2) {
+                asyncGeneratorStep12(a, r, o, _next, _throw, "throw", n2);
+            }
+            _next(void 0);
+        });
+    };
+}
+var useWebrtcAudioRuntime = function() {
+    var startSessionIfNeeded = function startSessionIfNeeded() {
+        return _startSessionIfNeeded.apply(this, arguments);
+    };
+    var initRealtimeSession = function initRealtimeSession() {
+        return _initRealtimeSession.apply(this, arguments);
+    };
+    var buildAnalyzers = function buildAnalyzers(localStream, audioEl_0) {
+        try {
+            var audioCtx1 = new AudioContext();
+            var micSource = audioCtx1.createMediaStreamSource(localStream);
+            var micAnalyser = audioCtx1.createAnalyser();
+            micSource.connect(micAnalyser);
+            userAnalyserRef.current = micAnalyser;
+            audioEl_0.addEventListener("canplay", function() {
+                var audioCtx2 = new AudioContext();
+                var remoteSource = audioCtx2.createMediaElementSource(audioEl_0);
+                var remoteAnalyser = audioCtx2.createAnalyser();
+                remoteSource.connect(remoteAnalyser);
+                remoteSource.connect(audioCtx2.destination);
+                assistantAnalyserRef.current = remoteAnalyser;
+            });
+        } catch (err_0) {
+            console.warn("Could not build analyzers:", err_0);
+        }
+    };
+    var _useState12 = _sliced_to_array(useState12("idle"), 2), recorderStatus = _useState12[0], setRecorderStatus = _useState12[1];
+    var superinterfaceContext = useSuperinterfaceContext();
+    var _useState121 = _sliced_to_array(useState12(false), 2), userIsPending = _useState121[0], setUserIsPending = _useState121[1];
+    var _useState122 = _sliced_to_array(useState12(false), 2), assistantPlaying = _useState122[0], setAssistantPlaying = _useState122[1];
+    var _useState123 = _sliced_to_array(useState12(false), 2), assistantPaused = _useState123[0], setAssistantPaused = _useState123[1];
+    var _useState124 = _sliced_to_array(useState12(true), 2), assistantIsPending = _useState124[0], setAssistantIsPending = _useState124[1];
+    var _useState125 = _sliced_to_array(useState12(false), 2), assistantIsReady = _useState125[0], setAssistantIsReady = _useState125[1];
+    var _useState126 = _sliced_to_array(useState12(false), 2), assistantAudioPlayed = _useState126[0], setAssistantAudioPlayed = _useState126[1];
+    var sessionStartedRef = useRef9(false);
+    var pcRef = useRef9(null);
+    var localStreamRef = useRef9(null);
+    var remoteStreamRef = useRef9(null);
+    var userAnalyserRef = useRef9(null);
+    var assistantAnalyserRef = useRef9(null);
+    var assistantAudioElRef = useRef9(null);
+    useEffect13(function() {
+        return function() {
+            if (pcRef.current) {
+                pcRef.current.close();
+                pcRef.current = null;
+            }
+            if (assistantAudioElRef.current) {
+                assistantAudioElRef.current.srcObject = null;
+            }
+        };
+    }, []);
+    function _startSessionIfNeeded() {
+        _startSessionIfNeeded = _asyncToGenerator12(function() {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (sessionStartedRef.current) return [
+                            2
+                        ];
+                        sessionStartedRef.current = true;
+                        return [
+                            4,
+                            initRealtimeSession()
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return _startSessionIfNeeded.apply(this, arguments);
+    }
+    function _initRealtimeSession() {
+        _initRealtimeSession = _asyncToGenerator12(function() {
+            var peerConn, audioEl, ms, offer, searchParams, sdpResponse, answerSdp, answer, err;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            7,
+                            ,
+                            8
+                        ]);
+                        setUserIsPending(true);
+                        peerConn = new RTCPeerConnection();
+                        pcRef.current = peerConn;
+                        audioEl = document.createElement("audio");
+                        audioEl.autoplay = true;
+                        assistantAudioElRef.current = audioEl;
+                        peerConn.ontrack = function(evt) {
+                            remoteStreamRef.current = evt.streams[0];
+                            audioEl.srcObject = evt.streams[0];
+                            setAssistantIsPending(false);
+                            setAssistantPlaying(true);
+                            setAssistantPaused(false);
+                            setAssistantAudioPlayed(true);
+                        };
+                        peerConn.createDataChannel("unused-negotiation-only");
+                        peerConn.addEventListener("datachannel", function(event) {
+                            var channel = event.channel;
+                            if (channel.label === "thread-events") {
+                                channel.onmessage = function(_ref) {
+                                    var data2 = _ref.data;
+                                    console.log("Data channel message:", data2);
+                                    var parsedData = JSON.parse(data2);
+                                    if (parsedData.event === "thread.created") {
+                                        threadCreated({
+                                            value: parsedData,
+                                            superinterfaceContext: superinterfaceContext
+                                        });
+                                    } else if (parsedData.event === "thread.run.requires_action") {
+                                        threadRunRequiresAction({
+                                            value: parsedData,
+                                            superinterfaceContext: superinterfaceContext
+                                        });
+                                    }
+                                };
+                            }
+                        });
+                        return [
+                            4,
+                            navigator.mediaDevices.getUserMedia({
+                                audio: true
+                            })
+                        ];
+                    case 1:
+                        ms = _state.sent();
+                        localStreamRef.current = ms;
+                        ms.getTracks().forEach(function(t) {
+                            peerConn.addTrack(t, ms);
+                        });
+                        setRecorderStatus("idle");
+                        return [
+                            4,
+                            peerConn.createOffer()
+                        ];
+                    case 2:
+                        offer = _state.sent();
+                        return [
+                            4,
+                            peerConn.setLocalDescription(offer)
+                        ];
+                    case 3:
+                        _state.sent();
+                        searchParams = new URLSearchParams(variableParams({
+                            variables: superinterfaceContext.variables,
+                            superinterfaceContext: superinterfaceContext
+                        }));
+                        return [
+                            4,
+                            fetch("".concat(superinterfaceContext.baseUrl, "/audio-runtimes/webrtc?").concat(searchParams), {
+                                method: "POST",
+                                body: offer.sdp,
+                                headers: {
+                                    "Content-Type": "application/sdp"
+                                }
+                            })
+                        ];
+                    case 4:
+                        sdpResponse = _state.sent();
+                        return [
+                            4,
+                            sdpResponse.text()
+                        ];
+                    case 5:
+                        answerSdp = _state.sent();
+                        answer = {
+                            type: "answer",
+                            sdp: answerSdp
+                        };
+                        return [
+                            4,
+                            peerConn.setRemoteDescription(answer)
+                        ];
+                    case 6:
+                        _state.sent();
+                        buildAnalyzers(ms, audioEl);
+                        setUserIsPending(false);
+                        setAssistantIsPending(false);
+                        setAssistantIsReady(true);
+                        setAssistantPlaying(true);
+                        return [
+                            3,
+                            8
+                        ];
+                    case 7:
+                        err = _state.sent();
+                        console.error("Error initRealtimeSession:", err);
+                        setUserIsPending(false);
+                        setRecorderStatus("stopped");
+                        setAssistantPlaying(false);
+                        setAssistantPaused(false);
+                        setAssistantIsPending(false);
+                        setAssistantIsReady(false);
+                        setAssistantAudioPlayed(false);
+                        return [
+                            3,
+                            8
+                        ];
+                    case 8:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return _initRealtimeSession.apply(this, arguments);
+    }
+    return useMemo20(function() {
+        return {
+            webrtcAudioRuntime: {
+                user: {
+                    start: function() {
+                        var _start = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                switch(_state.label){
+                                    case 0:
+                                        return [
+                                            4,
+                                            startSessionIfNeeded()
+                                        ];
+                                    case 1:
+                                        _state.sent();
+                                        setRecorderStatus("recording");
+                                        if (localStreamRef.current) {
+                                            localStreamRef.current.getAudioTracks().forEach(function(t_0) {
+                                                return t_0.enabled = true;
+                                            });
+                                        }
+                                        return [
+                                            2
+                                        ];
+                                }
+                            });
+                        });
+                        function start() {
+                            return _start.apply(this, arguments);
+                        }
+                        return start;
+                    }(),
+                    pause: function() {
+                        var _pause = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                if (!sessionStartedRef.current) return [
+                                    2
+                                ];
+                                setRecorderStatus("paused");
+                                if (localStreamRef.current) {
+                                    localStreamRef.current.getAudioTracks().forEach(function(t_1) {
+                                        return t_1.enabled = false;
+                                    });
+                                }
+                                return [
+                                    2
+                                ];
+                            });
+                        });
+                        function pause() {
+                            return _pause.apply(this, arguments);
+                        }
+                        return pause;
+                    }(),
+                    resume: function() {
+                        var _resume = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                if (!sessionStartedRef.current) return [
+                                    2
+                                ];
+                                setRecorderStatus("recording");
+                                if (localStreamRef.current) {
+                                    localStreamRef.current.getAudioTracks().forEach(function(t_2) {
+                                        return t_2.enabled = true;
+                                    });
+                                }
+                                return [
+                                    2
+                                ];
+                            });
+                        });
+                        function resume() {
+                            return _resume.apply(this, arguments);
+                        }
+                        return resume;
+                    }(),
+                    stop: function() {
+                        var _stop = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                if (!sessionStartedRef.current) return [
+                                    2
+                                ];
+                                setRecorderStatus("stopped");
+                                if (localStreamRef.current) {
+                                    localStreamRef.current.getTracks().forEach(function(track) {
+                                        return track.stop();
+                                    });
+                                }
+                                return [
+                                    2
+                                ];
+                            });
+                        });
+                        function stop() {
+                            return _stop.apply(this, arguments);
+                        }
+                        return stop;
+                    }(),
+                    isPending: userIsPending,
+                    visualizationAnalyser: userAnalyserRef.current,
+                    rawStatus: recorderStatus
+                },
+                assistant: {
+                    play: function() {
+                        var _play = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                switch(_state.label){
+                                    case 0:
+                                        return [
+                                            4,
+                                            startSessionIfNeeded()
+                                        ];
+                                    case 1:
+                                        _state.sent();
+                                        setAssistantPaused(false);
+                                        setAssistantPlaying(true);
+                                        if (assistantAudioElRef.current) {
+                                            assistantAudioElRef.current.play().catch(function(err_1) {
+                                                console.error("Assistant play error:", err_1);
+                                            });
+                                        }
+                                        return [
+                                            2
+                                        ];
+                                }
+                            });
+                        });
+                        function play() {
+                            return _play.apply(this, arguments);
+                        }
+                        return play;
+                    }(),
+                    pause: function() {
+                        var _pause2 = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                if (!sessionStartedRef.current) return [
+                                    2
+                                ];
+                                setAssistantPaused(true);
+                                setAssistantPlaying(false);
+                                if (assistantAudioElRef.current) {
+                                    assistantAudioElRef.current.pause();
+                                }
+                                return [
+                                    2
+                                ];
+                            });
+                        });
+                        function pause() {
+                            return _pause2.apply(this, arguments);
+                        }
+                        return pause;
+                    }(),
+                    stop: function() {
+                        var _stop2 = _asyncToGenerator12(function() {
+                            return _ts_generator(this, function(_state) {
+                                if (!sessionStartedRef.current) return [
+                                    2
+                                ];
+                                setAssistantPaused(false);
+                                setAssistantPlaying(false);
+                                if (assistantAudioElRef.current) {
+                                    assistantAudioElRef.current.pause();
+                                    assistantAudioElRef.current.currentTime = 0;
+                                }
+                                return [
+                                    2
+                                ];
+                            });
+                        });
+                        function stop() {
+                            return _stop2.apply(this, arguments);
+                        }
+                        return stop;
+                    }(),
+                    visualizationAnalyser: assistantAnalyserRef.current,
+                    playing: assistantPlaying,
+                    paused: assistantPaused,
+                    isPending: assistantIsPending,
+                    isReady: assistantIsReady,
+                    isAudioPlayed: assistantAudioPlayed,
+                    rawStatus: void 0
+                }
+            }
+        };
+    }, [
+        recorderStatus,
+        userIsPending,
+        assistantPlaying,
+        assistantPaused,
+        assistantIsPending,
+        assistantIsReady,
+        assistantAudioPlayed
+    ]);
+};
+// src/components/audioRuntimes/WebrtcAudioRuntimeProvider.tsx
+import { c as _c57 } from "react-compiler-runtime";
+import { jsx as _jsx93 } from "react/jsx-runtime";
+var WebrtcAudioRuntimeProvider = function(t0) {
+    var $ = _c57(5);
+    var children = t0.children;
+    var webrtcAudioRuntime = useWebrtcAudioRuntime().webrtcAudioRuntime;
+    var t1;
+    if ($[0] !== webrtcAudioRuntime) {
+        t1 = {
+            audioRuntime: webrtcAudioRuntime
+        };
+        $[0] = webrtcAudioRuntime;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    var t2;
+    if ($[2] !== children || $[3] !== t1) {
+        t2 = /* @__PURE__ */ _jsx93(AudioThreadContext.Provider, {
+            value: t1,
+            children: children
+        });
+        $[2] = children;
+        $[3] = t1;
+        $[4] = t2;
+    } else {
+        t2 = $[4];
+    }
+    return t2;
+};
 // src/components/markdown/MarkdownProvider/index.tsx
-import { c as _c55 } from "react-compiler-runtime";
-import { useMemo as useMemo19 } from "react";
-import { jsx as _jsx92 } from "react/jsx-runtime";
+import { c as _c58 } from "react-compiler-runtime";
+import { useMemo as useMemo21 } from "react";
+import { jsx as _jsx94 } from "react/jsx-runtime";
 var _excluded6 = [
     "children"
 ];
@@ -10722,7 +11221,7 @@ function _objectWithoutPropertiesLoose6(r, e) {
     return t;
 }
 var MarkdownProvider = function(t0) {
-    var $ = _c55(9);
+    var $ = _c58(9);
     var children;
     var rest;
     if ($[0] !== t0) {
@@ -10752,7 +11251,7 @@ var MarkdownProvider = function(t0) {
     var value = t1;
     var t3;
     if ($[6] !== children || $[7] !== value) {
-        t3 = /* @__PURE__ */ _jsx92(MarkdownContext.Provider, {
+        t3 = /* @__PURE__ */ _jsx94(MarkdownContext.Provider, {
             value: value,
             children: children
         });
@@ -10765,18 +11264,18 @@ var MarkdownProvider = function(t0) {
     return t3;
 };
 // src/components/annotations/SourceAnnotation/index.tsx
-import { c as _c58 } from "react-compiler-runtime";
+import { c as _c61 } from "react-compiler-runtime";
 // src/components/annotations/SourceAnnotation/FileCitation/index.tsx
-import { c as _c57 } from "react-compiler-runtime";
-import { useState as useState12 } from "react";
+import { c as _c60 } from "react-compiler-runtime";
+import { useState as useState13 } from "react";
 import { QuoteIcon as QuoteIcon2 } from "@radix-ui/react-icons";
 import { Dialog, VisuallyHidden, IconButton as IconButton11 } from "@radix-ui/themes";
 // src/components/annotations/SourceAnnotation/FileCitation/Content.tsx
-import { c as _c56 } from "react-compiler-runtime";
+import { c as _c59 } from "react-compiler-runtime";
 import { Flex as Flex35, Card as Card5, Inset as Inset3 } from "@radix-ui/themes";
-import { jsx as _jsx93 } from "react/jsx-runtime";
+import { jsx as _jsx95 } from "react/jsx-runtime";
 var Content9 = function(t0) {
-    var $ = _c56(5);
+    var $ = _c59(5);
     var fileId = t0.fileId;
     var superinterfaceContext = useSuperinterfaceContext();
     var nextSearchParams = new URLSearchParams(superinterfaceContext.variables);
@@ -10813,18 +11312,18 @@ var Content9 = function(t0) {
     }
     var t5;
     if ($[3] !== t3) {
-        t5 = /* @__PURE__ */ _jsx93(Flex35, {
+        t5 = /* @__PURE__ */ _jsx95(Flex35, {
             direction: "column",
             flexGrow: "1",
             gap: "3",
-            children: /* @__PURE__ */ _jsx93(Card5, {
+            children: /* @__PURE__ */ _jsx95(Card5, {
                 style: t1,
-                children: /* @__PURE__ */ _jsx93(Inset3, {
+                children: /* @__PURE__ */ _jsx95(Inset3, {
                     clip: "padding-box",
                     style: t2,
-                    children: /* @__PURE__ */ _jsx93(Flex35, {
+                    children: /* @__PURE__ */ _jsx95(Flex35, {
                         flexGrow: "1",
-                        children: /* @__PURE__ */ _jsx93("embed", {
+                        children: /* @__PURE__ */ _jsx95("embed", {
                             src: t3,
                             style: t4
                         })
@@ -10840,11 +11339,11 @@ var Content9 = function(t0) {
     return t5;
 };
 // src/components/annotations/SourceAnnotation/FileCitation/index.tsx
-import { jsx as _jsx94, jsxs as _jsxs37, Fragment as _Fragment4 } from "react/jsx-runtime";
+import { jsx as _jsx96, jsxs as _jsxs37, Fragment as _Fragment4 } from "react/jsx-runtime";
 var FileCitation = function(t0) {
-    var $ = _c57(18);
+    var $ = _c60(18);
     var annotation = t0.annotation;
-    var _useState12 = _sliced_to_array(useState12(null), 2), activeFileId = _useState12[0], setActiveFileId = _useState12[1];
+    var _useState13 = _sliced_to_array(useState13(null), 2), activeFileId = _useState13[0], setActiveFileId = _useState13[1];
     var t1;
     if ($[0] !== annotation.file_citation.file_id) {
         t1 = function() {
@@ -10857,14 +11356,14 @@ var FileCitation = function(t0) {
     }
     var t2;
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = /* @__PURE__ */ _jsx94(QuoteIcon2, {});
+        t2 = /* @__PURE__ */ _jsx96(QuoteIcon2, {});
         $[2] = t2;
     } else {
         t2 = $[2];
     }
     var t3;
     if ($[3] !== t1) {
-        t3 = /* @__PURE__ */ _jsx94(IconButton11, {
+        t3 = /* @__PURE__ */ _jsx96(IconButton11, {
             variant: "soft",
             color: "gray",
             size: "1",
@@ -10900,9 +11399,9 @@ var FileCitation = function(t0) {
     }
     var t7;
     if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-        t7 = /* @__PURE__ */ _jsx94(VisuallyHidden, {
+        t7 = /* @__PURE__ */ _jsx96(VisuallyHidden, {
             asChild: true,
-            children: /* @__PURE__ */ _jsx94(Dialog.Title, {
+            children: /* @__PURE__ */ _jsx96(Dialog.Title, {
                 children: "Source"
             })
         });
@@ -10912,7 +11411,7 @@ var FileCitation = function(t0) {
     }
     var t8;
     if ($[8] !== activeFileId) {
-        t8 = activeFileId && /* @__PURE__ */ _jsx94(Content9, {
+        t8 = activeFileId && /* @__PURE__ */ _jsx96(Content9, {
             fileId: activeFileId
         });
         $[8] = activeFileId;
@@ -10940,7 +11439,7 @@ var FileCitation = function(t0) {
     }
     var t10;
     if ($[12] !== t4 || $[13] !== t9) {
-        t10 = /* @__PURE__ */ _jsx94(Dialog.Root, {
+        t10 = /* @__PURE__ */ _jsx96(Dialog.Root, {
             open: t4,
             onOpenChange: t5,
             children: t9
@@ -10968,7 +11467,7 @@ var FileCitation = function(t0) {
     return t11;
 };
 // src/components/annotations/SourceAnnotation/index.tsx
-import { jsx as _jsx95 } from "react/jsx-runtime";
+import { jsx as _jsx97 } from "react/jsx-runtime";
 var _excluded7 = [
     "children"
 ];
@@ -10991,7 +11490,7 @@ function _objectWithoutPropertiesLoose7(r, e) {
     return t;
 }
 var SourceAnnotation = function(t0) {
-    var $ = _c58(10);
+    var $ = _c61(10);
     var children;
     var rest;
     if ($[0] !== t0) {
@@ -11019,7 +11518,7 @@ var SourceAnnotation = function(t0) {
     if (annotation.type === "file_citation") {
         var t2;
         if ($[5] !== annotation) {
-            t2 = /* @__PURE__ */ _jsx95(FileCitation, {
+            t2 = /* @__PURE__ */ _jsx97(FileCitation, {
                 annotation: annotation
             });
             $[5] = annotation;
@@ -11032,7 +11531,7 @@ var SourceAnnotation = function(t0) {
         if (annotation.type === "file_path") {
             var _t2;
             if ($[7] !== annotation || $[8] !== children) {
-                _t2 = /* @__PURE__ */ _jsx95(FilePathAnnotation, {
+                _t2 = /* @__PURE__ */ _jsx97(FilePathAnnotation, {
                     annotation: annotation,
                     children: children
                 });
@@ -11048,7 +11547,7 @@ var SourceAnnotation = function(t0) {
     return null;
 };
 // src/components/avatars/Avatar.tsx
-import { c as _c61 } from "react-compiler-runtime";
+import { c as _c64 } from "react-compiler-runtime";
 // src/lib/enums/index.ts
 var IconAvatarName = /* @__PURE__ */ function(IconAvatarName2) {
     IconAvatarName2["BACKPACK"] = "BACKPACK";
@@ -11073,7 +11572,7 @@ var AvatarType = /* @__PURE__ */ function(AvatarType2) {
 // src/components/avatars/Avatar.tsx
 import { Avatar as RadixAvatar } from "@radix-ui/themes";
 // src/components/imageAvatars/ImageAvatar/index.tsx
-import { c as _c59 } from "react-compiler-runtime";
+import { c as _c62 } from "react-compiler-runtime";
 import { Avatar as Avatar4 } from "@radix-ui/themes";
 // src/components/imageAvatars/ImageAvatar/lib/optimizedSrc/path.ts
 var width = function(_ref) {
@@ -11125,9 +11624,9 @@ var optimizedSrc = function(_ref) {
     }));
 };
 // src/components/imageAvatars/ImageAvatar/index.tsx
-import { jsx as _jsx96 } from "react/jsx-runtime";
+import { jsx as _jsx98 } from "react/jsx-runtime";
 var ImageAvatar = function(t0) {
-    var $ = _c59(9);
+    var $ = _c62(9);
     var imageAvatar = t0.imageAvatar, size = t0.size, className = t0.className, style = t0.style;
     var superinterfaceContext = useSuperinterfaceContext();
     var t1;
@@ -11146,7 +11645,7 @@ var ImageAvatar = function(t0) {
     }
     var t2;
     if ($[4] !== className || $[5] !== size || $[6] !== style || $[7] !== t1) {
-        t2 = /* @__PURE__ */ _jsx96(Avatar4, {
+        t2 = /* @__PURE__ */ _jsx98(Avatar4, {
             className: className,
             style: style,
             fallback: "",
@@ -11164,24 +11663,24 @@ var ImageAvatar = function(t0) {
     return t2;
 };
 // src/components/iconAvatars/IconAvatar.tsx
-import { c as _c60 } from "react-compiler-runtime";
-import { useMemo as useMemo20 } from "react";
+import { c as _c63 } from "react-compiler-runtime";
+import { useMemo as useMemo22 } from "react";
 import { Avatar as Avatar5 } from "@radix-ui/themes";
 // src/lib/iconAvatars/iconAvatarComponents.ts
 import { BackpackIcon, RocketIcon, MagicWandIcon, CubeIcon, TargetIcon, DiscIcon, GlobeIcon, StarIcon, LightningBoltIcon as LightningBoltIcon2, FaceIcon, PersonIcon as PersonIcon2, HeartIcon } from "@radix-ui/react-icons";
 var _obj;
 var iconAvatarComponents = (_obj = {}, _define_property(_obj, IconAvatarName.BACKPACK, BackpackIcon), _define_property(_obj, IconAvatarName.ROCKET, RocketIcon), _define_property(_obj, IconAvatarName.MAGIC_WAND, MagicWandIcon), _define_property(_obj, IconAvatarName.CUBE, CubeIcon), _define_property(_obj, IconAvatarName.TARGET, TargetIcon), _define_property(_obj, IconAvatarName.DISC, DiscIcon), _define_property(_obj, IconAvatarName.GLOBE, GlobeIcon), _define_property(_obj, IconAvatarName.STAR, StarIcon), _define_property(_obj, IconAvatarName.LIGHTNING_BOLT, LightningBoltIcon2), _define_property(_obj, IconAvatarName.FACE, FaceIcon), _define_property(_obj, IconAvatarName.PERSON, PersonIcon2), _define_property(_obj, IconAvatarName.HEART, HeartIcon), _obj);
 // src/components/iconAvatars/IconAvatar.tsx
-import { jsx as _jsx97 } from "react/jsx-runtime";
+import { jsx as _jsx99 } from "react/jsx-runtime";
 var IconAvatar = function(t0) {
-    var $ = _c60(7);
+    var $ = _c63(7);
     var iconAvatar = t0.iconAvatar, size = t0.size, className = t0.className, style = t0.style;
     var t1;
     t1 = iconAvatarComponents[iconAvatar.name];
     var Component2 = t1;
     var t2;
     if ($[0] !== Component2) {
-        t2 = Component2 ? /* @__PURE__ */ _jsx97(Component2, {}) : "";
+        t2 = Component2 ? /* @__PURE__ */ _jsx99(Component2, {}) : "";
         $[0] = Component2;
         $[1] = t2;
     } else {
@@ -11189,7 +11688,7 @@ var IconAvatar = function(t0) {
     }
     var t3;
     if ($[2] !== className || $[3] !== size || $[4] !== style || $[5] !== t2) {
-        t3 = /* @__PURE__ */ _jsx97(Avatar5, {
+        t3 = /* @__PURE__ */ _jsx99(Avatar5, {
             className: className,
             style: style,
             size: size,
@@ -11206,16 +11705,16 @@ var IconAvatar = function(t0) {
     return t3;
 };
 // src/components/avatars/Avatar.tsx
-import { jsx as _jsx98 } from "react/jsx-runtime";
+import { jsx as _jsx100 } from "react/jsx-runtime";
 var Avatar6 = function(t0) {
-    var $ = _c61(14);
+    var $ = _c64(14);
     var avatar = t0.avatar, t1 = t0.size, className = t0.className, style = t0.style;
     var size = t1 === void 0 ? "1" : t1;
     if (avatar) {
         if (avatar.type === AvatarType.IMAGE && avatar.imageAvatar) {
             var _t;
             if ($[0] !== avatar.imageAvatar || $[1] !== className || $[2] !== size || $[3] !== style) {
-                _t = /* @__PURE__ */ _jsx98(ImageAvatar, {
+                _t = /* @__PURE__ */ _jsx100(ImageAvatar, {
                     imageAvatar: avatar.imageAvatar,
                     size: size,
                     className: className,
@@ -11234,7 +11733,7 @@ var Avatar6 = function(t0) {
         if (avatar.type === AvatarType.ICON && avatar.iconAvatar) {
             var _t2;
             if ($[5] !== avatar.iconAvatar || $[6] !== className || $[7] !== size || $[8] !== style) {
-                _t2 = /* @__PURE__ */ _jsx98(IconAvatar, {
+                _t2 = /* @__PURE__ */ _jsx100(IconAvatar, {
                     iconAvatar: avatar.iconAvatar,
                     size: size,
                     className: className,
@@ -11253,7 +11752,7 @@ var Avatar6 = function(t0) {
     }
     var t2;
     if ($[10] !== className || $[11] !== size || $[12] !== style) {
-        t2 = /* @__PURE__ */ _jsx98(RadixAvatar, {
+        t2 = /* @__PURE__ */ _jsx100(RadixAvatar, {
             fallback: "",
             size: size,
             className: className,
@@ -11269,15 +11768,15 @@ var Avatar6 = function(t0) {
     return t2;
 };
 // src/components/components/ComponentsProvider.tsx
-import { c as _c62 } from "react-compiler-runtime";
-import { useMemo as useMemo21 } from "react";
+import { c as _c65 } from "react-compiler-runtime";
+import { useMemo as useMemo23 } from "react";
 // src/hooks/components/useComponents.ts
 import { useContext as useContext17 } from "react";
 var useComponents = function() {
     return useContext17(ComponentsContext);
 };
 // src/components/components/ComponentsProvider.tsx
-import { jsx as _jsx99 } from "react/jsx-runtime";
+import { jsx as _jsx101 } from "react/jsx-runtime";
 var _excluded8 = [
     "children"
 ];
@@ -11300,7 +11799,7 @@ function _objectWithoutPropertiesLoose8(r, e) {
     return t;
 }
 var ComponentsProvider = function(t0) {
-    var $ = _c62(9);
+    var $ = _c65(9);
     var children;
     var rest;
     if ($[0] !== t0) {
@@ -11330,7 +11829,7 @@ var ComponentsProvider = function(t0) {
     var value = t1;
     var t3;
     if ($[6] !== children || $[7] !== value) {
-        t3 = /* @__PURE__ */ _jsx99(ComponentsContext.Provider, {
+        t3 = /* @__PURE__ */ _jsx101(ComponentsContext.Provider, {
             value: value,
             children: children
         });
@@ -11343,11 +11842,11 @@ var ComponentsProvider = function(t0) {
     return t3;
 };
 // src/components/assistants/AssistantProvider/index.tsx
-import { c as _c63 } from "react-compiler-runtime";
-import { jsx as _jsx100 } from "react/jsx-runtime";
+import { c as _c66 } from "react-compiler-runtime";
+import { jsx as _jsx102 } from "react/jsx-runtime";
 var AssistantProvider = function(t0) {
     var _assistant$name;
-    var $ = _c63(10);
+    var $ = _c66(10);
     var children = t0.children;
     var superinterfaceContext = useSuperinterfaceContext();
     var t1;
@@ -11365,7 +11864,7 @@ var AssistantProvider = function(t0) {
     var t3 = assistant === null || assistant === void 0 ? void 0 : assistant.avatar;
     var t4;
     if ($[2] !== t3) {
-        t4 = /* @__PURE__ */ _jsx100(Avatar6, {
+        t4 = /* @__PURE__ */ _jsx102(Avatar6, {
             avatar: t3
         });
         $[2] = t3;
@@ -11375,7 +11874,7 @@ var AssistantProvider = function(t0) {
     }
     var t5;
     if ($[4] !== children || $[5] !== t4) {
-        t5 = /* @__PURE__ */ _jsx100(AssistantAvatarContext.Provider, {
+        t5 = /* @__PURE__ */ _jsx102(AssistantAvatarContext.Provider, {
             value: t4,
             children: children
         });
@@ -11387,7 +11886,7 @@ var AssistantProvider = function(t0) {
     }
     var t6;
     if ($[7] !== t2 || $[8] !== t5) {
-        t6 = /* @__PURE__ */ _jsx100(AssistantNameContext.Provider, {
+        t6 = /* @__PURE__ */ _jsx102(AssistantNameContext.Provider, {
             value: t2,
             children: t5
         });
@@ -11399,5 +11898,5 @@ var AssistantProvider = function(t0) {
     }
     return t6;
 };
-export { AssistantAvatarContext, AssistantNameContext, AssistantProvider, AudioThread, AudioThreadDialog, Avatar6 as Avatar, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, RunStep, SourceAnnotation, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, UserAvatarContext, useAssistant, useAudioThreadContext, useComponents, useCreateMessage, useIsMutatingMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessageFormContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext };
+export { AssistantAvatarContext, AssistantNameContext, AssistantProvider, AudioThread, AudioThreadDialog, Avatar6 as Avatar, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, RunStep, SourceAnnotation, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, TtsAudioRuntimeProvider, UserAvatarContext, WebrtcAudioRuntimeProvider, useAssistant, useAudioThreadContext, useComponents, useCreateMessage, useIsMutatingMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessageFormContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext, useTtsAudioRuntime, useWebrtcAudioRuntime };
 //# sourceMappingURL=index.js.map