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

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,159 @@ export interface ChatPanelProps
     Pick<
       ChatComposerProps,
       | 'disabled'
+      | 'commandLabel'
+      | 'commandSuggestPopover'
       | 'isRunning'
       | 'onCancel'
+      | 'onCommandClick'
+      | 'onKeyDown'
       | 'onSubmit'
       | 'onValueChange'
       | 'placeholder'
       | 'showTools'
       | 'value'
     > {
+  className?: string | undefined;
+  composerRef?: Ref<HTMLTextAreaElement> | undefined;
+  /** Label shown on the file-drop overlay. Defaults to "Drop files to attach". */
+  filesDropLabel?: string | undefined;
+  headerAddon?: ReactNode | undefined;
+  /** Called when files are dropped onto the panel (disabled while `disabled` or `isRunning`). */
+  onFilesDrop?: ((files: File[]) => void) | undefined;
+  /**
+   * Wrap or replace the default `<ChatMessageList />` so hosts can inject
+   * hybrid timelines around the kit list.
+   */
+  renderMessageList?: ((defaultList: ReactNode) => ReactNode) | undefined;
   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,
+  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;
+
   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={
+          <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}
+          />
+        }
+        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,202 @@
+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 '../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';
+}
+
+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;
+}
+
+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;
+    }
+  }
+}
+
+function summarizePhases(phases: readonly ChatRunPhase[]): {
+  label: string;
+  status: ChatRunPhaseStatus;
+} {
+  if (phases.some((phase) => phase.status === 'failed')) {
+    return { label: 'Failed', status: 'failed' };
+  }
+  if (phases.some((phase) => phase.status === 'running')) {
+    return { label: 'Running', status: 'running' };
+  }
+  if (phases.some((phase) => phase.status === 'cancelled')) {
+    return { label: 'Cancelled', status: 'cancelled' };
+  }
+  if (
+    phases.length > 0 &&
+    phases.every((phase) => phase.status === 'completed' || phase.status === 'skipped')
+  ) {
+    return { label: 'Completed', status: 'completed' };
+  }
+  return { label: 'Pending', status: 'pending' };
+}
+
+/**
+ * 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,
+}: ChatPhasedRunProgressProps) {
+  const panelId = useId();
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpanded = expanded ?? uncontrolledExpanded;
+  const summary = summarizePhases(phases);
+  const summaryDescriptor = getWorkbenchStatusDescriptor(
+    mapPhaseStatusToWorkbenchStatus(summary.status),
+  );
+
+  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 ? 'Collapse' : 'Expand'}
+        </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)}>{descriptor.label}</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
+            ? 'No phases'
+            : `${phases.filter((phase) => phase.status === 'completed' || phase.status === 'skipped').length}/${phases.length} phases complete`}
+        </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>
+  );
+}

package/src/workbench/chat/ChatRenameDialog.tsx

@@ -0,0 +1,77 @@
+import { useId, useState } from 'react';
+import { Modal } from '../../modal/Modal';
+import { Button } from '../../primitives/button';
+import { TextInput } from '../../primitives/text-input';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+import { defaultWorkbenchChatConversationLabels } from './chatConversation';
+
+export interface ChatRenameDialogProps {
+  conversation: WorkbenchChatConversation;
+  labels?: Partial<WorkbenchChatConversationLabels> | undefined;
+  onCancel: () => void;
+  onRename: (title: string) => void;
+}
+
+export function ChatRenameDialog({
+  conversation,
+  labels: labelOverrides,
+  onCancel,
+  onRename,
+}: ChatRenameDialogProps) {
+  const labels = { ...defaultWorkbenchChatConversationLabels, ...labelOverrides };
+  const inputId = useId();
+  const [title, setTitle] = useState(conversation.title);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = () => {
+    const trimmed = title.trim();
+    if (!trimmed) {
+      setError(labels.renameEmptyError);
+      return;
+    }
+
+    onRename(trimmed);
+  };
+
+  return (
+    <Modal
+      bodyClassName="chat-rename-dialog__body"
+      className="chat-rename-dialog"
+      closeLabel={labels.closeRename}
+      title={labels.renameDialogTitle}
+      onClose={onCancel}
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+      footer={
+        <>
+          <Button type="button" onClick={onCancel}>
+            {labels.cancel}
+          </Button>
+          <Button type="submit" variant="primary">
+            {labels.renameSubmit}
+          </Button>
+        </>
+      }
+    >
+      <label className="chat-rename-dialog__label" htmlFor={inputId}>
+        {labels.renameFieldLabel}
+      </label>
+      <TextInput
+        autoFocus
+        controlWidth="full"
+        id={inputId}
+        value={title}
+        onChange={(event) => {
+          setTitle(event.currentTarget.value);
+          if (error) setError(null);
+        }}
+      />
+      {error ? <p className="chat-rename-dialog__error">{error}</p> : null}
+    </Modal>
+  );
+}