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.
npm install tunio-agent-widgetA 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.
- 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.).
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.
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.