@nextclaw/ui 0.15.23 → 0.15.25

package/src/features/chat/features/workspace/components/project-files/workspace-new-folder-tree-item.tsx

@@ -0,0 +1,112 @@
+import { useLayoutEffect, useRef, type FormEvent } from 'react';
+import { Check, File, Folder, X } from 'lucide-react';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { Input } from '@/shared/components/ui/input';
+import { t } from '@/shared/lib/i18n';
+
+function isValidFolderName(value: string): boolean {
+  const name = value.trim();
+  return Boolean(name && name !== '.' && name !== '..' && !name.includes('/') && !name.includes('\\'));
+}
+
+export function WorkspaceNewFolderTreeItem({
+  error,
+  kind,
+  isCreating,
+  level,
+  name,
+  onCancel,
+  onNameChange,
+  onSubmit,
+}: {
+  error: string | null;
+  kind: 'directory' | 'file';
+  isCreating: boolean;
+  level: number;
+  name: string;
+  onCancel: () => void;
+  onNameChange: (name: string) => void;
+  onSubmit: () => void;
+}) {
+  const rowRef = useRef<HTMLFormElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const valid = isValidFolderName(name);
+
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (typeof row?.scrollIntoView === 'function') {
+      row.scrollIntoView({ block: 'nearest' });
+    }
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (valid && !isCreating) {
+      onSubmit();
+    }
+  };
+
+  return (
+    <form
+      ref={rowRef}
+      role="treeitem"
+      aria-label={t(kind === 'file' ? 'chatWorkspaceNewFile' : 'chatWorkspaceNewFolder')}
+      className="bg-primary/5"
+      onSubmit={submit}
+    >
+      <div
+        className="flex min-h-8 min-w-0 items-center gap-1 py-0.5 pr-1"
+        style={{ paddingLeft: `${8 + level * 14}px` }}
+      >
+        <span className="inline-flex h-4 w-4 shrink-0" />
+        {kind === 'file' ? (
+          <File className="h-4 w-4 shrink-0 text-gray-500" />
+        ) : (
+          <Folder className="h-4 w-4 shrink-0 text-amber-500" />
+        )}
+        <Input
+          ref={inputRef}
+          aria-label={t(kind === 'file' ? 'chatWorkspaceFileName' : 'chatWorkspaceFolderName')}
+          className="h-7 min-w-0 flex-1 rounded-md px-2 text-xs"
+          disabled={isCreating}
+          placeholder={t(kind === 'file' ? 'chatWorkspaceFileNamePlaceholder' : 'chatWorkspaceFolderNamePlaceholder')}
+          value={name}
+          onChange={(event) => onNameChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              event.preventDefault();
+              onCancel();
+            }
+          }}
+        />
+        <IconActionButton
+          disabled={!valid || isCreating}
+          icon={<Check className="h-3.5 w-3.5" />}
+          label={t('chatWorkspaceCreateFolder')}
+          size="sm"
+          tooltipSide="top"
+          onClick={onSubmit}
+        />
+        <IconActionButton
+          disabled={isCreating}
+          icon={<X className="h-3.5 w-3.5" />}
+          label={t('cancel')}
+          size="sm"
+          tooltipSide="top"
+          onClick={onCancel}
+        />
+      </div>
+      {error ? (
+        <p
+          role="alert"
+          className="pb-1 pr-2 text-[11px] text-destructive"
+          style={{ paddingLeft: `${42 + level * 14}px` }}
+        >
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}

package/src/features/chat/features/workspace/components/project-files/workspace-project-files-toolbar.tsx

@@ -0,0 +1,64 @@
+import { ChevronsUp, FilePlus2, FolderPlus, MoreHorizontal, RefreshCw } from 'lucide-react';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { t } from '@/shared/lib/i18n';
+
+export function WorkspaceProjectFilesToolbar({
+  disabled,
+  rootLabel,
+  onCollapseAll,
+  onNewFile,
+  onNewFolder,
+  onRefresh,
+}: {
+  disabled: boolean;
+  rootLabel: string;
+  onCollapseAll: () => void;
+  onNewFile: () => void;
+  onNewFolder: () => void;
+  onRefresh: () => void;
+}) {
+  return (
+    <div className="flex h-9 shrink-0 items-center gap-0.5 border-b border-gray-200/80 bg-gray-50/55 px-1.5">
+      <span
+        className="min-w-0 flex-1 truncate px-0.5 text-[11px] font-semibold uppercase tracking-[0.03em] text-gray-800"
+        title={rootLabel}
+      >
+        {rootLabel}
+      </span>
+      <IconActionButton
+        icon={<FilePlus2 className="h-4 w-4" />}
+        label={t('chatWorkspaceNewFile')}
+        size="sm"
+        disabled={disabled}
+        onClick={onNewFile}
+      />
+      <IconActionButton
+        icon={<FolderPlus className="h-4 w-4" />}
+        label={t('chatWorkspaceNewFolder')}
+        size="sm"
+        disabled={disabled}
+        onClick={onNewFolder}
+      />
+      <IconActionButton
+        icon={<RefreshCw className="h-4 w-4" />}
+        label={t('chatWorkspaceRefreshExplorer')}
+        size="sm"
+        onClick={onRefresh}
+      />
+      <IconActionButton
+        icon={<ChevronsUp className="h-4 w-4" />}
+        label={t('chatWorkspaceCollapseAll')}
+        size="sm"
+        onClick={onCollapseAll}
+      />
+      <ContextMenuTrigger>
+        <IconActionButton
+          icon={<MoreHorizontal className="h-4 w-4" />}
+          label={t('chatWorkspaceRootMoreActions')}
+          size="sm"
+        />
+      </ContextMenuTrigger>
+    </div>
+  );
+}

package/src/features/chat/features/workspace/components/workspace-text-selection-menu.tsx

@@ -1,12 +1,5 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import { createPortal } from "react-dom";
-import { MessageSquarePlus } from "lucide-react";
+import type { ReactNode } from "react";
+import { ChatTextSelectionAction } from "@nextclaw/agent-chat-ui";
 import {
   buildWorkspaceTextExcerpt,
   WORKSPACE_TEXT_EXCERPT_MAX_CHARACTERS,
@@ -14,44 +7,6 @@ import {
 } from "@/features/chat/features/workspace/utils/workspace-text-excerpt.utils";
 import { t } from "@/shared/lib/i18n";
 
-type SelectionMenuState = {
-  anchorBottom: number;
-  anchorCenter: number;
-  anchorTop: number;
-  excerpt: WorkspaceTextExcerpt;
-  tooLong: boolean;
-};
-
-type SelectionMenuPosition = {
-  left: number;
-  top: number;
-};
-
-const SELECTION_MENU_VIEWPORT_GAP = 12;
-const SELECTION_MENU_ANCHOR_GAP = 10;
-
-function containsSelection(
-  root: HTMLElement,
-  selection: Selection,
-): selection is Selection & { rangeCount: number } {
-  if (selection.rangeCount === 0 || selection.isCollapsed) {
-    return false;
-  }
-  const range = selection.getRangeAt(0);
-  return root.contains(range.commonAncestorContainer);
-}
-
-function getSelectionAnchorRect(range: Range): DOMRect {
-  const rects = typeof range.getClientRects === "function"
-    ? Array.from(range.getClientRects()).filter((rect) => rect.width > 0 || rect.height > 0)
-    : [];
-  return rects.at(-1) ?? range.getBoundingClientRect();
-}
-
-function clamp(value: number, minimum: number, maximum: number): number {
-  return Math.min(Math.max(value, minimum), Math.max(minimum, maximum));
-}
-
 export function WorkspaceTextSelectionMenu({
   children,
   fileLabel,
@@ -67,157 +22,24 @@ export function WorkspaceTextSelectionMenu({
   sourceStartLine?: number | null;
   sourceText: string;
 }) {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
-  const selectionReadFrameRef = useRef<number | null>(null);
-  const [menu, setMenu] = useState<SelectionMenuState | null>(null);
-  const [menuPosition, setMenuPosition] = useState<SelectionMenuPosition | null>(null);
-
-  const readSelection = useCallback(() => {
-    const root = rootRef.current;
-    const selection = window.getSelection();
-    if (!root || !selection || !containsSelection(root, selection)) {
-      setMenu(null);
-      return;
-    }
-    const excerpt = buildWorkspaceTextExcerpt({
-      path: filePath,
-      label: fileLabel,
-      selectedText: selection.toString(),
-      sourceText,
-      sourceStartLine,
-    });
-    if (!excerpt) {
-      setMenu(null);
-      return;
-    }
-    const rect = getSelectionAnchorRect(selection.getRangeAt(0));
-    setMenuPosition(null);
-    setMenu({
-      anchorBottom: rect.bottom,
-      anchorCenter: rect.left + rect.width / 2,
-      anchorTop: rect.top,
-      excerpt,
-      tooLong: excerpt.excerpt.length > WORKSPACE_TEXT_EXCERPT_MAX_CHARACTERS,
-    });
-  }, [fileLabel, filePath, sourceStartLine, sourceText]);
-
-  const scheduleSelectionRead = useCallback(() => {
-    if (selectionReadFrameRef.current !== null) {
-      window.cancelAnimationFrame(selectionReadFrameRef.current);
-    }
-    selectionReadFrameRef.current = window.requestAnimationFrame(() => {
-      selectionReadFrameRef.current = null;
-      readSelection();
-    });
-  }, [readSelection]);
-
-  const captureMenuButton = useCallback((button: HTMLButtonElement | null) => {
-    menuButtonRef.current = button;
-    if (!menu || !button) {
-      return;
-    }
-    const buttonRect = button.getBoundingClientRect();
-    const left = clamp(
-      menu.anchorCenter - buttonRect.width / 2,
-      SELECTION_MENU_VIEWPORT_GAP,
-      window.innerWidth - SELECTION_MENU_VIEWPORT_GAP - buttonRect.width,
-    );
-    const belowTop = menu.anchorBottom + SELECTION_MENU_ANCHOR_GAP;
-    const aboveTop = menu.anchorTop - SELECTION_MENU_ANCHOR_GAP - buttonRect.height;
-    const fitsBelow = belowTop + buttonRect.height <= window.innerHeight - SELECTION_MENU_VIEWPORT_GAP;
-    const preferredTop = fitsBelow ? belowTop : aboveTop;
-    const top = clamp(
-      preferredTop,
-      SELECTION_MENU_VIEWPORT_GAP,
-      window.innerHeight - SELECTION_MENU_VIEWPORT_GAP - buttonRect.height,
-    );
-    setMenuPosition({ left, top });
-  }, [menu]);
-
-  useEffect(() => {
-    const handleSelectionChange = () => {
-      const selection = window.getSelection();
-      if (!selection || selection.isCollapsed) {
-        setMenu(null);
-        return;
-      }
-      scheduleSelectionRead();
-    };
-    const handlePointerUp = (event: PointerEvent) => {
-      if (menuButtonRef.current?.contains(event.target as Node)) {
-        return;
-      }
-      scheduleSelectionRead();
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setMenu(null);
-      }
-    };
-    const closeMenu = () => setMenu(null);
-    document.addEventListener("selectionchange", handleSelectionChange);
-    document.addEventListener("pointerup", handlePointerUp, true);
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("scroll", closeMenu, true);
-    window.addEventListener("resize", closeMenu);
-    return () => {
-      document.removeEventListener("selectionchange", handleSelectionChange);
-      document.removeEventListener("pointerup", handlePointerUp, true);
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("scroll", closeMenu, true);
-      window.removeEventListener("resize", closeMenu);
-      if (selectionReadFrameRef.current !== null) {
-        window.cancelAnimationFrame(selectionReadFrameRef.current);
-      }
-    };
-  }, [scheduleSelectionRead]);
-
-  const addSelectionToChat = () => {
-    if (!menu || menu.tooLong) {
-      return;
-    }
-    onAddToChat?.(menu.excerpt);
-    window.getSelection()?.removeAllRanges();
-    setMenu(null);
-  };
-
-  const menuNode = menu && onAddToChat
-    ? createPortal(
-        <button
-          ref={captureMenuButton}
-          type="button"
-          className="fixed z-[var(--z-popover,10100)] inline-flex max-w-[calc(100vw-24px)] items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-xl border border-border bg-popover px-3 py-2 text-xs font-medium text-popover-foreground shadow-lg transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:text-muted-foreground"
-          style={{
-            left: menuPosition?.left ?? 0,
-            top: menuPosition?.top ?? 0,
-            visibility: menuPosition ? "visible" : "hidden",
-          }}
-          disabled={menu.tooLong}
-          onMouseDown={(event) => event.preventDefault()}
-          onClick={addSelectionToChat}
-        >
-          <MessageSquarePlus aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
-          <span className="truncate">
-            {menu.tooLong
-              ? t("chatWorkspaceExcerptSelectionTooLong")
-              : t("chatWorkspaceAddToChat")}
-          </span>
-        </button>,
-        document.body,
-      )
-    : null;
-
   return (
-    <div
-      ref={rootRef}
+    <ChatTextSelectionAction
+      actionLabel={t("chatWorkspaceAddToChat")}
       className="h-full min-h-0"
-      data-workspace-text-selection-root="true"
-      onMouseUp={scheduleSelectionRead}
-      onKeyUp={scheduleSelectionRead}
+      maxCharacters={WORKSPACE_TEXT_EXCERPT_MAX_CHARACTERS}
+      selectionTooLongLabel={t("chatWorkspaceExcerptSelectionTooLong")}
+      onAddToChat={({ text }) => {
+        const excerpt = buildWorkspaceTextExcerpt({
+          path: filePath,
+          label: fileLabel,
+          selectedText: text,
+          sourceText,
+          sourceStartLine,
+        });
+        if (excerpt) onAddToChat?.(excerpt);
+      }}
     >
       {children}
-      {menuNode}
-    </div>
+    </ChatTextSelectionAction>
   );
 }

package/src/features/chat/features/workspace/hooks/use-workspace-explorer-layout.ts

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import {
+  CHAT_WORKSPACE_EXPLORER_COMPACT_THRESHOLD,
+  normalizeChatWorkspaceExplorerWidth,
+} from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
+
+export function useWorkspaceExplorerLayout({
+  fileActive,
+  projectFilesActive,
+  sessionProjectRoot,
+  sessionWorkingDir,
+}: {
+  fileActive: boolean;
+  projectFilesActive: boolean;
+  sessionProjectRoot: string | null;
+  sessionWorkingDir: string | null;
+}) {
+  const presenter = usePresenter();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const resizeRef = useRef<{ startX: number; startWidth: number; width: number } | null>(null);
+  const persistedExplorerWidth = useChatThreadStore((state) => state.snapshot.workspaceExplorerWidth);
+  const [compact, setCompact] = useState(false);
+  const [explorerDragWidth, setExplorerDragWidth] = useState<number | null>(null);
+  const [explorerOpen, setExplorerOpen] = useState(true);
+  const explorerWidth = explorerDragWidth ?? persistedExplorerWidth;
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === 'undefined') return;
+    const update = () => setCompact(node.getBoundingClientRect().width < CHAT_WORKSPACE_EXPLORER_COMPACT_THRESHOLD);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    setExplorerOpen(true);
+  }, [sessionProjectRoot, sessionWorkingDir]);
+
+  useEffect(() => {
+    if (!fileActive || !compact || !explorerOpen) return;
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setExplorerOpen(false);
+    };
+    window.addEventListener('keydown', closeOnEscape);
+    return () => window.removeEventListener('keydown', closeOnEscape);
+  }, [compact, explorerOpen, fileActive]);
+
+  const onResizeStart = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (compact || !fileActive) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    resizeRef.current = { startX: event.clientX, startWidth: explorerWidth, width: explorerWidth };
+    const onMove = (moveEvent: PointerEvent) => {
+      const resizing = resizeRef.current;
+      if (!resizing) return;
+      const width = normalizeChatWorkspaceExplorerWidth(resizing.startWidth + moveEvent.clientX - resizing.startX);
+      resizing.width = width;
+      setExplorerDragWidth(width);
+    };
+    const onUp = () => {
+      const width = resizeRef.current?.width;
+      if (typeof width === 'number') presenter.chatThreadManager.setWorkspaceExplorerWidth(width);
+      setExplorerDragWidth(null);
+      resizeRef.current = null;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  };
+
+  return {
+    compact,
+    containerRef,
+    explorerOpen,
+    explorerOverlay: fileActive && compact && explorerOpen,
+    explorerWidth,
+    onResizeStart,
+    setExplorerOpen,
+    showExplorer: projectFilesActive || (fileActive && explorerOpen),
+  };
+}