@aiden-voice/widget 0.9.1 → 0.10.0

package/README.md

@@ -134,16 +134,19 @@ throws synchronously, at call time, if you pass both or neither.
 | `getSessionToken` | `sessionToken` mode only: a function returning a fresh session token (or a promise of one) from your backend, called when the current one has run out or is refused. Without it an expired session ends the chat until the page is reloaded. Ignored, with a warning, with `publishableKey` or when not a function. | none |
 | `language` | Language of the widget's own text, as a BCP 47 tag (`'fr'`, `'pt-BR'`, `'zh-CN'`). Without it the widget follows the page's `<html lang>`, then English. See [Language](#language). | the page's language, else `'en'` |
 | `messages` | Replaces individual built-in strings in the active language, e.g. `{ newConversation: 'Start over' }`. See [Language](#language). | none |
-| `contentLanguage` | The language of the conversation's content (replies, the visitor's messages, and your `greeting`, `title`, `name` and image text), as a BCP 47 tag, so screen readers read it with the right voice. Separate from `language`, which only sets the widget's own text; `language` counts only for a page with no `<html lang>`. See [Language](#language). | the page's `<html lang>`, else `language`, else unknown |
+| `contentLanguage` | The language of the conversation's content (replies, the visitor's messages, and your `greeting`, `notice`, `title`, `subtitle`, `name` and image text), as a BCP 47 tag, so screen readers read it with the right voice. Separate from `language`, which only sets the widget's own text; `language` counts only for a page with no `<html lang>`. See [Language](#language). | the page's `<html lang>`, else `language`, else unknown |
 | `position` | Launcher/panel corner: `'bottom-right'` or `'bottom-left'`. | `'bottom-right'` |
 | `color` | Primary accent color (any valid CSS color). Overrides the color configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'#4f46e5'` |
 | `inkColor` | Body text color (chat title and replies). Darkened automatically if needed to stay readable. Overrides the color configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'#111111'` |
 | `accentColor` | Link color in replies. Darkened automatically if needed to stay readable. Overrides the color configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'#0000ee'` |
 | `name` | Agent name for the panel header and the dialog's screen-reader label ("Chat with {name}"). Overrides the name configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'Aiden'` |
 | `title` | Full panel title, used for the header heading and the dialog's screen-reader label. Replaces the whole "Chat with {name}" string (e.g. `'Ask our concierge'`), with surrounding whitespace trimmed; the agent's messages are still labelled with its name. A blank value is ignored. | `'Chat with {name}'` |
