feat: useThreadRuntime() context hook (#500)

apps/docs/components/docs/parameters/context.tsx

@@ -141,6 +141,48 @@ export const AssistantContextValue: ParametersTableProps = {
   ],
 };
 
+export const ThreadContextValue: ParametersTableProps = {
+  type: "ThreadContextValue",
+  parameters: [
+    {
+      name: "useThread",
+      type: "ReadonlyStore<ThreadState>",
+      required: true,
+      description: "Provides functions to perform actions on the thread.",
+    },
+    {
+      name: "useThreadMessages",
+      type: "ReadonlyStore<ThreadMessagesState>",
+      required: true,
+      description: "Provides functions to perform actions on the thread.",
+    },
+    {
+      name: "useThreadActions",
+      type: "ReadonlyStore<ThreadActionsState>",
+      required: true,
+      description: "Provides functions to perform actions on the thread.",
+    },
+    {
+      name: "useThreadRuntime",
+      type: "ReadonlyStore<ThreadRuntimeState>",
+      required: true,
+      description: "Get the current runtime.",
+    },
+    {
+      name: "useComposer",
+      type: "ReadonlyStore<ComposerState>",
+      required: true,
+      description: "Provides functions to perform actions on the composer.",
+    },
+    {
+      name: "useViewport",
+      type: "ReadonlyStore<ThreadViewportState>",
+      required: true,
+      description: "Provides functions to perform actions on the viewport.",
+    },
+  ],
+};
+
 export const ThreadState: ParametersTableProps = {
   type: "ThreadState",
   parameters: [
@@ -204,12 +246,6 @@ export const ThreadActionsState: ParametersTableProps = {
       required: true,
       description: "A function to add a tool result.",
     },
-    {
-      name: "getRuntime",
-      type: "() => AssistantRuntime",
-      description: "Get the current runtime.",
-      required: true,
-    },
   ],
 };
 

apps/docs/content/docs/reference/context.mdx

@@ -11,13 +11,13 @@ The context is split into four hierarchies:
 - **Message Context**: Provides access to the message state. A message can contain multiple content parts.
 - **Content Part Context**: Provides access to the content part state.
 
-
 import { ParametersTable } from "@/components/docs";
