@fanvue/ui 3.15.0 → 3.17.0

package/dist/cjs/components/ChatInput/ChatInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.cjs","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from \"../Drawer/Drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { TickIcon } from \"../Icons/TickIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Short label shown on the collapsed trigger button (e.g. \"Sonnet 4.6\"). */\n  label: string;\n  /**\n   * Optional longer title shown on the option's row inside the open menu/sheet\n   * (e.g. \"Claude Sonnet 4.6\"). Falls back to {@link label} when omitted.\n   */\n  menuLabel?: string;\n  /** Optional secondary text shown below the label in the dropdown menu. */\n  description?: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /**\n   * How the built-in selector presents its options:\n   * - `\"menu\"` (default) — a dropdown anchored to the trigger, for pointer/desktop.\n   * - `\"sheet\"` — a bottom sheet, for mobile/touch viewports.\n   *\n   * The viewport decision belongs to the consumer (it owns the breakpoint\n   * source of truth), so pass e.g. `selectVariant={isDesktop ? \"menu\" : \"sheet\"}`.\n   * @default \"menu\"\n   */\n  selectVariant?: \"menu\" | \"sheet\";\n  /**\n   * Title shown at the top of the `\"sheet\"` variant of the built-in selector\n   * (e.g. \"Switch AI Model\"). @default \"Select an option\"\n   */\n  selectMenuTitle?: string;\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectVariant = \"menu\",\n      selectMenuTitle,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n          variant={selectVariant}\n          menuTitle={selectMenuTitle}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"max-sm:-ml-2 sm:border sm:border-border-primary\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:text-icons-primary disabled:opacity-100\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Presentation: anchored dropdown (`\"menu\"`) or bottom sheet (`\"sheet\"`). */\n  variant: \"menu\" | \"sheet\";\n  /** Title for the bottom-sheet header. */\n  menuTitle?: string;\n}\n\ninterface SelectTriggerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the menu/sheet is open (drives chevron rotation + active background). */\n  open: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Label shown when no option is selected. */\n  fallbackLabel?: string;\n}\n\n/**\n * The collapsed pill trigger (icon + short label + chevron). Shared by the\n * desktop menu and mobile sheet; spreads Radix-injected trigger props via\n * `asChild`.\n */\nconst SelectTriggerButton = React.forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(\n  ({ open, selectedOption, fallbackLabel, className, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Select model\"\n      className={cn(\n        \"typography-description-12px-semibold text-content-primary\",\n        \"flex items-center gap-1 rounded-md px-2 py-2\",\n        \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"motion-safe:transition-colors\",\n        open && \"bg-neutral-alphas-50\",\n        className,\n      )}\n      {...props}\n    >\n      {selectedOption?.icon && (\n        <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n      )}\n      {selectedOption?.label ?? fallbackLabel ?? \"Select\"}\n      <ChevronDownIcon\n        className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n      />\n    </button>\n  ),\n);\nSelectTriggerButton.displayName = \"SelectTriggerButton\";\n\n/** The green tick shown on the selected option (matches DropDown V2). */\nfunction SelectedTick() {\n  return <TickIcon size={16} className=\"text-success-negative-content\" aria-hidden=\"true\" />;\n}\n\n/**\n * Inline model/option selector for the ChatInput toolbar. Renders the\n * design-system dropdown (DropDown V2) on desktop and a bottom sheet on mobile.\n */\nfunction InlineSelect({\n  options,\n  value,\n  onChange,\n  disabled,\n  selectedOption,\n  variant,\n  menuTitle,\n}: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const fallbackLabel = options[0]?.label;\n\n  // Never allow the menu/sheet to open while disabled, regardless of how the\n  // open request originates (click, keyboard, programmatic).\n  const handleOpenChange = (next: boolean) => {\n    if (disabled && next) return;\n    setOpen(next);\n  };\n\n  const trigger = (\n    <SelectTriggerButton\n      open={open}\n      selectedOption={selectedOption}\n      fallbackLabel={fallbackLabel}\n      disabled={disabled}\n    />\n  );\n\n  if (variant === \"sheet\") {\n    return (\n      <Drawer open={open} onOpenChange={handleOpenChange}>\n        <DrawerTrigger asChild>{trigger}</DrawerTrigger>\n        <DrawerContent position=\"bottom\" variant=\"sheet\">\n          <DrawerHeader>\n            <DrawerTitle className=\"typography-header-heading-xs\">\n              {menuTitle ?? \"Select an option\"}\n            </DrawerTitle>\n          </DrawerHeader>\n          {/* Mirrors DropdownMenuItem's two-line layout, which can't be reused\n              here because it requires a DropdownMenu (Radix Menu) context. */}\n          <div className=\"flex flex-col gap-1 overflow-y-auto px-4 pb-4\" role=\"listbox\">\n            {options.map((option) => {\n              const isSelected = option.value === value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  onClick={() => {\n                    onChange?.(option.value);\n                    setOpen(false);\n                  }}\n                  className={cn(\n                    \"flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none\",\n                    \"focus-visible:shadow-focus-ring\",\n                    isSelected\n                      ? \"typography-body-default-16px-semibold bg-buttons-primary-default text-content-primary-inverted\"\n                      : \"typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50\",\n                  )}\n                >\n                  {option.icon && (\n                    <span className=\"flex shrink-0 items-center pt-1 [&>svg]:size-4\">\n                      {option.icon}\n                    </span>\n                  )}\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span className=\"truncate\">{option.menuLabel ?? option.label}</span>\n                    {option.description && (\n                      <span\n                        className={cn(\n                          \"typography-body-small-14px-regular truncate\",\n                          isSelected ? \"text-content-primary-inverted\" : \"text-content-secondary\",\n                        )}\n                      >\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                  {isSelected && (\n                    <span className=\"flex shrink-0 items-center pt-1\">\n                      <SelectedTick />\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={handleOpenChange}>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent side=\"top\" align=\"end\" className=\"min-w-[244px]\">\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          return (\n            <DropdownMenuItem\n              key={option.value}\n              size=\"40\"\n              selected={isSelected}\n              description={option.description}\n              leadingIcon={\n                option.icon ? (\n                  <span className=\"flex size-4 items-center [&>svg]:size-4\">{option.icon}</span>\n                ) : undefined\n              }\n              trailingIcon={isSelected ? <SelectedTick /> : undefined}\n              onSelect={() => onChange?.(option.value)}\n            >\n              {option.menuLabel ?? option.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["jsxs","jsx","IconButton","CloseIcon","React","minHeight","maxHeight","cn","AddIcon","ArrowUpIcon","ChevronDownIcon","TickIcon","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,MAAM,cAAc;AACpB,MAAM,cAAc;AAEpB,SAAS,gBAAgB,MAAsB;AAC7C,SAAO,cAAc,OAAO,cAAc;AAC5C;AAQA,SAAS,qCAAqC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA8C;AAC5C,SAAO,YAAY,IAAI,CAAC,SACtBA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAC,+BAAC,SAAI,KAAK,KAAK,KAAK,KAAI,IAAG,WAAU,0BAAyB;AAAA,QAC9DA,2BAAAA;AAAAA,UAACC,WAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAY,KAAK,YAAY,UAAU,KAAK,SAAS,KAAK;AAAA,YAC1D,MAAMD,2BAAAA,IAACE,UAAAA,WAAA,EAAU,WAAU,UAAA,CAAU;AAAA,YACrC,UAAU,YAAY,CAAC;AAAA,YACvB,SAAS,MAAM,qBAAqB,KAAK,EAAE;AAAA,YAC3C,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,IAZK,KAAK;AAAA,EAAA,CAcb;AACH;AAqDO,MAAM,YAAYC,iBAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAcA,iBAAM,OAA4B,IAAI;AAC1D,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,EAAE;AAC3E,UAAM,gBAAgB,UAAU,SAAY,QAAQ;AACpD,UAAM,eAAe,UAAU;AAE/B,UAAM,YAAYA,iBAAM;AAAA,MACtB,CAAC,SAAqC;AACnC,oBAAmE,UAAU;AAC9E,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,KAAK;AACb,cAA2D,UAAU;AAAA,QACxE;AAAA,MACF;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGN,UAAM,eAAeA,iBAAM,YAAY,MAAM;AAC3C,YAAM,WAAW,YAAY;AAC7B,UAAI,CAAC,SAAU;AAEf,YAAMC,aAAY,gBAAgB,OAAO;AACzC,YAAMC,aAAY,gBAAgB,OAAO;AAEzC,eAAS,MAAM,SAAS,GAAGD,UAAS;AACpC,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,SAAS,cAAcA,UAAS,GAAGC,UAAS;AAC9E,eAAS,MAAM,SAAS,GAAG,OAAO;AAAA,IACpC,GAAG,CAAC,SAAS,OAAO,CAAC;AAErBF,qBAAM,UAAU,MAAM;AACpB,mBAAA;AAAA,IACF,GAAG,CAAC,YAAY,CAAC;AAEjB,UAAM,eAAe,CAAC,MAA8C;AAClE,UAAI,CAAC,cAAc;AACjB,yBAAiB,EAAE,OAAO,KAAK;AAAA,MACjC;AACA,iBAAW,CAAC;AAAA,IACd;AAEA,UAAM,YAAY,CAAC,CAAC,OAAO,aAAa,EAAE,KAAA,KAAU,CAAC,YAAY,CAAC;AAElE,UAAM,eAAe,MAAM;AACzB,YAAM,OAAO,OAAO,aAAa,EAAE,KAAA;AACnC,UAAI,CAAC,QAAQ,CAAC,UAAW;AACzB,iBAAW,IAAI;AACf,UAAI,CAAC,cAAc;AACjB,yBAAiB,EAAE;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,gBAAgB,CAAC,MAAgD;AACrE,UAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACpC,UAAE,eAAA;AACF,qBAAA;AAAA,MACF;AACA,kBAAY,CAAC;AAAA,IACf;AAEA,UAAM,YAAY,gBAAgB,OAAO;AACzC,UAAM,YAAY,gBAAgB,OAAO;AAEzC,UAAM,8BAA8B,uBAAuB;AAC3D,UAAM,wBAAwB,8BAA8B,qBAAqB;AACjF,UAAM,yBACJ,CAAC,+BAA+B,CAAC,CAAC,aAAa,SAC7CH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa,eAAe,CAAA;AAAA,QAC5B;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,IAEA;AACN,UAAM,0BAA0B,yBAAyB;AACzD,UAAM,qBAAqB,2BAA2B;AAEtD,UAAM,iBACJ,eAAe,KAAK,CAAC,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,CAAC;AAC1E,UAAM,uBACJ,iBACC,iBAAiB,cAAc,SAAS,IACvCA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,IAAA,IAEX;AAEN,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWO,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAAP,2BAAAA,KAAC,OAAA,EAAI,WAAU,iBACZ,UAAA;AAAA,YAAA,qBACCC,2BAAAA,IAAC,OAAA,EAAI,WAAU,oEACZ,mCACH,IACE;AAAA,YACJA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAG;AAAA,gBACJ,KAAK;AAAA,gBACL,OAAO,eAAe,QAAQ;AAAA,gBAC9B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,cAAY,aAAa;AAAA,gBACzB,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,MAAM;AAAA,gBACN,WAAWM,GAAAA;AAAAA,kBACT;AAAA,kBACA,qBAAqB,SAAS;AAAA,kBAC9B;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,OAAO;AAAA,kBACL,WAAW,GAAG,SAAS;AAAA,kBACvB,WAAW,GAAG,SAAS;AAAA,kBACvB,GAAG;AAAA,gBAAA;AAAA,cACL;AAAA,YAAA;AAAA,UACF,GACF;AAAA,UAEAP,2BAAAA,KAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,YAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,kBACCA,2BAAAA;AAAAA,cAACC,WAAAA;AAAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,qCAAOM,QAAAA,SAAA,EAAQ;AAAA,gBACf,cAAY;AAAA,gBACZ,SAAS;AAAA,gBACT;AAAA,gBACA,WAAU;AAAA,cAAA;AAAA,YAAA,GAGhB;AAAA,YAEAR,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA;AAAA,cACDC,2BAAAA;AAAAA,gBAACC,WAAAA;AAAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,MAAM,cAAcD,+BAACQ,YAAAA,aAAA,CAAA,CAAY;AAAA,kBACjC,cAAY;AAAA,kBACZ,SAAS;AAAA,kBACT,UAAU,CAAC;AAAA,kBACX,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,UAAU,cAAc;AA2BxB,MAAM,sBAAsBL,iBAAM;AAAA,EAChC,CAAC,EAAE,MAAM,gBAAgB,eAAe,WAAW,GAAG,MAAA,GAAS,QAC7DJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWO,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,gBAAgB,QACfN,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA6C,yBAAe,MAAK;AAAA,QAElF,gBAAgB,SAAS,iBAAiB;AAAA,QAC3CA,2BAAAA;AAAAA,UAACS,gBAAAA;AAAAA,UAAA;AAAA,YACC,WAAWH,GAAAA,GAAG,2CAA2C,QAAQ,YAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/E;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,oBAAoB,cAAc;AAGlC,SAAS,eAAe;AACtB,wCAAQI,mBAAA,EAAS,MAAM,IAAI,WAAU,iCAAgC,eAAY,QAAO;AAC1F;AAMA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAIP,iBAAM,SAAS,KAAK;AAC5C,QAAM,gBAAgB,QAAQ,CAAC,GAAG;AAIlC,QAAM,mBAAmB,CAAC,SAAkB;AAC1C,QAAI,YAAY,KAAM;AACtB,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,UACJH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAIJ,MAAI,YAAY,SAAS;AACvB,WACED,2BAAAA,KAACY,OAAAA,QAAA,EAAO,MAAY,cAAc,kBAChC,UAAA;AAAA,MAAAX,2BAAAA,IAACY,OAAAA,eAAA,EAAc,SAAO,MAAE,UAAA,SAAQ;AAAA,MAChCb,2BAAAA,KAACc,OAAAA,eAAA,EAAc,UAAS,UAAS,SAAQ,SACvC,UAAA;AAAA,QAAAb,2BAAAA,IAACc,OAAAA,gBACC,UAAAd,2BAAAA,IAACe,OAAAA,aAAA,EAAY,WAAU,gCACpB,UAAA,aAAa,oBAChB,EAAA,CACF;AAAA,QAGAf,2BAAAA,IAAC,SAAI,WAAU,iDAAgD,MAAK,WACjE,UAAA,QAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,aAAa,OAAO,UAAU;AACpC,iBACED,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,SAAS,MAAM;AACb,2BAAW,OAAO,KAAK;AACvB,wBAAQ,KAAK;AAAA,cACf;AAAA,cACA,WAAWO,GAAAA;AAAAA,gBACT;AAAA,gBACA;AAAA,gBACA,aACI,mGACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAA,OAAO,QACNN,2BAAAA,IAAC,QAAA,EAAK,WAAU,kDACb,iBAAO,MACV;AAAA,gBAEFD,2BAAAA,KAAC,QAAA,EAAK,WAAU,wCACd,UAAA;AAAA,kBAAAC,+BAAC,UAAK,WAAU,YAAY,UAAA,OAAO,aAAa,OAAO,OAAM;AAAA,kBAC5D,OAAO,eACNA,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAWM,GAAAA;AAAAA,wBACT;AAAA,wBACA,aAAa,kCAAkC;AAAA,sBAAA;AAAA,sBAGhD,UAAA,OAAO;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACV,GAEJ;AAAA,gBACC,cACCN,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCACd,UAAAA,2BAAAA,IAAC,gBAAa,EAAA,CAChB;AAAA,cAAA;AAAA,YAAA;AAAA,YArCG,OAAO;AAAA,UAAA;AAAA,QAyClB,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAACiB,aAAAA,cAAA,EAAa,MAAY,cAAc,kBACtC,UAAA;AAAA,IAAAhB,2BAAAA,IAACiB,aAAAA,qBAAA,EAAoB,SAAO,MAAE,UAAA,SAAQ;AAAA,IACtCjB,2BAAAA,IAACkB,aAAAA,qBAAA,EAAoB,MAAK,OAAM,OAAM,OAAM,WAAU,iBACnD,UAAA,QAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,aAAa,OAAO,UAAU;AACpC,aACElB,2BAAAA;AAAAA,QAACmB,aAAAA;AAAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,aAAa,OAAO;AAAA,UACpB,aACE,OAAO,OACLnB,2BAAAA,IAAC,UAAK,WAAU,2CAA2C,UAAA,OAAO,KAAA,CAAK,IACrE;AAAA,UAEN,cAAc,aAAaA,2BAAAA,IAAC,cAAA,CAAA,CAAa,IAAK;AAAA,UAC9C,UAAU,MAAM,WAAW,OAAO,KAAK;AAAA,UAEtC,UAAA,OAAO,aAAa,OAAO;AAAA,QAAA;AAAA,QAZvB,OAAO;AAAA,MAAA;AAAA,IAelB,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"ChatInput.cjs","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from \"../Drawer/Drawer\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu/DropdownMenu\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { TickIcon } from \"../Icons/TickIcon\";\n\n/** A single image thumbnail in the built-in attachment strip. */\nexport interface ChatInputAttachmentItem {\n  /** Stable id passed to {@link ChatInputProps.onAttachmentRemove} and used as React `key`. */\n  id: string;\n  /** Image URL for the thumbnail. */\n  src: string;\n  /** Optional value passed to the remove control `aria-label`. */\n  ariaLabel?: string;\n}\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Short label shown on the collapsed trigger button (e.g. \"Sonnet 4.6\"). */\n  label: string;\n  /**\n   * Optional longer title shown on the option's row inside the open menu/sheet\n   * (e.g. \"Claude Sonnet 4.6\"). Falls back to {@link label} when omitted.\n   */\n  menuLabel?: string;\n  /** Optional secondary text shown below the label in the dropdown menu. */\n  description?: string;\n  /** Optional icon rendered to the left of the label. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner\n * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and\n * `onSubmit` (replaced by the chat message submit callback).\n */\nexport interface ChatInputProps\n  extends Omit<\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    \"className\" | \"rows\" | \"onSubmit\"\n  > {\n  /** Minimum number of visible rows. @default 1 */\n  minRows?: number;\n  /** Maximum number of visible rows before scrolling. @default 6 */\n  maxRows?: number;\n  /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */\n  loading?: boolean;\n  /**\n   * Callback fired when the user submits (clicks the send button or presses Enter without Shift).\n   * Receives the current trimmed text value.\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * When `true`, renders an \"attach file\" button in the bottom-left toolbar.\n   * @default false\n   */\n  showFileButton?: boolean;\n  /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */\n  onFileClick?: () => void;\n  /** Accessible label for the attach-file button. @default \"Attach file\" */\n  fileButtonAriaLabel?: string;\n  /** Accessible label for the submit button. @default \"Send message\" */\n  submitAriaLabel?: string;\n  /** Icon element for the submit button. @default `<ArrowUpIcon />` */\n  submitIcon?: React.ReactNode;\n  /**\n   * Optional content rendered in the bottom-right toolbar, to the left of the submit button.\n   * When provided, takes precedence over the built-in `selectOptions` dropdown.\n   */\n  toolbarRight?: React.ReactNode;\n  /**\n   * Options for the built-in inline dropdown selector (e.g. model picker).\n   * Ignored when `toolbarRight` is provided.\n   */\n  selectOptions?: ChatInputSelectOption[];\n  /**\n   * How the built-in selector presents its options:\n   * - `\"menu\"` (default) — a dropdown anchored to the trigger, for pointer/desktop.\n   * - `\"sheet\"` — a bottom sheet, for mobile/touch viewports.\n   *\n   * The viewport decision belongs to the consumer (it owns the breakpoint\n   * source of truth), so pass e.g. `selectVariant={isDesktop ? \"menu\" : \"sheet\"}`.\n   * @default \"menu\"\n   */\n  selectVariant?: \"menu\" | \"sheet\";\n  /**\n   * Title shown at the top of the `\"sheet\"` variant of the built-in selector\n   * (e.g. \"Switch AI Model\"). @default \"Select an option\"\n   */\n  selectMenuTitle?: string;\n  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** When `true`, disables only the built-in dropdown selector. @default false */\n  selectDisabled?: boolean;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\n  /**\n   * Image attachments shown in the built-in thumbnail strip. Ignored when {@link ChatInputProps.attachmentPreviews}\n   * is provided (including `null`).\n   */\n  attachments?: ChatInputAttachmentItem[];\n  /**\n   * Called when the user removes a built-in thumbnail. The remove button is disabled when this is\n   * omitted or the input is {@link ChatInputProps.disabled}.\n   */\n  onAttachmentRemove?: (id: string) => void;\n  /**\n   * Replaces the built-in attachment strip entirely. When set to any value other than `undefined`\n   * (including `null` or `[]`), {@link ChatInputProps.attachments} is ignored.\n   */\n  attachmentPreviews?: React.ReactNode;\n  /** Additional className applied to the outermost container. */\n  className?: string;\n}\n\nconst LINE_HEIGHT = 18;\nconst TEXTAREA_PY = 12;\n\nfunction calculateHeight(rows: number): number {\n  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;\n}\n\ninterface ChatInputDefaultAttachmentThumbnailsProps {\n  attachments: ChatInputAttachmentItem[];\n  onAttachmentRemove?: (id: string) => void;\n  disabled?: boolean;\n}\n\nfunction ChatInputDefaultAttachmentThumbnails({\n  attachments,\n  onAttachmentRemove,\n  disabled = false,\n}: ChatInputDefaultAttachmentThumbnailsProps) {\n  return attachments.map((item) => (\n    <div\n      key={item.id}\n      className=\"relative size-16 shrink-0 overflow-hidden rounded-sm border border-neutral-200 bg-background-secondary\"\n    >\n      <img src={item.src} alt=\"\" className=\"size-full object-cover\" />\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        aria-label={item.ariaLabel ? `Remove ${item.ariaLabel}` : \"Remove attachment\"}\n        icon={<CloseIcon className=\"!size-3\" />}\n        disabled={disabled || !onAttachmentRemove}\n        onClick={() => onAttachmentRemove?.(item.id)}\n        className=\"absolute top-0.5 right-0.5 size-5 bg-neutral-900/40 p-1 text-white hover:bg-neutral-900/55\"\n      />\n    </div>\n  ));\n}\n\n/**\n * A chat-style multi-line input with an integrated toolbar containing an\n * optional file-attach button, optional right-side controls (e.g. a model\n * selector), and a submit button — all inside a single bordered container.\n *\n * Designed to behave like modern AI chat inputs: auto-grows with content,\n * submits on Enter (Shift+Enter for newlines), and keeps controls inline.\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Type a message...\"\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   placeholder=\"Ask the agent...\"\n *   showFileButton\n *   onFileClick={() => openFilePicker()}\n *   selectOptions={[\n *     { value: \"fanvue-ai\", label: \"Fanvue AI\", icon: <AIIcon className=\"size-4\" /> },\n *     { value: \"example\", label: \"Example\", icon: <BulbIcon className=\"size-4\" /> },\n *   ]}\n *   selectValue=\"fanvue-ai\"\n *   onSelectChange={(v) => setModel(v)}\n *   onSubmit={(text) => send(text)}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachments={files}\n *   onAttachmentRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}\n * />\n * ```\n *\n * @example\n * ```tsx\n * <ChatInput\n *   showFileButton\n *   onFileClick={() => openPicker()}\n *   attachmentPreviews={<CustomVideoStrip items={items} />}\n * />\n * ```\n */\nexport const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(\n  (\n    {\n      className,\n      minRows = 1,\n      maxRows = 6,\n      disabled = false,\n      loading = false,\n      value,\n      defaultValue,\n      placeholder,\n      maxLength,\n      \"aria-label\": ariaLabel,\n      onChange,\n      onKeyDown,\n      onSubmit,\n      showFileButton = false,\n      onFileClick,\n      fileButtonAriaLabel = \"Attach file\",\n      submitAriaLabel = \"Send message\",\n      submitIcon,\n      toolbarRight,\n      selectOptions,\n      selectVariant = \"menu\",\n      selectMenuTitle,\n      selectValue,\n      selectDisabled = false,\n      onSelectChange,\n      attachments,\n      onAttachmentRemove,\n      attachmentPreviews,\n      style,\n      ...textareaProps\n    },\n    ref,\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n    const resolvedValue = value !== undefined ? value : internalValue;\n    const isControlled = value !== undefined;\n\n    const mergedRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (!textarea) return;\n\n      const minHeight = calculateHeight(minRows);\n      const maxHeight = calculateHeight(maxRows);\n\n      textarea.style.height = `${minHeight}px`;\n      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);\n      textarea.style.height = `${desired}px`;\n    }, [minRows, maxRows]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [adjustHeight]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value);\n      }\n      onChange?.(e);\n    };\n\n    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;\n\n    const handleSubmit = () => {\n      const text = String(resolvedValue).trim();\n      if (!text || !canSubmit) return;\n      onSubmit?.(text);\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSubmit();\n      }\n      onKeyDown?.(e);\n    };\n\n    const minHeight = calculateHeight(minRows);\n    const maxHeight = calculateHeight(maxRows);\n\n    const useCustomAttachmentPreviews = attachmentPreviews !== undefined;\n    const customAttachmentStrip = useCustomAttachmentPreviews ? attachmentPreviews : null;\n    const defaultAttachmentStrip =\n      !useCustomAttachmentPreviews && !!attachments?.length ? (\n        <ChatInputDefaultAttachmentThumbnails\n          attachments={attachments ?? []}\n          disabled={disabled}\n          onAttachmentRemove={onAttachmentRemove}\n        />\n      ) : null;\n    const resolvedAttachmentStrip = customAttachmentStrip ?? defaultAttachmentStrip;\n    const hasAttachmentStrip = resolvedAttachmentStrip != null;\n\n    const selectedOption =\n      selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];\n    const resolvedToolbarRight =\n      toolbarRight ??\n      (selectOptions && selectOptions.length > 0 ? (\n        <InlineSelect\n          options={selectOptions}\n          value={selectValue}\n          onChange={onSelectChange}\n          disabled={disabled || selectDisabled}\n          selectedOption={selectedOption}\n          variant={selectVariant}\n          menuTitle={selectMenuTitle}\n        />\n      ) : null);\n\n    return (\n      <div\n        className={cn(\n          \"relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary\",\n          \"has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col\">\n          {hasAttachmentStrip ? (\n            <div className=\"flex gap-2 overflow-x-auto px-4 pt-4 pb-2 [scrollbar-width:thin]\">\n              {resolvedAttachmentStrip}\n            </div>\n          ) : null}\n          <textarea\n            {...textareaProps}\n            ref={mergedRef}\n            value={isControlled ? value : internalValue}\n            placeholder={placeholder}\n            maxLength={maxLength}\n            disabled={disabled}\n            aria-label={ariaLabel ?? placeholder}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            rows={minRows}\n            className={cn(\n              \"w-full resize-none bg-transparent px-4\",\n              hasAttachmentStrip ? \"pt-0\" : \"pt-4\",\n              \"typography-body-small-14px-regular text-content-primary\",\n              \"placeholder:text-content-tertiary\",\n              \"focus:outline-none disabled:cursor-not-allowed\",\n              \"overflow-y-auto\",\n            )}\n            style={{\n              minHeight: `${minHeight}px`,\n              maxHeight: `${maxHeight}px`,\n              ...style,\n            }}\n          />\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2 px-4 pb-4\">\n          <div className=\"flex items-center gap-1\">\n            {showFileButton && (\n              <IconButton\n                variant=\"tertiary\"\n                size=\"32\"\n                icon={<AddIcon />}\n                aria-label={fileButtonAriaLabel}\n                onClick={onFileClick}\n                disabled={disabled}\n                className=\"max-sm:-ml-2 sm:border sm:border-border-primary\"\n              />\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-1\">\n            {resolvedToolbarRight}\n            <IconButton\n              variant=\"primary\"\n              size=\"32\"\n              icon={submitIcon ?? <ArrowUpIcon />}\n              aria-label={submitAriaLabel}\n              onClick={handleSubmit}\n              disabled={!canSubmit}\n              className=\"disabled:bg-surface-secondary disabled:text-icons-primary disabled:opacity-100\"\n            />\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nChatInput.displayName = \"ChatInput\";\n\ninterface InlineSelectProps {\n  options: ChatInputSelectOption[];\n  value?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Presentation: anchored dropdown (`\"menu\"`) or bottom sheet (`\"sheet\"`). */\n  variant: \"menu\" | \"sheet\";\n  /** Title for the bottom-sheet header. */\n  menuTitle?: string;\n}\n\ninterface SelectTriggerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Whether the menu/sheet is open (drives chevron rotation + active background). */\n  open: boolean;\n  selectedOption?: ChatInputSelectOption;\n  /** Label shown when no option is selected. */\n  fallbackLabel?: string;\n}\n\n/**\n * The collapsed pill trigger (icon + short label + chevron). Shared by the\n * desktop menu and mobile sheet; spreads Radix-injected trigger props via\n * `asChild`.\n */\nconst SelectTriggerButton = React.forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(\n  ({ open, selectedOption, fallbackLabel, className, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label=\"Select model\"\n      className={cn(\n        \"typography-description-12px-semibold text-content-primary\",\n        \"flex items-center gap-1 rounded-md px-2 py-2\",\n        \"hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"motion-safe:transition-colors\",\n        open && \"bg-neutral-alphas-50\",\n        className,\n      )}\n      {...props}\n    >\n      {selectedOption?.icon && (\n        <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n      )}\n      {selectedOption?.label ?? fallbackLabel ?? \"Select\"}\n      <ChevronDownIcon\n        className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n      />\n    </button>\n  ),\n);\nSelectTriggerButton.displayName = \"SelectTriggerButton\";\n\n/** The green tick shown on the selected option (matches DropDown V2). */\nfunction SelectedTick() {\n  return <TickIcon size={16} className=\"text-success-negative-content\" aria-hidden=\"true\" />;\n}\n\n/**\n * Inline model/option selector for the ChatInput toolbar. Renders the\n * design-system dropdown (DropDown V2) on desktop and a bottom sheet on mobile.\n */\nfunction InlineSelect({\n  options,\n  value,\n  onChange,\n  disabled,\n  selectedOption,\n  variant,\n  menuTitle,\n}: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const fallbackLabel = options[0]?.label;\n\n  // Never allow the menu/sheet to open while disabled, regardless of how the\n  // open request originates (click, keyboard, programmatic).\n  const handleOpenChange = (next: boolean) => {\n    if (disabled && next) return;\n    setOpen(next);\n  };\n\n  const trigger = (\n    <SelectTriggerButton\n      open={open}\n      selectedOption={selectedOption}\n      fallbackLabel={fallbackLabel}\n      disabled={disabled}\n    />\n  );\n\n  if (variant === \"sheet\") {\n    return (\n      <Drawer open={open} onOpenChange={handleOpenChange}>\n        <DrawerTrigger asChild>{trigger}</DrawerTrigger>\n        <DrawerContent position=\"bottom\" variant=\"sheet\">\n          <DrawerHeader>\n            <DrawerTitle className=\"typography-header-heading-xs\">\n              {menuTitle ?? \"Select an option\"}\n            </DrawerTitle>\n          </DrawerHeader>\n          {/* Mirrors DropdownMenuItem's two-line layout, which can't be reused\n              here because it requires a DropdownMenu (Radix Menu) context. */}\n          <div className=\"flex flex-col gap-1 overflow-y-auto px-4 pb-4\" role=\"listbox\">\n            {options.map((option) => {\n              const isSelected = option.value === value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  onClick={() => {\n                    onChange?.(option.value);\n                    setOpen(false);\n                  }}\n                  className={cn(\n                    \"flex w-full items-start gap-2 rounded-sm px-3 py-2 text-left outline-none\",\n                    \"focus-visible:shadow-focus-ring\",\n                    \"typography-body-default-16px-regular text-content-primary hover:bg-neutral-alphas-50\",\n                    // bg-interaction-hover aliases to the same token as the\n                    // plain hover background above, so it can't distinguish\n                    // the selected option from a hovered-but-unselected one.\n                    isSelected && [\"bg-neutral-alphas-100\", \"hover:bg-neutral-alphas-200\"],\n                  )}\n                >\n                  {option.icon && (\n                    <span className=\"flex shrink-0 items-center pt-1 [&>svg]:size-4\">\n                      {option.icon}\n                    </span>\n                  )}\n                  <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <span className=\"truncate\">{option.menuLabel ?? option.label}</span>\n                    {option.description && (\n                      <span className=\"typography-body-small-14px-regular truncate text-content-secondary\">\n                        {option.description}\n                      </span>\n                    )}\n                  </span>\n                  {isSelected && (\n                    <span className=\"flex shrink-0 items-center pt-1\">\n                      <SelectedTick />\n                    </span>\n                  )}\n                </button>\n              );\n            })}\n          </div>\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  return (\n    <DropdownMenu open={open} onOpenChange={handleOpenChange}>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent side=\"top\" align=\"end\" className=\"min-w-[244px]\">\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          return (\n            <DropdownMenuItem\n              key={option.value}\n              size=\"40\"\n              selected={isSelected}\n              description={option.description}\n              leadingIcon={\n                option.icon ? (\n                  <span className=\"flex size-4 items-center [&>svg]:size-4\">{option.icon}</span>\n                ) : undefined\n              }\n              trailingIcon={isSelected ? <SelectedTick /> : undefined}\n              onSelect={() => onChange?.(option.value)}\n            >\n              {option.menuLabel ?? option.label}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["jsxs","jsx","IconButton","CloseIcon","React","minHeight","maxHeight","cn","AddIcon","ArrowUpIcon","ChevronDownIcon","TickIcon","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem"],"mappings":"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"}

