@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/workbench/chat/ChatMessageList.tsx

@@ -1,48 +1,133 @@
-import { useEffect, useRef } from 'react';
-import { SideBarScrollSpacer } from '../../layout/SideBarViewFrame';
-import { ChatMessageItem } from './ChatMessageItem';
-import type { ChatMessage } from './types';
+import { Fragment, type ReactNode } from 'react';
+import { SideBarScrollSpacer } from '../../layout/sidebar';
+import { cx } from '../../utils/cx';
+import { ChatMessageItem, type ChatMessageItemProps } from './ChatMessageItem';
+import {
+  ChatMessageDateDivider,
+  resolveChatMessageTimestamp,
+  shouldShowChatMessageDateDivider,
+  shouldShowChatMessageTimestamp,
+  shouldShowPeerChatSenderLabel,
+} from './chatMessageMeta';
+import type { ChatMessage, ChatMessageLayout } from './types';
+import { useChatPrependPagination } from './useChatPrependPagination';
 
 export interface ChatMessageListProps {
   assistantLabel?: string;
   emptyLabel?: string;
+  initialVisibleMessageCount?: number;
   isStreaming?: boolean;
+  loadOlderLabel?: ReactNode | ((hiddenMessageCount: number) => ReactNode);
+  messageLayout?: ChatMessageLayout;
+  /**
+   * Host slot rendered inside the message list area after messages, or as a
+   * sibling before the empty state when there are no messages.
+   */
+  messageListAddon?: ReactNode;
   messages: ChatMessage[];
+  onCommandProposalAllow?: ChatMessageItemProps['onCommandProposalAllow'];
+  onCommandProposalDeny?: ChatMessageItemProps['onCommandProposalDeny'];
+  paginationKey?: string;
+  userLabel?: string;
+  visibleMessagePageSize?: number;
 }
 
 export function ChatMessageList({
   assistantLabel,
   emptyLabel = 'How can I help?',
+  initialVisibleMessageCount,
   isStreaming = false,
+  loadOlderLabel = 'Show older messages',
+  messageLayout = 'assistant',
+  messageListAddon,
   messages,
+  onCommandProposalAllow,
+  onCommandProposalDeny,
+  paginationKey = '',
+  userLabel,
+  visibleMessagePageSize,
 }: ChatMessageListProps) {
-  const bottomRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
-  }, [isStreaming, messages.length]);
+  const emptyIconClass =
+    messageLayout === 'peer' ? 'codicon-comment-discussion' : 'codicon-sparkle';
+  const resolvedUserLabel = userLabel ?? (messageLayout === 'peer' ? 'Jay' : undefined);
+  const lastMessageId = messages.length > 0 ? (messages[messages.length - 1]?.id ?? '') : '';
+  const {
+    bottomRef,
+    displayedStartIndex,
+    hasOlderItems: hasOlderMessages,
+    hiddenItemCount: hiddenMessageCount,
+    isPaginationEnabled,
+    listRef,
+    loadOlderItems: loadOlderMessages,
+    topSentinelRef,
+  } = useChatPrependPagination({
+    initialVisibleItemCount: initialVisibleMessageCount,
+    isStreaming,
+    itemCount: messages.length,
+    lastItemId: lastMessageId,
+    paginationKey,
+    visibleItemPageSize: visibleMessagePageSize,
+  });
+  const displayedMessages = messages.slice(displayedStartIndex);
 
   if (messages.length === 0) {
     return (
-      <div className="message-empty">
-        <i className="codicon codicon-sparkle" />
-        <span>{emptyLabel}</span>
-      </div>
+      <>
+        {messageListAddon}
+        <div className={cx('message-empty', 'ui-panel-centered-state')}>
+          <i className={cx('codicon', emptyIconClass)} />
+          <span>{emptyLabel}</span>
+        </div>
+      </>
     );
   }
 
   return (
-    <div className="message-list">
-      {messages.map((message, index) => (
-        <ChatMessageItem
-          key={message.id}
-          assistantLabel={assistantLabel}
-          isStreaming={
-            isStreaming && index === messages.length - 1 && message.source === 'assistant'
-          }
-          message={message}
-        />
-      ))}
+    <div ref={listRef} className="message-list">
+      {hasOlderMessages ? (
+        <div ref={topSentinelRef} className="message-list__history-loader">
+          <button type="button" className="message-list__load-older" onClick={loadOlderMessages}>
+            {typeof loadOlderLabel === 'function'
+              ? loadOlderLabel(hiddenMessageCount)
+              : loadOlderLabel}
+            <span className="message-list__load-older-count">({hiddenMessageCount})</span>
+          </button>
+        </div>
+      ) : isPaginationEnabled ? (
+        <div ref={topSentinelRef} aria-hidden className="message-list__top-sentinel" />
+      ) : null}
+      {displayedMessages.map((message, displayedIndex) => {
+        const index = displayedStartIndex + displayedIndex;
+        const messageTimestamp = resolveChatMessageTimestamp(message);
+
+        return (
+          <Fragment key={message.id}>
+            {shouldShowChatMessageDateDivider(messages, index) && messageTimestamp ? (
+              <ChatMessageDateDivider timestamp={messageTimestamp} />
+            ) : null}
+            <ChatMessageItem
+              assistantLabel={assistantLabel}
+              isStreaming={
+                isStreaming && index === messages.length - 1 && message.source === 'assistant'
+              }
+              layout={messageLayout}
+              message={message}
+              onCommandProposalAllow={onCommandProposalAllow}
+              onCommandProposalDeny={onCommandProposalDeny}
+              showSenderLabel={
+                messageLayout !== 'peer' ||
+                shouldShowPeerChatSenderLabel(messages, index, {
+                  assistantLabel,
+                  userLabel: resolvedUserLabel,
+                })
+              }
+              showTimestamp={shouldShowChatMessageTimestamp(messages, index)}
+              userLabel={resolvedUserLabel}
+            />
+          </Fragment>
+        );
+      })}
+      {messageListAddon}
       <SideBarScrollSpacer ref={bottomRef} />
     </div>
   );

