-
Notifications
You must be signed in to change notification settings - Fork 307
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
289 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| --- | ||
| title: Context API | ||
| --- | ||
|
|
||
| assistant-ui components and APIs use React Context to store information and interact with the runtime. | ||
|
|
||
| The context is split into four hierarchies: | ||
|
|
||
| - **Assistant Context**: Wraps your entire app. An app can contain multiple threads. | ||
| - **Thread Context**: Provides access to the thread state. A thread can contain multiple messages. | ||
| - **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 { AssistantContextValue } from "./contextParameters"; | ||
|
|
||
| ## Assistant Context | ||
|
|
||
| The **Assistant Context** provides access for ModelConfigState and ToolUIsState. | ||
|
|
||
| ### `useAssistantContext` | ||
|
|
||
| This hook providers access to the context stores. | ||
|
|
||
| ```tsx | ||
| import { useAssistantContext } from "@assistant-ui/react"; | ||
|
|
||
| const { useModelConfig, useToolUIs } = useAssistantContext(); | ||
| ``` | ||
|
|
||
| #### Return Type | ||
|
|
||
| <AssistantContextValue /> | ||
|
|
||
|
|
||
| ## Thread Context | ||
|
|
||
| The **Thread Context** provides access to ThreadState, ThreadActionsState, ComposerState and ThreadViewportState. | ||
|
|
||
| ### `useThreadContext` | ||
|
|
||
| This hook provides access to the context stores. | ||
|
|
||
| ```tsx | ||
| import { useThreadContext } from "@assistant-ui/react"; | ||
|
|
||
| const { useThread, useThreadActions, useComposer, useViewport } = useThreadContext(); | ||
| ``` | ||
|
|
||
| ## Message Context | ||
|
|
||
| The **Message Context** provides access to MessageState, EditComposerState and MessageUtilsState. | ||
|
|
||
| ### `useMessageContext` | ||
|
|
||
| This hook provides access to the context stores. | ||
|
|
||
| ```tsx | ||
| import { useMessageContext } from "@assistant-ui/react"; | ||
|
|
||
| const { useMessage, useMessageUtils, useComposer } = useMessageContext(); | ||
| ``` | ||
|
|
||
| ## Content Part Context | ||
|
|
||
| The **Content Part Context** provides access to ContentPartState. | ||
|
|
||
| ### `useContentPartContext` | ||
|
|
||
| This hook provides access to the context stores. | ||
|
|
||
| ```tsx | ||
| import { useContentPartContext } from "@assistant-ui/react"; | ||
|
|
||
| const { useContentPart } = useContentPartContext(); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import { ParametersTable } from "@/components/docs"; | ||
|
|
||
| export const AssistantContextValue = () => { | ||
| return ( | ||
| <ParametersTable | ||
| type="AssistantContextValue" | ||
| parameters={[ | ||
| { | ||
| name: "useModelConfig", | ||
| type: "ReadonlyStore<ModelConfigState>", | ||
| required: true, | ||
| description: | ||
| "Configuration of the model (system prompt, tools, etc.)", | ||
| children: [ | ||
| { | ||
| type: "ModelConfigState", | ||
| parameters: [ | ||
| { | ||
| name: "getModelConfig", | ||
| type: "() => ModelConfig", | ||
| description: "Gets the current model config.", | ||
| required: true, | ||
| children: [ | ||
| { | ||
| type: "ModelConfig", | ||
| parameters: [ | ||
| { | ||
| name: "system", | ||
| type: "string", | ||
| description: "The system prompt.", | ||
| }, | ||
| { | ||
| name: "tools", | ||
| type: "Record<string, Tool<any, any>>", | ||
| description: "The tools available to the model.", | ||
| children: [ | ||
| { | ||
| type: "Tool<TArgs, TResult>", | ||
| parameters: [ | ||
| { | ||
| name: "description", | ||
| type: "string", | ||
| description: "The tool description.", | ||
| }, | ||
| { | ||
| name: "parameters", | ||
| type: "z.ZodType<TArgs>", | ||
| description: "The tool parameters.", | ||
| }, | ||
| { | ||
| name: "execute", | ||
| type: "(args: TArgs) => Promise<TResult>", | ||
| description: "The tool execution function.", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "registerModelConfigProvider", | ||
| type: "(provider: () => ModelConfig) => Unsubscribe", | ||
| description: | ||
| "Registers a model config provider to update the model config.", | ||
| required: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "useToolUIs", | ||
| type: "ReadonlyStore<ToolUIsState>", | ||
| required: true, | ||
| description: "Tool UIs to render on tool calls.", | ||
| children: [ | ||
| { | ||
| type: "ToolUIsState", | ||
| parameters: [ | ||
| { | ||
| name: "getToolUI", | ||
| type: "(toolName: string) => ToolCallContentPartProps", | ||
| description: | ||
| "Gets the current tool UI for a given tool name.", | ||
| required: true, | ||
| children: [ | ||
| { | ||
| type: "ToolCallContentPartProps<TArgs, TResult>", | ||
| parameters: [ | ||
| { | ||
| name: "part", | ||
| type: "ToolCallContentPart<TArgs, TResult>", | ||
| description: "The tool call content part.", | ||
| }, | ||
| { | ||
| name: "status", | ||
| type: "'in_progress' | 'done' | 'error'", | ||
| description: "The tool call status.", | ||
| }, | ||
| { | ||
| name: "addResult", | ||
| type: "(result: TResult) => void", | ||
| description: "Adds a result to the tool call.", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| name: "setToolUI", | ||
| type: "(toolName: string, render: ToolCallContentPartComponent) => Unsubscribe", | ||
| description: "Sets the tool UI.", | ||
| required: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { ParametersTable } from "@/components/docs"; | ||
|
|
||
| export const AssistantRuntimeProviderProps = () => { | ||
| return ( | ||
| <ParametersTable | ||
| type="AssistantRuntimeProviderProps" | ||
| parameters={[ | ||
| { | ||
| name: "runtime", | ||
| type: "AssistantRuntime", | ||
| required: true, | ||
| description: "The runtime to provide to the rest of your app.", | ||
| children: [ | ||
| { | ||
| type: "AssistantRuntime", | ||
| parameters: [ | ||
| { | ||
| name: "messages", | ||
| type: "readonly ThreadMessage[]", | ||
| required: true, | ||
| description: "The messages in the thread.", | ||
| }, | ||
| { | ||
| name: "isRunning", | ||
| type: "boolean", | ||
| required: true, | ||
| description: "Whether the thread is running.", | ||
| }, | ||
| { | ||
| name: "getBranches", | ||
| type: "(messageId: string) => readonly string[]", | ||
| required: true, | ||
| description: "A function to get the branches for a message.", | ||
| }, | ||
| { | ||
| name: "switchToBranch", | ||
| type: "(branchId: string) => void", | ||
| required: true, | ||
| description: "A function to switch to a branch.", | ||
| }, | ||
| { | ||
| name: "append", | ||
| type: "(message: AppendMessage) => void", | ||
| required: true, | ||
| description: "A function to append a message to the thread.", | ||
| }, | ||
| { | ||
| name: "startRun", | ||
| type: "(parentId: string | null) => void", | ||
| required: true, | ||
| description: "A function to start a run.", | ||
| }, | ||
| { | ||
| name: "cancelRun", | ||
| type: "() => void", | ||
| required: true, | ||
| description: "A function to cancel a run.", | ||
| }, | ||
| { | ||
| name: "addToolResult", | ||
| type: "(toolCallId: string, result: any) => void", | ||
| required: true, | ||
| description: "A function to add a tool result.", | ||
| }, | ||
| { | ||
| name: "subscribe", | ||
| type: "(callback: () => void) => Unsubscribe", | ||
| required: true, | ||
| description: "A function to subscribe to updates.", | ||
| }, | ||
| { | ||
| name: "registerModelConfigProvider", | ||
| type: "(provider: ModelConfigProvider) => Unsubscribe", | ||
| required: true, | ||
| description: | ||
| "A function to register a model config provider.", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| }; |