package/dist/cjs/components/ChatMessage/ChatMessage.cjs

@@ -0,0 +1,228 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Avatar = require("../Avatar/Avatar.cjs");
+const DoubleTickIcon = require("../Icons/DoubleTickIcon.cjs");
+const TrashIcon = require("../Icons/TrashIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const DEFAULT_WAVEFORM = Array.from({ length: 64 }, () => 0);
+const WAVEFORM_MIN_HEIGHT = 4;
+const WAVEFORM_MAX_HEIGHT = 24;
+const bubbleColors = {
+  sender: "bg-messages-background-sender border-messages-background-sender-stroke",
+  receiver: "bg-messages-background-receiver border-messages-background-receiver-2"
+};
+function ChatMessageMeta({
+  time,
+  showTick,
+  status,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn.cn(
+        "typography-description-12px-regular inline-flex items-center gap-1 whitespace-nowrap text-content-secondary leading-none",
+        className
+      ),
+      children: [
+        time ? /* @__PURE__ */ jsxRuntime.jsx("time", { children: time }) : null,
+        showTick ? (
+          // The 24px geometry (stroked) scaled to 16px — the icon's 16px variant
+          // is filled and renders as a blob at this size.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DoubleTickIcon.DoubleTickIcon,
+            {
+              size: 24,
+              "aria-hidden": false,
+              role: "img",
+              "aria-label": status === "read" ? "Read" : "Delivered",
+              className: cn.cn(
+                "size-4 shrink-0",
+                status === "read" ? "text-messages-read" : "text-icons-disabled"
+              )
+            }
+          )
+        ) : null
+      ]
+    }
+  );
+}
+function TypingIndicator({ label }) {
+  const dot = "size-2 shrink-0 rounded-full motion-safe:animate-bounce";
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate for a typing indicator; role="status" is the correct live-region pattern
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "status", "aria-label": label, className: "flex items-center gap-2 px-0.5 py-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(dot, "bg-content-primary") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(dot, "bg-neutral-alphas-700 [animation-delay:150ms]") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn.cn(dot, "bg-neutral-alphas-400 [animation-delay:300ms]") })
+    ] })
+  );
+}
+function Waveform({ bars }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-hidden", "aria-hidden": true, children: bars.map((amplitude, index) => {
+    const clamped = Math.min(1, Math.max(0, amplitude));
+    const height = WAVEFORM_MIN_HEIGHT + clamped * (WAVEFORM_MAX_HEIGHT - WAVEFORM_MIN_HEIGHT);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "w-1 shrink-0 rounded-3xs bg-messages-waveform-default",
+        style: { height }
+      },
+      index
+    );
+  }) });
+}
+function PlayGlyph() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "size-6", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5.14v13.72a1 1 0 0 0 1.54.84l10.28-6.86a1 1 0 0 0 0-1.68L9.54 4.3A1 1 0 0 0 8 5.14Z" }) });
+}
+function PauseGlyph() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", className: "size-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "7", y: "5", width: "3.5", height: "14", rx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "13.5", y: "5", width: "3.5", height: "14", rx: "1" })
+  ] });
+}
+const ChatMessage = React__namespace.forwardRef(
+  ({
+    className,
+    user = "receiver",
+    variant = "text",
+    message,
+    time,
+    status = "delivered",
+    audioDuration = "0:00",
+    waveform,
+    playing,
+    defaultPlaying = false,
+    onPlayingChange,
+    showAvatar = true,
+    avatarSrc,
+    avatarAlt,
+    avatarFallback,
+    online = false,
+    typingLabel = "Typing",
+    deletedLabel = "Message deleted",
+    playLabel = "Play",
+    pauseLabel = "Pause",
+    ...props
+  }, ref) => {
+    const isSender = user === "sender";
+    const showTick = isSender;
+    const [internalPlaying, setInternalPlaying] = React__namespace.useState(defaultPlaying);
+    const isPlaying = playing ?? internalPlaying;
+    const togglePlaying = () => {
+      const next = !isPlaying;
+      if (playing === void 0) setInternalPlaying(next);
+      onPlayingChange?.(next);
+    };
+    const bubbleBase = cn.cn(
+      "w-fit min-w-0 max-w-full rounded-md border border-solid",
+      bubbleColors[user]
+    );
+    const hasMeta = Boolean(time) || showTick;
+    let bubble;
+    if (variant === "typing") {
+      bubble = /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(bubbleBase, "px-3 py-2"), children: /* @__PURE__ */ jsxRuntime.jsx(TypingIndicator, { label: typingLabel }) });
+    } else if (variant === "deleted") {
+      bubble = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn(bubbleBase, "flex items-baseline gap-6 px-3 py-2 opacity-60"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TrashIcon.TrashIcon, { size: 16, className: "shrink-0 text-content-primary" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-default-16px-regular whitespace-nowrap text-content-primary", children: deletedLabel })
+        ] }),
+        hasMeta ? /* @__PURE__ */ jsxRuntime.jsx(ChatMessageMeta, { time, showTick, status }) : null
+      ] });
+    } else if (variant === "audio") {
+      bubble = /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(bubbleBase, "flex w-full flex-col p-2"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-2 px-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-3 pt-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePlaying,
+              "aria-pressed": isPlaying,
+              "aria-label": isPlaying ? pauseLabel : playLabel,
+              className: cn.cn(
+                "flex size-12 shrink-0 items-center justify-center rounded-full bg-buttons-secondary-default text-icons-primary",
+                "focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150"
+              ),
+              children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(PauseGlyph, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayGlyph, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Waveform, { bars: waveform ?? DEFAULT_WAVEFORM }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-small-14px-regular whitespace-nowrap text-content-primary", children: audioDuration })
+        ] }),
+        hasMeta ? /* @__PURE__ */ jsxRuntime.jsx(
+          ChatMessageMeta,
+          {
+            time,
+            showTick,
+            status,
+            className: "self-end"
+          }
+        ) : null
+      ] }) });
+    } else {
+      bubble = /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(bubbleBase, "px-3 py-2"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline justify-end gap-x-6 gap-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-body-default-16px-regular m-0 min-w-0 break-words text-content-primary", children: message }),
+        hasMeta ? /* @__PURE__ */ jsxRuntime.jsx(
+          ChatMessageMeta,
+          {
+            time,
+            showTick,
+            status,
+            className: "shrink-0"
+          }
+        ) : null
+      ] }) });
+    }
+    const alignItems = variant === "typing" || variant === "deleted" ? "items-center" : "items-end";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "flex min-h-10 w-full gap-2",
+          alignItems,
+          isSender ? "justify-end" : "justify-start",
+          className
+        ),
+        ...props,
+        children: [
+          !isSender && (showAvatar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { size: 40, src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }),
+            online ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "absolute right-0 bottom-0 size-2.5 rounded-full border border-border-background bg-messages-status-active"
+              }
+            ) : null
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "w-10 shrink-0" })),
+          bubble
+        ]
+      }
+    );
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+exports.ChatMessage = ChatMessage;
+//# sourceMappingURL=ChatMessage.cjs.map

