@superinterface/react 2.0.1 → 2.0.3

package/dist/index.cjs

@@ -362,33 +362,33 @@ __export(src_exports, {
     ThreadDialog: function() {
         return ThreadDialog;
     },
-    ThreadMessageForm: function() {
-        return ThreadMessageForm;
+    ThreadDialogContext: function() {
+        return ThreadDialogContext;
     },
-    ThreadMessages: function() {
-        return ThreadMessages;
-    },
-    ThreadProvider: function() {
-        return SuperinterfaceProvider;
+    useCreateMessage: function() {
+        return useCreateMessage;
     },
     useCreateRun: function() {
         return useCreateRun;
     },
-    useCreateThreadMessage: function() {
-        return useCreateThreadMessage;
-    },
     useIsRunActive: function() {
         return useIsRunActive;
     },
+    useLatestMessage: function() {
+        return useLatestMessage;
+    },
     useLatestRun: function() {
         return useLatestRun;
     },
-    useLatestThreadMessage: function() {
-        return useLatestThreadMessage;
+    useLifecycle: function() {
+        return useLifecycle;
     },
     useMarkdownContext: function() {
         return useMarkdownContext;
     },
+    useMessages: function() {
+        return useMessages;
+    },
     useRuns: function() {
         return useRuns;
     },
@@ -397,12 +397,6 @@ __export(src_exports, {
     },
     useThreadContext: function() {
         return useSuperinterfaceContext;
-    },
-    useThreadLifecycles: function() {
-        return useThreadLifecycles;
-    },
-    useThreadMessages: function() {
-        return useThreadMessages;
     }
 });
 module.exports = __toCommonJS(src_exports);
@@ -459,170 +453,10 @@ var SuperinterfaceProvider = function(param) {
         children: children
     });
 };
-// src/components/threads/Thread/index.tsx
-var import_themes31 = require("@radix-ui/themes");
-// src/components/threadMessages/ThreadMessages/index.tsx
-var import_themes28 = require("@radix-ui/themes");
-// src/hooks/misc/useInfiniteScroll/index.tsx
-var import_react4 = require("react");
-var import_react_intersection_observer = require("react-intersection-observer");
-// src/hooks/misc/useThrottledEffect/index.tsx
-var import_lodash3 = __toESM(require("lodash"), 1);
+// src/components/threads/Thread/Messages/index.tsx
+var import_themes29 = require("@radix-ui/themes");
+// src/hooks/messages/useMessages/index.tsx
 var import_react3 = require("react");
-var useThrottledEffect = function(cb, delay, additionalDeps) {
-    var _cbRef;
-    var cbRef = (0, import_react3.useRef)(cb);
-    var throttledCb = (0, import_react3.useCallback)(import_lodash3.default.throttle(function() {
-        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-            args[_key] = arguments[_key];
-        }
-        return (_cbRef = cbRef).current.apply(_cbRef, _to_consumable_array(args));
-    }, delay, {
-        leading: true,
-        trailing: true
-    }), [
-        delay
-    ]);
-    (0, import_react3.useEffect)(function() {
-        cbRef.current = cb;
-    });
-    (0, import_react3.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_react4.useRef)(null);
-    var _ref = (0, import_react_intersection_observer.useInView)({
-        root: containerRef.current,
-        rootMargin: "0px",
-        threshold: 0.1
-    }), loaderRef = _ref.ref, inView = _ref.inView;
-    useThrottledEffect(function() {
-        if (isFetchingNextPage) return;
-        if (!inView) return;
-        if (!hasNextPage) return;
-        console.log("Fetching next page");
-        fetchNextPage();
-    }, 500, [
-        inView,
-        isFetchingNextPage,
-        hasNextPage,
-        fetchNextPage
-    ]);
-    return {
-        containerRef: containerRef,
-        loaderRef: loaderRef,
-        inView: inView
-    };
-};
-// src/components/skeletons/ThreadMessagesSkeleton/index.tsx
-var import_react6 = require("react");
-var import_themes4 = require("@radix-ui/themes");
-// src/components/skeletons/Skeleton/index.tsx
-var import_themes = require("@radix-ui/themes");
-var import_jsx_runtime2 = // @ts-ignore-next-line
-require("react/jsx-runtime");
-var Skeleton = function(_param) {
-    var height = _param.height, style = _param.style, rest = _object_without_properties(_param, [
-        "height",
-        "style"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Flex, _object_spread({
-        style: _object_spread({
-            animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite",
-            borderRadius: "var(--radius-3)",
-            backgroundColor: "var(--gray-5)",
-            height: "var(--space-".concat(height, ")")
-        }, style)
-    }, rest));
-};
-// src/components/threadMessageGroups/ThreadMessagesGroupBase/index.tsx
-var import_react5 = require("react");
-var import_themes2 = require("@radix-ui/themes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ThreadMessagesGroupBase = (0, import_react5.forwardRef)(function ThreadMessagesGroupBase2(param, ref) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Container, {
-        ref: ref,
-        size: "2",
-        grow: "0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Flex, {
-            shrink: "0",
-            gap: "3",
-            children: children
-        })
-    });
-});
-// src/components/threadMessageGroups/ThreadMessagesGroupBase/Name.tsx
-var import_themes3 = require("@radix-ui/themes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Name = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Flex, {
-        align: "center",
-        style: {
-            height: "var(--space-5)"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Text, {
-            size: "2",
-            weight: "bold",
-            children: children
-        })
-    });
-};
-// src/components/skeletons/ThreadMessagesSkeleton/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ThreadMessagesSkeleton = (0, import_react6.forwardRef)(function ThreadMessagesSkeleton2(_props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ThreadMessagesGroupBase, {
-        ref: ref,
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Flex, {}),
-                size: "1",
-                style: {
-                    animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite"
-                }
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_themes4.Box, {
-                pb: "3",
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Name, {
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
-                            height: "1",
-                            style: {
-                                width: "128px"
-                            }
-                        })
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
-                        height: "2",
-                        style: {
-                            width: "256px"
-                        }
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
-                        height: "2",
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
-                        height: "2",
-                        style: {
-                            width: "256px",
-                            marginTop: "var(--space-2)"
-                        }
-                    })
-                ]
-            })
-        ]
-    });
-});
-// src/hooks/threadMessages/useThreadMessages/index.tsx
-var import_react7 = require("react");
 var import_react_query2 = require("@tanstack/react-query");
 // src/lib/threads/queryOptions/index.ts
 var import_react_query = require("@tanstack/react-query");