package/src/workbench/chat/ChatPanel.tsx

@@ -1,4 +1,6 @@
-import { SideBarViewFrame } from '../../layout/SideBarViewFrame';
+import { useRef, useState, type DragEvent, type ReactNode, type Ref } from 'react';
+import { SideBarViewFrame } from '../../layout/sidebar';
+import { cx } from '../../utils/cx';
 import { ChatComposer, type ChatComposerProps } from './ChatComposer';
 import { ChatMessageList, type ChatMessageListProps } from './ChatMessageList';
 
@@ -8,48 +10,168 @@ export interface ChatPanelProps
     Pick<
       ChatComposerProps,
       | 'disabled'
+      | 'commandLabel'
+      | 'commandSuggestPopover'
       | 'isRunning'
       | 'onCancel'
+      | 'onCommandClick'
+      | 'onKeyDown'
       | 'onSubmit'
       | 'onValueChange'
       | 'placeholder'
       | 'showTools'
       | 'value'
     > {
+  className?: string;
+  composerRef?: Ref<HTMLTextAreaElement>;
+  /** Label shown on the file-drop overlay. Defaults to "Drop files to attach". */
+  filesDropLabel?: string;
+  headerAddon?: ReactNode;
+  /** Called when files are dropped onto the panel (disabled while `disabled` or `isRunning`). */
+  onFilesDrop?: (files: File[]) => void;
+  /**
+   * Wrap or replace the default `<ChatMessageList />` so hosts can inject
+   * hybrid timelines around the kit list.
+   */
+  renderMessageList?: (defaultList: ReactNode) => ReactNode;
+  /**
+   * Wrap or replace the default `<ChatComposer />` while keeping panel chrome
+   * and file-drop overlay behavior.
+   */
+  renderComposer?: (defaultComposer: ReactNode) => ReactNode;
   title?: string;
 }
 
