@nextclaw/ui 0.13.13 → 0.14.1-beta.0

package/src/features/chat/hooks/use-chat-input-bar-controller.test.tsx

@@ -1,152 +0,0 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { renderHook, act } from '@testing-library/react';
-import { useChatInputBarController } from '@/features/chat/hooks/use-chat-input-bar-controller';
-
-function createKeyEvent(
-  key: string,
-  overrides?: Partial<ReactKeyboardEvent<HTMLTextAreaElement>>
-): ReactKeyboardEvent<HTMLTextAreaElement> {
-  return {
-    key,
-    code: key === ' ' ? 'Space' : key,
-    shiftKey: false,
-    nativeEvent: {
-      isComposing: false
-    },
-    preventDefault: vi.fn(),
-    ...overrides
-  } as unknown as ReactKeyboardEvent<HTMLTextAreaElement>;
-}
-
-describe('useChatInputBarController', () => {
-  it('cycles slash items with arrow keys and selects the active item on enter', () => {
-    const onSelectSlashItem = vi.fn();
-    const { result } = renderHook(() =>
-      useChatInputBarController({
-        isSlashMode: true,
-        slashItems: [
-          { key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] },
-          { key: 'two', title: 'Two', subtitle: 'Skill', description: '', detailLines: [] }
-        ],
-        isSlashLoading: false,
-        onSelectSlashItem,
-        onSend: vi.fn(),
-        onStop: vi.fn(),
-        isSending: false,
-        canStopGeneration: false
-      })
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('ArrowDown'));
-    });
-    expect(result.current.activeSlashIndex).toBe(1);
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Enter'));
-    });
-    expect(onSelectSlashItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        key: 'two'
-      })
-    );
-  });
-
-  it('dismisses the slash panel on space and triggers stop on escape outside slash mode', () => {
-    const onStop = vi.fn();
-    const { result, rerender } = renderHook(
-      (props: {
-        isSlashMode: boolean;
-        isSending: boolean;
-        canStopGeneration: boolean;
-      }) =>
-        useChatInputBarController({
-          isSlashMode: props.isSlashMode,
-          slashItems: [{ key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] }],
-          isSlashLoading: false,
-          onSelectSlashItem: vi.fn(),
-          onSend: vi.fn(),
-          onStop,
-          isSending: props.isSending,
-          canStopGeneration: props.canStopGeneration
-        }),
-      {
-        initialProps: {
-          isSlashMode: true,
-          isSending: false,
-          canStopGeneration: false
-        }
-      }
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent(' '));
-    });
-    expect(result.current.isSlashPanelOpen).toBe(false);
-
-    rerender({
-      isSlashMode: false,
-      isSending: true,
-      canStopGeneration: true
-    });
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Escape'));
-    });
-    expect(onStop).toHaveBeenCalled();
-  });
-
-  it('supports Tab selection and Enter send when slash mode is not active', () => {
-    const onSelectSlashItem = vi.fn();
-    const onSend = vi.fn();
-    const { result, rerender } = renderHook(
-      (props: { isSlashMode: boolean }) =>
-        useChatInputBarController({
-          isSlashMode: props.isSlashMode,
-          slashItems: [{ key: 'one', title: 'One', subtitle: 'Skill', description: '', detailLines: [] }],
-          isSlashLoading: false,
-          onSelectSlashItem,
-          onSend,
-          onStop: vi.fn(),
-          isSending: false,
-          canStopGeneration: false
-        }),
-      { initialProps: { isSlashMode: true } }
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Tab'));
-    });
-    expect(onSelectSlashItem).toHaveBeenCalledTimes(1);
-
-    rerender({ isSlashMode: false });
-    act(() => {
-      result.current.onTextareaKeyDown(createKeyEvent('Enter'));
-    });
-    expect(onSend).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not send on enter while a response is still running', () => {
-    const onSend = vi.fn();
-    const event = createKeyEvent('Enter');
-    const { result } = renderHook(() =>
-      useChatInputBarController({
-        isSlashMode: false,
-        slashItems: [],
-        isSlashLoading: false,
-        onSelectSlashItem: vi.fn(),
-        onSend,
-        onStop: vi.fn(),
-        isSending: true,
-        canStopGeneration: true
-      })
-    );
-
-    act(() => {
-      result.current.onTextareaKeyDown(event);
-    });
-
-    expect(onSend).not.toHaveBeenCalled();
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-});