@@ -644,9 +478,13 @@ var queryOptions = function(param) {
                     } : {}, variables));
                     return [
                         2,
-                        fetch("".concat(superinterfaceContext.baseUrl).concat(path, "?").concat(params), {
+                        fetch("".concat(superinterfaceContext.baseUrl).concat(path, "?").concat(params), _object_spread({
                             credentials: "include"
-                        }).then(function() {
+                        }, superinterfaceContext.publicApiKey ? {
+                            headers: {
+                                Authorization: "Bearer ".concat(superinterfaceContext.publicApiKey)
+                            }
+                        } : {})).then(function() {
                             var _ref = _async_to_generator(function(response) {
                                 var errorResponse, error;
                                 return _ts_generator(this, function(_state) {
@@ -703,31 +541,31 @@ var queryOptions = function(param) {
         queryKey: queryKey
     }), threadContext.defaultOptions.queries));
 };
-// src/hooks/threadMessages/useThreadMessages/index.tsx
-var threadMessages = function(param) {
+// src/hooks/messages/useMessages/index.tsx
+var messages = function(param) {
     var props = param.props;
     if (!props.data) return [];
     return props.data.pages.reduce(function(acc, page) {
         return acc.concat(page.data);
     }, []);
 };
-var useThreadMessages = function() {
+var useMessages = function() {
     var queryClient = (0, import_react_query2.useQueryClient)();
     var threadContext = useSuperinterfaceContext();
     var superinterfaceContext = useSuperinterfaceContext();
     var props = (0, import_react_query2.useInfiniteQuery)(queryOptions({
         queryKeyBase: [
-            "threadMessages"
+            "messages"
         ],
-        path: "/thread-messages",
+        path: "/messages",
         queryClient: queryClient,
         threadContext: threadContext,
         superinterfaceContext: superinterfaceContext
     }));
-    return (0, import_react7.useMemo)(function() {
+    return (0, import_react3.useMemo)(function() {
         return _object_spread_props(_object_spread({}, props), {
             // @ts-ignore-next-line
-            threadMessages: threadMessages({
+            messages: messages({
                 props: props
             })
         });
@@ -735,1354 +573,1561 @@ var useThreadMessages = function() {
         props
     ]);
 };
-// src/hooks/runs/useManageRuns/index.tsx
-var import_react_query5 = require("@tanstack/react-query");
-var import_react11 = require("react");
-// src/hooks/threadMessages/useLatestThreadMessage/index.ts
-var import_react8 = require("react");
-var useLatestThreadMessage = function() {
-    var props = useThreadMessages();
-    return (0, import_react8.useMemo)(function() {
-        return _object_spread_props(_object_spread({}, props), {
-            latestThreadMessage: props.threadMessages[0] || null
-        });
-    }, [
-        props
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var import_react4 = require("react");
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var import_lodash3 = __toESM(require("lodash"), 1);
+var import_radash2 = require("radash");
+// src/lib/messages/order.ts
+var import_radash = require("radash");
+var order = function(param) {
+    var messages2 = param.messages;
+    return (0, import_radash.sort)(messages2, function(m) {
+        return m.created_at;
+    }, true);
+};
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/newGroupItem.ts
+var newGroupItem = function(param) {
+    var message = param.message;
+    return {
+        id: message.id,
+        role: message.role,
+        createdAt: message.created_at,
+        messages: [
+            message
+        ]
+    };
+};
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/index.ts
+var newGroup = function(param) {
+    var groups = param.groups, message = param.message;
+    return _to_consumable_array(groups).concat([
+        newGroupItem({
+            message: message
+        })
     ]);
 };
-// src/hooks/runs/useLatestRun/index.ts
-var import_react10 = require("react");
-// src/hooks/runs/useRuns/index.tsx
-var import_react9 = require("react");
-var import_react_query3 = require("@tanstack/react-query");
-// src/hooks/runs/useRuns/lib/getRuns.ts
-var getRuns = function(param) {
-    var data3 = param.data;
-    if (!data3) return [];
-    return data3.pages.reduce(function(acc, page) {
-        return acc.concat(page.data);
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var messageGroups = function(param) {
+    var messages2 = param.messages;
+    return import_lodash3.default.reduce(order({
+        messages: messages2
+    }), function(groups, message) {
+        var group = (0, import_radash2.last)(groups);
+        if (!group) return newGroup({
+            groups: groups,
+            message: message
+        });
+        if (group.role !== message.role) {
+            return newGroup({
+                groups: groups,
+                message: message
+            });
+        }
+        return _to_consumable_array(import_lodash3.default.dropRight(groups)).concat([
+            _object_spread_props(_object_spread({}, group), {
+                messages: _to_consumable_array(group.messages).concat([
+                    message
+                ])
+            })
+        ]);
     }, []);
 };
-// src/hooks/runs/useRuns/index.tsx
-var useRuns = function() {
-    var queryClient = (0, import_react_query3.useQueryClient)();
-    var superinterfaceContext = useSuperinterfaceContext();
-    var threadContext = useSuperinterfaceContext();
-    var props = (0, import_react_query3.useInfiniteQuery)(queryOptions({
-        queryKeyBase: [
-            "runs"
-        ],
-        path: "/runs",
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    }));
-    return (0, import_react9.useMemo)(function() {
-        return _object_spread_props(_object_spread({}, props), {
-            // @ts-ignore-next-line
-            runs: getRuns({
-                data: props.data
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var useMessageGroups = function(param) {
+    var messages2 = param.messages;
+    return (0, import_react4.useMemo)(function() {
+        return {
+            messageGroups: messageGroups({
+                messages: messages2
             })
-        });
+        };
     }, [
-        props
+        messages2
     ]);
 };
-// src/hooks/runs/useLatestRun/index.ts
-var useLatestRun = function() {
-    var props = useRuns();
-    return (0, import_react10.useMemo)(function() {
-        return _object_spread_props(_object_spread({}, props), {
-            latestRun: props.runs[0]
-        });
-    }, [
-        props
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_react6 = require("react");
+var import_themes4 = require("@radix-ui/themes");
+// src/components/skeletons/Skeleton/index.tsx
+var import_themes = require("@radix-ui/themes");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Skeleton = function(_param) {
+    var height = _param.height, style = _param.style, rest = _object_without_properties(_param, [
+        "height",
+        "style"
     ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Flex, _object_spread({
+        height: "var(--space-".concat(height, ")"),
+        style: _object_spread({
+            animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite",
+            borderRadius: "var(--radius-3)",
+            backgroundColor: "var(--gray-5)"
+        }, style)
+    }, rest));
 };
-// src/hooks/runs/useCreateRun/index.ts
-var import_radash2 = require("radash");
-var import_react_query4 = require("@tanstack/react-query");
-// src/lib/threads/mutationOptions/index.ts
-var mutationOptions = function(param) {
-    var mutationKeyBase = param.mutationKeyBase, path = param.path, queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
-    var mutationKey = _to_consumable_array(mutationKeyBase).concat([
-        threadContext.variables
-    ]);
-    return _object_spread(_object_spread_props(_object_spread({
-        mutationFn: function(variables) {
-            return fetch("".concat(superinterfaceContext.baseUrl).concat(path), {
-                method: "POST",
-                body: JSON.stringify(variables),
-                credentials: "include"
-            }).then(function() {
-                var _ref = _async_to_generator(function(response) {
-                    var errorResponse, error;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                if (!(response.status !== 200)) return [
-                                    3,
-                                    4
-                                ];
-                                _state.label = 1;
-                            case 1:
-                                _state.trys.push([
-                                    1,
-                                    3,
-                                    ,
-                                    4
-                                ]);
-                                return [
-                                    4,
-                                    response.json()
-                                ];
-                            case 2:
-                                errorResponse = _state.sent();
-                                throw new Error(errorResponse.error);
-                            case 3:
-                                error = _state.sent();
-                                throw new Error("Failed to fetch");
-                            case 4:
-                                return [
-                                    2,
-                                    response.json()
-                                ];
-                        }
-                    });
-                });
-                return function(response) {
-                    return _ref.apply(this, arguments);
-                };
-            }());
-        }
-    }, queryClient.getMutationDefaults(mutationKey)), {
-        mutationKey: mutationKey
-    }), threadContext.defaultOptions.mutations);
+// src/components/messageGroups/MessageGroupBase/index.tsx
+var import_react5 = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MessageGroupBase = (0, import_react5.forwardRef)(function MessageGroupBase2(param, ref) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Container, {
+        ref: ref,
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Flex, {
+            flexShrink: "0",
+            gap: "3",
+            children: children
+        })
+    });
+});
+// src/components/messageGroups/MessageGroupBase/Name.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Name = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Flex, {
+        align: "center",
+        height: "var(--space-5)",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes3.Text, {
+            size: "2",
+            weight: "bold",
+            children: children
+        })
+    });
 };
-// src/hooks/runs/useCreateRun/lib/onSuccess.ts
-var onSuccess = function(param) {
-    var queryClient = param.queryClient;
-    return function() {
-        var _ref = _async_to_generator(function(data3, variables) {
-            return _ts_generator(this, function(_state) {
-                return [
-                    2,
-                    queryClient.setQueryData([
-                        "runs",
-                        variables
-                    ], function(prevData) {
-                        if (!prevData) {
-                            return {
-                                pageParams: [],
-                                pages: [
-                                    {
-                                        data: [
-                                            data3.run
-                                        ],
-                                        hasNextPage: false,
-                                        lastId: data3.run.id
-                                    }
-                                ]
-                            };
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MessagesSkeleton = (0, import_react6.forwardRef)(function MessagesSkeleton2(_props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageGroupBase, {
+        ref: ref,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Avatar, {
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes4.Flex, {}),
+                size: "1",
+                style: {
+                    animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite"
+                }
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_themes4.Box, {
+                pb: "3",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Name, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
+                            height: "1",
+                            style: {
+                                width: "128px"
+                            }
+                        })
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
+                        height: "2",
+                        style: {
+                            width: "256px"
+                        }
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
+                        height: "2",
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
+                        }
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Skeleton, {
+                        height: "2",
+                        style: {
+                            width: "256px",
+                            marginTop: "var(--space-2)"
                         }
-                        var _prevData_pages = _to_array(prevData.pages), latestPage = _prevData_pages[0], pagesRest = _prevData_pages.slice(1);
-                        return _object_spread_props(_object_spread({}, prevData), {
-                            pages: [
-                                _object_spread_props(_object_spread({}, latestPage), {
-                                    data: [
-                                        data3.run
-                                    ].concat(_to_consumable_array(latestPage.data))
-                                })
-                            ].concat(_to_consumable_array(pagesRest))
-                        });
                     })
-                ];
-            });
-        });
-        return function(data3, variables) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-};
-// src/hooks/runs/useCreateRun/lib/onSettled.ts
-var onSettled = function(param) {
-    var queryClient = param.queryClient;
-    return function() {
-        var _ref = _async_to_generator(function(_data, _error, variables) {
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            queryClient.invalidateQueries({
-                                queryKey: [
-                                    "threadMessages",
-                                    variables
-                                ]
-                            })
-                        ];
-                    case 1:
-                        _state.sent();
-                        return [
-                            4,
-                            queryClient.invalidateQueries({
-                                queryKey: [
-                                    "runs",
-                                    variables
-                                ]
-                            })
-                        ];
-                    case 2:
-                        _state.sent();
-                        return [
-                            2
-                        ];
-                }
-            });
-        });
-        return function(_data, _error, variables) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-};
-// src/lib/optimistic/optimisticId.ts
-var import_radash = require("radash");
-var optimisticId = function() {
-    return "-".concat((0, import_radash.uid)(24));
+                ]
+            })
+        ]
+    });
+});
+// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
+var import_react16 = require("react");
+var import_themes24 = require("@radix-ui/themes");
+var import_react_icons4 = require("@radix-ui/react-icons");
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
+var import_react8 = require("react");
+var import_themes6 = require("@radix-ui/themes");
+// src/contexts/assistants/AssistantAvatarContext/index.tsx
+var import_react7 = require("react");
+var import_themes5 = require("@radix-ui/themes");
+var import_react_icons = require("@radix-ui/react-icons");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AssistantAvatarContext = (0, import_react7.createContext)(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.Avatar, {
+    fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_icons.LightningBoltIcon, {}),
+    size: "1"
+}));
+// src/components/messageGroups/MessageGroupBase/AssistantAvatar.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AssistantAvatar = function() {
+    var AssistantAvatarContextValue = (0, import_react8.useContext)(AssistantAvatarContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.Flex, {
+        flexShrink: "0",
+        height: "24px",
+        width: "24px",
+        style: {
+            borderRadius: "var(--radius-3)",
+            overflow: "hidden"
+        },
+        children: AssistantAvatarContextValue
+    });
 };
-// src/hooks/runs/useCreateRun/lib/onMutate/data.ts
-var data = function(prevData) {
-    var run = {
-        id: optimisticId(),
-        object: "thread.run",
-        created_at: +/* @__PURE__ */ new Date(),
-        assistant_id: null,
-        thread_id: null,
-        status: "in_progress",
-        expires_at: +/* @__PURE__ */ new Date() + 1e3 * 60 * 60 * 24,
-        cancelled_at: null,
-        failed_at: null,
-        completed_at: null,
-        required_action: null,
-        last_error: null,
-        model: null,
-        instructions: null,
-        tools: [],
-        file_ids: [],
-        metadata: {},
-        usage: null
-    };
-    if (!prevData) {
-        return {
-            pageParams: [],
-            pages: [
-                {
-                    data: [
-                        run
-                    ],
-                    hasNextPage: false,
-                    lastId: run.id
-                }
-            ]
-        };
-    }
-    var _prevData_pages = _to_array(prevData.pages), latestPage = _prevData_pages[0], pagesRest = _prevData_pages.slice(1);
-    return _object_spread_props(_object_spread({}, prevData), {
-        pages: [
-            _object_spread_props(_object_spread({}, latestPage), {
-                data: [
-                    run
-                ].concat(_to_consumable_array(latestPage.data))
+// src/contexts/assistants/AssistantNameContext/index.tsx
+var import_react9 = require("react");
+var AssistantNameContext = (0, import_react9.createContext)("Assistant");
+// src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
+var import_themes23 = require("@radix-ui/themes");
+// src/components/threads/Thread/Message/index.tsx
+var import_react15 = require("react");
+var import_themes22 = require("@radix-ui/themes");
+// src/components/runSteps/RunSteps/index.tsx
+var import_themes15 = require("@radix-ui/themes");
+// src/components/runSteps/RunStep/ToolCalls/index.tsx
+var import_themes14 = require("@radix-ui/themes");
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_themes12 = require("@radix-ui/themes");
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
+var import_react12 = require("react");
+// src/contexts/functions/FunctionComponentsContext/index.tsx
+var import_react10 = require("react");
+var FunctionComponentsContext = (0, import_react10.createContext)({});
+// src/components/functions/FunctionBase/index.tsx
+var import_themes10 = require("@radix-ui/themes");
+// src/components/toolCalls/ToolCallBase/index.tsx
+var import_themes7 = require("@radix-ui/themes");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ToolCallBase = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Flex, {
+        py: "1",
+        ml: "-2",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.PopoverTrigger, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Button, {
+                size: "1",
+                color: "gold",
+                variant: "outline",
+                style: {
+                    boxShadow: "none"
+                },
+                children: children
             })
-        ].concat(_to_consumable_array(pagesRest))
+        })
     });
 };
-// src/hooks/runs/useCreateRun/lib/onMutate/index.ts
-var onMutate = function(param) {
-    var queryClient = param.queryClient;
-    return function() {
-        var _ref = _async_to_generator(function(variables) {
-            var queryKey, prevRuns;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        queryKey = [
-                            "runs",
-                            variables
-                        ];
-                        return [
-                            4,
-                            queryClient.cancelQueries({
-                                queryKey: queryKey
-                            })
-                        ];
-                    case 1:
-                        _state.sent();
-                        prevRuns = queryClient.getQueryData(queryKey);
-                        queryClient.setQueryData(queryKey, data);
-                        return [
-                            2,
-                            {
-                                prevRuns: prevRuns,
-                                variables: variables
-                            }
-                        ];
-                }
-            });
-        });
-        return function(variables) {
-            return _ref.apply(this, arguments);
-        };
-    }();
-};
-// src/hooks/runs/useCreateRun/index.ts
-var useCreateRun = function() {
-    var queryClient = (0, import_react_query4.useQueryClient)();
-    var superinterfaceContext = useSuperinterfaceContext();
-    var threadContext = useSuperinterfaceContext();
-    var props = (0, import_react_query4.useMutation)(_object_spread({
-        onSuccess: onSuccess({
-            queryClient: queryClient
-        }),
-        onSettled: onSettled({
-            queryClient: queryClient
-        }),
-        onMutate: onMutate({
-            queryClient: queryClient
-        })
-    }, mutationOptions({
-        mutationKeyBase: [
-            "createRun"
-        ],
-        path: "/runs",
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    })));
-    return _object_spread_props(_object_spread({}, props), {
-        createRun: (0, import_radash2.partob)(props.mutate, threadContext.variables)
+// src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
+var import_themes8 = require("@radix-ui/themes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ToolCallTitle = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Text, {
+        weight: "regular",
+        children: children
     });
 };
-// src/lib/optimistic/isOptimistic.ts
-var import_lodash4 = __toESM(require("lodash"), 1);
-var isOptimistic = function(param) {
-    var id = param.id;
-    return import_lodash4.default.startsWith(id, "-");
+// src/components/functions/FunctionBase/Icon.tsx
+var import_react_icons2 = require("@radix-ui/react-icons");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Icon = function(param) {
+    var runStep = param.runStep;
+    if (runStep.completed_at) {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CheckCircledIcon, {});
+    } else if (runStep.cancelled_at || runStep.failed_at || runStep.status === "expired") {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CircleBackslashIcon, {});
+    } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CircleIcon, {});
+    }
 };
-// src/hooks/runs/useManageRuns/index.tsx
-var useManageRuns = function() {
-    var queryClient = (0, import_react_query5.useQueryClient)();
-    var latestRunProps = useLatestRun();
-    var latestThreadMessageProps = useLatestThreadMessage();
-    var createRunProps = useCreateRun();
-    var threadContext = useSuperinterfaceContext();
-    (0, import_react11.useEffect)(function() {
-        if (createRunProps.isPending) return;
-        if (latestRunProps.isFetching) return;
-        if (latestThreadMessageProps.isFetching) return;
-        if (!latestThreadMessageProps.latestThreadMessage) return;
-        if (latestThreadMessageProps.latestThreadMessage.role !== "user") return;
-        if (isOptimistic({
-            id: latestThreadMessageProps.latestThreadMessage.id
-        })) return;
-        if (latestRunProps.latestRun && latestRunProps.latestRun.created_at > latestThreadMessageProps.latestThreadMessage.created_at) {
-            return;
+// src/components/functions/FunctionBase/Content.tsx
+var import_react11 = require("react");
+var import_themes9 = require("@radix-ui/themes");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Content = function(param) {
+    var fn = param.fn;
+    var args = (0, import_react11.useMemo)(function() {
+        var result = null;
+        try {
+            result = JSON.parse(fn.arguments);
+        } catch (error) {
+            console.error(error);
         }
-        var isMutating = queryClient.isMutating({
-            mutationKey: [
-                "createRun",
-                threadContext.variables
-            ]
-        });
-        if (isMutating) return;
-        createRunProps.createRun();
+        return result;
     }, [
-        threadContext,
-        queryClient,
-        createRunProps,
-        latestRunProps,
-        latestThreadMessageProps
+        fn
     ]);
-    return null;
+    var output = (0, import_react11.useMemo)(function() {
+        if (!fn.output) {
+            return null;
+        }
+        var result = null;
+        try {
+            result = JSON.parse(fn.output);
+        } catch (error) {
+            console.error(error);
+        }
+        return result;
+    }, [
+        fn
+    ]);
+    if (!args) {
+        return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes9.Code, {
+        variant: "ghost",
+        color: "gold",
+        style: {
+            whiteSpace: "pre",
+            wordBreak: "break-word"
+        },
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes9.Box, {
+                children: args && JSON.stringify(args, null, 2)
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes9.Box, {
+                children: output && JSON.stringify(output, null, 2)
+            })
+        ]
+    });
 };
-// src/hooks/runs/usePolling/index.tsx
-var import_react_query7 = require("@tanstack/react-query");
-var import_react_use = require("react-use");
-// src/hooks/runs/useIsRunActive/index.tsx
-var import_react12 = require("react");
-var import_react_query6 = require("@tanstack/react-query");
-// src/lib/runs/isRunEditingThreadMessage/index.ts
-var import_lodash5 = __toESM(require("lodash"), 1);
-var isRunEditingThreadMessage = function(param) {
-    var threadMessage = param.threadMessage;
-    if (!threadMessage) return false;
-    if (threadMessage.role === "user") return false;
-    if (!threadMessage.run_id) return false;
-    var hasContent = import_lodash5.default.some(threadMessage.content, function(content) {
-        var _content_text;
-        return content.type !== "text" || content.type === "text" && ((_content_text = content.text) === null || _content_text === void 0 ? void 0 : _content_text.value) !== "";
+// src/components/functions/FunctionBase/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FunctionBase = function(param) {
+    var fn = param.fn, runStep = param.runStep, title2 = param.title;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes10.PopoverRoot, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ToolCallBase, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, {
+                        runStep: runStep
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolCallTitle, {
+                        children: title2
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes10.PopoverContent, {
+                style: {
+                    maxHeight: "500px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Content, {
+                    fn: fn
+                })
+            })
+        ]
     });
-    return !hasContent;
 };
-// src/hooks/runs/useIsRunActive/index.tsx
-var progressStatuses = [
-    "queued",
-    "in_progress",
-    "cancelling",
-    "requires_action"
-];
-var stoppedStatuses = [
-    "expired",
-    "cancelled",
-    "failed"
-];
-var isRunActive = function(param) {
-    var latestRunProps = param.latestRunProps, latestThreadMessageProps = param.latestThreadMessageProps, isMutating = param.isMutating;
-    var _latestThreadMessageProps_latestThreadMessage_metadata, _latestThreadMessageProps_latestThreadMessage;
-    if ((_latestThreadMessageProps_latestThreadMessage = latestThreadMessageProps.latestThreadMessage) === null || _latestThreadMessageProps_latestThreadMessage === void 0 ? void 0 : (_latestThreadMessageProps_latestThreadMessage_metadata = _latestThreadMessageProps_latestThreadMessage.metadata) === null || _latestThreadMessageProps_latestThreadMessage_metadata === void 0 ? void 0 : _latestThreadMessageProps_latestThreadMessage_metadata.isBlocking) return false;
-    if (isMutating) return true;
-    if (!latestRunProps.latestRun) return false;
-    if (progressStatuses.includes(latestRunProps.latestRun.status)) return true;
-    if (stoppedStatuses.includes(latestRunProps.latestRun.status)) return false;
-    return isRunEditingThreadMessage({
-        threadMessage: latestThreadMessageProps.latestThreadMessage
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/lib/title.ts
+var title = function(param) {
+    var fn = param.fn, runStep = param.runStep;
+    if (runStep.completed_at) {
+        return "Finished ".concat(fn.name);
+    } else if (runStep.cancelled_at) {
+        return "Cancelled ".concat(fn.name);
+    } else {
+        return "Calling ".concat(fn.name);
+    }
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DefaultFunction = function(param) {
+    var fn = param.fn, runStep = param.runStep;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FunctionBase, {
+        fn: fn,
+        runStep: runStep,
+        title: title({
+            runStep: runStep,
+            fn: fn
+        })
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
+var import_jsx_runtime14 = // @ts-ignore-next-line
+require("react/jsx-runtime");
+var Fn = function(param) {
+    var fn = param.fn, runStep = param.runStep;
+    var functionComponentsContext = (0, import_react12.useContext)(FunctionComponentsContext);
+    var Component = functionComponentsContext[fn.name] || DefaultFunction;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, {
+        fn: fn,
+        runStep: runStep
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
+var import_themes11 = require("@radix-ui/themes");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CodeInterpreter = function(param) {
+    var codeInterpreter = param.codeInterpreter;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes11.Flex, {
+        children: codeInterpreter.input
+    });
+};
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ToolCall = function(param) {
+    var toolCall = param.toolCall, runStep = param.runStep;
+    if (toolCall.type === "function") {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Fn, {
+            fn: toolCall.function,
+            runStep: runStep
+        });
+    }
+    if (toolCall.type === "code_interpreter") {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CodeInterpreter, {
+            codeInterpreter: toolCall.code_interpreter,
+            runStep: runStep
+        });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes12.Flex, {
+        children: toolCall.type
     });
 };
-var useIsRunActive = function() {
-    var latestRunProps = useLatestRun();
-    var latestThreadMessageProps = useLatestThreadMessage();
-    var threadContext = useSuperinterfaceContext();
-    var isMutatingCreateRun = (0, import_react_query6.useIsMutating)({
-        mutationKey: [
-            "createRun",
-            threadContext.variables
-        ]
-    });
-    var isMutatingCreateThreadMessage = (0, import_react_query6.useIsMutating)({
-        mutationKey: [
-            "createThreadMessage",
-            threadContext.variables
+// src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
+var import_themes13 = require("@radix-ui/themes");
+var import_react_icons3 = require("@radix-ui/react-icons");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Starting = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes13.PopoverRoot, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolCallBase, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.CircleIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolCallTitle, {
+                        children: "Starting actions"
+                    })
+                ]
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.PopoverContent, {
+                style: {
+                    maxHeight: "500px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Text, {
+                    children: "Getting ready to connect to domain API"
+                })
+            })
         ]
     });
-    var isMutatingCreateHandleAction = (0, import_react_query6.useIsMutating)({
-        mutationKey: [
-            "handleAction",
-            threadContext.variables
+};
+// src/components/runSteps/RunStep/ToolCalls/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ToolCalls = function(param) {
+    var stepDetails = param.stepDetails, runStep = param.runStep;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.Flex, {
+        direction: "column",
+        children: [
+            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Starting, {}),
+            stepDetails.tool_calls.map(function(toolCall) {
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCall, {
+                    toolCall: toolCall,
+                    runStep: runStep
+                }, toolCall.id);
+            })
         ]
     });
-    return (0, import_react12.useMemo)(function() {
-        return _object_spread_props(_object_spread({}, latestRunProps), {
-            isRunActive: isRunActive({
-                latestRunProps: latestRunProps,
-                latestThreadMessageProps: latestThreadMessageProps,
-                isMutating: isMutatingCreateRun > 0 || isMutatingCreateThreadMessage > 0 || isMutatingCreateHandleAction > 0
-            })
-        });
-    }, [
-        latestRunProps,
-        latestThreadMessageProps,
-        isMutatingCreateRun,
-        isMutatingCreateThreadMessage,
-        isMutatingCreateHandleAction
-    ]);
 };
-// src/hooks/runs/usePolling/lib/refetch.ts
-var refetch = function() {
-    var _ref = _async_to_generator(function(param) {
-        var queryClient, threadContext, _threadContext_defaultOptions_queries_queryKey, _threadContext_defaultOptions_queries_queryKey1;
-        return _ts_generator(this, function(_state) {
-            switch(_state.label){
-                case 0:
-                    queryClient = param.queryClient, threadContext = param.threadContext;
-                    return [
-                        4,
-                        queryClient.invalidateQueries({
-                            queryKey: (_threadContext_defaultOptions_queries_queryKey = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey !== void 0 ? _threadContext_defaultOptions_queries_queryKey : [
-                                "threadMessages",
-                                threadContext.variables
-                            ]
-                        })
-                    ];
-                case 1:
-                    _state.sent();
-                    return [
-                        4,
-                        queryClient.invalidateQueries({
-                            queryKey: (_threadContext_defaultOptions_queries_queryKey1 = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey1 !== void 0 ? _threadContext_defaultOptions_queries_queryKey1 : [
-                                "runs",
-                                threadContext.variables
-                            ]
-                        })
-                    ];
-                case 2:
-                    _state.sent();
-                    return [
-                        2
-                    ];
-            }
-        });
-    });
-    return function refetch(_) {
-        return _ref.apply(this, arguments);
-    };
-}();
-// src/hooks/runs/usePolling/index.tsx
-var usePolling = function() {
-    var threadContext = useSuperinterfaceContext();
-    var queryClient = (0, import_react_query7.useQueryClient)();
-    var isRunActiveProps = useIsRunActive();
-    (0, import_react_use.useInterval)(function() {
-        refetch({
-            queryClient: queryClient,
-            threadContext: threadContext
+// src/components/runSteps/RunStep/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var RunStep = function(param) {
+    var runStep = param.runStep;
+    if (runStep.step_details.type === "tool_calls") {
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCalls, {
+            stepDetails: runStep.step_details,
+            runStep: runStep
         });
-        console.log("poll refetched");
-    }, isRunActiveProps.isRunActive ? 3e3 : null);
+    }
     return null;
 };
-// src/hooks/actions/useManageActions/index.tsx
-var import_react_query9 = require("@tanstack/react-query");
+// src/components/runSteps/RunSteps/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RunSteps = function(param) {
+    var runSteps = param.runSteps;
+    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, {
+                runStep: runStep
+            }, runStep.id);
+        })
+    });
+};
+// src/components/threads/Thread/Message/TextContent/index.tsx
+var import_react14 = require("react");
+var import_react_remark = require("react-remark");
+// src/contexts/markdown/MarkdownContext/index.ts
 var import_react13 = require("react");
-// src/hooks/actions/useHandleAction/index.tsx
-var import_radash3 = require("radash");
-var import_react_query8 = require("@tanstack/react-query");
-// src/hooks/actions/useHandleAction/lib/onSettled.ts
-var onSettled2 = function(param) {
-    var queryClient = param.queryClient;
-    return function() {
-        var _ref = _async_to_generator(function(_data, _error, variables) {
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        return [
-                            4,
-                            queryClient.invalidateQueries({
-                                queryKey: [
-                                    "threadMessages",
-                                    variables
-                                ]
-                            })
-                        ];
-                    case 1:
-                        _state.sent();
-                        return [
-                            4,
-                            queryClient.invalidateQueries({
-                                queryKey: [
-                                    "runs",
-                                    variables
-                                ]
-                            })
-                        ];
-                    case 2:
-                        _state.sent();
-                        return [
-                            2
-                        ];
-                }
-            });
-        });
-        return function(_data, _error, variables) {
-            return _ref.apply(this, arguments);
-        };
-    }();
+// src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
+var import_themes16 = require("@radix-ui/themes");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Paragraph = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes16.Box, {
+        pb: "3",
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes16.Text, {
+            size: "3",
+            style: {
+                whiteSpace: "pre-line",
+                wordBreak: "break-word"
+            },
+            children: children
+        })
+    });
 };
