@assistant-ui/react 0.7.46 → 0.7.48

package/src/context/providers/TextContentPartProvider.tsx

@@ -1,17 +1,18 @@
 "use client";
 
 import { FC, PropsWithChildren, useEffect, useState } from "react";
-import { create } from "zustand";
+import { create, StoreApi, UseBoundStore } from "zustand";
 import {
   ContentPartContext,
   ContentPartContextValue,
 } from "../react/ContentPartContext";
-import { ContentPartStatus, TextContentPart } from "../../types/AssistantTypes";
+import { ContentPartStatus } from "../../types/AssistantTypes";
 import { writableStore } from "../ReadonlyStore";
 import {
   ContentPartRuntimeImpl,
   ContentPartState,
 } from "../../api/ContentPartRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace TextContentPartProvider {
   export type Props = PropsWithChildren<{
@@ -33,36 +34,39 @@ export const TextContentPartProvider: FC<TextContentPartProvider.Props> = ({
   text,
   isRunning,
 }) => {
-  const [context] = useState<ContentPartContextValue>(() => {
-    const useContentPart = create<ContentPartState>(() => ({
+  const [context] = useState<
+    ContentPartContextValue & {
+      useContentPart: UseBoundStore<
+        StoreApi<ContentPartState & { type: "text" }>
+      >;
+    }
+  >(() => {
+    const useContentPart = create<ContentPartState & { type: "text" }>(() => ({
       status: isRunning ? RUNNING_STATUS : COMPLETE_STATUS,
       type: "text",
       text,
     }));
 
-    const useContentPartRuntime = create(
-      () =>
-        new ContentPartRuntimeImpl({
-          path: {
-            ref: "text",
-            threadSelector: { type: "main" },
-            messageSelector: { type: "messageId", messageId: "" },
-            contentPartSelector: { type: "index", index: 0 },
-          },
-          getState: useContentPart.getState,
-          subscribe: useContentPart.subscribe,
-        }),
-    );
+    const contentPartRuntime = new ContentPartRuntimeImpl({
+      path: {
+        ref: "text",
+        threadSelector: { type: "main" },
+        messageSelector: { type: "messageId", messageId: "" },
+        contentPartSelector: { type: "index", index: 0 },
+      },
+      getState: useContentPart.getState,
+      subscribe: useContentPart.subscribe,
+    });
+    ensureBinding(contentPartRuntime);
+
+    const useContentPartRuntime = create(() => contentPartRuntime);
 
     return { useContentPartRuntime, useContentPart };
   });
 
   useEffect(() => {
-    const state = context.useContentPart.getState() as ContentPartState & {
-      type: "text";
-    };
-
-    const textUpdated = (state as TextContentPart).text !== text;
+    const state = context.useContentPart.getState();
+    const textUpdated = state.text !== text;
     const targetStatus = isRunning ? RUNNING_STATUS : COMPLETE_STATUS;
     const statusUpdated = state.status !== targetStatus;
 

package/src/context/providers/ThreadListItemRuntimeProvider.tsx

@@ -8,6 +8,7 @@ import {
 } from "../react/ThreadListItemContext";
 import { writableStore } from "../ReadonlyStore";
 import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 export namespace ThreadListItemRuntimeProvider {
   export type Props = PropsWithChildren<{
@@ -19,31 +20,19 @@ const useThreadListItemRuntimeStore = (runtime: ThreadListItemRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
+    ensureBinding(runtime);
     writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
 };
 
-export const useThreadListItemStore = (runtime: ThreadListItemRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
-
 export const ThreadListItemRuntimeProvider: FC<
   ThreadListItemRuntimeProvider.Props
 > = ({ runtime, children }) => {
   const useThreadListItemRuntime = useThreadListItemRuntimeStore(runtime);
-  const useThreadListItem = useThreadListItemStore(runtime);
   const [context] = useState<ThreadListItemContextValue>(() => {
-    return { useThreadListItemRuntime, useThreadListItem };
+    return { useThreadListItemRuntime };
   });
 
   return (

package/src/context/providers/ThreadRuntimeProvider.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import type { ThreadContextValue } from "../react/ThreadContext";
 import { ThreadContext } from "../react/ThreadContext";
 import { makeThreadViewportStore } from "../stores/ThreadViewport";
 import { writableStore } from "../ReadonlyStore";
 import { ThreadRuntime } from "../../api/ThreadRuntime";
 import { create } from "zustand";
-import { ThreadComposerRuntime } from "../../api/ComposerRuntime";
 import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
 import { ThreadListItemRuntimeProvider } from "./ThreadListItemRuntimeProvider";
+import { ensureBinding } from "../react/utils/ensureBinding";
 
 type ThreadProviderProps = {
   listItemRuntime: ThreadListItemRuntime;
@@ -21,32 +21,10 @@ const useThreadRuntimeStore = (runtime: ThreadRuntime) => {
   const [store] = useState(() => create(() => runtime));
 
   useEffect(() => {
-    writableStore(store).setState(runtime, true);
-  }, [runtime, store]);
-
-  return store;
-};
-
-const useThreadStore = (runtime: ThreadRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
-  }, [runtime, store]);
-
-  return store;
-};
+    ensureBinding(runtime);
+    ensureBinding(runtime.composer);
 
-const useThreadComposerStore = (runtime: ThreadComposerRuntime) => {
-  const [store] = useState(() => create(() => runtime.getState()));
-
-  useEffect(() => {
-    const updateState = () =>
-      writableStore(store).setState(runtime.getState(), true);
-    updateState();
-    return runtime.subscribe(updateState);
+    writableStore(store).setState(runtime, true);
   }, [runtime, store]);
 
   return store;
@@ -56,19 +34,15 @@ export const ThreadRuntimeProvider: FC<
   PropsWithChildren<ThreadProviderProps>
 > = ({ children, listItemRuntime: threadListItemRuntime, runtime }) => {
   const useThreadRuntime = useThreadRuntimeStore(runtime);
-  const useThread = useThreadStore(runtime);
-  const useThreadComposer = useThreadComposerStore(runtime.composer);
 
-  const context = useMemo<ThreadContextValue>(() => {
+  const [context] = useState<ThreadContextValue>(() => {
     const useViewport = makeThreadViewportStore();
 
     return {
-      useThread,
       useThreadRuntime,
-      useComposer: useThreadComposer,
       useViewport,
     };
-  }, [useThread, useThreadRuntime, useThreadComposer]);
+  });
 
   return (
     <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>

package/src/context/react/AssistantContext.ts

@@ -7,12 +7,12 @@ import { createContextHook } from "./utils/createContextHook";
 import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { UseBoundStore } from "zustand";
 import { AssistantRuntime } from "../../api/AssistantRuntime";
-import { ThreadListState } from "../../api/ThreadListRuntime";
+import { ThreadListRuntime } from "../../api/ThreadListRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export type AssistantContextValue = {
-  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
   useAssistantRuntime: UseBoundStore<ReadonlyStore<AssistantRuntime>>;
-  useThreadList: UseBoundStore<ReadonlyStore<ThreadListState>>;
+  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
 };
 
 export const AssistantContext = createContext<AssistantContextValue | null>(
@@ -43,7 +43,7 @@ export const { useToolUIs, useToolUIsStore } = createContextStoreHook(
   "useToolUIs",
 );
 
-export const { useThreadList } = createContextStoreHook(
-  useAssistantContext,
-  "useThreadList",
-);
+const useThreadListRuntime = (opt: {
+  optional: boolean | undefined;
+}): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
+export const useThreadList = createStateHookForRuntime(useThreadListRuntime);

package/src/context/react/AttachmentContext.ts

@@ -1,124 +1,24 @@
 "use client";
 
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import {
-  AttachmentRuntime,
-  AttachmentState,
-} from "../../api/AttachmentRuntime";
+import { AttachmentRuntime } from "../../api/AttachmentRuntime";
 import { UseBoundStore } from "zustand";
+import { createContextHook } from "./utils/createContextHook";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export type AttachmentContextValue = {
-  source: "thread-composer" | "edit-composer" | "message";
-  useAttachment: UseBoundStore<ReadonlyStore<AttachmentState>>;
   useAttachmentRuntime: UseBoundStore<ReadonlyStore<AttachmentRuntime>>;
 };
 
-type ThreadComposerAttachmentContextValue = {
-  source: "thread-composer";
-  useAttachment: UseBoundStore<
-    ReadonlyStore<AttachmentState & { source: "thread-composer" }>
-  >;
-  useAttachmentRuntime: UseBoundStore<
-    ReadonlyStore<AttachmentRuntime & { type: "thread-composer" }>
-  >;
-};
-type EditComposerAttachmentContextValue = {
-  source: "edit-composer";
-  useAttachment: UseBoundStore<
-    ReadonlyStore<AttachmentState & { source: "edit-composer" }>
-  >;
-  useAttachmentRuntime: UseBoundStore<
-    ReadonlyStore<AttachmentRuntime & { type: "edit-composer" }>
-  >;
-};
-
-type MessageAttachmentContextValue = {
-  source: "message";
-  useAttachment: UseBoundStore<
-    ReadonlyStore<AttachmentState & { source: "message" }>
-  >;
-  useAttachmentRuntime: UseBoundStore<
-    ReadonlyStore<AttachmentRuntime & { type: "message" }>
-  >;
-};
-
 export const AttachmentContext = createContext<AttachmentContextValue | null>(
   null,
 );
 
-export function useAttachmentContext(options?: {
-  optional?: false | undefined;
-}): AttachmentContextValue;
-export function useAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): AttachmentContextValue | null;
-export function useAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}) {
-  const context = useContext(AttachmentContext);
-  if (!options?.optional && !context)
-    throw new Error(
-      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component.",
-    );
-
-  return context;
-}
-
-function useThreadComposerAttachmentContext(options?: {
-  optional?: false | undefined;
-}): ThreadComposerAttachmentContextValue;
-function useThreadComposerAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): ThreadComposerAttachmentContextValue | null;
-function useThreadComposerAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): ThreadComposerAttachmentContextValue | null {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "thread-composer")
-    throw new Error(
-      "This component must be used within a thread's ComposerPrimitive.Attachments component.",
-    );
-  return context as ThreadComposerAttachmentContextValue;
-}
-
-function useEditComposerAttachmentContext(options?: {
-  optional?: false | undefined;
-}): EditComposerAttachmentContextValue;
-function useEditComposerAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): EditComposerAttachmentContextValue | null;
-function useEditComposerAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): EditComposerAttachmentContextValue | null {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "edit-composer")
-    throw new Error(
-      "This component must be used within a messages's ComposerPrimitive.Attachments component.",
-    );
-  return context as EditComposerAttachmentContextValue;
-}
-
-function useMessageAttachmentContext(options?: {
-  optional?: false | undefined;
-}): MessageAttachmentContextValue;
-function useMessageAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): MessageAttachmentContextValue | null;
-function useMessageAttachmentContext(options?: {
-  optional?: boolean | undefined;
-}): MessageAttachmentContextValue | null {
-  const context = useAttachmentContext(options);
-  if (!context) return null;
-  if (context.source !== "message")
-    throw new Error(
-      "This component must be used within a MessagePrimitive.Attachments component.",
-    );
-  return context as MessageAttachmentContextValue;
-}
+const useAttachmentContext = createContextHook(
+  AttachmentContext,
+  "a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component",
+);
 
 export function useAttachmentRuntime(options?: {
   optional?: false | undefined;
@@ -136,58 +36,67 @@ export function useAttachmentRuntime(options?: {
 
 export function useThreadComposerAttachmentRuntime(options?: {
   optional?: false | undefined;
-}): AttachmentRuntime;
+}): AttachmentRuntime<"thread-composer">;
 export function useThreadComposerAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null;
+}): AttachmentRuntime<"thread-composer"> | null;
 export function useThreadComposerAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null {
-  const attachmentRuntime = useThreadComposerAttachmentContext(options);
+}): AttachmentRuntime<"thread-composer"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
   if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
+  if (attachmentRuntime.source !== "thread-composer")
+    throw new Error(
+      "This component must be used within a thread's ComposerPrimitive.Attachments component.",
+    );
+  return attachmentRuntime as AttachmentRuntime<"thread-composer">;
 }
 
 export function useEditComposerAttachmentRuntime(options?: {
   optional?: false | undefined;
-}): AttachmentRuntime;
+}): AttachmentRuntime<"edit-composer">;
 export function useEditComposerAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null;
+}): AttachmentRuntime<"edit-composer"> | null;
 export function useEditComposerAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null {
-  const attachmentRuntime = useEditComposerAttachmentContext(options);
+}): AttachmentRuntime<"edit-composer"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
   if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
