Tunio Agents Widget

A Next.js demo app for the Tunio on‑air control widget. The widget is a compact chat UI that talks to the Tunio agent service and streams responses back in real time.

What’s in this repo

- src/components/TunioWidget.tsx — the widget component.
- src/components/TunioWidget.module.css — widget styles and theme tokens.
- src/i18n/translations.ts — UI translations (EN/RU) + fallback to English.
- src/app/page.tsx — demo page that mounts the widget.
- src/app/fonts.ts + src/app/globals.css — typography setup (Roboto / Russo One, etc.).

How streaming works

The widget expects the agent API to respond as Server‑Sent Events (SSE) over a POST request.

Request body:

``json
{
"message": "user text",
"session_token": "...",
"user_lang": "ru"
}
`

Streaming response format (examples):

`
event: message
data: {"content":"partial or full response"}

event: error
data: {"message":"error text"}
`

The widget accumulates event: message chunks and updates the last assistant bubble in real time.

Props


`ts
export type TunioWidgetProps = {
apiUrl?: string;
sessionTokenUrl?: string;
lang?: string;
getSessionToken?: () => Promise;
accessToken?: string;
title?: string;
subtitle?: string;
theme?: 'light' | 'dark';
className?: string;
onNavigate?: (href: string) => void;
};
`

Notes:

- lang controls i18n (EN/RU). Unknown → English.
- theme defaults to light.
- onNavigate lets you intercept internal links in assistant Markdown.
- Session token resolution order: getSessionToken → accessToken → sessionTokenUrl.

Keyboard & focus behavior

- Enter sends the message.
- Shift+Enter inserts a newline.
- After send (or failed send), focus returns to the textarea.
- While streaming, sending is disabled.

Theming & overrides

CSS Modules are scoped. For external overrides, target the root data attribute:

`css
[data-tunio-widget="root"][data-theme="dark"] {
--accent: #5b8cff;
}
`

Key tokens are defined inside .widget and overridden by .light / .dark.

Running locally

`bash
pnpm dev
`

Then open http://localhost:3000.

Building the npm package

`bash
pnpm build
`

This runs tsup and produces dist/ with ESM + CJS builds and injected CSS.

For the demo app build:

`bash
pnpm build:app
`

Environment variables

- NEXT_PUBLIC_AGENT_API_URL
- NEXT_PUBLIC_SESSION_TOKEN_URL`

These are optional if you pass the props directly.