@channlize/react 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# @channlize/react
+
+## 0.3.0
+
+### Minor Changes
+
+- ad8f04d: Redesign `ContactForm` to match the chat widget: scoped styles, `theme` (light / dark / auto / system), `primaryColor`, labels and placeholders, inline validation with accessible errors, loading / success / error states, a honeypot spam guard, and optional company and topic fields (`fields`, `topics`, `defaultValues`). Existing props keep working; `onSuccess` now also receives the API response. Export `ContactFormProps`, `ContactFormLabels` and `defaultContactFormLabels`.
+
+### Patch Changes
+
+- Updated dependencies [69f414f]
+  - @channlize/core@0.2.1
+
+## 0.2.0
+
+### Minor Changes
+
+- db7da26: Redesign the live-chat widget (`ChannlizeChat` / `SupportChat`).
+
+  - Header: brand avatar slot, title, and a calm status line ("Online · Replies in a few minutes"). The close button no longer overlaps anything; "End conversation" moved into a menu with a confirmation step; a clear minimize button.
+  - Messages: grouped by author with agent name and avatar, day separators, one timestamp per group (full date on hover), better bubble shapes, wrapping of long words and URLs, safe link detection (http/https only, no HTML), image and file attachment cards, and optimistic sending with "Sending…" / "Not sent · Retry · Remove".
+  - Welcome screen with `greeting`, `welcomeMessage` and optional `suggestions`.
+  - Composer: auto-growing textarea (Enter sends, Shift+Enter new line), send icon button disabled when empty, attach button with `allowAttachments`, `maxLength` counter, "Write a message…" placeholder.
+  - Connection: status and "Reconnecting…" banner are debounced, so the routine SSE reconnect every ~50s never flickers; a lost connection shows a banner with Retry.
+  - Theming: light and dark (`theme`, follows `prefers-color-scheme` by default), `primaryColor` / `primaryTextColor` with automatic readable text color; the hard-coded blue-to-purple gradient is gone. Existing `styles`, `buttonColors`, `className` props keep working.
+  - Launcher: new icon, unread badge counting agent replies received while closed (or `showBadge` + `unreadCount`), open/close animation that respects `prefers-reduced-motion`.
+  - Mobile: full-screen panel under 640px, safe-area insets, 16px input to avoid iOS zoom.
+  - Accessibility: the panel is a labelled dialog, focus moves in on open and back to the launcher on close, Esc closes, the message list is a polite live region, all icon buttons are labelled.
+  - Isolation: a scoped stylesheet with a reset under `.channlize-widget`; `ChannlizeChat` renders through a portal into `document.body`. Default `zIndex` is now `2147483000`.
+  - New props: `ChannlizeChat` `primaryColor`, `theme`; `SupportChat` `avatarUrl`, `avatar`, `statusText`, `greeting`, `welcomeMessage`, `suggestions`, `theme`, `primaryColor`, `primaryTextColor`, `locale`, `maxLength`, `allowEndChat`, `onMinimize`, `labels`. `useChatSession` returns `reconnect()`. Exported types: `SupportChatProps`, `SupportChatLabels`, `ChatTheme`, `ChannlizeChatProps`, `UseChatSessionOptions`, `UseChatSessionReturn`, and `defaultSupportChatLabels`.
+
+## 0.1.2
+
+### Patch Changes
+
+- c113208: Add Events: post a Slack message from your server when something happens.
+
+  - `@channlize/core`: `client.notify(event, data?, { idempotencyKey?, channel? })` and a standalone `createNotifier()` that reads `CHANNLIZE_SERVER_API_KEY` / `CHANNLIZE_API_KEY` and `CHANNLIZE_PROJECT_ID`. Both call `POST /v1/notify` with the server API key (write scope). Event keys and data can be typed with `createNotifier<AppEvents>()` or by augmenting `ChannlizeEvents`. `trackEvent` / `trackServerEvent` are unchanged and now documented as log tracking. Fix: an explicit `baseUrl: undefined` or `timeout: undefined` no longer overrides the defaults.
+  - `@channlize/mcp`: new `notify_event` tool, enabled with `--server-api-key` / `CHANNLIZE_SERVER_API_KEY`.
+  - `@channlize/react`: docs only. `useChannlizeAnalytics().track` is documented as log tracking.
+
+- Updated dependencies [c113208]
+  - @channlize/core@0.2.0
+
+## 0.1.1
+
+### Patch Changes
+
+- a2f2080: `useChatSession` no longer closes its EventSource when the server ends a
+  stream. The browser reconnects on its own and resumes from the last message,
+  so agent replies keep arriving in long chats instead of stopping after the
+  first stream ends.
+- 7f6cb9c: `useChatSession` with `autoConnect` no longer closes its chat stream right after opening it. The auto-connect effect's cleanup ran on every `session`/`isConnecting` change, so the widget stayed disconnected and never received agent replies; the stream now closes only on unmount.
+- Updated dependencies [9ddf630]
+  - @channlize/core@0.1.0

