@superinterface/react 2.12.0 → 2.13.0

package/dist/index.cjs

@@ -3359,6 +3359,7 @@ var Root8 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
+var import_react44 = require("react");
 var import_themes43 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
 var import_react42 = require("react");
@@ -3433,96 +3434,158 @@ var BarsVisualizer = function(param) {
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes43.Flex, {
+    var assistantNameContext = (0, import_react44.useContext)(AssistantNameContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_themes43.Flex, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
         flexGrow: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes43.Flex, {
-            align: "center",
-            justify: "center",
-            height: "200px",
-            width: "200px",
-            style: {
-                backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
-                borderRadius: "9999px"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BarsVisualizer, {
-                visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
-                backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
-                height: "40px",
-                barWidth: "24px"
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_themes43.Flex, {
+                align: "center",
+                justify: "center",
+                height: "200px",
+                width: "200px",
+                style: {
+                    backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-4)" : "var(--gray-4)",
+                    borderRadius: "9999px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BarsVisualizer, {
+                    visualizationAnalyser: audioThreadContext.messageAudioProps.visualizationAnalyser,
+                    backgroundColor: audioThreadContext.status === "playing" ? "var(--accent-11)" : "var(--gray-11)",
+                    height: "40px",
+                    barWidth: "24px"
+                })
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_themes43.Flex, {
+                ml: "-22.5px",
+                gap: "3",
+                pt: "5",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AssistantAvatar, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Name, {
+                        children: assistantNameContext
+                    })
+                ]
             })
+        ]
+    });
+};
+// src/components/threads/AudioThread/Status/StatusMessage.tsx
+var import_themes44 = require("@radix-ui/themes");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var StatusMessage = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Flex, {
+        justify: "center",
+        pb: "9",
+        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Text, {
+            size: "2",
+            weight: "regular",
+            color: "gray",
+            children: children
         })
     });
 };
+// src/components/threads/AudioThread/Status/index.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Status = function() {
+    var audioThreadContext = useAudioThreadContext();
+    if (audioThreadContext.status === "recording") {
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
+            children: "Listening"
+        });
+    }
+    if ([
+        "recorderPaused",
+        "idle",
+        "playerPaused"
+    ].includes(audioThreadContext.status)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
+            children: "Click to activate"
+        });
+    }
+    if (audioThreadContext.status === "playing") {
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
+            children: "Click to interrupt"
+        });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StatusMessage, {
+        children: "Thinking"
+    });
+};
 // src/components/threads/AudioThread/Form/index.tsx
-var import_themes45 = require("@radix-ui/themes");
+var import_themes46 = require("@radix-ui/themes");
+// src/components/threads/AudioThread/Form/MicIcon.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var MicIcon = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeWidth: 0,
+        viewBox: "0 0 384 512",
+        height: "15",
+        width: "15"
+    }, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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
-var import_themes44 = require("@radix-ui/themes");
+var import_themes45 = require("@radix-ui/themes");
 var import_react_icons9 = require("@radix-ui/react-icons");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     var superinterfaceContext = useSuperinterfaceContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes44.Flex, {
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_themes45.Flex, {
             align: "center",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.Flex, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
-                        radius: "full",
                         variant: "soft",
                         size: "1",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.PauseIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons9.PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
                     onClick: audioThreadContext.recorderProps.stop,
                     highContrast: true,
-                    radius: "full",
                     variant: "soft",
                     size: "4",
-                    style: {
-                        border: "2px solid var(--gray-8)"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.ArrowUpIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons9.ArrowUpIcon, {})
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
-            radius: "full",
             size: "4",
-            style: {
-                border: "2px solid var(--gray-8)"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons9.ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
             size: "4",
-            color: "red",
-            radius: "full",
-            style: {
-                border: "2px solid var(--gray-8)"
-            }
+            color: "red"
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
             onClick: function() {
                 var _superinterfaceContext_createMessageAbortControllerRef_current;
                 audioThreadContext.messageAudioProps.stop();
@@ -3531,74 +3594,75 @@ var ActionButton = function() {
             },
             size: "4",
             color: "gray",
-            radius: "full",
             variant: "soft",
-            style: {
-                border: "2px solid var(--gray-8)"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.StopIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons9.StopIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
             size: "4",
-            radius: "full",
-            style: {
-                border: "2px solid var(--gray-8)"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_icons9.ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes44.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_themes45.IconButton, {
         size: "4",
-        radius: "full",
         variant: "soft",
-        disabled: true,
-        style: {
-            border: "2px solid var(--gray-8)"
-        }
+        disabled: true
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_themes45.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes46.Flex, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes45.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes46.Flex, {
                 pb: "3",
                 align: "center",
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes45.Flex, {
-                    px: "2",
-                    py: "1",
-                    style: {
-                        backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
-                        borderRadius: "var(--radius-6)"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BarsVisualizer, {
-                        visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
-                        backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
-                        height: "20px",
-                        barWidth: "12px"
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes46.Flex, {
+                        ml: "-22.5px",
+                        mr: "2",
+                        align: "center",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(MicIcon, {
+                            style: {
+                                color: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)"
+                            }
+                        })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes46.Flex, {
+                        px: "2",
+                        py: "1",
+                        style: {
+                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-4)" : "var(--gray-4)",
+                            borderRadius: "var(--radius-6)"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(BarsVisualizer, {
+                            visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser,
+                            backgroundColor: audioThreadContext.status === "recording" ? "var(--accent-11)" : "var(--gray-11)",
+                            height: "20px",
+                            barWidth: "12px"
+                        })
                     })
-                })
+                ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Visualization, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Form, {})
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visualization, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Status, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Form, {})
         ]
     }));
 };
@@ -3606,15 +3670,15 @@ AudioThread.Root = Root8;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Root6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Root6, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Content4.Root, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AudioThread, {})
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content4.Root, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(AudioThread, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button2, {})
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Button2, {})
             })
         ]
     });