-// src/hooks/actions/useHandleAction/index.tsx
-var useHandleAction = function() {
-    var queryClient = (0, import_react_query8.useQueryClient)();
-    var superinterfaceContext = useSuperinterfaceContext();
-    var threadContext = useSuperinterfaceContext();
-    var props = (0, import_react_query8.useMutation)(_object_spread({
-        onSettled: onSettled2({
-            queryClient: queryClient
+// src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Link = function(param) {
+    var children = param.children, href = param.href;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes17.Link, {
+        href: href,
+        children: children
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var UnorderedList = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes18.Box, {
+        pb: "3",
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", {
+            style: {
+                listStylePosition: "inside"
+            },
+            children: children
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
+var import_themes19 = require("@radix-ui/themes");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var OrderedList = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Box, {
+        pb: "3",
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ol", {
+            style: {
+                listStylePosition: "inside"
+            },
+            children: children
         })
-    }, mutationOptions({
-        mutationKeyBase: [
-            "handleAction"
-        ],
-        path: "/actions",
-        queryClient: queryClient,
-        threadContext: threadContext,
-        superinterfaceContext: superinterfaceContext
-    })));
-    return _object_spread_props(_object_spread({}, props), {
-        handleAction: (0, import_radash3.partob)(props.mutate, threadContext.variables)
     });
 };
-// src/hooks/actions/useManageActions/index.tsx
-var useManageActions = function() {
-    var queryClient = (0, import_react_query9.useQueryClient)();
-    var threadContext = useSuperinterfaceContext();
-    var latestRunProps = useLatestRun();
-    var handleActionProps = useHandleAction();
-    (0, import_react13.useEffect)(function() {
-        if (handleActionProps.isPending) return;
-        if (latestRunProps.isFetching) return;
-        if (!latestRunProps.latestRun) return;
-        if (latestRunProps.latestRun.status !== "requires_action") return;
-        var isMutating = queryClient.isMutating({
-            mutationKey: [
-                "handleAction",
-                threadContext.variables
-            ]
+// src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ListItem = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes20.Box, {
+        pb: "1",
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", {
+            children: children
+        })
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Strong = function(param) {
+    var children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes21.Strong, {
+        children: children
+    });
+};
+// src/contexts/markdown/MarkdownContext/lib/components/index.tsx
+var components = {
+    p: Paragraph,
+    a: Link,
+    strong: Strong,
+    ul: UnorderedList,
+    ol: OrderedList,
+    li: ListItem
+};
+// src/contexts/markdown/MarkdownContext/index.ts
+var MarkdownContext = (0, import_react13.createContext)({
+    remarkPlugins: [],
+    rehypeReactOptions: {
+        components: components
+    }
+});
+// src/components/threads/Thread/Message/TextContent/index.tsx
+var TextContent = function(param) {
+    var content = param.content;
+    var markdownContext = (0, import_react14.useContext)(MarkdownContext);
+    return (0, import_react_remark.useRemarkSync)(content.text.value, markdownContext);
+};
+// src/components/threads/Thread/Message/index.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Message = function(param) {
+    var message = param.message;
+    var _ref = _sliced_to_array((0, import_react15.useMemo)(function() {
+        if (!message.runSteps.length) return [
+            [],
+            []
+        ];
+        var messageCreationRunStepIndex = message.runSteps.findIndex(function(runStep) {
+            if (runStep.step_details.type !== "message_creation") return;
+            return runStep.step_details.message_creation.message_id === message.id;
         });
-        if (isMutating) return;
-        console.log("requires action", {
-            latestRunProps: latestRunProps
+        var nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(function(runStep) {
+            return runStep.step_details.type === "message_creation";
         });
-        handleActionProps.handleAction({
-            latestRun: latestRunProps.latestRun
+        if (nextRunStepIndex === -1) {
+            nextRunStepIndex = 0;
+        }
+        var laterRunSteps2 = message.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex);
+        var prevRunStepIndex = message.runSteps.slice(messageCreationRunStepIndex + 1).findIndex(function(runStep) {
+            return runStep.step_details.type === "message_creation";
         });
+        var olderRunSteps2;
+        if (prevRunStepIndex === -1) {
+            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1);
+        } else {
+            olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex);
+        }
+        return [
+            olderRunSteps2,
+            laterRunSteps2
+        ];
     }, [
-        handleActionProps,
-        latestRunProps
-    ]);
-    return null;
-};
-// src/hooks/threads/useThreadLifecycles/index.tsx
-var useThreadLifecycles = function() {
-    useManageRuns();
-    useManageActions();
-    usePolling();
-    return null;
-};
-// src/hooks/threadMessageGroups/useThreadMessageGroups/index.ts
-var import_react14 = require("react");
-// src/hooks/threadMessageGroups/useThreadMessageGroups/lib/threadMessageGroups/index.ts
-var import_lodash6 = __toESM(require("lodash"), 1);
-var import_radash5 = require("radash");
-// src/lib/threadMessages/order.ts
-var import_radash4 = require("radash");
-var order = function(param) {
-    var threadMessages2 = param.threadMessages;
-    return (0, import_radash4.sort)(threadMessages2, function(tm) {
-        return tm.created_at;
-    }, true);
-};
-// src/hooks/threadMessageGroups/useThreadMessageGroups/lib/threadMessageGroups/newGroup/newGroupItem.ts
-var newGroupItem = function(param) {
-    var threadMessage = param.threadMessage;
-    return {
-        id: threadMessage.id,
-        role: threadMessage.role,
-        createdAt: threadMessage.created_at,
-        threadMessages: [
-            threadMessage
+        message
+    ]), 2), olderRunSteps = _ref[0], laterRunSteps = _ref[1];
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes22.Box, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RunSteps, {
+                runSteps: olderRunSteps
+            }),
+            message.content.map(function(content, index) {
+                return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes22.Box, {
+                    children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextContent, {
+                        content: content
+                    })
+                }, index);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RunSteps, {
+                runSteps: laterRunSteps
+            })
         ]
-    };
+    });
 };
-// src/hooks/threadMessageGroups/useThreadMessageGroups/lib/threadMessageGroups/newGroup/index.ts
-var newGroup = function(param) {
-    var groups = param.groups, threadMessage = param.threadMessage;
-    return _to_consumable_array(groups).concat([
-        newGroupItem({
-            threadMessage: threadMessage
+// src/components/threads/Thread/Messages/Content/MessageGroup/Content/index.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Content2 = function(param) {
+    var messageGroup = param.messageGroup;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes23.Flex, {
+        direction: "column-reverse",
+        children: messageGroup.messages.map(function(message) {
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Message, {
+                message: message
+            }, message.id);
         })
-    ]);
+    });
 };
-// src/hooks/threadMessageGroups/useThreadMessageGroups/lib/threadMessageGroups/index.ts
-var threadMessageGroups = function(param) {
-    var threadMessages2 = param.threadMessages;
-    return import_lodash6.default.reduce(order({
-        threadMessages: threadMessages2
-    }), function(groups, threadMessage) {
-        var group = (0, import_radash5.last)(groups);
-        if (!group) return newGroup({
-            groups: groups,
-            threadMessage: threadMessage
-        });
-        if (group.role !== threadMessage.role) {
-            return newGroup({
-                groups: groups,
-                threadMessage: threadMessage
-            });
-        }
-        return _to_consumable_array(import_lodash6.default.dropRight(groups)).concat([
-            _object_spread_props(_object_spread({}, group), {
-                threadMessages: _to_consumable_array(group.threadMessages).concat([
-                    threadMessage
-                ])
+// src/components/threads/Thread/Messages/Content/MessageGroup/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var MessageGroup = function(param) {
+    var messageGroup = param.messageGroup;
+    var assistantNameContext = (0, import_react16.useContext)(AssistantNameContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(MessageGroupBase, {
+        children: [
+            messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes24.Avatar, {
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons4.PersonIcon, {}),
+                size: "1"
+            }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_themes24.Box, {
+                flexGrow: "1",
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Name, {
+                        children: messageGroup.role === "user" ? "You" : assistantNameContext
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Content2, {
+                        messageGroup: messageGroup
+                    })
+                ]
             })
-        ]);
-    }, []);
+        ]
+    });
 };
-// src/hooks/threadMessageGroups/useThreadMessageGroups/index.ts
-var useThreadMessageGroups = function(param) {
-    var threadMessages2 = param.threadMessages;
-    return (0, import_react14.useMemo)(function() {
-        return {
-            threadMessageGroups: threadMessageGroups({
-                threadMessages: threadMessages2
-            })
-        };
-    }, [
-        threadMessages2
-    ]);
+// src/components/threads/Thread/Messages/Content/index.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Content3 = function() {
+    var _useMessages = useMessages(), messages2 = _useMessages.messages, isLoading = _useMessages.isLoading, isLoadingError = _useMessages.isLoadingError;
+    var _useMessageGroups = useMessageGroups({
+        messages: messages2
+    }), messageGroups2 = _useMessageGroups.messageGroups;
+    if (isLoading || isLoadingError) {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MessagesSkeleton, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, {
+        children: messageGroups2.map(function(messageGroup) {
+            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MessageGroup, {
+                messageGroup: messageGroup
+            }, messageGroup.id);
+        })
+    });
 };
-// src/components/threadMessages/ThreadMessages/Content/ThreadMessageGroup/index.tsx
-var import_react24 = require("react");
-var import_themes24 = require("@radix-ui/themes");
-var import_react_icons4 = require("@radix-ui/react-icons");
-// src/components/threadMessageGroups/ThreadMessagesGroupBase/AssistantAvatar.tsx
-var import_react16 = require("react");
-var import_themes6 = require("@radix-ui/themes");
-// src/contexts/assistants/AssistantAvatarContext/index.tsx
-var import_react15 = require("react");
-var import_themes5 = require("@radix-ui/themes");
-var import_react_icons = require("@radix-ui/react-icons");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AssistantAvatarContext = (0, import_react15.createContext)(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes5.Avatar, {
-    fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_icons.LightningBoltIcon, {}),
-    size: "1"
-}));
-// src/components/threadMessageGroups/ThreadMessagesGroupBase/AssistantAvatar.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var AssistantAvatar = function() {
-    var AssistantAvatarContextValue = (0, import_react16.useContext)(AssistantAvatarContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes6.Flex, {
-        shrink: "0",
+// src/components/threads/Thread/Messages/Progress/index.tsx
+var import_themes27 = require("@radix-ui/themes");
+// src/components/skeletons/StartingContentSkeleton/index.tsx
+var import_themes25 = require("@radix-ui/themes");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var StartingContentSkeleton = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes25.Box, {
+        flexShrink: "0",
+        mt: "1",
+        height: "var(--space-4)",
+        width: "var(--space-4)",
         style: {
+            animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite",
             borderRadius: "var(--radius-3)",
-            overflow: "hidden",
-            height: "24px",
-            width: "24px"
-        },
-        children: AssistantAvatarContextValue
+            backgroundColor: "var(--gray-12)"
+        }
     });
 };
-// src/contexts/assistants/AssistantNameContext/index.tsx
+// src/components/skeletons/StartingSkeleton/index.tsx
 var import_react17 = require("react");
-var AssistantNameContext = (0, import_react17.createContext)("Assistant");
-// src/components/threadMessages/ThreadMessages/Content/ThreadMessageGroup/Content/index.tsx
-var import_themes23 = require("@radix-ui/themes");
-// src/components/ThreadMessages/ThreadMessage/index.tsx
-var import_react23 = require("react");
-var import_themes22 = require("@radix-ui/themes");
-// src/components/runSteps/RunSteps/index.tsx
-var import_themes15 = require("@radix-ui/themes");
-// src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_themes14 = require("@radix-ui/themes");
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-var import_themes12 = require("@radix-ui/themes");
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_react20 = require("react");
-// src/contexts/functions/FunctionComponentsContext/index.tsx
-var import_react18 = require("react");
-var FunctionComponentsContext = (0, import_react18.createContext)({});
-// src/components/functions/FunctionBase/index.tsx
-var import_themes10 = require("@radix-ui/themes");
-// src/components/toolCalls/ToolCallBase/index.tsx
-var import_themes7 = require("@radix-ui/themes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ToolCallBase = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Flex, {
-        py: "1",
-        ml: "-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.PopoverTrigger, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes7.Button, {
-                size: "1",
-                color: "gold",
-                variant: "outline",
-                style: {
-                    boxShadow: "none"
-                },
-                children: children
-            })
-        })
-    });
-};
-// src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
-var import_themes8 = require("@radix-ui/themes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ToolCallTitle = function(param) {
+var import_themes26 = require("@radix-ui/themes");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var StartingSkeleton = function(param) {
     var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes8.Text, {
-        weight: "regular",
-        children: children
+    var assistantNameContext = (0, import_react17.useContext)(AssistantNameContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MessageGroupBase, {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AssistantAvatar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_themes26.Box, {
+                children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Name, {
+                        children: assistantNameContext
+                    }),
+                    children,
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StartingContentSkeleton, {})
+                ]
+            })
+        ]
     });
 };
