@nextclaw/ui 0.11.21 → 0.11.23

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/components/chat/chat-recent-skills.manager';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import type { SessionSkillEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
 
@@ -42,19 +43,17 @@ function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
   };
 }
 
-function toSkillRecords(snapshotRecords: Array<{
-  spec: string;
-  label?: string;
-  description?: string;
-  descriptionZh?: string;
-  origin?: string;
-}>, officialBadgeLabel: string): ChatSkillRecord[] {
+function toSkillRecords(
+  snapshotRecords: SessionSkillEntryView[],
+  scopeLabels: Record<SessionSkillEntryView['scope'], string>
+): ChatSkillRecord[] {
   return snapshotRecords.map((record) => ({
-    key: record.spec,
-    label: record.label || record.spec,
+    key: record.ref,
+    label: record.name,
+    scopeLabel: scopeLabels[record.scope],
     description: record.description,
     descriptionZh: record.descriptionZh,
-    badgeLabel: record.origin === 'builtin' ? officialBadgeLabel : undefined
+    badgeLabel: scopeLabels[record.scope]
   }));
 }
 
@@ -88,20 +87,18 @@ export function ChatInputBarContainer() {
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-  const officialSkillBadgeLabel = useMemo(() => {
-    // Keep memo reactive to locale switches even though `t` is imported as a stable function.
-    const locale = language;
-    void locale;
-    return t('chatSkillsPickerOfficial');
+  const skillScopeLabels = useMemo<Record<'project' | 'workspace', string>>(() => {
+    return {
+      project: t('chatSkillScopeProject'),
+      workspace: t('chatSkillScopeWorkspace'),
+    };
   }, [language]);
   const slashTexts = useMemo(
     () => {
-      // Keep memo reactive to locale switches even though `t` is imported as a stable function.
-      const locale = language;
-      void locale;
       return {
         slashSkillSubtitle: t('chatSlashTypeSkill'),
         slashSkillSpecLabel: t('chatSlashSkillSpec'),
+        slashSkillScopeLabel: t('chatSlashSkillScope'),
         noSkillDescription: t('chatSkillsPickerNoDescription')
       };
     },
@@ -109,8 +106,8 @@ export function ChatInputBarContainer() {
   );
 
   const skillRecords = useMemo(
-    () => toSkillRecords(snapshot.skillRecords, officialSkillBadgeLabel),
-    [snapshot.skillRecords, officialSkillBadgeLabel]
+    () => toSkillRecords(snapshot.skillRecords, skillScopeLabels),
+    [snapshot.skillRecords, skillScopeLabels]
   );
   const modelRecords = useMemo(() => toModelRecords(snapshot.modelOptions), [snapshot.modelOptions]);
   const recentModelValues = chatRecentModelsManager.resolveVisible({
@@ -137,10 +134,10 @@ export function ChatInputBarContainer() {
     : hasModelOptions
       ? t('chatInputPlaceholder')
       : t('chatModelNoOptions');
-  const recentModelsLabel = language === 'zh' ? '最近选择' : 'Recent';
-  const allModelsLabel = language === 'zh' ? '全部模型' : 'All models';
-  const recentSkillsLabel = language === 'zh' ? '最近使用' : 'Recent';
-  const allSkillsLabel = language === 'zh' ? '全部技能' : 'All skills';
+  const recentModelsLabel = t('chatPickerRecentModels');
+  const allModelsLabel = t('chatPickerAllModels');
+  const recentSkillsLabel = t('chatPickerRecent');
+  const allSkillsLabel = t('chatPickerAllSkills');
 
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts, recentSkillValues),

package/src/components/chat/containers/chat-message-list.container.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
+  type ChatToolActionViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
@@ -18,6 +19,7 @@ type ChatMessageListContainerProps = {
   messages: readonly NcpMessage[];
   isSending: boolean;
   className?: string;
+  onToolAction?: (action: ChatToolActionViewModel) => void;
 };
 
 const messageViewModelCache = new WeakMap<
@@ -69,6 +71,7 @@ export function ChatMessageListContainer({
   messages: rawMessages,
   isSending,
   className,
+  onToolAction,
 }: ChatMessageListContainerProps) {
   const { language } = useI18n();
   const texts = useMemo<ChatMessageAdapterTexts>(
@@ -125,6 +128,7 @@ export function ChatMessageListContainer({
       hasAssistantDraft={hasAssistantDraft}
       className={className}
       texts={messageTexts}
+      onToolAction={onToolAction}
     />
   );
 }

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

@@ -0,0 +1,19 @@
+import { t } from '@/lib/i18n';
+import { useChatSessionUpdate } from '@/components/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/components/chat/hooks/use-chat-session-project.test.tsx

@@ -0,0 +1,117 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { useChatSessionProject } from '@/components/chat/hooks/use-chat-session-project';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+
+const mocks = vi.hoisted(() => ({
+  updateSession: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+  },
+}));
+
+vi.mock('@/components/chat/hooks/use-chat-session-update', () => ({
+  useChatSessionUpdate: () => mocks.updateSession,
+}));
+
+describe('useChatSessionProject', () => {
+  beforeEach(() => {
+    useChatInputStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        pendingProjectRoot: null,
+        pendingProjectRootSessionKey: null,
+      },
+    }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('stores the draft project root locally when the session does not exist yet', async () => {
+    const { result } = renderHook(() => useChatSessionProject());
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'draft-session-1',
+        projectRoot: '/tmp/project-alpha',
+        persistToServer: false,
+      });
+    });
+
+    expect(mocks.updateSession).not.toHaveBeenCalled();
+    expect(useChatInputStore.getState().snapshot).toMatchObject({
+      pendingProjectRoot: '/tmp/project-alpha',
+      pendingProjectRootSessionKey: 'draft-session-1',
+    });
+    expect(toast.success).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps an explicit draft override when clearing the project root locally', async () => {
+    const { result } = renderHook(() => useChatSessionProject());
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'draft-session-1',
+        projectRoot: null,
+        persistToServer: false,
+      });
+    });
+
+    expect(mocks.updateSession).not.toHaveBeenCalled();
+    expect(useChatInputStore.getState().snapshot).toMatchObject({
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: 'draft-session-1',
+    });
+    expect(toast.success).toHaveBeenCalledTimes(1);
+  });
+
+  it('persists to the server and mirrors the updated project override locally for an existing session', async () => {
+    const { result } = renderHook(() => useChatSessionProject());
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'session-1',
+        projectRoot: '/tmp/project-beta',
+        persistToServer: true,
+      });
+    });
+
+    expect(mocks.updateSession).toHaveBeenCalledWith({
+      sessionKey: 'session-1',
+      patch: { projectRoot: '/tmp/project-beta' },
+      successMessage: 'Project directory updated',
+    });
+    expect(useChatInputStore.getState().snapshot).toMatchObject({
+      pendingProjectRoot: '/tmp/project-beta',
+      pendingProjectRootSessionKey: 'session-1',
+    });
+  });
+
+  it('persists clearing to the server and keeps the cleared override until session state catches up', async () => {
+    const { result } = renderHook(() => useChatSessionProject());
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'session-1',
+        projectRoot: null,
+        persistToServer: true,
+      });
+    });
+
+    expect(mocks.updateSession).toHaveBeenCalledWith({
+      sessionKey: 'session-1',
+      patch: { projectRoot: null },
+      successMessage: 'Project directory cleared',
+    });
+    expect(useChatInputStore.getState().snapshot).toMatchObject({
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: 'session-1',
+    });
+  });
+});

