@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/types/composer.d.ts

@@ -0,0 +1,116 @@
+import type { LucideIcon } from "lucide-react";
+import type { Agent } from "./agent";
+import type { QueuedPrompt } from "./conversation";
+export type SlashCommandKind = "insert" | "action";
+export type SlashCommandSource = "builtin" | "skill" | "custom";
+export interface SlashCommand {
+    id: string;
+    label: string;
+    description: string;
+    trigger: string;
+    kind: SlashCommandKind;
+    icon: LucideIcon;
+    source?: SlashCommandSource;
+    insert?: string;
+}
+export interface SlashCommandContext {
+    streaming: boolean;
+    hasDraft: boolean;
+    wiredActions: readonly string[];
+}
+export interface SlashPickPlan {
+    start: number;
+    end: number;
+    insert: string;
+}
+export type ComposerTrigger = "@" | "/";
+export interface TriggerToken {
+    trigger: ComposerTrigger;
+    start: number;
+    query: string;
+}
+export interface PaletteFileEntry {
+    path: string;
+    entryKind: "file" | "dir";
+}
+export type PaletteItem = {
+    kind: "all";
+} | {
+    kind: "agent";
+    agent: Agent;
+} | {
+    kind: "command";
+    command: SlashCommand;
+} | ({
+    kind: "file";
+} & PaletteFileEntry);
+export type PaletteKeyAction = "move-next" | "move-prev" | "accept" | "close" | "newline";
+export interface PaletteSource {
+    members: Agent[];
+    commands: readonly SlashCommand[];
+    files?: readonly PaletteFileEntry[];
+}
+export interface PickedFile {
+    readonly name: string;
+    readonly size: number;
+    readonly type: string;
+}
+export interface AttachmentRejection {
+    name: string;
+    reason: string;
+}
+export interface IncomingPlan<T extends PickedFile = PickedFile> {
+    images: T[];
+    videos: T[];
+    texts: T[];
+    rejected: AttachmentRejection[];
+}
+export type SubmitDecision = "send" | "enqueue" | "reject-full";
+export type EnqueueOutcome = "queued" | "rejected-full" | "not-streaming";
+export interface ComposerModelOption {
+    id: string;
+    label: string;
+    hint?: string;
+    badge?: string;
+    badgeTone?: "neutral" | "warn" | "accent" | "danger";
+    multiplier?: string;
+    group?: string;
+}
+export interface ComposerModelSwitch {
+    value: string | null;
+    options: ComposerModelOption[];
+    onPick: (model: string | null) => void;
+    onConfigureCustom?: () => void;
+}
+export interface PermissionModeSwitch {
+    value: "ask" | "auto" | "yolo";
+    onChange: (mode: "ask" | "auto" | "yolo") => void;
+}
+export interface ComposerSubmitApi {
+    pick: (item: PaletteItem) => void;
+    submitOrQueue: () => void;
+}
+export interface QueuedPromptsApi {
+    items: QueuedPrompt[];
+    full: boolean;
+    enqueue: (text: string, attachments?: import("./message").Attachment[]) => EnqueueOutcome;
+    remove: (id: string) => void;
+    moveUp: (id: string) => void;
+    moveDown: (id: string) => void;
+    edit: (id: string) => string | null;
+    sendNow: (id: string) => void;
+}
+export interface ComposerPaletteLike {
+    open: boolean;
+    token: TriggerToken | null;
+    items: PaletteItem[];
+    index: number;
+    selectedAgent: {
+        name: string;
+    } | null;
+    sync: (field: HTMLTextAreaElement, next: string) => void;
+    move: (delta: number) => void;
+    escape: () => void;
+    close: () => void;
+}
+export type { QueuedPrompt };

package/lib/types/composer.js

@@ -0,0 +1 @@
+export {};

package/lib/types/conversation.d.ts

