@superinterface/react 2.13.4 → 2.14.0

package/dist/index.js

@@ -672,7 +672,7 @@ var useToasts = function() {
     return useContext2(ToastsContext);
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Box as Box10, Avatar as Avatar3 } from "@radix-ui/themes";
 import { PersonIcon } from "@radix-ui/react-icons";
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
@@ -727,6 +727,9 @@ var StartingContentSkeleton = function() {
 };
 // src/components/runSteps/RunSteps/index.tsx
 import { Flex as Flex9 } from "@radix-ui/themes";
+import { useContext as useContext5 } from "react";
+// src/contexts/components/ComponentsContext/index.tsx
+import { createContext as createContext6 } from "react";
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { Flex as Flex8 } from "@radix-ui/themes";
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
@@ -953,10 +956,16 @@ var Starting = function() {
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var Root = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx18(Flex8, {
+        direction: "column",
+        children: children
+    });
+};
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ jsxs5(Flex8, {
-        direction: "column",
+    return /* @__PURE__ */ jsxs5(Root, {
         children: [
             !stepDetails.tool_calls.length && /* @__PURE__ */ jsx18(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
@@ -968,6 +977,9 @@ var ToolCalls = function(param) {
         ]
     });
 };
+ToolCalls.Root = Root;
+ToolCalls.Starting = Starting;
+ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var RunStep = function(param) {
@@ -980,14 +992,23 @@ var RunStep = function(param) {
     }
     return null;
 };
+RunStep.ToolCalls = ToolCalls;
+// src/contexts/components/ComponentsContext/index.tsx
+var ComponentsContext = createContext6({
+    components: {
+        RunStep: RunStep
+    }
+});
 // src/components/runSteps/RunSteps/index.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
+    var componentsContext = useContext5(ComponentsContext);
+    var Component = componentsContext.components.RunStep;
     return /* @__PURE__ */ jsx20(Flex9, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ jsx20(RunStep, {
+            return /* @__PURE__ */ jsx20(Component, {
                 runStep: runStep
             }, runStep.id);
         })
@@ -1012,8 +1033,8 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/contexts/messages/MessageContext/index.ts
-import { createContext as createContext6 } from "react";
-var MessageContext = createContext6({
+import { createContext as createContext7 } from "react";
+var MessageContext = createContext7({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
@@ -1021,9 +1042,9 @@ var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/TextContent.tsx
 import { useRemarkSync } from "react-remark";
 // src/hooks/markdown/useMarkdownContext/index.ts
-import { useContext as useContext5 } from "react";
+import { useContext as useContext6 } from "react";
 // src/contexts/markdown/MarkdownContext/index.ts
-import { createContext as createContext7 } from "react";
+import { createContext as createContext8 } from "react";
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 import { Box as Box3, Text as Text4 } from "@radix-ui/themes";
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -1153,7 +1174,7 @@ var components = {
     img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = createContext7({
+var MarkdownContext = createContext8({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1161,7 +1182,7 @@ var MarkdownContext = createContext7({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return useContext5(MarkdownContext);
+    return useContext6(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
 var TextContent = function(param) {
@@ -1260,7 +1281,7 @@ var Content2 = function(param) {
 import { jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = useContext6(AssistantNameContext);
+    var assistantNameContext = useContext7(AssistantNameContext);
     return /* @__PURE__ */ jsxs7(MessageGroupBase, {
         children: [
             messageGroup.role === "user" ? /* @__PURE__ */ jsx32(Avatar3, {
@@ -1314,12 +1335,12 @@ var Content3 = function() {
 // src/components/threads/Thread/Messages/Progress/index.tsx
 import { useMemo as useMemo7 } from "react";
 // src/components/skeletons/StartingSkeleton/index.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 import { Box as Box11 } from "@radix-ui/themes";
 import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = useContext7(AssistantNameContext);
+    var assistantNameContext = useContext8(AssistantNameContext);
     return /* @__PURE__ */ jsxs8(MessageGroupBase, {
         children: [
             /* @__PURE__ */ jsx34(AssistantAvatar, {}),
@@ -1432,7 +1453,7 @@ var useInfiniteScroll = function(param) {
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
 import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
-var Root = function(param) {
+var Root2 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
     var _useInfiniteScroll = useInfiniteScroll({
@@ -1472,7 +1493,7 @@ var NextPageSkeleton = function() {
 import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsxs10(Root, {
+    return /* @__PURE__ */ jsxs10(Root2, {
         style: style,
         children: [
             /* @__PURE__ */ jsx38(Flex12, {
@@ -1490,7 +1511,7 @@ var Messages = function(param) {
         ]
     });
 };
-Messages.Root = Root;
+Messages.Root = Root2;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
@@ -1499,16 +1520,16 @@ import { Flex as Flex14, Text as Text5 } from "@radix-ui/themes";
 import { ArrowUpIcon, StopIcon } from "@radix-ui/react-icons";
 import { IconButton } from "@radix-ui/themes";
 // src/hooks/messages/useMessageFormContext/index.ts
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 // src/contexts/messages/MessageFormContext/index.ts
-import { createContext as createContext8 } from "react";
-var MessageFormContext = createContext8({
+import { createContext as createContext9 } from "react";
+var MessageFormContext = createContext9({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return useContext8(MessageFormContext);
+    return useContext9(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
@@ -2156,7 +2177,7 @@ var formOptions = {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 import { jsx as jsx40 } from "react/jsx-runtime";
-var Root2 = function(param) {
+var Root3 = function(param) {
     var children = param.children;
     var formProps = useForm(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
@@ -2246,7 +2267,7 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 import { usePrevious } from "react-use";
-import { useContext as useContext9, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useContext as useContext10, useMemo as useMemo9, useRef as useRef4, useEffect as useEffect3 } from "react";
 // src/components/textareas/TextareaBase/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
@@ -2284,7 +2305,7 @@ var TextareaBase = forwardRef3(function TextareaBase2(props, ref) {
 import { useFormContext } from "react-hook-form";
 import { Container as Container2, Flex as Flex13 } from "@radix-ui/themes";
 import { jsx as jsx42 } from "react/jsx-runtime";
-var Root3 = function(param) {
+var Root4 = function(param) {
     var children = param.children;
     var _useFormContext = useFormContext(), errors = _useFormContext.formState.errors;
     return /* @__PURE__ */ jsx42(Container2, {
@@ -2314,7 +2335,7 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = useContext9(AssistantNameContext);
+    var assistantNameContext = useContext10(AssistantNameContext);
     var register = useFormContext().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
     var isSubmitDisabled = useMemo9(function() {
@@ -2356,13 +2377,13 @@ var Control = function() {
     }));
 };
 var Field = {
-    Root: Root3,
+    Root: Root4,
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
 import { jsx as jsx43, jsxs as jsxs12 } from "react/jsx-runtime";
 var MessageForm = function() {
-    return /* @__PURE__ */ jsx43(Root2, {
+    return /* @__PURE__ */ jsx43(Root3, {
         children: /* @__PURE__ */ jsxs12(Field.Root, {
             children: [
                 /* @__PURE__ */ jsx43(Text5, {
@@ -2385,7 +2406,7 @@ var MessageForm = function() {
         })
     });
 };
-MessageForm.Root = Root2;
+MessageForm.Root = Root3;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
@@ -2394,7 +2415,7 @@ import { Flex as Flex15 } from "@radix-ui/themes";
 var Provider2 = SuperinterfaceProvider;
 // src/components/threads/Thread/Root/index.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
-var Root4 = function(_param) {
+var Root5 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
@@ -2409,33 +2430,33 @@ var Root4 = function(_param) {
 // src/components/threads/Thread/index.tsx
 import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
 var Thread = function(props) {
-    return /* @__PURE__ */ jsxs13(Root4, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs13(Root5, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ jsx45(Messages, {}),
             /* @__PURE__ */ jsx45(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root4;
+Thread.Root = Root5;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 var useMessageContext = function() {
-    return useContext10(MessageContext);
+    return useContext11(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 import { useState } from "react";
 // src/contexts/threads/ThreadDialogContext/index.ts
-import { createContext as createContext9 } from "react";
-var ThreadDialogContext = createContext9({
+import { createContext as createContext10 } from "react";
+var ThreadDialogContext = createContext10({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-import { useContext as useContext11 } from "react";
+import { useContext as useContext12 } from "react";
 var useThreadDialogContext = function() {
-    return useContext11(ThreadDialogContext);
+    return useContext12(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 import { jsx as jsx46 } from "react/jsx-runtime";
@@ -2535,7 +2556,7 @@ var ToastsProvider = function(param) {
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
 import { jsx as jsx49 } from "react/jsx-runtime";
-var Root6 = function(param) {
+var Root7 = function(param) {
     var children = param.children;
     return /* @__PURE__ */ jsx49(ToastsProvider, {
         children: /* @__PURE__ */ jsx49(Provider3, {
@@ -2620,7 +2641,7 @@ var Close = function() {
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
 import { jsx as jsx53, jsxs as jsxs16 } from "react/jsx-runtime";
-var Root7 = function(param) {
+var Root8 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
@@ -2680,7 +2701,7 @@ var Root7 = function(param) {
 };
 var Content4 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ jsx53(Root7, {
+    return /* @__PURE__ */ jsx53(Root8, {
         style: style,
         children: /* @__PURE__ */ jsxs16(Thread.Root, {
             children: [
@@ -2703,11 +2724,11 @@ var Content4 = function(param) {
         })
     });
 };
-Content4.Root = Root7;
+Content4.Root = Root8;
 // src/components/threads/ThreadDialog/index.tsx
 import { jsx as jsx54, jsxs as jsxs17 } from "react/jsx-runtime";
 var ThreadDialog = function() {
-    return /* @__PURE__ */ jsxs17(Root6, {
+    return /* @__PURE__ */ jsxs17(Root7, {
         children: [
             /* @__PURE__ */ jsx54(Content4, {}),
             /* @__PURE__ */ jsx54(Trigger, {
@@ -2716,7 +2737,7 @@ var ThreadDialog = function() {
         ]
     });
 };
-ThreadDialog.Root = Root6;
+ThreadDialog.Root = Root7;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
@@ -2724,8 +2745,8 @@ ThreadDialog.Content = Content4;
 import "regenerator-runtime/runtime";
 import { Flex as Flex20 } from "@radix-ui/themes";
 // src/contexts/threads/AudioThreadContext/index.ts
-import { createContext as createContext10 } from "react";
-var AudioThreadContext = createContext10({
+import { createContext as createContext11 } from "react";
+var AudioThreadContext = createContext11({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -3160,7 +3181,7 @@ var useMessageAudio = function(param) {
 };
 // src/components/threads/AudioThread/Root/index.tsx
 import { jsx as jsx55 } from "react/jsx-runtime";
-var Root8 = function(param) {
+var Root9 = function(param) {
     var children = param.children;
     var createMessageProps = useCreateMessage();
     var recorderProps = useRecorder({
@@ -3232,13 +3253,13 @@ var Root8 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-import { useContext as useContext13, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useContext as useContext14, useState as useState6, useCallback as useCallback5, useEffect as useEffect7 } from "react";
 import _9 from "lodash";
 import { Flex as Flex22 } from "@radix-ui/themes";
 // src/hooks/threads/useAudioThreadContext/index.ts
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 var useAudioThreadContext = function() {
-    return useContext12(AudioThreadContext);
+    return useContext13(AudioThreadContext);
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 import _8 from "lodash";
@@ -3308,7 +3329,7 @@ var BarsVisualizer = function(param) {
 import { jsx as jsx57, jsxs as jsxs18 } from "react/jsx-runtime";
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    var assistantNameContext = useContext13(AssistantNameContext);
+    var assistantNameContext = useContext14(AssistantNameContext);
     var _useState6 = _sliced_to_array(useState6(0), 2), scale = _useState6[0], setScale = _useState6[1];
     var draw = useCallback5(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
@@ -3583,7 +3604,7 @@ var Form = function() {
 // src/components/threads/AudioThread/index.tsx
 import { jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
 var AudioThread = function(props) {
-    return /* @__PURE__ */ jsxs22(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ jsxs22(Root9, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ jsx63(Visualization, {}),
             /* @__PURE__ */ jsx63(Status, {}),
@@ -3591,13 +3612,13 @@ var AudioThread = function(props) {
         ]
     }));
 };
-AudioThread.Root = Root8;
+AudioThread.Root = Root9;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
 import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ jsxs23(Root6, {
+    return /* @__PURE__ */ jsxs23(Root7, {
         children: [
             /* @__PURE__ */ jsx64(Content4.Root, {
                 children: /* @__PURE__ */ jsx64(AudioThread, {})
@@ -3608,7 +3629,7 @@ var AudioThreadDialog = function() {
         ]
     });
 };
-AudioThreadDialog.Root = Root6;
+AudioThreadDialog.Root = Root7;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
@@ -3732,5 +3753,30 @@ var MarkdownProvider = function(_param) {
         children: children
     });
 };
-export { AssistantAvatarContext, AssistantNameContext, AudioThread, AudioThreadDialog, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, useCreateMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext };
+// src/components/components/ComponentsProvider.tsx
+import { useMemo as useMemo16 } from "react";
+// src/hooks/components/useComponents.ts
+import { useContext as useContext15 } from "react";
+var useComponents = function() {
+    return useContext15(ComponentsContext);
+};
+// src/components/components/ComponentsProvider.tsx
+import { jsx as jsx69 } from "react/jsx-runtime";
+var ComponentsProvider = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
+    var prevComponents = useComponents();
+    var value = useMemo16(function() {
+        return merge(prevComponents, rest);
+    }, [
+        rest,
+        prevComponents
+    ]);
+    return /* @__PURE__ */ jsx69(ComponentsContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+export { AssistantAvatarContext, AssistantNameContext, AudioThread, AudioThreadDialog, ComponentsProvider, FunctionBase, FunctionComponentsContext, MarkdownContext, MarkdownProvider, RunStep, Suggestions, SuperinterfaceProvider, Thread, ThreadDialog, ThreadDialogContext, useComponents, useCreateMessage, useLatestMessage, useMarkdownContext, useMessageContext, useMessages, useSuperinterfaceContext, useSuperinterfaceContext as useThreadContext, useThreadDialogContext };
 //# sourceMappingURL=index.js.map