@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/domain/slash-commands.js

@@ -0,0 +1,142 @@
+import { Eraser, FileText, Languages, MessageSquarePlus, Play, Settings, Square, } from "lucide-react";
+export const BUILT_IN_SLASH_COMMANDS = [
+    {
+        id: "stop",
+        label: "停止生成",
+        description: "停止当前在飞回合",
+        trigger: "/stop",
+        kind: "action",
+        icon: Square,
+        source: "builtin",
+    },
+    {
+        id: "clear",
+        label: "清空输入",
+        description: "清空输入框草稿",
+        trigger: "/clear",
+        kind: "action",
+        icon: Eraser,
+        source: "builtin",
+    },
+    {
+        id: "new",
+        label: "新建会话",
+        description: "开启一段新对话",
+        trigger: "/new",
+        kind: "action",
+        icon: MessageSquarePlus,
+        source: "builtin",
+    },
+    {
+        id: "model",
+        label: "模型设置",
+        description: "打开资料面板切换模型",
+        trigger: "/model",
+        kind: "action",
+        icon: Settings,
+        source: "builtin",
+    },
+    {
+        id: "summarize",
+        label: "总结",
+        description: "总结下方内容，先给结论再列要点",
+        trigger: "/summary",
+        kind: "insert",
+        icon: FileText,
+        source: "builtin",
+        insert: "请总结以下内容，先给结论再列要点：\n",
+    },
+    {
+        id: "translate",
+        label: "翻译",
+        description: "翻译成中文并保留专有名词",
+        trigger: "/translate",
+        kind: "insert",
+        icon: Languages,
+        source: "builtin",
+        insert: "请把下面的内容翻译成中文，保留专有名词：\n",
+    },
+    {
+        id: "explain",
+        label: "解释",
+        description: "逐段解释并标注关键概念",
+        trigger: "/explain",
+        kind: "insert",
+        icon: Play,
+        source: "builtin",
+        insert: "请逐段解释下面的内容，并标注关键概念：\n",
+    },
+];
+export function filterSlashCommands(commands, query) {
+    const q = query.trim().toLowerCase();
+    if (q.length === 0)
+        return [...commands];
+    return commands.filter((c) => c.trigger.toLowerCase().includes(q) ||
+        c.id.toLowerCase().includes(q) ||
+        c.label.toLowerCase().includes(q) ||
+        c.description.toLowerCase().includes(q));
+}
+export function findSlashCommand(commands, id) {
+    return commands.find((c) => c.id === id);
+}
+export function mergeSlashCommands(builtin, ...extras) {
+    const seen = new Set();
+    const out = [];
+    for (const group of [builtin, ...extras]) {
+        for (const c of group) {
+            const key = `${c.source ?? "builtin"}:${c.id}`;
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            out.push(c);
+        }
+    }
+    return out;
+}
+export function expandCommandTemplate(template, args) {
+    if (template.includes("$ARGUMENTS")) {
+        return template.replaceAll("$ARGUMENTS", args);
+    }
+    return args.length > 0 ? `${template}${args}` : template;
+}
+export function expandSlashDraft(commands, draft) {
+    const trimmed = draft.trimStart();
+    if (!trimmed.startsWith("/"))
+        return null;
+    const firstSpace = trimmed.search(/\s/);
+    const token = firstSpace === -1 ? trimmed : trimmed.slice(0, firstSpace);
+    const rest = firstSpace === -1 ? "" : trimmed.slice(firstSpace + 1).trim();
+    const cmd = commands.find((c) => c.trigger === token);
+    if (!cmd || cmd.kind !== "insert" || !cmd.insert)
+        return null;
+    return expandCommandTemplate(cmd.insert, rest);
+}
+export function planSlashCommandPick(params) {
+    const { value, tokenStart, caret, trigger, template } = params;
+    const leading = value.slice(0, tokenStart);
+    if (leading.trim().length === 0) {
+        return {
+            start: tokenStart,
+            end: caret,
+            insert: `${trigger} `,
+        };
+    }
+    const args = value.slice(caret);
+    return {
+        start: tokenStart,
+        end: value.length,
+        insert: expandCommandTemplate(template, args.trim()),
+    };
+}
+export function slashCommandAvailable(command, ctx) {
+    if (command.kind === "insert")
+        return Boolean(command.insert);
+    switch (command.id) {
+        case "stop":
+            return ctx.streaming;
+        case "clear":
+            return ctx.hasDraft;
+        default:
+            return ctx.wiredActions.includes(command.id);
+    }
+}

