@superinterface/react 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,23 +1,1852 @@
 "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, {
+  Form: () => Form,
+  Messages: () => Messages,
+  QueryClient: () => import_react_query8.QueryClient,
+  QueryClientProvider: () => import_react_query8.QueryClientProvider,
+  useCreateMessage: () => useCreateMessage,
+  useIsRunActive: () => useIsRunActive,
+  useLatestMessage: () => useLatestMessage,
+  useMessages: () => useMessages,
+  useQuery: () => import_react_query8.useQuery,
+  useQueryClient: () => import_react_query8.useQueryClient,
+  useThreadLifecycles: () => useThreadLifecycles
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/messages/Messages/index.tsx
+var import_themes29 = 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_react5 = require("react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/hooks/messages/useMessages/lib/queryOptions/queryKey.ts
+var queryKey = () => ["messages"];
+
+// src/hooks/messages/useMessages/lib/queryOptions/index.ts
+var queryOptions = {
+  queryKey: queryKey(),
+  // queryFn: ({
+  //   pageParam,
+  // }: { pageParam?: string }) => (
+  //   queryFn({
+  //     ...(pageParam ? { cursor: pageParam } : {}),
+  //   })
+  // ),
+  initialPageParam: void 0,
+  getNextPageParam: (lastPage) => {
+    if (!lastPage.hasNextPage)
+      return null;
+    return lastPage.lastId;
+  }
+};
+
+// 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 = ({
+  messagesQueryOptions
+}) => {
+  const props = (0, import_react_query.useInfiniteQuery)({
+    ...queryOptions,
+    ...messagesQueryOptions
+  });
+  return (0, import_react5.useMemo)(() => ({
+    ...props,
+    messages: messages({ props })
+  }), [props]);
+};
+
+// src/hooks/runs/useManageRuns/index.tsx
+var import_react9 = require("react");
+
+// src/hooks/messages/useLatestMessage/index.ts
+var import_react6 = require("react");
+var useLatestMessage = (args) => {
+  const props = useMessages(args);
+  return (0, import_react6.useMemo)(() => ({
+    ...props,
+    latestMessage: props.messages[0] || null
+  }), [props]);
+};
+
+// src/hooks/runs/useLatestRun/index.ts
+var import_react8 = require("react");
+
+// src/hooks/runs/useRuns/index.tsx
+var import_react7 = require("react");
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/hooks/runs/useRuns/lib/queryOptions/queryKey.ts
+var queryKey2 = () => ["runs"];
+
+// src/hooks/runs/useRuns/lib/queryOptions/index.ts
+var queryOptions2 = {
+  queryKey: queryKey2(),
+  // queryFn: ({
+  //   pageParam,
+  // }: { pageParam?: string }) => (
+  //   queryFn({
+  //     assistantConversationId,
+  //   })
+  // ),
+  initialPageParam: void 0,
+  getNextPageParam: (lastPage) => {
+    if (!lastPage.hasNextPage)
+      return null;
+    return lastPage.lastId;
+  },
+  limit: 10
+};
+
+// 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 = ({
+  runsQueryOptions
+}) => {
+  const props = (0, import_react_query2.useInfiniteQuery)({
+    ...queryOptions2,
+    ...runsQueryOptions
+  });
+  return (0, import_react7.useMemo)(() => ({
+    ...props,
+    runs: getRuns({ data: props.data })
+  }), [props]);
+};
+
+// src/hooks/runs/useLatestRun/index.ts
+var useLatestRun = (args) => {
+  const props = useRuns(args);
+  return (0, import_react8.useMemo)(() => ({
+    ...props,
+    latestRun: props.runs[0]
+  }), [props]);
+};
+
+// src/hooks/runs/useCreateRun/index.ts
+var import_react_query3 = require("@tanstack/react-query");
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onSuccess.ts
+var onSuccess = ({
+  queryClient
+}) => (response) => queryClient.setQueryData(
+  queryKey2(),
+  (prevData) => {
+    if (!prevData) {
+      return {
+        pageParams: [],
+        pages: [
+          {
+            data: [response.run],
+            hasNextPage: false,
+            lastId: response.run.id
+          }
+        ]
+      };
+    }
+    const [latestPage, ...pagesRest] = prevData.pages;
+    return {
+      ...prevData,
+      pages: [
+        {
+          ...latestPage,
+          data: [
+            response.run,
+            ...latestPage.data
+          ]
+        },
+        ...pagesRest
+      ]
+    };
+  }
+);
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onSettled.ts
+var onSettled = ({
+  queryClient
+}) => (response) => {
+  if (!response) {
+    throw new Error("useCreateRun onSettled: response is undefined");
+  }
+  queryClient.invalidateQueries({
+    queryKey: queryKey()
+  });
+  queryClient.invalidateQueries({
+    queryKey: queryKey2()
+  });
+};
+
+// src/hooks/runs/useCreateRun/lib/mutationOptions/index.ts
+var mutationOptions = ({
+  queryClient
+}) => ({
+  // mutationFn,
+  onSuccess: onSuccess({ queryClient }),
+  onSettled: onSettled({ queryClient })
+});
+
+// src/hooks/runs/useCreateRun/index.ts
+var useCreateRun = ({
+  createRunMutationOptions
+}) => {
+  const queryClient = (0, import_react_query3.useQueryClient)();
+  const mutationProps = (0, import_react_query3.useMutation)({
+    ...mutationOptions({
+      queryClient
+    }),
+    ...createRunMutationOptions
+  });
+  return {
+    ...mutationProps,
+    createRun: mutationProps.mutate
+  };
+};
+
+// src/lib/optimistic/isOptimistic.ts
+var import_lodash2 = __toESM(require("lodash"));
+var isOptimistic = ({
+  id
+}) => import_lodash2.default.startsWith(id, "-");
+
+// src/hooks/runs/useManageRuns/index.tsx
+var useManageRuns = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createRunMutationOptions
+}) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions
+  });
+  const latestMessageProps = useLatestMessage({
+    messagesQueryOptions
+  });
+  const createRunProps = useCreateRun({
+    createRunMutationOptions
+  });
+  (0, import_react9.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();
+    }
+  }, [
+    createRunProps,
+    latestRunProps,
+    latestMessageProps
+  ]);
+  return null;
+};
+
+// src/hooks/runs/usePolling/index.tsx
+var import_react_query5 = require("@tanstack/react-query");
+
+// src/hooks/runs/useIsRunActive/index.tsx
+var import_react10 = require("react");
+var import_react_query4 = require("@tanstack/react-query");
+
+// src/lib/runs/isRunEditingMessage/index.ts
+var import_lodash3 = __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_lodash3.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",
+  // 'completed',
+  "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 = ({
+  messagesQueryOptions,
+  runsQueryOptions
+}) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions
+  });
+  const latestMessageProps = useLatestMessage({
+    messagesQueryOptions
+  });
+  const isMutating = (0, import_react_query4.useIsMutating)();
+  return (0, import_react10.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 ({
+  queryClient,
+  latestRun
+}) => {
+  await queryClient.invalidateQueries({
+    queryKey: queryKey()
+  });
+  await queryClient.invalidateQueries({
+    queryKey: queryKey2()
+  });
+};
+
+// src/hooks/runs/usePolling/index.tsx
+var usePolling = ({
+  messagesQueryOptions,
+  runsQueryOptions
+}) => {
+  const queryClient = (0, import_react_query5.useQueryClient)();
+  const isRunActiveProps = useIsRunActive({
+    messagesQueryOptions,
+    runsQueryOptions
+  });
+  (0, import_react_use.useInterval)(
+    () => {
+      refetch({
+        queryClient,
+        latestRun: isRunActiveProps.latestRun
+      });
+      console.log("poll refetched");
+    },
+    isRunActiveProps.isRunActive ? 3e3 : null
+  );
+  return null;
+};
+
+// src/hooks/actions/useManageActions/index.tsx
+var import_react11 = require("react");
+
+// src/hooks/actions/useHandleAction/index.tsx
+var import_react_query6 = require("@tanstack/react-query");
+
+// src/hooks/actions/useHandleAction/lib/mutationOptions/onSettled.ts
+var onSettled2 = ({
+  queryClient
+}) => (response) => {
+  if (!response) {
+    throw new Error("useHandleAction onSettled: response is undefined");
+  }
+  queryClient.invalidateQueries({
+    queryKey: queryKey()
+  });
+  queryClient.invalidateQueries({
+    queryKey: queryKey2()
+  });
+};
+
+// src/hooks/actions/useHandleAction/lib/mutationOptions/index.ts
+var mutationOptions2 = ({
+  queryClient
+}) => ({
+  // mutationFn,
+  onSettled: onSettled2({ queryClient })
+});
+
+// src/hooks/actions/useHandleAction/index.tsx
+var useHandleAction = ({
+  handleActionMutationOptions
+}) => {
+  const queryClient = (0, import_react_query6.useQueryClient)();
+  const mutationProps = (0, import_react_query6.useMutation)({
+    ...mutationOptions2({
+      queryClient
+    }),
+    ...handleActionMutationOptions
+  });
+  return {
+    ...mutationProps,
+    handleAction: mutationProps.mutate
+  };
+};
+
+// src/hooks/actions/useManageActions/index.tsx
+var useManageActions = ({
+  runsQueryOptions,
+  handleActionMutationOptions
+}) => {
+  const latestRunProps = useLatestRun({
+    runsQueryOptions
+  });
+  const handleActionProps = useHandleAction({
+    handleActionMutationOptions
+  });
+  (0, import_react11.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 });
+  }, [handleActionProps, latestRunProps]);
+  return null;
+};
+
+// src/hooks/threads/useThreadLifecycles/index.tsx
+var useThreadLifecycles = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createRunMutationOptions,
+  handleActionMutationOptions
+}) => {
+  useManageRuns({
+    messagesQueryOptions,
+    runsQueryOptions,
+    createRunMutationOptions
+  });
+  useManageActions({
+    runsQueryOptions,
+    handleActionMutationOptions
+  });
+  usePolling({
+    messagesQueryOptions,
+    runsQueryOptions
+  });
+  return null;
+};
+
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var import_react12 = require("react");
+
+// src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
+var import_lodash4 = __toESM(require("lodash"));
+var import_radash2 = require("radash");
+
+// src/lib/messages/order.ts
+var import_radash = require("radash");
+var order = ({ messages: messages2 }) => (0, import_radash.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_lodash4.default.reduce(
+  order({ messages: messages2 }),
+  (groups, message) => {
+    const group = (0, import_radash2.last)(groups);
+    if (!group)
+      return newGroup({ groups, message });
+    if (group.role !== message.role) {
+      return newGroup({
+        groups,
+        message
+      });
+    }
+    return [
+      ...import_lodash4.default.dropRight(groups),
+      {
+        ...group,
+        messages: [...group.messages, message]
+      }
+    ];
+  },
+  []
+);
+
+// src/hooks/messageGroups/useMessageGroups/index.ts
+var useMessageGroups = ({
+  messages: messages2
+}) => (0, import_react12.useMemo)(
+  () => ({
+    messageGroups: messageGroups({ messages: messages2 })
+  }),
+  [messages2]
+);
+
+// src/components/messages/Messages/Content/MessageGroup/index.tsx
+var import_react21 = require("react");
+var import_themes25 = require("@radix-ui/themes");
+var import_react_icons4 = require("@radix-ui/react-icons");
+
+// src/components/messageGroups/MessagesGroupBase/AssistantAvatar.tsx
+var import_react14 = require("react");
+var import_themes6 = require("@radix-ui/themes");
+
+// src/contexts/avatars/AssistantAvatarContext/index.tsx
+var import_react13 = 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_react13.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_react14.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_react15 = require("react");
+var AssistantNameContext = (0, import_react15.createContext)("Assistant");
+
+// src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
+var import_themes24 = require("@radix-ui/themes");
+
+// src/components/messages/Message/index.tsx
+var import_react20 = require("react");
+var import_themes23 = require("@radix-ui/themes");
+
+// src/components/runSteps/RunSteps/index.tsx
+var import_themes16 = require("@radix-ui/themes");
+
+// src/components/runSteps/RunStep/ToolCalls/index.tsx
+var import_themes15 = require("@radix-ui/themes");
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_themes13 = require("@radix-ui/themes");
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/index.tsx
+var import_themes10 = require("@radix-ui/themes");
+
+// src/components/toolCalls/ToolCallBase/index.tsx
+var import_react16 = require("react");
+var import_themes7 = require("@radix-ui/themes");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ToolCallBase = (0, import_react16.forwardRef)(function ToolCallBase2({
+  children
+}, ref) {
+  return /* @__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/runSteps/RunStep/ToolCalls/ToolCall/Fn/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/runSteps/RunStep/ToolCalls/ToolCall/Fn/Content/index.tsx
+var import_react17 = require("react");
+var import_themes9 = require("@radix-ui/themes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Content = ({
+  fn
+}) => {
+  const args = (0, import_react17.useMemo)(() => {
+    let result = null;
+    try {
+      result = JSON.parse(fn.arguments);
+    } catch (error) {
+      console.error(error);
+    }
+    return result;
+  }, [fn]);
+  const output = (0, import_react17.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/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/Title.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Title = ({
+  runStep
+}) => {
+  if (runStep.completed_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: "Finished getting domains availability" });
+  } else if (runStep.cancelled_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: "Cancelled getting domains availability" });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: "Getting domains availability" });
+  }
+};
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Availabilities = ({
+  fn,
+  runStep
+}) => /* @__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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolCallTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Title, { runStep }) })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_themes10.PopoverContent,
+    {
+      className: "max-h-[500px]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Content, { fn })
+    }
+  )
+] });
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/index.tsx
+var import_themes11 = require("@radix-ui/themes");
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/Title.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Title2 = ({
+  runStep
+}) => {
+  if (runStep.completed_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Finished getting domains scores" });
+  } else if (runStep.cancelled_at) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Cancelled getting domains scores" });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Getting domains scores" });
+  }
+};
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Scores = ({
+  fn,
+  runStep
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes11.PopoverRoot, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToolCallBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { runStep }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToolCallTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Title2, { runStep }) })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_themes11.PopoverContent,
+    {
+      className: "max-h-[500px]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Content, { fn })
+    }
+  )
+] });
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Fn = ({
+  fn,
+  runStep
+}) => {
+  if (fn.name === "getAvailabilities") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Availabilities,
+      {
+        fn,
+        runStep
+      }
+    );
+  } else if (fn.name === "getScores") {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Scores,
+      {
+        fn,
+        runStep
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/CodeInterpreter/index.tsx
+var import_themes12 = require("@radix-ui/themes");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var CodeInterpreter = ({
+  codeInterpreter
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes12.Flex, { children: codeInterpreter.input });
+
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ToolCall = ({
+  toolCall,
+  runStep
+}) => {
+  if (toolCall.type === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Fn,
+      {
+        fn: toolCall.function,
+        runStep
+      }
+    );
+  }
+  if (toolCall.type === "code_interpreter") {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      CodeInterpreter,
+      {
+        codeInterpreter: toolCall.code_interpreter,
+        runStep
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Flex, { children: toolCall.type });
+};
+
+// src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
+var import_themes14 = require("@radix-ui/themes");
+var import_react_icons3 = require("@radix-ui/react-icons");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Starting = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes14.PopoverRoot, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ToolCallBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons3.CircleIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToolCallTitle, { children: "Starting actions" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_themes14.PopoverContent,
+    {
+      className: "max-h-[500px]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Text, { children: "Getting ready to connect to domain API" })
+    }
+  )
+] });
+
+// src/components/runSteps/RunStep/ToolCalls/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ToolCalls = ({
+  stepDetails,
+  runStep
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  import_themes15.Flex,
+  {
+    direction: "column",
+    children: [
+      !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Starting, {}),
+      stepDetails.tool_calls.map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        ToolCall,
+        {
+          toolCall,
+          runStep
+        },
+        toolCall.id
+      ))
+    ]
+  }
+);
+
+// src/components/runSteps/RunStep/index.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RunStep = ({
+  runStep
+}) => {
+  if (runStep.step_details.type === "tool_calls") {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      ToolCalls,
+      {
+        stepDetails: runStep.step_details,
+        runStep
+      }
+    );
+  }
+  return null;
+};
+
+// src/components/runSteps/RunSteps/index.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var RunSteps = ({
+  runSteps
+}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  import_themes16.Flex,
+  {
+    direction: "column-reverse",
+    children: runSteps.map((runStep) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      RunStep,
+      {
+        runStep
+      },
+      runStep.id
+    ))
+  }
+);
+
+// src/components/messages/Message/TextContent/index.tsx
+var import_react19 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"));
+
+// src/contexts/markdown/MarkdownContext/index.ts
+var import_react18 = require("react");
+
+// src/contexts/markdown/MarkdownContext/lib/components/Paragraph.tsx
+var import_themes17 = require("@radix-ui/themes");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Paragraph = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  import_themes17.Box,
+  {
+    pb: "3",
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_themes17.Text,
+      {
+        size: "3",
+        className: "whitespace-pre-line break-words",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/Link.tsx
+var import_themes18 = require("@radix-ui/themes");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Link = ({ children, href }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  import_themes18.Link,
+  {
+    href,
+    children
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/UnorderedList.tsx
+var import_themes19 = require("@radix-ui/themes");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var UnorderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  import_themes19.Box,
+  {
+    pb: "3",
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "ul",
+      {
+        className: "list-inside",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/OrderedList.tsx
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var OrderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  import_themes20.Box,
+  {
+    pb: "3",
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "ol",
+      {
+        className: "list-inside",
+        children
+      }
+    )
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/ListItem.tsx
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ListItem = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  import_themes21.Box,
+  {
+    pb: "1",
+    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children })
+  }
+);
+
+// src/contexts/markdown/MarkdownContext/lib/components/Strong.tsx
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Strong = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes22.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_react18.createContext)({
+  remarkPlugins: [],
+  components
+});
+
+// src/components/messages/Message/TextContent/index.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TextContent = ({
+  content
+}) => {
+  const markdownContext = (0, import_react19.useContext)(MarkdownContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react_markdown.default,
+    {
+      ...markdownContext,
+      children: content.text.value
+    }
+  );
+};
+
+// src/components/messages/Message/index.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Message = ({
+  message
+}) => {
+  const [olderRunSteps, laterRunSteps] = (0, import_react20.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_runtime29.jsxs)(import_themes23.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      RunSteps,
+      {
+        runSteps: olderRunSteps
+      }
+    ),
+    message.content.map((content, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_themes23.Box,
+      {
+        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TextContent, { content })
+      },
+      index
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      RunSteps,
+      {
+        runSteps: laterRunSteps
+      }
+    )
+  ] });
+};
+
+// src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Content2 = ({
+  messageGroup
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  import_themes24.Flex,
+  {
+    direction: "column-reverse",
+    children: messageGroup.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Message,
+      {
+        message
+      },
+      message.id
+    ))
+  }
+);
+
+// src/components/messages/Messages/Content/MessageGroup/index.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var MessageGroup = ({
+  messageGroup
+}) => {
+  const assistantNameContext = (0, import_react21.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(MessagesGroupBase, { children: [
+    messageGroup.role === "user" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_themes25.Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_icons4.PersonIcon, {}),
+        size: "1"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AssistantAvatar, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_themes25.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Name, { children: messageGroup.role === "user" ? "You" : assistantNameContext }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        Content2,
+        {
+          messageGroup
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/messages/Messages/Content/index.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Content3 = ({
+  messages: messages2
+}) => {
+  const { messageGroups: messageGroups2 } = useMessageGroups({
+    messages: messages2
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: messageGroups2.map((messageGroup) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    MessageGroup,
+    {
+      messageGroup
+    },
+    messageGroup.id
+  )) });
+};
+
+// src/components/messages/Messages/ProgressMessage/index.tsx
+var import_themes28 = require("@radix-ui/themes");
+
+// src/components/skeletons/StartingContentSkeleton/index.tsx
+var import_themes26 = require("@radix-ui/themes");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var StartingContentSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  import_themes26.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_react22 = require("react");
+var import_themes27 = require("@radix-ui/themes");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var StartingSkeleton = ({
+  children
+}) => {
+  const assistantNameContext = (0, import_react22.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MessagesGroupBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AssistantAvatar, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_themes27.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Name, { children: assistantNameContext }),
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StartingContentSkeleton, {})
+    ] })
+  ] });
+};
+
+// src/components/messages/Messages/ProgressMessage/index.tsx
+var import_jsx_runtime35 = 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_runtime35.jsx)(StartingSkeleton, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(MessagesGroupBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_themes28.Box, { pl: "5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StartingContentSkeleton, {})
+  ] });
+};
+
+// src/components/messages/Messages/index.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Messages = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createRunMutationOptions,
+  handleActionMutationOptions,
+  children
+}) => {
+  const {
+    messages: messages2,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  } = useMessages({
+    messagesQueryOptions
+  });
+  useThreadLifecycles({
+    messagesQueryOptions,
+    runsQueryOptions,
+    createRunMutationOptions,
+    handleActionMutationOptions
+  });
+  const { containerRef, loaderRef } = useInfiniteScroll({
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage
+  });
+  const { isRunActive: isRunActive2 } = useIsRunActive({
+    messagesQueryOptions,
+    runsQueryOptions
+  });
+  const { latestMessage } = useLatestMessage({
+    messagesQueryOptions
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_themes29.Flex,
+    {
+      ref: containerRef,
+      direction: "column-reverse",
+      className: "overflow-auto",
+      grow: "1",
+      p: "2",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_themes29.Flex,
+          {
+            shrink: "0",
+            height: "1"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          ProgressMessage,
+          {
+            latestMessage,
+            isRunActive: isRunActive2
+          }
+        ),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Content3,
+          {
+            messages: messages2
+          }
+        ),
+        hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          MessagesSkeleton,
+          {
+            ref: loaderRef
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_themes29.Flex,
+          {
+            shrink: "0",
+            grow: "1"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/messages/Form/index.tsx
+var import_themes31 = require("@radix-ui/themes");
+var import_react24 = 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_react23 = 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_react23.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/hooks/messages/useCreateMessage/index.ts
+var import_react_query7 = require("@tanstack/react-query");
+
+// src/lib/optimistic/optimisticId.ts
+var import_radash3 = require("radash");
+var optimisticId = () => `-${(0, import_radash3.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 = ({
+  queryClient
+}) => async (newMessage) => {
+  await queryClient.cancelQueries(queryKey());
+  const prevMessages = queryClient.getQueryData(queryKey());
+  queryClient.setQueryData(
+    queryKey(),
+    data({ newMessage })
+  );
+  return {
+    prevMessages,
+    newMessage
+  };
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onError.ts
+var onError = ({
+  queryClient
+}) => async (_error, newMessage, context) => {
+  if (!context) {
+    return;
+  }
+  queryClient.setQueryData(
+    queryKey(),
+    context.prevMessages
+  );
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/onSettled.ts
+var onSettled3 = ({
+  queryClient
+}) => async (response) => {
+  if (!response)
+    return;
+  await queryClient.invalidateQueries({
+    queryKey: queryKey()
+  });
+};
+
+// src/hooks/messages/useCreateMessage/lib/mutationOptions/index.ts
+var mutationOptions3 = ({
+  queryClient
+}) => ({
+  // mutationFn,
+  onMutate: onMutate({
+    queryClient
+  }),
+  onError: onError({
+    queryClient
+  }),
+  onSettled: onSettled3({
+    queryClient
+  })
+});
+
+// src/hooks/messages/useCreateMessage/index.ts
+var useCreateMessage = ({
+  createMessageMutationOptions
+}) => {
+  const queryClient = (0, import_react_query7.useQueryClient)();
+  const mutationProps = (0, import_react_query7.useMutation)({
+    ...mutationOptions3({
+      queryClient
+    }),
+    ...createMessageMutationOptions
+  });
+  return {
+    ...mutationProps,
+    createMessage: mutationProps.mutateAsync
+  };
+};
+
+// src/components/messages/Form/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_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_themes30.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_icons5.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 = ({
+  messagesQueryOptions,
+  runsQueryOptions,
+  createMessageMutationOptions
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset
+  } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_zod2.zodResolver)(schema)
+  });
+  const { isRunActive: isRunActive2 } = useIsRunActive({
+    messagesQueryOptions,
+    runsQueryOptions
+  });
+  const isLoading = (0, import_react24.useMemo)(() => isRunActive2 || isSubmitting, [
+    isRunActive2,
+    isSubmitting
+  ]);
+  const {
+    createMessage
+  } = useCreateMessage({
+    createMessageMutationOptions
+  });
+  const onSubmit = async (data2) => {
+    reset();
+    await createMessage({
+      content: data2.content
+    });
+  };
+  const { latestMessage } = useLatestMessage({
+    messagesQueryOptions
+  });
+  const isDisabled = (0, import_react24.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_react24.useMemo)(() => isLoading || isDisabled || false, [isLoading, isDisabled]);
+  const isInputDisabledPrevious = (0, import_react_use2.usePrevious)(isInputDisabled);
+  const textareaRef = (0, import_react24.useRef)(null);
+  const textareaProps = register("content");
+  (0, import_react24.useEffect)(() => {
+    if (isInputDisabled)
+      return;
+    if (!isInputDisabledPrevious)
+      return;
+    if (!textareaRef.current)
+      return;
+    textareaRef.current.focus();
+  }, [isInputDisabled, isInputDisabledPrevious, textareaProps]);
+  const assistantNameContext = (0, import_react24.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_themes31.Container,
+    {
+      size: "2",
+      px: "2",
+      grow: "0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_themes31.Flex,
+        {
+          direction: "column",
+          shrink: "0",
+          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_themes31.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_themes31.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_themes31.Text,
+                          {
+                            size: "2",
+                            className: "grow",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                              import_themes31.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_themes31.Flex,
+                          {
+                            shrink: "0",
+                            align: "end",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                              Submit,
+                              {
+                                isLoading,
+                                isDisabled
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/index.ts
+var import_react_query8 = require("@tanstack/react-query");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  Messages,
+  QueryClient,
+  QueryClientProvider,
+  useCreateMessage,
+  useIsRunActive,
+  useLatestMessage,
+  useMessages,
+  useQuery,
+  useQueryClient,
+  useThreadLifecycles
+});
 //# sourceMappingURL=index.js.map