Hello world\"\n onChange={(nextHtml) => console.log(nextHtml)}\n onApplyPrompt={async ({ prompt, html, files }) => {\n // Call your API and return updated html.\n return { html }\n }}\n />\n\n \n setVisible(true)}\n placeholder=\"Edit this text with AI\"\n />\n {\n // Call your API here and return updated text.\n return { text: mode === 'prompt' ? `${text} ${prompt || ''}` : text }\n }}\n />\n
\n\n console.log(value)}\n onGenerate={({ prompt, aspectRatio, agentId }) => {\n console.log('generate', prompt, aspectRatio, agentId)\n }}\n onAddToLibrary={({ url, agentId }) => {\n console.log('add-to-library', url, agentId)\n }}\n generatedUrls={['https://example.com/generated.png']}\n />\n \n )\n}\n```\n\n`MediaGeneratePanel` callback payloads always include `agentId` so host systems can enforce agent-scoped authorization.\nFor `HTMLEditor` and `FieldAssistantBar`, pass `aiContext/context.agentId` so callback requests include the same token.\n\n## Configuration Reference\n\n### App-Backed Config (`agentId`)\n\n| Property | Type | Required | Description | Example |\n|---|---|---|---|---|\n| agentId | string | Yes | Agent ID created in the Osirus app. | `\"abc123\"` |\n| baseApiUrl | string | No | API base URL override. | `\"https://osirus.ai/api\"` |\n| mode | `'chat' \\| 'code' \\| 'search' \\| 'image' \\| 'video' \\| 'speech'` | No | Overrides widget mode for this embed. | `\"search\"` |\n| searchPlaceholder | string | No | Search input placeholder for `search` mode. | `\"Search docs...\"` |\n| instanceId | string | No | Unique widget instance key used by `update`/`destroy`. | `\"cms-code-tab\"` |\n| mountTo | `string \\| HTMLElement` | No | Mount target selector or element instead of default floating root. | `\"#tab-code\"` |\n| placement | object | No | Inline placement style for widget overlay. | `{ position: 'absolute', top: '0', left: '0' }` |\n| onOutput | `(event) => void` | No | Receives generated outputs (`code`, `image`, `video`, etc.). | `(e) => console.log(e.output)` |\n| onClose | `(event) => void` | No | Called when widget closes. | `(e) => console.log(e.reason)` |\n\n### Local Config\n\n| Property | Type | Required | Description | Example |\n|---|---|---|---|---|\n| name | string | Yes | Agent display name. | `\"OsirusAgent\"` |\n| mode | `'chat' \\| 'code' \\| 'search' \\| 'image' \\| 'video' \\| 'speech'` | No | Widget mode. | `\"speech\"` |\n| searchPlaceholder | string | No | Search input placeholder for `search` mode. | `\"Search...\"` |\n| instanceId | string | No | Unique widget instance key used by `update`/`destroy`. | `\"cms-local-widget\"` |\n| mountTo | `string \\| HTMLElement` | No | Mount target selector or element instead of default floating root. | `\"#assistant-tab\"` |\n| placement | object | No | Inline placement style for widget overlay. | `{ position: 'absolute', top: '0', left: '0' }` |\n| onOutput | `(event) => void` | No | Receives generated outputs (`code`, `image`, `video`, etc.). | `(e) => console.log(e.output)` |\n| onClose | `(event) => void` | No | Called when widget closes. | `(e) => console.log(e.reason)` |\n| companyName | string | No | Replaces agent name in UI. | `\"Osirus\"` |\n| companyIconUrl | string | No | Company logo URL shown in widget header. | `\"https://agent.osirus.ai/images/Osirus-Icon.svg\"` |\n| customColor | string | No | Hex color for widget actions. | `\"#006FE5\"` |\n| description | string | No | Company/agent description text. | `\"Embedded support and AI agent widget.\"` |\n| phoneNumber | string | No | Enables call button. | `\"123-456-7890\"` |\n| email | string | No | Support email. | `\"info@osirus.ai\"` |\n| docUrl | string | No | Enables docs panel button. | `\"https://osirus.ai/docs\"` |\n| apiDocUrl | string | No | Enables API docs panel button. | `\"https://osirus.ai/docs/api\"` |\n| support | `{ type: 'page' \\| 'email', value: string }` | No | Support button behavior and target. | `{ type: 'page', value: 'https://osirus.ai/support' }` |\n| schedule | string | No | Operating hours. | `\"M - F, 8:30AM - 5:30PM EDT\"` |\n| address | object | No | Business address object. | `{ streetAddress, city, state, postalCode, country }` |\n| showMap | boolean | No | Shows map preview (requires `googleMapApiKey`). | `true` |\n| googleMapApiKey | string | No | Google Maps API key for map rendering. | `\"AIzaS...x2E_k\"` |\n| greeting | string | No | Initial greeting and popup message text. | `\"Hi, how can I help you today?\"` |\n| customOptions | `Array<{ icon, label, link, openNewTab }>` | No | Custom action buttons. | `[{ icon: 'telephone-plus', label: 'Sales', link: 'https://example.com', openNewTab: true }]` |\n\n### Callback Event Shapes\n\n`onOutput(event)`:\n- `event.type`: `'chat' | 'code' | 'image' | 'video' | 'speech' | 'search'`\n- `event.output`: mode-specific payload (for example `html` for code, `urls` for image/video)\n- `event.agentId`, `event.instanceId`, `event.mode`, `event.timestamp`\n\n`onClose(event)`:\n- `event.reason`: close reason string (for example `'widget-close'`)\n- `event.agentId`, `event.instanceId`, `event.mode`, `event.timestamp`\n\n## Icon Notes\n\n`customOptions[].icon` uses Bootstrap Icons names (without the `bi-` prefix).\nExample: `\"telephone-plus\"` renders `bi bi-telephone-plus`.\n","readmeFilename":"README.md"}