@frontera-sdk/chat-ui 1.50.40

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2026 Sebati
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,348 @@
+# @frontera-sdk/chat-ui
+
+A Frontera agent's conversation, as a React component in your own application.
+Streamed replies, tool activity, attachments, the files the agent produces,
+knowledge citations, approvals and personal-account connections.
+
+It is a **component, not an iframe**: it renders in your DOM, uses your React,
+and your CSS can reach it (see [Hazards](#hazards)).
+
+---
+
+## Install
+
+```bash
+npm i @frontera-sdk/chat-ui react react-dom
+```
+
+React 19, ESM only. `react` and `react-dom` are the only packages the
+**component** needs from you — two copies of React in one page break hooks.
+Everything else it renders with installs as a dependency of this package.
+
+```bash
+npm ls react   # expect one version
+```
+
+If your token endpoint lives in the same project, the **server** side needs two
+more, because your own code imports them directly (see [Tokens](#tokens)):
+
+```bash
+npm i @frontera-sdk/chat @frontera-sdk/core
+```
+
+Both already arrive with this package, so the install is a no-op in practice.
+Declare them anyway: a package your source imports belongs in your manifest,
+or the day this package stops depending on them your build breaks.
+
+---
+
+## Quick start
+
+Two things are required: **both stylesheets**, and a **container with a
+height**.
+
+```tsx
+'use client'
+import { FronteraChat } from '@frontera-sdk/chat-ui/chat'
+import '@frontera-sdk/chat-ui/platform.css'
+import '@frontera-sdk/chat-ui/styles.css'
+
+export function Support() {
+  return (
+    <div className="h-dvh">
+      <FronteraChat tokenEndpoint="/api/chat-token" />
+    </div>
+  )
+}
+```
+
+`tokenEndpoint` is a route on **your** server returning
+`{ token: string, expiresAt: string }` for the signed-in person. Building that
+route is the other half of the integration — see [Tokens](#tokens).
+
+---
+
+## Credential
+
+Pass exactly one. All four are mutually exclusive in the type.
+
+| Prop | Type | Notes |
+|---|---|---|
+| `tokenEndpoint` | `string` | **Recommended.** URL on your server. Renewal handled for you; the API origin arrives with the token. |
+| `token` + `apiBaseUrl` | `string` + `string` | You own replacing it before it expires. The chat stops when it does. |
+| `getToken` | `() => Promise<{ token, expiresAt, apiBaseUrl? }>` | Called again on renewal. |
+| `client` | `FronteraClient \| (() => FronteraClient \| null)` | You built one yourself, e.g. from `useChatClient`. |
+
+---
+
+## Props
+
+Everything below is optional.
+
+### Composer
+
+| Prop | Type | Default | What it does |
+|---|---|---|---|
+| `approvalSelector` | `boolean` | `true` | Approval-mode picker. `full` ("run without approval") only appears if the token carries the `approval-mode` capability. |
+| `fileUpload` | `boolean` | `true` | Paperclip **and** drop-anywhere-on-the-conversation. `false` makes the whole surface inert. |
+| `appsButton` | `boolean` | `false` | Plugins button — connect accounts before asking. Requires `connectRedirectUri`. |
+| `shortcuts` | `Shortcut[]` | none | Starter cards on an empty conversation. Off by default: each default card needs a computer-equipped agent. |
+| `modes` | `Record<string, ModelConfig>` | none | Model picker. Omit to hide it. |
+| `modelMode` | `string` | — | Controlled mode key. |
+| `defaultMode` | `string` | — | Initial mode key. |
+| `placeholder` | `string` | `"Assign a task or ask anything..."` | Composer placeholder. |
+
+```ts
+interface Shortcut {
+  id: string
+  label: string
+  description: string
+  prompt: string   // dropped into the composer, not sent
+}
+```
+
+### Conversation and agent
+
+| Prop | Type | Default | What it does |
+|---|---|---|---|
+| `conversationId` | `string` | new each mount | Resume a thread. Key the component by it if you own a thread list. |
+| `agentName` | `string` | person chooses | **Selects** the agent by slug or id, and hides the picker. Ignored when the credential already fixes the agent. |
+| `agentLabel` | `string` | agent's own name | **Display** name above replies. The cosmetic one. |
+| `agentId` | `string` | — | Agent UUID. Lets the composer offer that agent's apps and `@` mentions. |
+| `agentPicker` | `boolean` | `true` | Shown only when the credential reaches more than one agent. |
+| `body` | `Partial<StartChatRequest>` | — | Extra fields on every send, read at send time. `messages` and `conversationId` excluded. |
+
+### Layout and appearance
+
+| Prop | Type | Default | What it does |
+|---|---|---|---|
+| `header` | `boolean` | `true` | The conversation's own header. |
+| `sidePanel` | `boolean` | `true` | Artifact pane (desktop) / full-screen sheet (mobile), and the control that opens it. |
+| `theme` | `FronteraChatTheme` | inherits | Design tokens, applied to the shell **and** the portal root. |
+| `dark` | `boolean` | OS preference | Pin the scheme. **Pass it if your app has a theme toggle**, or the two disagree. |
+| `className` | `string` | — | Added to the shell element. |
+| `empty` | `ReactNode` | platform greeting | Replaces the new-session screen. |
+| `mobileMenu` | `ReactNode` | none | Leading control in the mobile header — your session list. Nothing renders if omitted. Ignored ≥768px. |
+
+```ts
+interface FronteraChatTheme {
+  background?: string; surface?: string; border?: string
+  text?: string; muted?: string
+  accent?: string; accentText?: string; danger?: string
+  radius?: string; fontFamily?: string
+}
+```
+
+### Connect flow
+
+| Prop | Type | What it does |
+|---|---|---|
+| `connectRedirectUri` | `string` | Your OAuth callback page. Without it the connect card explains what is missing instead of offering a dead button. |
+| `connectOrigin` | `string` | Origin the callback posts from, when it differs from the redirect's. |
+
+### Events
+
+| Prop | Type | When |
+|---|---|---|
+| `onStart` | `(info: { conversationId: string; runId: string }) => void` | A run starts. The hook for your own thread list. |
+| `onError` | `(error: Error) => void` | Every transport and stream error. **Wire this** — without it failures are visible to the user and nowhere in your logs. |
+
+---
+
+## Tokens
+
+The browser never holds your agent key. Your server exchanges it for a
+short-lived, per-user `cht_` token.
+
+Server-side only. Needs `@frontera-sdk/chat` and `@frontera-sdk/core` in your
+manifest — see [Install](#install).
+
+```ts
+// POST /api/chat-token — your server
+import { FronteraClient } from '@frontera-sdk/core/client'
+import { exchangeChatToken } from '@frontera-sdk/chat/auth'
+
+const frontera = new FronteraClient({
+  apiBaseUrl: process.env.FRONTERA_API_URL!,
+  // Either key kind goes here, same shape — see "Which key" below.
+  credential: { kind: 'apiKey', key: process.env.FRONTERA_WORKSPACE_KEY! },
+})
+
+export async function POST(req: Request) {
+  const user = await currentUser(req)                // YOUR session
+  if (!user) return new Response('unauthorized', { status: 401 })
+
+  return Response.json(
+    await exchangeChatToken(frontera, {
+      externalUserId: user.id,                       // never from the body
+      ttlSeconds: 1800,                              // 60–86400, default 3600
+      capabilities: ['plugin-connect'],
+    }),
+  )
+}
+```
+
+### Which key
+
+| | Agent key `sak_…` | Workspace key `sk-ws-…` |
+|---|---|---|
+| Reaches | exactly one agent, always | every chat agent in the workspace |
+| Per-user choice | none — `agentId` naming a different agent is `403`, `agentIds` is `403` | `agentId` for one, `agentIds` for a subset (max 50) |
+| Agent picker | never shown, nothing to pick | shown, limited to what you minted |
+| If leaked | one agent | every chat agent |
+| Extra requirement | — | must be scoped **`chat`**; an `mcp`-scoped key is refused, naming its scope |
+
+One surface, one agent → agent key, and stop there. A picker, or different
+agents for different customers → workspace key.
+
+```ts
+// Workspace key only — narrowing what this person's token may reach.
+await exchangeChatToken(frontera, {
+  externalUserId: user.id,
+  agentId: 'support-bot',                     // exactly one
+  // or
+  agentIds: ['support-bot', 'billing-bot'],   // a subset; the picker shows these
+})
+```
+
+`agentId` and `agentName` both accept the agent's UUID or its slug; an unknown
+one is `404`, never a silent fallback. Narrowing is enforced server-side —
+filtering a picker in the browser looks identical and protects nothing.
+
+### Capabilities
+
+| Capability | Default | Opens |
+|---|---|---|
+| *(base)* | always | Chat, history, own conversations, answering approvals |
+| `plugin-connect` | on | Connecting their own account for a plugin |
+| `schedule` | off | The agent's scheduled tasks |
+| `agent-mode` | off | Work items, exchanges, handoffs |
+| `approval-mode` | off | Choosing "run without approval" |
+
+`externalUserId`, `capabilities`, `agentId` and `ttlSeconds` are privilege
+decisions. Take each from your own session — if the caller can name the user,
+any signed-in person can read someone else's conversations.
+
+Renewal is automatic, up to a 12-hour session ceiling; after that your server
+mints again.
+
+---
+
+## Other entry points
+
+| Import | Gives you |
+|---|---|
+| `@frontera-sdk/chat-ui/chat` | `FronteraChat` — the whole surface |
+| `@frontera-sdk/chat-ui/client` | `useChatClient`, `ChatClient`, public types — for your own sidebar |
+| `@frontera-sdk/chat-ui/oauth-callback` | `FronteraOAuthCallback` — the connect callback page |
+| `@frontera-sdk/chat-ui/new-session` | `buildDefaultShortcuts`, `Shortcut` |
+| `@frontera-sdk/chat-ui/message`, `/composer`, `/parts`, `/header` | Compose your own layout |
+| `@frontera-sdk/chat-ui/theme` | `FronteraChatTheme` |
+
+Reading the conversation from your own chrome:
+
+```tsx
+import { useChatClient, type Session } from '@frontera-sdk/chat-ui/client'
+
+const { client, getClient } = useChatClient({ tokenEndpoint: '/api/chat-token' })
+useEffect(() => {
+  client?.listSessions({ limit: 20 }).then(p => setThreads(p.data))
+}, [client])
+
+// Share the credential instead of minting a second token for the same person:
+<FronteraChat client={getClient} conversationId={openId} />
+```
+
+---
+
+## Connecting a user's own account
+
+For plugins that act as the person (their mail, their files). Four
+prerequisites, all required:
+
+1. Register your callback URL with the provider (Google, Microsoft…).
+2. Add **your own** OAuth client in Frontera → Settings → Secrets. A provider
+   only authorises redirects on a domain its owner verified, so it cannot be
+   ours.
+3. Add the callback URL **and** your app's origin to the embed allowlist
+   (`POST /v1/apps/embed-allowlist`, needs a workspace member with
+   `app:configure`). No default, no wildcard.
+4. Mint tokens with `plugin-connect`.
+
+```tsx
+// app/oauth/callback/page.tsx
+'use client'
+import { FronteraOAuthCallback } from '@frontera-sdk/chat-ui/oauth-callback'
+export default function Page() { return <FronteraOAuthCallback /> }
+```
+
+```tsx
+<FronteraChat
+  tokenEndpoint="/api/chat-token"
+  connectRedirectUri="https://app.example.com/oauth/callback"
+  appsButton
+/>
+```
+
+Popup by default, full-page redirect when popups are blocked.
+
+---
+
+## Mobile
+
+Under 768px the component follows the platform rather than shrinking the
+desktop layout:
+
+- the side panel becomes a **full-screen sheet**, not a column;
+- the header is **solid and in the flow**, with the title, a summary sheet and
+  a files list;
+- `mobileMenu` renders at the head of that bar — your session list, your
+  component;
+- the bar stays on a new session, captioned "New Session".
+
+---
+
+## Hazards
+
+| | |
+|---|---|
+| **Your CSS reaches in** | A rule like `button { padding: 8px }` restyles every control in the chat. Scope yours: `button:not(.fr-shell *)`. Portalled dialogs carry `.fr-shell` too. |
+| **One React** | Two copies break hooks — `Cannot read properties of null (reading 'useState')`. Check `npm ls react`. |
+| **Height** | `.fr-shell` is `height: 100%`. A container without height collapses it. |
+| **CSP** | Allow your Frontera API origin in `connect-src`. |
+
+---
+
+## Troubleshooting
+
+| Symptom | Cause |
+|---|---|
+| Blank chat, no error | `onError` not wired |
+| Nothing renders / zero height | Container has no height |
+| `401` immediately | Token endpoint returned the wrong shape — must be `{ token, expiresAt }` |
+| Chat stops after an hour | Using `token` without refresh; use `tokenEndpoint` |
+| `useState` of null | Two Reacts |
+| Controls look wrong | Host CSS styling bare elements |
+| Connect button does nothing | `connectRedirectUri` missing, or URL not on the allowlist |
+| Conversation stops with nothing to click | A parked approval — `GET /v1/chat/approvals?conversationId=…` with the same token |
+
+---
+
+## What the browser calls
+
+For a CSP allowlist or a proxy. All against your Frontera API origin, with the
+`cht_` token:
+
+```
+POST   /v1/chat                                    conversation stream (SSE)
+POST   /v1/chat-tokens/renew                       refresh
+GET    /v1/chat-agents                             agent picker
+GET    /v1/sessions, /v1/sessions/:id              history
+PATCH  /v1/sessions/:id                            title, approval mode
+GET    /v1/chat/approvals?conversationId=…         parked decisions
+POST   /v1/chat/approvals/:id                      answer one
+POST   /v1/chat/app-connections/start|exchange|resume
+POST   /v1/chat-uploads                            attachments
+GET    /v1/chat-artifacts/:id[/file|/preview|/versions…]
+PATCH  /v1/chat-artifacts/:id                      save an edit
+```