@@ -0,0 +1,54 @@
+export type ConversationId = string;
+export type AgentId = string;
+export type ConversationKind = "direct" | "group";
+export type ConversationStatus = "idle" | "loading" | "streaming" | "error";
+export interface Conversation {
+    id: ConversationId;
+    kind: ConversationKind;
+    title: string;
+    memberIds: AgentId[];
+    autoRespond: boolean;
+    unread: number;
+    pinned: boolean;
+    muted: boolean;
+    lastPreview: string;
+    timeLabel: string;
+}
+export interface PendingPermission {
+    permissionId: string;
+    tool: string;
+    reason: string;
+    detail?: string;
+    risk?: "low" | "medium" | "high";
+    requestId?: string;
+    agentId?: string;
+}
+export interface PendingAskQuestion {
+    id: string;
+    prompt: string;
+    choices: string[];
+    default: string | null;
+    multiSelect?: boolean;
+}
+export interface PendingAsk {
+    turnId: string;
+    callId: string;
+    prompt: string;
+    choices: string[];
+    default: string | null;
+    agent: string | null;
+    questions: PendingAskQuestion[];
+}
+export type PermissionMode = "ask" | "auto" | "yolo";
+export interface QueuedPrompt {
+    id: string;
+    text: string;
+    attachments?: import("./message").Attachment[];
+}
+export interface SessionSearchHit {
+    session_id: string;
+    title?: string;
+    snippet?: string;
+    timestamp?: string;
+    score?: number;
+}

package/lib/types/conversation.js

@@ -0,0 +1 @@
+export {};

package/lib/types/display.d.ts

@@ -0,0 +1,25 @@
+export type RadiusMode = "rounded" | "square";
+export type DensityMode = "comfortable" | "compact";
+export type MessageStyleMode = "seamless" | "bubble";
+export type BlockVisibilityKey = "reasoning" | "tool" | "sandbox" | "memory" | "compaction" | "usage" | "attachments" | "todo";
+export type BlockVisibility = Record<BlockVisibilityKey, boolean>;
+export type WidthPreset = "narrow" | "standard" | "wide" | "full";
+export declare const WIDTH_PRESET_VALUES: Record<WidthPreset, number>;
+export declare const WIDTH_MIN = 520;
+export declare const WIDTH_MAX = 1600;
+export declare function presetWidth(preset: WidthPreset, viewport?: number): number;
+export interface DisplayConfig {
+    radius: RadiusMode;
+    density: DensityMode;
+    messageStyle: MessageStyleMode;
+    streamWidth: WidthPreset;
+    composerWidth: WidthPreset;
+    streamWidthPx: number | null;
+    composerWidthPx: number | null;
+    hidden: BlockVisibility;
+}
+export declare const DEFAULT_DISPLAY_CONFIG: DisplayConfig;
+export declare const BLOCK_VISIBILITY_ORDER: {
+    key: BlockVisibilityKey;
+    label: string;
+}[];

package/lib/types/display.js

@@ -0,0 +1,40 @@
+export const WIDTH_PRESET_VALUES = {
+    narrow: 560,
+    standard: 720,
+    wide: 880,
+    full: 0,
+};
+export const WIDTH_MIN = 520;
+export const WIDTH_MAX = 1600;
+export function presetWidth(preset, viewport = 1440) {
+    return preset === "full" ? viewport : WIDTH_PRESET_VALUES[preset];
+}
+export const DEFAULT_DISPLAY_CONFIG = {
+    radius: "rounded",
+    density: "comfortable",
+    messageStyle: "seamless",
+    streamWidth: "standard",
+    composerWidth: "standard",
+    streamWidthPx: null,
+    composerWidthPx: null,
+    hidden: {
+        reasoning: false,
+        tool: false,
+        sandbox: false,
+        memory: false,
+        compaction: false,
+        usage: false,
+        attachments: false,
+        todo: false,
+    },
+};
+export const BLOCK_VISIBILITY_ORDER = [
+    { key: "reasoning", label: "深度思考" },
+    { key: "tool", label: "工具调用" },
+    { key: "sandbox", label: "沙箱执行" },
+    { key: "memory", label: "记忆落库" },
+    { key: "compaction", label: "上下文压缩" },
+    { key: "usage", label: "上下文用量" },
+    { key: "attachments", label: "消息附件" },
+    { key: "todo", label: "任务清单" },
+];