-// src/components/functions/FunctionBase/Icon.tsx
-var import_react_icons2 = require("@radix-ui/react-icons");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Icon = function(param) {
-    var runStep = param.runStep;
-    if (runStep.completed_at) {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CheckCircledIcon, {});
-    } else if (runStep.cancelled_at || runStep.failed_at || runStep.status === "expired") {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CircleBackslashIcon, {});
-    } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons2.CircleIcon, {});
-    }
+// src/hooks/messages/useLatestMessage/index.ts
+var import_react18 = require("react");
+var useLatestMessage = function() {
+    var props = useMessages();
+    return (0, import_react18.useMemo)(function() {
+        return _object_spread_props(_object_spread({}, props), {
+            latestMessage: props.messages[0] || null
+        });
+    }, [
+        props
+    ]);
 };
-// src/components/functions/FunctionBase/Content.tsx
+// src/hooks/runs/useIsRunActive/index.tsx
+var import_react21 = require("react");
+var import_react_query4 = require("@tanstack/react-query");
+// src/hooks/runs/useLatestRun/index.ts
+var import_react20 = require("react");
+// src/hooks/runs/useRuns/index.tsx
 var import_react19 = require("react");
-var import_themes9 = require("@radix-ui/themes");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Content = function(param) {
-    var fn = param.fn;
-    var args = (0, import_react19.useMemo)(function() {
-        var result = null;
-        try {
-            result = JSON.parse(fn.arguments);
-        } catch (error) {
-            console.error(error);
-        }
-        return result;
+var import_react_query3 = require("@tanstack/react-query");
+// src/hooks/runs/useRuns/lib/getRuns.ts
+var getRuns = function(param) {
+    var data3 = param.data;
+    if (!data3) return [];
+    return data3.pages.reduce(function(acc, page) {
+        return acc.concat(page.data);
+    }, []);
+};
+// src/hooks/runs/useRuns/index.tsx
+var useRuns = function() {
+    var queryClient = (0, import_react_query3.useQueryClient)();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var threadContext = useSuperinterfaceContext();
+    var props = (0, import_react_query3.useInfiniteQuery)(queryOptions({
+        queryKeyBase: [
+            "runs"
+        ],
+        path: "/runs",
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    }));
+    return (0, import_react19.useMemo)(function() {
+        return _object_spread_props(_object_spread({}, props), {
+            // @ts-ignore-next-line
+            runs: getRuns({
+                data: props.data
+            })
+        });
     }, [
-        fn
+        props
     ]);
-    var output = (0, import_react19.useMemo)(function() {
-        if (!fn.output) {
-            return null;
-        }
-        var result = null;
-        try {
-            result = JSON.parse(fn.output);
-        } catch (error) {
-            console.error(error);
-        }
-        return result;
+};
+// src/hooks/runs/useLatestRun/index.ts
+var useLatestRun = function() {
+    var props = useRuns();
+    return (0, import_react20.useMemo)(function() {
+        return _object_spread_props(_object_spread({}, props), {
+            latestRun: props.runs[0]
+        });
     }, [
-        fn
+        props
     ]);
-    if (!args) {
-        return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes9.Code, {
-        variant: "ghost",
-        color: "gold",
-        style: {
-            whiteSpace: "pre",
-            wordBreak: "break-word"
-        },
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes9.Box, {
-                children: args && JSON.stringify(args, null, 2)
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes9.Box, {
-                children: output && JSON.stringify(output, null, 2)
-            })
+};
+// src/lib/runs/isRunEditingMessage/index.ts
+var import_lodash4 = __toESM(require("lodash"), 1);
+var isRunEditingMessage = function(param) {
+    var message = param.message;
+    if (!message) return false;
+    if (message.role === "user") return false;
+    if (!message.run_id) return false;
+    var hasContent = import_lodash4.default.some(message.content, function(content) {
+        var _content_text;
+        return content.type !== "text" || content.type === "text" && ((_content_text = content.text) === null || _content_text === void 0 ? void 0 : _content_text.value) !== "";
+    });
+    return !hasContent;
+};
+// src/hooks/runs/useIsRunActive/index.tsx
+var progressStatuses = [
+    "queued",
+    "in_progress",
+    "cancelling",
+    "requires_action"
+];
+var stoppedStatuses = [
+    "expired",
+    "cancelled",
+    "failed"
+];
+var isRunActive = function(param) {
+    var latestRunProps = param.latestRunProps, latestMessageProps = param.latestMessageProps, isMutating = param.isMutating;
+    var _latestMessageProps_latestMessage_metadata, _latestMessageProps_latestMessage;
+    if ((_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) return false;
+    if (isMutating) return true;
+    if (!latestRunProps.latestRun) return false;
+    if (progressStatuses.includes(latestRunProps.latestRun.status)) return true;
+    if (stoppedStatuses.includes(latestRunProps.latestRun.status)) return false;
+    return isRunEditingMessage({
+        message: latestMessageProps.latestMessage
+    });
+};
+var useIsRunActive = function() {
+    var latestRunProps = useLatestRun();
+    var latestMessageProps = useLatestMessage();
+    var threadContext = useSuperinterfaceContext();
+    var isMutatingCreateRun = (0, import_react_query4.useIsMutating)({
+        mutationKey: [
+            "createRun",
+            threadContext.variables
+        ]
+    });
+    var isMutatingCreateMessage = (0, import_react_query4.useIsMutating)({
+        mutationKey: [
+            "createMessage",
+            threadContext.variables
+        ]
+    });
+    var isMutatingCreateHandleAction = (0, import_react_query4.useIsMutating)({
+        mutationKey: [
+            "handleAction",
+            threadContext.variables
         ]
     });
+    return (0, import_react21.useMemo)(function() {
+        return _object_spread_props(_object_spread({}, latestRunProps), {
+            isRunActive: isRunActive({
+                latestRunProps: latestRunProps,
+                latestMessageProps: latestMessageProps,
+                isMutating: isMutatingCreateRun > 0 || isMutatingCreateMessage > 0 || isMutatingCreateHandleAction > 0
+            })
+        });
+    }, [
+        latestRunProps,
+        latestMessageProps,
+        isMutatingCreateRun,
+        isMutatingCreateMessage,
+        isMutatingCreateHandleAction
+    ]);
 };
-// src/components/functions/FunctionBase/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FunctionBase = function(param) {
-    var fn = param.fn, runStep = param.runStep, title2 = param.title;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes10.PopoverRoot, {
+// src/components/threads/Thread/Messages/Progress/index.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Progress = function() {
+    var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
+    var latestMessage = useLatestMessage().latestMessage;
+    if (!latestMessage) return null;
+    if (!isRunActive2) return null;
+    if (latestMessage.role === "user") {
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingSkeleton, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MessageGroupBase, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ToolCallBase, {
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, {
-                        runStep: runStep
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolCallTitle, {
-                        children: title2
-                    })
-                ]
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes27.Box, {
+                pl: "5"
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes10.PopoverContent, {
-                style: {
-                    maxHeight: "500px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Content, {
-                    fn: fn
-                })
-            })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
         ]
     });
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/lib/title.ts
-var title = function(param) {
-    var fn = param.fn, runStep = param.runStep;
-    if (runStep.completed_at) {
-        return "Finished ".concat(fn.name);
-    } else if (runStep.cancelled_at) {
-        return "Cancelled ".concat(fn.name);
-    } else {
-        return "Calling ".concat(fn.name);
-    }
-};
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DefaultFunction = function(param) {
-    var fn = param.fn, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FunctionBase, {
-        fn: fn,
-        runStep: runStep,
-        title: title({
-            runStep: runStep,
-            fn: fn
-        })
+// src/components/threads/Thread/Messages/Root/index.tsx
+var import_themes28 = require("@radix-ui/themes");
+// src/hooks/misc/useInfiniteScroll/index.tsx
+var import_react23 = 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_react22 = require("react");
+var useThrottledEffect = function(cb, delay, additionalDeps) {
+    var _cbRef;
+    var cbRef = (0, import_react22.useRef)(cb);
+    var throttledCb = (0, import_react22.useCallback)(import_lodash5.default.throttle(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        return (_cbRef = cbRef).current.apply(_cbRef, _to_consumable_array(args));
+    }, delay, {
+        leading: true,
+        trailing: true
+    }), [
+        delay
+    ]);
+    (0, import_react22.useEffect)(function() {
+        cbRef.current = cb;
     });
+    (0, import_react22.useEffect)(throttledCb, [
+        throttledCb
+    ].concat(_to_consumable_array(additionalDeps)));
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
-var import_jsx_runtime14 = // @ts-ignore-next-line
-require("react/jsx-runtime");
-var Fn = function(param) {
-    var fn = param.fn, runStep = param.runStep;
-    var functionComponentsContext = (0, import_react20.useContext)(FunctionComponentsContext);
-    var Component = functionComponentsContext[fn.name] || DefaultFunction;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Component, {
-        fn: fn,
-        runStep: runStep
-    });
+// src/hooks/misc/useInfiniteScroll/index.tsx
+var useInfiniteScroll = function(param) {
+    var isFetchingNextPage = param.isFetchingNextPage, hasNextPage = param.hasNextPage, fetchNextPage = param.fetchNextPage;
+    var containerRef = (0, import_react23.useRef)(null);
+    var _ref = (0, import_react_intersection_observer.useInView)({
+        root: containerRef.current,
+        rootMargin: "0px",
+        threshold: 0.1
+    }), loaderRef = _ref.ref, inView = _ref.inView;
+    useThrottledEffect(function() {
+        if (isFetchingNextPage) return;
+        if (!inView) return;
+        if (!hasNextPage) return;
+        console.log("Fetching next page");
+        fetchNextPage();
+    }, 500, [
+        inView,
+        isFetchingNextPage,
+        hasNextPage,
+        fetchNextPage
+    ]);
+    return {
+        containerRef: containerRef,
+        loaderRef: loaderRef,
+        inView: inView
+    };
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
-var import_themes11 = require("@radix-ui/themes");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var CodeInterpreter = function(param) {
-    var codeInterpreter = param.codeInterpreter;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes11.Flex, {
-        children: codeInterpreter.input
-    });
+// src/hooks/runs/useManageRuns/index.tsx
+var import_react_query6 = require("@tanstack/react-query");
+var import_react24 = require("react");
+// src/hooks/runs/useCreateRun/index.ts
+var import_radash4 = require("radash");
+var import_react_query5 = require("@tanstack/react-query");
+// src/lib/threads/mutationOptions/index.ts
+var mutationOptions = function(param) {
+    var mutationKeyBase = param.mutationKeyBase, path = param.path, queryClient = param.queryClient, threadContext = param.threadContext, superinterfaceContext = param.superinterfaceContext;
+    var mutationKey = _to_consumable_array(mutationKeyBase).concat([
+        threadContext.variables
+    ]);
+    return _object_spread(_object_spread_props(_object_spread({
+        mutationFn: function(variables) {
+            return fetch("".concat(superinterfaceContext.baseUrl).concat(path), _object_spread({
+                method: "POST",
+                body: JSON.stringify(variables),
+                credentials: "include"
+            }, superinterfaceContext.publicApiKey ? {
+                headers: {
+                    Authorization: "Bearer ".concat(superinterfaceContext.publicApiKey)
+                }
+            } : {})).then(function() {
+                var _ref = _async_to_generator(function(response) {
+                    var errorResponse, error;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                if (!(response.status !== 200)) return [
+                                    3,
+                                    4
+                                ];
+                                _state.label = 1;
+                            case 1:
+                                _state.trys.push([
+                                    1,
+                                    3,
+                                    ,
+                                    4
+                                ]);
+                                return [
+                                    4,
+                                    response.json()
+                                ];
+                            case 2:
+                                errorResponse = _state.sent();
+                                throw new Error(errorResponse.error);
+                            case 3:
+                                error = _state.sent();
+                                throw new Error("Failed to fetch");
+                            case 4:
+                                return [
+                                    2,
+                                    response.json()
+                                ];
+                        }
+                    });
+                });
+                return function(response) {
+                    return _ref.apply(this, arguments);
+                };
+            }());
+        }
+    }, queryClient.getMutationDefaults(mutationKey)), {
+        mutationKey: mutationKey
+    }), threadContext.defaultOptions.mutations);
 };
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ToolCall = function(param) {
-    var toolCall = param.toolCall, runStep = param.runStep;
-    if (toolCall.type === "function") {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Fn, {
-            fn: toolCall.function,
-            runStep: runStep
+// src/hooks/runs/useCreateRun/lib/onSuccess.ts
+var onSuccess = function(param) {
+    var queryClient = param.queryClient;
+    return function() {
+        var _ref = _async_to_generator(function(data3, variables) {
+            return _ts_generator(this, function(_state) {
+                return [
+                    2,
+                    queryClient.setQueryData([
+                        "runs",
+                        variables
+                    ], function(prevData) {
+                        if (!prevData) {
+                            return {
+                                pageParams: [],
+                                pages: [
+                                    {
+                                        data: [
+                                            data3.run
+                                        ],
+                                        hasNextPage: false,
+                                        lastId: data3.run.id
+                                    }
+                                ]
+                            };
+                        }
+                        var _prevData_pages = _to_array(prevData.pages), latestPage = _prevData_pages[0], pagesRest = _prevData_pages.slice(1);
+                        return _object_spread_props(_object_spread({}, prevData), {
+                            pages: [
+                                _object_spread_props(_object_spread({}, latestPage), {
+                                    data: [
+                                        data3.run
+                                    ].concat(_to_consumable_array(latestPage.data))
+                                })
+                            ].concat(_to_consumable_array(pagesRest))
+                        });
+                    })
+                ];
+            });
         });
-    }
-    if (toolCall.type === "code_interpreter") {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CodeInterpreter, {
-            codeInterpreter: toolCall.code_interpreter,
-            runStep: runStep
+        return function(data3, variables) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+};
+// src/hooks/runs/useCreateRun/lib/onSettled.ts
+var onSettled = function(param) {
+    var queryClient = param.queryClient;
+    return function() {
+        var _ref = _async_to_generator(function(_data, _error, variables) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            queryClient.invalidateQueries({
+                                queryKey: [
+                                    "messages",
+                                    variables
+                                ]
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            4,
+                            queryClient.invalidateQueries({
+                                queryKey: [
+                                    "runs",
+                                    variables
+                                ]
+                            })
+                        ];
+                    case 2:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
         });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes12.Flex, {
-        children: toolCall.type
-    });
+        return function(_data, _error, variables) {
+            return _ref.apply(this, arguments);
+        };
+    }();
 };
-// src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-var import_themes13 = require("@radix-ui/themes");
-var import_react_icons3 = require("@radix-ui/react-icons");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Starting = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes13.PopoverRoot, {
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ToolCallBase, {
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons3.CircleIcon, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToolCallTitle, {
-                        children: "Starting actions"
-                    })
-                ]
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.PopoverContent, {
-                style: {
-                    maxHeight: "500px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Text, {
-                    children: "Getting ready to connect to domain API"
-                })
-            })
-        ]
-    });
+// src/lib/optimistic/optimisticId.ts
+var import_radash3 = require("radash");
+var optimisticId = function() {
+    return "-".concat((0, import_radash3.uid)(24));
 };
-// src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ToolCalls = function(param) {
-    var stepDetails = param.stepDetails, runStep = param.runStep;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.Flex, {
-        direction: "column",
-        children: [
-            !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Starting, {}),
-            stepDetails.tool_calls.map(function(toolCall) {
-                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCall, {
-                    toolCall: toolCall,
-                    runStep: runStep
-                }, toolCall.id);
+// src/hooks/runs/useCreateRun/lib/onMutate/data.ts
+var data = function(prevData) {
+    var run = {
+        id: optimisticId(),
+        object: "thread.run",
+        created_at: +/* @__PURE__ */ new Date(),
+        assistant_id: null,
+        thread_id: null,
+        status: "in_progress",
+        expires_at: +/* @__PURE__ */ new Date() + 1e3 * 60 * 60 * 24,
+        cancelled_at: null,
+        failed_at: null,
+        completed_at: null,
+        required_action: null,
+        last_error: null,
+        model: null,
+        instructions: null,
+        tools: [],
+        file_ids: [],
+        metadata: {},
+        usage: null
+    };
+    if (!prevData) {
+        return {
+            pageParams: [],
+            pages: [
+                {
+                    data: [
+                        run
+                    ],
+                    hasNextPage: false,
+                    lastId: run.id
+                }
+            ]
+        };
+    }
+    var _prevData_pages = _to_array(prevData.pages), latestPage = _prevData_pages[0], pagesRest = _prevData_pages.slice(1);
+    return _object_spread_props(_object_spread({}, prevData), {
+        pages: [
+            _object_spread_props(_object_spread({}, latestPage), {
+                data: [
+                    run
+                ].concat(_to_consumable_array(latestPage.data))
             })
-        ]
+        ].concat(_to_consumable_array(pagesRest))
     });
 };
-// src/components/runSteps/RunStep/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var RunStep = function(param) {
-    var runStep = param.runStep;
-    if (runStep.step_details.type === "tool_calls") {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToolCalls, {
-            stepDetails: runStep.step_details,
-            runStep: runStep
+// src/hooks/runs/useCreateRun/lib/onMutate/index.ts
+var onMutate = function(param) {
+    var queryClient = param.queryClient;
+    return function() {
+        var _ref = _async_to_generator(function(variables) {
+            var queryKey, prevRuns;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        queryKey = [
+                            "runs",
+                            variables
+                        ];
+                        return [
+                            4,
+                            queryClient.cancelQueries({
+                                queryKey: queryKey
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        prevRuns = queryClient.getQueryData(queryKey);
+                        queryClient.setQueryData(queryKey, data);
+                        return [
+                            2,
+                            {
+                                prevRuns: prevRuns,
+                                variables: variables
+                            }
+                        ];
+                }
+            });
         });
-    }
-    return null;
+        return function(variables) {
+            return _ref.apply(this, arguments);
+        };
+    }();
 };
-// src/components/runSteps/RunSteps/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var RunSteps = function(param) {
-    var runSteps = param.runSteps;
-    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, {
-                runStep: runStep
-            }, runStep.id);
+// src/hooks/runs/useCreateRun/index.ts
+var useCreateRun = function() {
+    var queryClient = (0, import_react_query5.useQueryClient)();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var threadContext = useSuperinterfaceContext();
+    var props = (0, import_react_query5.useMutation)(_object_spread({
+        onSuccess: onSuccess({
+            queryClient: queryClient
+        }),
+        onSettled: onSettled({
+            queryClient: queryClient
+        }),
+        onMutate: onMutate({
+            queryClient: queryClient
         })
+    }, mutationOptions({
+        mutationKeyBase: [
+            "createRun"
+        ],
+        path: "/runs",
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    })));
+    return _object_spread_props(_object_spread({}, props), {
+        createRun: (0, import_radash4.partob)(props.mutate, threadContext.variables)
     });
 };
-// src/components/ThreadMessages/ThreadMessage/TextContent/index.tsx
-var import_react22 = require("react");
-var import_react_remark = require("react-remark");
-// src/contexts/markdown/MarkdownContext/index.ts
-var import_react21 = 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");
-var Paragraph = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes16.Box, {
-        pb: "3",
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes16.Text, {
-            size: "3",
-            style: {
-                whiteSpace: "pre-line",
-                wordBreak: "break-word"
-            },
-            children: children
-        })
-    });
+// src/lib/optimistic/isOptimistic.ts
+var import_lodash6 = __toESM(require("lodash"), 1);
+var isOptimistic = function(param) {
+    var id = param.id;
+    return import_lodash6.default.startsWith(id, "-");
 };
-// src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
-var import_themes17 = require("@radix-ui/themes");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Link = function(param) {
-    var children = param.children, href = param.href;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes17.Link, {
-        href: href,
-        children: children
-    });
+// src/hooks/runs/useManageRuns/index.tsx
+var useManageRuns = function() {
+    var queryClient = (0, import_react_query6.useQueryClient)();
+    var latestRunProps = useLatestRun();
+    var latestMessageProps = useLatestMessage();
+    var createRunProps = useCreateRun();
+    var threadContext = useSuperinterfaceContext();
+    (0, import_react24.useEffect)(function() {
+        if (createRunProps.isPending) return;
+        if (latestRunProps.isFetching) return;
+        if (latestMessageProps.isFetching) return;
+        if (!latestMessageProps.latestMessage) return;
+        if (latestMessageProps.latestMessage.role !== "user") return;
+        if (isOptimistic({
+            id: latestMessageProps.latestMessage.id
+        })) return;
+        if (latestRunProps.latestRun && latestRunProps.latestRun.created_at > latestMessageProps.latestMessage.created_at) {
+            return;
+        }
+        var isMutating = queryClient.isMutating({
+            mutationKey: [
+                "createRun",
+                threadContext.variables
+            ]
+        });
+        if (isMutating) return;
+        createRunProps.createRun();
+    }, [
+        threadContext,
+        queryClient,
+        createRunProps,
+        latestRunProps,
+        latestMessageProps
+    ]);
+    return null;
 };
-// src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
-var import_themes18 = require("@radix-ui/themes");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var UnorderedList = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes18.Box, {
-        pb: "3",
-        asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", {
-            style: {
-                listStylePosition: "inside"
-            },
-            children: children
-        })
+// src/hooks/runs/usePolling/index.tsx
+var import_react_query7 = require("@tanstack/react-query");
+var import_react_use = require("react-use");
+// src/hooks/runs/usePolling/lib/refetch.ts
+var refetch = function() {
+    var _ref = _async_to_generator(function(param) {
+        var queryClient, threadContext, _threadContext_defaultOptions_queries_queryKey, _threadContext_defaultOptions_queries_queryKey1;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    queryClient = param.queryClient, threadContext = param.threadContext;
+                    return [
+                        4,
+                        queryClient.invalidateQueries({
+                            queryKey: (_threadContext_defaultOptions_queries_queryKey = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey !== void 0 ? _threadContext_defaultOptions_queries_queryKey : [
+                                "messages",
+                                threadContext.variables
+                            ]
+                        })
+                    ];
+                case 1:
+                    _state.sent();
+                    return [
+                        4,
+                        queryClient.invalidateQueries({
+                            queryKey: (_threadContext_defaultOptions_queries_queryKey1 = threadContext.defaultOptions.queries.queryKey) !== null && _threadContext_defaultOptions_queries_queryKey1 !== void 0 ? _threadContext_defaultOptions_queries_queryKey1 : [
+                                "runs",
+                                threadContext.variables
+                            ]
+                        })
+                    ];
+                case 2:
+                    _state.sent();
+                    return [
+                        2
+                    ];
+            }
+        });
     });
+    return function refetch(_) {
+        return _ref.apply(this, arguments);
+    };
+}();
+// src/hooks/runs/usePolling/index.tsx
+var usePolling = function() {
+    var threadContext = useSuperinterfaceContext();
+    var queryClient = (0, import_react_query7.useQueryClient)();
+    var isRunActiveProps = useIsRunActive();
+    (0, import_react_use.useInterval)(function() {
+        refetch({
+            queryClient: queryClient,
+            threadContext: threadContext
+        });
+        console.log("poll refetched");
+    }, isRunActiveProps.isRunActive ? 3e3 : null);
+    return null;
 };
-// src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
-var import_themes19 = require("@radix-ui/themes");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var OrderedList = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Box, {
-        pb: "3",
-        asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ol", {
-            style: {
-                listStylePosition: "inside"
-            },
-            children: children
-        })
-    });
+// src/hooks/actions/useManageActions/index.tsx
+var import_react_query9 = require("@tanstack/react-query");
+var import_react25 = require("react");
+// src/hooks/actions/useHandleAction/index.tsx
+var import_radash5 = require("radash");
+var import_react_query8 = require("@tanstack/react-query");
+// src/hooks/actions/useHandleAction/lib/onSettled.ts
+var onSettled2 = function(param) {
+    var queryClient = param.queryClient;
+    return function() {
+        var _ref = _async_to_generator(function(_data, _error, variables) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            queryClient.invalidateQueries({
+                                queryKey: [
+                                    "messages",
+                                    variables
+                                ]
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            4,
+                            queryClient.invalidateQueries({
+                                queryKey: [
+                                    "runs",
+                                    variables
+                                ]
+                            })
+                        ];
+                    case 2:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function(_data, _error, variables) {
+            return _ref.apply(this, arguments);
+        };
+    }();
 };
-// src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
-var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var ListItem = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes20.Box, {
-        pb: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", {
-            children: children
+// src/hooks/actions/useHandleAction/index.tsx
+var useHandleAction = function() {
+    var queryClient = (0, import_react_query8.useQueryClient)();
+    var superinterfaceContext = useSuperinterfaceContext();
+    var threadContext = useSuperinterfaceContext();
+    var props = (0, import_react_query8.useMutation)(_object_spread({
+        onSettled: onSettled2({
+            queryClient: queryClient
         })
+    }, mutationOptions({
+        mutationKeyBase: [
+            "handleAction"
+        ],
+        path: "/actions",
+        queryClient: queryClient,
+        threadContext: threadContext,
+        superinterfaceContext: superinterfaceContext
+    })));
+    return _object_spread_props(_object_spread({}, props), {
+        handleAction: (0, import_radash5.partob)(props.mutate, threadContext.variables)
     });
 };
-// src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Strong = function(param) {
-    var children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes21.Strong, {
-        children: children
-    });
-};
-// src/contexts/markdown/MarkdownContext/lib/components/index.tsx
-var components = {
-    p: Paragraph,
-    a: Link,
-    strong: Strong,
-    ul: UnorderedList,
-    ol: OrderedList,
-    li: ListItem
-};
-// src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react21.createContext)({
-    remarkPlugins: [],
-    rehypeReactOptions: {
-        components: components
-    }
-});
-// src/components/ThreadMessages/ThreadMessage/TextContent/index.tsx
-var TextContent = function(param) {
-    var content = param.content;
-    var markdownContext = (0, import_react22.useContext)(MarkdownContext);
-    return (0, import_react_remark.useRemarkSync)(content.text.value, markdownContext);
-};
-// src/components/ThreadMessages/ThreadMessage/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var ThreadMessage = function(param) {
-    var threadMessage = param.threadMessage;
-    var _ref = _sliced_to_array((0, import_react23.useMemo)(function() {
-        if (!threadMessage.runSteps.length) return [
-            [],
-            []
-        ];
-        var messageCreationRunStepIndex = threadMessage.runSteps.findIndex(function(runStep) {
-            if (runStep.step_details.type !== "message_creation") return;
-            return runStep.step_details.message_creation.message_id === threadMessage.id;
+// src/hooks/actions/useManageActions/index.tsx
+var useManageActions = function() {
+    var queryClient = (0, import_react_query9.useQueryClient)();
+    var threadContext = useSuperinterfaceContext();
+    var latestRunProps = useLatestRun();
+    var handleActionProps = useHandleAction();
+    (0, import_react25.useEffect)(function() {
+        if (handleActionProps.isPending) return;
+        if (latestRunProps.isFetching) return;
+        if (!latestRunProps.latestRun) return;
+        if (latestRunProps.latestRun.status !== "requires_action") return;
+        var isMutating = queryClient.isMutating({
+            mutationKey: [
+                "handleAction",
+                threadContext.variables
+            ]
         });
-        var nextRunStepIndex = threadMessage.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex(function(runStep) {
-            return runStep.step_details.type === "message_creation";
+        if (isMutating) return;
+        console.log("requires action", {
+            latestRunProps: latestRunProps
         });
-        if (nextRunStepIndex === -1) {
-            nextRunStepIndex = 0;
-        }
-        var laterRunSteps2 = threadMessage.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex);
-        var prevRunStepIndex = threadMessage.runSteps.slice(messageCreationRunStepIndex + 1).findIndex(function(runStep) {
-            return runStep.step_details.type === "message_creation";
+        handleActionProps.handleAction({
+            latestRun: latestRunProps.latestRun
         });
-        var olderRunSteps2;
-        if (prevRunStepIndex === -1) {
-            olderRunSteps2 = threadMessage.runSteps.slice(messageCreationRunStepIndex + 1);
-        } else {
-            olderRunSteps2 = threadMessage.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex);
-        }
-        return [
-            olderRunSteps2,
-            laterRunSteps2
-        ];
     }, [
-        threadMessage
-    ]), 2), olderRunSteps = _ref[0], laterRunSteps = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes22.Box, {
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RunSteps, {
-                runSteps: olderRunSteps
-            }),
-            threadMessage.content.map(function(content, index) {
-                return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes22.Box, {
-                    children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextContent, {
-                        content: content
-                    })
-                }, index);
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RunSteps, {
-                runSteps: laterRunSteps
-            })
-        ]
-    });
-};
-// src/components/threadMessages/ThreadMessages/Content/ThreadMessageGroup/Content/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Content2 = function(param) {
-    var threadMessageGroup = param.threadMessageGroup;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes23.Flex, {
-        direction: "column-reverse",
-        children: threadMessageGroup.threadMessages.map(function(threadMessage) {
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThreadMessage, {
-                threadMessage: threadMessage
-            }, threadMessage.id);
-        })
-    });
-};
-// src/components/threadMessages/ThreadMessages/Content/ThreadMessageGroup/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var ThreadMessageGroup = function(param) {
-    var threadMessageGroup = param.threadMessageGroup;
-    var assistantNameContext = (0, import_react24.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ThreadMessagesGroupBase, {
-        children: [
-            threadMessageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_themes24.Avatar, {
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons4.PersonIcon, {}),
-                size: "1"
-            }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_themes24.Box, {
-                grow: "1",
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Name, {
-                        children: threadMessageGroup.role === "user" ? "You" : assistantNameContext
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Content2, {
-                        threadMessageGroup: threadMessageGroup
-                    })
-                ]
-            })
-        ]
-    });
-};
-// src/components/threadMessages/ThreadMessages/Content/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Content3 = function(param) {
-    var threadMessages2 = param.threadMessages, isLoading = param.isLoading, isLoadingError = param.isLoadingError;
-    var _useThreadMessageGroups = useThreadMessageGroups({
-        threadMessages: threadMessages2
-    }), threadMessageGroups2 = _useThreadMessageGroups.threadMessageGroups;
-    if (isLoading || isLoadingError) {
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThreadMessagesSkeleton, {});
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, {
-        children: threadMessageGroups2.map(function(threadMessageGroup) {
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThreadMessageGroup, {
-                threadMessageGroup: threadMessageGroup
-            }, threadMessageGroup.id);
-        })
-    });
-};
-// src/components/threadMessages/ThreadMessages/Progress/index.tsx
-var import_themes27 = require("@radix-ui/themes");
-// src/components/skeletons/StartingContentSkeleton/index.tsx
-var import_themes25 = require("@radix-ui/themes");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var StartingContentSkeleton = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_themes25.Box, {
-        shrink: "0",
-        mt: "1",
-        style: {
-            animation: "pulse 2s cubic-bezier(.4,0,.6,1) infinite",
-            borderRadius: "var(--radius-3)",
-            backgroundColor: "var(--gray-12)",
-            height: "var(--space-4)",
-            width: "var(--space-4)"
-        }
-    });
-};
-// src/components/skeletons/StartingSkeleton/index.tsx
-var import_react25 = require("react");
-var import_themes26 = require("@radix-ui/themes");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var StartingSkeleton = function(param) {
-    var children = param.children;
-    var assistantNameContext = (0, import_react25.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ThreadMessagesGroupBase, {
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AssistantAvatar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_themes26.Box, {
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Name, {
-                        children: assistantNameContext
-                    }),
-                    children,
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StartingContentSkeleton, {})
-                ]
-            })
-        ]
-    });
+        handleActionProps,
+        latestRunProps
+    ]);
+    return null;
 };