package/dist/cjs/components/ChatMessage/ChatMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.cjs","sources":["../../../../src/components/ChatMessage/ChatMessage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { DoubleTickIcon } from \"../Icons/DoubleTickIcon\";\nimport { TrashIcon } from \"../Icons/TrashIcon\";\n\nexport type ChatMessageUser = \"sender\" | \"receiver\";\n\nexport type ChatMessageVariant = \"text\" | \"typing\" | \"audio\" | \"deleted\";\n\nexport type ChatMessageStatus = \"delivered\" | \"read\";\n\nexport interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Who sent the message. `\"sender\"` is the current user (right-aligned, green\n   * bubble, delivery tick). `\"receiver\"` is the other party (left-aligned, grey\n   * bubble, with avatar). @default \"receiver\"\n   */\n  user?: ChatMessageUser;\n  /** The kind of content the message carries. @default \"text\" */\n  variant?: ChatMessageVariant;\n  /** Message body for the `\"text\"` variant. Keep it to inline content. */\n  message?: React.ReactNode;\n  /** Timestamp shown with the message, e.g. `\"16:00\"`. */\n  time?: string;\n  /**\n   * Delivery status shown on sender messages (a double tick). Ignored for\n   * receiver messages. `\"read\"` renders the tick in the read colour. @default \"delivered\"\n   */\n  status?: ChatMessageStatus;\n  /** Duration label for the `\"audio\"` variant, e.g. `\"0:05\"`. @default \"0:00\" */\n  audioDuration?: string;\n  /**\n   * Relative bar heights (values `0`–`1`) for the `\"audio\"` waveform. Defaults\n   * to a flat row of dots matching the unplayed design state.\n   */\n  waveform?: number[];\n  /** Whether the audio is playing (controlled). Pairs with {@link onPlayingChange}. */\n  playing?: boolean;\n  /** Initial playing state when uncontrolled. @default false */\n  defaultPlaying?: boolean;\n  /** Fired when the audio play/pause button is pressed, with the next playing state. */\n  onPlayingChange?: (playing: boolean) => void;\n  /** Render the receiver avatar. Reserves the avatar space when `false` so grouped bubbles stay aligned. @default true */\n  showAvatar?: boolean;\n  /** Avatar image URL for receiver messages. */\n  avatarSrc?: string;\n  /** Avatar alt text. @default \"Avatar\" */\n  avatarAlt?: string;\n  /** Avatar fallback (initials or icon) shown before the image loads. */\n  avatarFallback?: React.ReactNode;\n  /** Show the online indicator on the receiver avatar. @default false */\n  online?: boolean;\n  /** Accessible label for the typing indicator. @default \"Typing\" */\n  typingLabel?: string;\n  /** Text shown for the `\"deleted\"` variant. @default \"Message deleted\" */\n  deletedLabel?: string;\n  /** Accessible label for the audio play button. @default \"Play\" */\n  playLabel?: string;\n  /** Accessible label for the audio pause button. @default \"Pause\" */\n  pauseLabel?: string;\n}\n\nconst DEFAULT_WAVEFORM = Array.from({ length: 64 }, () => 0);\nconst WAVEFORM_MIN_HEIGHT = 4;\nconst WAVEFORM_MAX_HEIGHT = 24;\n\nconst bubbleColors: Record<ChatMessageUser, string> = {\n  sender: \"bg-messages-background-sender border-messages-background-sender-stroke\",\n  receiver: \"bg-messages-background-receiver border-messages-background-receiver-2\",\n};\n\nfunction ChatMessageMeta({\n  time,\n  showTick,\n  status,\n  className,\n}: {\n  time?: string;\n  showTick: boolean;\n  status: ChatMessageStatus;\n  className?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        \"typography-description-12px-regular inline-flex items-center gap-1 whitespace-nowrap text-content-secondary leading-none\",\n        className,\n      )}\n    >\n      {time ? <time>{time}</time> : null}\n      {showTick ? (\n        // The 24px geometry (stroked) scaled to 16px — the icon's 16px variant\n        // is filled and renders as a blob at this size.\n        <DoubleTickIcon\n          size={24}\n          aria-hidden={false}\n          role=\"img\"\n          aria-label={status === \"read\" ? \"Read\" : \"Delivered\"}\n          className={cn(\n            \"size-4 shrink-0\",\n            status === \"read\" ? \"text-messages-read\" : \"text-icons-disabled\",\n          )}\n        />\n      ) : null}\n    </span>\n  );\n}\n\nfunction TypingIndicator({ label }: { label: string }) {\n  const dot = \"size-2 shrink-0 rounded-full motion-safe:animate-bounce\";\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: <output> is not appropriate for a typing indicator; role=\"status\" is the correct live-region pattern\n    <span role=\"status\" aria-label={label} className=\"flex items-center gap-2 px-0.5 py-1\">\n      <span className={cn(dot, \"bg-content-primary\")} />\n      <span className={cn(dot, \"bg-neutral-alphas-700 [animation-delay:150ms]\")} />\n      <span className={cn(dot, \"bg-neutral-alphas-400 [animation-delay:300ms]\")} />\n    </span>\n  );\n}\n\nfunction Waveform({ bars }: { bars: number[] }) {\n  return (\n    <span className=\"flex min-w-0 flex-1 items-center gap-1 overflow-hidden\" aria-hidden>\n      {bars.map((amplitude, index) => {\n        const clamped = Math.min(1, Math.max(0, amplitude));\n        const height = WAVEFORM_MIN_HEIGHT + clamped * (WAVEFORM_MAX_HEIGHT - WAVEFORM_MIN_HEIGHT);\n        return (\n          <span\n            // biome-ignore lint/suspicious/noArrayIndexKey: bars are positional and have no stable id\n            key={index}\n            className=\"w-1 shrink-0 rounded-3xs bg-messages-waveform-default\"\n            style={{ height }}\n          />\n        );\n      })}\n    </span>\n  );\n}\n\nfunction PlayGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className=\"size-6\">\n      <path d=\"M8 5.14v13.72a1 1 0 0 0 1.54.84l10.28-6.86a1 1 0 0 0 0-1.68L9.54 4.3A1 1 0 0 0 8 5.14Z\" />\n    </svg>\n  );\n}\n\nfunction PauseGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className=\"size-6\">\n      <rect x=\"7\" y=\"5\" width=\"3.5\" height=\"14\" rx=\"1\" />\n      <rect x=\"13.5\" y=\"5\" width=\"3.5\" height=\"14\" rx=\"1\" />\n    </svg>\n  );\n}\n\n/**\n * A single chat message rendered as a bubble. Sender messages sit on the right\n * with a green bubble and a delivery tick; receiver messages sit on the left\n * with a grey bubble and an avatar. Supports plain text, a typing indicator, a\n * voice message with waveform, and a deleted-message placeholder.\n *\n * Text bubbles place the timestamp inline after short messages and drop it to\n * the bottom-right corner once the text wraps, so no variant switch is needed\n * for short versus long content.\n *\n * @example\n * ```tsx\n * <ChatMessage user=\"sender\" message=\"On my way!\" time=\"16:00\" status=\"read\" />\n * <ChatMessage user=\"receiver\" message=\"See you soon\" time=\"16:01\" avatarSrc=\"/jane.jpg\" online />\n * <ChatMessage user=\"receiver\" variant=\"typing\" avatarSrc=\"/jane.jpg\" />\n * ```\n */\nexport const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(\n  (\n    {\n      className,\n      user = \"receiver\",\n      variant = \"text\",\n      message,\n      time,\n      status = \"delivered\",\n      audioDuration = \"0:00\",\n      waveform,\n      playing,\n      defaultPlaying = false,\n      onPlayingChange,\n      showAvatar = true,\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      online = false,\n      typingLabel = \"Typing\",\n      deletedLabel = \"Message deleted\",\n      playLabel = \"Play\",\n      pauseLabel = \"Pause\",\n      ...props\n    },\n    ref,\n  ) => {\n    const isSender = user === \"sender\";\n    const showTick = isSender;\n\n    const [internalPlaying, setInternalPlaying] = React.useState(defaultPlaying);\n    const isPlaying = playing ?? internalPlaying;\n    const togglePlaying = () => {\n      const next = !isPlaying;\n      if (playing === undefined) setInternalPlaying(next);\n      onPlayingChange?.(next);\n    };\n\n    const bubbleBase = cn(\n      \"w-fit min-w-0 max-w-full rounded-md border border-solid\",\n      bubbleColors[user],\n    );\n    const hasMeta = Boolean(time) || showTick;\n\n    let bubble: React.ReactNode;\n\n    if (variant === \"typing\") {\n      bubble = (\n        <div className={cn(bubbleBase, \"px-3 py-2\")}>\n          <TypingIndicator label={typingLabel} />\n        </div>\n      );\n    } else if (variant === \"deleted\") {\n      bubble = (\n        <div className={cn(bubbleBase, \"flex items-baseline gap-6 px-3 py-2 opacity-60\")}>\n          <span className=\"flex items-center gap-2\">\n            <TrashIcon size={16} className=\"shrink-0 text-content-primary\" />\n            <span className=\"typography-body-default-16px-regular whitespace-nowrap text-content-primary\">\n              {deletedLabel}\n            </span>\n          </span>\n          {hasMeta ? <ChatMessageMeta time={time} showTick={showTick} status={status} /> : null}\n        </div>\n      );\n    } else if (variant === \"audio\") {\n      bubble = (\n        <div className={cn(bubbleBase, \"flex w-full flex-col p-2\")}>\n          <div className=\"flex w-full flex-col items-start gap-2 px-1\">\n            <div className=\"flex w-full items-center gap-3 pt-1\">\n              <button\n                type=\"button\"\n                onClick={togglePlaying}\n                aria-pressed={isPlaying}\n                aria-label={isPlaying ? pauseLabel : playLabel}\n                className={cn(\n                  \"flex size-12 shrink-0 items-center justify-center rounded-full bg-buttons-secondary-default text-icons-primary\",\n                  \"focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n                )}\n              >\n                {isPlaying ? <PauseGlyph /> : <PlayGlyph />}\n              </button>\n              <Waveform bars={waveform ?? DEFAULT_WAVEFORM} />\n              <span className=\"typography-body-small-14px-regular whitespace-nowrap text-content-primary\">\n                {audioDuration}\n              </span>\n            </div>\n            {hasMeta ? (\n              <ChatMessageMeta\n                time={time}\n                showTick={showTick}\n                status={status}\n                className=\"self-end\"\n              />\n            ) : null}\n          </div>\n        </div>\n      );\n    } else {\n      // \"text\": the message and timestamp share a wrapping row. A brief message\n      // keeps the time inline (24px gap = the design's Short treatment); once the\n      // text wraps, the time drops to its own line bottom-right (the Default\n      // treatment). No length prop needed — the layout adapts to the content.\n      bubble = (\n        <div className={cn(bubbleBase, \"px-3 py-2\")}>\n          <div className=\"flex flex-wrap items-baseline justify-end gap-x-6 gap-y-2\">\n            <p className=\"typography-body-default-16px-regular m-0 min-w-0 break-words text-content-primary\">\n              {message}\n            </p>\n            {hasMeta ? (\n              <ChatMessageMeta\n                time={time}\n                showTick={showTick}\n                status={status}\n                className=\"shrink-0\"\n              />\n            ) : null}\n          </div>\n        </div>\n      );\n    }\n\n    const alignItems = variant === \"typing\" || variant === \"deleted\" ? \"items-center\" : \"items-end\";\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex min-h-10 w-full gap-2\",\n          alignItems,\n          isSender ? \"justify-end\" : \"justify-start\",\n          className,\n        )}\n        {...props}\n      >\n        {!isSender &&\n          (showAvatar ? (\n            <div className=\"relative flex shrink-0\">\n              <Avatar size={40} src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n              {online ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"absolute right-0 bottom-0 size-2.5 rounded-full border border-border-background bg-messages-status-active\"\n                />\n              ) : null}\n            </div>\n          ) : (\n            <div aria-hidden=\"true\" className=\"w-10 shrink-0\" />\n          ))}\n        {bubble}\n      </div>\n    );\n  },\n);\n\nChatMessage.displayName = \"ChatMessage\";\n"],"names":["jsxs","cn","jsx","DoubleTickIcon","React","TrashIcon","Avatar"],"mappings":"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"}