+  if (attachmentRuntime.source !== "edit-composer")
+    throw new Error(
+      "This component must be used within a message's ComposerPrimitive.Attachments component.",
+    );
+
+  return attachmentRuntime as AttachmentRuntime<"edit-composer">;
 }
 
 export function useMessageAttachmentRuntime(options?: {
   optional?: false | undefined;
-}): AttachmentRuntime;
+}): AttachmentRuntime<"message">;
 export function useMessageAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null;
+}): AttachmentRuntime<"message"> | null;
 export function useMessageAttachmentRuntime(options?: {
   optional?: boolean | undefined;
-}): AttachmentRuntime | null {
-  const attachmentRuntime = useMessageAttachmentContext(options);
+}): AttachmentRuntime<"message"> | null {
+  const attachmentRuntime = useAttachmentRuntime(options);
   if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
+  if (attachmentRuntime.source !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component.",
+    );
+  return attachmentRuntime as AttachmentRuntime<"message">;
 }
 
-export const { useAttachment } = createContextStoreHook(
-  useAttachmentContext,
-  "useAttachment",
-);
-
-export const { useAttachment: useThreadComposerAttachment } =
-  createContextStoreHook(useThreadComposerAttachmentContext, "useAttachment");
+export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
 
-export const { useAttachment: useEditComposerAttachment } =
-  createContextStoreHook(useEditComposerAttachmentContext, "useAttachment");
-
-export const { useAttachment: useMessageAttachment } = createContextStoreHook(
-  useMessageAttachmentContext,
-  "useAttachment",
+export const useThreadComposerAttachment = createStateHookForRuntime(
+  useThreadComposerAttachmentRuntime,
+);
+export const useEditComposerAttachment = createStateHookForRuntime(
+  useEditComposerAttachmentRuntime,
+);
+export const useMessageAttachment = createStateHookForRuntime(
+  useMessageAttachmentRuntime,
 );

package/src/context/react/ComposerContext.ts

@@ -1,34 +1,9 @@
 "use client";
 
-import { useMemo } from "react";
-import { useMessageContext, useMessageRuntime } from "./MessageContext";
-import { useThreadContext, useThreadRuntime } from "./ThreadContext";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import { ComposerRuntime, ComposerState } from "../../api/ComposerRuntime";
-import { UseBoundStore } from "zustand";
-
-export type ComposerContextValue = {
-  useComposer: UseBoundStore<ReadonlyStore<ComposerState>>;
-  type: "edit" | "new";
-};
-
-export const useComposerContext = (): ComposerContextValue => {
-  const { useComposer: useThreadComposer } = useThreadContext();
-  const { useEditComposer } = useMessageContext({ optional: true }) ?? {};
-  return useMemo(
-    () => ({
-      useComposer: useEditComposer ?? useThreadComposer,
-      type: useEditComposer ? ("edit" as const) : ("new" as const),
-    }),
-    [useEditComposer, useThreadComposer],
-  );
-};
-
-export const { useComposer } = createContextStoreHook(
-  useComposerContext,
-  "useComposer",
-);
+import { useMessageRuntime } from "./MessageContext";
+import { useThreadRuntime } from "./ThreadContext";
+import { ComposerRuntime } from "../../api/ComposerRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export function useComposerRuntime(options?: {
   optional?: false | undefined;
@@ -45,3 +20,5 @@ export function useComposerRuntime(options?: {
     ? messageRuntime.composer
     : (threadRuntime?.composer ?? null);
 }
+
+export const useComposer = createStateHookForRuntime(useComposerRuntime);

package/src/context/react/ContentPartContext.ts

@@ -2,22 +2,20 @@
 
 import { createContext } from "react";
 import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { createContextHook } from "./utils/createContextHook";
 import { UseBoundStore } from "zustand";
 import { ContentPartRuntime } from "../../api/ContentPartRuntime";
-import { ContentPartState } from "../../api/ContentPartRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export type ContentPartContextValue = {
   useContentPartRuntime: UseBoundStore<ReadonlyStore<ContentPartRuntime>>;
-  useContentPart: UseBoundStore<ReadonlyStore<ContentPartState>>;
 };
 
 export const ContentPartContext = createContext<ContentPartContextValue | null>(
   null,
 );
 
-export const useContentPartContext = createContextHook(
+const useContentPartContext = createContextHook(
   ContentPartContext,
   "a component passed to <MessagePrimitive.Content components={...}>",
 );
@@ -36,7 +34,4 @@ export function useContentPartRuntime(options?: {
   return context.useContentPartRuntime();
 }
 
-export const { useContentPart } = createContextStoreHook(
-  useContentPartContext,
-  "useContentPart",
-);
+export const useContentPart = createStateHookForRuntime(useContentPartRuntime);

package/src/context/react/MessageContext.ts

@@ -7,19 +7,17 @@ import { createContextHook } from "./utils/createContextHook";
 import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { UseBoundStore } from "zustand";
 import { MessageRuntime } from "../../api/MessageRuntime";
-import { MessageState } from "../../api/MessageRuntime";
-import { EditComposerState } from "../../api/ComposerRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
+import { EditComposerRuntime } from "../../api";
 
 export type MessageContextValue = {
   useMessageRuntime: UseBoundStore<ReadonlyStore<MessageRuntime>>;
-  useMessage: UseBoundStore<ReadonlyStore<MessageState>>;
   useMessageUtils: UseBoundStore<ReadonlyStore<MessageUtilsState>>;
-  useEditComposer: UseBoundStore<ReadonlyStore<EditComposerState>>;
 };
 
 export const MessageContext = createContext<MessageContextValue | null>(null);
 
-export const useMessageContext = createContextHook(
+const useMessageContext = createContextHook(
   MessageContext,
   "a component passed to <ThreadPrimitive.Messages components={...} />",
 );
@@ -38,17 +36,16 @@ export function useMessageRuntime(options?: {
   return context.useMessageRuntime();
 }
 
-export const { useMessage } = createContextStoreHook(
-  useMessageContext,
-  "useMessage",
+export const useMessage = createStateHookForRuntime(useMessageRuntime);
+
+const useEditComposerRuntime = (opt: {
+  optional: boolean | undefined;
+}): EditComposerRuntime | null => useMessageRuntime(opt)?.composer ?? null;
+export const useEditComposer = createStateHookForRuntime(
+  useEditComposerRuntime,
 );
 
 export const { useMessageUtils, useMessageUtilsStore } = createContextStoreHook(
   useMessageContext,
   "useMessageUtils",
 );
-
-export const { useEditComposer } = createContextStoreHook(
-  useMessageContext,
-  "useEditComposer",
-);

package/src/context/react/ThreadContext.ts

@@ -7,20 +7,18 @@ import { UseBoundStore } from "zustand";
 import { createContextHook } from "./utils/createContextHook";
 import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { ThreadRuntime } from "../../api/ThreadRuntime";
-import { ThreadState } from "../../api/ThreadRuntime";
 import { ModelConfig } from "../../types";
-import { ThreadComposerState } from "../../api/ComposerRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
+import { ThreadComposerRuntime } from "../../api";
 
 export type ThreadContextValue = {
-  useThread: UseBoundStore<ReadonlyStore<ThreadState>>;
   useThreadRuntime: UseBoundStore<ReadonlyStore<ThreadRuntime>>;
-  useComposer: UseBoundStore<ReadonlyStore<ThreadComposerState>>;
   useViewport: UseBoundStore<ReadonlyStore<ThreadViewportState>>;
 };
 
 export const ThreadContext = createContext<ThreadContextValue | null>(null);
 
-export const useThreadContext = createContextHook(
+const useThreadContext = createContextHook(
   ThreadContext,
   "AssistantRuntimeProvider",
 );
@@ -37,14 +35,13 @@ export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
   return context.useThreadRuntime();
 }
 
-export const { useThread } = createContextStoreHook(
-  useThreadContext,
-  "useThread",
-);
+export const useThread = createStateHookForRuntime(useThreadRuntime);
 
-export const { useComposer: useThreadComposer } = createContextStoreHook(
-  useThreadContext,
-  "useComposer",
+const useThreadComposerRuntime = (opt: {
+  optional: boolean | undefined;
+}): ThreadComposerRuntime | null => useThreadRuntime(opt)?.composer ?? null;
+export const useThreadComposer = createStateHookForRuntime(
+  useThreadComposerRuntime,
 );
 
 export const {

package/src/context/react/ThreadListItemContext.ts

@@ -2,21 +2,19 @@
 
 import { createContext } from "react";
 import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
 import { createContextHook } from "./utils/createContextHook";
 import { UseBoundStore } from "zustand";
 import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
-import { ThreadListItemState } from "../../api/ThreadListItemRuntime";
+import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
 
 export type ThreadListItemContextValue = {
   useThreadListItemRuntime: UseBoundStore<ReadonlyStore<ThreadListItemRuntime>>;
-  useThreadListItem: UseBoundStore<ReadonlyStore<ThreadListItemState>>;
 };
 
 export const ThreadListItemContext =
   createContext<ThreadListItemContextValue | null>(null);
 
-export const useThreadListItemContext = createContextHook(
+const useThreadListItemContext = createContextHook(
   ThreadListItemContext,
   "a component passed to <ThreadListPrimitive.Items components={...}>",
 );
@@ -35,7 +33,6 @@ export function useThreadListItemRuntime(options?: {
   return context.useThreadListItemRuntime();
 }
 
-export const { useThreadListItem } = createContextStoreHook(
-  useThreadListItemContext,
-  "useThreadListItem",
+export const useThreadListItem = createStateHookForRuntime(
+  useThreadListItemRuntime,
 );

package/src/context/react/index.ts

@@ -45,3 +45,5 @@ export {
   // useThreadComposerAttachment,
   // useThreadComposerAttachmentRuntime,
 } from "./AttachmentContext";
+
+export { useRuntimeState } from "./utils/useRuntimeState";