-// src/components/threadMessages/ThreadMessages/Progress/index.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var Progress = function(param) {
-    var latestThreadMessage = param.latestThreadMessage, isRunActive2 = param.isRunActive;
-    if (!latestThreadMessage) return null;
-    if (!isRunActive2) return null;
-    if (latestThreadMessage.role === "user") {
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingSkeleton, {});
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ThreadMessagesGroupBase, {
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes27.Box, {
-                pl: "5"
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
-        ]
-    });
+// src/hooks/threads/useLifecycle/index.tsx
+var useLifecycle = function() {
+    useManageRuns();
+    useManageActions();
+    usePolling();
+    return null;
 };
-// src/components/threadMessages/ThreadMessages/index.tsx
+// src/components/threads/Thread/Messages/Root/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var ThreadMessages = function(param) {
+var Root = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    var _useThreadMessages = useThreadMessages(), threadMessages2 = _useThreadMessages.threadMessages, isFetchingNextPage = _useThreadMessages.isFetchingNextPage, hasNextPage = _useThreadMessages.hasNextPage, fetchNextPage = _useThreadMessages.fetchNextPage, isLoading = _useThreadMessages.isLoading, isLoadingError = _useThreadMessages.isLoadingError;
-    useThreadLifecycles();
+    var _useMessages = useMessages(), isFetchingNextPage = _useMessages.isFetchingNextPage, hasNextPage = _useMessages.hasNextPage, fetchNextPage = _useMessages.fetchNextPage;
+    useLifecycle();
     var _useInfiniteScroll = useInfiniteScroll({
         isFetchingNextPage: isFetchingNextPage,
         hasNextPage: hasNextPage,
         fetchNextPage: fetchNextPage
     }), containerRef = _useInfiniteScroll.containerRef, loaderRef = _useInfiniteScroll.loaderRef;
