@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/ChatInput/ChatInput.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  type ChangeEvent,
+  type CSSProperties,
+  type FormEvent,
+  type KeyboardEvent,
+} from "react";
+import { Paperclip as PhPaperclip } from "@phosphor-icons/react";
+import { AttachmentChip } from "@/components/AttachmentChip";
+import { AttachmentThumb } from "@/components/AttachmentThumb";
+import { QuotationBar } from "@/components/QuotationBar";
+import { ModelSelector } from "./ModelSelector";
+import { SendButton } from "./SendButton";
+import styles from "./ChatInput.module.css";
+
+export type ChatInputShape = "multi" | "single";
+export type ChatInputRadius = "square" | "rounded" | "circular";
+
+/** 첨부 공용 타입 — ChatInput·Message 양쪽에서 재사용. */
+export interface ChatAttachmentImage {
+  id: string;
+  kind: "image";
+  src?: string; // 아직 로딩 중이면 생략
+  alt?: string;
+  loading?: boolean;
+}
+export interface ChatAttachmentFile {
+  id: string;
+  kind: "file";
+  filename: string;
+}
+export type ChatAttachment = ChatAttachmentImage | ChatAttachmentFile;
+
+export interface ChatInputModel {
+  id: string;
+  label: string;
+}
+
+export interface ChatInputProps {
+  shape?: ChatInputShape;
+  radius?: ChatInputRadius;
+
+  value: string;
+  onChange: (v: string) => void;
+
+  /** 전송 가능할 때 호출. onStop이 분기. */
+  onSend: () => void;
+  /** 스트리밍 중 send 자리에 stop. */
+  onStop?: () => void;
+  isStreaming?: boolean;
+
+  attachments?: ChatAttachment[];
+  onRemoveAttachment?: (id: string) => void;
+  onAttach?: (files: File[]) => void;
+
+  quotation?: { text: string; onRemove?: () => void };
+
+  /** 모델 선택 UI. 없거나 selectedModel 없으면 숨김. */
+  models?: ChatInputModel[];
+  selectedModel?: string;
+  onSelectModel?: (id: string) => void;
+
+  placeholder?: string;
+  disabled?: boolean;
+  /** multiLine일 때 textarea max rows. 넘으면 세로 스크롤. */
+  maxRows?: number;
+  /** 외부에서 wrapper에 추가 폭 지정하고 싶을 때. */
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** 10자 넘으면 ModelSelector compact — SingleLine 공간 압박 완화. */
+const SINGLE_COMPACT_THRESHOLD = 10;
+
+export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
+  function ChatInput(props, ref) {
+    const {
+      shape = "multi",
+      radius = "rounded",
+      value,
+      onChange,
+      onSend,
+      onStop,
+      isStreaming = false,
+      attachments = [],
+      onRemoveAttachment,
+      onAttach,
+      quotation,
+      models,
+      selectedModel,
+      onSelectModel,
+      placeholder = "Ask me anything…",
+      disabled = false,
+      maxRows = 8,
+      className,
+      style,
+    } = props;
+
+    const taRef = useRef<HTMLTextAreaElement>(null);
+    const fileRef = useRef<HTMLInputElement>(null);
+
+    const canSend = !disabled && (value.trim().length > 0 || attachments.length > 0);
+    const showStop = isStreaming && !!onStop;
+
+    /* autoResize for multi */
+    useLayoutEffect(() => {
+      if (shape !== "multi") return;
+      const el = taRef.current;
+      if (!el) return;
+      const cs = getComputedStyle(el);
+      const lh = parseFloat(cs.lineHeight);
+      const pt = parseFloat(cs.paddingTop);
+      const pb = parseFloat(cs.paddingBottom);
+      const chrome = pt + pb;
+      const maxH = lh * maxRows + chrome;
+      el.style.height = "auto";
+      const next = Math.min(el.scrollHeight, maxH);
+      el.style.height = `${next}px`;
+      el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+    }, [shape, value, maxRows]);
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+        if (e.key !== "Enter") return;
+        if (e.shiftKey) return; // multi: 줄바꿈 허용
+        if (shape === "multi" && e.nativeEvent.isComposing) return;
+        e.preventDefault();
+        if (showStop) {
+          onStop?.();
+        } else if (canSend) {
+          onSend();
+        }
+      },
+      [shape, canSend, showStop, onSend, onStop]
+    );
+
+    const handleSendClick = useCallback(() => {
+      if (showStop) onStop?.();
+      else if (canSend) onSend();
+    }, [showStop, canSend, onSend, onStop]);
+
+    const handleAttachClick = useCallback(() => {
+      fileRef.current?.click();
+    }, []);
+
+    const handleFileChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        const files = Array.from(e.target.files ?? []);
+        if (files.length > 0) onAttach?.(files);
+        // 같은 파일 다시 선택 가능하게
+        e.target.value = "";
+      },
+      [onAttach]
+    );
+
+    const hasAttachments = attachments.length > 0;
+    const modelLabel =
+      models && selectedModel
+        ? models.find((m) => m.id === selectedModel)?.label ?? selectedModel
+        : null;
+
+    /* SingleLine에서 입력이 10자 넘으면 모델 selector compact. */
+    const modelCompact =
+      shape === "single" && value.length > SINGLE_COMPACT_THRESHOLD;
+
+    const rootCls = [
+      styles.root,
+      styles[`shape-${shape}`],
+      styles[`radius-${radius}`],
+      disabled ? styles.disabled : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const AttachInput = (
+      <input
+        ref={fileRef}
+        type="file"
+        multiple
+        className={styles.hiddenFile}
+        onChange={handleFileChange}
+        aria-hidden
+        tabIndex={-1}
+      />
+    );
+
+    const AttachButton = (
+      <button
+        type="button"
+        className={styles.attachBtn}
+        onClick={handleAttachClick}
+        disabled={disabled || !onAttach}
+        aria-label="파일 첨부"
+      >
+        <PhPaperclip className={styles.attachIcon} weight="regular" />
+      </button>
+    );
+
+    const ModelAndSend = (
+      <div className={styles.actions}>
+        {modelLabel ? (
+          <ModelSelector
+            label={modelLabel}
+            compact={modelCompact}
+            onClick={() => {
+              if (!models || !onSelectModel) return;
+              // 간단 토글 — 다음 모델. 실제 메뉴는 소비처에서 ContextMenu로.
+              const idx = models.findIndex((m) => m.id === selectedModel);
+              const next = models[(idx + 1) % models.length];
+              onSelectModel(next.id);
+            }}
+            disabled={disabled}
+          />
+        ) : null}
+        <SendButton
+          active={canSend}
+          streaming={showStop}
+          disabled={disabled && !showStop}
+          onClick={handleSendClick}
+        />
+      </div>
+    );
+
+    const handleFormSubmit = (e: FormEvent) => {
+      e.preventDefault();
+      if (showStop) onStop?.();
+      else if (canSend) onSend();
+    };
+
+    return (
+      <div ref={ref} className={rootCls} style={style}>
+        {/* 첨부물 바 */}
+        {hasAttachments ? (
+          <div className={styles.attachments}>
+            {attachments.map((a) => (
+              <div
+                key={a.id}
+                className={styles.attachmentCell}
+                data-kind={a.kind}
+              >
+                {a.kind === "image" ? (
+                  <AttachmentThumb
+                    src={a.src}
+                    alt={a.alt}
+                    size="md"
+                    loading={a.loading}
+                    onRemove={
+                      onRemoveAttachment
+                        ? () => onRemoveAttachment(a.id)
+                        : undefined
+                    }
+                  />
+                ) : (
+                  <AttachmentChip
+                    filename={a.filename}
+                    onRemove={
+                      onRemoveAttachment
+                        ? () => onRemoveAttachment(a.id)
+                        : undefined
+                    }
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        ) : null}
+
+        {/* Quotation */}
+        {quotation ? (
+          <div className={styles.quotation}>
+            <QuotationBar text={quotation.text} onRemove={quotation.onRemove} />
+          </div>
+        ) : null}
+
+        <form className={styles.body} onSubmit={handleFormSubmit}>
+          {shape === "single" ? (
+            <>
+              {AttachButton}
+              <input
+                type="text"
+                className={styles.singleField}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-label={placeholder}
+              />
+              {ModelAndSend}
+            </>
+          ) : (
+            <div className={styles.multiStack}>
+              <textarea
+                ref={taRef}
+                className={styles.multiField}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                rows={1}
+                aria-label={placeholder}
+              />
+              <div className={styles.footer}>
+                {AttachButton}
+                {ModelAndSend}
+              </div>
+            </div>
+          )}
+        </form>
+
+        {AttachInput}
+      </div>
+    );
+  }
+);

package/assets/components/ChatInput/ModelSelector.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import type { MouseEvent } from "react";
+import {
+  Infinity as PhInfinity,
+  CaretDown as PhCaretDown,
+} from "@phosphor-icons/react";
+import styles from "./ChatInput.module.css";
+
+interface ModelSelectorProps {
+  label: string;
+  /** true면 라벨 숨기고 아이콘만 (SingleLine에서 공간 부족할 때). */
+  compact?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+}
+
+export function ModelSelector({
+  label,
+  compact = false,
+  onClick,
+  disabled,
+}: ModelSelectorProps) {
+  return (
+    <button
+      type="button"
+      className={styles.modelBtn}
+      data-compact={compact || undefined}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={compact ? `모델: ${label}` : undefined}
+    >
+      <PhInfinity className={styles.modelLead} weight="regular" aria-hidden />
+      {!compact ? <span className={styles.modelLabel}>{label}</span> : null}
+      {!compact ? (
+        <PhCaretDown className={styles.modelCaret} weight="bold" aria-hidden />
+      ) : null}
+    </button>
+  );
+}

package/assets/components/ChatInput/SendButton.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { MouseEvent } from "react";
+import {
+  ArrowUp as PhArrowUp,
+  Square as PhSquare,
+} from "@phosphor-icons/react";
+import styles from "./ChatInput.module.css";
+
+interface SendButtonProps {
+  /** 입력에 텍스트/첨부가 있어 send 가능한지. */
+  active: boolean;
+  /** 스트리밍 중 → stop 아이콘. */
+  streaming?: boolean;
+  disabled?: boolean;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function SendButton({
+  active,
+  streaming = false,
+  disabled,
+  onClick,
+}: SendButtonProps) {
+  return (
+    <button
+      type="button"
+      className={styles.sendBtn}
+      data-active={active || streaming || undefined}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={streaming ? "중지" : "보내기"}
+    >
+      {streaming ? (
+        <PhSquare className={styles.sendIcon} weight="fill" />
+      ) : (
+        <PhArrowUp className={styles.sendIcon} weight="bold" />
+      )}
+    </button>
+  );
+}

package/assets/components/ChatInput/index.ts

@@ -0,0 +1,10 @@
+export { ChatInput } from "./ChatInput";
+export type {
+  ChatInputProps,
+  ChatInputShape,
+  ChatInputRadius,
+  ChatInputModel,
+  ChatAttachment,
+  ChatAttachmentImage,
+  ChatAttachmentFile,
+} from "./ChatInput";

package/assets/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,66 @@
+/* Checkbox ─────────────────────────────────────────────────────
+   폼 · 필터에서 다중 선택을 표시하는 컨트롤.
+   시각 요소 = .indicator, 접근성 = 실제 <input type="checkbox"> (.visually-hidden).
+   FilterButton type="checkbox"도 indicator를 재사용한다. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+  color: var(--fg);
+  font-family: var(--label-font);
+  font-size: var(--label-md-size);
+  font-weight: var(--label-weight);
+  letter-spacing: var(--label-tracking);
+  line-height: var(--lh-tight);
+}
+.root[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Indicator — 단독 사용도 가능. FilterButton 안에서도 재사용. */
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--space-4);
+  height: var(--space-4);
+  border-radius: var(--radius-checkbox);
+  border: 1px solid var(--border-strong);
+  background: var(--bg);
+  color: transparent;
+  transition: var(--transition-colors), var(--transition-ring);
+}
+.indicator > svg {
+  width: 80%;
+  height: 80%;
+  display: block;
+}
+
+/* Focus — input이 포커스일 때 indicator에 ring */
+.input:focus-visible + .indicator {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+/* Hover — 보더만 selected-fg로 은은하게 물듦 (checked면 이미 채워져 있어 무시) */
+.root:hover:not([data-disabled="true"]) .input:not(:checked) + .indicator {
+  border-color: var(--selected-fg);
+}
+
+/* Checked — 배경/글자 반전. 색은 Accent 축에 따라 mono=fg, 나머지=primary */
+.input:checked + .indicator {
+  background: var(--selected-fg);
+  border-color: var(--selected-fg);
+  color: var(--bg);
+}
+
+/* Standalone indicator (FilterButton 내부 사용) — checked 상태를 data-*로 표현 */
+.indicator[data-checked="true"] {
+  background: var(--selected-fg);
+  border-color: var(--selected-fg);
+  color: var(--bg);
+}

package/assets/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+
+import { Icon } from "../Icon";
+import styles from "./Checkbox.module.css";
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+  children?: ReactNode;
+};
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, disabled, children, ...rest }, ref) => {
+    const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+
+    return (
+      <label className={rootClass} data-disabled={disabled ? "true" : "false"}>
+        <input
+          ref={ref}
+          type="checkbox"
+          className={`${styles.input} visually-hidden`}
+          disabled={disabled}
+          {...rest}
+        />
+        <span className={styles.indicator} aria-hidden>
+          <Icon name="check" family="lucide" />
+        </span>
+        {children != null && <span>{children}</span>}
+      </label>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/assets/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";

package/assets/components/Chip/Chip.module.css

@@ -0,0 +1,128 @@
+/* Chip ─────────────────────────────────────────────────────────
+   "선택된 값"을 시각화하는 라벨. 이메일 To 필드의 수신자, 검색창의 적용 필터,
+   Combobox의 multi-select 결과처럼 사용자가 골라 붙인 항목을 나타낸다.
+
+   Badge(장식·비인터랙션) / FilterButton(토글 선택) 과 시맨틱이 다름:
+   Chip은 "이미 적용된" 상태만 있고, 인터랙션은 오직 "제거".
+   그래서 root는 <span>, 제거 버튼만 <button>. */
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-family: var(--label-font);
+  font-weight: var(--label-weight);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+}
+
+/* Sizes ─────────────────────────────────────────────────────
+   Badge md와 FilterButton sm 사이의 스케일. "정보 라벨"이라 컨트롤 높이보다 낮음.
+   Shape 축이 radius를 스왑. */
+/* X 버튼이 있으면 오른쪽 padding을 한 단계 줄여 시각적 균형을 맞춘다.
+   X 자체가 아이콘 슬롯만큼의 여백 인상을 이미 만들기 때문. */
+.sm {
+  height: var(--space-5);                /* 20 */
+  padding-inline: var(--space-1_5);      /* 6 */
+  gap: var(--space-1);                   /* 4 */
+  font-size: var(--label-sm-size);
+  letter-spacing: var(--label-tracking);
+  border-radius: var(--radius-xs);
+}
+.sm:has(> .remove) {
+  padding-inline-end: var(--space-0_5);  /* 2 */
+}
+.md {
+  height: var(--space-6);                /* 24 */
+  padding-inline: var(--space-2);        /* 8 */
+  gap: var(--space-1);                   /* 4 */
+  font-size: var(--label-md-size);
+  letter-spacing: var(--label-tracking);
+  border-radius: var(--radius-xs);
+}
+.md:has(> .remove) {
+  padding-inline-end: var(--space-1);    /* 4 */
+}
+
+/* Variants ──────────────────────────────────────────────────
+   Badge와 톤 규칙 공유:
+   - soft:    표면은 --hover (무채색 밀도) + 텍스트 --fg.
+              Badge soft가 primary tint인 반면 Chip soft는 무채색.
+              "적용된 필터가 한 화면에 여러 개 나열"되는 상황에서
+              primary tint가 반복되면 시각적으로 시끄러워짐.
+   - outline: 배경 없음 + border. 흰 캔버스에 나열될 때 밀도 낮춤. */
+.soft {
+  background: var(--hover);
+  color: var(--fg);
+}
+.outline {
+  background: transparent;
+  color: var(--fg);
+  border-color: var(--border);
+}
+
+/* Left icon slot — FilterButton과 동일 방식 */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  opacity: 0.75;
+}
+.icon > svg {
+  display: block;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Remove button ─────────────────────────────────────────────
+   내부 <button>. Chip 전체를 button으로 만들지 않는 이유:
+   Combobox 등에서 Chip 본체는 popover 열기, X는 제거처럼 서로 다른 액션에
+   붙는 경우가 흔하고, 버블링으로 꼬임. */
+.remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  margin-inline-start: var(--space-0_5);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    background var(--duration-fast) var(--ease-out);
+}
+.remove:hover:not(:disabled) {
+  opacity: 1;
+  background: var(--hover);
+}
+.remove:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  opacity: 1;
+}
+.remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.remove > svg {
+  display: block;
+}
+
+/* Disabled ─────────────────────────────────────────────────
+   전체를 dim. 폼이 read-only이거나, chip 자체가 잠긴 상태. */
+.disabled {
+  opacity: 0.5;
+}