package/README.md

@@ -254,16 +254,18 @@ function CustomChat() {
 | `buttonElement` | `ReactNode` | - | Custom button (overrides default) |
 | `buttonIcon` | `ReactNode` | - | Custom icon (used if buttonElement not provided) |
 | `buttonSize` | `number` | `56` | Button size in pixels |
-| `buttonColors` | `{ background?: string; hover?: string; text?: string }` | Blue gradient | Button colors |
-| `chatProps` | `SupportChatProps` | `{}` | Props passed to internal SupportChat component |
+| `buttonColors` | `{ background?: string; hover?: string; text?: string }` | `primaryColor` | Launcher colors |
+| `primaryColor` | `string` | `'#2563eb'` | Accent color for the launcher, header, customer bubbles and send button (hex recommended; text on it is picked for contrast) |
+| `theme` | `'auto' \| 'light' \| 'dark'` | `'auto'` | Color scheme; `auto` follows `prefers-color-scheme` |
+| `chatProps` | `SupportChatProps` | `{}` | Props passed to internal SupportChat component (title, greeting, suggestions...) |
 | `defaultOpen` | `boolean` | `false` | Whether to start open |
-| `showBadge` | `boolean` | `false` | Whether to show unread count badge |
-| `unreadCount` | `number` | `0` | Unread message count |
-| `zIndex` | `number` | `1000` | CSS z-index |
-| `showOnMobile` | `boolean` | `true` | Whether to show on mobile devices |
+| `showBadge` | `boolean` | `false` | Show `unreadCount` instead of the built-in count of agent replies received while closed |
+| `unreadCount` | `number` | `0` | Unread message count (with `showBadge`) |
+| `zIndex` | `number` | `2147483000` | CSS z-index |
+| `showOnMobile` | `boolean` | `true` | Whether to show the launcher on screens under 640px |
 | `onOpen` | `() => void` | - | Callback when chat opens |
 | `onClose` | `() => void` | - | Callback when chat closes |
-| `enableAnimations` | `boolean` | `true` | Enable smooth animations |
+| `enableAnimations` | `boolean` | `true` | Enable animations (always reduced with `prefers-reduced-motion`) |
 | `buttonClassName` | `string` | `''` | Custom class for button container |
 | `chatClassName` | `string` | `''` | Custom class for chat container |
 
@@ -290,13 +292,25 @@ function CustomChat() {
   }}
 />
 
