@corti/embedded-web 0.1.0 → 0.2.0

package/README.md

@@ -15,12 +15,6 @@ A web component and React component library that provides an embedded interface
 npm install @corti/embedded-web
 ```
 
-The package provides a web component by default. For React usage, also install React as a peer dependency:
-
-```bash
-npm install react @types/react
-```
-
 ## Usage
 
 ### Web Component
@@ -28,7 +22,7 @@ npm install react @types/react
 ```html
 <corti-embedded
   id="corti-component"
-  base-url="https://assistant.eu.corti.app" <!-- REQUIRED -->
+  baseurl="https://assistant.eu.corti.app" <!-- REQUIRED -->
 ></corti-embedded>
 ```
 
@@ -55,58 +49,73 @@ await myComponent.navigate('/interactions/123');
 await myComponent.show()
 ```
 
+#### Generic Event Listener (Web Component)
+
+Use `event` as the canonical event stream for web component integrations (formerly `embedded-event`).
+
+- Event detail shape is `{ name: string; payload: unknown }`.
+- Full event catalog and payload details are documented at:
+  - https://docs.corti.ai/assistant/events
+
+```js
+myComponent.addEventListener("event", event => {
+  const { detail } = event;
+  console.log(detail.name, detail.payload);
+});
+```
+
 ### React Component
 
 ```tsx
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 import {
   CortiEmbeddedReact,
   type CortiEmbeddedReactRef,
+  type CortiEmbeddedEvent,
+  type CortiEmbeddedReadyEvent,
   useCortiEmbeddedApi,
   useCortiEmbeddedStatus,
-} from '@corti/embedded-web/react';
+} from "@corti/embedded-web/react";
 
 function App() {
   const cortiRef = useRef<CortiEmbeddedReactRef>(null);
   const api = useCortiEmbeddedApi(cortiRef);
   const { status } = useCortiEmbeddedStatus(cortiRef);
 
-  const handleReady = () => {
-    console.log('Corti component is ready!');
+  const handleReady = (event: CortiEmbeddedReadyEvent) => {
+    console.log("Corti component is ready!", event.detail);
   };
 
-  const handleEvent = (
-    event: CustomEvent<{ name: string; payload: unknown }>,
-  ) => {
-    console.log('Event name:', event.detail.name);
-    console.log('Event payload:', event.detail.payload);
+  const handleEvent = (event: CortiEmbeddedEvent) => {
+    console.log("Event name:", event.detail.name);
+    console.log("Event payload:", event.detail.payload);
   };
 
   const handleAuth = async () => {
     try {
       const user = await api.auth({
-        access_token: 'your-token',
-        token_type: 'Bearer',
+        access_token: "your-token",
+        token_type: "Bearer",
         // ... rest of the token response
       });
-      console.log('Authenticated:', user);
+      console.log("Authenticated:", user);
 
-      await api.configureSession({ defaultTemplateKey: 'soap_note' });
+      await api.configureSession({ defaultTemplateKey: "soap_note" });
       await api.createInteraction({
         encounter: {
           identifier: `encounter-${Date.now()}`,
-          status: 'planned',
-          type: 'first_consultation',
+          status: "planned",
+          type: "first_consultation",
           period: { startedAt: new Date().toISOString() },
         },
       });
     } catch (error) {
-      console.error('Auth failed:', error);
+      console.error("Auth failed:", error);
     }
   };
 
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: "100vh" }}>
       <button onClick={handleAuth}>Authenticate</button>
 
       <CortiEmbeddedReact
@@ -115,8 +124,8 @@ function App() {
         visibility="visible"
         onReady={handleReady}
         onEvent={handleEvent}
-        onError={event => console.error('Embedded error:', event.detail)}
-        style={{ width: '100%', height: '500px' }}
+        onError={event => console.error("Embedded error:", event.detail)}
+        style={{ width: "100%", height: "500px" }}
       />
 
       <pre>{JSON.stringify(status, null, 2)}</pre>
@@ -128,7 +137,7 @@ function App() {
 ### Show/Hide the Component
 
 ```javascript
-const component = document.getElementById('corti-component');
+const component = document.getElementById("corti-component");
 
 // Show the chat interface
 component.show();
@@ -143,12 +152,22 @@ component.hide();
 
 #### auth
 
+Authentication is required before using the embedded app. The payload passed to
+`component.auth(...)` should come directly from your identity provider token
+response (for example, Keycloak/OIDC token endpoint response).
+
+- API details and payload shape: https://docs.corti.ai/assistant/api-reference#auth
+- End-to-end authentication guidance: https://docs.corti.ai/assistant/authentication
+
+Use user-based authentication (OAuth2/OIDC). Client-credentials-only flows are
+not supported for the embedded app.
+
 ```javascript
 const authResponse = await component.auth({
-  // Example: Keycloak-style token + mode
+  // Use the full token response from your IdP
   access_token: 'YOUR_JWT',
   token_type: 'Bearer',
-  mode: 'stateful',
+  // include other token fields from your provider response (expires_in, refresh_token, etc.)
   ...
 });
 ```