-    var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
-    var latestThreadMessage = useLatestThreadMessage().latestThreadMessage;
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_themes28.Flex, {
         ref: containerRef,
         direction: "column-reverse",
-        grow: "1",
+        flexGrow: "1",
         style: _object_spread_props(_object_spread({}, style), {
             overflow: "auto"
         }),
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes28.Flex, {
-                shrink: "0",
-                style: {
-                    height: "var(--space-3)"
-                }
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Progress, {
-                latestThreadMessage: latestThreadMessage,
-                isRunActive: isRunActive2
-            }),
             children,
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Content3, {
-                threadMessages: threadMessages2,
-                isLoading: isLoading,
-                isLoadingError: isLoadingError
-            }),
-            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThreadMessagesSkeleton, {
+            hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes28.Flex, {
                 ref: loaderRef
             }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_themes28.Flex, {
-                shrink: "0",
-                grow: "1"
+                flexShrink: "0",
+                flexGrow: "1"
+            })
+        ]
+    });
+};
+// src/components/threads/Thread/Messages/NextPageSkeleton.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var NextPageSkeleton = function() {
+    var hasNextPage = useMessages().hasNextPage;
+    if (!hasNextPage) {
+        return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MessagesSkeleton, {});
+};
+// src/components/threads/Thread/Messages/index.tsx
+var import_jsx_runtime36 = 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_runtime36.jsxs)(Root, {
+        style: style,
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes29.Flex, {
+                flexShrink: "0",
+                height: "var(--space-3)"
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Progress, {}),
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Content3, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NextPageSkeleton, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_themes29.Flex, {
+                flexShrink: "0",
+                flexGrow: "1"
             })
         ]
     });
 };
-// src/components/threadMessages/ThreadMessageForm/index.tsx
-var import_themes30 = require("@radix-ui/themes");
+Messages.Root = Root;
+Messages.Message = Message;
+Messages.NextPageSkeleton = NextPageSkeleton;
+// src/components/threads/Thread/MessageForm/index.tsx
+var import_themes32 = require("@radix-ui/themes");
+// src/components/threads/Thread/MessageForm/Submit/index.tsx
+var import_react_icons5 = require("@radix-ui/react-icons");
+var import_themes30 = require("@radix-ui/themes");
+// src/components/spinners/Spinner/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Spinner = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: {
+            height: "var(--space-4)",
+            width: "var(--space-4)",
+            animation: "spin 1s linear infinite"
+        }
+    }, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", {
+            d: "M21 12a9 9 0 1 1-6.219-8.56"
+        })
+    }));
+};
+// src/hooks/messages/useMessageFormContext/index.ts
 var import_react27 = require("react");
-var import_react_hook_form = require("react-hook-form");
-var import_react_use2 = require("react-use");
-// src/components/textareas/TextareaBase/index.tsx
+// src/contexts/messages/MessageFormContext/index.ts
 var import_react26 = require("react");
-var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var UPSCALE_RATIO = 16 / 14;
-var TextareaBase = (0, import_react26.forwardRef)(function TextareaBase2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_textarea_autosize.default, _object_spread({
-        ref: ref,
-        className: "textarea-base",
-        style: {
-            resize: "none",
-            fontSize: "".concat(14 * UPSCALE_RATIO, "px"),
-            lineHeight: "".concat(24 * UPSCALE_RATIO, "px"),
-            transform: "scale(".concat(1 / UPSCALE_RATIO, ")"),
-            margin: "0 ".concat((-100 * UPSCALE_RATIO + 100) / 2, "%"),
-            width: "".concat(100 * UPSCALE_RATIO, "%"),
-            maxWidth: "".concat(100 * UPSCALE_RATIO, "%"),
-            flexGrow: 1,
-            display: "flex"
-        }
-    }, props));
+var MessageFormContext = (0, import_react26.createContext)({
+    isDisabled: false,
+    isLoading: false
 });
-// src/hooks/threadMessages/useCreateThreadMessage/index.ts
+// src/hooks/messages/useMessageFormContext/index.ts
+var useMessageFormContext = function() {
+    return (0, import_react27.useContext)(MessageFormContext);
+};
+// src/components/threads/Thread/MessageForm/Submit/index.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Submit = function() {
+    var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Button, {
+        type: "submit",
+        radius: "large",
+        disabled: isDisabled,
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_icons5.ArrowUpIcon, {})
+    });
+};
+// src/components/threads/Thread/MessageForm/Root/index.tsx
+var import_react28 = require("react");
+var import_react_hook_form = require("react-hook-form");
+// src/hooks/messages/useCreateMessage/index.ts
 var import_radash8 = require("radash");
 var import_react_query10 = require("@tanstack/react-query");
-// src/hooks/threadMessages/useCreateThreadMessage/lib/mutationOptions/onMutate/index.ts
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts
 var import_radash6 = require("radash");
-// src/hooks/threadMessages/useCreateThreadMessage/lib/mutationOptions/onMutate/data.ts
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/data.ts
 var data2 = function(param) {
-    var newThreadMessage = param.newThreadMessage;
+    var newMessage = param.newMessage;
     return function(prevData) {
         var message = {
             id: optimisticId(),
@@ -2094,7 +2139,7 @@ var data2 = function(param) {
                     type: "text",
                     text: {
                         annotations: [],
-                        value: newThreadMessage.content
+                        value: newMessage.content
                     }
                 }
             ],
@@ -2131,18 +2176,18 @@ var data2 = function(param) {
         });
     };
 };
-// src/hooks/threadMessages/useCreateThreadMessage/lib/mutationOptions/onMutate/index.ts
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts
 var onMutate2 = function(param) {
     var queryClient = param.queryClient;
     return function() {
-        var _ref = _async_to_generator(function(newThreadMessage) {
-            var queryKey, prevThreadMessages;
+        var _ref = _async_to_generator(function(newMessage) {
+            var queryKey, prevMessages;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
                         queryKey = [
-                            "threadMessages",
-                            (0, import_radash6.omit)(newThreadMessage, [
+                            "messages",
+                            (0, import_radash6.omit)(newMessage, [
                                 "content"
                             ])
                         ];
@@ -2154,26 +2199,26 @@ var onMutate2 = function(param) {
                         ];
                     case 1:
                         _state.sent();
-                        prevThreadMessages = queryClient.getQueryData(queryKey);
+                        prevMessages = queryClient.getQueryData(queryKey);
                         queryClient.setQueryData(queryKey, data2({
-                            newThreadMessage: newThreadMessage
+                            newMessage: newMessage
                         }));
                         return [
                             2,
                             {
-                                prevThreadMessages: prevThreadMessages,
-                                newThreadMessage: newThreadMessage
+                                prevMessages: prevMessages,
+                                newMessage: newMessage
                             }
                         ];
                 }
             });
         });
-        return function(newThreadMessage) {
+        return function(newMessage) {
             return _ref.apply(this, arguments);
         };
     }();
 };
-// src/hooks/threadMessages/useCreateThreadMessage/lib/mutationOptions/onSettled.ts
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onSettled.ts
 var import_radash7 = require("radash");
 var onSettled3 = function(param) {
     var queryClient = param.queryClient;
@@ -2186,7 +2231,7 @@ var onSettled3 = function(param) {
                             4,
                             queryClient.invalidateQueries({
                                 queryKey: [
-                                    "threadMessages",
+                                    "messages",
                                     (0, import_radash7.omit)(variables, [
                                         "content"
                                     ])
@@ -2219,8 +2264,8 @@ var onSettled3 = function(param) {
         };
     }();
 };
-// src/hooks/threadMessages/useCreateThreadMessage/index.ts
-var useCreateThreadMessage = function() {
+// src/hooks/messages/useCreateMessage/index.ts
+var useCreateMessage = function() {
     var queryClient = (0, import_react_query10.useQueryClient)();
     var superinterfaceContext = useSuperinterfaceContext();
     var threadContext = useSuperinterfaceContext();
@@ -2233,77 +2278,40 @@ var useCreateThreadMessage = function() {
         })
     }, mutationOptions({
         mutationKeyBase: [
-            "createThreadMessage"
+            "createMessage"
         ],
-        path: "/thread-messages",
+        path: "/messages",
         queryClient: queryClient,
         threadContext: threadContext,
         superinterfaceContext: superinterfaceContext
     })));
     return _object_spread_props(_object_spread({}, props), {
-        createThreadMessage: (0, import_radash8.partob)(props.mutateAsync, threadContext.variables)
-    });
-};
-// src/components/threadMessages/ThreadMessageForm/Submit/index.tsx
-var import_react_icons5 = require("@radix-ui/react-icons");
-var import_themes29 = require("@radix-ui/themes");
-// src/components/spinners/Spinner/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var Spinner = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", _object_spread_props(_object_spread({
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        style: {
-            height: "var(--space-4)",
-            width: "var(--space-4)",
-            animation: "spin 1s linear infinite"
-        }
-    }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", {
-            d: "M21 12a9 9 0 1 1-6.219-8.56"
-        })
-    }));
-};
-// src/components/threadMessages/ThreadMessageForm/Submit/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Submit = function(param) {
-    var isLoading = param.isLoading, isDisabled = param.isDisabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_themes29.Button, {
-        type: "submit",
-        radius: "large",
-        disabled: isDisabled,
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_icons5.ArrowUpIcon, {})
+        createMessage: (0, import_radash8.partob)(props.mutateAsync, threadContext.variables)
     });
 };
-// src/components/threadMessages/ThreadMessageForm/lib/useFormProps/index.ts
+// src/components/threads/Thread/MessageForm/Root/lib/formOptions.ts
 var import_zod = require("zod");
 var import_zod2 = require("@hookform/resolvers/zod");
 var schema = import_zod.z.object({
     content: import_zod.z.string().min(1)
 });
-var useFormProps = {
+var formOptions = {
     resolver: (0, import_zod2.zodResolver)(schema)
 };
-// src/components/threadMessages/ThreadMessageForm/index.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ThreadMessageForm = function() {
-    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, children = _ref.children, tmp = _ref.useFormProps, useFormProps2 = tmp === void 0 ? useFormProps : tmp, _ref_style = _ref.style, style = _ref_style === void 0 ? {} : _ref_style;
-    var _ref1 = (0, import_react_hook_form.useForm)(useFormProps2), register = _ref1.register, handleSubmit = _ref1.handleSubmit, _ref_formState = _ref1.formState, errors = _ref_formState.errors, isSubmitting = _ref_formState.isSubmitting, reset = _ref1.reset;
+// src/components/threads/Thread/MessageForm/Root/index.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Root2 = 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;
     var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
-    var isLoading = (0, import_react27.useMemo)(function() {
+    var isLoading = (0, import_react28.useMemo)(function() {
         return isRunActive2 || isSubmitting;
     }, [
         isRunActive2,
         isSubmitting
     ]);
-    var createThreadMessage = useCreateThreadMessage().createThreadMessage;
+    var createMessage = useCreateMessage().createMessage;
     var onSubmit = function() {
         var _ref = _async_to_generator(function(data3) {
             return _ts_generator(this, function(_state) {
@@ -2312,7 +2320,7 @@ var ThreadMessageForm = function() {
                         reset();
                         return [
                             4,
-                            createThreadMessage({
+                            createMessage({
                                 content: data3.content
                             })
                         ];
@@ -2328,25 +2336,100 @@ var ThreadMessageForm = function() {
             return _ref.apply(this, arguments);
         };
     }();
-    var latestThreadMessage = useLatestThreadMessage().latestThreadMessage;
-    var isDisabled = (0, import_react27.useMemo)(function() {
+    var latestMessage = useLatestMessage().latestMessage;
+    var isDisabled = (0, import_react28.useMemo)(function() {
         var // @ts-ignore-next-line
-        _latestThreadMessage_metadata;
-        return latestThreadMessage === null || latestThreadMessage === void 0 ? void 0 : (_latestThreadMessage_metadata = latestThreadMessage.metadata) === null || _latestThreadMessage_metadata === void 0 ? void 0 : _latestThreadMessage_metadata.isBlocking;
+        _latestMessage_metadata;
+        return latestMessage === null || latestMessage === void 0 ? void 0 : (_latestMessage_metadata = latestMessage.metadata) === null || _latestMessage_metadata === void 0 ? void 0 : _latestMessage_metadata.isBlocking;
     }, [
-        latestThreadMessage,
+        latestMessage,
         isLoading
     ]);
-    var isSubmitDisabled = (0, import_react27.useMemo)(function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MessageFormContext.Provider, {
+        value: {
+            isDisabled: isDisabled,
+            isLoading: isLoading
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_hook_form.FormProvider, _object_spread_props(_object_spread({}, formProps), {
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("form", {
+                onSubmit: handleSubmit(onSubmit),
+                children: children
+            })
+        }))
+    });
+};
+// src/components/threads/Thread/MessageForm/Field/index.tsx
+var import_react_use2 = require("react-use");
+var import_react30 = require("react");
+// src/components/textareas/TextareaBase/index.tsx
+var import_react29 = require("react");
+var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var UPSCALE_RATIO = 16 / 14;
+var TextareaBase = (0, import_react29.forwardRef)(function TextareaBase2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_textarea_autosize.default, _object_spread({
+        ref: ref,
+        className: "textarea-base",
+        style: {
+            resize: "none",
+            fontSize: "".concat(14 * UPSCALE_RATIO, "px"),
+            lineHeight: "".concat(24 * UPSCALE_RATIO, "px"),
+            transform: "scale(".concat(1 / UPSCALE_RATIO, ")"),
+            margin: "0 ".concat((-100 * UPSCALE_RATIO + 100) / 2, "%"),
+            width: "".concat(100 * UPSCALE_RATIO, "%"),
+            maxWidth: "".concat(100 * UPSCALE_RATIO, "%"),
+            flexGrow: 1,
+            display: "flex"
+        }
+    }, props));
+});
+// src/components/threads/Thread/MessageForm/Field/index.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_themes31 = require("@radix-ui/themes");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Root3 = function(param) {
+    var children = param.children;
+    var _ref = (0, import_react_hook_form2.useFormContext)(), errors = _ref.formState.errors;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes31.Container, {
+        size: "2",
+        flexGrow: "0",
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes31.Flex, {
+            direction: "column",
+            flexShrink: "0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes31.Flex, {
+                direction: "column",
+                flexShrink: "0",
+                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes31.Flex, {
+                    style: _object_spread({
+                        borderRadius: "var(--radius-2)",
+                        borderWidth: "1px",
+                        borderStyle: "solid",
+                        borderColor: errors.content ? "var(--red-9)" : "var(--gray-5)"
+                    }, errors.content ? {
+                        backgroundColor: "var(--red-2)"
+                    } : {}),
+                    p: "2",
+                    pl: "4",
+                    children: children
+                })
+            })
+        })
+    });
+};
+var Control = function() {
+    var assistantNameContext = (0, import_react30.useContext)(AssistantNameContext);
+    var register = (0, import_react_hook_form2.useFormContext)().register;
+    var _useMessageFormContext = useMessageFormContext(), isDisabled = _useMessageFormContext.isDisabled, isLoading = _useMessageFormContext.isLoading;
+    var isSubmitDisabled = (0, import_react30.useMemo)(function() {
         return isDisabled || isLoading;
     }, [
         isDisabled,
         isLoading
     ]);
     var isDisabledPrevious = (0, import_react_use2.usePrevious)(isDisabled);
-    var textareaRef = (0, import_react27.useRef)(null);
+    var textareaRef = (0, import_react30.useRef)(null);
     var textareaProps = register("content");
-    (0, import_react27.useEffect)(function() {
+    (0, import_react30.useEffect)(function() {
         if (isDisabled) return;
         if (!isDisabledPrevious) return;
         if (!textareaRef.current) return;
@@ -2356,123 +2439,108 @@ var ThreadMessageForm = function() {
         isDisabledPrevious,
         textareaProps
     ]);
-    var assistantNameContext = (0, import_react27.useContext)(AssistantNameContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes30.Container, {
-        size: "2",
-        grow: "0",
-        style: style,
-        children: [
-            children,
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Flex, {
-                direction: "column",
-                shrink: "0",
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Flex, {
-                    direction: "column",
-                    shrink: "0",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("form", {
-                        onSubmit: handleSubmit(onSubmit),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_themes30.Flex, {
-                            style: _object_spread({
-                                borderRadius: "var(--radius-2)",
-                                borderWidth: "1px",
-                                borderStyle: "solid",
-                                borderColor: errors.content ? "var(--red-9)" : "var(--gray-5)"
-                            }, errors.content ? {
-                                backgroundColor: "var(--red-2)"
-                            } : {}),
-                            p: "2",
-                            pl: "4",
-                            children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Text, {
-                                    size: "2",
-                                    style: {
-                                        flexGrow: 1
-                                    },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Flex, {
-                                        grow: "1",
-                                        direction: "column",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextareaBase, _object_spread_props(_object_spread({
-                                            minRows: 1,
-                                            placeholder: "Message ".concat(assistantNameContext, "..."),
-                                            disabled: isDisabled,
-                                            onKeyDown: function(e) {
-                                                if (e.key === "Enter" && !e.shiftKey) {
-                                                    e.preventDefault();
-                                                    if (isSubmitDisabled) return;
-                                                    handleSubmit(onSubmit)();
-                                                }
-                                            },
-                                            autoFocus: true
-                                        }, textareaProps), {
-                                            ref: function(e) {
-                                                textareaProps.ref(e);
-                                                textareaRef.current = e;
-                                            }
-                                        }))
-                                    })
-                                }),
-                                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_themes30.Flex, {
-                                    shrink: "0",
-                                    align: "end",
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Submit, {
-                                        isLoading: isLoading,
-                                        isDisabled: isSubmitDisabled
-                                    })
-                                })
-                            ]
-                        })
-                    })
-                })
-            })
-        ]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TextareaBase, _object_spread_props(_object_spread({
+        minRows: 1,
+        placeholder: "Message ".concat(assistantNameContext, "..."),
+        disabled: isDisabled,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" && !e.shiftKey) {
+                var _e_currentTarget_form;
+                e.preventDefault();
+                if (isSubmitDisabled) return;
+                (_e_currentTarget_form = e.currentTarget.form) === null || _e_currentTarget_form === void 0 ? void 0 : _e_currentTarget_form.requestSubmit();
+            }
+        }
+    }, textareaProps), {
+        ref: function(e) {
+            textareaProps.ref(e);
+            textareaRef.current = e;
+        }
+    }));
 };
