@superinterface/react 2.13.4 → 2.14.0

package/dist/index.cjs

@@ -338,6 +338,9 @@ __export(src_exports, {
     AudioThreadDialog: function() {
         return AudioThreadDialog;
     },
+    ComponentsProvider: function() {
+        return ComponentsProvider;
+    },
     FunctionBase: function() {
         return FunctionBase;
     },
@@ -350,6 +353,9 @@ __export(src_exports, {
     MarkdownProvider: function() {
         return MarkdownProvider;
     },
+    RunStep: function() {
+        return RunStep;
+    },
     Suggestions: function() {
         return Suggestions;
     },
@@ -365,6 +371,9 @@ __export(src_exports, {
     ThreadDialogContext: function() {
         return ThreadDialogContext;
     },
+    useComponents: function() {
+        return useComponents;
+    },
     useCreateMessage: function() {
         return useCreateMessage;
     },
@@ -488,7 +497,7 @@ var SuperinterfaceProvider = function(param) {
 // src/components/threads/Thread/Messages/index.tsx
 var import_themes30 = require("@radix-ui/themes");
 // src/components/threads/Thread/Messages/Content/index.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 // src/hooks/messages/useMessages/index.tsx
 var import_react4 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
@@ -799,7 +808,7 @@ var useToasts = function() {
     return (0, import_react9.useContext)(ToastsContext);
 };
 // src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_themes27 = require("@radix-ui/themes");
 var import_react_icons4 = require("@radix-ui/react-icons");
 // src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
@@ -835,7 +844,7 @@ var AssistantNameContext = (0, import_react12.createContext)("Assistant");
 // src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
 var import_themes26 = require("@radix-ui/themes");
 // src/components/threads/Thread/Message/index.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_themes25 = require("@radix-ui/themes");
 // src/components/skeletons/StartingContentSkeleton/index.tsx
 var import_themes6 = require("@radix-ui/themes");
@@ -854,6 +863,9 @@ var StartingContentSkeleton = function() {
 };
 // src/components/runSteps/RunSteps/index.tsx
 var import_themes15 = require("@radix-ui/themes");
+var import_react17 = require("react");
+// src/contexts/components/ComponentsContext/index.tsx
+var import_react16 = require("react");
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 var import_themes14 = require("@radix-ui/themes");
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
@@ -1080,10 +1092,16 @@ var Starting = function() {
 };
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var Root = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Flex, {
+        direction: "column",
+        children: children
+    });
+};
 var ToolCalls = function(param) {
     var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.Flex, {
-        direction: "column",
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Root, {
         children: [
             !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Starting, {}),
             stepDetails.tool_calls.map(function(toolCall) {
@@ -1095,6 +1113,9 @@ var ToolCalls = function(param) {
         ]
     });
 };
+ToolCalls.Root = Root;
+ToolCalls.Starting = Starting;
+ToolCalls.ToolCall = ToolCall;
 // src/components/runSteps/RunStep/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var RunStep = function(param) {
@@ -1107,21 +1128,30 @@ var RunStep = function(param) {
     }
     return null;
 };
+RunStep.ToolCalls = ToolCalls;
+// src/contexts/components/ComponentsContext/index.tsx
+var ComponentsContext = (0, import_react16.createContext)({
+    components: {
+        RunStep: RunStep
+    }
+});
 // src/components/runSteps/RunSteps/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var RunSteps = function(param) {
     var runSteps = param.runSteps;
+    var componentsContext = (0, import_react17.useContext)(ComponentsContext);
+    var Component = componentsContext.components.RunStep;
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes15.Flex, {
         direction: "column-reverse",
         children: runSteps.map(function(runStep) {
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RunStep, {
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Component, {
                 runStep: runStep
             }, runStep.id);
         })
     });
 };
 // src/hooks/messages/useIsMutatingMessage/index.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_react_query3 = require("@tanstack/react-query");
 var useIsMutatingMessage = function() {
     var threadContext = useSuperinterfaceContext();
@@ -1131,7 +1161,7 @@ var useIsMutatingMessage = function() {
             threadContext.variables
         ]
     });
-    var isMutatingMessage = (0, import_react16.useMemo)(function() {
+    var isMutatingMessage = (0, import_react18.useMemo)(function() {
         return mutatingMessagesCount > 0;
     }, [
         mutatingMessagesCount
@@ -1139,8 +1169,8 @@ var useIsMutatingMessage = function() {
     return isMutatingMessage;
 };
 // src/contexts/messages/MessageContext/index.ts
-var import_react17 = require("react");
-var MessageContext = (0, import_react17.createContext)({
+var import_react19 = require("react");
+var MessageContext = (0, import_react19.createContext)({
     message: null
 });
 // src/components/threads/Thread/Message/Provider.tsx
@@ -1148,9 +1178,9 @@ var Provider = MessageContext.Provider;
 // src/components/threads/Thread/Message/TextContent.tsx
 var import_react_remark = require("react-remark");
 // src/hooks/markdown/useMarkdownContext/index.ts
-var import_react19 = require("react");
+var import_react21 = require("react");
 // src/contexts/markdown/MarkdownContext/index.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 // src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
 var import_themes16 = require("@radix-ui/themes");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -1280,7 +1310,7 @@ var components = {
     img: Img
 };
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react18.createContext)({
+var MarkdownContext = (0, import_react20.createContext)({
     remarkPlugins: [],
     rehypeReactOptions: {
         components: components
@@ -1288,7 +1318,7 @@ var MarkdownContext = (0, import_react18.createContext)({
 });
 // src/hooks/markdown/useMarkdownContext/index.ts
 var useMarkdownContext = function() {
-    return (0, import_react19.useContext)(MarkdownContext);
+    return (0, import_react21.useContext)(MarkdownContext);
 };
 // src/components/threads/Thread/Message/TextContent.tsx
 var TextContent = function(param) {
@@ -1300,7 +1330,7 @@ var TextContent = function(param) {
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Message = function(param) {
     var message = param.message;
-    var _ref = _sliced_to_array((0, import_react20.useMemo)(function() {
+    var _ref = _sliced_to_array((0, import_react22.useMemo)(function() {
         if (!message.runSteps.length) return [
             [],
             []
@@ -1333,7 +1363,7 @@ var Message = function(param) {
         message
     ]), 2), olderRunSteps = _ref[0], laterRunSteps = _ref[1];
     var isMutatingMessage = useIsMutatingMessage();
-    var isInProgress = (0, import_react20.useMemo)(function() {
+    var isInProgress = (0, import_react22.useMemo)(function() {
         if (!isMutatingMessage) return false;
         if (message.status === "in_progress") return true;
         return message.runSteps.some(function(rs) {
@@ -1354,7 +1384,7 @@ var Message = function(param) {
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_themes25.Box, {
                     children: [
                         message.content.map(function(content, index) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react20.Fragment, {
+                            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react22.Fragment, {
                                 children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextContent, {
                                     content: content
                                 })
@@ -1387,7 +1417,7 @@ var Content2 = function(param) {
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var MessageGroup = function(param) {
     var messageGroup = param.messageGroup;
-    var assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react23.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MessageGroupBase, {
         children: [
             messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_themes27.Avatar, {
@@ -1416,7 +1446,7 @@ var Content3 = function() {
     var _useMessageGroups = useMessageGroups({
         messages: messages2
     }), messageGroups2 = _useMessageGroups.messageGroups;
-    (0, import_react22.useEffect)(function() {
+    (0, import_react24.useEffect)(function() {
         if (isLoadingError) {
             addToast({
                 type: "error",
@@ -1439,14 +1469,14 @@ var Content3 = function() {
     });
 };
 // src/components/threads/Thread/Messages/Progress/index.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 // src/components/skeletons/StartingSkeleton/index.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_themes28 = require("@radix-ui/themes");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var StartingSkeleton = function(param) {
     var children = param.children;
-    var assistantNameContext = (0, import_react23.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react25.useContext)(AssistantNameContext);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MessageGroupBase, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssistantAvatar, {}),
@@ -1463,10 +1493,10 @@ var StartingSkeleton = function(param) {
     });
 };
 // src/hooks/messages/useLatestMessage/index.ts
-var import_react24 = require("react");
+var import_react26 = require("react");
 var useLatestMessage = function() {
     var props = useMessages();
-    return (0, import_react24.useMemo)(function() {
+    return (0, import_react26.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             latestMessage: props.messages[0] || null
         });
@@ -1485,7 +1515,7 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var Progress = function() {
     var latestMessage = useLatestMessage().latestMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isVisible = (0, import_react25.useMemo)(function() {
+    var isVisible = (0, import_react27.useMemo)(function() {
         if (!latestMessage) return false;
         if (latestMessage.role !== "user") return false;
         if (latestMessage.status === "in_progress") return false;
@@ -1504,15 +1534,15 @@ var Progress = function() {
 // src/components/threads/Thread/Messages/Root/index.tsx
 var import_themes29 = require("@radix-ui/themes");
 // src/hooks/misc/useInfiniteScroll/index.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 // src/hooks/misc/useThrottledEffect/index.tsx
 var import_lodash5 = __toESM(require("lodash"), 1);
-var import_react26 = require("react");
+var import_react28 = require("react");
 var useThrottledEffect = function(cb, delay, additionalDeps) {
     var _cbRef;
-    var cbRef = (0, import_react26.useRef)(cb);
-    var throttledCb = (0, import_react26.useCallback)(import_lodash5.default.throttle(function() {
+    var cbRef = (0, import_react28.useRef)(cb);
+    var throttledCb = (0, import_react28.useCallback)(import_lodash5.default.throttle(function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -1523,17 +1553,17 @@ var useThrottledEffect = function(cb, delay, additionalDeps) {
     }), [
         delay
     ]);
-    (0, import_react26.useEffect)(function() {
+    (0, import_react28.useEffect)(function() {
         cbRef.current = cb;
     });
-    (0, import_react26.useEffect)(throttledCb, [
+    (0, import_react28.useEffect)(throttledCb, [
         throttledCb
     ].concat(_to_consumable_array(additionalDeps)));
 };
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var useInfiniteScroll = function(param) {
     var isFetchingNextPage = param.isFetchingNextPage, hasNextPage = param.hasNextPage, fetchNextPage = param.fetchNextPage;
-    var containerRef = (0, import_react27.useRef)(null);
+    var containerRef = (0, import_react29.useRef)(null);
     var _ref = (0, import_react_intersection_observer.useInView)({
         root: containerRef.current,
         rootMargin: "0px",
@@ -1559,7 +1589,7 @@ var useInfiniteScroll = function(param) {
 };
 // src/components/threads/Thread/Messages/Root/index.tsx
 var import_jsx_runtime36 = require("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({
@@ -1599,7 +1629,7 @@ var NextPageSkeleton = function() {
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var Messages = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Root2, {
         style: style,
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Flex, {
@@ -1617,7 +1647,7 @@ var Messages = function(param) {
         ]
     });
 };
-Messages.Root = Root;
+Messages.Root = Root2;
 Messages.Message = Message;
 Messages.NextPageSkeleton = NextPageSkeleton;
 // src/components/threads/Thread/MessageForm/index.tsx
@@ -1626,16 +1656,16 @@ var import_themes34 = require("@radix-ui/themes");
 var import_react_icons5 = require("@radix-ui/react-icons");
 var import_themes31 = require("@radix-ui/themes");
 // src/hooks/messages/useMessageFormContext/index.ts
-var import_react29 = require("react");
+var import_react31 = require("react");
 // src/contexts/messages/MessageFormContext/index.ts
-var import_react28 = require("react");
-var MessageFormContext = (0, import_react28.createContext)({
+var import_react30 = require("react");
+var MessageFormContext = (0, import_react30.createContext)({
     isDisabled: false,
     isLoading: false
 });
 // src/hooks/messages/useMessageFormContext/index.ts
 var useMessageFormContext = function() {
-    return (0, import_react29.useContext)(MessageFormContext);
+    return (0, import_react31.useContext)(MessageFormContext);
 };
 // src/components/threads/Thread/MessageForm/Submit/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -1660,7 +1690,7 @@ var Submit = function() {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_react_query5 = require("@tanstack/react-query");
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_themes32 = require("@radix-ui/themes");
 // src/hooks/messages/useCreateMessage/index.ts
@@ -2283,7 +2313,7 @@ var formOptions = {
 };
 // src/components/threads/Thread/MessageForm/Root/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var Root2 = function(param) {
+var Root3 = function(param) {
     var children = param.children;
     var formProps = (0, import_react_hook_form.useForm)(formOptions);
     var handleSubmit = formProps.handleSubmit, isSubmitting = formProps.formState.isSubmitting, reset = formProps.reset;
@@ -2314,7 +2344,7 @@ var Root2 = function(param) {
         }
     }).createMessage;
     var isMutatingMessage = useIsMutatingMessage();
-    var isLoading = (0, import_react30.useMemo)(function() {
+    var isLoading = (0, import_react32.useMemo)(function() {
         return isMutatingMessage || isSubmitting;
     }, [
         isMutatingMessage,
@@ -2346,7 +2376,7 @@ var Root2 = function(param) {
         };
     }();
     var latestMessage = useLatestMessage().latestMessage;
-    var isDisabled = (0, import_react30.useMemo)(function() {
+    var isDisabled = (0, import_react32.useMemo)(function() {
         var // @ts-ignore-next-line
         _latestMessage_metadata;
         return latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking;
@@ -2373,13 +2403,13 @@ var Root2 = function(param) {
 };
 // src/components/threads/Thread/MessageForm/Field/index.tsx
 var import_react_use = require("react-use");
-var import_react32 = require("react");
+var import_react34 = require("react");
 // src/components/textareas/TextareaBase/index.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var UPSCALE_RATIO = 16 / 14;
-var TextareaBase = (0, import_react31.forwardRef)(function TextareaBase2(props, ref) {
+var TextareaBase = (0, import_react33.forwardRef)(function TextareaBase2(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("style", {
@@ -2411,7 +2441,7 @@ var TextareaBase = (0, import_react31.forwardRef)(function TextareaBase2(props,
 var import_react_hook_form2 = require("react-hook-form");
 var import_themes33 = require("@radix-ui/themes");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var Root3 = function(param) {
+var Root4 = function(param) {
     var children = param.children;
     var _ref = (0, import_react_hook_form2.useFormContext)(), errors = _ref.formState.errors;
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Container, {
@@ -2441,19 +2471,19 @@ var Root3 = function(param) {
     });
 };
 var Control = function() {
-    var assistantNameContext = (0, import_react32.useContext)(AssistantNameContext);
+    var assistantNameContext = (0, import_react34.useContext)(AssistantNameContext);
     var register = (0, import_react_hook_form2.useFormContext)().register;
     var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
-    var isSubmitDisabled = (0, import_react32.useMemo)(function() {
+    var isSubmitDisabled = (0, import_react34.useMemo)(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
         isLoading
     ]);
     var isDisabledPrevious = (0, import_react_use.usePrevious)(isDisabled);
-    var textareaRef = (0, import_react32.useRef)(null);
+    var textareaRef = (0, import_react34.useRef)(null);
     var textareaProps = register("content");
-    (0, import_react32.useEffect)(function() {
+    (0, import_react34.useEffect)(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -2483,13 +2513,13 @@ var Control = function() {
     }));
 };
 var Field = {
-    Root: Root3,
+    Root: Root4,
     Control: Control
 };
 // src/components/threads/Thread/MessageForm/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var MessageForm = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root2, {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root3, {
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Field.Root, {
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.Text, {
@@ -2512,7 +2542,7 @@ var MessageForm = function() {
         })
     });
 };
-MessageForm.Root = Root2;
+MessageForm.Root = Root3;
 MessageForm.Field = Field;
 MessageForm.Submit = Submit;
 // src/components/threads/Thread/Root/index.tsx
@@ -2521,7 +2551,7 @@ var import_themes35 = require("@radix-ui/themes");
 var Provider2 = SuperinterfaceProvider;
 // src/components/threads/Thread/Root/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var Root4 = function(_param) {
+var Root5 = function(_param) {
     var children = _param.children, rest = _object_without_properties(_param, [
         "children"
     ]);
@@ -2536,40 +2566,40 @@ var Root4 = function(_param) {
 // src/components/threads/Thread/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Thread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Root4, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Root5, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Messages, {}),
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MessageForm, {})
         ]
     }));
 };
-Thread.Root = Root4;
+Thread.Root = Root5;
 Thread.Messages = Messages;
 Thread.MessageForm = MessageForm;
 // src/hooks/messages/useMessageContext/index.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 var useMessageContext = function() {
-    return (0, import_react33.useContext)(MessageContext);
+    return (0, import_react35.useContext)(MessageContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react34 = require("react");
-var ThreadDialogContext = (0, import_react34.createContext)({
+var import_react36 = require("react");
+var ThreadDialogContext = (0, import_react36.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react35 = require("react");
+var import_react37 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react35.useContext)(ThreadDialogContext);
+    return (0, import_react37.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var Provider3 = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react36.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    var _ref = _sliced_to_array((0, import_react38.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
@@ -2579,7 +2609,7 @@ var Provider3 = function(param) {
     });
 };
 // src/components/toasts/ToastsProvider/index.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var Toast2 = __toESM(require("@radix-ui/react-toast"), 1);
 // src/components/toasts/ToastsProvider/CustomToast.tsx
 var Toast = __toESM(require("@radix-ui/react-toast"), 1);
@@ -2618,8 +2648,8 @@ var CustomToast = function(param) {
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var ToastsProvider = function(param) {
     var children = param.children;
-    var _ref = _sliced_to_array((0, import_react37.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
-    var addToast = (0, import_react37.useCallback)(function(toast) {
+    var _ref = _sliced_to_array((0, import_react39.useState)([]), 2), toasts = _ref[0], setToasts = _ref[1];
+    var addToast = (0, import_react39.useCallback)(function(toast) {
         return setToasts(function(prevToasts) {
             return _to_consumable_array(prevToasts).concat([
                 toast
@@ -2662,7 +2692,7 @@ var ToastsProvider = function(param) {
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var Root6 = function(param) {
+var Root7 = function(param) {
     var children = param.children;
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastsProvider, {
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Provider3, {
@@ -2747,7 +2777,7 @@ var Close = function() {
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
 var import_jsx_runtime53 = require("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;
@@ -2807,7 +2837,7 @@ var Root7 = function(param) {
 };
 var Content4 = function(param) {
     var _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Root7, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Root8, {
         style: style,
         children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Thread.Root, {
             children: [
@@ -2830,11 +2860,11 @@ var Content4 = function(param) {
         })
     });
 };
-Content4.Root = Root7;
+Content4.Root = Root8;
 // src/components/threads/ThreadDialog/index.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var ThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Root6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Root7, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Content4, {}),
             /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Trigger, {
@@ -2843,7 +2873,7 @@ var ThreadDialog = function() {
         ]
     });
 };
-ThreadDialog.Root = Root6;
+ThreadDialog.Root = Root7;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button2;
 ThreadDialog.Content = Content4;
@@ -2851,8 +2881,8 @@ ThreadDialog.Content = Content4;
 var import_runtime = require("regenerator-runtime/runtime");
 var import_themes41 = require("@radix-ui/themes");
 // src/contexts/threads/AudioThreadContext/index.ts
-var import_react38 = require("react");
-var AudioThreadContext = (0, import_react38.createContext)({
+var import_react40 = require("react");
+var AudioThreadContext = (0, import_react40.createContext)({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2920,11 +2950,11 @@ var blobToData = function(blob) {
     });
 };
 // src/hooks/audioThreads/useStatus/index.ts
-var import_react39 = require("react");
+var import_react41 = require("react");
 var useStatus = function(param) {
     var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var latestMessageProps = useLatestMessage();
-    var status = (0, import_react39.useMemo)(function() {
+    var status = (0, import_react41.useMemo)(function() {
         var _latestMessageProps_latestMessage;
         if (recorderProps.status === "recording") return "recording";
         if (createMessageProps.isPending) return "creatingMessage";
@@ -2948,19 +2978,19 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var import_dayjs2 = __toESM(require("dayjs"), 1);
 var import_use_audio_capture = require("use-audio-capture");
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_react_use_audio_player = require("react-use-audio-player");
 var import_react_use2 = require("react-use");
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _ref = _sliced_to_array((0, import_react40.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react40.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react40.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react40.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
+    var _ref = _sliced_to_array((0, import_react42.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react42.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react42.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react42.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
     var startAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
     var endAudioPlayer = (0, import_react_use_audio_player.useAudioPlayer)();
-    var _ref4 = _sliced_to_array((0, import_react40.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
-    (0, import_react40.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react42.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
+    (0, import_react42.useEffect)(function() {
         if (isLoaded) return;
         setIsLoaded(true);
     }, [
@@ -3018,9 +3048,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _ref5 = _sliced_to_array((0, import_react40.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
-    var isInited = (0, import_react40.useRef)(false);
-    (0, import_react40.useEffect)(function() {
+    var _ref5 = _sliced_to_array((0, import_react42.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
+    var isInited = (0, import_react42.useRef)(false);
+    (0, import_react42.useEffect)(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -3033,7 +3063,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = (0, import_react40.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react42.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -3041,7 +3071,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = (0, import_react40.useMemo)(function() {
+    var silenceAnalyser = (0, import_react42.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -60;
@@ -3050,7 +3080,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = (0, import_react40.useCallback)(function() {
+    var handleSilence = (0, import_react42.useCallback)(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -3073,7 +3103,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    (0, import_react40.useEffect)(function() {
+    (0, import_react42.useEffect)(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -3096,7 +3126,7 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_compromise = __toESM(require("compromise"), 1);
 var import_howler = require("howler");
 var import_react_use_audio_player2 = require("react-use-audio-player");
@@ -3134,15 +3164,15 @@ var getMessageSentences = function(param) {
 };
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react41.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react41.useState)([]), 2), stoppedMessageIds = _ref1[0], setStoppedMessageIds = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react41.useState)([]), 2), playedMessageSentences = _ref2[0], setPlayedMessageSentences = _ref2[1];
+    var _ref = _sliced_to_array((0, import_react43.useState)(false), 2), isAudioPlayed = _ref[0], setIsAudioPlayed = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react43.useState)([]), 2), stoppedMessageIds = _ref1[0], setStoppedMessageIds = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react43.useState)([]), 2), playedMessageSentences = _ref2[0], setPlayedMessageSentences = _ref2[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var nextAudioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
-    var _ref3 = _sliced_to_array((0, import_react41.useState)(false), 2), isPlaying = _ref3[0], setIsPlaying = _ref3[1];
+    var _ref3 = _sliced_to_array((0, import_react43.useState)(false), 2), isPlaying = _ref3[0], setIsPlaying = _ref3[1];
     var latestMessageProps = useLatestMessage();
-    var unplayedMessageSentences = (0, import_react41.useMemo)(function() {
+    var unplayedMessageSentences = (0, import_react43.useMemo)(function() {
         if (!latestMessageProps.latestMessage) return [];
         if (latestMessageProps.latestMessage.role !== "assistant") return [];
         if (stoppedMessageIds.includes(latestMessageProps.latestMessage.id)) return [];
@@ -3163,7 +3193,7 @@ var useMessageAudio = function(param) {
         latestMessageProps,
         playedMessageSentences
     ]);
-    (0, import_react41.useEffect)(function() {
+    (0, import_react43.useEffect)(function() {
         if (isPlaying) return;
         if (audioPlayer.playing) return;
         if (!latestMessageProps.latestMessage) return;
@@ -3231,7 +3261,7 @@ var useMessageAudio = function(param) {
         playedMessageSentences,
         onEnd
     ]);
-    (0, import_react41.useEffect)(function() {
+    (0, import_react43.useEffect)(function() {
         if (isHtmlAudioSupported) {
             var _import_howler_Howler__howls___sounds_, _import_howler_Howler__howls_, _import_howler_Howler;
             if (!((_import_howler_Howler = import_howler.Howler) === null || _import_howler_Howler === void 0 ? void 0 : (_import_howler_Howler__howls_ = _import_howler_Howler._howls[0]) === null || _import_howler_Howler__howls_ === void 0 ? void 0 : (_import_howler_Howler__howls___sounds_ = _import_howler_Howler__howls_._sounds[0]) === null || _import_howler_Howler__howls___sounds_ === void 0 ? void 0 : _import_howler_Howler__howls___sounds_._node)) return;
@@ -3240,9 +3270,9 @@ var useMessageAudio = function(param) {
     }, [
         audioPlayer
     ]);
-    var _ref4 = _sliced_to_array((0, import_react41.useState)(null), 2), audioEngine = _ref4[0], setAudioEngine = _ref4[1];
-    var isAudioEngineInited = (0, import_react41.useRef)(false);
-    (0, import_react41.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react43.useState)(null), 2), audioEngine = _ref4[0], setAudioEngine = _ref4[1];
+    var isAudioEngineInited = (0, import_react43.useRef)(false);
+    (0, import_react43.useEffect)(function() {
         if (!audioPlayer.playing) return;
         if (isAudioEngineInited.current) return;
         isAudioEngineInited.current = true;
@@ -3263,7 +3293,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isAudioEngineInited
     ]);
-    var visualizationAnalyser = (0, import_react41.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react43.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -3272,7 +3302,7 @@ var useMessageAudio = function(param) {
     }, [
         audioEngine
     ]);
-    var isPending = (0, import_react41.useMemo)(function() {
+    var isPending = (0, import_react43.useMemo)(function() {
         return isPlaying || unplayedMessageSentences.length > 0;
     }, [
         isPlaying,
@@ -3287,7 +3317,7 @@ var useMessageAudio = function(param) {
 };
 // src/components/threads/AudioThread/Root/index.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var Root8 = function(param) {
+var Root9 = function(param) {
     var children = param.children;
     var createMessageProps = useCreateMessage();
     var recorderProps = useRecorder({
@@ -3359,25 +3389,25 @@ var Root8 = function(param) {
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_lodash9 = __toESM(require("lodash"), 1);
 var import_themes43 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
-var import_react42 = require("react");
+var import_react44 = require("react");
 var useAudioThreadContext = function() {
-    return (0, import_react42.useContext)(AudioThreadContext);
+    return (0, import_react44.useContext)(AudioThreadContext);
 };
 // src/components/threads/AudioThread/BarsVisualizer/index.tsx
 var import_lodash8 = __toESM(require("lodash"), 1);
 var import_themes42 = require("@radix-ui/themes");
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_radash12 = require("radash");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var barCount = 4;
 var BarsVisualizer = function(param) {
     var visualizationAnalyser = param.visualizationAnalyser, backgroundColor = param.backgroundColor, height = param.height, barWidth = param.barWidth;
-    var _ref = _sliced_to_array((0, import_react43.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
-    var draw = (0, import_react43.useCallback)(function(param) {
+    var _ref = _sliced_to_array((0, import_react45.useState)([]), 2), barHeights = _ref[0], setBarHeights = _ref[1];
+    var draw = (0, import_react45.useCallback)(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         if (!visualizationAnalyser2) {
             setBarHeights(Array(barCount).fill(0));
@@ -3395,7 +3425,7 @@ var BarsVisualizer = function(param) {
             });
         });
     }, []);
-    (0, import_react43.useEffect)(function() {
+    (0, import_react45.useEffect)(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser
         });
@@ -3435,9 +3465,9 @@ var BarsVisualizer = function(param) {
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    var assistantNameContext = (0, import_react44.useContext)(AssistantNameContext);
-    var _ref = _sliced_to_array((0, import_react44.useState)(0), 2), scale = _ref[0], setScale = _ref[1];
-    var draw = (0, import_react44.useCallback)(function(param) {
+    var assistantNameContext = (0, import_react46.useContext)(AssistantNameContext);
+    var _ref = _sliced_to_array((0, import_react46.useState)(0), 2), scale = _ref[0], setScale = _ref[1];
+    var draw = (0, import_react46.useCallback)(function(param) {
         var visualizationAnalyser = param.visualizationAnalyser;
         if (!visualizationAnalyser) {
             setScale(1);
@@ -3452,7 +3482,7 @@ var Visualization = function() {
             });
         });
     }, []);
-    (0, import_react44.useEffect)(function() {
+    (0, import_react46.useEffect)(function() {
         draw({
             visualizationAnalyser: audioThreadContext.recorderProps.visualizationAnalyser
         });
@@ -3710,7 +3740,7 @@ var Form = function() {
 // src/components/threads/AudioThread/index.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root8, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Root9, _object_spread_props(_object_spread({}, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Visualization, {}),
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Status, {}),
@@ -3718,13 +3748,13 @@ var AudioThread = function(props) {
         ]
     }));
 };
-AudioThread.Root = Root8;
+AudioThread.Root = Root9;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Root6, {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Root7, {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Content4.Root, {
                 children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(AudioThread, {})
@@ -3735,14 +3765,14 @@ var AudioThreadDialog = function() {
         ]
     });
 };
-AudioThreadDialog.Root = Root6;
+AudioThreadDialog.Root = Root7;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button2;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 // src/components/suggestions/Suggestions/Content.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_radash13 = require("radash");
 var import_react_children_utilities = require("react-children-utilities");
 var import_themes48 = require("@radix-ui/themes");
@@ -3799,7 +3829,7 @@ var import_jsx_runtime66 = require("react/jsx-runtime");
 var Content6 = function(param) {
     var children = param.children;
     var isMutatingMessage = useIsMutatingMessage();
-    var suggestions = (0, import_react45.useMemo)(function() {
+    var suggestions = (0, import_react47.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) {
@@ -3826,7 +3856,7 @@ var import_jsx_runtime67 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var children = param.children;
     var latestMessageProps = useLatestMessage();
-    var isDisabled = (0, import_react46.useMemo)(function() {
+    var isDisabled = (0, import_react48.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;
@@ -3841,14 +3871,14 @@ var Suggestions = function(param) {
 };
 Suggestions.Item = Item;
 // src/components/markdown/MarkdownProvider/index.tsx
-var import_react47 = require("react");
+var import_react49 = 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_react47.useMemo)(function() {
+    var value = (0, import_react49.useMemo)(function() {
         return merge(prevMarkdownContext, rest);
     }, [
         rest,
@@ -3859,21 +3889,49 @@ var MarkdownProvider = function(_param) {
         children: children
     });
 };
+// src/components/components/ComponentsProvider.tsx
+var import_react51 = require("react");
+// src/hooks/components/useComponents.ts
+var import_react50 = require("react");
+var useComponents = function() {
+    return (0, import_react50.useContext)(ComponentsContext);
+};
+// src/components/components/ComponentsProvider.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var ComponentsProvider = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
+    var prevComponents = useComponents();
+    var value = (0, import_react51.useMemo)(function() {
+        return merge(prevComponents, rest);
+    }, [
+        rest,
+        prevComponents
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ComponentsContext.Provider, {
+        value: value,
+        children: children
+    });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
     AssistantAvatarContext: AssistantAvatarContext,
     AssistantNameContext: AssistantNameContext,
     AudioThread: AudioThread,
     AudioThreadDialog: AudioThreadDialog,
+    ComponentsProvider: ComponentsProvider,
     FunctionBase: FunctionBase,
     FunctionComponentsContext: FunctionComponentsContext,
     MarkdownContext: MarkdownContext,
     MarkdownProvider: MarkdownProvider,
+    RunStep: RunStep,
     Suggestions: Suggestions,
     SuperinterfaceProvider: SuperinterfaceProvider,
     Thread: Thread,
     ThreadDialog: ThreadDialog,
     ThreadDialogContext: ThreadDialogContext,
+    useComponents: useComponents,
     useCreateMessage: useCreateMessage,
     useLatestMessage: useLatestMessage,
     useMarkdownContext: useMarkdownContext,