You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit ef664e1
Browse filesBrowse the repository at this point in the historyBrowse files
docs: make each package README the single source for its docs page
These READMEs and the React Widgets pages on the SDK docs site were two
near-complete copies of the same text, and had drifted: the multi-file-upload
and pdf-viewer examples here still build the SDK inside the component body,
which UiPath/uipath-typescript#770 fixed on its side.
UiPath/uipath-typescript now fetches packages/<widget>/README.md at docs build
time and renders it as docs/react-widgets/<widget>.md, the same way it already
sources its JS Functions section from UiPath/coded-functions-js. So this brings
the READMEs up to the reviewed content and adopts the conventions that build
expects:
- Fixed examples: the SDK is created once in a useEffect with await
initialize(), and baseUrl is api.uipath.com, matching every SDK sample.
- MkDocs-only syntax is written portably, since a README also has to render on
npm and GitHub: `> **Note:** …` for admonitions, `<!-- tabs -->` and
`<!-- details type: Title -->` for tabs and collapsibles. The fetch script
translates them; npm renders a blockquote and drops the comments.
- Cross-page links are absolute uipath.github.io URLs, so they resolve from an
npm page too.
- Development and License sit inside `<!-- docs:ignore -->`, which the fetch
script strips -- contributor content stays in the README without reaching
the docs site.
- Validation Station gains the Vite hosting section (staging the web component
into public/du-vs-wc, and why no vite.config.ts change is needed) and links
to the four sample apps.
docs-dispatch.yml tells the SDK repo to rebuild when a README lands on develop.
It needs an SDK_DOCS_DISPATCH_TOKEN secret with contents:write on
UiPath/uipath-typescript; without it the step warns and the site picks the
change up on its next build.
Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
A React component that provides a conversational AI chat interface powered by UiPath Conversational Agents. Built on top of UiPath Apollo React components, this widget enables seamless integration of AI-powered chat functionality into your applications.
3
+
A React chat interface powered by [UiPath Conversational Agents](https://uipath.github.io/uipath-typescript/api/interfaces/ConversationalAgentServiceModel/). Built on UiPath Apollo React chat components, it drops an AI chat experience into your application with streaming, attachments and tool-call visibility.
4
4
5
5
## Features
6
6
@@ -10,25 +10,24 @@ A React component that provides a conversational AI chat interface powered by Ui
10
10
- Conversation history management
11
11
- Start new conversations or continue existing ones
> The `ConversationalAgents` scope is what makes the real-time WebSocket session work; without it the REST calls succeed but the socket connection fails. See [OAuth Scopes](https://uipath.github.io/uipath-typescript/oauth-scopes/#conversational-agent) for the authoritative list.
|`sdk`|`UiPath`| Yes | UiPath SDK instance for API communication |
69
-
|`agentId`|`number`| No | The ID of the conversational agent release. Required unless `existingConversationId` is provided. |
70
-
|`folderId`|`number`| No | The folder ID the agent lives in. When omitted, the widget resolves it by listing agents and matching on `agentId` — prefer passing it when known. |
71
-
|`existingConversationId`|`string`| No | Load an existing conversation by ID instead of creating a new one on first message. |
72
-
|`inputSchema`|`InputSchema`| No | Agent input schema. Takes precedence over the schema derived from the resolved agent; use when the caller has the schema but the agent can't be resolved (e.g. an in-progress draft). |
73
-
|`isDebugMode`|`boolean`| No | Debug flow: opens an empty conversation up front so inputs are collected in the widget, and submits update the existing conversation instead of creating a new one. |
74
-
|`externalUserId`|`string`| No | External user identifier sent as `x-uipath-external-user-id` (HTTP header / WebSocket query param). Required when authenticating via an app-scoped external app; omit for standard user tokens. |
|`sdk`|`UiPath`| Yes | UiPath SDK instance for API communication |
71
+
|`agentId`|`number`| No | The ID of the conversational agent release. Required unless `existingConversationId` is provided |
72
+
|`folderId`|`number`| No | The folder ID the agent lives in. When omitted, the widget resolves it by listing agents and matching on `agentId` — prefer passing it when known |
73
+
|`existingConversationId`|`string`| No | Load an existing conversation by ID instead of creating a new one on the first message |
74
+
|`inputSchema`|`InputSchema`| No | Agent input schema. Takes precedence over the schema derived from the resolved agent; use when the caller has the schema but the agent can't be resolved (e.g. an in-progress draft) |
75
+
|`isDebugMode`|`boolean`| No | Debug flow: opens an empty conversation up front so inputs are collected in the widget, and submits update the existing conversation instead of creating a new one |
76
+
|`externalUserId`|`string`| No | External user identifier sent as `x-uipath-external-user-id` (HTTP header / WebSocket query param). Required when authenticating via an app-scoped external app; omit for standard user tokens |
77
77
78
-
A higher-level component that lists all conversational agents accessible to a given SDK and opens a chat with the selected one. Useful when you don't know the `agentId`/`folderId` up front and want the user to pick.
78
+
## Agent picker + chat
79
79
80
-
### Usage
80
+
`ConversationalAgentPickerChat` is a higher-level component that lists every conversational agent reachable by a given SDK instance and opens a chat with the selected one. Use it when you don't know the `agentId` / `folderId` up front and want the user to pick.
|`sdk`|`UiPath`| Yes | UiPath SDK instance. Changing it refetches the list and resets the UI.|
116
-
|`locale`|`Locale`| No | Passthrough to the inner chat. |
117
-
|`theme`|`"light" \| "dark" \| "light-hc" \| "dark-hc"`| No | Passthrough to the inner chat. |
118
-
|`readOnly`|`boolean`| No | Passthrough to the inner chat. |
119
-
|`overrideLabels`|`OverrideLabels`| No | Passthrough to the inner chat. |
120
-
|`onAgentSelected`|`(agent: AgentSummary) => void`| No | Fired when the user picks an agent (telemetry, routing, etc.). |
115
+
| Prop | Type | Required | Description |
116
+
| ---- | ---- | -------- | ----------- |
117
+
|`sdk`|`UiPath`| Yes | UiPath SDK instance. Changing it refetches the list and resets the UI |
118
+
|`locale`|`Locale`| No | Passthrough to the inner chat |
119
+
|`theme`|`"light" \| "dark" \| "light-hc" \| "dark-hc"`| No | Passthrough to the inner chat |
120
+
|`readOnly`|`boolean`| No | Passthrough to the inner chat |
121
+
|`overrideLabels`|`OverrideLabels`| No | Passthrough to the inner chat |
122
+
|`onAgentSelected`|`(agent: AgentSummary) => void`| No | Fired when the user picks an agent (telemetry, routing, etc.) |
121
123
122
124
### Behavior
123
125
124
-
- Calls `ConversationalAgent(sdk).getAll()` on mount → renders one row per agent (`name` + `description`).
126
+
- Calls `ConversationalAgent(sdk).getAll()` on mount, then renders one row per agent (`name` + `description`).
125
127
- Clicking an agent swaps to the chat view with that agent's `id` and `folderId`.
126
-
-"Back" clears the selection and returns to the list (no refetch).
127
-
- If the user's accessible tenants live behind your own auth/chrome, switch tenants by rebuilding the `UiPath` instance and passing the new one as `sdk` — the picker handles the rest.
128
+
-**Back** clears the selection and returns to the list — no refetch.
129
+
- If the user's accessible tenants live behind your own auth or chrome, switch tenants by rebuilding the `UiPath` instance and passing the new one as `sdk`; the picker handles the rest.
128
130
129
-
## Features in Detail
131
+
## Features in detail
130
132
131
-
### Streaming Responses
133
+
### Streaming responses
132
134
133
-
The component supports real-time streaming of AI responses, providing a smooth conversational experience as the agent generates its reply.
135
+
Responses stream in real time, so the conversation stays fluid while the agent generates its reply.
134
136
135
-
### File Attachments
137
+
### File attachments
136
138
137
-
Users can attach files to their messages via drag and drop or file picker.
139
+
Users can attach files to their messages via drag and drop or the file picker.
138
140
139
-
### Tool Call Tracking
141
+
### Tool call tracking
140
142
141
-
When the conversational agent uses tools, the component automatically displays:
143
+
When the agent uses tools, the widget displays:
142
144
143
145
- Tool name and input parameters
144
146
- Execution status
145
147
- Output results
146
148
- Error handling
147
149
148
-
### Session Management
150
+
### Session management
149
151
150
-
The widget automatically handles:
151
-
152
-
- Conversation creation and persistence
153
-
- Session initialization and maintenance
154
-
- Multiple conversation support via "New Chat"
152
+
The widget handles conversation creation and persistence, session initialization and maintenance, and multiple conversations via **New Chat**.
155
153
156
154
## Styling
157
155
158
-
The component comes with default styles. Import the CSS file in your application:
0 commit comments