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:

{
  "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

export type TunioWidgetProps = {
  apiUrl?: string;
  sessionTokenUrl?: string;
  lang?: string;
  getSessionToken?: () => Promise<string>;
  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:

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

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

Running locally

pnpm dev

Then open http://localhost:3000.

Building the npm package

pnpm build

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

For the demo app build:

pnpm build:app

Environment variables

• NEXT_PUBLIC_AGENT_API_URL
• NEXT_PUBLIC_SESSION_TOKEN_URL

These are optional if you pass the props directly.