package/lib/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./message";
+export * from "./conversation";
+export * from "./agent";
+export * from "./composer";
+export * from "./selection";
+export * from "./theme";
+export * from "./display";
+export * from "./callbacks";

package/lib/types/index.js

@@ -0,0 +1,8 @@
+export * from "./message";
+export * from "./conversation";
+export * from "./agent";
+export * from "./composer";
+export * from "./selection";
+export * from "./theme";
+export * from "./display";
+export * from "./callbacks";

package/lib/types/message.d.ts

@@ -0,0 +1,100 @@
+export type MessageRole = "user" | "assistant" | "system" | "tool";
+export type MessageState = "streaming" | "done" | "error";
+export type ToolCallState = "running" | "finished" | "error";
+export interface Attachment {
+    media_type: string;
+    data_base64: string;
+    filename?: string | null;
+}
+export interface ToolCall {
+    id: string;
+    name: string;
+    args?: unknown;
+}
+export interface ToolCallPart {
+    kind: "tool";
+    toolCallId?: string;
+    tool: string;
+    state: ToolCallState;
+    args?: unknown;
+    result?: string;
+}
+export interface SandboxPart {
+    kind: "sandbox";
+    title: string;
+    state: ToolCallState;
+    output: string;
+}
+export interface ReasoningPart {
+    kind: "reasoning";
+    text: string;
+    streaming: boolean;
+}
+export interface CompactionPart {
+    kind: "compact";
+    beforeTokens: number;
+    afterTokens: number;
+    reason: string;
+    requestId?: string;
+}
+export interface MemoryPart {
+    kind: "memory";
+    count: number;
+    excerpt: string;
+    requestId?: string;
+}
+export interface DisplayPart {
+    kind: "display";
+    view: string;
+    title?: string;
+    payload?: unknown;
+    requestId?: string;
+}
+export interface OutputPart {
+    kind: "output";
+    outputKind: "text" | "file" | "link" | "json";
+    label?: string;
+    value: string;
+    requestId?: string;
+}
+export type MessagePart = ToolCallPart | SandboxPart | ReasoningPart | CompactionPart | MemoryPart | DisplayPart | OutputPart;
+export interface ContextUsageStat {
+    input: number;
+    output: number;
+    window: number;
+    breakdown?: ContextUsageSegment[];
+    windowPresets?: ContextWindowPreset[];
+}
+export interface ContextUsageSegment {
+    label: string;
+    tokens: number;
+    color: string;
+}
+export interface ContextWindowPreset {
+    label: string;
+    window: number;
+}
+export interface ChatMessage {
+    id: string;
+    role: MessageRole;
+    sourceId?: string;
+    agentId?: string;
+    text: string;
+    toolCalls?: ToolCall[];
+    createdAt?: string;
+    mentions?: string[];
+    attachments?: Attachment[];
+    parts?: MessagePart[];
+    contextUsage?: ContextUsageStat;
+    state?: MessageState;
+    requestId?: string;
+    timeLabel: string;
+}
+export interface ExecEnvelope {
+    exit_code: number;
+    stdout: string;
+    stderr: string;
+    duration_ms?: number;
+    timed_out?: boolean;
+    truncated?: boolean;
+}

package/lib/types/message.js

@@ -0,0 +1 @@
+export {};

package/lib/types/selection.d.ts

