@nextclaw/ui 0.14.0 → 0.14.1-beta.0

package/src/features/chat/features/input/hooks/__tests__/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/features/input/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/features/input/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
-  };
-}