@conscience-technology/ctds 0.4.4 → 0.4.6

package/assets/components/TabStrip/TabStrip.tsx

@@ -0,0 +1,396 @@
+"use client";
+
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import { Icon } from "../Icon/Icon";
+import styles from "./TabStrip.module.css";
+
+export type TabStripSize = "sm" | "md";
+export type TabStripVariant = "ghost" | "soft" | "segmented";
+
+type TabStripContextValue = {
+  value: string | undefined;
+  setValue: (v: string) => void;
+  size: TabStripSize;
+  variant: TabStripVariant;
+  baseId: string;
+  registerTab: (value: string, node: HTMLDivElement | null) => void;
+  focusNext: (currentValue: string, dir: 1 | -1) => void;
+  focusEdge: (edge: "first" | "last") => void;
+};
+
+const TabStripContext = createContext<TabStripContextValue | null>(null);
+
+function useTabStripContext(component: string): TabStripContextValue {
+  const ctx = useContext(TabStripContext);
+  if (!ctx) {
+    throw new Error(`${component} must be rendered inside <TabStrip>`);
+  }
+  return ctx;
+}
+
+const ICON_SIZE: Record<TabStripSize, number> = {
+  sm: 14,
+  md: 16,
+};
+
+const CLOSE_ICON_SIZE: Record<TabStripSize, number> = {
+  sm: 12,
+  md: 14,
+};
+
+function sizedIcon(node: ReactNode, size: number): ReactNode {
+  if (!isValidElement(node)) return node;
+  const el = node as ReactElement<{ size?: number | string }>;
+  if (el.props.size !== undefined) return el;
+  return cloneElement(el, { size });
+}
+
+// ────────────────────────────────────────────────────────────
+// Root
+// ────────────────────────────────────────────────────────────
+
+export interface TabStripProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  size?: TabStripSize;
+  /** 시각 variant.
+   *  - `ghost` (default): 투명 + hover·active에서 bg-muted. 가장 가볍고 shell chrome 기본.
+   *  - `soft`: 연한 bg 상시 (버튼처럼 모양이 잡혀 있고, 선택이 조금 더 진함).
+   *  - `segmented`: 브라우저처럼 탭 사이 세로 hairline으로 칸 구분. */
+  variant?: TabStripVariant;
+  /** controlled */
+  value?: string;
+  /** uncontrolled 초기값 */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** 탭 묶음 오른쪽 slot. "+" 버튼, "..." 더보기, 또는 아무것도 안 넣을 수 있음.
+   *  TabStrip hover·focus-within 시에만 자연스럽게 fade-in. */
+  trailing?: ReactNode;
+  children: ReactNode;
+}
+
+const Root = forwardRef<HTMLDivElement, TabStripProps>(
+  (
+    {
+      className,
+      size = "md",
+      variant = "ghost",
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      trailing,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const baseId = useId();
+    const [uncontrolled, setUncontrolled] = useState<string | undefined>(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolled;
+
+    const tabsRef = useRef<Map<string, HTMLDivElement>>(new Map());
+
+    const registerTab = useCallback((v: string, node: HTMLDivElement | null) => {
+      if (node) tabsRef.current.set(v, node);
+      else tabsRef.current.delete(v);
+    }, []);
+
+    const setValue = useCallback(
+      (v: string) => {
+        if (!isControlled) setUncontrolled(v);
+        onValueChange?.(v);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const orderedTabs = useCallback(() => {
+      const nodes = Array.from(tabsRef.current.values());
+      nodes.sort((a, b) =>
+        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+      );
+      return nodes;
+    }, []);
+
+    const focusNext = useCallback(
+      (currentValue: string, dir: 1 | -1) => {
+        const nodes = orderedTabs();
+        if (nodes.length === 0) return;
+        const idx = nodes.findIndex((n) => n.dataset.value === currentValue);
+        if (idx === -1) return;
+        const nextIdx = (idx + dir + nodes.length) % nodes.length;
+        nodes[nextIdx].focus();
+      },
+      [orderedTabs],
+    );
+
+    const focusEdge = useCallback(
+      (edge: "first" | "last") => {
+        const nodes = orderedTabs();
+        if (nodes.length === 0) return;
+        (edge === "first" ? nodes[0] : nodes[nodes.length - 1]).focus();
+      },
+      [orderedTabs],
+    );
+
+    const ctx = useMemo<TabStripContextValue>(
+      () => ({ value, setValue, size, variant, baseId, registerTab, focusNext, focusEdge }),
+      [value, setValue, size, variant, baseId, registerTab, focusNext, focusEdge],
+    );
+
+    const rootClass = [
+      styles.root,
+      styles[`size_${size}`],
+      styles[`variant_${variant}`],
+      className ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <TabStripContext.Provider value={ctx}>
+        <div
+          ref={ref}
+          className={rootClass}
+          data-size={size}
+          data-variant={variant}
+          role="tablist"
+          aria-orientation="horizontal"
+          {...rest}
+        >
+          <div className={styles.track}>{children}</div>
+          {trailing && <div className={styles.trailing}>{trailing}</div>}
+        </div>
+      </TabStripContext.Provider>
+    );
+  },
+);
+Root.displayName = "TabStrip";
+
+// ────────────────────────────────────────────────────────────
+// Tab
+// ────────────────────────────────────────────────────────────
+
+export interface TabStripTabProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onClick"> {
+  value: string;
+  /** 탭 왼쪽에 들어가는 요소. Icon, 사진(<img>), svg 뭐든 ReactNode. */
+  leadingIcon?: ReactNode;
+  /** true면 hover 시 x 버튼 노출, 클릭 시 onClose 호출. */
+  closable?: boolean;
+  onClose?: () => void;
+  /** 탭 라벨 클릭. */
+  onSelect?: () => void;
+  /** 닫기 버튼 aria-label (기본 "탭 닫기"). */
+  closeLabel?: string;
+  disabled?: boolean;
+}
+
+const Tab = forwardRef<HTMLDivElement, TabStripTabProps>(
+  (
+    {
+      className,
+      value,
+      leadingIcon,
+      closable,
+      onClose,
+      onSelect,
+      closeLabel = "탭 닫기",
+      disabled,
+      children,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) => {
+    const {
+      value: selected,
+      setValue,
+      size,
+      baseId,
+      registerTab,
+      focusNext,
+      focusEdge,
+    } = useTabStripContext("TabStrip.Tab");
+    const isActive = selected === value;
+
+    const setRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        registerTab(value, node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as { current: HTMLDivElement | null }).current = node;
+      },
+      [ref, registerTab, value],
+    );
+
+    const handleClick = () => {
+      if (disabled) return;
+      setValue(value);
+      onSelect?.();
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext(value, 1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          focusNext(value, -1);
+          break;
+        case "Home":
+          e.preventDefault();
+          focusEdge("first");
+          break;
+        case "End":
+          e.preventDefault();
+          focusEdge("last");
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          handleClick();
+          break;
+      }
+    };
+
+    const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      onClose?.();
+    };
+
+    // Marquee loop (전광판) — 라벨 "본체 + gap + 복제본" 중 본체 폭만큼 왼쪽으로
+    // 흐르면 복제본이 자연스럽게 translateX(0) 자리에 와있어 끊김 없이 반복된다.
+    // 측정: 본체(.labelPrimary)의 offsetWidth + gap(--space-6 ≈ 24px, 토큰 반영).
+    // 짧은 라벨은 overflow 안 되므로 isOverflow=false → animation 미적용.
+    //
+    // 속도: 라벨 폭에 비례해 ~60px/sec. 긴 라벨도 꼴보기 좋게.
+    const labelOuterRef = useRef<HTMLSpanElement | null>(null);
+    const labelPrimaryRef = useRef<HTMLSpanElement | null>(null);
+    const [marquee, setMarquee] = useState<{
+      shift: number;
+      duration: string;
+      overflow: boolean;
+    } | null>(null);
+
+    useEffect(() => {
+      const outer = labelOuterRef.current;
+      const primary = labelPrimaryRef.current;
+      if (!outer || !primary) return;
+      const measure = () => {
+        const primaryWidth = primary.offsetWidth;
+        const outerWidth = outer.clientWidth;
+        const overflow = primaryWidth > outerWidth + 1; // 서브픽셀 여유
+        if (!overflow) {
+          setMarquee({ shift: 0, duration: "0ms", overflow: false });
+          return;
+        }
+        // gap은 CSS .labelDupe의 padding-inline-start(--space-6)와 맞춤 (≈24px).
+        const gap = 24;
+        const shift = primaryWidth + gap;
+        // 60px/sec 흐름. 1초당 60px 이동.
+        const duration = Math.round((shift / 60) * 1000);
+        setMarquee({ shift, duration: `${duration}ms`, overflow: true });
+      };
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(outer);
+      ro.observe(primary);
+      return () => ro.disconnect();
+    }, [children]);
+
+    const tabStyle: CSSProperties | undefined = marquee?.overflow
+      ? ({
+          "--marquee-shift": `${marquee.shift}`,
+          "--marquee-duration": marquee.duration,
+          "--marquee-delay": "500ms",
+        } as CSSProperties)
+      : undefined;
+
+    const cls = [styles.tab, className ?? ""].filter(Boolean).join(" ");
+
+    return (
+      <div
+        ref={setRef}
+        className={cls}
+        role="tab"
+        id={`${baseId}-tab-${value}`}
+        aria-selected={isActive}
+        aria-disabled={disabled || undefined}
+        tabIndex={isActive ? 0 : -1}
+        data-value={value}
+        data-state={isActive ? "active" : "inactive"}
+        data-disabled={disabled ? "true" : undefined}
+        data-closable={closable ? "true" : undefined}
+        data-overflow={marquee?.overflow ? "true" : undefined}
+        style={tabStyle}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      >
+        {leadingIcon && (
+          <span className={styles.leading} aria-hidden>
+            {sizedIcon(leadingIcon, ICON_SIZE[size])}
+          </span>
+        )}
+        <span ref={labelOuterRef} className={styles.label}>
+          <span className={styles.labelInner}>
+            <span ref={labelPrimaryRef} className={styles.labelPrimary}>
+              {children}
+            </span>
+            <span className={styles.labelDupe} aria-hidden>
+              {children}
+            </span>
+          </span>
+        </span>
+        <span className={styles.labelFade} aria-hidden />
+        {closable && (
+          <>
+            <span className={styles.closeFade} aria-hidden />
+            <button
+              type="button"
+              tabIndex={-1}
+              className={styles.closeButton}
+              aria-label={closeLabel}
+              onClick={handleCloseClick}
+            >
+              <Icon name="x" size={CLOSE_ICON_SIZE[size]} />
+            </button>
+          </>
+        )}
+      </div>
+    );
+  },
+);
+Tab.displayName = "TabStrip.Tab";
+
+// ────────────────────────────────────────────────────────────
+
+type TabStripCompound = typeof Root & {
+  Tab: typeof Tab;
+};
+
+const TabStrip = Root as TabStripCompound;
+TabStrip.Tab = Tab;
+
+export { TabStrip };

package/assets/components/TabStrip/index.ts

@@ -0,0 +1,7 @@
+export { TabStrip } from "./TabStrip";
+export type {
+  TabStripProps,
+  TabStripTabProps,
+  TabStripSize,
+  TabStripVariant,
+} from "./TabStrip";

package/assets/components/Toolbar/Toolbar.module.css

@@ -7,18 +7,36 @@
      기본 24 → 28. 아이콘 자체 크기는 그대로 두고 주변 여유만 확장해서
      클릭 영역이 넉넉해지도록. */
 .root {
-  --iconbtn-h-md: var(--control-h-sm);
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  min-height: var(--control-h-md);
   width: max-content;
-  padding-block: var(--space-1_5);
-  padding-inline: var(--space-2);
   color: var(--fg);
   box-sizing: border-box;
 }
 
+/* Size ──────────────────────────────────────────────
+   두 사이즈 모두 아이콘 18(16 + 2)로 통일하고 히트박스만 다르게 — 간격을 좁혀서
+   md가 커 보이고 sm이 작아 보이는 체감 문제 완화.
+   md — 히트 30 · 아이콘 18 (32·20보다 한 스텝 다운)
+   sm — 히트 28 · 아이콘 18 (히트만 2 작음)
+   scale에 없는 중간값(30·28·18)은 토큰 조합으로 합성 — Density 축에 비례. */
+.root[data-size="md"] {
+  --iconbtn-h-md: calc(var(--control-h-sm) - var(--space-0_5));
+  --icon-size-sm: calc(var(--icon-size-md) - var(--space-0_5));
+  min-height: calc(var(--control-h-md) - var(--space-0_5));
+  padding-block: var(--space-1_5);
+  padding-inline: var(--space-2);
+}
+.root[data-size="sm"] {
+  --iconbtn-h-md: calc(var(--control-h-xs) + var(--space-1));
+  --icon-size-sm: calc(var(--icon-size-md) - var(--space-0_5));
+  min-height: calc(var(--control-h-xs) + var(--space-1));
+  padding-block: var(--space-1);
+  padding-inline: var(--space-1_5);
+  gap: var(--space-0_5);
+}
+
 /* stretch=true : 콘텐츠 폭이 아니라 부모 폭을 꽉 채움 (attached의 기본값). */
 .root[data-stretch] {
   display: flex;
@@ -28,14 +46,23 @@
 /* Variants ──────────────────────────────────────────── */
 
 /* floating — 떠 있는 알약.
-   bg-elevated + 얕은 그림자 + 큰 radius. 콘텐츠 위에 살짝 떠 있는 느낌.
-   무게감은 hairline이 쥐고, 그림자는 분리감만 더한다. */
+   bg-elevated + 얕은 그림자 + Shape 축에 또렷하게 반응하는 radius.
+   무게감은 hairline이 쥐고, 그림자는 분리감만 더한다.
+   Shape 축별 체감 폭을 크게 — crisp는 각지게(sm 4px), standard는 중간(lg 12px),
+   soft는 알약(full). scale 하나로 묶으면 axis별 체감이 평평해지는 자리라
+   data-shape 선택자로 Toolbar만 로컬 override. */
 .root[data-variant="floating"] {
   background: var(--bg-elevated, var(--bg));
   border: var(--hairline) solid var(--border);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
 }
+[data-shape="crisp"] .root[data-variant="floating"] {
+  border-radius: var(--radius-sm);
+}
+[data-shape="soft"] .root[data-variant="floating"] {
+  border-radius: var(--radius-2xl);
+}
 
 /* attached — 콘텐츠에 붙은 bar.
    자체 bg 없음 + 하단 hairline만. 에디터 상단·문서 chrome. */

package/assets/components/Toolbar/Toolbar.tsx

@@ -6,20 +6,25 @@ import { cn } from "../_cn";
 import styles from "./Toolbar.module.css";
 
 /* Root ─────────────────────────────────────────────────
-   툴바 — IconButton 중심의 action 줄. 단일 size.
+   툴바 — IconButton 중심의 action 줄.
    variant:
      - floating  : 떠 있는 알약(bg-elevated + shadow-md + radius-xl)
-     - attached  : 콘텐츠에 붙은 bar (transparent + 하단 hairline) */
+     - attached  : 콘텐츠에 붙은 bar (transparent + 하단 hairline)
+   size:
+     - md(기본)  : 히트박스 32 · 아이콘 20 — 표준 자리
+     - sm        : 히트박스 24 · 아이콘 16 — 밀도 승부처(사이드바 바닥·인라인 bar) */
 export type ToolbarVariant = "floating" | "attached";
+export type ToolbarSize = "sm" | "md";
 
 export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
   variant?: ToolbarVariant;
+  size?: ToolbarSize;
   /** 가로 꽉 채울지(attached에 어울림) vs 콘텐츠 폭(floating). 기본은 variant로 자동 결정. */
   stretch?: boolean;
 }
 
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarRoot(
-  { variant = "floating", stretch, className, children, role = "toolbar", ...rest },
+  { variant = "floating", size = "md", stretch, className, children, role = "toolbar", ...rest },
   ref,
 ) {
   const resolvedStretch = stretch ?? variant === "attached";
@@ -29,6 +34,7 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarProps>(function ToolbarRoo
       role={role}
       className={cn(styles.root, className)}
       data-variant={variant}
+      data-size={size}
       data-stretch={resolvedStretch || undefined}
       {...rest}
     >

package/assets/components/Toolbar/index.ts

@@ -1,2 +1,2 @@
 export { Toolbar } from "./Toolbar";
-export type { ToolbarProps, ToolbarVariant } from "./Toolbar";
+export type { ToolbarProps, ToolbarVariant, ToolbarSize } from "./Toolbar";

package/assets/components/_data.ts

@@ -546,6 +546,7 @@ export const componentSlugs: Record<string, string> = {
   "Date Picker": "input/date-picker",
   "Time Picker": "input/time-picker",
   Tabs: "nav/tabs",
+  "Tab Strip": "nav/tab-strip",
   Breadcrumb: "nav/breadcrumb",
   Sidebar: "nav/sidebar",
   "Sidebar Split": "nav/sidebar-split",
@@ -632,7 +633,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "nav",
     title: "Navigation",
     items: [
-      "App Frame", "Page Header", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
+      "App Frame", "Page Header", "Tabs", "Tab Strip", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
       "Stepper",
     ],
   },

package/assets/components/index.ts

@@ -70,6 +70,7 @@ export * from "./TableRow";
 export * from "./TableRowEdit";
 export * from "./TableRowSelect";
 export * from "./Tabs";
+export * from "./TabStrip";
 export * from "./Textarea";
 export * from "./TimePicker";
 export * from "./Toast";

package/assets/prompts/ASSEMBLY.md

@@ -214,6 +214,7 @@ page (gap: space-10)                             ← 그룹 사이 넓게
 조립할 때 사람·AI 모두 자주 미끄러지는 자리. 안티패턴 메모리와 쌍을 이룬다.
 
 - **"페이지 맨 위에 Tabs만"** — Tabs 위에 PageHeader(h1/breadcrumb)가 먼저 와야 한다 ([antipattern-tabs-without-title])
+- **"브라우저·노션처럼 다중 탭" 요청에 Tabs로 조립** — Tabs는 섹션 전환 전용(한 화면 안 뷰 토글). "열려있는 문서 N개 중 하나 선택"(각 탭 = 라우트, 추가/닫기)은 전부 [[components/tab-strip]]. Chrome·Figma·VSCode·노션 탭 UI 요청은 즉시 TabStrip으로. 수제 조립·Tabs 변형 금지
 - **"워크스페이스 스위처를 수제 Button+Dropdown으로 조립"** — 전용 IdentityButton + DropdownMenu 사용 ([antipattern-workspace-switcher])
 - **"Topbar leading에만 요소 몰림"** — leading/center/trailing 3구역 균형. leading·trailing 짝 필수 ([[components/topbar]])
 - **"Sidebar 2단 쉘을 SidebarSplit으로"** — 바깥 flex로 Rail+Sidebar 직접 조립 ([feedback-sidebar-scroll])

package/assets/prompts/components/chat-input.md

@@ -16,11 +16,18 @@ AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(t
 - 첨부·인용·메시지 상태를 ChatInput 안에서 관리하지 않는다 — controlled 전용.
 - 모델 선택 메뉴를 내부에서 열지 않는다 — 현재는 라벨 클릭 시 다음 모델로 토글만. 실제 ContextMenu는 소비처에서 조립 (ChatInput의 책임 과잉 방지).
 - SingleLine에서 모델 라벨을 끝까지 노출하지 않는다 — 10자 넘으면 자동 compact(아이콘만).
-- Send 버튼 색을 변경하지 않는다 — 비활성=`bg-subtle` / 활성·스트리밍=`primary`로 고정.
+- Send 버튼 색을 임의로 override하지 않는다 — 톤 조정은 `sendVariant` prop(`solid` | `ghost` | `soft`)으로만. 각 variant 안에서 비활성→활성 색 전환은 고정 규약.
 - `flush`를 떠있는 자리(페이지 중앙·오버레이)에 쓰지 않는다 — 외곽선 없이 공중에 뜨면 영역이 흐려짐. 반드시 shell 바닥·바텀바처럼 바깥 경계가 이미 존재하는 자리에만.
 
+### Send 버튼 variant
+- `sendVariant="solid"` *(기본)* — 비활성=`bg-subtle` / 활성·스트리밍=`primary` + 흰 아이콘. ChatGPT·Claude 류 떠있는 네모 버튼.
+- `sendVariant="ghost"` — 배경 투명, 아이콘만. 비활성=`fg-disabled` / 활성=`fg-strong`. hover에서만 `bg-subtle` 살짝. 흰 캔버스에 녹아드는 깔끔한 자리(가벼운 질문창·검색봉·툴 안쪽 작은 입력).
+- `sendVariant="soft"` — 늘 `bg-subtle` 배경, 활성이어도 색 강조 없이 fg만 진해짐. 조용한 자리(사이드바 바닥 flush, 패널 바텀바)에서 send 존재감을 낮추고 싶을 때.
+- `sendIcon="arrow-up"` *(기본)* — 전송 뉘앙스, 범용. `"return"`(↵) — 폼 submit·키보드 힌트. `"paper-plane"` — 메신저 느낌(iMessage/카톡 류). 스트리밍 중엔 아이콘 선택과 무관하게 자동으로 square로 교체.
+- 셋 다 활성 상태의 **아이콘 색 규약**은 고정 — ghost·soft는 fg-strong, solid만 흰색. 임의로 primary 색 아이콘 넣지 않는다.
+
 ### Fallback
-shape 애매하면 `multi`. variant 애매하면 `framed`. maxRows 애매하면 `8`.
+shape 애매하면 `multi`. variant 애매하면 `framed`. sendVariant 애매하면 `solid`. sendIcon 애매하면 `arrow-up`. maxRows 애매하면 `8`.
 
 ### 관련
 - [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-item]] / [[components/quotation-bar]] — 조립 요소
@@ -51,6 +58,9 @@ shape 애매하면 `multi`. variant 애매하면 `framed`. maxRows 애매하면
   selectedModel={string}
   onSelectModel={(id) => void}
 
+  sendVariant="solid | ghost | soft"   // default: solid
+  sendIcon="arrow-up | return | paper-plane"  // default: arrow-up
+
   placeholder="Ask me anything…"
   disabled={boolean}
   maxRows={number}                     // multi 전용, default 8