Web & Telegram Mini App

@aw-chat/web renders the SDK with DOM components. The same package powers the Telegram Mini App.

Install & mount

pnpm add @aw-chat/web

import { AWChat } from "@aw-chat/web";

<div style={{ height: "100dvh" }}>
  <AWChat userId={u.id} sessionToken={u.token} serverUrl={SERVER} telemetry={t} />
</div>

• The component fills its container (fill defaults to true); give the parent an explicit height. Set fill={false} to render at the container's natural size.
• Styles are scoped under a .awchat root and themed with CSS variables, so they won't leak into or clash with your app.
• Fonts (Unbounded, Golos Text, JetBrains Mono) are injected automatically from Google Fonts on mount.

Responsive

The layout adapts to the SDK container width (via container queries), not the viewport — so it collapses to a single pane correctly even when embedded in a narrow side panel or a phone-framed Mini App.

Telegram Mini App

Pass telegramChatId so the backend can send Telegram push with deep-link buttons (t.me/<bot>/app?startapp=chat_<id>):

const tg = window.Telegram.WebApp;

<AWChat
  userId={awUserId}
  sessionToken={token}
  serverUrl={SERVER}
  telemetry={{ appVersion: "6.1.4", hardwareId: "tma", osVersion: "tma", deviceLang: tg.language_code }}
  telegramChatId={String(tg.initDataUnsafe.user.id)}
  theme={tg.colorScheme}
/>

Tip: mirror the Mini App theme by passing theme={tg.colorScheme}.

Bundling

The SDK ships as ESM + types and is consumed by any modern bundler (Vite, webpack, Next.js). It imports a CSS file — your bundler must handle CSS imports (all modern ones do).