@@ -0,0 +1,60 @@
+import type { ChatMessage } from "./message";
+export type SelectionActionId = "copy" | "addToConversation" | "followup" | "breakdown" | "favorite";
+export type SelectionScaffold = Exclude<SelectionActionId, "favorite" | "copy" | "addToConversation">;
+export interface SelectionActionSpec {
+    id: SelectionActionId;
+    label: string;
+}
+export interface SelectionFacts {
+    raw: string;
+    blocked: boolean;
+    bubbleRole: string | null;
+    agentId: string | null;
+}
+export type SelectionActionPayload = {
+    kind: "insert";
+    text: string;
+} | {
+    kind: "copy";
+    text: string;
+} | {
+    kind: "favorite";
+    agentId: string;
+    content: string;
+};
+export interface SelectionCapabilities {
+    copy: boolean;
+    remove: boolean;
+    reason: Partial<Record<"copy" | "remove", string>>;
+}
+export type MessageMenuItemId = "copy-text" | "quote" | "multi-select" | "copy-selection" | "trace" | "delete-message";
+export interface MessageMenuItem {
+    id: MessageMenuItemId | string;
+    label: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separatorBefore?: boolean;
+}
+export interface MessageMenuInput {
+    role: string;
+    text: string;
+    selection: string;
+    id?: string;
+}
+export interface RectLike {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface PopSize {
+    width: number;
+    height: number;
+}
+export interface PopPosition {
+    left: number;
+    top: number;
+}
+export type { ChatMessage };

package/lib/types/selection.js

@@ -0,0 +1 @@
+export {};

package/lib/types/theme.d.ts

@@ -0,0 +1,100 @@
+export type ThemeName = "dark" | "light" | "glass";
+export interface SemanticPalette {
+    appBg: string;
+    primary: string;
+    primaryForeground: string;
+    surface950: string;
+    surface900: string;
+    surface800: string;
+    surface700: string;
+    surface600: string;
+    surface500: string;
+    surfaceOverlay: string;
+    surfaceSheet: string;
+    text100: string;
+    text200: string;
+    text300: string;
+    text400: string;
+    text500: string;
+    text600: string;
+    text700: string;
+    border800: string;
+    border700: string;
+    border600: string;
+    border500: string;
+    accentPrimary: string;
+    accentPrimaryHover: string;
+    accentPrimaryLight: string;
+    accentPrimaryBorder: string;
+    accentSuccess: string;
+    accentWarning: string;
+    accentDanger: string;
+}
+export interface ControlScale {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+}
+export interface TypeScale {
+    micro: {
+        size: number;
+        lineHeight: number;
+    };
+    meta: {
+        size: number;
+        lineHeight: number;
+    };
+    body: {
+        size: number;
+        lineHeight: number;
+    };
+    label: {
+        size: number;
+        lineHeight: number;
+    };
+    title: {
+        size: number;
+        lineHeight: number;
+    };
+    heading: {
+        size: number;
+        lineHeight: number;
+    };
+}
+export interface GapScale {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    stream: number;
+    bubbleX: number;
+    bubbleY: number;
+}
+export interface RadiusScale {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    pill: string;
+}
+export interface ZIndexScale {
+    underCanvas: number;
+    sticky: number;
+    canvasOverlay: number;
+    panel: number;
+    tooltip: number;
+    modal: number;
+    top: number;
+}
+export interface DesignTokens {
+    theme: ThemeName;
+    palette: SemanticPalette;
+    control: ControlScale;
+    type: TypeScale;
+    gaps: GapScale;
+    radius: RadiusScale;
+    z: ZIndexScale;
+}

package/lib/types/theme.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/clipboard.d.ts

@@ -0,0 +1,4 @@
+export declare function writeClipboard(text: string): Promise<boolean>;
+export declare function readClipboard(): Promise<string | null>;
+export declare const CLIPBOARD_COPY_FAIL = "\u590D\u5236\u5931\u8D25\uFF1A\u65E0\u6CD5\u5199\u5165\u526A\u8D34\u677F\uFF0C\u8BF7\u6539\u7528 Ctrl+C";
+export declare const CLIPBOARD_READ_FAIL = "\u65E0\u6CD5\u8BFB\u53D6\u526A\u8D34\u677F\uFF1A\u8BF7\u6539\u7528 Ctrl+V \u7C98\u8D34";

package/lib/utils/clipboard.js

@@ -0,0 +1,41 @@
+export async function writeClipboard(text) {
+    try {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+            return true;
+        }
+        return legacyCopy(text);
+    }
+    catch {
+        return legacyCopy(text);
+    }
+}
+export async function readClipboard() {
+    try {
+        if (navigator.clipboard?.readText) {
+            return await navigator.clipboard.readText();
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+function legacyCopy(text) {
+    try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        const ok = document.execCommand("copy");
+        document.body.removeChild(ta);
+        return ok;
+    }
+    catch {
+        return false;
+    }
+}
+export const CLIPBOARD_COPY_FAIL = "复制失败：无法写入剪贴板，请改用 Ctrl+C";
+export const CLIPBOARD_READ_FAIL = "无法读取剪贴板：请改用 Ctrl+V 粘贴";

package/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/lib/utils/cn.js

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            "font-size": [
+                { text: ["micro", "meta", "body", "label", "title", "heading"] },
+            ],
+        },
+    },
+});
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { cn } from "./cn";
+export { writeClipboard, readClipboard, CLIPBOARD_COPY_FAIL, CLIPBOARD_READ_FAIL, } from "./clipboard";
+export { loadJSON, saveJSON, removeKey, LS_KEYS } from "./storage";