-// With custom chat options
+// Branding, greeting and quick suggestions
+<ChannlizeChat
+  config={{ apiKey: 'key', projectId: 'id' }}
+  primaryColor="#0f766e"
+  chatProps={{
+    title: 'Acme',
+    avatarUrl: 'https://acme.com/logo.png',
+    statusText: 'Replies in a few minutes',
+    greeting: 'Hi there!',
+    welcomeMessage: 'Ask us anything. We are here to help.',
+    suggestions: ['How does pricing work?', 'Talk to sales'],
+    allowAttachments: true,
+  }}
+/>
+
+// Inline style overrides still apply on top of the theme
 <ChannlizeChat
   config={{ apiKey: 'key', projectId: 'id' }}
   chatProps={{
-    title: "24/7 Support",
-    placeholder: "Ask us anything...",
-    showTimestamps: true,
     styles: {
       header: {
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -332,31 +346,76 @@ function CustomChat() {
 
 ### ContactForm
 
-A complete contact form component with validation and submission handling.
+A themed, accessible contact form that posts to Channlize (and from there to
+your Slack). Styles are scoped to `.channlize-contact`, so it looks the same on
+any page and never leaks into it. It has inline validation, a focus move to the
+first invalid field, errors linked to their fields with `aria-describedby`,
+loading, success and error states, and a hidden honeypot field against simple
+bots.
+
+```tsx
+<ContactForm
+  theme="auto"
+  primaryColor="#2563eb"
+  fields={{ company: 'optional' }}
+  topics={['Sales', 'Support', 'Billing']}
+  defaultValues={{ topic: searchParams.get('topic') ?? undefined }}
+  labels={{ footnote: 'We usually reply within one business day.' }}
+  onSuccess={({ conversationId }) => console.log('Sent', conversationId)}
+/>
+```
 
 **Props:**
-- `customFields?: Array<CustomField>` - Additional form fields
-- `onSuccess?: () => void` - Success callback
+- `customFields?: ContactFormCustomField[]` - Extra fields (`text`, `email`, `textarea`, `select`), sent as `customFields`
+- `onSuccess?: (response: CreateContactResponse) => void` - Success callback
 - `onError?: (error: Error) => void` - Error callback
-- `className?: string` - CSS class name
-- `styles?: ContactFormStyles` - Custom styles object
-- `submitText?: string` - Submit button text
-- `successMessage?: string` - Success message text
+- `className?: string` - CSS class name on the root
+- `styles?` - Inline style overrides: `form`, `field`, `label`, `input`, `textarea`, `button`, `error`, `success`
+- `submitText?: string` / `successMessage?: string` - Shortcuts for `labels.submit` / `labels.successMessage`
+- `theme?: 'light' | 'dark' | 'auto' | 'system'` - Colour scheme (default `'light'`; `auto` and `system` follow `prefers-color-scheme`)
+- `primaryColor?: string`, `primaryTextColor?: string` - Accent colour (button, focus ring) and the text on it
+- `variant?: 'card' | 'plain'` - `card` (default) draws a themed surface; `plain` inherits the host's background
+- `unstyled?: boolean` - Skip the built-in stylesheet (class names stay)
+- `fields?: { name?, company?, subject?, topic? }` - Each `'required' | 'optional' | 'hidden'` (defaults: name required, subject optional, company hidden, topic optional when `topics` is set). Email and message are always required.
+- `topics?: Array<string | { value: string; label?: string }>` - Shows a topic select. The chosen label is sent as `customFields.topic` and used as the subject when that is blank; `value` identifies the option for `defaultValues`
+- `defaultValues?: Partial<{ name, email, company, subject, topic, message }>` - Prefill; `topic` matches an option's value or label case-insensitively (e.g. `?topic=sales`)
+- `labels?: Partial<ContactFormLabels>` - Override any label, placeholder or message (see `defaultContactFormLabels`)
+- `minMessageLength?: number` (default `10`, what the API accepts), `maxMessageLength?: number` (default `5000`)
+- `honeypot?: boolean` - Hidden spam-trap field; a filled trap gets a fake success and nothing is sent (default `true`)
+- `showSuccessState?: boolean` - Show the built-in success screen (default `true`); when `false` the form clears and announces success
+- `idPrefix?: string` - Prefix of field ids (default `channlize`, e.g. `channlize-email`)
 
 ### SupportChat
 
-A real-time chat widget with message history and file attachments.
+A real-time chat panel with grouped messages, day separators, safe link
+detection, attachments, optimistic sending with retry, and a debounced
+connection status (routine stream reconnects never flash in the UI). It fills
+its parent, so give the parent a height.
 
 **Props:**
-- `autoStart?: boolean` - Auto-start chat session
+- `autoConnect?: boolean` - Start (or resume) the session on mount (default `true`)
 - `metadata?: Record<string, unknown>` - Session metadata
 - `onMessage?: (message: ChatMessage) => void` - New message callback
 - `onError?: (error: Error) => void` - Error callback
 - `className?: string` - CSS class name
-- `styles?: SupportChatStyles` - Custom styles object
-- `title?: string` - Chat header title
-- `placeholder?: string` - Input placeholder text
-- `maxHeight?: string` - Maximum container height
+- `styles?` - Inline style overrides: `container`, `header`, `messagesContainer`, `message`, `userMessage`, `agentMessage`, `inputContainer`, `input`, `button`, `error`, `timestamp`
+- `title?: string` - Team or brand name in the header (default `'Support'`)
+- `avatarUrl?: string` / `avatar?: ReactNode` - Logo in the header and welcome screen (initials otherwise)
+- `statusText?: string` - Shown after "Online" (default `'Replies in a few minutes'`; `''` hides it)
+- `greeting?: string` / `welcomeMessage?: string` - Welcome screen copy
+- `suggestions?: string[]` - Quick replies on the welcome screen
+- `placeholder?: string` - Input placeholder (default `'Write a message…'`)
+- `sendButtonText?: string` - Accessible label of the send icon button
+- `showTimestamps?: boolean` - One time per message group, full date on hover (default `true`)
+- `allowAttachments?: boolean` - Show the attach button (default `false`)
+- `theme?: 'auto' | 'light' | 'dark'`, `primaryColor?: string`, `primaryTextColor?: string` - Theming
+- `locale?: string` - Locale for dates and times (default: browser)
+- `maxLength?: number` - Maximum message length (default `5000`)
+- `allowEndChat?: boolean` - "End conversation" in the header menu, with confirmation (default `true`)
+- `onMinimize?: () => void` - Shows a minimize button; Esc calls it
+- `labels?: Partial<SupportChatLabels>` - Override any UI string (see `defaultSupportChatLabels`)
+
+Keyboard: Enter sends, Shift+Enter adds a new line (on touch-only devices Enter adds a new line and the button sends).
 
 ## Hooks
 
@@ -394,11 +453,25 @@ Hook for managing chat sessions with real-time messaging.
 - `sendMessage: (content: string, attachments?: File[]) => Promise<void>`
 - `startSession: () => Promise<void>`
 - `endSession: () => Promise<void>`
+- `reconnect: () => void` - Reopen the real-time stream after it failed (`error.code === 'SSE_ERROR'`)
+
+### useChannlizeAnalytics (log tracking)
+
+Records logs from the browser with the widget key; they show up under **Log tracking** in the dashboard.
+
+```tsx
+const { track } = useChannlizeAnalytics();
+track('cta_clicked', { properties: { section: 'hero' } });
+```
+
+To post a Slack message when something happens (a signup, a payment), use **Events** from your server — `createNotifier` / `client.notify` in [`@channlize/core`](../core/README.md#events-notify-slack-from-your-server). Events need a server API key, so they are never sent from the browser.
 
 ## Styling
 
 All components accept a `styles` prop for custom styling. You can also use CSS classes with the `className` prop. Components use semantic class names prefixed with `channlize-`.
 
+The chat widget ships its own small stylesheet, scoped under `.channlize-widget`, with a reset so host-page element styles (`button`, `h2`, `textarea`...) don't leak in, and nothing leaks out. `ChannlizeChat` renders into `document.body` through a portal so host transforms and `overflow` can't clip it. Theme tokens are CSS custom properties on `.channlize-widget` (`--chz-primary`, `--chz-on-primary`, `--chz-bg`, `--chz-text`, `--chz-muted`, `--chz-border`, `--chz-bubble`...) and can be overridden from your CSS.
+
 ### CSS Classes
 
 - `.channlize-contact-form`
@@ -408,7 +481,8 @@ All components accept a `styles` prop for custom styling. You can also use CSS c
 - `.channlize-chat-container`
 - `.channlize-chat-header`
 - `.channlize-chat-messages`
-- `.channlize-message`
+- `.channlize-chat-status` (`data-status="online|connecting|offline"`)
+- `.channlize-message` (`data-pos`, `data-status="sent|sending|failed"`)
 - `.channlize-message-user`
 - `.channlize-message-agent`
 - `.channlize-chat-input-container`

package/dist/index.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { ChannlizeConfig, ChannlizeClient, CreateContactResponse, ChannlizeError, ContactFormData, ChatMessage, ChatSession } from '@channlize/core';
-export { AuthenticationError, ChannlizeConfig, ChannlizeError, ChatMessage, ChatSession, ContactFormData, CreateChatSessionResponse, CreateContactResponse, FileAttachment, RateLimitError, SendMessageResponse, ValidationError } from '@channlize/core';
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { ChannlizeConfig, ChannlizeClient, CreateContactResponse, ChannlizeError, ContactFormData, ChatMessage, ChatSession, TrackEventOptions } from '@channlize/core';
+export { AuthenticationError, ChannlizeConfig, ChannlizeError, ChatMessage, ChatSession, ContactFormData, CreateChatSessionResponse, CreateContactResponse, EventSeverity, FileAttachment, RateLimitError, SendMessageResponse, TrackEventOptions, ValidationError } from '@channlize/core';
 
 interface ChannlizeContextValue {
     client: ChannlizeClient;
@@ -14,7 +14,7 @@ interface ChannlizeProviderProps {
 /**
  * Provider component that makes Channlize client available to all child components
  */
-declare function ChannlizeProvider({ config, children }: ChannlizeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ChannlizeProvider({ config, children, }: ChannlizeProviderProps): react.JSX.Element;
 /**
  * Hook to access the Channlize client and configuration
  */
@@ -54,54 +54,210 @@ interface UseChatSessionReturn {
     sendMessage: (content: string, attachments?: File[]) => Promise<void>;
     startSession: () => Promise<void>;
     endSession: () => Promise<void>;
+    /**
+     * Reopen the real-time stream for the current session after it failed
+     * (`error.code === 'SSE_ERROR'`). Routine reconnects are automatic.
+     */
+    reconnect: () => void;
 }
 /**
  * Hook for managing chat sessions with real-time messaging
  */
 declare function useChatSession(options?: UseChatSessionOptions): UseChatSessionReturn;
 
-interface FormProps {
-    /** Custom fields to include in the form */
-    customFields?: Array<{
-        name: string;
-        label: string;
-        type: 'text' | 'email' | 'textarea' | 'select';
-        required?: boolean;
-        options?: string[];
+/**
+ * Returns a stable `track` function bound to the provider client for log
+ * tracking (browser / widget key; shown under Log tracking in the
+ * dashboard). To post a Slack message when something happens, use Events
+ * (`notify` from `@channlize/core`) on your server instead.
+ */
+declare function useChannlizeAnalytics(): {
+    track: (name: string, options?: TrackEventOptions) => Promise<{
+        success: boolean;
+        id: string;
     }>;
+};
+
+/** `auto` and `system` both follow `prefers-color-scheme`. */
+type ContactFormTheme = 'auto' | 'system' | 'light' | 'dark';
+/** Whether a built-in field is shown, and whether it must be filled in. */
+type ContactFieldMode = 'required' | 'optional' | 'hidden';
+interface ContactFormTopic {
+    /** Identifies the option, e.g. for `defaultValues.topic` from a URL */
+    value: string;
+    /**
+     * Shown in the select, sent as `customFields.topic`, and used as the
+     * subject when that is blank. Defaults to `value`.
+     */
+    label?: string;
+}
+/** The built-in fields' values (also what `defaultValues` takes). */
+interface ContactFormValues {
+    name: string;
+    email: string;
+    company: string;
+    subject: string;
+    topic: string;
+    message: string;
+}
+interface ContactFormCustomField {
+    name: string;
+    label: string;
+    type: 'text' | 'email' | 'textarea' | 'select';
+    required?: boolean;
+    options?: string[];
+    placeholder?: string;
+}
+/** Every user-facing string in the form, for copy changes or translation. */
+interface ContactFormLabels {
+    name: string;
+    email: string;
+    company: string;
+    subject: string;
+    topic: string;
+    message: string;
+    namePlaceholder: string;
+    emailPlaceholder: string;
+    companyPlaceholder: string;
+    subjectPlaceholder: string;
+    topicPlaceholder: string;
+    messagePlaceholder: string;
+    optional: string;
+    submit: string;
+    submitting: string;
+    successTitle: string;
+    successMessage: string;
+    sendAnother: string;
+    /** Shown under a required field left empty */
+    errorRequired: string;
+    /** Shown under a required select left on the placeholder */
+    errorSelect: string;
+    errorEmail: string;
+    /** `{min}` is replaced with the minimum length */
+    errorTooShort: string;
+    /** `{max}` is replaced with the maximum length */
+    errorTooLong: string;
+    /** Announced when a submit is blocked by invalid fields */
+    errorSummary: string;
+    /** Shown when sending fails */
+    errorGeneric: string;
+    /** Shown when the API rate limit is hit */
+    errorRateLimit: string;
+    /** Small print under the submit button; '' hides it */
+    footnote: string;
+}
+declare const defaultContactFormLabels: ContactFormLabels;
+interface FormProps {
+    /** Custom fields to include in the form (sent as `customFields`) */
+    customFields?: ContactFormCustomField[];
     /** Callback when form is successfully submitted */
-    onSuccess?: () => void;
+    onSuccess?: (response: CreateContactResponse) => void;
     /** Callback when form submission fails */
     onError?: (error: Error) => void;
     /** Custom CSS classes */
     className?: string;
-    /** Custom styles for form elements */
+    /** Custom styles for form elements (applied inline, so they win over the theme) */
     styles?: {
-        form?: React.CSSProperties;
-        field?: React.CSSProperties;
-        label?: React.CSSProperties;
-        input?: React.CSSProperties;
-        textarea?: React.CSSProperties;
-        button?: React.CSSProperties;
-        error?: React.CSSProperties;
-        success?: React.CSSProperties;
+        form?: CSSProperties;
+        field?: CSSProperties;
+        label?: CSSProperties;
+        input?: CSSProperties;
+        textarea?: CSSProperties;
+        button?: CSSProperties;
+        error?: CSSProperties;
+        success?: CSSProperties;
     };
-    /** Button text */
+    /** Button text (same as `labels.submit`) */
     submitText?: string;
-    /** Success message */
+    /** Success message (same as `labels.successMessage`) */
     successMessage?: string;
+    /** Colour scheme (default `light`). `auto` / `system` follow `prefers-color-scheme`. */
+    theme?: ContactFormTheme;
+    /** Accent colour (button, focus ring). Hex recommended. */
+    primaryColor?: string;
+    /** Text colour on the accent colour. Defaults to white or near-black, whichever is readable. */
+    primaryTextColor?: string;
+    /** `card` (default) draws a themed surface with padding; `plain` inherits the host's. */
+    variant?: 'card' | 'plain';
+    /** Skip the built-in stylesheet entirely (class names stay for your own CSS) */
+    unstyled?: boolean;
+    /**
+     * Built-in fields. Email and message are always required.
+     * Defaults: name `required`, subject `optional`, company `hidden`,
+     * topic `optional` when `topics` is set.
+     */
+    fields?: {
+        name?: ContactFieldMode;
+        company?: ContactFieldMode;
+        subject?: ContactFieldMode;
+        topic?: ContactFieldMode;
+    };
+    /** Options of the topic select; it is shown only when this is set */
+    topics?: Array<string | ContactFormTopic>;
+    /**
+     * Initial values, e.g. a topic from the URL (`?topic=sales`). A topic
+     * matches an option's value or label, case-insensitively.
+     */
+    defaultValues?: Partial<ContactFormValues>;
+    /** Override any user-facing string */
+    labels?: Partial<ContactFormLabels>;
+    /** Minimum message length (default `10`, what the Channlize API accepts) */
+    minMessageLength?: number;
+    /** Maximum message length (default `5000`) */
+    maxMessageLength?: number;
+    /** Add a hidden honeypot field; bots that fill it get a fake success (default `true`) */
+    honeypot?: boolean;
+    /** Show the built-in success state after sending (default `true`) */
+    showSuccessState?: boolean;
+    /** Prefix of the fields' ids (default `channlize`, e.g. `channlize-email`) */
+    idPrefix?: string;
 }
 
 /**
- * ContactForm component - Alias for Form component
- * Provides a form for collecting contact information and messages
+ * ContactForm component
+ *
+ * A themed, accessible contact form that posts to Channlize (and from there
+ * to your Slack). Inline validation, loading / success / error states, an
+ * optional topic select and company field, and a honeypot spam guard.
+ * Must be rendered inside `<ChannlizeProvider>`.
  */
-declare function ContactForm(props: FormProps): react_jsx_runtime.JSX.Element;
+declare function ContactForm(props: FormProps): react.JSX.Element;
+type ContactFormProps = FormProps;
 
+type ChatTheme = 'auto' | 'light' | 'dark';
+/** Every user-facing string in the chat, for copy changes or translation. */
+interface SupportChatLabels {
+    online: string;
+    connecting: string;
+    reconnecting: string;
+    offline: string;
+    connectionLost: string;
+    startFailed: string;
+    retry: string;
+    today: string;
+    yesterday: string;
+    you: string;
+    sending: string;
+    failed: string;
+    remove: string;
+    moreOptions: string;
+    minimize: string;
+    endChat: string;
+    endChatTitle: string;
+    endChatDescription: string;
+    endChatConfirm: string;
+    cancel: string;
+    attach: string;
+    removeAttachment: string;
+    messages: string;
+    conversationEnded: string;
+    charactersLeft: string;
+}
+declare const defaultSupportChatLabels: SupportChatLabels;
 interface SupportChatProps extends UseChatSessionOptions {
     /** Custom CSS classes */
     className?: string;
-    /** Custom styles for chat elements */
+    /** Custom styles for chat elements (applied inline, so they win over the theme) */
     styles?: {
         container?: React.CSSProperties;
         header?: React.CSSProperties;
@@ -117,20 +273,48 @@ interface SupportChatProps extends UseChatSessionOptions {
     };
     /** Placeholder text for message input */
     placeholder?: string;
-    /** Header title */
+    /** Header title: your team or brand name */
     title?: string;
-    /** Button text */
+    /** Accessible label (and tooltip) of the send button */
     sendButtonText?: string;
     /** Show timestamps on messages */
     showTimestamps?: boolean;
     /** Allow file attachments */
     allowAttachments?: boolean;
+    /** Logo or team avatar URL, shown in the header and on the welcome screen */
+    avatarUrl?: string;
+    /** Custom avatar element (overrides `avatarUrl`) */
+    avatar?: ReactNode;
+    /** Text after "Online" in the header, e.g. "Replies in a few minutes". Set to '' to hide. */
+    statusText?: string;
+    /** Welcome heading shown before the first message */
+    greeting?: string;
+    /** Welcome text shown under the greeting */
+    welcomeMessage?: string;
+    /** Quick replies shown on the welcome screen; clicking one sends it */
+    suggestions?: string[];
+    /** Colour scheme. `auto` follows `prefers-color-scheme`. */
+    theme?: ChatTheme;
+    /** Accent colour (header, customer bubbles, send button). Hex recommended. */
+    primaryColor?: string;
+    /** Text colour on the accent colour. Defaults to white or near-black, whichever is readable. */
+    primaryTextColor?: string;
+    /** Locale for dates and times (defaults to the browser locale) */
+    locale?: string;
+    /** Maximum message length */
+    maxLength?: number;
+    /** Show "End conversation" in the header menu */
+    allowEndChat?: boolean;
+    /** When set, a minimize button is shown in the header and Esc calls it */
+    onMinimize?: () => void;
+    /** Override any user-facing string */
+    labels?: Partial<SupportChatLabels>;
 }
 /**
  * SupportChat component - Real-time chat interface
  * Provides a complete chat UI with message history and real-time updates
  */
-declare function SupportChat({ autoConnect, metadata, onMessage, onError, sessionId, persistSession, storageKey, className, styles, placeholder, title, sendButtonText, showTimestamps, allowAttachments, }: SupportChatProps): react_jsx_runtime.JSX.Element;
+declare function SupportChat({ autoConnect, metadata, onMessage, onError, sessionId, persistSession, storageKey, className, styles, placeholder, title, sendButtonText, showTimestamps, allowAttachments, avatarUrl, avatar, statusText, greeting, welcomeMessage, suggestions, theme, primaryColor, primaryTextColor, locale, maxLength, allowEndChat, onMinimize, labels: labelOverrides, }: SupportChatProps): react.JSX.Element;
 
 interface ChannlizeChatProps {
     /** Channlize configuration */
@@ -148,29 +332,36 @@ interface ChannlizeChatProps {
     buttonIcon?: ReactNode;
     /** Button size in pixels */
     buttonSize?: number;
-    /** Button colors */
+    /** Launcher colours. Default to `primaryColor`. */
     buttonColors?: {
         background?: string;
         hover?: string;
         text?: string;
     };
     /** Chat window props (passed to SupportChat) */
-    chatProps?: Omit<SupportChatProps, 'autoConnect'>;
+    chatProps?: Omit<SupportChatProps, 'autoConnect' | 'onMinimize'>;
+    /** Accent colour for the launcher and chat window (hex recommended) */
+    primaryColor?: string;
+    /** Colour scheme. `auto` (default) follows `prefers-color-scheme`. */
+    theme?: ChatTheme;
     /** Whether to start closed or open */
     defaultOpen?: boolean;
-    /** Whether to show badge with unread count */
+    /**
+     * Show `unreadCount` on the launcher instead of the built-in count. Without
+     * it, the launcher counts agent replies received while the chat is closed.
+     */
     showBadge?: boolean;
-    /** Unread count (for badge) */
+    /** Unread count (for badge, used with `showBadge`) */
     unreadCount?: number;
     /** Custom z-index */
     zIndex?: number;
-    /** Whether to show on mobile */
+    /** Whether to show the launcher on small screens (< 640px) */
     showOnMobile?: boolean;
     /** Callback when chat opens */
     onOpen?: () => void;
     /** Callback when chat closes */
     onClose?: () => void;
-    /** Whether to enable animations */
+    /** Whether to enable animations (always reduced with `prefers-reduced-motion`) */
     enableAnimations?: boolean;
     /** Custom class for button container */
     buttonClassName?: string;
@@ -191,13 +382,16 @@ interface ChannlizeChatProps {
  *     projectId: "your-project-id",
  *   }}
  *   position="bottom-right"
+ *   primaryColor="#2563eb"
  *   chatProps={{
- *     title: "Customer Support",
- *     placeholder: "How can we help?"
+ *     title: "Acme Support",
+ *     greeting: "Hi there!",
+ *     welcomeMessage: "Ask us anything.",
  *   }}
  * />
  * ```
  */
-declare function ChannlizeChat({ config, position, offset, buttonElement, buttonIcon, buttonSize, buttonColors, chatProps, defaultOpen, showBadge, unreadCount, zIndex, showOnMobile, onOpen, onClose, enableAnimations, buttonClassName, chatClassName, }: ChannlizeChatProps): react_jsx_runtime.JSX.Element | null;
+declare function ChannlizeChat({ config, position, offset, buttonElement, buttonIcon, buttonSize, buttonColors, chatProps, primaryColor, theme, defaultOpen, showBadge, unreadCount, zIndex, showOnMobile, onOpen, onClose, enableAnimations, buttonClassName, chatClassName, }: ChannlizeChatProps): react.JSX.Element | null;
 
-export { ChannlizeChat, ChannlizeProvider, ContactForm, SupportChat, useChannlize, useChatSession, useContactForm };
+export { ChannlizeChat, ChannlizeProvider, ContactForm, SupportChat, defaultContactFormLabels, defaultSupportChatLabels, useChannlize, useChannlizeAnalytics, useChatSession, useContactForm };
+export type { ChannlizeChatProps, ChatTheme, ContactFieldMode, ContactFormCustomField, ContactFormLabels, ContactFormProps, ContactFormTheme, ContactFormTopic, ContactFormValues, SupportChatLabels, SupportChatProps, UseChatSessionOptions, UseChatSessionReturn };