package/src/features/chat/hooks/use-chat-input-bar-controller.ts

@@ -1,142 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import type { ChatSlashItem } from '@nextclaw/agent-chat-ui';
-import type { KeyboardEvent } from 'react';
-
-type UseChatInputBarControllerParams = {
-  isSlashMode: boolean;
-  slashItems: ChatSlashItem[];
-  isSlashLoading: boolean;
-  onSelectSlashItem: (item: ChatSlashItem) => void;
-  onSend: () => Promise<void> | void;
-  onStop: () => Promise<void> | void;
-  isSending: boolean;
-  canStopGeneration: boolean;
-};
-
-function isSubmitKey(event: Pick<KeyboardEvent<HTMLTextAreaElement>, 'key' | 'shiftKey'>): boolean {
-  return event.key === 'Enter' && !event.shiftKey;
-}
-
-function isSlashDismissKey(event: Pick<KeyboardEvent<HTMLTextAreaElement>, 'key' | 'code' | 'nativeEvent'>): boolean {
-  return !event.nativeEvent.isComposing && (event.key === ' ' || event.code === 'Space');
-}
-
-export function useChatInputBarController(params: UseChatInputBarControllerParams) {
-  const {
-    isSlashMode,
-    slashItems,
-    onSelectSlashItem,
-    onSend,
-    onStop,
-    isSending,
-    canStopGeneration
-  } = params;
-  const [activeSlashIndex, setActiveSlashIndex] = useState(0);
-  const [dismissedSlashPanel, setDismissedSlashPanel] = useState(false);
-
-  const isSlashPanelOpen = isSlashMode && !dismissedSlashPanel;
-  const activeSlashItem = slashItems[activeSlashIndex] ?? null;
-
-  useEffect(() => {
-    if (!isSlashPanelOpen || slashItems.length === 0) {
-      setActiveSlashIndex(0);
-      return;
-    }
-    setActiveSlashIndex((current) => {
-      if (current < 0) {
-        return 0;
-      }
-      if (current >= slashItems.length) {
-        return slashItems.length - 1;
-      }
-      return current;
-    });
-  }, [isSlashPanelOpen, slashItems.length]);
-
-  useEffect(() => {
-    if (!isSlashMode && dismissedSlashPanel) {
-      setDismissedSlashPanel(false);
-    }
-  }, [dismissedSlashPanel, isSlashMode]);
-
-  const handleSelectSlashItem = useCallback((item: ChatSlashItem) => {
-    onSelectSlashItem(item);
-    setDismissedSlashPanel(false);
-  }, [onSelectSlashItem]);
-
-  const handleSlashKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
-    if (!isSlashPanelOpen || slashItems.length === 0) {
-      return false;
-    }
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      setActiveSlashIndex((current) => (current + 1) % slashItems.length);
-      return true;
-    }
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      setActiveSlashIndex((current) => (current - 1 + slashItems.length) % slashItems.length);
-      return true;
-    }
-    if (!isSubmitKey(event) && event.key !== 'Tab') {
-      return false;
-    }
-    event.preventDefault();
-    const selected = slashItems[activeSlashIndex];
-    if (selected) {
-      handleSelectSlashItem(selected);
-    }
-    return true;
-  }, [activeSlashIndex, handleSelectSlashItem, isSlashPanelOpen, slashItems]);
-
-  const handleEscapeKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>): boolean => {
-    if (event.key !== 'Escape') {
-      return false;
-    }
-    if (isSlashPanelOpen) {
-      event.preventDefault();
-      setDismissedSlashPanel(true);
-      return true;
-    }
-    if (!isSending || !canStopGeneration) {
-      return false;
-    }
-    event.preventDefault();
-    void onStop();
-    return true;
-  }, [canStopGeneration, isSlashPanelOpen, isSending, onStop]);
-
-  const onTextareaKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (isSubmitKey(event) && isSending) {
-      event.preventDefault();
-      return;
-    }
-    if (isSlashPanelOpen && isSlashDismissKey(event)) {
-      setDismissedSlashPanel(true);
-    }
-    if (handleSlashKeyDown(event)) {
-      return;
-    }
-    if (handleEscapeKeyDown(event)) {
-      return;
-    }
-    if (isSubmitKey(event)) {
-      event.preventDefault();
-      void onSend();
-    }
-  }, [handleEscapeKeyDown, handleSlashKeyDown, isSending, isSlashPanelOpen, onSend]);
-
-  return {
-    isSlashPanelOpen,
-    activeSlashIndex,
-    activeSlashItem,
-    onSelectSlashItem: handleSelectSlashItem,
-    onSlashPanelOpenChange: (open: boolean) => {
-      if (!open) {
-        setDismissedSlashPanel(true);
-      }
-    },
-    onSetActiveSlashIndex: setActiveSlashIndex,
-    onTextareaKeyDown
-  };
-}