package/lib/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useInputHistory, pushInputHistory, nextHistoryIndex, INPUT_HISTORY_LIMIT, type InputHistoryApi, type HistoryDirection, } from "./useInputHistory";
+export { useQueuedPrompts, decideSubmit, flushEdge, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, type QueuedPromptsApi, } from "./useQueuedPrompts";
+export { useComposerPalette, bumpPaletteItemUse, planPaletteSync, planEnterSkillLevel, planPaletteEscape, type ComposerPalette, } from "./useComposerPalette";
+export { useComposerSubmit, planMentionPick, planSkillTokenPick, type ComposerSubmitApi, type ComposerSubmitWiring, } from "./useComposerSubmit";
+export { useSelectionPop, selectionPopPosition, type SelectionPopState, } from "./useSelectionPop";
+export { usePendingAsk, isBatchAsk, askPlaceholder, ASK_SKIP_SENTINEL, mergePendingAsk, dropPendingAsk, batchAnswersOf, type PendingAskApi, } from "./usePendingAsk";
+export { usePendingPermissions, mergePendingById, type PendingPermissionsApi, } from "./usePendingPermissions";
+export { useStreamBridge } from "./useStreamBridge";

package/lib/hooks/index.js

@@ -0,0 +1,8 @@
+export { useInputHistory, pushInputHistory, nextHistoryIndex, INPUT_HISTORY_LIMIT, } from "./useInputHistory";
+export { useQueuedPrompts, decideSubmit, flushEdge, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, } from "./useQueuedPrompts";
+export { useComposerPalette, bumpPaletteItemUse, planPaletteSync, planEnterSkillLevel, planPaletteEscape, } from "./useComposerPalette";
+export { useComposerSubmit, planMentionPick, planSkillTokenPick, } from "./useComposerSubmit";
+export { useSelectionPop, selectionPopPosition, } from "./useSelectionPop";
+export { usePendingAsk, isBatchAsk, askPlaceholder, ASK_SKIP_SENTINEL, mergePendingAsk, dropPendingAsk, batchAnswersOf, } from "./usePendingAsk";
+export { usePendingPermissions, mergePendingById, } from "./usePendingPermissions";
+export { useStreamBridge } from "./useStreamBridge";

package/lib/hooks/useComposerPalette.d.ts

@@ -0,0 +1,35 @@
+import type { Agent } from "../types/agent";
+import type { ComposerTrigger, PaletteFileEntry, PaletteItem, SlashCommand, TriggerToken } from "../types/composer";
+interface PaletteState {
+    open: boolean;
+    token: TriggerToken | null;
+    index: number;
+    selectedAgent: Agent | null;
+    level1Token: TriggerToken | null;
+}
+export declare function planPaletteSync(prev: PaletteState, token: TriggerToken | null): PaletteState;
+export declare function planEnterSkillLevel(agent: Agent, caret: number, level1Token: TriggerToken): PaletteState;
+export declare function planPaletteEscape(prev: PaletteState): PaletteState;
+export interface ComposerPalette {
+    open: boolean;
+    trigger: ComposerTrigger | null;
+    token: TriggerToken | null;
+    items: PaletteItem[];
+    index: number;
+    selectedAgent: Agent | null;
+    sync: (field: HTMLTextAreaElement, next: string) => void;
+    move: (delta: number) => void;
+    enterSkillLevel: (agent: Agent, caret: number) => void;
+    escape: () => void;
+    close: () => void;
+}
+export declare function bumpPaletteItemUse(item: PaletteItem): void;
+export declare function useComposerPalette(params: {
+    members: Agent[];
+    streaming: boolean;
+    hasDraft: boolean;
+    wiredActions: readonly string[];
+    extraCommands?: readonly SlashCommand[];
+    files?: readonly PaletteFileEntry[];
+}): ComposerPalette;
+export {};

package/lib/hooks/useComposerPalette.js

