@nextclaw/ui 0.6.15 → 0.7.0

package/src/components/chat/chat-input/chat-input-bar.controller.test.tsx

@@ -0,0 +1,128 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { useChatInputBarController } from '@/components/chat/chat-input/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);
+  });
+});

package/src/components/chat/chat-input/chat-input-bar.controller.ts

@@ -0,0 +1,105 @@
+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;
+};
+
+export function useChatInputBarController(params: UseChatInputBarControllerParams) {
+  const [activeSlashIndex, setActiveSlashIndex] = useState(0);
+  const [dismissedSlashPanel, setDismissedSlashPanel] = useState(false);
+
+  const isSlashPanelOpen = params.isSlashMode && !dismissedSlashPanel;
+  const activeSlashItem = params.slashItems[activeSlashIndex] ?? null;
+
+  useEffect(() => {
+    if (!isSlashPanelOpen || params.slashItems.length === 0) {
+      setActiveSlashIndex(0);
+      return;
+    }
+    setActiveSlashIndex((current) => {
+      if (current < 0) {
+        return 0;
+      }
+      if (current >= params.slashItems.length) {
+        return params.slashItems.length - 1;
+      }
+      return current;
+    });
+  }, [isSlashPanelOpen, params.slashItems.length]);
+
+  useEffect(() => {
+    if (!params.isSlashMode && dismissedSlashPanel) {
+      setDismissedSlashPanel(false);
+    }
+  }, [dismissedSlashPanel, params.isSlashMode]);
+
+  const handleSelectSlashItem = useCallback((item: ChatSlashItem) => {
+    params.onSelectSlashItem(item);
+    setDismissedSlashPanel(false);
+  }, [params]);
+
+  const onTextareaKeyDown = useCallback((event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (isSlashPanelOpen && !event.nativeEvent.isComposing && (event.key === ' ' || event.code === 'Space')) {
+      setDismissedSlashPanel(true);
+    }
+    if (isSlashPanelOpen && params.slashItems.length > 0) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setActiveSlashIndex((current) => (current + 1) % params.slashItems.length);
+        return;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setActiveSlashIndex((current) => (current - 1 + params.slashItems.length) % params.slashItems.length);
+        return;
+      }
+      if ((event.key === 'Enter' && !event.shiftKey) || event.key === 'Tab') {
+        event.preventDefault();
+        const selected = params.slashItems[activeSlashIndex];
+        if (selected) {
+          handleSelectSlashItem(selected);
+        }
+        return;
+      }
+    }
+    if (event.key === 'Escape') {
+      if (isSlashPanelOpen) {
+        event.preventDefault();
+        setDismissedSlashPanel(true);
+        return;
+      }
+      if (params.isSending && params.canStopGeneration) {
+        event.preventDefault();
+        void params.onStop();
+        return;
+      }
+    }
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      void params.onSend();
+    }
+  }, [activeSlashIndex, handleSelectSlashItem, isSlashPanelOpen, params]);
+
+  return {
+    isSlashPanelOpen,
+    activeSlashIndex,
+    activeSlashItem,
+    onSelectSlashItem: handleSelectSlashItem,
+    onSlashPanelOpenChange: (open: boolean) => {
+      if (!open) {
+        setDismissedSlashPanel(true);
+      }
+    },
+    onSetActiveSlashIndex: setActiveSlashIndex,
+    onTextareaKeyDown
+  };
+}

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

