@fanvue/ui 2.5.1 → 2.6.0

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

@@ -0,0 +1,289 @@
+"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 IconButton = require("../IconButton/IconButton.cjs");
+const AddIcon = require("../Icons/AddIcon.cjs");
+const ArrowUpIcon = require("../Icons/ArrowUpIcon.cjs");
+const ChevronDownIcon = require("../Icons/ChevronDownIcon.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 LINE_HEIGHT = 18;
+const TEXTAREA_PY = 12;
+function calculateHeight(rows) {
+  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;
+}
+const ChatInput = React__namespace.forwardRef(
+  ({
+    className,
+    minRows = 1,
+    maxRows = 6,
+    disabled = false,
+    loading = false,
+    value,
+    defaultValue,
+    placeholder,
+    maxLength,
+    "aria-label": ariaLabel,
+    onChange,
+    onKeyDown,
+    onSubmit,
+    showFileButton = false,
+    onFileClick,
+    fileButtonAriaLabel = "Attach file",
+    submitAriaLabel = "Send message",
+    submitIcon,
+    toolbarRight,
+    selectOptions,
+    selectValue,
+    onSelectChange,
+    style,
+    ...textareaProps
+  }, ref) => {
+    const internalRef = React__namespace.useRef(null);
+    const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? "");
+    const resolvedValue = value !== void 0 ? value : internalValue;
+    const isControlled = value !== void 0;
+    const mergedRef = React__namespace.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const adjustHeight = React__namespace.useCallback(() => {
+      const textarea = internalRef.current;
+      if (!textarea) return;
+      const minHeight2 = calculateHeight(minRows);
+      const maxHeight2 = calculateHeight(maxRows);
+      textarea.style.height = `${minHeight2}px`;
+      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight2), maxHeight2);
+      textarea.style.height = `${desired}px`;
+    }, [minRows, maxRows]);
+    React__namespace.useEffect(() => {
+      adjustHeight();
+    }, [resolvedValue, adjustHeight]);
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;
+    const handleSubmit = () => {
+      const text = String(resolvedValue).trim();
+      if (!text || !canSubmit) return;
+      onSubmit?.(text);
+      if (!isControlled) {
+        setInternalValue("");
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+      onKeyDown?.(e);
+    };
+    const minHeight = calculateHeight(minRows);
+    const maxHeight = calculateHeight(maxRows);
+    const selectedOption = selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];
+    const resolvedToolbarRight = toolbarRight ?? (selectOptions && selectOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      InlineSelect,
+      {
+        options: selectOptions,
+        value: selectValue,
+        onChange: onSelectChange,
+        disabled,
+        selectedOption
+      }
+    ) : null);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn(
+          "relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary",
+          "has-focus-visible:border-neutral-alphas-400 has-focus-visible:outline-none",
+          "motion-safe:transition-colors",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ...textareaProps,
+              ref: mergedRef,
+              value: isControlled ? value : internalValue,
+              placeholder,
+              maxLength,
+              disabled,
+              "aria-label": ariaLabel ?? placeholder,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              rows: minRows,
+              className: cn.cn(
+                "w-full resize-none bg-transparent px-4 pt-4",
+                "typography-regular-body-md text-content-primary",
+                "placeholder:text-content-tertiary",
+                "focus:outline-none disabled:cursor-not-allowed",
+                "overflow-y-auto"
+              ),
+              style: {
+                minHeight: `${minHeight}px`,
+                maxHeight: `${maxHeight}px`,
+                ...style
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pb-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: showFileButton && /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                variant: "tertiary",
+                size: "32",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon.AddIcon, {}),
+                "aria-label": fileButtonAriaLabel,
+                onClick: onFileClick,
+                disabled,
+                className: "sm:border sm:border-border-primary max-sm:-ml-2"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              resolvedToolbarRight,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton.IconButton,
+                {
+                  variant: "primary",
+                  size: "32",
+                  icon: submitIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon.ArrowUpIcon, {}),
+                  "aria-label": submitAriaLabel,
+                  onClick: handleSubmit,
+                  disabled: !canSubmit,
+                  className: "disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChatInput.displayName = "ChatInput";
+function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
+  const [open, setOpen] = React__namespace.useState(false);
+  const containerRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  React__namespace.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-label": "Select model",
+        disabled,
+        onClick: () => setOpen((prev) => !prev),
+        className: cn.cn(
+          "typography-semibold-body-sm text-content-primary",
+          "flex items-center gap-1 rounded-sm px-2 py-1",
+          "hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "motion-safe:transition-colors"
+        ),
+        children: [
+          selectedOption?.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: selectedOption.icon }),
+          selectedOption?.label ?? options[0]?.label ?? "Select",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDownIcon.ChevronDownIcon,
+            {
+              className: cn.cn("size-4 motion-safe:transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "listbox",
+        className: cn.cn(
+          "absolute right-0 bottom-full z-10 mb-1 min-w-[140px]",
+          "overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "option",
+            tabIndex: 0,
+            "aria-selected": option.value === value,
+            className: cn.cn(
+              "typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5",
+              "text-content-primary hover:bg-neutral-alphas-50",
+              "focus-visible:shadow-focus-ring focus-visible:outline-none",
+              option.value === value && "bg-neutral-alphas-50"
+            ),
+            onClick: () => {
+              onChange?.(option.value);
+              setOpen(false);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onChange?.(option.value);
+                setOpen(false);
+              }
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: option.icon }),
+              option.label
+            ]
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+}
+exports.ChatInput = ChatInput;
+//# sourceMappingURL=ChatInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.cjs","sources":["../../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: 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  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\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\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 */\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      selectValue,\n      onSelectChange,\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    }, [resolvedValue, 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 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}\n          selectedOption={selectedOption}\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:border-neutral-alphas-400 has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\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 pt-4\",\n            \"typography-regular-body-md 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\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=\"sm:border sm:border-border-primary max-sm:-ml-2\"\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:opacity-100 disabled:text-icons-primary\"\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}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Select model\"\n        disabled={disabled}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"typography-semibold-body-sm text-content-primary\",\n          \"flex items-center gap-1 rounded-sm px-2 py-1\",\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        )}\n      >\n        {selectedOption?.icon && (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n        )}\n        {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n        <ChevronDownIcon\n          className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div\n          role=\"listbox\"\n          className={cn(\n            \"absolute right-0 bottom-full z-10 mb-1 min-w-[140px]\",\n            \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg\",\n          )}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              role=\"option\"\n              tabIndex={0}\n              aria-selected={option.value === value}\n              className={cn(\n                \"typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5\",\n                \"text-content-primary hover:bg-neutral-alphas-50\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                option.value === value && \"bg-neutral-alphas-50\",\n              )}\n              onClick={() => {\n                onChange?.(option.value);\n                setOpen(false);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onChange?.(option.value);\n                  setOpen(false);\n                }\n              }}\n            >\n              {option.icon && (\n                <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n              )}\n              {option.label}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["React","minHeight","maxHeight","jsx","jsxs","cn","IconButton","AddIcon","ArrowUpIcon","ChevronDownIcon"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -17,6 +17,7 @@ const BottomNavigationAction = require("./components/BottomNavigation/BottomNavi
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const Card = require("./components/Card/Card.cjs");
+const ChatInput = require("./components/ChatInput/ChatInput.cjs");
 const Checkbox = require("./components/Checkbox/Checkbox.cjs");
 const Chip = require("./components/Chip/Chip.cjs");
 const Count = require("./components/Count/Count.cjs");
