Chat Client overview

The chat client is the front-end half of AppMint's customer-support and AI-assistant product. The widget renders a chat bubble in the corner of any web page, opens to a panel, and connects to AppEngine over Socket.IO.

What you get

• Real-time messaging between a visitor and a live agent or AI assistant.
• Typing indicators, presence, and read receipts.
• File attachments via drag-and-drop.
• Markdown-rendered messages with GitHub-flavoured syntax (tables, fenced code, task lists).
• Emoji picker (emoji-mart).
• Localised UI via react-i18next — English ships in src/locales/en/translation.json; add a folder per locale.
• Two modes: a full chat experience (ChatApp) and a knowledge-base Q&A flavour (ChatQAApp).
• Server-rendered variant (AppmintChatServer) for Next.js consumers that want the panel rendered on the server with its initial state hydrated.

Build outputs

The chat-client repo produces two outputs:

Mode	Build script	Output	Consumer
Standalone app (canonical)	yarn build (react-scripts + update-script-hashes.js)	build/ static SPA + appmint-chat.js	The CDN-hosted bundle every install path uses
Library bundle (experimental)	yarn build:lib (Rollup)	dist/bundle.js UMD	Currently unused outside local experiments — no consumer ships from dist/ today

Every install path on this site loads the standalone bundle from the CDN. There is no published npm package; integrations differ only in how they inject the script tag.

• A static site, a CMS template, or Webflow — drop in the script tag.
• A React or Vite app — wrap the script-tag pattern in a tiny client component. See the React integration.
• Next.js App Router — use the same wrapper pattern, plus a server component that reads env vars on the server. See the yugo reference at /Users/imzee/projects/yugo/src/components/AppmintChat.tsx and Next.js integration.

How it talks to the platform

The widget bootstraps in three steps:

1. Pulls a chat config from AppEngine — restHelper.getChatConfig({ orgId, configId, appId }). The config decides theming, availability windows, AI assistants, the welcome screen, and whether the conversation is gated by registration.
2. Authenticates the visitor. For unauthenticated guests it creates a guest record (email-only) and stores { token, user } in localStorage under appmint-chat-session.
3. Opens a Socket.IO connection to AppEngine's ChatGateway and joins the right rooms (visitor, conversation, broadcast).

From there every message, typing event, presence change, and AI streaming chunk flows over the socket. AppEngine routes messages to a queue, an assigned agent, or an AI assistant depending on the chat config.

Source layout

The repo lives at /Users/imzee/projects/chat-client/. Useful files:

• src/index.tsx — script-tag entry. Exposes window.AppmintChatClient.init(container, config) — note the bundled global at the CDN is also accessible as window.AppmintChat via the wrapper conventions used in yugo.
• src/chat-app.tsx — full chat panel.
• src/chat-qa-app.tsx — Q&A-only variant.
• src/chat-store.ts — Zustand store. Single source of truth for messages, presence, AI streaming, and queue state.
• src/components/chat-socket.tsx — owns the socket connection and event subscriptions.
• src/locales/ — translation JSONs.
• rollup.config.mjs — library build config.
• update-script-hashes.js — copies the hashed CRA bundle to a stable main.js for CDN consumers.

When to read which page

• New to the widget — start with the Quickstart.
• Building inside a React tree — go to React installation, then Configuration.
• Customising the UI — Theming. (Render-prop slots are not supported today — see Slots for the current state.)
• Wiring listeners or running outside the default UI — Events and hooks.
• Shipping to production — Deployment.