@sapia-ai/chatbot-v3 1.0.2 → 1.1.0

package/dist/ui/chat/ChatBubble/ChatBubble.d.ts

@@ -22,9 +22,14 @@ export type ChatBubbleLabels = {
     retry: string;
     optionsGroup: string;
     edit: string;
-    cancelEdit: string;
-    /** Eyebrow on every agent transcript turn, e.g. "Interviewer". */
-    speakerLabel: string;
+    /** Badge on the answer currently being re-edited, e.g. "Editing". */
+    editing: string;
+    /** Visually-hidden bubble prefix, e.g. "Interviewer" — sender is otherwise visual only. */
+    senderAgent: string;
+    /** Visually-hidden bubble prefix, e.g. "You". */
+    senderCandidate: string;
+    /** Appended inside markdown links that open a new tab. */
+    opensNewTab: string;
 };
 export type ChatBubbleProps = {
     item: ChatLogItem;
@@ -36,7 +41,6 @@ export type ChatBubbleProps = {
     onSelectOption?: (optionId: string) => void;
     onSubmitSlider?: (score: number) => void;
     onEdit?: (questionId: string) => void;
-    onCancelEdit?: () => void;
     onRetryVideo?: () => void;
     onResolveVideoUrl?: (questionId: string, extension: string) => Promise<string>;
     /** Attaches to the bubble's root <li> so the log can scroll it into view. */
@@ -44,4 +48,9 @@ export type ChatBubbleProps = {
     /** Rendered inside the question card body (e.g. the video recorder). */
     footer?: ReactNode;
 };
-export declare const ChatBubble: ({ item, labels, sliderLabels, dropdownLabels, mediaLabels, onRetry, onSelectOption, onSubmitSlider, onEdit, onCancelEdit, onRetryVideo, onResolveVideoUrl, rootRef, footer, }: ChatBubbleProps) => import("react").JSX.Element;
+/**
+ * Memoized: the transcript re-renders on every store write (roughly 60/s while an agent message
+ * streams in), and each render re-parses every settled paragraph's markdown from scratch. Default
+ * shallow comparison suffices — ChatLog is passed stable item and label references.
+ */
+export declare const ChatBubble: import('react').MemoExoticComponent<({ item, labels, sliderLabels, dropdownLabels, mediaLabels, onRetry, onSelectOption, onSubmitSlider, onEdit, onRetryVideo, onResolveVideoUrl, rootRef, footer, }: ChatBubbleProps) => import("react").JSX.Element>;

package/dist/ui/chat/ChatLog/ChatLog.d.ts

@@ -18,16 +18,18 @@ export type ChatLogProps = {
     onSelectOption?: (optionId: string) => void;
     onSubmitSlider?: (score: number) => void;
     onEdit?: (questionId: string) => void;
-    onCancelEdit?: () => void;
     onRetryVideo?: () => void;
     onResolveVideoUrl?: (questionId: string, extension: string) => Promise<string>;
     /** Node rendered inside the question card identified by cardFooterItemId (e.g. video recorder). */
     cardFooter?: ReactNode;
     /** Bubble id whose card receives cardFooter. */
     cardFooterItemId?: string;
+    /** Node pinned as the first transcript entry (e.g. the pre-interview summary card). */
+    header?: ReactNode;
 };
 /**
- * Scrollable interview transcript. aria-live announces new bubbles to screen
- * readers; the log auto-scrolls to the newest message.
+ * Scrollable interview transcript. The log auto-scrolls to the newest message; settled turns
+ * are announced once through a separate visually-hidden live region (the transcript itself is
+ * deliberately not one — see the announcer effect below).
  */
-export declare const ChatLog: ({ items, typing, typingLabel, typingReadingLabel, typingThinkingLabel, bubbleLabels, sliderLabels, dropdownLabels, mediaLabels, onRetry, onSelectOption, onSubmitSlider, onEdit, onCancelEdit, onRetryVideo, onResolveVideoUrl, cardFooter, cardFooterItemId, }: ChatLogProps) => import("react").JSX.Element;
+export declare const ChatLog: ({ items, typing, typingLabel, typingReadingLabel, typingThinkingLabel, bubbleLabels, sliderLabels, dropdownLabels, mediaLabels, onRetry, onSelectOption, onSubmitSlider, onEdit, onRetryVideo, onResolveVideoUrl, cardFooter, cardFooterItemId, header, }: ChatLogProps) => import("react").JSX.Element;

package/dist/ui/chat/EditBanner/EditBanner.d.ts

@@ -0,0 +1,16 @@
+export type EditBannerProps = {
+    /** e.g. "Editing your answer". */
+    label: string;
+    /** Card label of the question under edit, e.g. "Question 3 of 11". */
+    questionLabel?: string;
+    /** Cancel copy, server-supplied ("Press ESC or click here to cancel editing"). */
+    cancelLabel: string;
+    onCancel: () => void;
+};
+/**
+ * Docked strip naming the answer under edit and offering the single cancel control.
+ * Repeats the composer's own column classes so it lines up with the input box at any
+ * container width. role="status" so entering edit mode is announced; the Escape
+ * shortcut it advertises is bound in react/SapiaChatbot.
+ */
+export declare const EditBanner: ({ label, questionLabel, cancelLabel, onCancel }: EditBannerProps) => import("react").JSX.Element;

package/dist/ui/chat/SummaryCard/SummaryCard.d.ts

@@ -0,0 +1,46 @@
+/** Question-type family that selects a row icon. */
+export declare enum SummaryKind {
+    TEXT = "text",
+    VIDEO = "video",
+    VOICE = "voice",
+    CHOICE = "choice",
+    SELECT = "select",
+    RATING = "rating",
+    GENERIC = "generic"
+}
+/** One breakdown row: a count with its FE-owned label and (optional) description. */
+export type SummaryCategory = {
+    count: number;
+    label: string;
+    description?: string;
+    /** Drives the row icon; falls back to a generic mark when omitted. */
+    kind?: SummaryKind;
+};
+export type SummaryCardProps = {
+    /** Backend-authored heading, e.g. "Welcome to your interview — here's what to expect.". */
+    title: string;
+    /** Uppercase label for the total panel, e.g. "Total". */
+    totalLabel: string;
+    /** Total-questions meta, e.g. "3 questions". */
+    questionsLabel: string;
+    /** Estimated-time meta, e.g. "~9 min". */
+    minutesLabel: string;
+    /** Per-category breakdown rows (already mapped to FE labels). */
+    categories: SummaryCategory[];
+    /** BE-authored Continue label; rendered as a button only when onContinue is set (gate mode). */
+    continueLabel?: string;
+    /** Continue handler; its presence switches the card into blocking gate mode. */
+    onContinue?: () => void;
+    /** Play the pre-interview reveal (typing dots → title types in → card fades in). */
+    animate?: boolean;
+    /** Accessible label for the reveal's typing-dots phase. */
+    typingLabel?: string;
+    /** Phrase shown beside the dots during the reveal ("Thinking…"). */
+    thinkingLabel?: string;
+};
+/**
+ * Pre-interview summary. An elevated white card with the agent's welcome title,
+ * a centred TOTAL panel (question count + estimated time), and an accent-barred
+ * breakdown list — one icon row per question type.
+ */
+export declare const SummaryCard: ({ title, totalLabel, questionsLabel, minutesLabel, categories, continueLabel, onContinue, animate, typingLabel, thinkingLabel, }: SummaryCardProps) => import("react").JSX.Element;

package/dist/ui/chat/types.d.ts

@@ -1,4 +1,21 @@
-export type ChatItemSender = 'agent' | 'candidate';
+export declare enum ChatItemSender {
+    AGENT = "agent",
+    CANDIDATE = "candidate"
+}
+/** Visual treatment of a bubble: plain conversational, or the elevated question card. */
+export declare enum ChatBubbleVariant {
+    BUBBLE = "bubble",
+    CARD = "card"
+}
+/**
+ * How options render: a numbered button list (MCQ/BGQ), a searchable dropdown, or a
+ * single full-width CTA pill for one-off control prompts (consent / submit).
+ */
+export declare enum ChatOptionsKind {
+    LIST = "list",
+    DROPDOWN = "dropdown",
+    ACTION = "action"
+}
 /** A selectable answer option (MCQ/dropdown option or button-group button). */
 export type ChatOptionItem = {
     id: string;
@@ -36,18 +53,14 @@ export type ChatLogItem = {
     sender: ChatItemSender;
     /** Message paragraphs in display order. */
     paragraphs: string[];
-    /** Visual treatment: plain conversational bubble, or the elevated question card. */
-    variant?: 'bubble' | 'card';
-    /** Card-only eyebrow, e.g. "Question 2 of 4" or "Single choice question". */
+    variant?: ChatBubbleVariant;
+    /** Card-only label, e.g. "Question 2 of 4". */
     questionLabel?: string;
     /** Card-only dark badge, e.g. "Video". Present only on video question cards. */
     questionBadge?: string;
-    /** Sanitized rich-text HTML for a candidate answer; rendered instead of plain paragraphs. */
-    answerHtml?: string;
     /** Selectable options rendered inside the bubble (option-type questions). */
     options?: ChatOptionItem[];
-    /** How the options render: a button list (MCQ/BGQ) or a searchable dropdown. */
-    optionsKind?: 'list' | 'dropdown';
+    optionsKind?: ChatOptionsKind;
     /** The chosen option once answered (or while submitting). */
     selectedOptionId?: string;
     /** Options accept clicks (current unanswered question only). */

package/dist/ui/constants.d.ts

@@ -1,2 +1,3 @@
 /** Class scoping every style in dist/sapia-chatbot.css (see src/styles/index.css). */
 export declare const WIDGET_ROOT_CLASS = "sapia-chatbot";
+export declare const SLIM_SCROLLBAR = "sc:[scrollbar-width:thin] sc:[scrollbar-color:#8f8f96_transparent] sc:[&::-webkit-scrollbar]:w-1.5 sc:[&::-webkit-scrollbar-track]:bg-transparent sc:[&::-webkit-scrollbar-thumb]:rounded-full sc:[&::-webkit-scrollbar-thumb]:bg-field-border";

package/dist/ui/inputs/OptionList/OptionList.d.ts

@@ -7,6 +7,8 @@ export type OptionListProps = {
     enabled?: boolean;
     /** Submission in flight for the selected option. */
     pending?: boolean;
+    /** Caps the height and scrolls the options inside the bordered box (long dropdown lists). */
+    scrollable?: boolean;
     groupLabel: string;
     onSelect?: (optionId: string) => void;
 };
@@ -15,4 +17,4 @@ export type OptionListProps = {
  * Pure presentational: single select, real buttons, keyboard accessible.
  * Replaces legacy components/OptionList (AntD-free).
  */
-export declare const OptionList: ({ options, selectedOptionId, enabled, pending, groupLabel, onSelect, }: OptionListProps) => import("react").JSX.Element;
+export declare const OptionList: ({ options, selectedOptionId, enabled, pending, scrollable, groupLabel, onSelect, }: OptionListProps) => import("react").JSX.Element;

package/dist/ui/inputs/TextAnswerInput/TextAnswerInput.d.ts

@@ -2,13 +2,12 @@ export type RichToolbarLabels = {
     toolbar: string;
     bold: string;
     italic: string;
-    underline: string;
     bulletList: string;
     numberList: string;
 };
 export type TextAnswerInputProps = {
-    /** Receives plain text and, in rich mode, the sanitized HTML rendering. */
-    onSubmit: (text: string, html?: string) => void;
+    /** Receives the answer text — markdown in rich mode, plain text otherwise. */
+    onSubmit: (text: string) => void;
     disabled?: boolean;
     /** Character rules from the current question (legacy RuleName min/max/recommended). */
     minLength?: number;
@@ -28,5 +27,13 @@ export type TextAnswerInputProps = {
     toolbarLabels?: RichToolbarLabels;
     /** Called when the candidate pastes (AGC paste logging). */
     onPaste?: () => void;
+    /** SC 1.3.5 token for PII questions (e.g. "email", "name"); omitted for free-text answers. */
+    autoComplete?: string;
+    /** Plain text the composer opens on (re-editing a submitted answer). */
+    initialText?: string;
+    /** Markdown the composer opens on in rich mode; rendered to HTML for the editor. */
+    initialMarkdown?: string;
+    /** Moves focus to the editor on mount (used when an edit opens the composer). */
+    focusOnMount?: boolean;
 };
-export declare const TextAnswerInput: ({ onSubmit, disabled, minLength, maxLength, recommendedLength, placeholder, sendLabel, minLengthHint, okHint, footer, inputLabel, richText, toolbarLabels, onPaste, }: TextAnswerInputProps) => import("react").JSX.Element;
+export declare const TextAnswerInput: ({ onSubmit, disabled, minLength, maxLength, recommendedLength, placeholder, sendLabel, minLengthHint, okHint, footer, inputLabel, richText, toolbarLabels, onPaste, autoComplete, initialText, initialMarkdown, focusOnMount, }: TextAnswerInputProps) => import("react").JSX.Element;

package/dist/ui/inputs/VideoRecorder/VideoRecorder.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+import { RecorderPhase } from '../../../core/media/recorder';
 export type VideoRecorderLabels = {
     openCamera: string;
     startRecording: string;
@@ -14,10 +15,13 @@ export type VideoRecorderLabels = {
     off?: string;
     finishHint?: string;
     cameraOff?: string;
+    /** Discrete recording status; the per-second timer stays aria-live="off". */
+    recordingStarted?: string;
+    recordingStopped?: string;
+    secondsRemaining?: string;
 };
-export type VideoRecorderPhase = 'idle' | 'preview' | 'recording' | 'review' | 'error';
 export type VideoRecorderProps = {
-    phase: VideoRecorderPhase;
+    phase: RecorderPhase;
     elapsedSeconds: number;
     maxSeconds: number;
     /** True once a recording is captured and ready to submit. */

package/dist/ui/markdown.d.ts

@@ -0,0 +1,4 @@
+/** Editor HTML to the markdown stored on the answer. */
+export declare const htmlToMarkdown: (html: string) => string;
+/** Stored markdown back to HTML for the contentEditable editor; sanitized before it is injected. */
+export declare const markdownToHtml: (markdown: string) => string;

package/dist/ui/motion.d.ts

@@ -0,0 +1,2 @@
+/** True when the OS requests reduced motion. False where matchMedia is unavailable (SSR/jsdom). */
+export declare const prefersReducedMotion: () => boolean;

package/dist/ui/primitives/Button/Button.d.ts

@@ -1,6 +1,10 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+export declare enum ButtonVariant {
+    PRIMARY = "primary",
+    GHOST = "ghost"
+}
 export type ButtonProps = {
     children: ReactNode;
-    variant?: 'primary' | 'ghost';
+    variant?: ButtonVariant;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: ({ children, variant, type, className, ...rest }: ButtonProps) => import("react").JSX.Element;

package/dist/ui/primitives/Dialog/Dialog.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
+import { ButtonVariant } from '../Button/Button';
 export type DialogAction = {
     label: string;
     onClick: () => void;
-    variant?: 'primary' | 'ghost';
+    variant?: ButtonVariant;
 };
 export type DialogProps = {
     open: boolean;

package/dist/ui/shell/WidgetRoot/WidgetRoot.d.ts

@@ -4,9 +4,15 @@ export type WidgetRootProps = {
     /** CSS custom properties (--sc-*) produced by core/theme. */
     themeVariables?: Record<string, string>;
     dir?: 'ltr' | 'rtl';
+    /** Interview language (SC 3.1.2) — may differ from the host page's html lang. */
+    lang?: string;
+    /** Accessible name for the widget region, so host-page users can navigate to it. */
+    label?: string;
 };
 /**
  * Root element of the widget. Carries the scoping class for all packaged
  * styles plus the theme CSS variables, so theming never re-renders children.
+ * Exposed as a labelled region: the widget is a guest on a host page and must be
+ * reachable, without claiming a top-level landmark the host already owns.
  */
-export declare const WidgetRoot: ({ children, themeVariables, dir }: WidgetRootProps) => import("react").JSX.Element;
+export declare const WidgetRoot: ({ children, themeVariables, dir, lang, label, }: WidgetRootProps) => import("react").JSX.Element;