+function dataTransferHasFiles(dataTransfer: DataTransfer | null | undefined): boolean {
+  if (!dataTransfer) {
+    return false;
+  }
+
+  return Array.from(dataTransfer.types).includes('Files');
+}
+
 export function ChatPanel({
+  className,
+  commandLabel,
+  commandSuggestPopover,
+  composerRef,
+  filesDropLabel = 'Drop files to attach',
+  headerAddon,
+  onFilesDrop,
+  renderComposer,
+  renderMessageList,
   title = 'Chat',
   value,
   onValueChange,
   onSubmit,
   onCancel,
+  onCommandClick,
+  onKeyDown,
   placeholder,
   disabled,
   isRunning,
   showTools,
   ...messageListProps
 }: ChatPanelProps) {
+  const [isFileDragActive, setIsFileDragActive] = useState(false);
+  const dragDepthRef = useRef(0);
+  const dropEnabled = Boolean(onFilesDrop) && !disabled && !isRunning;
+
+  const resetFileDragState = () => {
+    dragDepthRef.current = 0;
+    setIsFileDragActive(false);
+  };
+
+  const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
+    if (!dropEnabled || !dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+    dragDepthRef.current += 1;
+    setIsFileDragActive(true);
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    if (!dropEnabled || !dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    if (!dropEnabled || !dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) {
+      setIsFileDragActive(false);
+    }
+  };
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    if (!dropEnabled || !dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+    resetFileDragState();
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length > 0) {
+      onFilesDrop?.(files);
+    }
+  };
+
+  const defaultMessageList = <ChatMessageList isStreaming={isRunning} {...messageListProps} />;
+  const messageList = renderMessageList
+    ? renderMessageList(defaultMessageList)
+    : defaultMessageList;
+
+  const defaultComposer = (
+    <ChatComposer
+      ref={composerRef}
+      commandLabel={commandLabel}
+      commandSuggestPopover={commandSuggestPopover}
+      disabled={disabled}
+      isRunning={isRunning}
+      placeholder={placeholder}
+      showTools={showTools}
+      value={value}
+      onCancel={onCancel}
+      onCommandClick={onCommandClick}
+      onKeyDown={onKeyDown}
+      onSubmit={onSubmit}
+      onValueChange={onValueChange}
+    />
+  );
+  const composer = renderComposer ? renderComposer(defaultComposer) : defaultComposer;
+
   return (
-    <SideBarViewFrame
-      className="chat-side-bar-view"
-      footer={
-        <ChatComposer
-          disabled={disabled}
-          isRunning={isRunning}
-          placeholder={placeholder}
-          showTools={showTools}
-          value={value}
-          onCancel={onCancel}
-          onSubmit={onSubmit}
-          onValueChange={onValueChange}
-        />
-      }
-      footerPlacement="overlay"
-      title={title}
+    <div
+      className={cx('chat-panel-drop-target', isFileDragActive && 'chat-panel-drop-target--active')}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
     >
-      <ChatMessageList isStreaming={isRunning} {...messageListProps} />
-    </SideBarViewFrame>
+      <SideBarViewFrame
+        className={cx('chat-sidebar-view', className)}
+        footer={composer}
+        footerPlacement="overlay"
+        headerAddon={headerAddon}
+        title={title}
+      >
+        {messageList}
+      </SideBarViewFrame>
+      {isFileDragActive ? (
+        <div aria-hidden className="chat-panel-drop-overlay">
+          {filesDropLabel}
+        </div>
+      ) : null}
+    </div>
   );
 }

package/src/workbench/chat/ChatPhasedRunProgress.tsx