@@ -0,0 +1,270 @@
+import { useMemo } from 'react';
+import { ChatInputBar } from '@nextclaw/agent-chat-ui';
+import {
+  buildChatSlashItems,
+  buildModelStateHint,
+  buildModelToolbarSelect,
+  buildSelectedSkillItems,
+  buildSessionTypeToolbarSelect,
+  buildSkillPickerModel,
+  buildThinkingToolbarSelect,
+  resolveSlashQuery,
+  type ChatModelRecord,
+  type ChatSkillRecord,
+  type ChatThinkingLevel
+} from '@/components/chat/adapters/chat-input-bar.adapter';
+import { useChatInputBarController } from '@/components/chat/chat-input/chat-input-bar.controller';
+import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useI18n } from '@/components/providers/I18nProvider';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { t } from '@/lib/i18n';
+
+function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
+  return {
+    off: t('chatThinkingLevelOff'),
+    minimal: t('chatThinkingLevelMinimal'),
+    low: t('chatThinkingLevelLow'),
+    medium: t('chatThinkingLevelMedium'),
+    high: t('chatThinkingLevelHigh'),
+    adaptive: t('chatThinkingLevelAdaptive'),
+    xhigh: t('chatThinkingLevelXhigh')
+  };
+}
+
+function toSkillRecords(snapshotRecords: Array<{
+  spec: string;
+  label?: string;
+  description?: string;
+  descriptionZh?: string;
+  origin?: string;
+}>, officialBadgeLabel: string): ChatSkillRecord[] {
+  return snapshotRecords.map((record) => ({
+    key: record.spec,
+    label: record.label || record.spec,
+    description: record.description,
+    descriptionZh: record.descriptionZh,
+    badgeLabel: record.origin === 'builtin' ? officialBadgeLabel : undefined
+  }));
+}
+
+function toModelRecords(snapshotModels: Array<{
+  value: string;
+  modelLabel: string;
+  providerLabel: string;
+  thinkingCapability?: {
+    supported: string[];
+    default?: string | null;
+  } | null;
+}>): ChatModelRecord[] {
+  return snapshotModels.map((model) => ({
+    value: model.value,
+    modelLabel: model.modelLabel,
+    providerLabel: model.providerLabel,
+    thinkingCapability: model.thinkingCapability
+      ? {
+          supported: model.thinkingCapability.supported as ChatThinkingLevel[],
+          default: (model.thinkingCapability.default as ChatThinkingLevel | null | undefined) ?? null
+        }
+      : null
+  }));
+}
+
+export function ChatInputBarContainer() {
+  const presenter = usePresenter();
+  const { language } = useI18n();
+  const snapshot = useChatInputStore((state) => state.snapshot);
+
+  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');
+  }, [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'),
+        noSkillDescription: t('chatSkillsPickerNoDescription')
+      };
+    },
+    [language]
+  );
+
+  const skillRecords = useMemo(
+    () => toSkillRecords(snapshot.skillRecords, officialSkillBadgeLabel),
+    [snapshot.skillRecords, officialSkillBadgeLabel]
+  );
+  const modelRecords = useMemo(() => toModelRecords(snapshot.modelOptions), [snapshot.modelOptions]);
+
+  const hasModelOptions = modelRecords.length > 0;
+  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
+  const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
+  const inputDisabled =
+    ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const textareaPlaceholder = isModelOptionsLoading
+    ? ''
+    : hasModelOptions
+      ? t('chatInputPlaceholder')
+      : t('chatModelNoOptions');
+
+  const slashQuery = resolveSlashQuery(snapshot.draft);
+  const slashItems = useMemo(
+    () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts),
+    [slashQuery, skillRecords, slashTexts]
+  );
+
+  const controller = useChatInputBarController({
+    isSlashMode: slashQuery !== null,
+    slashItems,
+    isSlashLoading: snapshot.isSkillsLoading,
+    onSelectSlashItem: (item) => {
+      if (!item.value) {
+        return;
+      }
+      if (!snapshot.selectedSkills.includes(item.value)) {
+        presenter.chatInputManager.selectSkills([...snapshot.selectedSkills, item.value]);
+      }
+      presenter.chatInputManager.setDraft('');
+    },
+    onSend: presenter.chatInputManager.send,
+    onStop: presenter.chatInputManager.stop,
+    isSending: snapshot.isSending,
+    canStopGeneration: snapshot.canStopGeneration
+  });
+
+  const selectedSessionTypeOption =
+    snapshot.sessionTypeOptions.find((option) => option.value === snapshot.selectedSessionType) ??
+    (snapshot.selectedSessionType
+      ? { value: snapshot.selectedSessionType, label: snapshot.selectedSessionType }
+      : null);
+  const shouldShowSessionTypeSelector =
+    snapshot.canEditSessionType &&
+    (snapshot.sessionTypeOptions.length > 1 ||
+      Boolean(snapshot.selectedSessionType && snapshot.selectedSessionType !== 'native'));
+
+  const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
+  const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
+  const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
+
+  const resolvedStopHint =
+    snapshot.stopDisabledReason === '__preparing__'
+      ? t('chatStopPreparing')
+      : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
+
+  const toolbarSelects = [
+    buildSessionTypeToolbarSelect({
+      selectedSessionType: snapshot.selectedSessionType,
+      selectedSessionTypeOption,
+      sessionTypeOptions: snapshot.sessionTypeOptions,
+      onValueChange: presenter.chatInputManager.selectSessionType,
+      canEditSessionType: snapshot.canEditSessionType,
+      shouldShow: shouldShowSessionTypeSelector,
+      texts: {
+        sessionTypePlaceholder: t('chatSessionTypeLabel')
+      }
+    }),
+    buildModelToolbarSelect({
+      modelOptions: modelRecords,
+      selectedModel: snapshot.selectedModel,
+      isModelOptionsLoading,
+      hasModelOptions,
+      onValueChange: presenter.chatInputManager.selectModel,
+      texts: {
+        modelSelectPlaceholder: t('chatSelectModel'),
+        modelNoOptionsLabel: t('chatModelNoOptions')
+      }
+    }),
+    buildThinkingToolbarSelect({
+      supportedLevels: thinkingSupportedLevels,
+      selectedThinkingLevel: snapshot.selectedThinkingLevel as ChatThinkingLevel | null,
+      defaultThinkingLevel: selectedModelThinkingCapability?.default ?? null,
+      onValueChange: (value) => presenter.chatInputManager.selectThinkingLevel(value),
+      texts: {
+        thinkingLabels: buildThinkingLabels()
+      }
+    })
+  ].filter((item): item is NonNullable<typeof item> => item !== null);
+
+  const skillPicker = buildSkillPickerModel({
+    skillRecords,
+    selectedSkills: snapshot.selectedSkills,
+    isLoading: snapshot.isSkillsLoading,
+    onSelectedKeysChange: presenter.chatInputManager.selectSkills,
+    texts: {
+      title: t('chatSkillsPickerTitle'),
+      searchPlaceholder: t('chatSkillsPickerSearchPlaceholder'),
+      emptyLabel: t('chatSkillsPickerEmpty'),
+      loadingLabel: t('sessionsLoading'),
+      manageLabel: t('chatSkillsPickerManage')
+    }
+  });
+
+  return (
+    <ChatInputBar
+      value={snapshot.draft}
+      placeholder={textareaPlaceholder}
+      disabled={inputDisabled}
+      onValueChange={presenter.chatInputManager.setDraft}
+      onKeyDown={controller.onTextareaKeyDown}
+      slashMenu={{
+        isOpen: controller.isSlashPanelOpen,
+        isLoading: snapshot.isSkillsLoading,
+        items: slashItems,
+        activeIndex: controller.activeSlashIndex,
+        activeItem: controller.activeSlashItem,
+        texts: {
+          slashLoadingLabel: t('chatSlashLoading'),
+          slashSectionLabel: t('chatSlashSectionSkills'),
+          slashEmptyLabel: t('chatSlashNoResult'),
+          slashHintLabel: t('chatSlashHint'),
+          slashSkillHintLabel: t('chatSlashSkillHint')
+        },
+        onSelectItem: controller.onSelectSlashItem,
+        onOpenChange: controller.onSlashPanelOpenChange,
+        onSetActiveIndex: controller.onSetActiveSlashIndex
+      }}
+      hint={buildModelStateHint({
+        isModelOptionsLoading,
+        isModelOptionsEmpty,
+        onGoToProviders: presenter.chatInputManager.goToProviders,
+        texts: {
+          noModelOptionsLabel: t('chatModelNoOptions'),
+          configureProviderLabel: t('chatGoConfigureProvider')
+        }
+      })}
+      selectedItems={{
+        items: buildSelectedSkillItems(snapshot.selectedSkills, skillRecords),
+        onRemove: (key) => presenter.chatInputManager.selectSkills(snapshot.selectedSkills.filter((skill) => skill !== key))
+      }}
+      toolbar={{
+        selects: toolbarSelects,
+        accessories: [
+          {
+            key: 'attach',
+            label: t('chatInputAttachComingSoon'),
+            icon: 'paperclip',
+            disabled: true,
+            tooltip: t('chatInputAttachComingSoon')
+          }
+        ],
+        skillPicker,
+        actions: {
+          sendError: snapshot.sendError,
+          isSending: snapshot.isSending,
+          canStopGeneration: snapshot.canStopGeneration,
+          sendDisabled: snapshot.draft.trim().length === 0 || !hasModelOptions || snapshot.sessionTypeUnavailable,
+          stopDisabled: !snapshot.canStopGeneration,
+          stopHint: resolvedStopHint,
+          sendButtonLabel: t('chatSend'),
+          stopButtonLabel: t('chatStop'),
+          onSend: presenter.chatInputManager.send,
+          onStop: presenter.chatInputManager.stop
+        }
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { type UiMessage } from '@nextclaw/agent-chat';
+import { ChatMessageList } from '@nextclaw/agent-chat-ui';
+import { adaptChatMessages, type ChatMessageSource } from '@/components/chat/adapters/chat-message.adapter';
+import { useI18n } from '@/components/providers/I18nProvider';
+import { formatDateTime, t } from '@/lib/i18n';
+
+type ChatMessageListContainerProps = {
+  uiMessages: UiMessage[];
+  isSending: boolean;
+  className?: string;
+};
+
+export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
+  const { language } = useI18n();
+  const sourceMessages = useMemo<ChatMessageSource[]>(
+    () =>
+      props.uiMessages.map((message) => ({
+        id: message.id,
+        role: message.role,
+        meta: {
+          timestamp: message.meta?.timestamp,
+          status: message.meta?.status
+        },
+        parts: message.parts as unknown as ChatMessageSource['parts']
+      })),
+    [props.uiMessages]
+  );
+
+  const messages = useMemo(
+    () =>
+      adaptChatMessages({
+        uiMessages: sourceMessages,
+        formatTimestamp: (value) => formatDateTime(value, language),
+        texts: {
+          roleLabels: {
+            user: t('chatRoleUser'),
+            assistant: t('chatRoleAssistant'),
+            tool: t('chatRoleTool'),
+            system: t('chatRoleSystem'),
+            fallback: t('chatRoleMessage')
+          },
+          reasoningLabel: t('chatReasoning'),
+          toolCallLabel: t('chatToolCall'),
+          toolResultLabel: t('chatToolResult'),
+          toolNoOutputLabel: t('chatToolNoOutput'),
+          toolOutputLabel: t('chatToolOutput'),
+          unknownPartLabel: t('chatUnknownPart')
+        }
+      }),
+    [language, sourceMessages]
+  );
+
+  return (
+    <ChatMessageList
+      messages={messages}
+      isSending={props.isSending}
+      hasStreamingDraft={props.uiMessages.some((message) => message.meta?.status === 'streaming')}
+      className={props.className}
+      texts={{
+        copyCodeLabel: t('chatCodeCopy'),
+        copiedCodeLabel: t('chatCodeCopied'),
+        typingLabel: t('chatTyping')
+      }}
+    />
+  );
+}

package/src/components/chat/index.ts

@@ -0,0 +1 @@
+export * from '@nextclaw/agent-chat-ui';

package/src/components/chat/managers/chat-thread.manager.ts

@@ -60,7 +60,9 @@ export class ChatThreadManager {
   };
 
   private deleteCurrentSession = async () => {
-    const selectedSessionKey = useChatSessionListStore.getState().snapshot.selectedSessionKey;
+    const {
+      snapshot: { selectedSessionKey }
+    } = useChatSessionListStore.getState();
     if (!selectedSessionKey) {
       return;
     }

package/src/components/chat/nextclaw/index.ts

@@ -0,0 +1,23 @@
+export { ChatInputBarContainer } from '@/components/chat/containers/chat-input-bar.container';
+export { ChatMessageListContainer } from '@/components/chat/containers/chat-message-list.container';
+
+export {
+  adaptChatMessages,
+  type ChatMessageAdapterTexts,
+  type ChatMessageSource,
+  type ChatMessagePartSource
+} from '@/components/chat/adapters/chat-message.adapter';
+
+export {
+  buildChatSlashItems,
+  buildSelectedSkillItems,
+  buildSkillPickerModel,
+  buildModelStateHint,
+  buildModelToolbarSelect,
+  buildSessionTypeToolbarSelect,
+  buildThinkingToolbarSelect,
+  resolveSlashQuery,
+  type ChatSkillRecord,
+  type ChatModelRecord,
+  type ChatThinkingLevel
+} from '@/components/chat/adapters/chat-input-bar.adapter';