@nextclaw/ui 0.14.4 → 0.15.0

package/src/features/chat/features/conversation/hooks/use-session-conversation-controller.ts

@@ -1,4 +1,13 @@
-import { useCallback, useMemo } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+} from 'react';
 import { buildNcpRequestEnvelope } from '@nextclaw/ncp-react';
 import type { NcpAgentSendEnvelope, NcpMessage, NcpRunHandle } from '@nextclaw/ncp';
 
@@ -9,6 +18,10 @@ import type { SessionConversationInputSnapshot } from './use-session-conversatio
 import type { useSessionConversationInputQuery } from './use-session-conversation-input-query';
 
 type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInputQuery>;
+type ComposerDraftSnapshot = Pick<
+  SessionConversationInputSnapshot,
+  'text' | 'nodes' | 'selectedSkills' | 'skillRecords' | 'attachments'
+>;
 
 type SessionConversationAgent = {
   readonly isHydrating: boolean;
@@ -20,10 +33,22 @@ type SessionConversationAgent = {
       readonly sessionId?: string | null;
     } | null;
   };
-  readonly send: (envelope: NcpAgentSendEnvelope) => Promise<NcpRunHandle | null>;
+  readonly send: (
+    envelope: NcpAgentSendEnvelope,
+  ) => Promise<NcpRunHandle | null>;
   readonly abort: () => Promise<void>;
 };
 
+export type SessionConversationQueuedInput = {
+  readonly id: string;
+  readonly preview: string;
+};
+
+type QueuedInputDraft = SessionConversationQueuedInput & {
+  readonly composerSnapshot: ComposerDraftSnapshot;
+  readonly metadata: Record<string, unknown>;
+};
+
 export type SessionConversationMaterializationContext = {
   readonly kind: 'child';
   readonly parentSessionKey: string;
@@ -40,10 +65,49 @@ type UseSessionConversationControllerParams = {
   readonly sessionKey: string | null;
   readonly onSessionMaterialized?: (sessionKey: string) => void;
   readonly resetComposer: () => void;
-  readonly restoreComposer: (snapshot: Pick<
-    SessionConversationInputSnapshot,
-    'text' | 'nodes' | 'selectedSkills' | 'skillRecords' | 'attachments'
-  >) => void;
+  readonly restoreComposer: (snapshot: ComposerDraftSnapshot) => void;
+  readonly setSendError: (message: string | null) => void;
+};
+
+type BuildQueuedInputDraftParams = {
+  readonly agentIsSending: boolean;
+  readonly inputSnapshot: SessionConversationInputSnapshot;
+  readonly inputQuery: SessionConversationInputQuery;
+  readonly isRuntimeBlocked: boolean;
+  readonly materializationContext?: SessionConversationMaterializationContext | null;
+  readonly selectedAgentId: string;
+  readonly sessionKey: string | null;
+};
+
+type SendEnvelope = (
+  envelope: NcpAgentSendEnvelope,
+) => Promise<NcpRunHandle | null>;
+
+type SendQueuedDraft = (
+  draft: QueuedInputDraft,
+) => Promise<NcpRunHandle | null>;
+
+type UseQueuedDraftAutoSendParams = {
+  readonly agentIsRunning: boolean;
+  readonly agentIsSending: boolean;
+  readonly queuedDrafts: readonly QueuedInputDraft[];
+  readonly sendQueuedDraft: SendQueuedDraft;
+  readonly setQueuedDrafts: Dispatch<SetStateAction<QueuedInputDraft[]>>;
+  readonly setSendError: (message: string | null) => void;
+};
+
+type StartQueuedDraftAutoSendParams = {
+  readonly autoSendingQueuedDraftIdRef: MutableRefObject<string | null>;
+  readonly draft: QueuedInputDraft;
+  readonly sendQueuedDraft: SendQueuedDraft;
+  readonly setQueuedDrafts: Dispatch<SetStateAction<QueuedInputDraft[]>>;
+  readonly setSendError: (message: string | null) => void;
+};
+
+type UseQueuedDraftActionsParams = {
+  readonly queuedDrafts: readonly QueuedInputDraft[];
+  readonly restoreComposer: (snapshot: ComposerDraftSnapshot) => void;
+  readonly setQueuedDrafts: Dispatch<SetStateAction<QueuedInputDraft[]>>;
   readonly setSendError: (message: string | null) => void;
 };
 
@@ -55,6 +119,206 @@ const resolveModelForSend = (value: string | null | undefined): string | undefin
   return trimmed || undefined;
 };
 