@@ -3624,20 +3688,20 @@ AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_radash13 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
-var import_themes47 = require("@radix-ui/themes");
+var import_themes48 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestions/Item.tsx
 var import_react_icons10 = require("@radix-ui/react-icons");
-var import_themes46 = require("@radix-ui/themes");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_themes47 = require("@radix-ui/themes");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Item = function(param) {
     var suggestion = param.suggestion, isDisabled = param.isDisabled;
     var _useCreateMessage = useCreateMessage(), createMessage = _useCreateMessage.createMessage, isPending = _useCreateMessage.isPending;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Content5, {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Content5, {
         onClick: function() {
             createMessage({
                 // @ts-ignore-next-line
@@ -3651,7 +3715,7 @@ var Item = function(param) {
 };
 var Content5 = function(param) {
     var onClick = param.onClick, isDisabled = param.isDisabled, isPending = param.isPending, children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_themes46.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_themes47.Button, {
         variant: "soft",
         onClick: onClick,
         disabled: isDisabled,
@@ -3661,14 +3725,14 @@ var Content5 = function(param) {
             flexShrink: 1
         },
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes46.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes47.Text, {
                 size: "1",
                 weight: "regular",
                 children: children
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_themes46.Spinner, {
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_themes47.Spinner, {
                 loading: isPending,
-                children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_icons10.ArrowUpIcon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_icons10.ArrowUpIcon, {
                     style: {
                         flexShrink: 0
                     }
@@ -3679,11 +3743,11 @@ var Content5 = function(param) {
 };
 Item.Content = Content5;
 // src/components/suggestions/Suggestions/Content.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = (0, import_react44.useMemo)(function() {
+    var suggestions = (0, import_react45.useMemo)(function() {
         return (0, import_react_children_utilities.onlyText)(children).split(/\r?\n/).filter(function(c) {
             return !(0, import_radash13.isEmpty)(c);
         }).map(function(c) {
@@ -3693,12 +3757,12 @@ var Content6 = function(param) {
         children
     ]);
     if ((0, import_radash13.isEmpty)(suggestions)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_themes47.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_themes48.Flex, {
         gap: "2",
         py: "2",
         wrap: "wrap",
         children: suggestions.map(function(suggestion) {
-            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Item, {
+            return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Item, {
                 suggestion: suggestion,
                 isDisabled: isMutatingMessage
             }, suggestion);
@@ -3706,11 +3770,11 @@ var Content6 = function(param) {
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = (0, import_react45.useMemo)(function() {
+    var isDisabled = (0, import_react46.useMemo)(function() {
         var // @ts-ignore-next-line
         _latestMessageProps_latestMessage_metadata, _latestMessageProps_latestMessage;
         return (_latestMessageProps_latestMessage = latestMessageProps.latestMessage) === null || _latestMessageProps_latestMessage === void 0 ? void 0 : (_latestMessageProps_latestMessage_metadata = _latestMessageProps_latestMessage.metadata) === null || _latestMessageProps_latestMessage_metadata === void 0 ? void 0 : _latestMessageProps_latestMessage_metadata.isBlocking;
@@ -3719,26 +3783,26 @@ var Suggestions = function(param) {
     ]);
     if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Content6, {
         children: children
     });
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-var import_react46 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react47 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var MarkdownProvider = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
     var prevMarkdownContext = useMarkdownContext();
-    var value = (0, import_react46.useMemo)(function() {
+    var value = (0, import_react47.useMemo)(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
         prevMarkdownContext
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MarkdownContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(MarkdownContext.Provider, {
         value: value,
         children: children
     });