@@ -0,0 +1,275 @@
+import { useId, useState, type ReactNode } from 'react';
+
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+import {
+  getWorkbenchStatusDescriptor,
+  type WorkbenchStatus,
+  type WorkbenchStatusVariant,
+} from '../shell/status';
+
+/** Product-neutral phase lifecycle for run-progress UIs. */
+export type ChatRunPhaseStatus =
+  'pending' | 'running' | 'completed' | 'failed' | 'skipped' | 'cancelled';
+
+export interface ChatRunPhase {
+  readonly id: string;
+  readonly label: string;
+  readonly status: ChatRunPhaseStatus;
+  /** Optional detail line (path, count, error summary — host-owned copy). */
+  readonly detail?: string;
+}
+
+export interface ChatPhasedRunProgressAction {
+  readonly id: string;
+  readonly label: string;
+  readonly onClick: () => void;
+  readonly disabled?: boolean;
+  readonly variant?: 'default' | 'primary' | 'danger';
+}
+
+/**
+ * Overridable chrome strings for locale-aware hosts. Unset keys keep English defaults.
+ */
+export interface ChatPhasedRunProgressLabels {
+  readonly expand?: string;
+  readonly collapse?: string;
+  readonly noPhases?: string;
+  readonly phasesComplete?: (completed: number, total: number) => string;
+  /** Summary badge label for the aggregate run status. */
+  readonly summaryStatus?: (status: ChatRunPhaseStatus) => string;
+  /** Per-phase status badge label (also used when `summaryStatus` is omitted). */
+  readonly getStatusLabel?: (status: ChatRunPhaseStatus) => string;
+}
+
+function toBadgeVariant(variant: WorkbenchStatusVariant): 'accent' | 'muted' | 'danger' {
+  if (variant === 'danger' || variant === 'warning') {
+    return 'danger';
+  }
+  if (variant === 'muted' || variant === 'neutral') {
+    return 'muted';
+  }
+  return 'accent';
+}
+
+export interface ChatPhasedRunProgressProps {
+  readonly title?: string;
+  readonly phases: readonly ChatRunPhase[];
+  /** Controlled expand state; omit for uncontrolled default. */
+  readonly expanded?: boolean;
+  readonly defaultExpanded?: boolean;
+  readonly onExpandedChange?: (expanded: boolean) => void;
+  readonly actions?: readonly ChatPhasedRunProgressAction[];
+  /** Extra footer content (host-owned). */
+  readonly footer?: ReactNode;
+  readonly className?: string;
+  /** Locale-aware chrome labels; defaults preserve English copy. */
+  readonly labels?: ChatPhasedRunProgressLabels;
+}
+
+function mapPhaseStatusToWorkbenchStatus(status: ChatRunPhaseStatus): WorkbenchStatus {
+  switch (status) {
+    case 'pending':
+      return 'waiting';
+    case 'running':
+      return 'running';
+    case 'completed':
+      return 'completed';
+    case 'failed':
+      return 'failed';
+    case 'skipped':
+      return 'idle';
+    case 'cancelled':
+      return 'cancelled';
+    default: {
+      const _exhaustive: never = status;
+      return _exhaustive;
+    }
+  }
+}
+
+const DEFAULT_SUMMARY_STATUS_LABELS: Record<ChatRunPhaseStatus, string> = {
+  pending: 'Pending',
+  running: 'Running',
+  completed: 'Completed',
+  failed: 'Failed',
+  skipped: 'Idle',
+  cancelled: 'Cancelled',
+};
+
+function resolveStatusLabel(
+  status: ChatRunPhaseStatus,
+  labels: ChatPhasedRunProgressLabels | undefined,
+  prefer: 'summary' | 'phase' = 'summary',
+): string {
+  const primary =
+    prefer === 'summary'
+      ? (labels?.summaryStatus?.(status) ?? labels?.getStatusLabel?.(status))
+      : (labels?.getStatusLabel?.(status) ?? labels?.summaryStatus?.(status));
+  if (primary) {
+    return primary;
+  }
+  if (status === 'skipped') {
+    return getWorkbenchStatusDescriptor(mapPhaseStatusToWorkbenchStatus(status)).label;
+  }
+  return (
+    DEFAULT_SUMMARY_STATUS_LABELS[status] ??
+    getWorkbenchStatusDescriptor(mapPhaseStatusToWorkbenchStatus(status)).label
+  );
+}
+
+function summarizePhases(
+  phases: readonly ChatRunPhase[],
+  labels: ChatPhasedRunProgressLabels | undefined,
+): {
+  label: string;
+  status: ChatRunPhaseStatus;
+} {
+  if (phases.some((phase) => phase.status === 'failed')) {
+    return { label: resolveStatusLabel('failed', labels, 'summary'), status: 'failed' };
+  }
+  if (phases.some((phase) => phase.status === 'running')) {
+    return { label: resolveStatusLabel('running', labels, 'summary'), status: 'running' };
+  }
+  if (phases.some((phase) => phase.status === 'cancelled')) {
+    return { label: resolveStatusLabel('cancelled', labels, 'summary'), status: 'cancelled' };
+  }
+  if (
+    phases.length > 0 &&
+    phases.every((phase) => phase.status === 'completed' || phase.status === 'skipped')
+  ) {
+    return { label: resolveStatusLabel('completed', labels, 'summary'), status: 'completed' };
+  }
+  return { label: resolveStatusLabel('pending', labels, 'summary'), status: 'pending' };
+}
+
+function resolvePhaseBadgeLabel(
+  status: ChatRunPhaseStatus,
+  labels: ChatPhasedRunProgressLabels | undefined,
+): string {
+  if (labels?.getStatusLabel) {
+    return labels.getStatusLabel(status);
+  }
+  // Pending maps to workbench "waiting" / "Waiting"; keep summary vocabulary ("Pending").
+  if (status === 'pending') {
+    return resolveStatusLabel('pending', labels, 'summary');
+  }
+  return getWorkbenchStatusDescriptor(mapPhaseStatusToWorkbenchStatus(status)).label;
+}
+
+/**
+ * Product-neutral phased run-progress chrome for chat footers / hybrid timelines.
+ * Hosts own phase ids, copy, and action handlers — no workflow semantics in kit.
+ */
+export function ChatPhasedRunProgress({
+  title = 'Run progress',
+  phases,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  actions,
+  footer,
+  className,
+  labels,
+}: ChatPhasedRunProgressProps) {
+  const panelId = useId();
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpanded = expanded ?? uncontrolledExpanded;
+  const summary = summarizePhases(phases, labels);
+  const summaryDescriptor = getWorkbenchStatusDescriptor(
+    mapPhaseStatusToWorkbenchStatus(summary.status),
+  );
+  const expandLabel = labels?.expand ?? 'Expand';
+  const collapseLabel = labels?.collapse ?? 'Collapse';
+  const noPhasesLabel = labels?.noPhases ?? 'No phases';
+  const completedCount = phases.filter(
+    (phase) => phase.status === 'completed' || phase.status === 'skipped',
+  ).length;
+  const phasesCompleteLabel =
+    labels?.phasesComplete?.(completedCount, phases.length) ??
+    `${completedCount}/${phases.length} phases complete`;
+
+  const setExpanded = (next: boolean) => {
+    if (expanded === undefined) {
+      setUncontrolledExpanded(next);
+    }
+    onExpandedChange?.(next);
+  };
+
+  return (
+    <section
+      className={cx('chat-phased-run-progress', className)}
+      data-expanded={isExpanded ? 'true' : 'false'}
+      data-status={summary.status}
+    >
+      <header className="chat-phased-run-progress__header">
+        <div className="chat-phased-run-progress__title-group">
+          <h3 className="chat-phased-run-progress__title">{title}</h3>
+          <Badge variant={toBadgeVariant(summaryDescriptor.variant)}>{summary.label}</Badge>
+        </div>
+        <Button
+          type="button"
+          variant="default"
+          compact
+          aria-expanded={isExpanded}
+          aria-controls={panelId}
+          onClick={() => setExpanded(!isExpanded)}
+        >
+          {isExpanded ? collapseLabel : expandLabel}
+        </Button>
+      </header>
+
+      {isExpanded ? (
+        <ol id={panelId} className="chat-phased-run-progress__phases">
+          {phases.map((phase) => {
+            const descriptor = getWorkbenchStatusDescriptor(
+              mapPhaseStatusToWorkbenchStatus(phase.status),
+            );
+            return (
+              <li
+                key={phase.id}
+                className="chat-phased-run-progress__phase"
+                data-phase-id={phase.id}
+                data-status={phase.status}
+              >
+                <div className="chat-phased-run-progress__phase-main">
+                  <span className="chat-phased-run-progress__phase-label">{phase.label}</span>
+                  <Badge variant={toBadgeVariant(descriptor.variant)}>
+                    {resolvePhaseBadgeLabel(phase.status, labels)}
+                  </Badge>
+                </div>
+                {phase.detail ? (
+                  <p className="chat-phased-run-progress__phase-detail">{phase.detail}</p>
+                ) : null}
+              </li>
+            );
+          })}
+        </ol>
+      ) : (
+        <p className="chat-phased-run-progress__summary" id={panelId}>
+          {phases.length === 0 ? noPhasesLabel : phasesCompleteLabel}
+        </p>
+      )}
+
+      {actions && actions.length > 0 ? (
+        <div className="chat-phased-run-progress__actions">
+          {actions.map((action) => (
+            <Button
+              key={action.id}
+              type="button"
+              compact
+              variant={action.variant ?? 'default'}
+              disabled={action.disabled}
+              onClick={action.onClick}
+            >
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+
+      {footer ? <div className="chat-phased-run-progress__footer">{footer}</div> : null}
+    </section>
+  );
+}