@runtypelabs/persona 3.19.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -253,6 +253,49 @@ chat.injectAssistantMessage({
253
253
  });
254
254
  ```
255
255
 
256
+ **Component Directives (`injectComponentDirective`)**
257
+
258
+ When you've registered a custom component via `componentRegistry.register(...)`, inject an assistant message that renders that component using the same path Persona uses for streamed JSON directives:
259
+
260
+ ```ts
261
+ import { componentRegistry } from '@runtypelabs/persona';
262
+ import { DynamicForm } from './components';
263
+
264
+ componentRegistry.register('DynamicForm', DynamicForm);
265
+
266
+ chat.injectComponentDirective({
267
+ component: 'DynamicForm',
268
+ props: {
269
+ title: 'Book a demo',
270
+ fields: [
271
+ { label: 'Name', type: 'text', required: true },
272
+ { label: 'Email', type: 'email', required: true }
273
+ ],
274
+ submit_text: 'Request meeting'
275
+ },
276
+ text: 'Share your details to book a demo.',
277
+ llmContent: '[Showed booking form]' // optional, redacted version for the LLM
278
+ });
279
+ ```
280
+
281
+ The helper sets `content` to `text`, `rawContent` to the canonical directive JSON, and forwards `llmContent`. Useful for previews, replays, debug buttons, and local tools that should render a component instead of plain text.
282
+
283
+ If you already have a serialized directive, you can pass it through `rawContent` directly on any inject method:
284
+
285
+ ```ts
286
+ chat.injectAssistantMessage({
287
+ content: 'Booking form',
288
+ rawContent: JSON.stringify({
289
+ text: 'Booking form',
290
+ component: 'DynamicForm',
291
+ props: { /* ... */ }
292
+ }),
293
+ llmContent: '[Showed booking form]'
294
+ });
295
+ ```
296
+
297
+ See [docs/MESSAGE-INJECTION.md](./docs/MESSAGE-INJECTION.md#component-directive-injection) for the full reference.
298
+
256
299
  #### Event Stream Control
257
300
 
258
301
  When the `showEventStreamToggle` feature flag is enabled, you can programmatically control the event stream inspector panel:
@@ -1357,7 +1400,7 @@ The AI responds with JSON like:
1357
1400
  }
1358
1401
  ```
1359
1402
 
1360
- See `examples/embedded-app/json.html` for a full working example.
1403
+ See `examples/embedded-app/dynamic-form.html` for a full working example.
1361
1404
 
1362
1405
  ### Directive postprocessor (Deprecated)
1363
1406