@superinterface/react 1.0.5 → 1.1.1

package/dist/index.js

@@ -30,22 +30,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AssistantAvatarContext: () => AssistantAvatarContext,
+  AssistantNameContext: () => AssistantNameContext,
   Form: () => Form,
+  FunctionBase: () => FunctionBase,
+  FunctionComponentsContext: () => FunctionComponentsContext,
+  MarkdownContext: () => MarkdownContext,
   Messages: () => Messages,
-  QueryClient: () => import_react_query8.QueryClient,
-  QueryClientProvider: () => import_react_query8.QueryClientProvider,
+  Suggestions: () => Suggestions,
+  SuperinterfaceProvider: () => SuperinterfaceProvider,
   useCreateMessage: () => useCreateMessage,
   useIsRunActive: () => useIsRunActive,
   useLatestMessage: () => useLatestMessage,
+  useMarkdownContext: () => useMarkdownContext,
   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");
+var import_themes28 = require("@radix-ui/themes");
 
 // src/hooks/misc/useInfiniteScroll/index.tsx
 var import_react2 = require("react");
@@ -227,22 +231,21 @@ var MessagesSkeleton = (0, import_react4.forwardRef)(function MessagesSkeleton2(
 });
 
 // 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");
-var import_react_query = require("@tanstack/react-query");
 
 // src/hooks/messages/useMessages/lib/queryOptions/queryKey.ts