@@ -0,0 +1,120 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import { buildAgentSkillItems, buildPaletteItems, detectTriggerToken, moveIndex, paletteRecencyId, rankByRecency, } from "../domain/composer-palette";
+import { BUILT_IN_SLASH_COMMANDS, mergeSlashCommands, slashCommandAvailable, } from "../domain/slash-commands";
+import { LS_KEYS, loadJSON, saveJSON } from "../utils/storage";
+const CLOSED = {
+    open: false,
+    token: null,
+    index: 0,
+    selectedAgent: null,
+    level1Token: null,
+};
+export function planPaletteSync(prev, token) {
+    if (prev.selectedAgent && token && token.trigger === "/") {
+        return { ...prev, token, index: 0 };
+    }
+    if (!token)
+        return prev.open ? CLOSED : prev;
+    return {
+        open: true,
+        token,
+        index: 0,
+        selectedAgent: null,
+        level1Token: null,
+    };
+}
+export function planEnterSkillLevel(agent, caret, level1Token) {
+    return {
+        open: true,
+        token: { trigger: "/", start: caret, query: "" },
+        index: 0,
+        selectedAgent: agent,
+        level1Token,
+    };
+}
+export function planPaletteEscape(prev) {
+    if (prev.selectedAgent && prev.level1Token) {
+        return {
+            open: true,
+            token: prev.level1Token,
+            index: 0,
+            selectedAgent: null,
+            level1Token: null,
+        };
+    }
+    return CLOSED;
+}
+function getPaletteRecencyIds() {
+    return loadJSON(LS_KEYS.paletteRecency, []);
+}
+export function bumpPaletteItemUse(item) {
+    try {
+        const id = paletteRecencyId(item);
+        const rest = getPaletteRecencyIds().filter((x) => x !== id);
+        saveJSON(LS_KEYS.paletteRecency, [id, ...rest].slice(0, 50));
+    }
+    catch {
+        return;
+    }
+}
+export function useComposerPalette(params) {
+    const { members, streaming, hasDraft, wiredActions, extraCommands, files } = params;
+    const [state, setState] = useState(CLOSED);
+    const commands = useMemo(() => {
+        const merged = mergeSlashCommands(BUILT_IN_SLASH_COMMANDS, extraCommands ?? []);
+        return merged.filter((c) => slashCommandAvailable(c, { streaming, hasDraft, wiredActions }));
+    }, [extraCommands, streaming, hasDraft, wiredActions]);
+    const skillCommands = useMemo(() => commands.filter((c) => c.source === "skill"), [commands]);
+    const items = useMemo(() => {
+        if (!state.token)
+            return [];
+        if (state.selectedAgent) {
+            return buildAgentSkillItems(state.selectedAgent, skillCommands, state.token.query);
+        }
+        const raw = buildPaletteItems(state.token, {
+            members,
+            commands,
+            files,
+        });
+        return rankByRecency(raw, getPaletteRecencyIds());
+    }, [state.token, state.selectedAgent, members, commands, skillCommands, files]);
+    const index = items.length === 0 ? 0 : Math.min(state.index, items.length - 1);
+    const open = state.open && items.length > 0;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const sync = useCallback((field, _next) => {
+        const caret = field.selectionStart ?? 0;
+        const token = detectTriggerToken(field.value, caret);
+        setState((prev) => planPaletteSync(prev, token));
+    }, []);
+    const move = useCallback((delta) => {
+        setState((prev) => {
+            const length = items.length;
+            return { ...prev, index: moveIndex(prev.index, delta, length) };
+        });
+    }, [items.length]);
+    const enterSkillLevel = useCallback((agent, caret) => {
+        setState((prev) => {
+            if (!prev.token)
+                return prev;
+            return planEnterSkillLevel(agent, caret, prev.token);
+        });
+    }, []);
+    const escape = useCallback(() => {
+        setState((prev) => planPaletteEscape(prev));
+    }, []);
+    const close = useCallback(() => setState(CLOSED), []);
+    return {
+        open,
+        trigger: state.token?.trigger ?? null,
+        token: state.token,
+        items,
+        index,
+        selectedAgent: state.selectedAgent,
+        sync,
+        move,
+        enterSkillLevel,
+        escape,
+        close,
+    };
+}