package/src/features/chat/hooks/use-chat-session-label.ts

@@ -1,18 +0,0 @@
-import { t } from '@/shared/lib/i18n';
-import { useChatSessionUpdate } from '@/features/chat/hooks/use-chat-session-update';
-
-type UpdateChatSessionLabelParams = {
-  sessionKey: string;
-  label: string | null;
-};
-export function useChatSessionLabel() {
-  const updateSession = useChatSessionUpdate();
-
-  return async (params: UpdateChatSessionLabelParams): Promise<void> => {
-    await updateSession({
-      sessionKey: params.sessionKey,
-      patch: { label: params.label },
-      successMessage: t('configSavedApplied')
-    });
-  };
-}

package/src/features/chat/hooks/use-hydrated-ncp-agent.test.tsx

@@ -1,90 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import type { NcpAgentClientEndpoint } from "@nextclaw/ncp";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { useHydratedNcpAgent } from "../../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-hydrated-ncp-agent.ts";
-
-const mocks = vi.hoisted(() => ({
-  manager: {
-    reset: vi.fn(),
-    hydrate: vi.fn(),
-    getSnapshot: vi.fn(() => ({
-      messages: [],
-      streamingMessage: null,
-      activeRun: null,
-    })),
-  },
-  runtime: {
-    snapshot: {
-      messages: [],
-      streamingMessage: null,
-      activeRun: null,
-      error: null,
-    },
-    visibleMessages: [],
-    activeRunId: null,
-    isRunning: false,
-    isSending: false,
-    send: vi.fn(),
-    abort: vi.fn(),
-    streamRun: vi.fn(),
-  },
-}));
-
-vi.mock(
-  "../../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.js",
-  () => ({
-    useScopedAgentManager: () => mocks.manager,
-    useNcpAgentRuntime: () => mocks.runtime,
-  }),
-);
-
-describe("useHydratedNcpAgent", () => {
-  beforeEach(() => {
-    mocks.manager.reset.mockReset();
-    mocks.manager.hydrate.mockReset();
-    mocks.manager.getSnapshot.mockClear();
-    mocks.runtime.send.mockReset();
-    mocks.runtime.abort.mockReset();
-    mocks.runtime.streamRun.mockReset();
-  });
-
-  it("treats a newly selected session as hydrating immediately on rerender", async () => {
-    const client = {
-      stop: vi.fn().mockResolvedValue(undefined),
-      stream: vi.fn().mockResolvedValue(undefined),
-    } satisfies Pick<NcpAgentClientEndpoint, "stop" | "stream">;
-    const loadSeed = vi
-      .fn()
-      .mockResolvedValueOnce({ messages: [], status: "idle" })
-      .mockResolvedValueOnce({ messages: [], status: "idle" });
-
-    const { result, rerender } = renderHook(
-      ({ sessionId }: { sessionId: string }) =>
-        useHydratedNcpAgent({
-          sessionId,
-          client: client as never,
-          loadSeed,
-        }),
-      {
-        initialProps: {
-          sessionId: "session-a",
-        },
-      },
-    );
-
-    await waitFor(() => {
-      expect(result.current.isHydrating).toBe(false);
-    });
-    expect(client.stream).toHaveBeenCalledWith({ sessionId: "session-a" });
-
-    rerender({ sessionId: "session-b" });
-
-    expect(result.current.isHydrating).toBe(true);
-
-    await waitFor(() => {
-      expect(result.current.isHydrating).toBe(false);
-    });
-    expect(client.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
-    expect(client.stream).toHaveBeenCalledTimes(2);
-  });
-});

package/src/features/chat/hooks/use-ncp-chat-derived-state.ts

@@ -1,181 +0,0 @@
-import { useEffect, useMemo, type MutableRefObject } from 'react';
-import type {
-  AgentProfileView,
-  NcpSessionSummaryView,
-  SessionEntryView,
-  SessionSkillEntryView
-} from '@/shared/lib/api';
-import { sessionDisplayName } from '@/features/chat/utils/chat-session-display.utils';
-import { adaptNcpSessionSummary } from '@/features/chat/utils/ncp-session-adapter.utils';
-import type { NcpChatPresenter } from '@/features/chat/managers/ncp-chat-presenter.manager';
-import type { UseHydratedNcpAgentResult } from '@nextclaw/ncp-react';
-import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
-import type { ChatChildSessionTab } from '@/features/chat/stores/chat-thread.store';
-import type { ChatSessionTypeOption } from '@/features/chat/hooks/use-chat-session-type-state';
-import { resolveSessionTypeLabel } from '@/features/chat/hooks/use-chat-session-type-state';
-import { readNcpContextWindowValue } from '@/features/chat/utils/ncp-session-context-metadata.utils';
-
-function buildChildSessionTabs(params: {
-  parentSessionKey: string | null;
-  sessionSummaries: NcpSessionSummaryView[];
-}): ChatChildSessionTab[] {
-  if (!params.parentSessionKey) {
-    return [];
-  }
-  return params.sessionSummaries
-    .map(adaptNcpSessionSummary)
-    .filter((session) => session.parentSessionId === params.parentSessionKey)
-    .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
-    .map((session) => ({
-      sessionKey: session.key,
-      parentSessionKey: session.parentSessionId ?? null,
-      label: session.label ?? null,
-      agentId: session.agentId ?? null,
-    }));
-}
-
-export function useNcpChatDerivedState(params: {
-  sessionKey: string | null;
-  selectedSession: SessionEntryView | null;
-  selectedAgentId: string;
-  availableAgents: AgentProfileView[];
-  parentSessionId: string | null;
-  sessionSummaries: NcpSessionSummaryView[];
-  selectedSessionType: string;
-  sessionTypeOptions: ChatSessionTypeOption[];
-}) {
-  const {
-    availableAgents,
-    parentSessionId,
-    selectedAgentId,
-    selectedSession,
-    selectedSessionType,
-    sessionKey,
-    sessionSummaries,
-    sessionTypeOptions,
-  } = params;
-  const currentSessionDisplayName = selectedSession
-    ? sessionDisplayName(selectedSession)
-    : undefined;
-  const currentAgentId = selectedSession?.agentId ?? selectedAgentId;
-  const currentAgent =
-    availableAgents.find((agent) => agent.id === currentAgentId) ?? null;
-  const parentSession = useMemo(() => {
-    if (!parentSessionId) {
-      return null;
-    }
-    const parentSummary =
-      sessionSummaries.find(
-        (summary) => summary.sessionId === parentSessionId,
-      ) ?? null;
-    return parentSummary ? adaptNcpSessionSummary(parentSummary) : null;
-  }, [parentSessionId, sessionSummaries]);
-  const currentSessionTypeOption =
-    sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null;
-  const currentSessionTypeLabel =
-    currentSessionTypeOption?.label ?? resolveSessionTypeLabel(selectedSessionType);
-  const currentSessionTypeIcon = currentSessionTypeOption?.icon ?? null;
-  const currentChildSessionTabs = useMemo(
-    () =>
-      buildChildSessionTabs({
-        parentSessionKey: sessionKey,
-        sessionSummaries,
-      }),
-    [sessionKey, sessionSummaries],
-  );
-
-  return {
-    currentSessionDisplayName,
-    currentAgentId,
-    currentAgent,
-    parentSession,
-    currentSessionTypeLabel,
-    currentSessionTypeIcon,
-    currentChildSessionTabs,
-  };
-}
-
-export function useNcpChatSnapshotSync(params: {
-  presenter: NcpChatPresenter;
-  isProviderStateResolved: boolean;
-  defaultSessionType: string;
-  canStopCurrentRun: boolean;
-  stopDisabledReason: string | null;
-  lastSendError: string | null;
-  isSending: boolean;
-  modelOptions: ChatModelOption[];
-  sessionTypeOptions: ChatSessionTypeOption[];
-  selectedSessionType: string;
-  canEditSessionType: boolean;
-  sessionTypeUnavailable: boolean;
-  skillRecords: SessionSkillEntryView[];
-  isSkillsLoading: boolean;
-  sessionTypeUnavailableMessage: string | null;
-  currentSessionTypeLabel: string;
-  currentSessionTypeIcon: ChatSessionTypeOption['icon'];
-  sessionKey: string | null | undefined;
-  currentAgentId: string;
-  currentAgent: AgentProfileView | null;
-  availableAgents: AgentProfileView[];
-  currentSessionDisplayName?: string;
-  effectiveSessionProjectRoot: string | null;
-  effectiveSessionWorkingDir: string | null;
-  effectiveSessionProjectName: string | null;
-  selectedSession: SessionEntryView | null;
-  threadRef: MutableRefObject<HTMLDivElement | null>;
-  agent: Pick<UseHydratedNcpAgentResult, 'isHydrating' | 'snapshot' | 'visibleMessages'>;
-  isAwaitingAssistantOutput: boolean;
-  parentSession: SessionEntryView | null;
-  childSessionTabs: ChatChildSessionTab[];
-}) {
-  useEffect(() => {
-    params.presenter.chatInputManager.syncSnapshot({
-      isProviderStateResolved: params.isProviderStateResolved,
-      defaultSessionType: params.defaultSessionType,
-      canStopGeneration: params.canStopCurrentRun,
-      stopDisabledReason: params.stopDisabledReason,
-      stopSupported: true,
-      stopReason: undefined,
-      sendError: params.lastSendError,
-      isSending: params.isSending,
-      modelOptions: params.modelOptions,
-      sessionTypeOptions: params.sessionTypeOptions,
-      selectedSessionType: params.selectedSessionType,
-      canEditSessionType: params.canEditSessionType,
-      sessionTypeUnavailable: params.sessionTypeUnavailable,
-      skillRecords: params.skillRecords,
-      isSkillsLoading: params.isSkillsLoading,
-    });
-    params.presenter.chatThreadManager.syncSnapshot({
-      isProviderStateResolved: params.isProviderStateResolved,
-      modelOptions: params.modelOptions,
-      sessionTypeUnavailable: params.sessionTypeUnavailable,
-      sessionTypeUnavailableMessage: params.sessionTypeUnavailableMessage,
-      sessionTypeLabel: params.currentSessionTypeLabel,
-      sessionTypeIcon: params.currentSessionTypeIcon,
-      sessionKey: params.sessionKey ?? null,
-      agentId: params.currentAgentId,
-      agentDisplayName: params.currentAgent?.displayName ?? null,
-      agentAvatarUrl: params.currentAgent?.avatarUrl ?? null,
-      availableAgents: params.availableAgents,
-      sessionDisplayName: params.currentSessionDisplayName,
-      sessionProjectRoot: params.effectiveSessionProjectRoot,
-      sessionWorkingDir: params.effectiveSessionWorkingDir,
-      sessionProjectName: params.effectiveSessionProjectName,
-      canDeleteSession: Boolean(params.selectedSession),
-      threadRef: params.threadRef,
-      isHistoryLoading: params.agent.isHydrating,
-      messages: params.agent.visibleMessages,
-      isSending: params.isSending,
-      isAwaitingAssistantOutput: params.isAwaitingAssistantOutput,
-      contextWindow: readNcpContextWindowValue(params.agent.snapshot.contextWindow),
-      parentSessionKey: params.parentSession?.key ?? null,
-      parentSessionLabel: params.parentSession
-        ? sessionDisplayName(params.parentSession)
-        : null,
-      childSessionTabs: params.childSessionTabs,
-    });
-  }, [
-    params
-  ]);
-}

package/src/features/chat/hooks/use-ncp-chat-page-data.test.tsx

@@ -1,70 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { useNcpChatPageData } from './use-ncp-chat-page-data';
-
-const useNcpSessionSkillsMock = vi.fn();
-
-vi.mock('@/shared/hooks/use-config', () => ({
-  useConfig: () => ({
-    data: {
-      agents: { defaults: {} },
-      providers: {}
-    },
-    isFetched: true,
-    isSuccess: true
-  }),
-  useConfigMeta: () => ({
-    data: { providers: [] },
-    isFetched: true,
-    isSuccess: true
-  }),
-  useNcpSessions: () => ({
-    data: { sessions: [] }
-  }),
-  useNcpSessionSkills: (params: unknown) => useNcpSessionSkillsMock(params)
-}));
-
-vi.mock('./use-ncp-chat-session-types', () => ({
-  useNcpChatSessionTypes: () => ({
-    data: {
-      defaultType: 'native',
-      options: [{ value: 'native', label: 'Native' }]
-    }
-  })
-}));
-
-function renderPageData(params: { sessionKey: string | null }) {
-  return renderHook(() =>
-    useNcpChatPageData({
-      sessionKey: params.sessionKey,
-      query: '',
-      currentSelectedModel: '',
-      pendingSessionType: '',
-      setPendingSessionType: vi.fn(),
-      setSelectedModel: vi.fn(),
-      setSelectedThinkingLevel: vi.fn()
-    })
-  );
-}
-
-describe('useNcpChatPageData skills query', () => {
-  it('loads draft-session skills before a new chat materializes', () => {
-    useNcpSessionSkillsMock.mockReturnValue({ data: { records: [] }, isLoading: false });
-
-    renderPageData({ sessionKey: null });
-
-    expect(useNcpSessionSkillsMock).toHaveBeenCalledWith({
-      sessionId: 'draft-session'
-    });
-  });
-
-  it('loads real session skills after materialization', () => {
-    useNcpSessionSkillsMock.mockReturnValue({ data: { records: [] }, isLoading: false });
-
-    renderPageData({ sessionKey: 'session-1' });
-
-    expect(useNcpSessionSkillsMock).toHaveBeenCalledWith({
-      sessionId: 'session-1'
-    });
-  });
-});