package/lib/utils/index.js

@@ -0,0 +1,3 @@
+export { cn } from "./cn";
+export { writeClipboard, readClipboard, CLIPBOARD_COPY_FAIL, CLIPBOARD_READ_FAIL, } from "./clipboard";
+export { loadJSON, saveJSON, removeKey, LS_KEYS } from "./storage";

package/lib/utils/storage.d.ts

@@ -0,0 +1,11 @@
+export declare function loadJSON<T>(key: string, fallback: T): T;
+export declare function saveJSON(key: string, value: unknown): void;
+export declare function removeKey(key: string): void;
+export declare const LS_KEYS: {
+    readonly inputHistory: "chat-ui.composer.input-history";
+    readonly queuedPrompts: "chat-ui.queued-prompts";
+    readonly composerHeight: "chat-ui.composer-height";
+    readonly paletteRecency: "chat-ui.palette-recency";
+    readonly displayConfig: "chat-ui.display-config";
+    readonly theme: "chat-ui.theme";
+};

package/lib/utils/storage.js

@@ -0,0 +1,48 @@
+const memory = new Map();
+function available() {
+    try {
+        const k = "__chat_ui_probe__";
+        window.localStorage.setItem(k, "1");
+        window.localStorage.removeItem(k);
+        return window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+export function loadJSON(key, fallback) {
+    try {
+        const s = available()?.getItem(key) ?? memory.get(key) ?? null;
+        if (s == null)
+            return fallback;
+        return JSON.parse(s);
+    }
+    catch {
+        return fallback;
+    }
+}
+export function saveJSON(key, value) {
+    const s = JSON.stringify(value);
+    try {
+        available()?.setItem(key, s);
+    }
+    catch {
+        memory.set(key, s);
+    }
+}
+export function removeKey(key) {
+    try {
+        available()?.removeItem(key);
+    }
+    catch {
+        memory.delete(key);
+    }
+}
+export const LS_KEYS = {
+    inputHistory: "chat-ui.composer.input-history",
+    queuedPrompts: "chat-ui.queued-prompts",
+    composerHeight: "chat-ui.composer-height",
+    paletteRecency: "chat-ui.palette-recency",
+    displayConfig: "chat-ui.display-config",
+    theme: "chat-ui.theme",
+};