package/lib/hooks/useComposerSubmit.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from "react";
+import type { Attachment } from "../types/message";
+import type { ComposerSubmitApi, QueuedPromptsApi, SlashCommand } from "../types/composer";
+import type { ComposerPalette } from "./useComposerPalette";
+export type { ComposerSubmitApi };
+export interface ComposerSubmitWiring {
+    value: string;
+    onChange: (v: string) => void;
+    fieldRef: RefObject<HTMLTextAreaElement | null>;
+    palette: ComposerPalette;
+    streaming: boolean;
+    queued: QueuedPromptsApi;
+    sendWithAttachments?: (text: string, deliver: (text: string, attachments?: Attachment[]) => void) => void;
+    onSend: (text: string, attachments?: Attachment[]) => void;
+    onStop?: () => void;
+    onNotice?: (message: string) => void;
+    onNewConversation?: () => void;
+    onOpenProfile?: () => void;
+    slashExpand?: (draft: string) => string | null;
+    slashExtra?: readonly SlashCommand[];
+    skillCommands?: readonly SlashCommand[];
+}
+export declare function planMentionPick(value: string, tokenStart: number, caret: number, agentName: string): {
+    value: string;
+    caret: number;
+};
+export declare function planSkillTokenPick(value: string, tokenStart: number, caret: number, trigger: string): {
+    value: string;
+    caret: number;
+};
+export declare function useComposerSubmit(wiring: ComposerSubmitWiring): ComposerSubmitApi;

package/lib/hooks/useComposerSubmit.js