-import { 
+import {
   AssistantContextValue,
   AssistantActionsState,
   AssistantModelConfigState,
   AssistantToolUIsState,
+  ThreadContextValue,
   ThreadState,
   ThreadMessagesState,
   ThreadActionsState,
@@ -40,17 +40,18 @@ This hook providers access to the context stores.
 ```tsx
 import { useAssistantContext } from "@assistant-ui/react";
 
-const { useModelConfig, useToolUIs } = useAssistantContext();
+const { useAssistantActions, useModelConfig, useToolUIs } =
+  useAssistantContext();
 ```
 
-<ParametersTable {...AssistantContextValue} /> 
+<ParametersTable {...AssistantContextValue} />{" "}
 
 #### `useAssistantActions`
 
 ```tsx
 import { useAssistantActions } from "@assistant-ui/react";
 
-const switchToNewThread = useAssistantActions(m => m.switchToThread);
+const switchToNewThread = useAssistantActions((m) => m.switchToThread);
 const switchToNewThread = useAssistantActions.getState().switchToThread;
 ```
 
@@ -61,25 +62,23 @@ const switchToNewThread = useAssistantActions.getState().switchToThread;
 ```tsx
 const { useModelConfig } = useAssistantContext();
 
-const getModelConfig = useModelConfig(m => m.getModelConfig);
+const getModelConfig = useModelConfig((m) => m.getModelConfig);
 const getModelConfig = useModelConfig.getState().getModelConfig;
 ```
 
-<ParametersTable {...AssistantModelConfigState} /> 
-
+<ParametersTable {...AssistantModelConfigState} />{" "}
 
 ### `useToolUIs`
 
 ```tsx
 const { useToolUIs } = useAssistantContext();
 
-const getToolUI = useToolUIs(m => m.getToolUI);
+const getToolUI = useToolUIs((m) => m.getToolUI);
 const getToolUI = useToolUIs.getState().getToolUI;
 ```
 
 <ParametersTable {...AssistantToolUIsState} />
 
-
 ## Thread Context
 
 The **Thread Context** provides access to ThreadState, ThreadActionsState, ComposerState and ThreadViewportState.
@@ -91,15 +90,24 @@ This hook provides access to the context stores.
 ```tsx
 import { useThreadContext } from "@assistant-ui/react";
 
-const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext();
+const {
+  useThread,
+  useThreadMessages,
+  useThreadActions,
+  useThreadRuntime,
+  useComposer,
+  useViewport,
+} = useThreadContext();
 ```
 
+<ParametersTable {...ThreadContextValue} />
+
 ### `useThread`
 
 ```tsx
 const { useThread } = useThreadContext();
 
-const isRunning = useThread(m => m.isRunning);
+const isRunning = useThread((m) => m.isRunning);
 const isRunning = useThread.getState().isRunning;
 ```
 
@@ -110,7 +118,7 @@ const isRunning = useThread.getState().isRunning;
 ```tsx
 const { useThreadMessages } = useThreadContext();
 
-const firstMessage = useThreadMessages(m => m[0]);
+const firstMessage = useThreadMessages((m) => m[0]);
 const firstMessage = useThreadMessages.getState()[0];
 ```
 
@@ -121,36 +129,46 @@ const firstMessage = useThreadMessages.getState()[0];
 ```tsx
 const { useThreadActions } = useThreadContext();
 
-const getBranches = useThreadActions(m => m.getBranches);
+const getBranches = useThreadActions((m) => m.getBranches);
 const getBranches = useThreadActions.getState().getBranches;
 
-const switchToBranch = useThreadActions(m => m.switchToBranch);
+const switchToBranch = useThreadActions((m) => m.switchToBranch);
 const switchToBranch = useThreadActions.getState().switchToBranch;
 
-const append = useThreadActions(m => m.append);
+const append = useThreadActions((m) => m.append);
 const append = useThreadActions.getState().append;
 
-const startRun = useThreadActions(m => m.startRun);
+const startRun = useThreadActions((m) => m.startRun);
 const startRun = useThreadActions.getState().startRun;
 
-const cancelRun = useThreadActions(m => m.cancelRun);
+const cancelRun = useThreadActions((m) => m.cancelRun);
 const cancelRun = useThreadActions.getState().cancelRun;
 
-const addToolResult = useThreadActions(m => m.addToolResult);
+const addToolResult = useThreadActions((m) => m.addToolResult);
 const addToolResult = useThreadActions.getState().addToolResult;
 ```
 
 <ParametersTable {...ThreadActionsState} />
 
+### `useThreadRuntime`
+
+```tsx
+const { useThreadRuntime } = useThreadContext();
+
+const runtime = useThreadRuntime();
+```
+
+<ParametersTable {...ThreadRuntimeState} />
+
 ### `useComposer`
 
 ```tsx
 const { useComposer } = useThreadContext();
 
-const value = useComposer(m => m.value);
+const value = useComposer((m) => m.value);
 const value = useComposer.getState().value;
 
-const setValue = useComposer(m => m.setValue);
+const setValue = useComposer((m) => m.setValue);
 const setValue = useComposer.getState().setValue;
 ```
 
@@ -161,13 +179,13 @@ const setValue = useComposer.getState().setValue;
 ```tsx
 const { useViewport } = useThreadContext();
 
-const isAtBottom = useViewport(m => m.isAtBottom);
+const isAtBottom = useViewport((m) => m.isAtBottom);
 const isAtBottom = useViewport.getState().isAtBottom;
 
-const scrollToBottom = useViewport(m => m.scrollToBottom);
+const scrollToBottom = useViewport((m) => m.scrollToBottom);
 const scrollToBottom = useViewport.getState().scrollToBottom;
 
-const onScrollToBottom = useViewport(m => m.onScrollToBottom);
+const onScrollToBottom = useViewport((m) => m.onScrollToBottom);
 const onScrollToBottom = useViewport.getState().onScrollToBottom;
 ```
 
@@ -192,16 +210,16 @@ const { useMessage, useMessageUtils, useEditComposer } = useMessageContext();
 ```tsx
 const { useMessage } = useMessageContext();
 
-const message = useMessage(m => m.message);
+const message = useMessage((m) => m.message);
 const message = useMessage.getState().message;
 
-const parentId = useMessage(m => m.parentId);
+const parentId = useMessage((m) => m.parentId);
 const parentId = useMessage.getState().parentId;
 
-const branches = useMessage(m => m.branches);
+const branches = useMessage((m) => m.branches);
 const branches = useMessage.getState().branches;
 
-const isLast = useMessage(m => m.isLast);
+const isLast = useMessage((m) => m.isLast);
 const isLast = useMessage.getState().isLast;
 ```
 
@@ -212,16 +230,16 @@ const isLast = useMessage.getState().isLast;
 ```tsx
 const { useMessageUtils } = useMessageContext();
 
-const isCopied = useMessageUtils(m => m.isCopied);
+const isCopied = useMessageUtils((m) => m.isCopied);
 const isCopied = useMessageUtils.getState().isCopied;
 
-const setIsCopied = useMessageUtils(m => m.setIsCopied);
+const setIsCopied = useMessageUtils((m) => m.setIsCopied);
 const setIsCopied = useMessageUtils.getState().setIsCopied;
 
-const isHovering = useMessageUtils(m => m.isHovering);
+const isHovering = useMessageUtils((m) => m.isHovering);
 const isHovering = useMessageUtils.getState().isHovering;
 
-const setIsHovering = useMessageUtils(m => m.setIsHovering);
+const setIsHovering = useMessageUtils((m) => m.setIsHovering);
 const setIsHovering = useMessageUtils.getState().setIsHovering;
 ```
 
@@ -232,10 +250,10 @@ const setIsHovering = useMessageUtils.getState().setIsHovering;
 ```tsx
 const { useEditComposer } = useMessageContext();
 
-const value = useEditComposer(m => m.value);
+const value = useEditComposer((m) => m.value);
 const value = useEditComposer.getState().value;
 
-const setValue = useEditComposer(m => m.setValue);
+const setValue = useEditComposer((m) => m.setValue);
 const setValue = useEditComposer.getState().setValue;
 ```
 
@@ -260,10 +278,10 @@ const { useContentPart } = useContentPartContext();
 ```tsx
 const { useContentPart } = useContentPartContext();
 
-const part = useContentPart(m => m.part);
+const part = useContentPart((m) => m.part);
 const part = useContentPart.getState().part;
 
-const status = useContentPart(m => m.status);
+const status = useContentPart((m) => m.status);
 const status = useContentPart.getState().status;
 ```
 
@@ -306,9 +324,9 @@ const { useComposer } = useComposerContext();
 ```tsx
 const { useComposer } = useComposerContext();
 
-const value = useComposer(m => m.value);
+const value = useComposer((m) => m.value);
 const value = useComposer.getState().value;
 
-const setValue = useComposer(m => m.setValue);
+const setValue = useComposer((m) => m.setValue);
 const setValue = useComposer.getState().setValue;
-```
+```

packages/react-markdown/package.json

@@ -64,6 +64,7 @@
     "@assistant-ui/tsconfig": "workspace:*",
     "@types/node": "^20.14.10",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",

packages/react/package.json

@@ -125,6 +125,7 @@
     "@types/json-schema": "^7.0.15",
     "@types/node": "^20.14.10",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8.4.39",
     "postcss-nested": "^6.0.1",

packages/react/src/context/providers/AssistantProvider.tsx

@@ -36,7 +36,7 @@ export const AssistantProvider: FC<
 
   return (
     <AssistantContext.Provider value={context}>
-      <ThreadProvider runtime={runtime}>{children}</ThreadProvider>
+      <ThreadProvider provider={runtime}>{children}</ThreadProvider>
     </AssistantContext.Provider>
   );
 };