+function buildQueuedInputPreview(snapshot: Pick<
+  SessionConversationInputSnapshot,
+  'attachments' | 'text'
+>): string {
+  const compactText = snapshot.text.replace(/\s+/g, ' ').trim();
+  if (compactText) {
+    return compactText;
+  }
+  return snapshot.attachments.map((attachment) => attachment.name).filter(Boolean).join(', ');
+}
+
+function buildInputAvailabilitySnapshot(inputQuery: SessionConversationInputQuery) {
+  return {
+    isProviderStateResolved: inputQuery.isProviderStateResolved,
+    modelOptions: inputQuery.modelOptions,
+    sessionTypeUnavailable: inputQuery.sessionTypeState.sessionTypeUnavailable,
+  };
+}
+
+function buildQueuedInputDraft(params: BuildQueuedInputDraftParams): QueuedInputDraft | null {
+  const {
+    agentIsSending,
+    inputQuery,
+    inputSnapshot,
+    isRuntimeBlocked,
+    materializationContext,
+    selectedAgentId,
+    sessionKey,
+  } = params;
+  const currentParts = deriveNcpMessagePartsFromComposer(
+    [...inputSnapshot.nodes],
+    inputSnapshot.attachments,
+  );
+  if (
+    isNcpChatSendDisabled({
+      snapshot: buildInputAvailabilitySnapshot(inputQuery),
+      hasSendableDraft: hasSendableMessagePart(currentParts),
+      isRuntimeBlocked,
+    }) ||
+    agentIsSending
+  ) {
+    return null;
+  }
+  const composerSnapshot: ComposerDraftSnapshot = {
+    text: inputSnapshot.text,
+    nodes: [...inputSnapshot.nodes],
+    selectedSkills: [...inputSnapshot.selectedSkills],
+    skillRecords: [...inputSnapshot.skillRecords],
+    attachments: [...inputSnapshot.attachments],
+  };
+  const metadata = buildChatRunMetadata({
+    agentId: materializationContext ? undefined : selectedAgentId,
+    model: materializationContext
+      ? resolveModelForSend(inputSnapshot.selectedModel)
+      : resolveModelForSend(
+          inputSnapshot.selectedModel ??
+          inputQuery.fallbackPreferredModel ??
+          inputQuery.defaultModel,
+        ),
+    thinkingLevel: materializationContext
+      ? inputSnapshot.selectedThinkingLevel ?? undefined
+      : inputSnapshot.selectedThinkingLevel ?? inputQuery.fallbackPreferredThinking ?? undefined,
+    sessionType: materializationContext
+      ? undefined
+      : inputQuery.sessionTypeState.selectedSessionType,
+    projectRoot: materializationContext
+      ? inputSnapshot.pendingProjectRoot
+      : sessionKey
+        ? inputQuery.selectedSession?.projectRoot ?? null
+        : inputSnapshot.pendingProjectRoot,
+    requestedSkills: [...inputSnapshot.selectedSkills],
+    composerNodes: [...inputSnapshot.nodes],
+    sessionMaterialization: materializationContext
+      ? {
+          kind: materializationContext.kind,
+          parentSessionId: materializationContext.parentSessionKey,
+          inheritContext: materializationContext.inheritContext,
+        }
+      : null,
+  });
+  return {
+    composerSnapshot,
+    id: `queued-input-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`,
+    metadata,
+    preview: buildQueuedInputPreview(composerSnapshot),
+  };
+}
+
+function buildQueuedDraftEnvelope(
+  draft: QueuedInputDraft,
+  sessionKey: string | null,
+): NcpAgentSendEnvelope | null {
+  return buildNcpRequestEnvelope({
+    sessionId: sessionKey ?? undefined,
+    text: draft.composerSnapshot.text.trim(),
+    attachments: [...draft.composerSnapshot.attachments],
+    parts: deriveNcpMessagePartsFromComposer(
+      [...draft.composerSnapshot.nodes],
+      draft.composerSnapshot.attachments,
+    ),
+    metadata: draft.metadata,
+  });
+}
+
+function startQueuedDraftAutoSend(params: StartQueuedDraftAutoSendParams): void {
+  const {
+    autoSendingQueuedDraftIdRef,
+    draft,
+    sendQueuedDraft,
+    setQueuedDrafts,
+    setSendError,
+  } = params;
+  autoSendingQueuedDraftIdRef.current = draft.id;
+  setQueuedDrafts((current) => current[0]?.id === draft.id ? current.slice(1) : current);
+  setSendError(null);
+  void sendQueuedDraft(draft)
+    .catch((error) => {
+      setQueuedDrafts((current) => [draft, ...current]);
+      const message = error instanceof Error ? error.message : String(error);
+      setSendError(message);
+    })
+    .finally(() => {
+      autoSendingQueuedDraftIdRef.current = null;
+    });
+}
+
+function useQueuedDraftAutoSend(params: UseQueuedDraftAutoSendParams) {
+  const {
+    agentIsRunning,
+    agentIsSending,
+    queuedDrafts,
+    sendQueuedDraft,
+    setQueuedDrafts,
+    setSendError,
+  } = params;
+  const autoSendingQueuedDraftIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (
+      agentIsRunning ||
+      agentIsSending ||
+      autoSendingQueuedDraftIdRef.current ||
+      queuedDrafts.length === 0
+    ) {
+      return;
+    }
+    startQueuedDraftAutoSend({
+      autoSendingQueuedDraftIdRef,
+      draft: queuedDrafts[0],
+      sendQueuedDraft,
+      setQueuedDrafts,
+      setSendError,
+    });
+  }, [
+    agentIsRunning,
+    agentIsSending,
+    queuedDrafts,
+    sendQueuedDraft,
+    setQueuedDrafts,
+    setSendError,
+  ]);
+}
+
+function useQueuedDraftActions(params: UseQueuedDraftActionsParams) {
+  const {
+    queuedDrafts,
+    restoreComposer,
+    setQueuedDrafts,
+    setSendError,
+  } = params;
+
+  const editQueuedInput = useCallback((id: string) => {
+    const draft = queuedDrafts.find((item) => item.id === id);
+    if (!draft) {
+      return;
+    }
+    setQueuedDrafts((current) => current.filter((item) => item.id !== id));
+    restoreComposer(draft.composerSnapshot);
+    setSendError(null);
+  }, [
+    queuedDrafts,
+    restoreComposer,
+    setQueuedDrafts,
+    setSendError,
+  ]);
+
+  const deleteQueuedInput = useCallback((id: string) => {
+    setQueuedDrafts((current) => current.filter((item) => item.id !== id));
+    setSendError(null);
+  }, [
+    setQueuedDrafts,
+    setSendError,
+  ]);
+
+  return {
+    deleteQueuedInput,
+    editQueuedInput,
+  };
+}
+
 export function useSessionConversationController(params: UseSessionConversationControllerParams) {
   const {
     agent,
@@ -75,117 +339,115 @@ export function useSessionConversationController(params: UseSessionConversationC
   );
   const hasSendableDraft = hasSendableMessagePart(parts);
   const isSending = agent.isSending || agent.isRunning;
-  const sendDisabled = isNcpChatSendDisabled({
-    snapshot: {
-      isProviderStateResolved: inputQuery.isProviderStateResolved,
-      modelOptions: inputQuery.modelOptions,
-      sessionTypeUnavailable: inputQuery.sessionTypeState.sessionTypeUnavailable,
-    },
+  const baseSendDisabled = isNcpChatSendDisabled({
+    snapshot: buildInputAvailabilitySnapshot(inputQuery),
     hasSendableDraft,
     isRuntimeBlocked,
-  }) || isSending;
-  const send = useCallback(async () => {
-    const currentParts = deriveNcpMessagePartsFromComposer(
-      [...inputSnapshot.nodes],
-      inputSnapshot.attachments,
-    );
-    if (
-      isNcpChatSendDisabled({
-        snapshot: {
-          isProviderStateResolved: inputQuery.isProviderStateResolved,
-          modelOptions: inputQuery.modelOptions,
-          sessionTypeUnavailable: inputQuery.sessionTypeState.sessionTypeUnavailable,
-        },
-        hasSendableDraft: hasSendableMessagePart(currentParts),
-        isRuntimeBlocked,
-      }) ||
-      isSending
-    ) {
-      return;
-    }
-    const composerSnapshot = {
-      text: inputSnapshot.text,
-      nodes: inputSnapshot.nodes,
-      selectedSkills: inputSnapshot.selectedSkills,
-      skillRecords: inputSnapshot.skillRecords,
-      attachments: inputSnapshot.attachments,
-    };
-    const metadata = buildChatRunMetadata({
-      agentId: materializationContext ? undefined : selectedAgentId,
-      model: materializationContext
-        ? resolveModelForSend(inputSnapshot.selectedModel)
-        : resolveModelForSend(inputSnapshot.selectedModel ?? inputQuery.fallbackPreferredModel ?? inputQuery.defaultModel),
-      thinkingLevel: materializationContext
-        ? inputSnapshot.selectedThinkingLevel ?? undefined
-        : inputSnapshot.selectedThinkingLevel ?? inputQuery.fallbackPreferredThinking ?? undefined,
-      sessionType: materializationContext
-        ? undefined
-        : inputQuery.sessionTypeState.selectedSessionType,
-      projectRoot: materializationContext
-        ? inputSnapshot.pendingProjectRoot
-        : sessionKey
-          ? inputQuery.selectedSession?.projectRoot ?? null
-          : inputSnapshot.pendingProjectRoot,
-      requestedSkills: [...inputSnapshot.selectedSkills],
-      composerNodes: [...inputSnapshot.nodes],
-      sessionMaterialization: materializationContext
-        ? {
-            kind: materializationContext.kind,
-            parentSessionId: materializationContext.parentSessionKey,
-            inheritContext: materializationContext.inheritContext,
-          }
-        : null,
-    });
-    const envelope = buildNcpRequestEnvelope({
-      sessionId: sessionKey ?? undefined,
-      text: inputSnapshot.text.trim(),
-      attachments: [...inputSnapshot.attachments],
-      parts: currentParts,
-      metadata,
+  });
+  const sendDisabled = baseSendDisabled || agent.isSending;
+  const [queuedDrafts, setQueuedDrafts] = useState<QueuedInputDraft[]>([]);
+
+  const buildDraftSubmission = useCallback((): QueuedInputDraft | null => {
+    return buildQueuedInputDraft({
+      agentIsSending: agent.isSending,
+      inputSnapshot,
+      inputQuery,
+      isRuntimeBlocked,
+      materializationContext,
+      selectedAgentId,
+      sessionKey,
     });
+  }, [
+    agent.isSending,
+    inputQuery,
+    inputSnapshot,
+    isRuntimeBlocked,
+    materializationContext,
+    selectedAgentId,
+    sessionKey,
+  ]);
+
+  const sendEnvelope = useCallback<SendEnvelope>(async (envelope) => {
+    const handle = await agent.send(envelope);
+    const materializedSessionKey =
+      handle?.sessionId?.trim() ||
+      agent.snapshot.activeRun?.sessionId?.trim() ||
+      null;
+    if (!sessionKey && materializedSessionKey) {
+      onSessionMaterialized?.(materializedSessionKey);
+    }
+    return handle;
+  }, [
+    agent,
+    onSessionMaterialized,
+    sessionKey,
+  ]);
+
+  const sendQueuedDraft = useCallback<SendQueuedDraft>(async (draft) => {
+    const envelope = buildQueuedDraftEnvelope(draft, sessionKey);
     if (!envelope) {
+      return null;
+    }
+    return sendEnvelope(envelope);
+  }, [
+    sendEnvelope,
+    sessionKey,
+  ]);
+
+  const send = useCallback(async () => {
+    const draft = buildDraftSubmission();
+    if (!draft) {
       return;
     }
     resetComposer();
     setSendError(null);
+    if (agent.isRunning) {
+      setQueuedDrafts((current) => [...current, draft]);
+      return;
+    }
     try {
-      const handle = await agent.send(envelope);
-      const materializedSessionKey =
-        handle?.sessionId?.trim() ||
-        agent.snapshot.activeRun?.sessionId?.trim() ||
-        null;
-      if (!sessionKey && materializedSessionKey) {
-        onSessionMaterialized?.(materializedSessionKey);
-      }
+      await sendQueuedDraft(draft);
     } catch (error) {
-      restoreComposer(composerSnapshot);
+      restoreComposer(draft.composerSnapshot);
       const message = error instanceof Error ? error.message : String(error);
       setSendError(message);
       throw error;
     }
   }, [
-    agent,
-    inputQuery,
-    inputSnapshot,
-    isRuntimeBlocked,
-    isSending,
-    materializationContext,
-    onSessionMaterialized,
+    agent.isRunning,
+    buildDraftSubmission,
     resetComposer,
     restoreComposer,
-    selectedAgentId,
-    sessionKey,
+    sendQueuedDraft,
     setSendError,
   ]);
 
+  const queuedDraftActions = useQueuedDraftActions({
+    queuedDrafts,
+    restoreComposer,
+    setQueuedDrafts,
+    setSendError,
+  });
+
+  useQueuedDraftAutoSend({
+    agentIsRunning: agent.isRunning,
+    agentIsSending: agent.isSending,
+    queuedDrafts,
+    sendQueuedDraft,
+    setQueuedDrafts,
+    setSendError,
+  });
+
   const stop = useCallback(async () => {
     await agent.abort();
   }, [agent]);
 
   return {
     canStopGeneration: agent.isRunning,
+    ...queuedDraftActions,
     hasSendableDraft,
     isSending,
+    queuedInputs: queuedDrafts.map(({ id, preview }) => ({ id, preview })),
     send,
     sendDisabled,
     stop,

package/src/features/chat/features/input/hooks/__tests__/use-chat-input-surface-state.test.tsx

@@ -1,13 +1,17 @@
 import { act, renderHook } from '@testing-library/react';
-import { expect, it, vi } from 'vitest';
+import { beforeEach, expect, it, vi } from 'vitest';
 import { useChatInputSurfaceState } from '@/features/chat/features/input/hooks/use-chat-input-surface-state';
 
-vi.mock('@/features/panel-apps', () => ({
-  usePanelApps: () => ({
+const usePanelAppsMock = vi.hoisted(() =>
+  vi.fn(() => ({
     data: { entries: [] },
     isFetching: false,
     isLoading: false,
-  }),
+  })),
+);
+
+vi.mock('@/features/panel-apps', () => ({
+  usePanelApps: usePanelAppsMock,
 }));
 
 function createHookParams() {
@@ -23,12 +27,17 @@ function createHookParams() {
       },
     },
     language: 'zh' as const,
+    onSelectPanelApp: vi.fn(),
     onSelectSkill: vi.fn(),
     recentSkillValues: [],
     skillRecords: [],
   };
 }
 
+beforeEach(() => {
+  usePanelAppsMock.mockClear();
+});
+
 it('keeps equivalent input surface trigger updates from rerendering the composer owner', () => {
   let renderCount = 0;
   const trigger = {
@@ -54,3 +63,19 @@ it('keeps equivalent input surface trigger updates from rerendering the composer
   act(() => result.current.setInputSurfaceTrigger({ ...trigger, end: 3, query: 'xx' }));
   expect(renderCount).toBe(3);
 });
+
+it('loads panel apps for slash trigger panel actions', () => {
+  const { result } = renderHook(() => useChatInputSurfaceState(createHookParams()));
+
+  act(() =>
+    result.current.setInputSurfaceTrigger({
+      end: 5,
+      key: 'slash',
+      marker: '/',
+      query: 'task',
+      start: 0,
+    }),
+  );
+
+  expect(usePanelAppsMock).toHaveBeenLastCalledWith({ enabled: true });
+});

package/src/features/chat/features/input/hooks/use-chat-input-surface-state.ts

@@ -1,11 +1,15 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import {
+  CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC,
   resolveChatInputSurfaceState,
   type ChatInputSurfaceTrigger,
 } from '@nextclaw/agent-chat-ui';
 import { usePanelApps } from '@/features/panel-apps';
 import { t, type I18nLanguage } from '@/shared/lib/i18n';
-import { createPanelAppReferenceInputSurfacePlugin, PANEL_APP_REFERENCE_TRIGGER_SPEC } from '@/features/chat/features/input/input-surface-plugins/panel-app-reference-plugin.utils';
+import {
+  createPanelAppReferenceInputSurfacePlugin,
+  PANEL_APP_REFERENCE_TRIGGER_SPEC,
+} from '@/features/chat/features/input/input-surface-plugins/panel-app-reference-plugin.utils';
 import {
   createSlashCommandInputSurfacePlugin,
   type ChatSlashCommandDescriptor,
@@ -22,6 +26,7 @@ export function useChatInputSurfaceState(params: {
     >;
   };
   language: I18nLanguage;
+  onSelectPanelApp: (appId: string) => void;
   onSelectSkill: (skillRef: string) => void;
   recentSkillValues: readonly string[];
   skillRecords: readonly ChatSkillRecord[];
@@ -30,6 +35,7 @@ export function useChatInputSurfaceState(params: {
     isSkillsLoading,
     itemTexts,
     language,
+    onSelectPanelApp,
     onSelectSkill,
     recentSkillValues,
     skillRecords,
@@ -43,13 +49,24 @@ export function useChatInputSurfaceState(params: {
     inputSurfaceTriggerSignatureRef.current = nextSignature;
     setInputSurfaceTriggerState(nextTrigger);
   }, []);
-  const panelApps = usePanelApps({ enabled: inputSurfaceTrigger?.key === PANEL_APP_REFERENCE_TRIGGER_SPEC.key });
+  const shouldLoadPanelApps =
+    inputSurfaceTrigger?.key === PANEL_APP_REFERENCE_TRIGGER_SPEC.key ||
+    inputSurfaceTrigger?.key === CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC.key;
+  const panelApps = usePanelApps({ enabled: shouldLoadPanelApps });
 
   const inputSurfacePlugins = useMemo(
     () => [
       createSlashCommandInputSurfacePlugin({
         commands,
-        itemTexts: itemTexts.slashTexts,
+        itemTexts: {
+          panelAppTexts: {
+            appIdLabel: t('chatPanelAppReferenceAppId', language),
+            fileLabel: t('chatPanelAppReferenceFile', language),
+            noDescriptionLabel: t('chatPanelAppReferenceNoDescription', language),
+            subtitle: t('chatPanelAppReferenceType', language),
+          },
+          skillTexts: itemTexts.slashTexts,
+        },
         menuTexts: {
           loadingLabel: t('chatSlashLoading', language),
           sectionLabel: t('chatSlashSection', language),
@@ -61,9 +78,16 @@ export function useChatInputSurfaceState(params: {
           commandHintLabel: t('chatSlashCommandHint', language),
           commandSectionLabel: t('chatSlashSectionCommands', language),
           commandSubtitle: t('chatSlashTypeCommand', language),
+          filterAllLabel: t('chatSlashFilterAll', language),
+          filterCommandsLabel: t('chatSlashFilterCommands', language),
+          filterPanelAppsLabel: t('chatSlashFilterPanelApps', language),
+          filterSkillsLabel: t('chatSlashFilterSkills', language),
+          panelAppHintLabel: t('chatSlashPanelAppHint', language),
+          panelAppSectionLabel: t('chatPanelAppReferenceSection', language),
           skillHintLabel: t('chatSlashSkillHint', language),
           skillSectionLabel: t('chatSlashSectionSkills', language)
         },
+        onSelectPanelApp,
         onSelectSkill
       }),
       createPanelAppReferenceInputSurfacePlugin({
@@ -86,6 +110,7 @@ export function useChatInputSurfaceState(params: {
       commands,
       itemTexts.slashTexts,
       language,
+      onSelectPanelApp,
       onSelectSkill
     ]
   );