-var queryKey = () => ["messages"];
+var queryKey = ["messages"];
 
 // src/hooks/messages/useMessages/lib/queryOptions/index.ts
 var queryOptions = {
-  queryKey: queryKey(),
-  // queryFn: ({
-  //   pageParam,
-  // }: { pageParam?: string }) => (
-  //   queryFn({
-  //     ...(pageParam ? { cursor: pageParam } : {}),
-  //   })
-  // ),
+  queryKey,
   initialPageParam: void 0,
   getNextPageParam: (lastPage) => {
     if (!lastPage.hasNextPage)
@@ -251,60 +254,12 @@ var queryOptions = {
   }
 };
 
-// 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"];
+var queryKey2 = ["runs"];
 
 // src/hooks/runs/useRuns/lib/queryOptions/index.ts
 var queryOptions2 = {
-  queryKey: queryKey2(),
-  // queryFn: ({
-  //   pageParam,
-  // }: { pageParam?: string }) => (
-  //   queryFn({
-  //     assistantConversationId,
-  //   })
-  // ),
+  queryKey: queryKey2,
   initialPageParam: void 0,
   getNextPageParam: (lastPage) => {
     if (!lastPage.hasNextPage)
@@ -314,55 +269,171 @@ var queryOptions2 = {
   limit: 10
 };
 
-// src/hooks/runs/useRuns/lib/getRuns.ts
-var getRuns = ({
-  data: data2
+// src/lib/core/fillOption.ts
+var extended = [
+  "enabled",
+  "queryKey"
+];
+var fillOption = ({
+  value,
+  key,
+  meta,
+  args
 }) => {
-  if (!data2)
-    return [];
-  return data2.pages.reduce((acc, page) => acc.concat(page.data), []);
+  if (typeof value === "function" && extended.includes(key)) {
+    return value({
+      meta,
+      ...args
+    });
+  }
+  return value;
 };
 
-// src/hooks/runs/useRuns/index.tsx
-var useRuns = ({
-  runsQueryOptions
-}) => {
-  const props = (0, import_react_query2.useInfiniteQuery)({
-    ...queryOptions2,
-    ...runsQueryOptions
+// 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
+    })
   });
-  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/messages/useCreateMessage/lib/mutationOptions/index.ts
+var mutationOptions = {
+  onMutate,
+  onError,
+  onSettled
 };
 
-// src/hooks/runs/useCreateRun/index.ts
-var import_react_query3 = require("@tanstack/react-query");
+// src/hooks/runs/useCreateRun/lib/mutationOptions/onMutate.ts
+var onMutate2 = async (_newRun, context) => context;
 
 // src/hooks/runs/useCreateRun/lib/mutationOptions/onSuccess.ts
-var onSuccess = ({
-  queryClient
-}) => (response) => queryClient.setQueryData(
-  queryKey2(),
+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: [response.run],
+            data: [data2.run],
             hasNextPage: false,
-            lastId: response.run.id
+            lastId: data2.run.id
           }
         ]
       };
@@ -374,7 +445,7 @@ var onSuccess = ({
         {
           ...latestPage,
           data: [
-            response.run,
+            data2.run,
             ...latestPage.data
           ]
         },
@@ -385,68 +456,224 @@ var onSuccess = ({
 );
 
 // 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()
+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
+    })
   });
-  queryClient.invalidateQueries({
-    queryKey: queryKey2()
+  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 mutationOptions = ({
-  queryClient
-}) => ({
-  // mutationFn,
-  onSuccess: onSuccess({ queryClient }),
-  onSettled: onSettled({ queryClient })
+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 useCreateRun = ({
-  createRunMutationOptions
+var import_react_query4 = require("@tanstack/react-query");
+var useCreateRun = (args = () => {
 }) => {
-  const queryClient = (0, import_react_query3.useQueryClient)();
-  const mutationProps = (0, import_react_query3.useMutation)({
-    ...mutationOptions({
-      queryClient
-    }),
-    ...createRunMutationOptions
-  });
+  const superinterfaceContext = useSuperinterfaceContext();
+  const { meta } = useMeta();
+  const props = (0, import_react_query4.useMutation)(extendOptions({
+    defaultOptions: superinterfaceContext.mutationOptions.createRun,
+    args,
+    meta
+  }));
   return {
-    ...mutationProps,
-    createRun: mutationProps.mutate
+    ...props,
+    createRun: props.mutate
   };
 };
 
 // src/lib/optimistic/isOptimistic.ts
-var import_lodash2 = __toESM(require("lodash"));
+var import_lodash3 = __toESM(require("lodash"));
 var isOptimistic = ({
   id
-}) => import_lodash2.default.startsWith(id, "-");
+}) => import_lodash3.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)(() => {
+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)
@@ -460,7 +687,7 @@ var useManageRuns = ({
     if (isOptimistic({ id: latestMessageProps.latestMessage.id }))
       return;
     if (!latestRunProps.latestRun || latestMessageProps.latestMessage.created_at > latestRunProps.latestRun.created_at) {
-      createRunProps.createRun();
+      createRunProps.createRun(args);
     }
   }, [
     createRunProps,
@@ -470,15 +697,12 @@ var useManageRuns = ({
   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");
+var import_react12 = require("react");
+var import_react_query5 = require("@tanstack/react-query");
 
 // src/lib/runs/isRunEditingMessage/index.ts
-var import_lodash3 = __toESM(require("lodash"));
+var import_lodash4 = __toESM(require("lodash"));
 var isRunEditingMessage = ({
   message
 }) => {
@@ -488,7 +712,7 @@ var isRunEditingMessage = ({
     return false;
   if (!message.run_id)
     return false;
-  const hasContent = import_lodash3.default.some(message.content, (content) => {
+  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) !== "";
   });
@@ -498,7 +722,6 @@ var isRunEditingMessage = ({
 // src/hooks/runs/useIsRunActive/index.tsx
 var statuses = [
   "queued",
-  // 'completed',
   "in_progress",
   "cancelling",
   "requires_action"
@@ -519,18 +742,11 @@ var isRunActive = ({
     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)(() => ({
+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,
@@ -545,32 +761,36 @@ var import_react_use = require("react-use");
 
 // src/hooks/runs/usePolling/lib/refetch.ts
 var refetch = async ({
-  queryClient,
-  latestRun
+  meta,
+  args
 }) => {
-  await queryClient.invalidateQueries({
-    queryKey: queryKey()
+  await meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: meta.superinterfaceContext.queryOptions.messages.queryKey,
+      key: "queryKey",
+      meta,
+      args
+    })
   });
-  await queryClient.invalidateQueries({
-    queryKey: queryKey2()
+  await meta.queryClient.invalidateQueries({
+    queryKey: fillOption({
+      value: meta.superinterfaceContext.queryOptions.runs.queryKey,
+      key: "queryKey",
+      meta,
+      args
+    })
   });
 };
 
 // src/hooks/runs/usePolling/index.tsx
-var usePolling = ({
-  messagesQueryOptions,
-  runsQueryOptions
-}) => {
-  const queryClient = (0, import_react_query5.useQueryClient)();
-  const isRunActiveProps = useIsRunActive({
-    messagesQueryOptions,
-    runsQueryOptions
-  });
+var usePolling = (args = {}) => {
+  const { meta } = useMeta();
+  const isRunActiveProps = useIsRunActive(args);
   (0, import_react_use.useInterval)(
     () => {
       refetch({
-        queryClient,
-        latestRun: isRunActiveProps.latestRun
+        args,
+        meta
       });
       console.log("poll refetched");
     },
@@ -580,63 +800,30 @@ var usePolling = ({
 };
 
 // src/hooks/actions/useManageActions/index.tsx
-var import_react11 = require("react");
+var import_react13 = 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
+var useHandleAction = (args = () => {
 }) => {
-  const queryClient = (0, import_react_query6.useQueryClient)();
-  const mutationProps = (0, import_react_query6.useMutation)({
-    ...mutationOptions2({
-      queryClient
-    }),
-    ...handleActionMutationOptions
-  });
+  const superinterfaceContext = useSuperinterfaceContext();
+  const { meta } = useMeta();
+  const props = (0, import_react_query6.useMutation)(extendOptions({
+    defaultOptions: superinterfaceContext.mutationOptions.handleAction,
+    args,
+    meta
+  }));
   return {
-    ...mutationProps,
-    handleAction: mutationProps.mutate
+    ...props,
+    handleAction: props.mutate
   };
 };
 
 // src/hooks/actions/useManageActions/index.tsx
-var useManageActions = ({
-  runsQueryOptions,
-  handleActionMutationOptions
-}) => {
-  const latestRunProps = useLatestRun({
-    runsQueryOptions
-  });
-  const handleActionProps = useHandleAction({
-    handleActionMutationOptions
-  });
-  (0, import_react11.useEffect)(() => {
+var useManageActions = (args) => {
+  const latestRunProps = useLatestRun(args);
+  const handleActionProps = useHandleAction(args);
+  (0, import_react13.useEffect)(() => {
     if (handleActionProps.isPending)
       return;
     if (latestRunProps.isFetching)
@@ -648,44 +835,32 @@ var useManageActions = ({
     console.log("requires action", {
       latestRunProps
     });
-    handleActionProps.handleAction({ latestRun: latestRunProps.latestRun });
+    handleActionProps.handleAction({
+      latestRun: latestRunProps.latestRun,
+      ...args
+    });
   }, [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
-  });
+var useThreadLifecycles = (args) => {
+  useManageRuns(args);
+  useManageActions(args);
+  usePolling(args);
   return null;
 };
 
 // src/hooks/messageGroups/useMessageGroups/index.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
-var import_lodash4 = __toESM(require("lodash"));
-var import_radash2 = require("radash");
+var import_lodash5 = __toESM(require("lodash"));
+var import_radash4 = 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);
+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 }) => ({
@@ -706,10 +881,10 @@ var newGroup = ({ groups, message }) => [
 // src/hooks/messageGroups/useMessageGroups/lib/messageGroups/index.ts
 var messageGroups = ({
   messages: messages2
-}) => import_lodash4.default.reduce(
+}) => import_lodash5.default.reduce(
   order({ messages: messages2 }),
   (groups, message) => {
-    const group = (0, import_radash2.last)(groups);
+    const group = (0, import_radash4.last)(groups);
     if (!group)
       return newGroup({ groups, message });
     if (group.role !== message.role) {
@@ -719,7 +894,7 @@ var messageGroups = ({
       });
     }
     return [
-      ...import_lodash4.default.dropRight(groups),
+      ...import_lodash5.default.dropRight(groups),
       {
         ...group,
         messages: [...group.messages, message]
@@ -732,7 +907,7 @@ var messageGroups = ({
 // src/hooks/messageGroups/useMessageGroups/index.ts
 var useMessageGroups = ({
   messages: messages2
-}) => (0, import_react12.useMemo)(
+}) => (0, import_react14.useMemo)(
   () => ({
     messageGroups: messageGroups({ messages: messages2 })
   }),
@@ -740,20 +915,20 @@ var useMessageGroups = ({
 );
 
 // src/components/messages/Messages/Content/MessageGroup/index.tsx
-var import_react21 = require("react");
-var import_themes25 = require("@radix-ui/themes");
+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_react14 = require("react");
+var import_react16 = require("react");
 var import_themes6 = require("@radix-ui/themes");
 
-// src/contexts/avatars/AssistantAvatarContext/index.tsx
-var import_react13 = require("react");
+// 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_react13.createContext)(
+var AssistantAvatarContext = (0, import_react15.createContext)(
   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_themes5.Avatar,
     {
@@ -766,7 +941,7 @@ var AssistantAvatarContext = (0, import_react13.createContext)(
 // src/components/messageGroups/MessagesGroupBase/AssistantAvatar.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var AssistantAvatar = () => {
-  const AssistantAvatarContextValue = (0, import_react14.useContext)(AssistantAvatarContext);
+  const AssistantAvatarContextValue = (0, import_react16.useContext)(AssistantAvatarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_themes6.Flex,
     {
@@ -778,55 +953,59 @@ var AssistantAvatar = () => {
 };
 
 // src/contexts/assistants/AssistantNameContext/index.tsx
-var import_react15 = require("react");
-var AssistantNameContext = (0, import_react15.createContext)("Assistant");
+var import_react17 = require("react");
+var AssistantNameContext = (0, import_react17.createContext)("Assistant");
 
 // src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
-var import_themes24 = require("@radix-ui/themes");
+var import_themes23 = require("@radix-ui/themes");
 
 // src/components/messages/Message/index.tsx
-var import_react20 = require("react");
-var import_themes23 = require("@radix-ui/themes");
+var import_react23 = require("react");
+var import_themes22 = require("@radix-ui/themes");
 
 // src/components/runSteps/RunSteps/index.tsx
-var import_themes16 = require("@radix-ui/themes");
+var import_themes15 = require("@radix-ui/themes");
 
 // src/components/runSteps/RunStep/ToolCalls/index.tsx
-var import_themes15 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-var import_themes13 = require("@radix-ui/themes");
+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/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/index.tsx
+// src/components/functions/FunctionBase/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({
+var ToolCallBase = ({
   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
-        }
-      ) })
-    }
-  );
-});
+}) => /* @__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");
@@ -841,7 +1020,7 @@ var ToolCallTitle = ({
   }
 );
 
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Icon.tsx
+// 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 = ({
@@ -856,14 +1035,14 @@ var Icon = ({
   }
 };
 
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Content/index.tsx
-var import_react17 = require("react");
+// 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_react17.useMemo)(() => {
+  const args = (0, import_react19.useMemo)(() => {
     let result = null;
     try {
       result = JSON.parse(fn.arguments);
@@ -872,7 +1051,7 @@ var Content = ({
     }
     return result;
   }, [fn]);
-  const output = (0, import_react17.useMemo)(() => {
+  const output = (0, import_react19.useMemo)(() => {
     if (!fn.output) {
       return null;
     }
@@ -901,116 +1080,89 @@ var Content = ({
   );
 };
 
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Availabilities/Title.tsx
+// src/components/functions/FunctionBase/index.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 = ({
+var FunctionBase = ({
   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 }) })
+  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_runtime12.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_themes10.PopoverContent,
     {
       className: "max-h-[500px]",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Content, { fn })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.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 = ({
+// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/DefaultFunction/lib/title.ts
+var title = ({
+  fn,
   runStep
 }) => {
   if (runStep.completed_at) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Finished getting domains scores" });
+    return `Finished ${fn.name}`;
   } else if (runStep.cancelled_at) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Cancelled getting domains scores" });
+    return `Cancelled ${fn.name}`;
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: "Getting domains scores" });
+    return `Calling ${fn.name}`;
   }
 };
 
-// src/components/runSteps/RunStep/ToolCalls/ToolCall/Fn/Scores/index.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Scores = ({
+// 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_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 })
-    }
-  )
-] });
+}) => /* @__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_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime13 = (
+  // @ts-ignore-next-line
+  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;
+  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_themes12 = require("@radix-ui/themes");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_themes11 = require("@radix-ui/themes");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CodeInterpreter = ({
   codeInterpreter
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes12.Flex, { children: codeInterpreter.input });
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes11.Flex, { children: codeInterpreter.input });
 
 // src/components/runSteps/RunStep/ToolCalls/ToolCall/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var ToolCall = ({
   toolCall,
   runStep
 }) => {
   if (toolCall.type === "function") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Fn,
       {
         fn: toolCall.function,
@@ -1019,7 +1171,7 @@ var ToolCall = ({
     );
   }
   if (toolCall.type === "code_interpreter") {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       CodeInterpreter,
       {
         codeInterpreter: toolCall.code_interpreter,
@@ -1027,39 +1179,39 @@ var ToolCall = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes13.Flex, { children: toolCall.type });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes12.Flex, { children: toolCall.type });
 };
 
 // src/components/runSteps/RunStep/ToolCalls/Starting/index.tsx
-var import_themes14 = require("@radix-ui/themes");
+var import_themes13 = 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" })
+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_runtime18.jsx)(
-    import_themes14.PopoverContent,
+  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_themes13.PopoverContent,
     {
       className: "max-h-[500px]",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes14.Text, { children: "Getting ready to connect to domain API" })
+      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_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ToolCalls = ({
   stepDetails,
   runStep
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-  import_themes15.Flex,
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  import_themes14.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)(
+      !stepDetails.tool_calls.length && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Starting, {}),
+      stepDetails.tool_calls.map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ToolCall,
         {
           toolCall,
@@ -1072,12 +1224,12 @@ var ToolCalls = ({
 );
 
 // src/components/runSteps/RunStep/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RunStep = ({
   runStep
 }) => {
   if (runStep.step_details.type === "tool_calls") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ToolCalls,
       {
         stepDetails: runStep.step_details,
@@ -1089,14 +1241,14 @@ var RunStep = ({
 };
 
 // src/components/runSteps/RunSteps/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var RunSteps = ({
   runSteps
-}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-  import_themes16.Flex,
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_themes15.Flex,
   {
     direction: "column-reverse",
-    children: runSteps.map((runStep) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    children: runSteps.map((runStep) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RunStep,
       {
         runStep
@@ -1107,21 +1259,21 @@ var RunSteps = ({
 );
 
 // src/components/messages/Message/TextContent/index.tsx
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/contexts/markdown/MarkdownContext/index.ts
-var import_react18 = require("react");
+var import_react21 = 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,
+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_runtime22.jsx)(
-      import_themes17.Text,
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_themes16.Text,
       {
         size: "3",
         className: "whitespace-pre-line break-words",
@@ -1132,10 +1284,10 @@ var Paragraph = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
 );
 
 // 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,
+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
@@ -1143,14 +1295,14 @@ var Link = ({ children, href }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)
 );
 
 // 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,
+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_runtime24.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "ul",
       {
         className: "list-inside",
@@ -1161,14 +1313,14 @@ var UnorderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime24.j
 );
 
 // 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,
+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_runtime25.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "ol",
       {
         className: "list-inside",
@@ -1179,20 +1331,20 @@ var OrderedList = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx
 );
 
 // 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,
+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_runtime26.jsx)("li", { children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.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 });
+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 = {
@@ -1205,18 +1357,18 @@ var components = {
 };
 
 // src/contexts/markdown/MarkdownContext/index.ts
-var MarkdownContext = (0, import_react18.createContext)({
+var MarkdownContext = (0, import_react21.createContext)({
   remarkPlugins: [],
   components
 });
 
 // src/components/messages/Message/TextContent/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var TextContent = ({
   content
 }) => {
-  const markdownContext = (0, import_react19.useContext)(MarkdownContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const markdownContext = (0, import_react22.useContext)(MarkdownContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_react_markdown.default,
     {
       ...markdownContext,
@@ -1226,11 +1378,11 @@ var TextContent = ({
 };
 
 // src/components/messages/Message/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Message = ({
   message
 }) => {
-  const [olderRunSteps, laterRunSteps] = (0, import_react20.useMemo)(() => {
+  const [olderRunSteps, laterRunSteps] = (0, import_react23.useMemo)(() => {
     if (!message.runSteps.length)
       return [[], []];
     const messageCreationRunStepIndex = message.runSteps.findIndex((runStep) => {
@@ -1252,21 +1404,21 @@ var Message = ({
     }
     return [olderRunSteps2, laterRunSteps2];
   }, [message]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_themes23.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  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_runtime29.jsx)(
-      import_themes23.Box,
+    message.content.map((content, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_themes22.Box,
       {
-        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TextContent, { content })
+        children: content.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextContent, { content })
       },
       index
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       RunSteps,
       {
         runSteps: laterRunSteps
@@ -1276,14 +1428,14 @@ var Message = ({
 };
 
 // src/components/messages/Messages/Content/MessageGroup/Content/index.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Content2 = ({
   messageGroup
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  import_themes24.Flex,
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  import_themes23.Flex,
   {
     direction: "column-reverse",
-    children: messageGroup.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    children: messageGroup.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Message,
       {
         message
@@ -1294,22 +1446,22 @@ var Content2 = ({
 );
 
 // src/components/messages/Messages/Content/MessageGroup/index.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime29 = 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,
+  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_runtime31.jsx)(import_react_icons4.PersonIcon, {}),
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime29.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)(
+    ) : /* @__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
@@ -1320,14 +1472,14 @@ var MessageGroup = ({
 };
 
 // src/components/messages/Messages/Content/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime30 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: messageGroups2.map((messageGroup) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MessageGroup,
     {
       messageGroup
@@ -1337,13 +1489,13 @@ var Content3 = ({
 };
 
 // src/components/messages/Messages/ProgressMessage/index.tsx
-var import_themes28 = require("@radix-ui/themes");
+var import_themes27 = 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,
+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",
@@ -1354,25 +1506,25 @@ var StartingContentSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx
 );
 
 // 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 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_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 }),
+  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_runtime34.jsx)(StartingContentSkeleton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StartingContentSkeleton, {})
     ] })
   ] });
 };
 
 // src/components/messages/Messages/ProgressMessage/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ProgressMessage = ({
   latestMessage,
   isRunActive: isRunActive2
@@ -1382,51 +1534,36 @@ var ProgressMessage = ({
   if (!isRunActive2)
     return null;
   if (latestMessage.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StartingSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime33.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, {})
+  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_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Messages = ({
-  messagesQueryOptions,
-  runsQueryOptions,
-  createRunMutationOptions,
-  handleActionMutationOptions,
-  children
+  children,
+  ...args
 }) => {
   const {
     messages: messages2,
     isFetchingNextPage,
     hasNextPage,
     fetchNextPage
-  } = useMessages({
-    messagesQueryOptions
-  });
-  useThreadLifecycles({
-    messagesQueryOptions,
-    runsQueryOptions,
-    createRunMutationOptions,
-    handleActionMutationOptions
-  });
+  } = useMessages(args);
+  useThreadLifecycles(args);
   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,
+  const { isRunActive: isRunActive2 } = useIsRunActive(args);
+  const { latestMessage } = useLatestMessage(args);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_themes28.Flex,
     {
       ref: containerRef,
       direction: "column-reverse",
@@ -1434,14 +1571,14 @@ var Messages = ({
       grow: "1",
       p: "2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_themes29.Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_themes28.Flex,
           {
             shrink: "0",
             height: "1"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           ProgressMessage,
           {
             latestMessage,
@@ -1449,20 +1586,20 @@ var Messages = ({
           }
         ),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Content3,
           {
             messages: messages2
           }
         ),
-        hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        hasNextPage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           MessagesSkeleton,
           {
             ref: loaderRef
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_themes29.Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_themes28.Flex,
           {
             shrink: "0",
             grow: "1"
@@ -1473,20 +1610,150 @@ var Messages = ({
   );
 };
 
+// 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_themes31 = require("@radix-ui/themes");
-var import_react24 = require("react");
+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_react23 = require("react");
+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_react23.forwardRef)(function TextareaBase2(props, ref) {
+var TextareaBase = (0, import_react27.forwardRef)(function TextareaBase2(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     import_react_textarea_autosize.default,
     {
@@ -1508,142 +1775,9 @@ var TextareaBase = (0, import_react23.forwardRef)(function TextareaBase2(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");
+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");
@@ -1671,14 +1805,14 @@ var Submit = ({
   isLoading,
   isDisabled
 }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-  import_themes30.Button,
+  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_icons5.ArrowUpIcon, {})
+    children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_icons6.ArrowUpIcon, {})
   }
 );
 
@@ -1688,10 +1822,9 @@ var schema = import_zod.z.object({
   content: import_zod.z.string().min(1).max(300)
 });
 var Form = ({
-  messagesQueryOptions,
-  runsQueryOptions,
-  createMessageMutationOptions
-}) => {
+  children,
+  ...args
+} = {}) => {
   const {
     register,
     handleSubmit,
@@ -1700,40 +1833,35 @@ var Form = ({
   } = (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, [
+  const { isRunActive: isRunActive2 } = useIsRunActive(args);
+  const isLoading = (0, import_react28.useMemo)(() => isRunActive2 || isSubmitting, [
     isRunActive2,
     isSubmitting
   ]);
   const {
     createMessage
-  } = useCreateMessage({
-    createMessageMutationOptions
-  });
+    // @ts-ignore-next-line
+  } = useCreateMessage(args);
   const onSubmit = async (data2) => {
     reset();
     await createMessage({
-      content: data2.content
+      content: data2.content,
+      ...args
     });
   };
-  const { latestMessage } = useLatestMessage({
-    messagesQueryOptions
-  });
-  const isDisabled = (0, import_react24.useMemo)(() => {
+  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_react24.useMemo)(() => isLoading || isDisabled || false, [isLoading, isDisabled]);
+  const isInputDisabled = (0, import_react28.useMemo)(() => isLoading || isDisabled || false, [isLoading, isDisabled]);
   const isInputDisabledPrevious = (0, import_react_use2.usePrevious)(isInputDisabled);
-  const textareaRef = (0, import_react24.useRef)(null);
+  const textareaRef = (0, import_react28.useRef)(null);
   const textareaProps = register("content");
-  (0, import_react24.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (isInputDisabled)
       return;
     if (!isInputDisabledPrevious)
@@ -1742,111 +1870,173 @@ var Form = ({
       return;
     textareaRef.current.focus();
   }, [isInputDisabled, isInputDisabledPrevious, textareaProps]);
-  const assistantNameContext = (0, import_react24.useContext)(AssistantNameContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_themes31.Container,
+  const assistantNameContext = (0, import_react28.useContext)(AssistantNameContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    import_themes32.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)();
+      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;
                                       }
-                                    },
-                                    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
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              )
-            }
-          )
-        }
-      )
+                                  )
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                            import_themes32.Flex,
+                            {
+                              shrink: "0",
+                              align: "end",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                                Submit,
+                                {
+                                  isLoading,
+                                  isDisabled
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
     }
   );
 };
 
-// src/index.ts
+// 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,
-  QueryClient,
-  QueryClientProvider,
+  Suggestions,
+  SuperinterfaceProvider,
   useCreateMessage,
   useIsRunActive,
   useLatestMessage,
+  useMarkdownContext,
   useMessages,
-  useQuery,
-  useQueryClient,
   useThreadLifecycles
 });
 //# sourceMappingURL=index.js.map