@@ -157,10 +176,10 @@ const authResponse = await component.auth({
 
 ```javascript
 await component.configureSession({
-  defaultLanguage: 'en',
-  defaultOutputLanguage: 'en',
-  defaultTemplateKey: 'discharge-summary',
-  defaultMode: 'virtual',
+  defaultLanguage: "en",
+  defaultOutputLanguage: "en",
+  defaultTemplateKey: "discharge-summary",
+  defaultMode: "virtual",
 });
 ```
 
@@ -176,7 +195,7 @@ await component.addFacts([
 #### navigate
 
 ```javascript
-await component.navigate('/interactions/123');
+await component.navigate("/interactions/123");
 ```
 
 #### createInteraction
@@ -185,14 +204,14 @@ await component.navigate('/interactions/123');
 const created = await component.createInteraction({
   assignedUserId: null,
   encounter: {
-    identifier: 'enc-123',
-    status: 'in-progress',
-    type: 'consult',
+    identifier: "enc-123",
+    status: "in-progress",
+    type: "consult",
     period: { startedAt: new Date().toISOString() },
-    title: 'Visit for cough',
+    title: "Visit for cough",
   },
   patient: {
-    identifier: 'pat-456',
+    identifier: "pat-456",
   },
 });
 ```
@@ -208,7 +227,7 @@ await component.stopRecording();
 #### getStatus (debugging)
 
 ```javascript
-console.log(component.getStatus());
+console.log(await component.getStatus());
 ```
 
 ## Architecture
@@ -225,7 +244,7 @@ The component uses a `PostMessageHandler` utility class that:
 The React component (`CortiEmbeddedReact`) is available as an additional export and provides:
 
 - **Hook-based API access**: `useCortiEmbeddedApi(ref)` exposes instance-bound methods (`auth`, `navigate`, `createInteraction`, etc.)
-- **Generic event stream**: `onEvent` receives all embedded events as `{ name, payload }`
+- **Generic event stream**: `onEvent` receives the wrapper's `event` `CustomEvent`, with `event.detail` shaped as `{ name, payload }`
 - **Status hook**: `useCortiEmbeddedStatus(ref)` keeps latest status/reactive state
 - **Multi-instance safety**: API methods are scoped to the ref you pass
 - **React Props**: Standard React props like `className`, `style`, etc.
@@ -239,15 +258,19 @@ import {
   type CortiEmbeddedReactRef,
   useCortiEmbeddedApi,
   useCortiEmbeddedStatus,
-} from '@corti/embedded-web/react';
+} from "@corti/embedded-web/react";
 ```
 
 ### Event Listener Setup
 
-- Use `onEvent` for all embedded events.
-- Event detail shape is `{ name: string; payload: unknown }`.
+- Use `onEvent` as the catch-all listener for the wrapper's generic `event` stream.
+- `onEvent` receives the raw `event` `CustomEvent`, and `event.detail` has the following shape: `{ name: string; payload: unknown }`.
+- That generic stream includes `embedded.ready` and other forwarded embedded events listed in our documentation.
+- `onReady` is a convenience listener for the raw `embedded.ready` `CustomEvent`.
+- Raw `ready`, `loaded`, and `error.triggered` are not forwarded through `onEvent`.
 - Full event catalog and payload details are documented at:
   - https://docs.corti.ai/assistant/events
+- `onEvent`, `onReady`, and `onError` pass through the raw `CustomEvent`.
 
 ```tsx
 <CortiEmbeddedReact
@@ -255,7 +278,7 @@ import {
   onEvent={event => {
     console.log(event.detail.name, event.detail.payload);
   }}
-  onReady={() => console.log('Ready')}
+  onReady={event => console.log("Ready", event.detail)}
   onError={event => console.error(event.detail)}
 />
 ```
@@ -277,7 +300,7 @@ function Example() {
   const api = useCortiEmbeddedApi(ref);
 
   const run = async () => {
-    await api.auth({ access_token: '...', token_type: 'Bearer', mode: 'stateful' });
+    await api.auth({ access_token: '...', token_type: 'Bearer' });
     const created = await api.createInteraction({ encounter: { ... } });
     await api.navigate(`/session/${created.id}`);
   };
@@ -295,7 +318,7 @@ For detailed React usage examples, see [docs/react-usage.md](./docs/react-usage.
 
 ## Package Structure
 
-- **Default export**: Web component only (`dist/web-bundle.js`)
+- **Default export**: Web component only (`dist/web-bundle.js`, readable non-minified bundle)
 - **React export**: Web component + React component (`@corti/embedded-web/react`)
 - **No dependencies**: Web component bundle has zero external dependencies
 - **Peer dependencies**: React components require React as peer dependency only

package/dist/CortiEmbedded.d.ts

@@ -1,12 +1,13 @@
-import type { Corti } from '@corti/sdk';
-import { LitElement, type PropertyValues } from 'lit';
-import type { ConfigureAppPayload, SetCredentialsPayload, AuthCredentials, ConfigureAppResponse, CortiEmbeddedAPI, InteractionDetails, CreateInteractionPayload, SessionConfig, User, GetStatusResponse, GetTemplatesResponse } from './types';
+import type { Corti } from "@corti/sdk";
+import { LitElement, type PropertyValues } from "lit";
+import type { ConfigureAppPayload, ConfigureAppResponse, CreateInteractionPayload, SetCredentialsPayload, CortiEmbeddedAPI, InteractionDetails, SessionConfig, User, GetStatusResponse, GetTemplatesResponse, KeycloakTokenResponse } from "./types";
 export declare class CortiEmbedded extends LitElement implements CortiEmbeddedAPI {
     static styles: import("lit").CSSResult[];
     visibility: string;
     baseURL: string;
     private postMessageHandler;
     private normalizedBaseURL;
+    private getIframeAllowPolicy;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private setupPostMessageHandler;
@@ -22,7 +23,7 @@ export declare class CortiEmbedded extends LitElement implements CortiEmbeddedAP
      * @param credentials Authentication credentials
      * @returns Promise resolving to user information
      */
-    auth(credentials: AuthCredentials): Promise<User>;
+    auth(credentials: KeycloakTokenResponse): Promise<User>;
     /**
      * Create a new interaction
      * @param encounter Encounter request data