@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/chat/useChatPrependPagination.ts

@@ -0,0 +1,233 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+
+import {
+  isWorkbenchChatScrollContainerAtBottom,
+  resolveWorkbenchChatScrollContainer,
+  WORKBENCH_CHAT_LOAD_OLDER_ROOT_MARGIN,
+  WORKBENCH_CHAT_SCROLL_BOTTOM_THRESHOLD,
+} from './chatScroll';
+
+export interface UseChatPrependPaginationOptions {
+  autoScrollBottomThreshold?: number | undefined;
+  getScrollContainer?: ((listElement: HTMLDivElement | null) => HTMLElement | null) | undefined;
+  initialVisibleItemCount?: number | undefined;
+  isStreaming?: boolean | undefined;
+  itemCount: number;
+  lastItemId?: string | undefined;
+  /** Content revision for the trailing item (e.g. streaming chunk updates). */
+  lastItemRevision?: string | undefined;
+  paginationKey?: string | undefined;
+  rootMargin?: string | undefined;
+  /**
+   * - `true` (default): always scroll to the latest message
+   * - `'auto'`: scroll only when the container is already near the bottom
+   * - `false`: never auto-scroll
+   */
+  stickToBottom?: boolean | 'auto' | undefined;
+  visibleItemPageSize?: number | undefined;
+}
+
+export interface UseChatPrependPaginationResult {
+  bottomRef: RefObject<HTMLDivElement | null>;
+  displayedItemCount: number;
+  displayedStartIndex: number;
+  hasOlderItems: boolean;
+  hiddenItemCount: number;
+  isPaginationEnabled: boolean;
+  listRef: RefObject<HTMLDivElement | null>;
+  loadOlderItems: () => void;
+  topSentinelRef: RefObject<HTMLDivElement | null>;
+  visibleItemLimit: number;
+}
+
+export function useChatPrependPagination({
+  autoScrollBottomThreshold = WORKBENCH_CHAT_SCROLL_BOTTOM_THRESHOLD,
+  getScrollContainer = resolveWorkbenchChatScrollContainer,
+  initialVisibleItemCount,
+  isStreaming = false,
+  itemCount,
+  lastItemId = '',
+  lastItemRevision = '',
+  paginationKey = '',
+  rootMargin = WORKBENCH_CHAT_LOAD_OLDER_ROOT_MARGIN,
+  stickToBottom = true,
+  visibleItemPageSize,
+}: UseChatPrependPaginationOptions): UseChatPrependPaginationResult {
+  const listRef = useRef<HTMLDivElement>(null);
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const pendingPrependScrollRef = useRef<{
+    scrollHeight: number;
+    scrollTop: number;
+  } | null>(null);
+  const shouldStickToBottomRef = useRef(true);
+  const normalizedInitialVisibleItemCount =
+    initialVisibleItemCount !== undefined
+      ? Math.max(1, Math.floor(initialVisibleItemCount))
+      : itemCount;
+  const normalizedVisibleItemPageSize = Math.max(
+    1,
+    Math.floor(visibleItemPageSize ?? normalizedInitialVisibleItemCount),
+  );
+  const isPaginationEnabled =
+    initialVisibleItemCount !== undefined && itemCount > normalizedInitialVisibleItemCount;
+  const [pagination, setPagination] = useState({
+    key: paginationKey,
+    visibleItemLimit: normalizedInitialVisibleItemCount,
+  });
+  const visibleItemLimit = isPaginationEnabled
+    ? pagination.key === paginationKey
+      ? pagination.visibleItemLimit
+      : normalizedInitialVisibleItemCount
+    : itemCount;
+  const displayedStartIndex = Math.max(0, itemCount - visibleItemLimit);
+  const displayedItemCount = itemCount - displayedStartIndex;
+  const hiddenItemCount = displayedStartIndex;
+  const hasOlderItems = hiddenItemCount > 0;
+
+  const resolveScrollContainer = useCallback(
+    () => getScrollContainer(listRef.current),
+    [getScrollContainer],
+  );
+
+  const loadOlderItems = useCallback(() => {
+    if (!hasOlderItems || pendingPrependScrollRef.current) return;
+
+    const scrollContainer = resolveScrollContainer();
+    if (scrollContainer) {
+      pendingPrependScrollRef.current = {
+        scrollHeight: scrollContainer.scrollHeight,
+        scrollTop: scrollContainer.scrollTop,
+      };
+    }
+
+    setPagination((currentPagination) => {
+      const currentLimit =
+        currentPagination.key === paginationKey
+          ? currentPagination.visibleItemLimit
+          : normalizedInitialVisibleItemCount;
+
+      return {
+        key: paginationKey,
+        visibleItemLimit: Math.min(itemCount, currentLimit + normalizedVisibleItemPageSize),
+      };
+    });
+  }, [
+    hasOlderItems,
+    itemCount,
+    normalizedInitialVisibleItemCount,
+    normalizedVisibleItemPageSize,
+    paginationKey,
+    resolveScrollContainer,
+  ]);
+
+  useEffect(() => {
+    pendingPrependScrollRef.current = null;
+    shouldStickToBottomRef.current = true;
+  }, [paginationKey]);
+
+  useEffect(() => {
+    if (stickToBottom !== 'auto' || itemCount === 0) return undefined;
+
+    const scrollContainer = resolveScrollContainer();
+    if (!scrollContainer) return undefined;
+
+    const updateShouldStickToBottom = () => {
+      shouldStickToBottomRef.current = isWorkbenchChatScrollContainerAtBottom({
+        bottomThreshold: autoScrollBottomThreshold,
+        clientHeight: scrollContainer.clientHeight,
+        scrollHeight: scrollContainer.scrollHeight,
+        scrollTop: scrollContainer.scrollTop,
+      });
+    };
+
+    updateShouldStickToBottom();
+    scrollContainer.addEventListener('scroll', updateShouldStickToBottom, { passive: true });
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', updateShouldStickToBottom);
+    };
+  }, [autoScrollBottomThreshold, itemCount, paginationKey, resolveScrollContainer, stickToBottom]);
+
+  useEffect(() => {
+    if (!isPaginationEnabled || !hasOlderItems) return undefined;
+
+    const scrollContainer = resolveScrollContainer();
+    const sentinel = topSentinelRef.current;
+    if (!scrollContainer || !sentinel || typeof IntersectionObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          loadOlderItems();
+        }
+      },
+      {
+        root: scrollContainer,
+        rootMargin,
+        threshold: 0,
+      },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasOlderItems, isPaginationEnabled, loadOlderItems, resolveScrollContainer, rootMargin]);
+
+  useLayoutEffect(() => {
+    const pendingPrependScroll = pendingPrependScrollRef.current;
+    if (pendingPrependScroll) {
+      const scrollContainer = resolveScrollContainer();
+      if (scrollContainer) {
+        scrollContainer.scrollTop =
+          scrollContainer.scrollHeight -
+          pendingPrependScroll.scrollHeight +
+          pendingPrependScroll.scrollTop;
+
+        if (stickToBottom === 'auto') {
+          shouldStickToBottomRef.current = isWorkbenchChatScrollContainerAtBottom({
+            bottomThreshold: autoScrollBottomThreshold,
+            clientHeight: scrollContainer.clientHeight,
+            scrollHeight: scrollContainer.scrollHeight,
+            scrollTop: scrollContainer.scrollTop,
+          });
+        }
+      }
+
+      pendingPrependScrollRef.current = null;
+      return;
+    }
+
+    if (stickToBottom === false) {
+      return;
+    }
+
+    if (stickToBottom === 'auto' && !shouldStickToBottomRef.current) {
+      return;
+    }
+
+    bottomRef.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
+  }, [
+    autoScrollBottomThreshold,
+    displayedItemCount,
+    isStreaming,
+    lastItemId,
+    lastItemRevision,
+    resolveScrollContainer,
+    stickToBottom,
+  ]);
+
+  return {
+    bottomRef,
+    displayedItemCount,
+    displayedStartIndex,
+    hasOlderItems,
+    hiddenItemCount,
+    isPaginationEnabled,
+    listRef,
+    loadOlderItems,
+    topSentinelRef,
+    visibleItemLimit,
+  };
+}