@@ -0,0 +1,135 @@
+import { useCallback } from "react";
+import { bumpPaletteItemUse } from "./useComposerPalette";
+import { buildAgentSkillItems } from "../domain/composer-palette";
+import { planSlashCommandPick } from "../domain/slash-commands";
+function insertAt(value, start, end, insert) {
+    return {
+        value: value.slice(0, start) + insert + value.slice(end),
+        caret: start + insert.length,
+    };
+}
+export function planMentionPick(value, tokenStart, caret, agentName) {
+    return insertAt(value, tokenStart, caret, `@${agentName} `);
+}
+export function planSkillTokenPick(value, tokenStart, caret, trigger) {
+    return insertAt(value, tokenStart, caret, `/${trigger} `);
+}
+export function useComposerSubmit(wiring) {
+    const { value, onChange, fieldRef, palette, streaming, queued, sendWithAttachments, onSend, onNotice, onNewConversation, onOpenProfile, slashExpand, } = wiring;
+    const setCaret = (pos) => {
+        requestAnimationFrame(() => {
+            const el = fieldRef.current;
+            if (!el)
+                return;
+            el.focus();
+            el.setSelectionRange(pos, pos);
+        });
+    };
+    const apply = (next) => {
+        onChange(next.value);
+        setCaret(next.caret);
+        palette.close();
+    };
+    const deliver = (text, attachments) => {
+        onSend(text, attachments);
+        palette.close();
+    };
+    const pick = useCallback((item) => {
+        const token = palette.token;
+        bumpPaletteItemUse(item);
+        const caret = fieldRef.current?.selectionStart ?? value.length;
+        if (item.kind === "command") {
+            const cmd = item.command;
+            if (palette.selectedAgent) {
+                apply(planSkillTokenPick(value, token?.start ?? caret, caret, cmd.trigger.replace(/^\//, "")));
+                return;
+            }
+            if (cmd.kind === "action") {
+                if (token) {
+                    onChange(value.slice(0, token.start) + value.slice(caret));
+                }
+                palette.close();
+                if (cmd.id === "stop")
+                    wiring.onStop?.();
+                if (cmd.id === "clear")
+                    onChange("");
+                if (cmd.id === "new")
+                    onNewConversation?.();
+                if (cmd.id === "model")
+                    onOpenProfile?.();
+                return;
+            }
+            if (token) {
+                const plan = planSlashCommandPick({
+                    value,
+                    tokenStart: token.start,
+                    caret,
+                    trigger: cmd.trigger,
+                    template: cmd.insert ?? "",
+                });
+                apply(insertAt(value, plan.start, plan.end, plan.insert));
+            }
+            return;
+        }
+        if (item.kind === "file") {
+            if (token)
+                apply(insertAt(value, token.start, caret, `${item.path} `));
+            return;
+        }
+        if (item.kind === "agent") {
+            if (!token)
+                return;
+            const next = planMentionPick(value, token.start, caret, item.agent.name);
+            onChange(next.value);
+            setCaret(next.caret);
+            const skills = buildAgentSkillItems(item.agent, wiring.skillCommands ?? [], "");
+            if (skills.length > 0) {
+                palette.enterSkillLevel(item.agent, next.caret);
+            }
+            else {
+                palette.close();
+            }
+            return;
+        }
+        if (token)
+            apply(insertAt(value, token.start, caret, "@所有人 "));
+    }, [value, palette, fieldRef, onChange, wiring.skillCommands]);
+    const submit = useCallback(() => {
+        const expanded = slashExpand?.(value) ?? value;
+        if (sendWithAttachments) {
+            sendWithAttachments(expanded, deliver);
+        }
+        else {
+            deliver(expanded);
+        }
+        onChange("");
+        palette.close();
+    }, [value, slashExpand, sendWithAttachments, onChange, palette]);
+    const submitOrQueue = useCallback(() => {
+        const text = value;
+        if (text.trim().length === 0 && !sendWithAttachments)
+            return;
+        if (!streaming) {
+            submit();
+            return;
+        }
+        const outcome = queued.enqueue(slashExpand?.(text) ?? text);
+        if (outcome === "queued" || outcome === "not-streaming") {
+            onChange("");
+            palette.close();
+            return;
+        }
+        onNotice?.("待发队列已满，请先处理");
+    }, [
+        value,
+        streaming,
+        submit,
+        queued,
+        slashExpand,
+        onChange,
+        palette,
+        onNotice,
+        sendWithAttachments,
+    ]);
+    return { pick, submitOrQueue };
+}

package/lib/hooks/useInputHistory.d.ts

@@ -0,0 +1,14 @@
+export declare const INPUT_HISTORY_LIMIT = 20;
+export type HistoryDirection = "up" | "down";
+export declare function pushInputHistory(history: readonly string[], entry: string): string[];
+export declare function nextHistoryIndex(current: number, direction: HistoryDirection, length: number): number;
+export interface InputHistoryApi {
+    items: readonly string[];
+    handleArrowUp: () => boolean;
+    handleArrowDown: () => boolean;
+    save: (entry: string) => void;
+}
+export declare function useInputHistory({ value, onChange, }: {
+    value: string;
+    onChange: (v: string) => void;
+}): InputHistoryApi;

package/lib/hooks/useInputHistory.js

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+import { LS_KEYS, loadJSON, saveJSON } from "../utils/storage";
+export const INPUT_HISTORY_LIMIT = 20;
+export function pushInputHistory(history, entry) {
+    const trimmed = entry.trim();
+    if (trimmed.length === 0)
+        return [...history];
+    const rest = history.filter((h) => h !== trimmed);
+    return [trimmed, ...rest].slice(0, INPUT_HISTORY_LIMIT);
+}
+export function nextHistoryIndex(current, direction, length) {
+    if (length === 0)
+        return -1;
+    if (direction === "up") {
+        return current < 0 ? 0 : Math.min(current, length - 1);
+    }
+    return current <= 0 ? -1 : current - 1;
+}
+export function useInputHistory({ value, onChange, }) {
+    const [history, setHistory] = useState(() => loadJSON(LS_KEYS.inputHistory, []));
+    const indexRef = useRef(-1);
+    const draftRef = useRef("");
+    useEffect(() => {
+        saveJSON(LS_KEYS.inputHistory, history);
+    }, [history]);
+    const handleArrowUp = () => {
+        if (indexRef.current < 0 && value.trim().length > 0)
+            return false;
+        const next = nextHistoryIndex(indexRef.current, "up", history.length);
+        if (next < 0)
+            return true;
+        if (indexRef.current < 0)
+            draftRef.current = value;
+        indexRef.current = next;
+        onChange(history[next]);
+        return true;
+    };
+    const handleArrowDown = () => {
+        if (indexRef.current < 0)
+            return false;
+        const next = nextHistoryIndex(indexRef.current, "down", history.length);
+        indexRef.current = next;
+        onChange(next < 0 ? draftRef.current : history[next]);
+        return true;
+    };
+    const save = (entry) => {
+        setHistory((prev) => pushInputHistory(prev, entry));
+        indexRef.current = -1;
+        draftRef.current = "";
+    };
+    return { items: history, handleArrowUp, handleArrowDown, save };
+}

package/lib/hooks/usePendingAsk.d.ts

@@ -0,0 +1,11 @@
+import type { PendingAsk } from "../types/conversation";
+export { ASK_SKIP_SENTINEL, isBatchAsk, askPlaceholder, mergePendingAsk, dropPendingAsk, firstPendingAsk, clampAskIndex, stashAnswer, batchAnswersOf, } from "../domain/ask";
+export interface PendingAskApi {
+    pending: PendingAsk | null;
+    queued: number;
+    push: (ask: PendingAsk) => void;
+    clearTurn: (turnId: string | null) => void;
+    respond: (callId: string, answer: string) => void;
+    skip: (callId: string) => void;
+}
+export declare function usePendingAsk(): PendingAskApi;

package/lib/hooks/usePendingAsk.js

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from "react";
+import { dropPendingAsk, firstPendingAsk, mergePendingAsk, ASK_SKIP_SENTINEL, } from "../domain/ask";
+import { getStreamBridge } from "../adapters/stream-bridge";
+export { ASK_SKIP_SENTINEL, isBatchAsk, askPlaceholder, mergePendingAsk, dropPendingAsk, firstPendingAsk, clampAskIndex, stashAnswer, batchAnswersOf, } from "../domain/ask";
+export function usePendingAsk() {
+    const [queue, setQueue] = useState([]);
+    const push = useCallback((ask) => {
+        setQueue((prev) => mergePendingAsk(prev, ask));
+    }, []);
+    const clearTurn = useCallback((turnId) => {
+        setQueue((prev) => turnId === null ? [] : prev.filter((a) => a.turnId !== turnId));
+    }, []);
+    const respond = useCallback((callId, answer) => {
+        setQueue((prev) => {
+            const ask = prev.find((a) => a.callId === callId);
+            if (ask) {
+                void getStreamBridge()?.respondAsk?.(ask.turnId, ask.callId, answer);
+            }
+            return dropPendingAsk(prev, callId);
+        });
+    }, []);
+    const skip = useCallback((callId) => {
+        respond(callId, ASK_SKIP_SENTINEL);
+    }, [respond]);
+    return useMemo(() => ({
+        pending: firstPendingAsk(queue),
+        queued: Math.max(0, queue.length - 1),
+        push,
+        clearTurn,
+        respond,
+        skip,
+    }), [queue, push, clearTurn, respond, skip]);
+}

package/lib/hooks/usePendingPermissions.d.ts

@@ -0,0 +1,10 @@
+import type { PendingPermission } from "../types/conversation";
+export declare function mergePendingById(prev: PendingPermission[], incoming: PendingPermission[]): PendingPermission[];
+export interface PendingPermissionsApi {
+    visible: PendingPermission[];
+    push: (permission: PendingPermission) => void;
+    decide: (permissionId: string) => void;
+    respond: (permissionId: string, approved: boolean, remembered: boolean) => void;
+    setActiveRequestIds: (ids: ReadonlySet<string>) => void;
+}
+export declare function usePendingPermissions(): PendingPermissionsApi;

package/lib/hooks/usePendingPermissions.js

@@ -0,0 +1,26 @@
+import { useCallback, useMemo, useState } from "react";
+import { getStreamBridge } from "../adapters/stream-bridge";
+export function mergePendingById(prev, incoming) {
+    const ids = new Set(prev.map((p) => p.permissionId));
+    return [...prev, ...incoming.filter((p) => !ids.has(p.permissionId))];
+}
+export function usePendingPermissions() {
+    const [all, setAll] = useState([]);
+    const [activeRequestIds, setActiveRequestIds] = useState(new Set());
+    const push = useCallback((permission) => {
+        setAll((prev) => mergePendingById(prev, [permission]));
+    }, []);
+    const decide = useCallback((permissionId) => {
+        setAll((prev) => prev.filter((p) => p.permissionId !== permissionId));
+    }, []);
+    const respond = useCallback((permissionId, approved, remembered) => {
+        setAll((prev) => {
+            const found = prev.find((p) => p.permissionId === permissionId);
+            void getStreamBridge()?.respondPermission?.(permissionId, approved, remembered);
+            void found;
+            return prev.filter((p) => p.permissionId !== permissionId);
+        });
+    }, []);
+    const visible = useMemo(() => all.filter((p) => !p.requestId || activeRequestIds.has(p.requestId)), [all, activeRequestIds]);
+    return { visible, push, decide, respond, setActiveRequestIds };
+}

package/lib/hooks/useQueuedPrompts.d.ts

@@ -0,0 +1,12 @@
+import type { Attachment } from "../types/message";
+import type { ConversationStatus } from "../types/conversation";
+import type { QueuedPromptsApi } from "../types/composer";
+export type { QueuedPromptsApi };
+export { decideSubmit, flushEdge, enqueuePrompt, removePrompt, movePrompt, takeHeadPrompt, prependPrompt, nextQueuedId, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, } from "../domain/queue";
+export declare function useQueuedPrompts(params: {
+    conversationId: string;
+    status: ConversationStatus;
+    onSend: (text: string, attachments?: Attachment[]) => void;
+    onStop?: () => void;
+    onNotice?: (message: string) => void;
+}): QueuedPromptsApi;