@@ -214,6 +215,7 @@ exports.CardDescription = Card.CardDescription;
 exports.CardFooter = Card.CardFooter;
 exports.CardHeader = Card.CardHeader;
 exports.CardTitle = Card.CardTitle;
+exports.ChatInput = ChatInput.ChatInput;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.Count = Count.Count;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ChatInput/ChatInput.mjs

@@ -0,0 +1,272 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { IconButton } from "../IconButton/IconButton.mjs";
+import { AddIcon } from "../Icons/AddIcon.mjs";
+import { ArrowUpIcon } from "../Icons/ArrowUpIcon.mjs";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.mjs";
+const LINE_HEIGHT = 18;
+const TEXTAREA_PY = 12;
+function calculateHeight(rows) {
+  return LINE_HEIGHT * rows + TEXTAREA_PY * 2;
+}
+const ChatInput = React.forwardRef(
+  ({
+    className,
+    minRows = 1,
+    maxRows = 6,
+    disabled = false,
+    loading = false,
+    value,
+    defaultValue,
+    placeholder,
+    maxLength,
+    "aria-label": ariaLabel,
+    onChange,
+    onKeyDown,
+    onSubmit,
+    showFileButton = false,
+    onFileClick,
+    fileButtonAriaLabel = "Attach file",
+    submitAriaLabel = "Send message",
+    submitIcon,
+    toolbarRight,
+    selectOptions,
+    selectValue,
+    onSelectChange,
+    style,
+    ...textareaProps
+  }, ref) => {
+    const internalRef = React.useRef(null);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+    const resolvedValue = value !== void 0 ? value : internalValue;
+    const isControlled = value !== void 0;
+    const mergedRef = React.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const adjustHeight = React.useCallback(() => {
+      const textarea = internalRef.current;
+      if (!textarea) return;
+      const minHeight2 = calculateHeight(minRows);
+      const maxHeight2 = calculateHeight(maxRows);
+      textarea.style.height = `${minHeight2}px`;
+      const desired = Math.min(Math.max(textarea.scrollHeight, minHeight2), maxHeight2);
+      textarea.style.height = `${desired}px`;
+    }, [minRows, maxRows]);
+    React.useEffect(() => {
+      adjustHeight();
+    }, [resolvedValue, adjustHeight]);
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const canSubmit = !!String(resolvedValue).trim() && !disabled && !loading;
+    const handleSubmit = () => {
+      const text = String(resolvedValue).trim();
+      if (!text || !canSubmit) return;
+      onSubmit?.(text);
+      if (!isControlled) {
+        setInternalValue("");
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+      onKeyDown?.(e);
+    };
+    const minHeight = calculateHeight(minRows);
+    const maxHeight = calculateHeight(maxRows);
+    const selectedOption = selectOptions?.find((o) => o.value === selectValue) ?? selectOptions?.[0];
+    const resolvedToolbarRight = toolbarRight ?? (selectOptions && selectOptions.length > 0 ? /* @__PURE__ */ jsx(
+      InlineSelect,
+      {
+        options: selectOptions,
+        value: selectValue,
+        onChange: onSelectChange,
+        disabled,
+        selectedOption
+      }
+    ) : null);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-col gap-6 rounded-lg border border-border-primary bg-surface-primary",
+          "has-focus-visible:border-neutral-alphas-400 has-focus-visible:outline-none",
+          "motion-safe:transition-colors",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...textareaProps,
+              ref: mergedRef,
+              value: isControlled ? value : internalValue,
+              placeholder,
+              maxLength,
+              disabled,
+              "aria-label": ariaLabel ?? placeholder,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              rows: minRows,
+              className: cn(
+                "w-full resize-none bg-transparent px-4 pt-4",
+                "typography-regular-body-md text-content-primary",
+                "placeholder:text-content-tertiary",
+                "focus:outline-none disabled:cursor-not-allowed",
+                "overflow-y-auto"
+              ),
+              style: {
+                minHeight: `${minHeight}px`,
+                maxHeight: `${maxHeight}px`,
+                ...style
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pb-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: showFileButton && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "32",
+                icon: /* @__PURE__ */ jsx(AddIcon, {}),
+                "aria-label": fileButtonAriaLabel,
+                onClick: onFileClick,
+                disabled,
+                className: "sm:border sm:border-border-primary max-sm:-ml-2"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              resolvedToolbarRight,
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "primary",
+                  size: "32",
+                  icon: submitIcon ?? /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+                  "aria-label": submitAriaLabel,
+                  onClick: handleSubmit,
+                  disabled: !canSubmit,
+                  className: "disabled:bg-surface-secondary disabled:opacity-100 disabled:text-icons-primary"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChatInput.displayName = "ChatInput";
+function InlineSelect({ options, value, onChange, disabled, selectedOption }) {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-label": "Select model",
+        disabled,
+        onClick: () => setOpen((prev) => !prev),
+        className: cn(
+          "typography-semibold-body-sm text-content-primary",
+          "flex items-center gap-1 rounded-sm px-2 py-1",
+          "hover:bg-neutral-alphas-50 focus-visible:shadow-focus-ring focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "motion-safe:transition-colors"
+        ),
+        children: [
+          selectedOption?.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: selectedOption.icon }),
+          selectedOption?.label ?? options[0]?.label ?? "Select",
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn("size-4 motion-safe:transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        className: cn(
+          "absolute right-0 bottom-full z-10 mb-1 min-w-[140px]",
+          "overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg"
+        ),
+        children: options.map((option) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "option",
+            tabIndex: 0,
+            "aria-selected": option.value === value,
+            className: cn(
+              "typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5",
+              "text-content-primary hover:bg-neutral-alphas-50",
+              "focus-visible:shadow-focus-ring focus-visible:outline-none",
+              option.value === value && "bg-neutral-alphas-50"
+            ),
+            onClick: () => {
+              onChange?.(option.value);
+              setOpen(false);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onChange?.(option.value);
+                setOpen(false);
+              }
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-4", children: option.icon }),
+              option.label
+            ]
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+}
+export {
+  ChatInput
+};
+//# sourceMappingURL=ChatInput.mjs.map

package/dist/components/ChatInput/ChatInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.mjs","sources":["../../../src/components/ChatInput/ChatInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { AddIcon } from \"../Icons/AddIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** A single option for the inline model/dropdown selector. */\nexport interface ChatInputSelectOption {\n  /** Unique value for this option. */\n  value: string;\n  /** Display label. */\n  label: 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  /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */\n  selectValue?: string;\n  /** Callback fired when the user picks a different dropdown option. */\n  onSelectChange?: (value: string) => void;\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\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 */\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      selectValue,\n      onSelectChange,\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    }, [resolvedValue, 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 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}\n          selectedOption={selectedOption}\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:border-neutral-alphas-400 has-focus-visible:outline-none\",\n          \"motion-safe:transition-colors\",\n          disabled && \"opacity-50\",\n          className,\n        )}\n      >\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 pt-4\",\n            \"typography-regular-body-md 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\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=\"sm:border sm:border-border-primary max-sm:-ml-2\"\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:opacity-100 disabled:text-icons-primary\"\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}\n\nfunction InlineSelect({ options, value, onChange, disabled, selectedOption }: InlineSelectProps) {\n  const [open, setOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label=\"Select model\"\n        disabled={disabled}\n        onClick={() => setOpen((prev) => !prev)}\n        className={cn(\n          \"typography-semibold-body-sm text-content-primary\",\n          \"flex items-center gap-1 rounded-sm px-2 py-1\",\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        )}\n      >\n        {selectedOption?.icon && (\n          <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{selectedOption.icon}</span>\n        )}\n        {selectedOption?.label ?? options[0]?.label ?? \"Select\"}\n        <ChevronDownIcon\n          className={cn(\"size-4 motion-safe:transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div\n          role=\"listbox\"\n          className={cn(\n            \"absolute right-0 bottom-full z-10 mb-1 min-w-[140px]\",\n            \"overflow-hidden rounded-xs border border-border-primary bg-surface-primary p-1 shadow-lg\",\n          )}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              role=\"option\"\n              tabIndex={0}\n              aria-selected={option.value === value}\n              className={cn(\n                \"typography-regular-body-md flex cursor-pointer items-center gap-2 rounded-xs px-3 py-1.5\",\n                \"text-content-primary hover:bg-neutral-alphas-50\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                option.value === value && \"bg-neutral-alphas-50\",\n              )}\n              onClick={() => {\n                onChange?.(option.value);\n                setOpen(false);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onChange?.(option.value);\n                  setOpen(false);\n                }\n              }}\n            >\n              {option.icon && (\n                <span className=\"flex shrink-0 items-center [&>svg]:size-4\">{option.icon}</span>\n              )}\n              {option.label}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["minHeight","maxHeight"],"mappings":"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"}

package/dist/index.d.ts

@@ -651,6 +651,98 @@ export declare const ChartIcon: React_2.ForwardRefExoticComponent<React_2.SVGAtt
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A chat-style multi-line input with an integrated toolbar containing an
+ * optional file-attach button, optional right-side controls (e.g. a model
+ * selector), and a submit button — all inside a single bordered container.
+ *
+ * Designed to behave like modern AI chat inputs: auto-grows with content,
+ * submits on Enter (Shift+Enter for newlines), and keeps controls inline.
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   placeholder="Type a message..."
+ *   onSubmit={(text) => send(text)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   placeholder="Ask the agent..."
+ *   showFileButton
+ *   onFileClick={() => openFilePicker()}
+ *   selectOptions={[
+ *     { value: "fanvue-ai", label: "Fanvue AI", icon: <AIIcon className="size-4" /> },
+ *     { value: "example", label: "Example", icon: <BulbIcon className="size-4" /> },
+ *   ]}
+ *   selectValue="fanvue-ai"
+ *   onSelectChange={(v) => setModel(v)}
+ *   onSubmit={(text) => send(text)}
+ * />
+ * ```
+ */
+export declare const ChatInput: React_2.ForwardRefExoticComponent<ChatInputProps & React_2.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Props for {@link ChatInput}. Standard textarea HTML attributes are forwarded to the inner
+ * `<textarea>` except `className` (applied to the outer container), `rows` (use `minRows`), and
+ * `onSubmit` (replaced by the chat message submit callback).
+ */
+export declare interface ChatInputProps extends Omit<React_2.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "rows" | "onSubmit"> {
+    /** Minimum number of visible rows. @default 1 */
+    minRows?: number;
+    /** Maximum number of visible rows before scrolling. @default 6 */
+    maxRows?: number;
+    /** Whether a submission is in progress (disables submit, shows visual feedback). @default false */
+    loading?: boolean;
+    /**
+     * Callback fired when the user submits (clicks the send button or presses Enter without Shift).
+     * Receives the current trimmed text value.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * When `true`, renders an "attach file" button in the bottom-left toolbar.
+     * @default false
+     */
+    showFileButton?: boolean;
+    /** Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`. */
+    onFileClick?: () => void;
+    /** Accessible label for the attach-file button. @default "Attach file" */
+    fileButtonAriaLabel?: string;
+    /** Accessible label for the submit button. @default "Send message" */
+    submitAriaLabel?: string;
+    /** Icon element for the submit button. @default `<ArrowUpIcon />` */
+    submitIcon?: React_2.ReactNode;
+    /**
+     * Optional content rendered in the bottom-right toolbar, to the left of the submit button.
+     * When provided, takes precedence over the built-in `selectOptions` dropdown.
+     */
+    toolbarRight?: React_2.ReactNode;
+    /**
+     * Options for the built-in inline dropdown selector (e.g. model picker).
+     * Ignored when `toolbarRight` is provided.
+     */
+    selectOptions?: ChatInputSelectOption[];
+    /** Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`. */
+    selectValue?: string;
+    /** Callback fired when the user picks a different dropdown option. */
+    onSelectChange?: (value: string) => void;
+    /** Additional className applied to the outermost container. */
+    className?: string;
+}
+
+/** A single option for the inline model/dropdown selector. */
+export declare interface ChatInputSelectOption {
+    /** Unique value for this option. */
+    value: string;
+    /** Display label. */
+    label: string;
+    /** Optional icon rendered to the left of the label. */
+    icon?: React_2.ReactNode;
+}
+
 /**
  * A checkbox input with optional label and helper text. Supports checked,
  * unchecked, and indeterminate states.

package/dist/index.mjs

@@ -15,6 +15,7 @@ import { BottomNavigationAction } from "./components/BottomNavigation/BottomNavi
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/Breadcrumb.mjs";
 import { Button } from "./components/Button/Button.mjs";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/Card/Card.mjs";
+import { ChatInput } from "./components/ChatInput/ChatInput.mjs";
 import { Checkbox } from "./components/Checkbox/Checkbox.mjs";
 import { Chip } from "./components/Chip/Chip.mjs";
 import { Count } from "./components/Count/Count.mjs";
@@ -229,6 +230,7 @@ export {
   CardHeader,
   CardTitle,
   ChartIcon,
+  ChatInput,
   CheckCircleIcon,
   CheckIcon,
   CheckOutlineIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -160,7 +160,9 @@
       "rollup": ">=4.59.0",
       "storybook": ">=10.2.10",
       "picomatch": ">=4.0.4",
-      "micromatch>picomatch": "2.3.2"
+      "micromatch>picomatch": "2.3.2",
+      "lodash": ">=4.18.0",
+      "lodash-es": ">=4.18.0"
     }
   },
   "size-limit": [