@superinterface/react 1.0.4 → 1.1.0

package/dist/index.js

@@ -1,23 +1,2042 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsRunActive = exports.useCreateMessage = exports.useLatestMessage = exports.useMessages = exports.useThreadLifecycles = exports.useQuery = exports.useQueryClient = exports.QueryClientProvider = exports.QueryClient = exports.Form = exports.Messages = void 0;
-var Messages_1 = require("./components/messages/Messages");
-Object.defineProperty(exports, "Messages", { enumerable: true, get: function () { return Messages_1.Messages; } });
-var Form_1 = require("./components/messages/Form");
-Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
-var react_query_1 = require("@tanstack/react-query");
-Object.defineProperty(exports, "QueryClient", { enumerable: true, get: function () { return react_query_1.QueryClient; } });
-Object.defineProperty(exports, "QueryClientProvider", { enumerable: true, get: function () { return react_query_1.QueryClientProvider; } });
-Object.defineProperty(exports, "useQueryClient", { enumerable: true, get: function () { return react_query_1.useQueryClient; } });
-Object.defineProperty(exports, "useQuery", { enumerable: true, get: function () { return react_query_1.useQuery; } });
-var useThreadLifecycles_1 = require("./hooks/threads/useThreadLifecycles");
-Object.defineProperty(exports, "useThreadLifecycles", { enumerable: true, get: function () { return useThreadLifecycles_1.useThreadLifecycles; } });
-var useMessages_1 = require("./hooks/messages/useMessages");
-Object.defineProperty(exports, "useMessages", { enumerable: true, get: function () { return useMessages_1.useMessages; } });
-var useLatestMessage_1 = require("./hooks/messages/useLatestMessage");
-Object.defineProperty(exports, "useLatestMessage", { enumerable: true, get: function () { return useLatestMessage_1.useLatestMessage; } });
-var useCreateMessage_1 = require("./hooks/messages/useCreateMessage");
-Object.defineProperty(exports, "useCreateMessage", { enumerable: true, get: function () { return useCreateMessage_1.useCreateMessage; } });
-var useIsRunActive_1 = require("./hooks/runs/useIsRunActive");
-Object.defineProperty(exports, "useIsRunActive", { enumerable: true, get: function () { return useIsRunActive_1.useIsRunActive; } });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AssistantAvatarContext: () => AssistantAvatarContext,
+  AssistantNameContext: () => AssistantNameContext,
+  Form: () => Form,
+  FunctionBase: () => FunctionBase,
+  FunctionComponentsContext: () => FunctionComponentsContext,
+  MarkdownContext: () => MarkdownContext,
+  Messages: () => Messages,
+  Suggestions: () => Suggestions,
+  SuperinterfaceProvider: () => SuperinterfaceProvider,
+  useCreateMessage: () => useCreateMessage,
+  useIsRunActive: () => useIsRunActive,
+  useLatestMessage: () => useLatestMessage,
+  useMarkdownContext: () => useMarkdownContext,
+  useMessages: () => useMessages,
+  useThreadLifecycles: () => useThreadLifecycles
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/messages/Messages/index.tsx
+var import_themes28 = require("@radix-ui/themes");
+
+// src/hooks/misc/useInfiniteScroll/index.tsx
+var import_react2 = require("react");
+var import_react_intersection_observer = require("react-intersection-observer");
+
+// src/hooks/misc/useThrottledEffect/index.tsx
+var import_lodash = __toESM(require("lodash"));
+var import_react = require("react");
+var useThrottledEffect = (cb, delay, additionalDeps) => {
+  const cbRef = (0, import_react.useRef)(cb);
+  const throttledCb = (0, import_react.useCallback)(
+    import_lodash.default.throttle((...args) => cbRef.current(...args), delay, {
+      leading: true,
+      trailing: true
+    }),
+    [delay]
+  );
+  (0, import_react.useEffect)(() => {
+    cbRef.current = cb;
+  });
+  (0, import_react.useEffect)(throttledCb, [throttledCb, ...additionalDeps]);
+};
+
+// src/hooks/misc/useInfiniteScroll/index.tsx
+var useInfiniteScroll = ({
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage
+}) => {
+  const containerRef = (0, import_react2.useRef)(null);
+  const { ref: loaderRef, inView } = (0, import_react_intersection_observer.useInView)({
+    root: containerRef.current,
+    rootMargin: "0px",
+    threshold: 0.1
+  });
+  useThrottledEffect(
+    () => {
+      if (isFetchingNextPage)
+        return;
+      if (!inView)
+        return;
+      if (!hasNextPage)
+        return;
+      console.log("Fetching next page");
+      fetchNextPage();
+    },
+    500,
+    [inView, isFetchingNextPage, hasNextPage, fetchNextPage]
+  );
+  return {
+    containerRef,
+    loaderRef,
+    inView
+  };
+};
+
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_react4 = 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_runtime = (
+  // @ts-ignore-next-line
+  require("react/jsx-runtime")
+);
+var Skeleton = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_themes.Flex,
+  {
+    className: `animate-pulse rounded-3 bg-gray-5 ${className}`,
+    ...rest
+  }
+);
+
+// src/components/messageGroups/MessagesGroupBase/index.tsx
+var import_react3 = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MessagesGroupBase = (0, import_react3.forwardRef)(function MessagesGroupBase2({
+  children
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_themes2.Container,
+    {
+      ref,
+      size: "2",
+      grow: "0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_themes2.Flex,
+        {
+          shrink: "0",
+          gap: "3",
+          children
+        }
+      )
+    }
+  );
+});
+
+// src/components/messageGroups/MessagesGroupBase/Name.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Name = ({
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  import_themes3.Flex,
+  {
+    height: "5",
+    align: "center",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes3.Text,
+      {
+        size: "2",
+        weight: "bold",
+        children
+      }
+    )
+  }
+);
+
+// src/components/skeletons/MessagesSkeleton/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MessagesSkeleton = (0, import_react4.forwardRef)(function MessagesSkeleton2(_props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    MessagesGroupBase,
+    {
+      ref,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_themes4.Avatar,
+          {
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Flex, {}),
+            size: "1",
+            className: "animate-pulse"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          import_themes4.Box,
+          {
+            pb: "3",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Name, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Skeleton,
+                {
+                  height: "1",
+                  className: "w-[128px]"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Skeleton,
+                {
+                  height: "2",
+                  className: "w-[256px]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Skeleton,
+                {
+                  height: "2",
+                  className: "w-[256px] mt-2"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Skeleton,
+                {
+                  height: "2",
+                  className: "w-[256px] mt-2"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/hooks/messages/useMessages/index.tsx
+var import_react7 = require("react");
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/hooks/core/useSuperinterfaceContext/index.ts
+var import_react6 = require("react");
+
+// src/contexts/core/SuperinterfaceContext/index.tsx
+var import_react5 = require("react");
+
+// src/hooks/messages/useMessages/lib/queryOptions/queryKey.ts
+var queryKey = ["messages"];
+
+// src/hooks/messages/useMessages/lib/queryOptions/index.ts
+var queryOptions = {
+  queryKey,
+  initialPageParam: void 0,
+  getNextPageParam: (lastPage) => {
+    if (!lastPage.hasNextPage)
+      return null;
+    return lastPage.lastId;
+  }
+};
+
+// src/hooks/runs/useRuns/lib/queryOptions/queryKey.ts
+var queryKey2 = ["runs"];
+
+// src/hooks/runs/useRuns/lib/queryOptions/index.ts
+var queryOptions2 = {
+  queryKey: queryKey2,
+  initialPageParam: void 0,
+  getNextPageParam: (lastPage) => {
+    if (!lastPage.hasNextPage)
+      return null;
+    return lastPage.lastId;
+  },
+  limit: 10
+};
+
+// src/lib/core/fillOption.ts
+var extended = [
+  "enabled",
+  "queryKey"
+];
+var fillOption = ({
+  value,
+  key,
+  meta,
+  args
+}) => {
+  if (typeof value === "function" && extended.includes(key)) {
+    return value({
+      meta,
+      ...args
+    });
+  }
+  return value;
+};
+
+// src/lib/optimistic/optimisticId.ts
+var import_radash = require("radash");
+var optimisticId = () => `-${(0, import_radash.uid)(24)}`;
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/data.ts
+var data = ({
+  newMessage
+}) => (prevData) => {
+  const message = {
+    id: optimisticId(),
+    role: "user",
+    created_at: +/* @__PURE__ */ new Date(),
+    object: "thread.message",
+    content: [
+      {
+        type: "text",
+        text: {
+          annotations: [],
+          value: newMessage.content
+        }
+      }
+    ],
+    run_id: null,
+    assistant_id: null,
+    thread_id: null,
+    file_ids: [],
+    metadata: {},
+    runSteps: []
+  };
+  if (!prevData) {
+    return {
+      pageParams: [],
+      pages: [
+        {
+          data: [message],
+          hasNextPage: false,
+          lastId: message.id
+        }
+      ]
+    };
+  }
+  const [latestPage, ...pagesRest] = prevData.pages;
+  return {
+    ...prevData,
+    pages: [
+      {
+        ...latestPage,
+        data: [
+          message,
+          ...latestPage.data
+        ]
+      },
+      ...pagesRest
+    ]
+  };
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onMutate/index.ts
+var onMutate = async (newMessage, context) => {
+  await context.meta.queryClient.cancelQueries(
+    fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: newMessage
+    })
+  );
+  const prevMessages = context.meta.queryClient.getQueryData(
+    fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: newMessage
+    })
+  );
+  context.meta.queryClient.setQueryData(
+    fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: newMessage
+    }),
+    data({ newMessage })
+  );
+  return {
+    prevMessages,
+    newMessage,
+    meta: context.meta
+  };
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onError.ts
+var onError = async (_error, newMessage, context) => {
+  if (!context) {
+    return;
+  }
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onSettled.ts
+var onSettled = async (_data, _error, variables, context) => {
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.runs.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/index.ts
+var mutationOptions = {
+  onMutate,
+  onError,
+  onSettled
+};
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onMutate.ts
+var onMutate2 = async (_newRun, context) => context;
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onSuccess.ts
+var onSuccess = async (data2, variables, context) => context.meta.queryClient.setQueryData(
+  fillOption({
+    value: context.meta.superinterfaceContext.queryOptions.runs.queryKey,
+    key: "queryKey",
+    meta: context.meta,
+    args: variables
+  }),
+  (prevData) => {
+    if (!prevData) {
+      return {
+        pageParams: [],
+        pages: [
+          {
+            data: [data2.run],
+            hasNextPage: false,
+            lastId: data2.run.id
+          }
+        ]
+      };
+    }
+    const [latestPage, ...pagesRest] = prevData.pages;
+    return {
+      ...prevData,
+      pages: [
+        {
+          ...latestPage,
+          data: [
+            data2.run,
+            ...latestPage.data
+          ]
+        },
+        ...pagesRest
+      ]
+    };
+  }
+);
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onSettled.ts
+var onSettled2 = async (_data, _error, variables, context) => {
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.runs.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+};
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/index.ts
+var mutationOptions2 = {
+  onMutate: onMutate2,
+  onSuccess,
+  onSettled: onSettled2
+};
+
+// src/hooks/actions/useHandleAction/lib/mutationOptions/onMutate.ts
+var onMutate3 = async (_newRun, context) => context;
+
+// src/hooks/actions/useHandleAction/lib/mutationOptions/onSettled.ts
+var onSettled3 = async (_data, _error, variables, context) => {
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+  await context.meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: context.meta.superinterfaceContext.queryOptions.runs.queryKey,
+      key: "queryKey",
+      meta: context.meta,
+      args: variables
+    })
+  });
+};
+
+// src/hooks/actions/useHandleAction/lib/mutationOptions/index.ts
+var mutationOptions3 = {
+  onMutate: onMutate3,
+  onSettled: onSettled3
+};
+
+// src/contexts/core/SuperinterfaceContext/index.tsx
+var SuperinterfaceContext = (0, import_react5.createContext)({
+  queryOptions: {
+    messages: queryOptions,
+    runs: queryOptions2
+  },
+  mutationOptions: {
+    createMessage: mutationOptions,
+    createRun: mutationOptions2,
+    handleAction: mutationOptions3
+  }
+});
+
+// src/hooks/core/useSuperinterfaceContext/index.ts
+var useSuperinterfaceContext = () => (0, import_react6.useContext)(SuperinterfaceContext);
+
+// src/hooks/metas/useMeta/index.ts
+var import_react_query = require("@tanstack/react-query");
+var useMeta = () => {
+  const superinterfaceContext = useSuperinterfaceContext();
+  const queryClient = (0, import_react_query.useQueryClient)();
+  return {
+    meta: {
+      queryClient,
+      superinterfaceContext
+    }
+  };
+};
+
+// src/lib/core/extendOptions.ts
+var import_radash2 = require("radash");
+var import_lodash2 = require("lodash");
+var fill = ({ options, meta, args }) => (0, import_radash2.mapValues)(options, (value, key) => {
+  if (key === "onMutate") {
+    return async (...args2) => {
+      return value(...args2, { meta });
+    };
+  }
+  return fillOption({
+    value,
+    key,
+    meta,
+    args
+  });
+});
+var extendOptions = ({
+  defaultOptions,
+  args,
+  meta
+}) => {
+  const options = (0, import_lodash2.merge)(defaultOptions, args);
+  return {
+    meta,
+    ...fill({ options, meta, args })
+  };
+};
+
+// src/hooks/messages/useMessages/index.tsx
+var messages = ({
+  props
+}) => {
+  if (!props.data)
+    return [];
+  return props.data.pages.reduce((acc, page) => acc.concat(page.data), []);
+};
+var useMessages = (args = {}) => {
+  const { meta } = useMeta();
+  const superinterfaceContext = useSuperinterfaceContext();
+  const props = (0, import_react_query2.useInfiniteQuery)(extendOptions({
+    defaultOptions: superinterfaceContext.queryOptions.messages,
+    args,
+    meta
+  }));
+  return (0, import_react7.useMemo)(() => ({
+    ...props,
+    // @ts-ignore-next-line
+    messages: messages({ props })
+  }), [props]);
+};
+
+// src/hooks/runs/useManageRuns/index.tsx
+var import_react11 = require("react");
+
+// src/hooks/messages/useLatestMessage/index.ts
+var import_react8 = require("react");
+var useLatestMessage = (args = {}) => {
+  const props = useMessages(args);
+  return (0, import_react8.useMemo)(() => ({
+    ...props,
+    latestMessage: props.messages[0] || null
+  }), [props]);
+};
+
+// 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 = ({
+  data: data2
+}) => {
+  if (!data2)
+    return [];
+  return data2.pages.reduce((acc, page) => acc.concat(page.data), []);
+};
+
+// src/hooks/runs/useRuns/index.tsx
+var useRuns = (args = {}) => {
+  const { meta } = useMeta();
+  const superinterfaceContext = useSuperinterfaceContext();
+  const props = (0, import_react_query3.useInfiniteQuery)(extendOptions({
+    defaultOptions: superinterfaceContext.queryOptions.runs,
+    args,
+    meta
+  }));
+  return (0, import_react9.useMemo)(() => ({
+    ...props,
+    // @ts-ignore-next-line
+    runs: getRuns({ data: props.data })
+  }), [props]);
+};
+
+// src/hooks/runs/useLatestRun/index.ts
+var useLatestRun = (args = {}) => {
+  const props = useRuns(args);
+  return (0, import_react10.useMemo)(() => ({
+    ...props,
+    latestRun: props.runs[0]
+  }), [props]);
+};
+
+// src/hooks/runs/useCreateRun/index.ts
+var import_react_query4 = require("@tanstack/react-query");
+var useCreateRun = (args = () => {
+}) => {
+  const superinterfaceContext = useSuperinterfaceContext();
+  const { meta } = useMeta();
+  const props = (0, import_react_query4.useMutation)(extendOptions({
+    defaultOptions: superinterfaceContext.mutationOptions.createRun,
+    args,
+    meta
+  }));
+  return {
+    ...props,
+    createRun: props.mutate
+  };
+};
+
+// src/lib/optimistic/isOptimistic.ts
+var import_lodash3 = __toESM(require("lodash"));
+var isOptimistic = ({
+  id
+}) => import_lodash3.default.startsWith(id, "-");
+
+// src/hooks/runs/useManageRuns/index.tsx
+var useManageRuns = (args) => {
+  const latestRunProps = useLatestRun(args);
+  const latestMessageProps = useLatestMessage(args);
+  const createRunProps = useCreateRun(args);
+  (0, import_react11.useEffect)(() => {
+    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 || latestMessageProps.latestMessage.created_at > latestRunProps.latestRun.created_at) {
+      createRunProps.createRun(args);
+    }
+  }, [
+    createRunProps,
+    latestRunProps,
+    latestMessageProps
+  ]);
+  return null;
+};
+
+// src/hooks/runs/useIsRunActive/index.tsx
+var import_react12 = require("react");
+var import_react_query5 = require("@tanstack/react-query");
+
+// src/lib/runs/isRunEditingMessage/index.ts
+var import_lodash4 = __toESM(require("lodash"));
+var isRunEditingMessage = ({
+  message
+}) => {
+  if (!message)
+    return false;
+  if (message.role === "user")
+    return false;
+  if (!message.run_id)
+    return false;
+  const hasContent = import_lodash4.default.some(message.content, (content) => {
+    var _a;
+    return content.type !== "text" || content.type === "text" && ((_a = content.text) == null ? void 0 : _a.value) !== "";
+  });
+  return !hasContent;
+};
+
+// src/hooks/runs/useIsRunActive/index.tsx
+var statuses = [
+  "queued",
+  "in_progress",
+  "cancelling",
+  "requires_action"
+];
+var isRunActive = ({
+  latestRunProps,
+  latestMessageProps,
+  isMutating
+}) => {
+  var _a, _b;
+  if ((_b = (_a = latestMessageProps.latestMessage) == null ? void 0 : _a.metadata) == null ? void 0 : _b.isBlocking)
+    return false;
+  if (isMutating > 0)
+    return true;
+  if (!latestRunProps.latestRun)
+    return false;
+  if (statuses.includes(latestRunProps.latestRun.status))
+    return true;
+  return isRunEditingMessage({ message: latestMessageProps.latestMessage });
+};
+var useIsRunActive = (args) => {
+  const latestRunProps = useLatestRun(args);
+  const latestMessageProps = useLatestMessage(args);
+  const isMutating = (0, import_react_query5.useIsMutating)();
+  return (0, import_react12.useMemo)(() => ({
+    ...latestRunProps,
+    isRunActive: isRunActive({
+      latestRunProps,
+      latestMessageProps,
+      isMutating
+    })
+  }), [latestRunProps, latestMessageProps, isMutating]);
+};
+
+// src/hooks/runs/usePolling/index.tsx
+var import_react_use = require("react-use");
+
+// src/hooks/runs/usePolling/lib/refetch.ts
+var refetch = async ({
+  meta,
+  args
+}) => {
+  await meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta,
+      args
+    })
+  });
+  await meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: meta.superinterfaceContext.queryOptions.runs.queryKey,
+      key: "queryKey",
+      meta,
+      args
+    })
+  });
+};
+
+// src/hooks/runs/usePolling/index.tsx
+var usePolling = (args = {}) => {
+  const { meta } = useMeta();
+  const isRunActiveProps = useIsRunActive(args);
+  (0, import_react_use.useInterval)(
+    () => {
+      refetch({
+        args,
+        meta
+      });
+      console.log("poll refetched");
+    },
+    isRunActiveProps.isRunActive ? 3e3 : null
+  );
+  return null;
+};
+
+// src/hooks/actions/useManageActions/index.tsx
+var import_react13 = require("react");
+
+// src/hooks/actions/useHandleAction/index.tsx
+var import_react_query6 = require("@tanstack/react-query");
+var useHandleAction = (args = () => {
+}) => {
+  const superinterfaceContext = useSuperinterfaceContext();
+  const { meta } = useMeta();
+  const props = (0, import_react_query6.useMutation)(extendOptions({
+    defaultOptions: superinterfaceContext.mutationOptions.handleAction,
+    args,
+    meta
+  }));
+  return {
+    ...props,
+    handleAction: props.mutate
+  };
+};
+
+// src/hooks/actions/useManageActions/index.tsx
+var useManageActions = (args) => {
+  const latestRunProps = useLatestRun(args);
+  const handleActionProps = useHandleAction(args);
+  (0, import_react13.useEffect)(() => {
+    if (handleActionProps.isPending)
+      return;
+    if (latestRunProps.isFetching)
+      return;
+    if (!latestRunProps.latestRun)
+      return;
+    if (latestRunProps.latestRun.status !== "requires_action")
+      return;
+    console.log("requires action", {
+      latestRunProps
+    });
+    handleActionProps.handleAction({
+      latestRun: latestRunProps.latestRun,
+      ...args
+    });
+  }, [handleActionProps, latestRunProps]);
+  return null;
+};
+
+// src/hooks/threads/useThreadLifecycles/index.tsx
+var useThreadLifecycles = (args) => {
+  useManageRuns(args);
+  useManageActions(args);
+  usePolling(args);
+  return null;
+};
+
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var import_react14 = require("react");
+
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var import_lodash5 = __toESM(require("lodash"));
+var import_radash4 = require("radash");
+
+// src/lib/messages/order.ts
+var import_radash3 = require("radash");
+var order = ({ messages: messages2 }) => (0, import_radash3.sort)(messages2, (m) => m.created_at, true);
+
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/newGroupItem.ts
+var newGroupItem = ({ message }) => ({
+  id: message.id,
+  role: message.role,
+  createdAt: message.created_at,
+  messages: [message]
+});
+
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/newGroup/index.ts
+var newGroup = ({ groups, message }) => [
+  ...groups,
+  newGroupItem({
+    message
+  })
+];
+
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var messageGroups = ({
+  messages: messages2
+}) => import_lodash5.default.reduce(
+  order({ messages: messages2 }),
+  (groups, message) => {
+    const group = (0, import_radash4.last)(groups);
+    if (!group)
+      return newGroup({ groups, message });
+    if (group.role !== message.role) {
+      return newGroup({
+        groups,
+        message
+      });
+    }
+    return [
+      ...import_lodash5.default.dropRight(groups),
+      {
+        ...group,
+        messages: [...group.messages, message]
+      }
+    ];
+  },
+  []
+);
+
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var useMessageGroups = ({
+  messages: messages2
+}) => (0, import_react14.useMemo)(
+  () => ({
+    messageGroups: messageGroups({ messages: messages2 })
+  }),
+  [messages2]
+);
+
+// src/components/messages/Messages/Content/MessageGroup/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/messageGroups/MessagesGroupBase/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_runtime5 = require("react/jsx-runtime");
+var AssistantAvatarContext = (0, import_react15.createContext)(
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_themes5.Avatar,
+    {
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icons.LightningBoltIcon, {}),
+      size: "1"
+    }
+  )
+);
+
+// src/components/messageGroups/MessagesGroupBase/AssistantAvatar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AssistantAvatar = () => {
+  const AssistantAvatarContextValue = (0, import_react16.useContext)(AssistantAvatarContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_themes6.Flex,
+    {
+      shrink: "0",
+      className: "rounded-3 overflow-hidden h-[24px] w-[24px]",
+      children: AssistantAvatarContextValue
+    }
+  );
+};
+
+// src/contexts/assistants/AssistantNameContext/index.tsx
+var import_react17 = require("react");
+var AssistantNameContext = (0, import_react17.createContext)("Assistant");
+
+// src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
+var import_themes23 = require("@radix-ui/themes");
+
+// src/components/messages/Message/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_runtime7 = require("react/jsx-runtime");
+var ToolCallBase = ({
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_themes7.Flex,
+  {
+    py: "1",
+    ml: "-2",
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes7.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_themes7.Button,
+      {
+        size: "1",
+        color: "gold",
+        variant: "outline",
+        style: {
+          boxShadow: "none"
+        },
+        children
+      }
+    ) })
+  }
+);
+
+// src/components/toolCalls/ToolCallBase/ToolCallTitle.tsx
+var import_themes8 = require("@radix-ui/themes");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ToolCallTitle = ({
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  import_themes8.Text,
+  {
+    weight: "regular",
+    children
+  }
+);
+
+// src/components/functions/FunctionBase/Icon.tsx
+var import_react_icons2 = require("@radix-ui/react-icons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Icon = ({
+  runStep
+}) => {
+  if (runStep.completed_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons2.CheckCircledIcon, {});
+  } else if (runStep.cancelled_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons2.CircleBackslashIcon, {});
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons2.CircleIcon, {});
+  }
+};
+
+// src/components/functions/FunctionBase/Content.tsx
+var import_react19 = require("react");
+var import_themes9 = require("@radix-ui/themes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Content = ({
+  fn
+}) => {
+  const args = (0, import_react19.useMemo)(() => {
+    let result = null;
+    try {
+      result = JSON.parse(fn.arguments);
+    } catch (error) {
+      console.error(error);
+    }
+    return result;
+  }, [fn]);
+  const output = (0, import_react19.useMemo)(() => {
+    if (!fn.output) {
+      return null;
+    }
+    let 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_runtime10.jsxs)(
+    import_themes9.Code,
+    {
+      variant: "ghost",
+      color: "gold",
+      className: "whitespace-pre break-words",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Box, { children: args && JSON.stringify(args, null, 2) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes9.Box, { children: output && JSON.stringify(output, null, 2) })
+      ]
+    }
+  );
+};
+
+// src/components/functions/FunctionBase/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FunctionBase = ({
+  fn,
+  runStep,
+  title: title2
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_themes10.PopoverRoot, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ToolCallBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { runStep }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolCallTitle, { children: title2 })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_themes10.PopoverContent,
+    {
+      className: "max-h-[500px]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Content, { fn })
+    }
+  )
+] });
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/lib/title.ts
+var title = ({
+  fn,
+  runStep
+}) => {
+  if (runStep.completed_at) {
+    return `Finished ${fn.name}`;
+  } else if (runStep.cancelled_at) {
+    return `Cancelled ${fn.name}`;
+  } else {
+    return `Calling ${fn.name}`;
+  }
+};
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DefaultFunction = ({
+  fn,
+  runStep
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  FunctionBase,
+  {
+    fn,
+    runStep,
+    title: title({ runStep, fn })
+  }
+);
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
+var import_jsx_runtime13 = (
+  // @ts-ignore-next-line
+  require("react/jsx-runtime")
+);
+var Fn = ({
+  fn,
+  runStep
+}) => {
+  const functionComponentsContext = (0, import_react20.useContext)(FunctionComponentsContext);
+  const Component = functionComponentsContext[fn.name] || DefaultFunction;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Component,
+    {
+      fn,
+      runStep
+    }
+  );
+};
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
+var import_themes11 = require("@radix-ui/themes");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CodeInterpreter = ({
+  codeInterpreter
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes11.Flex, { children: codeInterpreter.input });
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ToolCall = ({
+  toolCall,
+  runStep
+}) => {
+  if (toolCall.type === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Fn,
+      {
+        fn: toolCall.function,
+        runStep
+      }
+    );
+  }
+  if (toolCall.type === "code_interpreter") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      CodeInterpreter,
+      {
+        codeInterpreter: toolCall.code_interpreter,
+        runStep
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes12.Flex, { children: toolCall.type });
+};
+
+// 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_runtime16 = require("react/jsx-runtime");
+var Starting = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes13.PopoverRoot, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToolCallBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons3.CircleIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToolCallTitle, { children: "Starting actions" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_themes13.PopoverContent,
+    {
+      className: "max-h-[500px]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes13.Text, { children: "Getting ready to connect to domain API" })
+    }
+  )
+] });
+
+// src/components/runSteps/RunStep/ToolCalls/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ToolCalls = ({
+  stepDetails,
+  runStep
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  import_themes14.Flex,
+  {
+    direction: "column",
+    children: [
+      !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Starting, {}),
+      stepDetails.tool_calls.map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ToolCall,
+        {
+          toolCall,
+          runStep
+        },
+        toolCall.id
+      ))
+    ]
+  }
+);
+
+// src/components/runSteps/RunStep/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var RunStep = ({
+  runStep
+}) => {
+  if (runStep.step_details.type === "tool_calls") {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ToolCalls,
+      {
+        stepDetails: runStep.step_details,
+        runStep
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/runSteps/RunSteps/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var RunSteps = ({
+  runSteps
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_themes15.Flex,
+  {
+    direction: "column-reverse",
+    children: runSteps.map((runStep) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      RunStep,
+      {
+        runStep
+      },
+      runStep.id
+    ))
+  }
+);
+
+// src/components/messages/Message/TextContent/index.tsx
+var import_react22 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
+
+// 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_runtime20 = require("react/jsx-runtime");
+var Paragraph = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_themes16.Box,
+  {
+    pb: "3",
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_themes16.Text,
+      {
+        size: "3",
+        className: "whitespace-pre-line break-words",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Link = ({ children, href }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  import_themes17.Link,
+  {
+    href,
+    children
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var UnorderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_themes18.Box,
+  {
+    pb: "3",
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "ul",
+      {
+        className: "list-inside",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
+var import_themes19 = require("@radix-ui/themes");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var OrderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  import_themes19.Box,
+  {
+    pb: "3",
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "ol",
+      {
+        className: "list-inside",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ListItem = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  import_themes20.Box,
+  {
+    pb: "1",
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children })
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Strong = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes21.Strong, { 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: [],
+  components
+});
+
+// src/components/messages/Message/TextContent/index.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TextContent = ({
+  content
+}) => {
+  const markdownContext = (0, import_react22.useContext)(MarkdownContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_markdown.default,
+    {
+      ...markdownContext,
+      children: content.text.value
+    }
+  );
+};
+
+// src/components/messages/Message/index.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Message = ({
+  message
+}) => {
+  const [olderRunSteps, laterRunSteps] = (0, import_react23.useMemo)(() => {
+    if (!message.runSteps.length)
+      return [[], []];
+    const messageCreationRunStepIndex = message.runSteps.findIndex((runStep) => {
+      if (runStep.step_details.type !== "message_creation")
+        return;
+      return runStep.step_details.message_creation.message_id === message.id;
+    });
+    let nextRunStepIndex = message.runSteps.slice(0, messageCreationRunStepIndex).findLastIndex((runStep) => runStep.step_details.type === "message_creation");
+    if (nextRunStepIndex === -1) {
+      nextRunStepIndex = 0;
+    }
+    const laterRunSteps2 = message.runSteps.slice(nextRunStepIndex, messageCreationRunStepIndex);
+    const prevRunStepIndex = message.runSteps.slice(messageCreationRunStepIndex + 1).findIndex((runStep) => runStep.step_details.type === "message_creation");
+    let olderRunSteps2;
+    if (prevRunStepIndex === -1) {
+      olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1);
+    } else {
+      olderRunSteps2 = message.runSteps.slice(messageCreationRunStepIndex + 1, messageCreationRunStepIndex + prevRunStepIndex);
+    }
+    return [olderRunSteps2, laterRunSteps2];
+  }, [message]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes22.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      RunSteps,
+      {
+        runSteps: olderRunSteps
+      }
+    ),
+    message.content.map((content, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_themes22.Box,
+      {
+        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextContent, { content })
+      },
+      index
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      RunSteps,
+      {
+        runSteps: laterRunSteps
+      }
+    )
+  ] });
+};
+
+// src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Content2 = ({
+  messageGroup
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  import_themes23.Flex,
+  {
+    direction: "column-reverse",
+    children: messageGroup.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      Message,
+      {
+        message
+      },
+      message.id
+    ))
+  }
+);
+
+// src/components/messages/Messages/Content/MessageGroup/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var MessageGroup = ({
+  messageGroup
+}) => {
+  const assistantNameContext = (0, import_react24.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(MessagesGroupBase, { 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, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Name, { children: messageGroup.role === "user" ? "You" : assistantNameContext }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        Content2,
+        {
+          messageGroup
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/messages/Messages/Content/index.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Content3 = ({
+  messages: messages2
+}) => {
+  const { messageGroups: messageGroups2 } = useMessageGroups({
+    messages: messages2
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: messageGroups2.map((messageGroup) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    MessageGroup,
+    {
+      messageGroup
+    },
+    messageGroup.id
+  )) });
+};
+
+// src/components/messages/Messages/ProgressMessage/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 = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  import_themes25.Box,
+  {
+    height: "4",
+    width: "4",
+    shrink: "0",
+    mt: "1",
+    className: "animate-pulse bg-gray-12 rounded-3"
+  }
+);
+
+// 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 = ({
+  children
+}) => {
+  const assistantNameContext = (0, import_react25.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MessagesGroupBase, { 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/messages/Messages/ProgressMessage/index.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ProgressMessage = ({
+  latestMessage,
+  isRunActive: isRunActive2
+}) => {
+  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)(MessagesGroupBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_themes27.Box, { pl: "5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StartingContentSkeleton, {})
+  ] });
+};
+
+// src/components/messages/Messages/index.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Messages = ({
+  children,
+  ...args
+}) => {
+  const {
+    messages: messages2,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useMessages(args);
+  useThreadLifecycles(args);
+  const { containerRef, loaderRef } = useInfiniteScroll({
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  });
+  const { isRunActive: isRunActive2 } = useIsRunActive(args);
+  const { latestMessage } = useLatestMessage(args);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_themes28.Flex,
+    {
+      ref: containerRef,
+      direction: "column-reverse",
+      className: "overflow-auto",
+      grow: "1",
+      p: "2",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_themes28.Flex,
+          {
+            shrink: "0",
+            height: "1"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          ProgressMessage,
+          {
+            latestMessage,
+            isRunActive: isRunActive2
+          }
+        ),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          Content3,
+          {
+            messages: messages2
+          }
+        ),
+        hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          MessagesSkeleton,
+          {
+            ref: loaderRef
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_themes28.Flex,
+          {
+            shrink: "0",
+            grow: "1"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/suggestions/Suggestions/index.tsx
+var import_react26 = require("react");
+var import_themes30 = require("@radix-ui/themes");
+
+// src/components/suggestions/Suggestions/Suggestion/index.tsx
+var import_react_icons5 = require("@radix-ui/react-icons");
+var import_themes29 = require("@radix-ui/themes");
+
+// src/hooks/messages/useCreateMessage/index.ts
+var import_react_query7 = require("@tanstack/react-query");
+var useCreateMessage = (args = () => {
+}) => {
+  const superinterfaceContext = useSuperinterfaceContext();
+  const { meta } = useMeta();
+  const props = (0, import_react_query7.useMutation)(extendOptions({
+    defaultOptions: superinterfaceContext.mutationOptions.createMessage,
+    args,
+    meta
+  }));
+  return {
+    ...props,
+    createMessage: props.mutateAsync
+  };
+};
+
+// src/components/suggestions/Suggestions/Suggestion/index.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Suggestion = ({
+  suggestion,
+  ...args
+}) => {
+  const {
+    createMessage
+    // @ts-ignore-next-line
+  } = useCreateMessage(args);
+  const { isRunActive: isRunActive2 } = useIsRunActive(args);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    import_themes29.Button,
+    {
+      variant: "soft",
+      style: {
+        justifyContent: "space-between"
+      },
+      onClick: () => {
+        createMessage({
+          content: suggestion,
+          ...args
+        });
+      },
+      disabled: isRunActive2,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_themes29.Text,
+          {
+            size: "1",
+            weight: "regular",
+            children: suggestion
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_icons5.ArrowUpIcon, {})
+      ]
+    }
+  );
+};
+
+// src/components/suggestions/Suggestions/index.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Suggestions = ({
+  emptyStateSuggestions = [],
+  suggestions = [],
+  ...args
+}) => {
+  const latestMessageProps = useLatestMessage(args);
+  const isRunActiveProps = useIsRunActive(args);
+  const isDisabled = (0, import_react26.useMemo)(() => {
+    var _a, _b;
+    return (
+      // @ts-ignore-next-line
+      ((_b = (_a = latestMessageProps.latestMessage) == null ? void 0 : _a.metadata) == null ? void 0 : _b.isBlocking) || isRunActiveProps.isRunActive
+    );
+  }, [latestMessageProps, isRunActiveProps]);
+  if (latestMessageProps.isLoading)
+    return null;
+  if (isDisabled)
+    return null;
+  if (!latestMessageProps.latestMessage && emptyStateSuggestions.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_themes30.Grid,
+      {
+        columns: {
+          initial: "1",
+          md: "2"
+        },
+        gap: "2",
+        py: "2",
+        children: emptyStateSuggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Suggestion,
+          {
+            suggestion,
+            ...args
+          },
+          suggestion
+        ))
+      }
+    );
+  }
+  if (latestMessageProps.latestMessage.role === "assistant") {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_themes30.Grid,
+      {
+        columns: {
+          initial: "3",
+          md: "4"
+        },
+        gap: "2",
+        py: "2",
+        children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Suggestion,
+          {
+            suggestion,
+            ...args
+          },
+          suggestion
+        ))
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/messages/Form/index.tsx
+var import_themes32 = require("@radix-ui/themes");
+var import_react28 = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_zod = require("zod");
+var import_zod2 = require("@hookform/resolvers/zod");
+var import_react_use2 = require("react-use");
+
+// src/components/textareas/TextareaBase/index.tsx
+var import_react27 = require("react");
+var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var UPSCALE_RATIO = 16 / 14;
+var TextareaBase = (0, import_react27.forwardRef)(function TextareaBase2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_textarea_autosize.default,
+    {
+      ref,
+      className: "textarea-base",
+      style: {
+        resize: "none",
+        fontSize: `${14 * UPSCALE_RATIO}px`,
+        lineHeight: `${24 * UPSCALE_RATIO}px`,
+        transform: `scale(${1 / UPSCALE_RATIO})`,
+        margin: `0 ${(-100 * UPSCALE_RATIO + 100) / 2}%`,
+        width: `${100 * UPSCALE_RATIO}%`,
+        maxWidth: `${100 * UPSCALE_RATIO}%`,
+        flexGrow: 1,
+        display: "flex"
+      },
+      ...props
+    }
+  );
+});
+
+// src/components/messages/Form/Submit/index.tsx
+var import_react_icons6 = require("@radix-ui/react-icons");
+var import_themes31 = require("@radix-ui/themes");
+
+// src/components/spinners/Spinner/index.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Spinner = (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  "svg",
+  {
+    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",
+    className: "h-4 w-4 animate-spin",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+);
+
+// src/components/messages/Form/Submit/index.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Submit = ({
+  isLoading,
+  isDisabled
+}) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  import_themes31.Button,
+  {
+    type: "submit",
+    color: "gray",
+    highContrast: true,
+    radius: "large",
+    disabled: isLoading || isDisabled,
+    children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons6.ArrowUpIcon, {})
+  }
+);
+
+// src/components/messages/Form/index.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var schema = import_zod.z.object({
+  content: import_zod.z.string().min(1).max(300)
+});
+var Form = ({
+  children,
+  ...args
+} = {}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset
+  } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_zod2.zodResolver)(schema)
+  });
+  const { isRunActive: isRunActive2 } = useIsRunActive(args);
+  const isLoading = (0, import_react28.useMemo)(() => isRunActive2 || isSubmitting, [
+    isRunActive2,
+    isSubmitting
+  ]);
+  const {
+    createMessage
+    // @ts-ignore-next-line
+  } = useCreateMessage(args);
+  const onSubmit = async (data2) => {
+    reset();
+    await createMessage({
+      content: data2.content,
+      ...args
+    });
+  };
+  const { latestMessage } = useLatestMessage(args);
+  const isDisabled = (0, import_react28.useMemo)(() => {
+    var _a;
+    return (
+      // @ts-ignore-next-line
+      (_a = latestMessage == null ? void 0 : latestMessage.metadata) == null ? void 0 : _a.isBlocking
+    );
+  }, [latestMessage, isLoading]);
+  const isInputDisabled = (0, import_react28.useMemo)(() => isLoading || isDisabled || false, [isLoading, isDisabled]);
+  const isInputDisabledPrevious = (0, import_react_use2.usePrevious)(isInputDisabled);
+  const textareaRef = (0, import_react28.useRef)(null);
+  const textareaProps = register("content");
+  (0, import_react28.useEffect)(() => {
+    if (isInputDisabled)
+      return;
+    if (!isInputDisabledPrevious)
+      return;
+    if (!textareaRef.current)
+      return;
+    textareaRef.current.focus();
+  }, [isInputDisabled, isInputDisabledPrevious, textareaProps]);
+  const assistantNameContext = (0, import_react28.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    import_themes32.Container,
+    {
+      size: "2",
+      px: "2",
+      grow: "0",
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_themes32.Flex,
+          {
+            direction: "column",
+            shrink: "0",
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_themes32.Flex,
+              {
+                direction: "column",
+                shrink: "0",
+                className: "bg-gray-1",
+                pb: "4",
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  "form",
+                  {
+                    onSubmit: handleSubmit(onSubmit),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+                      import_themes32.Flex,
+                      {
+                        className: `rounded-3 border-gray-5 border border-solid ${errors.content ? "border-red-9 bg-red-2" : ""}`,
+                        p: "2",
+                        pl: "4",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                            import_themes32.Text,
+                            {
+                              size: "2",
+                              className: "grow",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                import_themes32.Flex,
+                                {
+                                  grow: "1",
+                                  direction: "column",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                    TextareaBase,
+                                    {
+                                      minRows: 1,
+                                      placeholder: `Message ${assistantNameContext}...`,
+                                      disabled: isLoading || isDisabled,
+                                      onKeyDown: (e) => {
+                                        if (e.key === "Enter" && !e.shiftKey) {
+                                          e.preventDefault();
+                                          handleSubmit(onSubmit)();
+                                        }
+                                      },
+                                      autoFocus: true,
+                                      ...textareaProps,
+                                      ref: (e) => {
+                                        textareaProps.ref(e);
+                                        textareaRef.current = e;
+                                      }
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                            import_themes32.Flex,
+                            {
+                              shrink: "0",
+                              align: "end",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                Submit,
+                                {
+                                  isLoading,
+                                  isDisabled
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/core/SuperinterfaceProvider/index.tsx
+var import_react29 = require("react");
+
+// src/lib/misc/merge/index.ts
+var import_lodash7 = __toESM(require("lodash"));
+
+// src/lib/misc/merge/customizer.ts
+var import_lodash6 = __toESM(require("lodash"));
+var customizer = (objectValue, srcValue) => {
+  if (!import_lodash6.default.isArray(objectValue))
+    return;
+  return srcValue;
+};
+
+// src/lib/misc/merge/index.ts
+var merge2 = (obj, ...sources) => import_lodash7.default.mergeWith(import_lodash7.default.cloneDeep(obj), ...sources, customizer);
+
+// src/components/core/SuperinterfaceProvider/index.tsx
+var import_react_query8 = require("@tanstack/react-query");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SuperinterfaceProvider = ({
+  children,
+  ...rest
+}) => {
+  const [queryClient] = (0, import_react29.useState)(
+    () => new import_react_query8.QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          // With SSR, we usually want to set some default staleTime
+          // above 0 to avoid refetching immediately on the client
+          staleTime: 1e4
+        },
+        mutations: {
+          retry: false
+        }
+      }
+    })
+  );
+  const superinterfaceContext = useSuperinterfaceContext();
+  const value = merge2(
+    superinterfaceContext,
+    // @ts-ignore-next-line
+    rest
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    SuperinterfaceContext.Provider,
+    {
+      value,
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_query8.QueryClientProvider, { client: queryClient, children })
+    }
+  );
+};
+
+// src/hooks/markdown/useMarkdownContext/index.ts
+var import_react30 = require("react");
+var useMarkdownContext = () => (0, import_react30.useContext)(MarkdownContext);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AssistantAvatarContext,
+  AssistantNameContext,
+  Form,
+  FunctionBase,
+  FunctionComponentsContext,
+  MarkdownContext,
+  Messages,
+  Suggestions,
+  SuperinterfaceProvider,
+  useCreateMessage,
+  useIsRunActive,
+  useLatestMessage,
+  useMarkdownContext,
+  useMessages,
+  useThreadLifecycles
+});
 //# sourceMappingURL=index.js.map