+| `subtitle` | A second, smaller line under the panel title (e.g. your property's name). Not part of the dialog's screen-reader name, which stays the title. Blank values are ignored. | none |
 | `greeting` | Welcome text shown in the panel before the first message. | none |
-| `notice` | A notice, such as a disclaimer or terms of use, pinned at the top of the conversation. Unlike `greeting` it stays after the visitor writes, and comes back after "New conversation". Screen readers read it with the panel's title when the panel opens, until the visitor sends a first message. Supports `**bold**`, `_italic_`, `[links](https://...)` and `- ` lists; raw HTML shows as text. Blank values are ignored. See [Notice](#notice). | none |
+| `greetingStyle` | How `greeting` is shown: `'bubble'`, as the agent's first message, or `'centered'`, as plain text centered under `emptyStateImageUrl`, the two together in the middle of the empty panel. Either way it goes away once the visitor writes. | `'bubble'` |
+| `notice` | A notice, such as a disclaimer or terms of use, pinned at the top of the conversation (or under the message field, with `noticePlacement`). Unlike `greeting` it stays after the visitor writes, and comes back after "New conversation". Screen readers read it with the panel's title when the panel opens, until the visitor sends a first message. Supports `**bold**`, `_italic_`, `[links](https://...)` and `- ` lists; raw HTML shows as text. Blank values are ignored. See [Notice](#notice). | none |
 | `requireNoticeAgreement` | Ask the visitor to agree to `notice` before chatting: an "I agree" button (the `agreeToNotice` message) replaces the message field until they do. Remembered for the tab session, and asked again if the notice text changes. Ignored, with a console warning, without a `notice`. See [Notice](#notice). | `false` |
+| `noticePlacement` | Where `notice` is shown: `'top'`, above the conversation, or `'footer'`, as small print under the message field. See [Notice](#notice). | `'top'` |
 | `launcherIconUrl` | Image shown on the launcher bubble instead of the default chat icon. `https:` or `data:image/` only. Until it loads, and permanently if it fails, the default icon shows. Alias of `theme.launcher.iconUrl`. | none (default icon) |
 | `theme` | Colors, font and launcher icons. See [Theming](#theming). | defaults |
 | `layout` | Launcher position and size, and panel size. See [Layout](#layout). | defaults |
@@ -172,6 +175,7 @@ init({
 ```
 
 - **Where it shows:** above the conversation (below `emptyStateImageUrl`, above `greeting`), outlined rather than in a chat bubble, since it isn't something the agent said. It never leaves the transcript. The panel opens scrolled to its first line until the visitor writes.
+- **As a footer (`noticePlacement: 'footer'`):** small centered print under the message field (or under "I agree"), always in view. It takes at most a quarter of the panel; a longer notice scrolls inside it, and it is then reachable with Tab so keyboard users can scroll it. Keep a footer notice to a sentence or two.
 - **Screen readers:** the panel is described by the notice, so it's read with the title when the panel opens, until the visitor sends a first message (after that it would repeat on every open). It stays reachable as the first item of the conversation.
 - **It isn't sent to the agent** and isn't saved with the conversation.
 - **Agreement (`requireNoticeAgreement: true`):** until the visitor agrees, an "I agree" button takes the message field's place, and nothing can be sent. When the panel opens, focus is on the button, which the notice describes, so screen readers read the title, "I agree, button" and the notice; after agreeing, focus moves to the message field. The agreement lasts for the tab session (like the conversation), survives "New conversation", and is asked for again if you change the notice text. Change the label with `messages: { agreeToNotice: '...' }`; if you do, make the notice text match it.
@@ -210,6 +214,7 @@ window.whooAidenWidget.init({
 | `conversation` | Conversation | message list region name |
 | `you` | You | screen-reader speaker label on the visitor's messages |
 | `message` | Message | message box label |
+| `messagePlaceholder` | Type a message… | message box placeholder (a hint; `message` stays its label) |
 | `send` | Send | composer button |
 | `lookingItUp` | Looking that up for you… | slow-reply notice |
 | `goodResponse` | Good response | thumbs-up name |
@@ -277,13 +282,13 @@ init({
 | `border` | Dividers | `#e5e5e5` |
 | `headerHover` | Header control hover fill | `#f3f4f6` |
 | `assistantBubble` | Reply bubble background | `#f0f0f0` |
-| `muted` | Secondary text on replies | `#4b5563` |
+| `muted` | Secondary text on replies and on the panel (`subtitle`, the footer notice, the message box placeholder) | `#4b5563` |
 | `typingDots` | "Waiting for a reply" dots | `#6b7280` |
 | `errorBackground`, `errorText` | Error banner | `#fee2e2`, `#991b1b` |
 | `inputBorder` | Input and form borders | `#6b7280` |
 | `focusRing` | Dark tone of the keyboard focus outline | `#111827` |
 
-If you override a surface (`panel`, `assistantBubble`, ...), also override the roles drawn on it: the defaults are made for the default surfaces, and an override of one is never adjusted to fit another. The roles drawn on each surface are `panel`: `primaryText`, `text`, `focusRing`, `border`, `inputBorder`; `headerHover`: `primaryText`; `assistantBubble`: `ink`, `link`, `muted`, `typingDots`, `text`; `errorBackground`: `errorText`. (The example above leaves `inputBorder`, `typingDots` and the error colors at their defaults, which already read well on it.)
+If you override a surface (`panel`, `assistantBubble`, ...), also override the roles drawn on it: the defaults are made for the default surfaces, and an override of one is never adjusted to fit another. The roles drawn on each surface are `panel`: `primaryText`, `ink`, `link`, `muted`, `text`, `focusRing`, `border`, `inputBorder`; `headerHover`: `primaryText`; `assistantBubble`: `ink`, `link`, `muted`, `typingDots`, `text`; `errorBackground`: `errorText`. (The example above leaves `inputBorder`, `typingDots` and the error colors at their defaults, which already read well on it.)
 
 **Fonts.** `theme.fonts.family` takes a CSS font-family stack. The widget never loads fonts, so the font must already be available: a system font, or one your page loads (a Google Fonts `<link>`, or your own `@font-face`). A stack that is over 200 characters or contains `url(`, `@`, `;`, `{`, `}` or `\` is ignored with a warning.
 
@@ -301,6 +306,7 @@ init({
     offset: { x: 24, y: 96 }, // distance from the chosen corner (default 20, 20)
     launcherSize: 64,         // launcher diameter, 24-120 (default 56)
     panel: { width: 420, height: 640 }, // preferred panel size (default 360×480, minimum 280×320)
+    cornerRadius: 20,         // panel, message box, Send and "I agree", 0-32 (default 12 panel, 6 controls)
   },
 })
 ```
@@ -308,6 +314,7 @@ init({
 - The launcher can't be moved off-screen, and not so far from its corner that the chat panel loses its room: an offset that doesn't leave space for the launcher and a minimum-size panel is held back (a warning is logged if that applies when the page loads). A smaller offset than the 20px default is always honored.
 - A `launcherSize` outside 24-120 is clamped (the 24px floor is WCAG 2.2's minimum target size).
 - The panel is always placed above the launcher, whatever its size or offset, and is capped to the viewport. `panel` is a preferred size: it can never run past the screen, and on very small screens (a viewport 400px wide or less, or 420px tall or less) it fills the viewport as before. A `panel.width` or `panel.height` below 280×320 is raised to that minimum, with a warning.
+- `cornerRadius` rounds the panel, the message box and the Send and "I agree" buttons alike; about 20 or more turns the message box and Send into pills. It's clamped to 32, past which a short panel's corners eat into the header and message box. Without it, the panel keeps 12px corners and the controls 6px.
 - A value that isn't a non-negative number is ignored with a warning and the default is used.
 - On a phone, while the on-screen keyboard is open, the panel moves and shrinks to stay above it, so the message box is never hidden. While the panel fills the screen, the page behind it doesn't scroll (the widget sets `overflow: hidden` on `<html>` and restores your value on close).
 - Your page needs `<meta name="viewport" content="width=device-width, initial-scale=1">` for the phone layout to apply; without it phones render the page, widget included, at desktop width and shrink it.

package/dist/components/MessageList.d.ts

@@ -1,9 +1,16 @@
 import { FeedbackCategory, Message, MessageFeedbackState } from '../controller';
 import { WidgetMessages } from '../i18n/messages';
 export declare const NOTICE_ID = "whoo-widget-notice";
+export declare function Notice({ notice, placement, text, contentLanguage, languageTag, }: {
+    notice: string;
+    placement?: 'top' | 'footer';
+    text: WidgetMessages;
+    contentLanguage?: string;
+    languageTag?: string;
+}): import('preact').JSX.Element;
 type DraftChangeHandler = (messageId: string, correction: string, category: '' | FeedbackCategory) => void;
 type SubmitHandler = (messageId: string, correction: string, category: '' | FeedbackCategory) => void;
-export declare function MessageList({ messages, messageFeedback, announcement, emptyStateImage, notice, agentName, showFeedback, isStreaming, isSlowResponse, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancelFeedback, text, contentLanguage, languageTag, announcementIsContent, }: {
+export declare function MessageList({ messages, messageFeedback, announcement, emptyStateImage, centerEmptyState, centeredGreeting, notice, agentName, showFeedback, isStreaming, isSlowResponse, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancelFeedback, text, contentLanguage, languageTag, announcementIsContent, }: {
     messages: Message[];
     messageFeedback: Record<string, MessageFeedbackState>;
     announcement: string | null;
@@ -11,6 +18,8 @@ export declare function MessageList({ messages, messageFeedback, announcement, e
         url: string;
         alt: string;
     };
+    centerEmptyState?: boolean;
+    centeredGreeting?: string;
     notice?: string;
     agentName?: string;
     showFeedback?: boolean;

package/dist/config.d.ts

@@ -1,6 +1,6 @@
 import { WidgetMessages } from './i18n/messages';
 import { ThemeColorOverrides } from './themeRoles';
-import { LauncherIcon, LauncherOpenIcon, WidgetConfig } from './types';
+import { GreetingStyle, LauncherIcon, LauncherOpenIcon, NoticePlacement, WidgetConfig } from './types';
 export declare const DEFAULT_API_BASE_URL = "https://api.aidenvoice.com";
 export declare const DEFAULT_Z_INDEX = 2147483000;
 export declare function resolveZIndex(zIndex: unknown): number;
@@ -10,6 +10,8 @@ export declare function isBlankText(text: string): boolean;
 export declare function validateConfig(config: WidgetConfig): void;
 export declare function normalizeGetSessionToken(config: WidgetConfig): (() => string | Promise<string>) | undefined;
 export declare function normalizeMessages(value: unknown): Partial<WidgetMessages>;
+export declare function normalizeGreetingStyle(value: unknown): GreetingStyle;
+export declare function normalizeNoticePlacement(value: unknown): NoticePlacement;
 export declare function safeFontFamily(value: unknown): string | undefined;
 export interface NormalizedTheme {
     colors: ThemeColorOverrides;
@@ -33,11 +35,13 @@ export declare const LAUNCHER_SIZE_MIN = 24;
 export declare const LAUNCHER_SIZE_MAX = 120;
 export declare const PANEL_MIN_WIDTH = 280;
 export declare const PANEL_MIN_HEIGHT = 320;
+export declare const CORNER_RADIUS_MAX = 32;
 export interface NormalizedLayout {
     offsetX: number;
     offsetY: number;
     launcherSize: number;
     panelWidth: number;
     panelHeight: number;
+    cornerRadius?: number;
 }
 export declare function normalizeLayout(layout: unknown): NormalizedLayout;

package/dist/controller.d.ts

@@ -1,7 +1,7 @@
 import { NormalizedTheme } from './config';
 import { SupportedLanguage } from './i18n';
 import { WidgetMessages } from './i18n/messages';
-import { WidgetConfig } from './types';
+import { GreetingStyle, NoticePlacement, WidgetConfig } from './types';
 export declare const SLOW_RESPONSE_DELAY_MS = 8000;
 export declare const BRANDING_LOOKUP_WAIT_MS = 3000;
 export declare const TOKEN_RENEWAL_MARGIN_MS = 60000;
@@ -58,6 +58,9 @@ export declare class WidgetController {
     readonly emptyStateImageAlt: string;
     readonly notice: string;
     readonly requireNoticeAgreement: boolean;
+    readonly noticePlacement: NoticePlacement;
+    readonly subtitle: string;
+    readonly greetingStyle: GreetingStyle;
     readonly showFeedback: boolean;
     readonly text: WidgetMessages;
     readonly language: SupportedLanguage;

package/dist/i18n/messages.d.ts

@@ -6,6 +6,7 @@ export interface WidgetMessages {
     conversation: string;
     you: string;
     message: string;
+    messagePlaceholder: string;
     send: string;
     lookingItUp: string;
     goodResponse: string;

package/dist/types.d.ts

@@ -28,7 +28,7 @@ export interface WidgetTheme {
         headerHover?: string;
         /** Reply bubble background. */
         assistantBubble?: string;
-        /** Secondary text on the reply bubble. */
+        /** Secondary text on the reply bubble and the panel (subtitle, footer notice, placeholder). */
         muted?: string;
         /** Waiting-for-reply indicator. */
         typingDots?: string;
@@ -69,7 +69,15 @@ export interface WidgetLayout {
         width?: number;
         height?: number;
     };
+    /**
+     * Corner radius in px, 0-32, of the panel, the message field and the Send
+     * and "I agree" buttons. Half the field's height or more rounds the field
+     * and Send into pills. Default: 12 on the panel and 6 on the controls.
+     */
+    cornerRadius?: number;
 }
+export type GreetingStyle = 'bubble' | 'centered';
+export type NoticePlacement = 'top' | 'footer';
 export interface WidgetConfig {
     publishableKey?: string;
     sessionToken?: string;
@@ -121,7 +129,18 @@ export interface WidgetConfig {
     accentColor?: string;
     name?: string;
     title?: string;
+    /**
+     * A second, smaller line under the panel title (e.g. the property's name).
+     * Shown as given, trimmed; blank or non-string values are ignored.
+     */
+    subtitle?: string;
     greeting?: string;
+    /**
+     * How `greeting` is shown: 'bubble' (the default) as the agent's first
+     * message, or 'centered' as plain text centered under
+     * `emptyStateImageUrl`, the two centered together in the empty panel.
+     */
+    greetingStyle?: GreetingStyle;
     /**
      * A notice (e.g. a disclaimer or terms of use) pinned at the top of the
      * conversation. Unlike `greeting` it stays after the visitor sends a
@@ -130,6 +149,11 @@ export interface WidgetConfig {
      * values are ignored.
      */
     notice?: string;
+    /**
+     * Where `notice` is shown: 'top' (the default) pinned above the
+     * conversation, or 'footer' as small print under the message field.
+     */
+    noticePlacement?: NoticePlacement;
     /**
      * Require the visitor to agree to `notice` before chatting: the panel shows
      * an "I agree" button (the `agreeToNotice` message) in place of the message

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const WIDGET_VERSION = "0.9.1";
+export declare const WIDGET_VERSION = "0.10.0";