-// src/components/threads/Thread/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var Thread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SuperinterfaceProvider, _object_spread_props(_object_spread({}, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_themes31.Flex, {
-            direction: "column",
-            grow: "1",
+var Field = {
+    Root: Root3,
+    Control: Control
+};
+// src/components/threads/Thread/MessageForm/index.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var MessageForm = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root2, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Field.Root, {
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ThreadMessages, {
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes32.Text, {
+                    size: "2",
                     style: {
-                        padding: "var(--space-5)"
-                    }
+                        flexGrow: 1
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes32.Flex, {
+                        flexGrow: "1",
+                        direction: "column",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Field.Control, {})
+                    })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ThreadMessageForm, {
-                    style: {
-                        paddingLeft: "var(--space-5)",
-                        paddingRight: "var(--space-5)",
-                        paddingBottom: "var(--space-5)"
-                    }
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes32.Flex, {
+                    flexShrink: "0",
+                    align: "end",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Submit, {})
                 })
             ]
         })
+    });
+};
+MessageForm.Root = Root2;
+MessageForm.Field = Field;
+MessageForm.Submit = Submit;
+// src/components/threads/Thread/Root/index.tsx
+var import_themes33 = require("@radix-ui/themes");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Root4 = function(_param) {
+    var children = _param.children, rest = _object_without_properties(_param, [
+        "children"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SuperinterfaceProvider, _object_spread_props(_object_spread({}, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes33.Flex, {
+            direction: "column",
+            flexGrow: "1",
+            children: children
+        })
+    }));
+};
+// src/components/threads/Thread/index.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Thread = function(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Root4, _object_spread_props(_object_spread({}, props), {
+        children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Messages, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MessageForm, {})
+        ]
     }));
 };
+Thread.Root = Root4;
+Thread.Messages = Messages;
+Thread.MessageForm = MessageForm;
 // src/components/threads/ThreadDialog/Root/index.tsx
-var import_themes32 = require("@radix-ui/themes");
+var import_themes34 = require("@radix-ui/themes");
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_react30 = require("react");
+var import_react33 = require("react");
 // src/contexts/threads/ThreadDialogContext/index.ts
-var import_react28 = require("react");
-var ThreadDialogContext = (0, import_react28.createContext)({
+var import_react31 = require("react");
+var ThreadDialogContext = (0, import_react31.createContext)({
     isOpen: false,
     setIsOpen: function() {}
 });
 // src/hooks/threads/useThreadDialogContext/index.ts
-var import_react29 = require("react");
+var import_react32 = require("react");
 var useThreadDialogContext = function() {
-    return (0, import_react29.useContext)(ThreadDialogContext);
+    return (0, import_react32.useContext)(ThreadDialogContext);
 };
 // src/components/threads/ThreadDialog/Provider/index.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Provider = function(param) {
     var children = param.children;
     var threadDialogContext = useThreadDialogContext();
-    var _ref = _sliced_to_array((0, import_react30.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ThreadDialogContext.Provider, {
+    var _ref = _sliced_to_array((0, import_react33.useState)(threadDialogContext.isOpen), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ThreadDialogContext.Provider, {
         value: {
             isOpen: isOpen,
             setIsOpen: setIsOpen
@@ -2481,11 +2549,11 @@ var Provider = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Root/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var Root = function(param) {
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Root5 = function(param) {
     var children = param.children, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Provider, {
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_themes32.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Provider, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes34.Flex, {
             direction: "column",
             justify: "end",
             align: "end",
@@ -2501,94 +2569,107 @@ var Root = function(param) {
     });
 };
 // src/components/threads/ThreadDialog/Trigger/index.tsx
-var import_themes33 = require("@radix-ui/themes");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_themes35 = require("@radix-ui/themes");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Trigger = function(param) {
     var children = param.children;
     var setIsOpen = useThreadDialogContext().setIsOpen;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_themes33.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes35.Flex, {
         onClick: function() {
             return setIsOpen(function(prev) {
                 return !prev;
             });
         },
         direction: "column",
-        shrink: "0",
+        flexShrink: "0",
         children: children
     });
 };
 // src/components/threads/ThreadDialog/Button/index.tsx
-var import_themes34 = require("@radix-ui/themes");
+var import_themes36 = require("@radix-ui/themes");
 var import_react_icons6 = require("@radix-ui/react-icons");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var Button3 = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_themes34.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes36.IconButton, {
         size: "4",
         radius: "full",
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_icons6.ChatBubbleIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons6.ChatBubbleIcon, {})
     });
 };
 // src/components/threads/ThreadDialog/Content/index.tsx
-var import_themes35 = require("@radix-ui/themes");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var Content4 = function(param) {
+var import_themes37 = require("@radix-ui/themes");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Root6 = function(param) {
     var children = param.children;
     var isOpen = useThreadDialogContext().isOpen;
     if (!isOpen) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, {
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("style", {
-                children: ".superinterface-thread-dialog-card .rt-CardInner { display: flex; }"
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes35.Card, {
-                className: "superinterface-thread-dialog-card",
-                mb: "3",
-                style: {
-                    flexGrow: 1,
-                    width: "100vw",
-                    maxWidth: "400px",
-                    maxHeight: "720px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_themes35.Inset, {
-                    clip: "padding-box",
-                    side: "all",
-                    pb: "current",
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes37.Card, {
+        mb: "3",
+        style: {
+            display: "flex",
+            flexGrow: 1,
+            width: "100vw",
+            maxWidth: "400px",
+            maxHeight: "720px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes37.Inset, {
+            clip: "padding-box",
+            side: "all",
+            pb: "current",
+            style: {
+                display: "flex",
+                flexGrow: 1
+            },
+            children: children
+        })
+    });
+};
+var Content4 = function() {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Root6, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Thread.Root, {
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Thread.Messages, {
                     style: {
-                        display: "flex",
-                        flexGrow: 1
-                    },
-                    children: children
+                        padding: "var(--space-5)"
+                    }
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes37.Flex, {
+                    direction: "column",
+                    pl: "5",
+                    pr: "5",
+                    pb: "3",
+                    flexShrink: "0",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Thread.MessageForm, {})
                 })
-            })
-        ]
+            ]
+        })
     });
 };
+Content4.Root = Root6;
 // src/components/threads/ThreadDialog/index.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Root5, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Content4, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Thread, {})
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Content4, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button3, {})
             })
         ]
     });
 };
-ThreadDialog.Root = Root;
+ThreadDialog.Root = Root5;
 ThreadDialog.Trigger = Trigger;
 ThreadDialog.Button = Button3;
 ThreadDialog.Content = Content4;
 // src/components/threads/AudioThread/Root/index.tsx
 var import_runtime = require("regenerator-runtime/runtime");
-var import_react35 = require("react");
-var import_themes36 = require("@radix-ui/themes");
+var import_react38 = require("react");
+var import_themes38 = require("@radix-ui/themes");
 var import_react_speech_recognition = __toESM(require("react-speech-recognition"), 1);
 // src/contexts/threads/AudioThreadContext/index.ts