package/src/components/chat/hooks/use-chat-session-project.ts

@@ -0,0 +1,40 @@
+import { toast } from 'sonner';
+import { t } from '@/lib/i18n';
+import { useChatSessionUpdate } from '@/components/chat/hooks/use-chat-session-update';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+
+type UpdateChatSessionProjectParams = {
+  sessionKey: string;
+  projectRoot: string | null;
+  persistToServer: boolean;
+};
+
+export function useChatSessionProject() {
+  const updateSession = useChatSessionUpdate();
+
+  return async (params: UpdateChatSessionProjectParams): Promise<void> => {
+    const successMessage = params.projectRoot
+      ? t('chatSessionProjectUpdated')
+      : t('chatSessionProjectCleared');
+
+    if (!params.persistToServer) {
+      useChatInputStore.getState().setSnapshot({
+        pendingProjectRoot: params.projectRoot,
+        pendingProjectRootSessionKey: params.sessionKey
+      });
+      toast.success(successMessage);
+      return;
+    }
+
+    await updateSession({
+      sessionKey: params.sessionKey,
+      patch: { projectRoot: params.projectRoot },
+      successMessage,
+    });
+
+    useChatInputStore.getState().setSnapshot({
+      pendingProjectRoot: params.projectRoot,
+      pendingProjectRootSessionKey: params.sessionKey,
+    });
+  };
+}

package/src/components/chat/{chat-session-label.service.ts → hooks/use-chat-session-update.ts}

@@ -1,24 +1,28 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import type { SessionPatchUpdate } from '@/api/types';
 import { upsertNcpSessionSummaryInQueryClient } from '@/api/ncp-session-query-cache';
 import { updateNcpSession } from '@/api/ncp-session';
 import { t } from '@/lib/i18n';
 
-type UpdateChatSessionLabelParams = {
+type UpdateChatSessionParams = {
   sessionKey: string;
-  label: string | null;
+  patch: SessionPatchUpdate;
+  successMessage?: string;
 };
 
-export function useChatSessionLabelService() {
+export function useChatSessionUpdate() {
   const queryClient = useQueryClient();
 
-  return async (params: UpdateChatSessionLabelParams): Promise<void> => {
+  return async (params: UpdateChatSessionParams): Promise<void> => {
     try {
-      const updated = await updateNcpSession(params.sessionKey, { label: params.label });
+      const updated = await updateNcpSession(params.sessionKey, params.patch);
       upsertNcpSessionSummaryInQueryClient(queryClient, updated);
-      toast.success(t('configSavedApplied'));
+      toast.success(params.successMessage ?? t('configSavedApplied'));
     } catch (error) {
-      toast.error(t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)));
+      toast.error(
+        t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)),
+      );
       throw error;
     }
   };

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -44,7 +44,11 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     this.streamActionsManager.resetStreamState();
-    useChatInputStore.getState().setSnapshot({ pendingSessionType: nextSessionType });
+    useChatInputStore.getState().setSnapshot({
+      pendingSessionType: nextSessionType,
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: null
+    });
     this.uiManager.goToChatRoot();
   };