package/src/workbench/chat/useChatRuntimeState.ts

@@ -1,4 +1,5 @@
 import { useEffect, useReducer } from 'react';
+import { reduceRuntimeChatMessages } from '@workbench-kit/runtime';
 import type {
   RuntimeChatMessage,
   RuntimeStatus,
@@ -15,23 +16,10 @@ function chatRuntimeReducer(
   state: ChatRuntimeState,
   action: WorkbenchRuntimeEvent,
 ): ChatRuntimeState {
-  if (action.type === 'message') {
-    const exists = state.messages.some((m) => m.id === action.message.id);
+  if (action.type === 'message' || action.type === 'message-delta') {
     return {
       ...state,
-      messages: exists
-        ? state.messages.map((m) => (m.id === action.message.id ? action.message : m))
-        : [...state.messages, action.message],
-    };
-  }
-
-  if (action.type === 'message-delta') {
-    const exists = state.messages.some((m) => m.id === action.message.id);
-    return {
-      ...state,
-      messages: exists
-        ? state.messages.map((m) => (m.id === action.message.id ? action.message : m))
-        : [...state.messages, action.message],
+      messages: reduceRuntimeChatMessages(state.messages, action),
     };
   }
 

package/src/workbench/chat/useSlashCommandSuggest.ts

@@ -1,12 +1,18 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 import {
   filterWorkbenchCommands,
   getNextWorkbenchCommandIndex,
+  isWorkbenchCommandRunnable,
   type WorkbenchCommandDescriptor,
 } from '../CommandPalette';
 import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
 
+type SlashCommandSuggestKeyboardEvent = Pick<
+  KeyboardEvent,
+  'key' | 'preventDefault' | 'shiftKey' | 'stopPropagation'
+>;
+
 export interface UseSlashCommandSuggestOptions {
   commands: readonly WorkbenchCommandDescriptor[];
   limit?: number;
@@ -15,11 +21,15 @@ export interface UseSlashCommandSuggestOptions {
 
 export interface UseSlashCommandSuggestResult {
   activeCommand: WorkbenchCommandDescriptor | undefined;
+  activeCommandId: string | undefined;
   activeCommandIndex: number;
   commandQuery: string;
   isOpen: boolean;
   suggestedCommands: readonly WorkbenchCommandDescriptor[];
-  handleKeyDown: (event: KeyboardEvent, onSelect: (commandId: string) => void) => void;
+  handleKeyDown: (
+    event: SlashCommandSuggestKeyboardEvent,
+    onSelect: (commandId: string) => void,
+  ) => void;
   setActiveCommandByKey: (commandId: string) => void;
   setActiveCommandIndex: (index: number) => void;
 }
@@ -43,38 +53,80 @@ export function useSlashCommandSuggest({
     suggestedCommands.length > 0 ? Math.min(activeCommandIndex, suggestedCommands.length - 1) : -1;
   const activeCommand =
     resolvedActiveIndex >= 0 ? suggestedCommands[resolvedActiveIndex] : undefined;
+  const activeCommandId = activeCommand?.id;
+
+  useEffect(() => {
+    setActiveCommandIndex(0);
+  }, [commandQuery, isOpen]);
 
   const handleKeyDown = useCallback(
-    (event: KeyboardEvent, onSelect: (commandId: string) => void) => {
+    (event: SlashCommandSuggestKeyboardEvent, onSelect: (commandId: string) => void) => {
       if (!isOpen) return;
 
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        setActiveCommandIndex((current) =>
-          getNextWorkbenchCommandIndex({
-            commands: suggestedCommands,
-            currentIndex: current,
-            direction: 'next',
-          }),
-        );
-        return;
-      }
+      if (
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowUp' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key === 'PageDown' ||
+        event.key === 'PageUp'
+      ) {
+        const direction =
+          event.key === 'ArrowUp' || event.key === 'End' || event.key === 'PageUp'
+            ? 'previous'
+            : 'next';
+        const stepCount = event.key === 'PageDown' || event.key === 'PageUp' ? 5 : 1;
 
-      if (event.key === 'ArrowUp') {
         event.preventDefault();
-        setActiveCommandIndex((current) =>
-          getNextWorkbenchCommandIndex({
-            commands: suggestedCommands,
-            currentIndex: current,
-            direction: 'previous',
-          }),
-        );
+        event.stopPropagation();
+        setActiveCommandIndex((current) => {
+          let nextIndex =
+            event.key === 'Home'
+              ? getNextWorkbenchCommandIndex({
+                  commands: suggestedCommands,
+                  currentIndex: -1,
+                  direction: 'next',
+                })
+              : event.key === 'End'
+                ? getNextWorkbenchCommandIndex({
+                    commands: suggestedCommands,
+                    currentIndex: 0,
+                    direction: 'previous',
+                  })
+                : current;
+
+          if (nextIndex < 0) {
+            nextIndex = suggestedCommands.findIndex((command) =>
+              isWorkbenchCommandRunnable(command),
+            );
+          }
+
+          if (event.key !== 'Home' && event.key !== 'End') {
+            for (let step = 0; step < stepCount; step += 1) {
+              const steppedIndex = getNextWorkbenchCommandIndex({
+                commands: suggestedCommands,
+                currentIndex: nextIndex,
+                direction,
+              });
+
+              if (steppedIndex < 0 || steppedIndex === nextIndex) break;
+              nextIndex = steppedIndex;
+            }
+          }
+
+          return nextIndex < 0 ? current : nextIndex;
+        });
         return;
       }
 
-      if (event.key === 'Enter' && !event.shiftKey && activeCommand) {
+      if (
+        (event.key === 'Enter' && !event.shiftKey && activeCommand) ||
+        (event.key === 'Tab' && activeCommand)
+      ) {
         event.preventDefault();
+        event.stopPropagation();
         onSelect(activeCommand.id);
+        return;
       }
     },
     [activeCommand, isOpen, suggestedCommands],
@@ -90,6 +142,7 @@ export function useSlashCommandSuggest({
 
   return {
     activeCommand,
+    activeCommandId,
     activeCommandIndex: resolvedActiveIndex,
     commandQuery,
     handleKeyDown,

package/src/workbench/chrome/index.css

@@ -0,0 +1,6 @@
+/* workbench/chrome feature styles */
+@import './workbench-desktop-titlebar.css';
+@import './workbench-host.css';
+@import './workbench-layout-regions.css';
+@import './workbench-platform-chrome.css';
+@import './workbench-shell-titlebar.css';

package/src/workbench/chrome/workbench-desktop-titlebar.css

@@ -0,0 +1,60 @@
+.ui-workbench-desktop-titlebar {
+  -webkit-app-region: drag;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ui-workbench-desktop-titlebar__leading,
+.ui-workbench-desktop-titlebar__center,
+.ui-workbench-desktop-titlebar__trailing {
+  -webkit-app-region: no-drag;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ui-workbench-desktop-titlebar__center {
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+.ui-workbench-desktop-titlebar__trailing {
+  flex: 0 0 auto;
+}
+
+.ui-workbench-desktop-titlebar__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.ui-workbench-desktop-titlebar__control {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-workbench-desktop-titlebar__control:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-desktop-titlebar__control--close:hover {
+  color: #ffffff;
+  background: var(--color-danger);
+}

package/src/workbench/chrome/workbench-host.css

@@ -0,0 +1,85 @@
+.ui-workbench-host-document,
+.ui-workbench-host,
+.ui-workbench-host-root {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-host {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--vscode-foreground, var(--color-text));
+  background: var(--vscode-editor-background, var(--color-bg));
+  font-family: var(--vscode-font-family, var(--font-family, system-ui, sans-serif));
+  font-size: var(--vscode-font-size, var(--font-size-base));
+}
+
+.ui-workbench-host-root {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 100%;
+}
+
+.ui-workbench-host-root .ide-root {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ide-root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--color-text);
+  background: var(--color-bg);
+  font-size: var(--font-size-base);
+  user-select: none;
+}
+
+.ide-root
+  :where(
+    input,
+    textarea,
+    select,
+    .message__bubble,
+    .md-content,
+    .workspace-editor__monaco,
+    .workspace-editor__monaco *
+  ) {
+  user-select: text;
+}
+
+.ide-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.ide-workbench-surface {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/*
+ * Keep the host inert: popovers/modals opt in via their own surfaces
+ * (e.g. .ui-modal-overlay fills the layer). Enabling pointer-events on the
+ * host whenever it is non-empty turns empty space into a full-workbench
+ * click shield and breaks focus for portaled filter/search inputs.
+ */
+.ide-workbench-overlays {
+  position: absolute;
+  inset: 0;
+  z-index: var(--ui-modal-z-index, 200);
+  pointer-events: none;
+}
+
+.workbench-modal-portal-host {
+  display: contents;
+}

package/src/workbench/chrome/workbench-layout-regions.css

@@ -0,0 +1,42 @@
+.ide-panel {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--panel-bg, var(--color-bg));
+}
+
+.workbench-editor-area,
+.workbench-primary-sidebar {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.workbench-auxiliary-side-bar {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--color-primary-side-bar-bg);
+  border-left: 1px solid var(--color-border);
+}
+
+.workbench-editor-area {
+  --panel-bg: var(--color-bg);
+  --panel-bg-75: var(--color-bg-75);
+  background: var(--panel-bg);
+}
+
+.workbench-primary-sidebar {
+  --panel-bg: var(--color-primary-side-bar-bg);
+  --panel-bg-75: var(--color-primary-side-bar-bg-75);
+  background: var(--panel-bg);
+}