-var import_react31 = require("react");
-var AudioThreadContext = (0, import_react31.createContext)({
+var import_react34 = require("react");
+var AudioThreadContext = (0, import_react34.createContext)({
     status: "idle",
     recorderProps: {
         status: "idle",
@@ -2646,13 +2727,13 @@ var AudioThreadContext = (0, import_react31.createContext)({
 // src/components/threads/AudioThread/Root/index.tsx
 var import_react_use4 = require("react-use");
 // src/hooks/audioThreads/useStatus/index.ts
-var import_react32 = require("react");
+var import_react35 = require("react");
 var useStatus = function(param) {
-    var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createThreadMessageProps = param.createThreadMessageProps;
+    var messageAudioProps = param.messageAudioProps, recorderProps = param.recorderProps, createMessageProps = param.createMessageProps;
     var isRunActiveProps = useIsRunActive();
-    var status = (0, import_react32.useMemo)(function() {
+    var status = (0, import_react35.useMemo)(function() {
         if (recorderProps.status === "recording") return "recording";
-        if (createThreadMessageProps.isPending) return "creatingMessage";
+        if (createMessageProps.isPending) return "creatingMessage";
         if (isRunActiveProps.isRunActive) return "runActive";
         if (messageAudioProps.playing) return "playing";
         if (messageAudioProps.paused) return "playerPaused";
@@ -2663,7 +2744,7 @@ var useStatus = function(param) {
     }, [
         messageAudioProps,
         recorderProps,
-        createThreadMessageProps,
+        createMessageProps,
         isRunActiveProps
     ]);
     return {
@@ -2673,19 +2754,19 @@ var useStatus = function(param) {
 // src/hooks/audioThreads/useRecorder/index.ts
 var import_dayjs = __toESM(require("dayjs"), 1);
 var import_use_audio_capture = require("use-audio-capture");
-var import_react33 = require("react");
+var import_react36 = require("react");
 var import_react_use_audio_player = require("react-use-audio-player");
 var import_react_use3 = require("react-use");
 var useRecorder = function(param) {
     var isStopOnSilence = param.isStopOnSilence, onStart = param.onStart, onStop = param.onStop;
-    var _ref = _sliced_to_array((0, import_react33.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react33.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react33.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react33.useState)("idle"), 2), status = _ref3[0], setStatus = _ref3[1];
+    var _ref = _sliced_to_array((0, import_react36.useState)(null), 2), silenceStart = _ref[0], setSilenceStart = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react36.useState)(null), 2), noiseStart = _ref1[0], setNoiseStart = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react36.useState)(null), 2), mediaStream = _ref2[0], setMediaStream = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react36.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_react33.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
-    (0, import_react33.useEffect)(function() {
+    var _ref4 = _sliced_to_array((0, import_react36.useState)(false), 2), isLoaded = _ref4[0], setIsLoaded = _ref4[1];
+    (0, import_react36.useEffect)(function() {
         if (isLoaded) return;
         setIsLoaded(true);
         startAudioPlayer.load("/sounds/warning.wav", {
@@ -2751,9 +2832,9 @@ var useRecorder = function(param) {
             setNoiseStart(null);
         }
     });
-    var _ref5 = _sliced_to_array((0, import_react33.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
-    var isInited = (0, import_react33.useRef)(false);
-    (0, import_react33.useEffect)(function() {
+    var _ref5 = _sliced_to_array((0, import_react36.useState)(null), 2), audioEngine = _ref5[0], setAudioEngine = _ref5[1];
+    var isInited = (0, import_react36.useRef)(false);
+    (0, import_react36.useEffect)(function() {
         if (!mediaStream) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -2766,7 +2847,7 @@ var useRecorder = function(param) {
         isInited,
         mediaStream
     ]);
-    var visualizationAnalyser = (0, import_react33.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react36.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(result);
@@ -2774,7 +2855,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var silenceAnalyser = (0, import_react33.useMemo)(function() {
+    var silenceAnalyser = (0, import_react36.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         result.minDecibels = -45;
@@ -2783,7 +2864,7 @@ var useRecorder = function(param) {
     }, [
         audioEngine
     ]);
-    var handleSilence = (0, import_react33.useCallback)(function() {
+    var handleSilence = (0, import_react36.useCallback)(function() {
         if (!silenceAnalyser) return;
         var frequencyData = new Uint8Array(silenceAnalyser.frequencyBinCount);
         silenceAnalyser.getByteFrequencyData(frequencyData);
@@ -2806,7 +2887,7 @@ var useRecorder = function(param) {
         setNoiseStart,
         setSilenceStart
     ]);
-    (0, import_react33.useEffect)(function() {
+    (0, import_react36.useEffect)(function() {
         if (!isStopOnSilence) return;
         requestAnimationFrame(function() {
             return handleSilence();
@@ -2829,14 +2910,14 @@ var useRecorder = function(param) {
     });
 };
 // src/hooks/audioThreads/useMessageAudio/index.ts
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_howler = require("howler");
 var import_react_use_audio_player2 = require("react-use-audio-player");
 // src/hooks/audioThreads/useMessageAudio/lib/input.ts
 var import_radash9 = require("radash");
 var input = function(param) {
-    var threadMessage = param.threadMessage;
-    var textContents = threadMessage.content.filter(function(c) {
+    var message = param.message;
+    var textContents = message.content.filter(function(c) {
         return c.type === "text";
     });
     var result = textContents.map(function(c) {
@@ -2855,22 +2936,22 @@ var isHtmlAudioSupported = !unsupportedNames.includes(((_this = (0, import_detec
 // src/hooks/audioThreads/useMessageAudio/index.ts
 var useMessageAudio = function(param) {
     var onEnd = param.onEnd;
-    var _ref = _sliced_to_array((0, import_react34.useState)([]), 2), playedMessageIds = _ref[0], setPlayedMessageIds = _ref[1];
+    var _ref = _sliced_to_array((0, import_react37.useState)([]), 2), playedMessageIds = _ref[0], setPlayedMessageIds = _ref[1];
     var audioPlayer = (0, import_react_use_audio_player2.useAudioPlayer)();
     var superinterfaceContext = useSuperinterfaceContext();
-    var latestThreadMessageProps = useLatestThreadMessage();
-    (0, import_react34.useEffect)(function() {
+    var latestMessageProps = useLatestMessage();
+    (0, import_react37.useEffect)(function() {
         if (audioPlayer.playing) return;
-        if (!latestThreadMessageProps.latestThreadMessage) return;
-        if (latestThreadMessageProps.latestThreadMessage.role !== "assistant") return;
-        if (playedMessageIds.includes(latestThreadMessageProps.latestThreadMessage.id)) return;
+        if (!latestMessageProps.latestMessage) return;
+        if (latestMessageProps.latestMessage.role !== "assistant") return;
+        if (playedMessageIds.includes(latestMessageProps.latestMessage.id)) return;
         var input2 = input({
-            threadMessage: latestThreadMessageProps.latestThreadMessage
+            message: latestMessageProps.latestMessage
         });
         if (!input2) return;
         setPlayedMessageIds(function(prev) {
             return _to_consumable_array(prev).concat([
-                latestThreadMessageProps.latestThreadMessage.id
+                latestMessageProps.latestMessage.id
             ]);
         });
         audioPlayer.load("".concat(superinterfaceContext.baseUrl, "/tts?input=").concat(input2), {
@@ -2881,14 +2962,14 @@ var useMessageAudio = function(param) {
         });
     }, [
         superinterfaceContext,
-        latestThreadMessageProps,
+        latestMessageProps,
         audioPlayer,
         playedMessageIds,
         onEnd
     ]);
-    var isInited = (0, import_react34.useRef)(false);
-    var _ref1 = _sliced_to_array((0, import_react34.useState)(null), 2), audioEngine = _ref1[0], setAudioEngine = _ref1[1];
-    (0, import_react34.useEffect)(function() {
+    var isInited = (0, import_react37.useRef)(false);
+    var _ref1 = _sliced_to_array((0, import_react37.useState)(null), 2), audioEngine = _ref1[0], setAudioEngine = _ref1[1];
+    (0, import_react37.useEffect)(function() {
         if (!audioPlayer.playing) return;
         if (isInited.current) return;
         isInited.current = true;
@@ -2909,7 +2990,7 @@ var useMessageAudio = function(param) {
         audioPlayer,
         isInited
     ]);
-    var visualizationAnalyser = (0, import_react34.useMemo)(function() {
+    var visualizationAnalyser = (0, import_react37.useMemo)(function() {
         if (!audioEngine) return null;
         var result = audioEngine.audioContext.createAnalyser();
         audioEngine.source.connect(audioEngine.audioContext.destination);
@@ -2923,19 +3004,14 @@ var useMessageAudio = function(param) {
     });
 };
 // src/components/threads/AudioThread/Root/index.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var Root2 = function(param) {
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Root7 = function(param) {
     var children = param.children;
-    useThreadLifecycles();
-    var createThreadMessageProps = useCreateThreadMessage();
-    var _ref = (0, import_react_speech_recognition.useSpeechRecognition)(), transcript = _ref.transcript, listening = _ref.listening, resetTranscript = _ref.resetTranscript, browserSupportsSpeechRecognition = _ref.browserSupportsSpeechRecognition, rest = _object_without_properties(_ref, [
-        "transcript",
-        "listening",
-        "resetTranscript",
-        "browserSupportsSpeechRecognition"
-    ]);
-    var transcriptRef = (0, import_react35.useRef)(transcript);
-    (0, import_react35.useEffect)(function() {
+    useLifecycle();
+    var createMessageProps = useCreateMessage();
+    var _ref = (0, import_react_speech_recognition.useSpeechRecognition)(), transcript = _ref.transcript, resetTranscript = _ref.resetTranscript;
+    var transcriptRef = (0, import_react38.useRef)(transcript);
+    (0, import_react38.useEffect)(function() {
         transcriptRef.current = transcript;
     }, [
         transcript
@@ -2955,20 +3031,21 @@ var Root2 = function(param) {
             });
         }),
         onStop: function() {
-            var _ref = _async_to_generator(function(_event, chunks) {
+            var _ref = _async_to_generator(function(_event, _chunks) {
                 return _ts_generator(this, function(_state) {
                     console.log({
                         transcript: transcriptRef.current
                     });
                     return [
                         2,
-                        createThreadMessageProps.createThreadMessage({
+                        createMessageProps.createMessage({
+                            // @ts-ignore-next-line
                             content: transcriptRef.current
                         })
                     ];
                 });
             });
-            return function(_event, chunks) {
+            return function(_event, _chunks) {
                 return _ref.apply(this, arguments);
             };
         }()
@@ -2985,47 +3062,47 @@ var Root2 = function(param) {
     });
     var status = useStatus({
         recorderProps: recorderProps,
-        createThreadMessageProps: createThreadMessageProps,
+        createMessageProps: createMessageProps,
         messageAudioProps: messageAudioProps
     }).status;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AudioThreadContext.Provider, {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AudioThreadContext.Provider, {
         value: {
             status: status,
             recorderProps: recorderProps,
             messageAudioProps: messageAudioProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_themes36.Flex, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_themes38.Flex, {
             direction: "column",
-            grow: "1",
+            flexGrow: "1",
             p: "5",
             children: children
         })
     });
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_themes37 = require("@radix-ui/themes");
+var import_themes39 = require("@radix-ui/themes");
 // src/hooks/threads/useAudioThreadContext/index.ts
-var import_react36 = require("react");
+var import_react39 = require("react");
 var useAudioThreadContext = function() {
-    return (0, import_react36.useContext)(AudioThreadContext);
+    return (0, import_react39.useContext)(AudioThreadContext);
 };
 // src/components/threads/AudioThread/Visualization/index.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Visualization = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_themes39.Flex, {
         direction: "column",
         align: "center",
         justify: "center",
         mb: "3",
-        grow: "1",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_themes37.Flex, {
+        flexGrow: "1",
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_themes39.Flex, {
             align: "center",
             justify: "center",
+            height: "200px",
+            width: "200px",
             style: {
                 backgroundColor: "var(--".concat(audioThreadContext.status === "playing" ? "mint" : "gray", "-4)"),
-                height: "200px",
-                width: "200px",
                 borderRadius: "9999px"
             }
         })
@@ -3033,22 +3110,22 @@ var Visualization = function() {
 };
 // src/components/threads/AudioThread/Form/index.tsx
 var import_react_icons8 = require("@radix-ui/react-icons");
-var import_themes40 = require("@radix-ui/themes");
+var import_themes42 = require("@radix-ui/themes");
 // src/components/threads/AudioThread/Form/Visualizer/index.tsx
 var import_lodash7 = __toESM(require("lodash"), 1);
-var import_themes38 = require("@radix-ui/themes");
-var import_react37 = require("react");
+var import_themes40 = require("@radix-ui/themes");
+var import_react40 = require("react");
 var import_radash10 = require("radash");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var barCount = 4;
 var Visualizer = function() {
     var audioThreadContext = useAudioThreadContext();
     var visualizationAnalyser = audioThreadContext.recorderProps.visualizationAnalyser;
-    var _ref = _sliced_to_array((0, import_react37.useState)(function() {
+    var _ref = _sliced_to_array((0, import_react40.useState)(function() {
         return new AudioContext().createAnalyser();
     }), 1), emptyVisualizer = _ref[0];
-    var _ref1 = _sliced_to_array((0, import_react37.useState)([]), 2), barHeights = _ref1[0], setBarHeights = _ref1[1];
-    var draw = (0, import_react37.useCallback)(function(param) {
+    var _ref1 = _sliced_to_array((0, import_react40.useState)([]), 2), barHeights = _ref1[0], setBarHeights = _ref1[1];
+    var draw = (0, import_react40.useCallback)(function(param) {
         var visualizationAnalyser2 = param.visualizationAnalyser;
         var frequencyData = new Uint8Array(visualizationAnalyser2.frequencyBinCount / 15);
         visualizationAnalyser2.getByteFrequencyData(frequencyData);
@@ -3062,7 +3139,7 @@ var Visualizer = function() {
             });
         });
     }, []);
-    (0, import_react37.useEffect)(function() {
+    (0, import_react40.useEffect)(function() {
         draw({
             visualizationAnalyser: visualizationAnalyser || emptyVisualizer
         });
@@ -3071,7 +3148,7 @@ var Visualizer = function() {
         visualizationAnalyser,
         emptyVisualizer
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes38.Grid, {
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes40.Grid, {
         columns: "".concat(barCount),
         gap: "1",
         width: "auto",
@@ -3080,21 +3157,19 @@ var Visualizer = function() {
             gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
         },
         children: barHeights.map(function(barHeight, index) {
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes38.Flex, {
+            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes40.Flex, {
                 direction: "column",
                 align: "center",
                 justify: "center",
-                style: {
-                    height: "20px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_themes38.Flex, {
+                height: "20px",
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes40.Flex, {
+                    minHeight: "50%",
+                    maxHeight: "100%",
+                    height: "".concat(barHeight + 20, "%"),
+                    width: "12px",
                     style: {
                         backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-11)"),
-                        borderRadius: "var(--radius-6)",
-                        height: "".concat(barHeight + 20, "%"),
-                        minHeight: "50%",
-                        maxHeight: "100%",
-                        width: "12px"
+                        borderRadius: "var(--radius-6)"
                     }
                 })
             }, index);
@@ -3102,31 +3177,31 @@ var Visualizer = function() {
     });
 };
 // src/components/threads/AudioThread/Form/ActionButton/index.tsx
-var import_themes39 = require("@radix-ui/themes");
+var import_themes41 = require("@radix-ui/themes");
 var import_react_icons7 = require("@radix-ui/react-icons");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var ActionButton = function() {
     var audioThreadContext = useAudioThreadContext();
     if (audioThreadContext.status === "recording") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_themes39.Flex, {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_themes41.Flex, {
             align: "center",
             children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.Flex, {
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.Flex, {
                     mr: "3",
                     ml: "-7",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
                         onClick: audioThreadContext.recorderProps.pause,
                         color: "gray",
                         radius: "full",
                         size: "1",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.PauseIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.PauseIcon, {})
                     })
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.Tooltip, {
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.Tooltip, {
                     open: true,
                     content: "Send your message",
                     side: "bottom",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+                    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
                         onClick: audioThreadContext.recorderProps.stop,
                         color: "gray",
                         highContrast: true,
@@ -3135,14 +3210,14 @@ var ActionButton = function() {
                         style: {
                             border: "2px solid var(--gray-8)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.ArrowUpIcon, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.ArrowUpIcon, {})
                     })
                 })
             ]
         });
     }
     if (audioThreadContext.status === "recorderPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
             onClick: audioThreadContext.recorderProps.resume,
             color: "red",
             radius: "full",
@@ -3150,11 +3225,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.ResumeIcon, {})
         });
     }
     if (audioThreadContext.status === "idle") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
             onClick: function() {
                 return audioThreadContext.recorderProps.start();
             },
@@ -3167,7 +3242,7 @@ var ActionButton = function() {
         });
     }
     if (audioThreadContext.status === "playing") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.pause();
             },
@@ -3177,11 +3252,11 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.PauseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.PauseIcon, {})
         });
     }
     if (audioThreadContext.status === "playerPaused") {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
             onClick: function() {
                 return audioThreadContext.messageAudioProps.play();
             },
@@ -3191,10 +3266,10 @@ var ActionButton = function() {
             style: {
                 border: "2px solid var(--gray-8)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_icons7.ResumeIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_icons7.ResumeIcon, {})
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_themes39.IconButton, {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes41.IconButton, {
         size: "4",
         color: "red",
         radius: "full",
@@ -3205,140 +3280,141 @@ var ActionButton = function() {
     });
 };
 // src/components/threads/AudioThread/Form/index.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var Form = function() {
     var audioThreadContext = useAudioThreadContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_themes40.Flex, {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_themes42.Flex, {
         direction: "column",
         align: "center",
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_themes40.Flex, {
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_themes42.Flex, {
                 pb: "3",
                 align: "center",
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes40.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes42.Flex, {
                         ml: "-5",
                         mr: "2",
                         align: "center",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons8.SpeakerModerateIcon, {
+                        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_icons8.SpeakerModerateIcon, {
                             style: {
                                 color: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-12)")
                             }
                         })
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes40.Flex, {
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_themes42.Flex, {
                         px: "2",
                         py: "1",
                         style: {
                             backgroundColor: "var(--".concat(audioThreadContext.status === "recording" ? "mint" : "gray", "-4)"),
                             borderRadius: "var(--radius-6)"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Visualizer, {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Visualizer, {})
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ActionButton, {})
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ActionButton, {})
         ]
     });
 };
 // src/components/threads/AudioThread/index.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var AudioThread = function(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Root2, _object_spread_props(_object_spread({}, props), {
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Root7, _object_spread_props(_object_spread({}, props), {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Visualization, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Form, {})
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Visualization, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Form, {})
         ]
     }));
 };
-AudioThread.Root = Root2;
+AudioThread.Root = Root7;
 AudioThread.Visualization = Visualization;
 AudioThread.Form = Form;
 // src/components/threads/AudioThreadDialog/index.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var AudioThreadDialog = function() {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Root, {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Root5, {
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Content4, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AudioThread, {})
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Content4.Root, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AudioThread, {})
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Trigger, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button3, {})
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Trigger, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button3, {})
             })
         ]
     });
 };
-AudioThreadDialog.Root = Root;
+AudioThreadDialog.Root = Root5;
 AudioThreadDialog.Trigger = Trigger;
 AudioThreadDialog.Button = Button3;
 AudioThreadDialog.Content = Content4;
 // src/components/suggestions/Suggestions/index.tsx
-var import_react38 = require("react");
-var import_themes42 = require("@radix-ui/themes");
+var import_react41 = require("react");
+var import_themes44 = require("@radix-ui/themes");
 // src/components/suggestions/Suggestion/index.tsx
 var import_react_icons9 = require("@radix-ui/react-icons");
-var import_themes41 = require("@radix-ui/themes");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_themes43 = require("@radix-ui/themes");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Suggestion = function(param) {
     var suggestion = param.suggestion;
-    var createThreadMessage = useCreateThreadMessage().createThreadMessage;
+    var createMessage = useCreateMessage().createMessage;
     var _useIsRunActive = useIsRunActive(), isRunActive2 = _useIsRunActive.isRunActive;
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_themes41.Button, {
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_themes43.Button, {
         variant: "soft",
         style: {
             justifyContent: "space-between"
         },
         onClick: function() {
-            createThreadMessage({
+            createMessage({
+                // @ts-ignore-next-line
                 content: suggestion
             });
         },
         disabled: isRunActive2,
         children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_themes41.Text, {
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_themes43.Text, {
                 size: "1",
                 weight: "regular",
                 children: suggestion
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_icons9.ArrowUpIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_icons9.ArrowUpIcon, {})
         ]
     });
 };
 // src/components/suggestions/Suggestions/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Suggestions = function(param) {
     var _param_emptyStateSuggestions = param.emptyStateSuggestions, emptyStateSuggestions = _param_emptyStateSuggestions === void 0 ? [] : _param_emptyStateSuggestions, _param_suggestions = param.suggestions, suggestions = _param_suggestions === void 0 ? [] : _param_suggestions;
-    var latestThreadMessageProps = useLatestThreadMessage();
+    var latestMessageProps = useLatestMessage();
     var isRunActiveProps = useIsRunActive();
-    var isDisabled = (0, import_react38.useMemo)(function() {
+    var isDisabled = (0, import_react41.useMemo)(function() {
         var // @ts-ignore-next-line
-        _latestThreadMessageProps_latestThreadMessage_metadata, _latestThreadMessageProps_latestThreadMessage;
-        return ((_latestThreadMessageProps_latestThreadMessage = latestThreadMessageProps.latestThreadMessage) === null || _latestThreadMessageProps_latestThreadMessage === void 0 ? void 0 : (_latestThreadMessageProps_latestThreadMessage_metadata = _latestThreadMessageProps_latestThreadMessage.metadata) === null || _latestThreadMessageProps_latestThreadMessage_metadata === void 0 ? void 0 : _latestThreadMessageProps_latestThreadMessage_metadata.isBlocking) || isRunActiveProps.isRunActive;
+        _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) || isRunActiveProps.isRunActive;
     }, [
-        latestThreadMessageProps,
+        latestMessageProps,
         isRunActiveProps
     ]);
-    if (latestThreadMessageProps.isLoading) return null;
+    if (latestMessageProps.isLoading) return null;
     if (isDisabled) return null;
-    if (!latestThreadMessageProps.latestThreadMessage && emptyStateSuggestions.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes42.Flex, {
+    if (!latestMessageProps.latestMessage && emptyStateSuggestions.length > 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
             gap: "2",
             py: "2",
             wrap: "wrap",
             children: emptyStateSuggestions.map(function(suggestion) {
-                return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Suggestion, {
+                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Suggestion, {
                     suggestion: suggestion
                 }, suggestion);
             })
         });
     }
-    if (latestThreadMessageProps.latestThreadMessage.role === "assistant") {
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_themes42.Flex, {
+    if (latestMessageProps.latestMessage.role === "assistant") {
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_themes44.Flex, {
             gap: "2",
             py: "2",
             wrap: "wrap",
             children: suggestions.map(function(suggestion) {
-                return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Suggestion, {
+                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Suggestion, {
                     suggestion: suggestion
                 }, suggestion);
             })
@@ -3347,9 +3423,9 @@ var Suggestions = function(param) {
     return null;
 };
 // src/hooks/markdown/useMarkdownContext/index.ts
-var import_react39 = require("react");
+var import_react42 = require("react");
 var useMarkdownContext = function() {
-    return (0, import_react39.useContext)(MarkdownContext);
+    return (0, import_react42.useContext)(MarkdownContext);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3365,19 +3441,17 @@ var useMarkdownContext = function() {
     SuperinterfaceProvider: SuperinterfaceProvider,
     Thread: Thread,
     ThreadDialog: ThreadDialog,
-    ThreadMessageForm: ThreadMessageForm,
-    ThreadMessages: ThreadMessages,
-    ThreadProvider: ThreadProvider,
+    ThreadDialogContext: ThreadDialogContext,
+    useCreateMessage: useCreateMessage,
     useCreateRun: useCreateRun,
-    useCreateThreadMessage: useCreateThreadMessage,
     useIsRunActive: useIsRunActive,
+    useLatestMessage: useLatestMessage,
     useLatestRun: useLatestRun,
-    useLatestThreadMessage: useLatestThreadMessage,
+    useLifecycle: useLifecycle,
     useMarkdownContext: useMarkdownContext,
+    useMessages: useMessages,
     useRuns: useRuns,
     useSuperinterfaceContext: useSuperinterfaceContext,
-    useThreadContext: useThreadContext,
-    useThreadLifecycles: useThreadLifecycles,
-    useThreadMessages: useThreadMessages
+    useThreadContext: useThreadContext
 });
 //# sourceMappingURL=index.cjs.map