@eigenpal/docx-editor-agents/react
React entry. Hooks, components, and types that need React as a peer dependency. Pair with `/server` (or `/ai-sdk/server`) for the API route that drives the LLM.
Functions(8)
AgentChatLog
declare function AgentChatLog(input: AgentChatLogProps): react_jsx_runtime.JSX.Element;AgentComposer
declare function AgentComposer(input: AgentComposerProps): react_jsx_runtime.JSX.Element;declare function AgentPanel(input: AgentPanelProps): react_jsx_runtime.JSX.Element;AgentSuggestionChip
declare function AgentSuggestionChip(input: AgentSuggestionChipProps): react_jsx_runtime.JSX.Element;AgentTimeline
Collapsible timeline of an assistant turn's tool calls. Lives above the assistant text bubble. Auto-collapses when the turn finishes; click the summary row to re-expand.
declare function AgentTimeline(input: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;getToolDisplayName
Friendly UI label for a tool — sourced from the registry's `displayName`, falling back to a sentence-case version of the snake_case name. Used by `<AgentTimeline>` and any other UI that lists running / completed tools.
declare function getToolDisplayName(name: string): string;getToolDisplayName('add_comment') // → 'Adding comment'getToolDisplayName('fetch_clause_template') // → 'Fetch clause template'useAgentChat
Hook that creates an EditorBridge and provides tool execution.
declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;useDocxAgentTools
declare function useDocxAgentTools(options: UseDocxAgentToolsOptions): UseDocxAgentToolsReturn;Interfaces(15)
AgentChatLogProps
interface AgentChatLogProps| Member | Type | Summary |
|---|---|---|
| autoScroll? | boolean | Auto-scroll to bottom on new messages / loading toggles. Default: true. |
| className? | string | |
| earlierLabel? | (count: number) => string | "+ N earlier steps" — pass for i18n. Default English. |
| emptyState? | ReactNode | Shown when there are no messages and not loading. |
| error? | string | null | Render an error bubble after the last message. |
| humanizeToolName? | (name: string) => string | Map a tool name to a friendly label for the per-message timeline. Pass `getToolDisplayName` from `@eigenpal/docx-editor-agents/react` to use the toolkit's registry-aware labels (e.g. "Adding comment"). |
| loading? | boolean | Render thinking dots at the bottom of the list. |
| maxVisibleCalls? | number | Cap the tool-call timeline to this many recent rows. Default 3. |
| messages | AgentMessage[] | |
| style? | CSSProperties | |
| summaryLabel? | (count: number) => string | "N steps" — pass for i18n. Default English. |
| thinkingLabel? | string | "Assistant is thinking" aria-label. Default English. |
| workingLabel? | (count: number) => string | "Working… N steps" — pass for i18n. Default English. |
AgentComposerProps
interface AgentComposerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| disabled? | boolean | |
| footnote? | ReactNode | Small text under the input — typically a scope reminder. |
| onChange | (next: string) => void | |
| onSubmit | () => void | |
| placeholder? | string | |
| sendLabel? | string | Send-button aria-label. Default `'Send'`. |
| value | string |
AgentContextSnapshot
Snapshot of what the user is looking at — pass this to your agent's system prompt so it knows the current selection / page without an extra `read_selection` round-trip.
interface AgentContextSnapshot| Member | Type | Summary |
|---|---|---|
| currentPage | number | 1-indexed page the cursor / selection is on. 0 if unknown. |
| selection | SelectionInfo | null | User's current selection or cursor (null if editor isn't focused). |
| totalPages | number | Total number of pages currently rendered. |
AgentMessage
interface AgentMessage| Member | Type | Summary |
|---|---|---|
| id | string | |
| role | 'user' | 'assistant' | |
| status? | 'streaming' | 'done' | `streaming` while the model is still calling tools / writing text; `done` once the turn is final. |
| text | string | |
| toolCalls? | AgentToolCall[] | Tool calls the assistant made for this turn, in order. The timeline stays expanded while `status === 'streaming'` and auto-collapses to an "N steps" summary when the message hits `status === 'done'`. |
AgentPanelProps
interface AgentPanelProps| Member | Type | Summary |
|---|---|---|
| children | ReactNode | Panel content. Render whatever you want — a chat, tabs, settings, anything. |
| className? | string | Optional class on the outer wrapper. |
| closed? | boolean | When `true`, the panel collapses to zero width with an ease-out transition (the children are still mounted so chat state survives close/reopen). The DocxEditor wrapper passes this when the user toggles the panel — kept off by default for standalone usage. |
| closeLabel? | string | Close button aria-label. Defaults to `'Close panel'`. |
| defaultWidth? | number | Default width when uncontrolled. |
| icon? | ReactNode | Header icon node. Defaults to a sparkle SVG. |
| maxWidth? | number | Max drag width. |
| minWidth? | number | Min drag width. |
| onClose? | () => void | Header close button click. Omit to hide the close button. |
| onWidthChange? | (w: number) => void | Width change callback (drag end and intermediate). |
| resizeHandleLabel? | string | Resize handle aria-label. Defaults to `'Resize agent panel'`. |
| title? | string | Header title. Defaults to `'Assistant'`. Pass a localised string for i18n. |
| width? | number | Controlled width in pixels. Omit for uncontrolled (internal state + localStorage). |
AgentSuggestionChipProps
interface AgentSuggestionChipProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| label | string | |
| onClick | () => void |
AgentTimelineProps
interface AgentTimelineProps| Member | Type | Summary |
|---|---|---|
| earlierLabel? | (count: number) => string | "+ N earlier steps" — pass for i18n. Default English. |
| humanizeName? | (name: string) => string | Map a tool name to a friendly label. Defaults to a sentence-case conversion of the snake_case name. Pass `getToolDisplayName` from `@eigenpal/docx-editor-agents/react` to use the toolkit's registry. |
| maxVisibleCalls? | number | Cap the number of rendered call rows — older entries collapse into a "+N earlier steps" header. Default 3. |
| streaming? | boolean | Whether the parent assistant turn is still streaming. While true, the timeline is forced expanded and shows a spinner; on false it auto-collapses to an "N steps" summary unless the user expanded it. |
| summaryLabel? | (count: number) => string | "N steps" — pass for i18n. Default English. |
| toolCalls | AgentToolCall[] | Tool calls in chronological order. |
| workingLabel? | (count: number) => string | "Working… N steps" — pass for i18n. Default English. |
AgentToolCall
Shared agent UI types — framework-agnostic. Both React and Vue adapters (and the AI SDK adapters) consume this single declaration.
Keeping the types here lets us tweak the chat schema without writing the same drift fix in four files.
interface AgentToolCall| Member | Type | Summary |
|---|---|---|
| error? | string | Set when the call errored — surfaces in the timeline as failed. |
| id | string | Stable id for keying. |
| input? | unknown | JSON-able input the agent passed. Rendered in the expanded view. |
| name | string | Tool name (e.g. `read_document`, `add_comment`). |
| result? | string | Result text or summary. Set after the call completes. |
| status | 'running' | 'done' | 'error' | `running` while in flight, `done` on success, `error` on failure. |
AgentToolDefinition
Definition of an agent tool — name, JSON-schema input, handler. Use this to build custom tools alongside the built-in `agentTools`.
interface AgentToolDefinition<TInput = Record<string, unknown>>| Member | Type | Summary |
|---|---|---|
| description | string | Human-readable description for the LLM |
| displayName? | string | Friendly UI label for the tool. Shown in the agent panel's timeline (e.g. "Reading document"). Falls back to a sentence-case version of `name` if omitted, so consumer-defined tools render readably without specifying this. |
| handler | (input: TInput, bridge: EditorBridge) => AgentToolResult | Handler — receives parsed input + bridge, returns result |
| inputSchema | Record<string, unknown> | JSON Schema for the input parameters |
| name | string | Tool name (used in tool_use blocks) |
AgentToolResult
Result returned by a tool handler. `success: false` carries an `error` message; `success: true` may carry tool-specific `data`.
interface AgentToolResult| Member | Type | Summary |
|---|---|---|
| data? | unknown | |
| error? | string | |
| success | boolean |
EditorRefLike
Agent-bridge contract every editor adapter (React, Vue, future) MUST satisfy. Versioning: additions are coordinated minor bumps across the fixed group; signature changes / removals are major. See `openspec/changes/vue-editor-robust-implementation/design.md` Decision 18.
interface EditorRefLike| Member | Type | Summary |
|---|---|---|
| addComment | — | |
| applyFormatting | — | Apply character formatting to a paragraph or sub-range. Returns false on missing paraId / ambiguous search. |
| findInDocument | — | |
| getComments | — | |
| getCurrentPage | — | 1-indexed page the user's cursor / selection is on. 0 if unknown. |
| getDocument | — | |
| getEditorRef | — | |
| getPageContent | — | Read a single page's paragraphs (1-indexed). Returns null if the page does not exist. |
| getSelectionInfo | — | |
| getTotalPages | — | Total number of pages currently rendered. |
| onContentChange | — | |
| onSelectionChange | — | |
| proposeChange | — | |
| replyToComment | — | |
| resolveComment | — | |
| scrollToParaId | — | |
| setParagraphStyle | — | Apply a paragraph style by styleId. Returns false if paraId is unknown. |
UseAgentChatOptions
useAgentChat — React hook that wires agent tools to a live DocxEditor.
interface UseAgentChatOptions```tsx
import { useAgentChat } from '@eigenpal/docx-editor-agents/react';
const { executeToolCall, toolSchemas } = useAgentChat({ editorRef, author: 'Assistant' });
// Pass toolSchemas to your AI provider, execute tool calls on the client
const result = executeToolCall('add_comment', { paragraphIndex: 3, text: 'Fix this.' });
```| Member | Type | Summary |
|---|---|---|
| author? | string | Default author name for comments and changes. Default: 'AI' |
| editorRef | React.RefObject<EditorRefLike | null> | Reference to the DocxEditor (must match EditorRefLike interface). |
UseAgentChatReturn
interface UseAgentChatReturn| Member | Type | Summary |
|---|---|---|
| executeToolCall | (toolName: string, input: Record<string, unknown>) => AgentToolResult | Execute a tool call through the bridge. |
| toolSchemas | ReturnType<typeof getToolSchemas> | Tool schemas in OpenAI function calling format. Pass to your AI provider. |
UseDocxAgentToolsOptions
useDocxAgentTools — wires the toolkit to a live DocxEditor for BYO chat frameworks.
Returns three things consumers need to plug an agent into the editor:
- `tools` — schemas in OpenAI function-calling format. Pass to `streamText({ tools })`, OpenAI's `tools` field, Anthropic's `tools`, or any provider that accepts that shape. - `executeToolCall` — the executor. Hand to AI SDK's `onToolCall`, or call yourself when you wire up tool calls manually. - `getContext` — snapshot of `{selection, currentPage, paragraphCount}` for system-prompt injection. Pass through `prepareRequestBody` (AI SDK) or inline into your own request body so the agent always knows what the user is looking at without an extra tool round-trip.
Custom tools merge with the built-ins via the `tools` option. Names collide → consumer wins (your override replaces the built-in by name).
interface UseDocxAgentToolsOptions```tsx
const { tools, executeToolCall, getContext } = useDocxAgentTools({
editorRef,
author: 'Assistant',
tools: {
fetch_clause: {
name: 'fetch_clause',
description: 'Fetch a clause template by name.',
inputSchema: { type: 'object', properties: { name: { type: 'string' } } },
handler: async (input) => ({ success: true, data: await fetchTemplate(input.name) }),
},
},
});
```| Member | Type | Summary |
|---|---|---|
| author? | string | Default author name for comments / tracked changes. Default: 'AI'. |
| editorRef | React.RefObject<EditorRefLike | null> | Reference to the DocxEditor (must match EditorRefLike). |
| exclude? | readonly string[] | Block-list of built-in tool names to hide. Applied after `include`. Use for agents that should not write tracked changes: |
| include? | readonly string[] | Allow-list of built-in tool names to expose. When provided, only the named tools are returned (custom tools from `tools` always pass). Useful for read-only or scope-restricted agents: |
| tools? | Record<string, AgentToolDefinition<any>> | Optional consumer-defined tools to merge with the built-ins. Keyed by tool name. A tool with the same name as a built-in **replaces** it. Pass a stable reference (memoized or module-level) to avoid rebuilding the tool list on every render. |
UseDocxAgentToolsReturn
interface UseDocxAgentToolsReturn| Member | Type | Summary |
|---|---|---|
| executeToolCall | (name: string, args: Record<string, unknown>) => AgentToolResult | Execute a tool call by name. Pass to AI SDK's `onToolCall`. |
| getContext | () => AgentContextSnapshot | Snapshot of the user's current view for system-prompt injection. |
| tools | ReturnType<typeof getToolSchemas> | Tool schemas in OpenAI function calling format — pass to your AI provider. |