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

package/src/workbench/chat/chat.css

@@ -0,0 +1,3 @@
+/* workbench/chat feature styles — Plan A import hub */
+@import './chat-conversation.css';
+@import './chat-ui.css';

package/src/workbench/chat/chatConversation.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+export interface WorkbenchChatConversation {
+  id: string;
+  title: string;
+  /** Short secondary line shown in history menu rows. */
+  metaSummary?: string;
+  /** Tooltip content for the active conversation pill. */
+  metaTooltip?: ReactNode;
+}
+
+export interface WorkbenchChatConversationLabels {
+  ariaHistoryMenu: string;
+  cancel: string;
+  cannotDeleteLast: string;
+  closeRename: string;
+  delete: string;
+  deleteChat: (title: string) => string;
+  historyTitle: (title: string) => string;
+  moreActions: string;
+  newChat: string;
+  newChatAction: string;
+  rename: string;
+  renameDialogTitle: string;
+  renameEmptyError: string;
+  renameFieldLabel: string;
+  renameSubmit: string;
+}
+
+export const defaultWorkbenchChatConversationLabels: WorkbenchChatConversationLabels = {
+  ariaHistoryMenu: 'Chat history',
+  cancel: 'Cancel',
+  cannotDeleteLast: 'Cannot delete the last chat',
+  closeRename: 'Close rename dialog',
+  delete: 'Delete',
+  deleteChat: (title) => `Delete chat: ${title}`,
+  historyTitle: (title) => `Chat history: ${title}`,
+  moreActions: 'Chat actions',
+  newChat: 'New chat',
+  newChatAction: 'New chat',
+  rename: 'Rename',
+  renameDialogTitle: 'Rename chat',
+  renameEmptyError: 'Enter a chat name.',
+  renameFieldLabel: 'Chat name',
+  renameSubmit: 'Rename',
+};

package/src/workbench/chat/chatHistoryRowMenuItems.ts

@@ -0,0 +1,29 @@
+import type { ContextMenuItem } from '../../overlay/ContextMenu';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+
+export function buildChatHistoryRowMenuItems(
+  conversation: WorkbenchChatConversation,
+  labels: WorkbenchChatConversationLabels,
+  canDeleteAny: boolean,
+  onRename: () => void,
+  onDelete: () => void,
+): ContextMenuItem[] {
+  return [
+    {
+      icon: 'codicon-edit',
+      label: labels.rename,
+      onSelect: onRename,
+    },
+    { type: 'separator', id: `delete-separator-${conversation.id}` },
+    {
+      danger: true,
+      disabled: !canDeleteAny,
+      icon: 'codicon-trash',
+      label: labels.delete,
+      onSelect: onDelete,
+    },
+  ];
+}

package/src/workbench/chat/chatMessageMeta.tsx

@@ -0,0 +1,252 @@
+import type { ChatMessage } from './types';
+
+const chatMessageTimeFormatter = new Intl.DateTimeFormat('en-US', {
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const chatMessageDateFormatter = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  month: 'long',
+});
+
+const chatMessageDateWithYearFormatter = new Intl.DateTimeFormat('en-US', {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+});
+
+const MILLISECONDS_PER_DAY = 86_400_000;
+
+export type ChatMessageTimestampInput = number | Date | string;
+
+export function normalizeChatMessageTimestamp(
+  value: ChatMessageTimestampInput | undefined,
+): Date | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return undefined;
+  }
+
+  return date;
+}
+
+export function resolveChatMessageTimestamp(
+  message: Pick<ChatMessage, 'createdAt' | 'timestamp'>,
+): ChatMessageTimestampInput | undefined {
+  if (message.timestamp !== undefined) {
+    return message.timestamp;
+  }
+
+  if (message.createdAt !== undefined) {
+    return message.createdAt;
+  }
+
+  return undefined;
+}
+
+export function getChatMessageCalendarDayKey(value: ChatMessageTimestampInput | undefined): string {
+  const date = normalizeChatMessageTimestamp(value);
+  if (!date) {
+    return '';
+  }
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function startOfLocalCalendarDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function formatChatMessageDateLabel(
+  value: ChatMessageTimestampInput,
+  now: Date = new Date(),
+): string {
+  const date = normalizeChatMessageTimestamp(value);
+  if (!date) {
+    return '';
+  }
+
+  const messageDay = startOfLocalCalendarDay(date);
+  const today = startOfLocalCalendarDay(now);
+  const dayOffset = Math.round((today.getTime() - messageDay.getTime()) / MILLISECONDS_PER_DAY);
+
+  if (dayOffset === 0) {
+    return 'Today';
+  }
+
+  if (dayOffset === 1) {
+    return 'Yesterday';
+  }
+
+  if (date.getFullYear() === now.getFullYear()) {
+    return chatMessageDateFormatter.format(date);
+  }
+
+  return chatMessageDateWithYearFormatter.format(date);
+}
+
+export function formatChatMessageTime(value: ChatMessageTimestampInput): string {
+  const date = normalizeChatMessageTimestamp(value);
+  if (!date) {
+    return '';
+  }
+
+  return chatMessageTimeFormatter.format(date);
+}
+
+export function getChatMessageTimeMinuteKey(value: ChatMessageTimestampInput | undefined): string {
+  if (value === undefined) {
+    return '';
+  }
+
+  return formatChatMessageTime(value);
+}
+
+export function toChatMessageTimeDateTime(value: ChatMessageTimestampInput): string {
+  const date = normalizeChatMessageTimestamp(value);
+  return date?.toISOString() ?? '';
+}
+
+export function getPeerChatSenderKey(
+  message: ChatMessage,
+  options: {
+    assistantLabel?: string;
+    userLabel?: string;
+  } = {},
+): string {
+  if (message.source === 'user') {
+    return `user:${message.label ?? options.userLabel ?? 'user'}`;
+  }
+
+  return `assistant:${message.label ?? options.assistantLabel ?? 'assistant'}`;
+}
+
+export function shouldShowPeerChatSenderLabel(
+  messages: readonly ChatMessage[],
+  index: number,
+  options: {
+    assistantLabel?: string;
+    userLabel?: string;
+  } = {},
+): boolean {
+  const message = messages[index];
+  if (!message) {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousMessage = messages[index - 1];
+  if (!previousMessage) {
+    return true;
+  }
+
+  return getPeerChatSenderKey(message, options) !== getPeerChatSenderKey(previousMessage, options);
+}
+
+export function shouldShowChatMessageTimestamp(
+  messages: readonly ChatMessage[],
+  index: number,
+): boolean {
+  const message = messages[index];
+  if (!message) {
+    return false;
+  }
+
+  const timeKey = getChatMessageTimeMinuteKey(resolveChatMessageTimestamp(message));
+  if (!timeKey) {
+    return false;
+  }
+
+  const nextMessage = messages[index + 1];
+  if (!nextMessage) {
+    return true;
+  }
+
+  const nextTimeKey = getChatMessageTimeMinuteKey(resolveChatMessageTimestamp(nextMessage));
+  if (!nextTimeKey) {
+    return true;
+  }
+
+  return timeKey !== nextTimeKey;
+}
+
+function getPreviousTimestampedDayKey(messages: readonly ChatMessage[], index: number): string {
+  for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+    const dayKey = getChatMessageCalendarDayKey(resolveChatMessageTimestamp(messages[cursor]));
+    if (dayKey) {
+      return dayKey;
+    }
+  }
+
+  return '';
+}
+
+export function shouldShowChatMessageDateDivider(
+  messages: readonly ChatMessage[],
+  index: number,
+): boolean {
+  const message = messages[index];
+  if (!message) {
+    return false;
+  }
+
+  const currentDayKey = getChatMessageCalendarDayKey(resolveChatMessageTimestamp(message));
+  if (!currentDayKey) {
+    return false;
+  }
+
+  const previousDayKey = getPreviousTimestampedDayKey(messages, index);
+  if (!previousDayKey) {
+    return true;
+  }
+
+  return currentDayKey !== previousDayKey;
+}
+
+export interface ChatMessageTimeProps {
+  className?: string;
+  timestamp: ChatMessageTimestampInput;
+}
+
+export function ChatMessageTime({ className, timestamp }: ChatMessageTimeProps) {
+  const label = formatChatMessageTime(timestamp);
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <time className={className} dateTime={toChatMessageTimeDateTime(timestamp)}>
+      {label}
+    </time>
+  );
+}
+
+export interface ChatMessageDateDividerProps {
+  timestamp: ChatMessageTimestampInput;
+}
+
+export function ChatMessageDateDivider({ timestamp }: ChatMessageDateDividerProps) {
+  const label = formatChatMessageDateLabel(timestamp);
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <div aria-label={label} className="message-date-divider" role="separator">
+      <time className="message-date-divider__label" dateTime={toChatMessageTimeDateTime(timestamp)}>
+        {label}
+      </time>
+    </div>
+  );
+}

package/src/workbench/chat/chatScroll.ts

@@ -0,0 +1,22 @@
+export const WORKBENCH_CHAT_SCROLL_BOTTOM_THRESHOLD = 72;
+export const WORKBENCH_CHAT_LOAD_OLDER_ROOT_MARGIN = '160px 0px 0px 0px';
+
+export function resolveWorkbenchChatScrollContainer(
+  listElement: HTMLDivElement | null,
+): HTMLElement | null {
+  return listElement?.closest<HTMLElement>('.ui-sidebar-view__body') ?? null;
+}
+
+export function isWorkbenchChatScrollContainerAtBottom({
+  bottomThreshold = WORKBENCH_CHAT_SCROLL_BOTTOM_THRESHOLD,
+  clientHeight,
+  scrollHeight,
+  scrollTop,
+}: {
+  bottomThreshold?: number;
+  clientHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+}): boolean {
+  return scrollHeight - clientHeight - scrollTop <= bottomThreshold;
+}

package/src/workbench/chat/index.ts

@@ -1,14 +1,61 @@
+export { ChatMessageCollapsible, CHAT_MESSAGE_COLLAPSE_MAX_LINES } from './ChatMessageCollapsible';
+export type { ChatMessageCollapsibleProps } from './ChatMessageCollapsible';
+export { ChatCommandProposalCard } from './ChatCommandProposalCard';
+export type { ChatCommandProposalCardProps } from './ChatCommandProposalCard';
+export { ChatPhasedRunProgress } from './ChatPhasedRunProgress';
+export type {
+  ChatPhasedRunProgressAction,
+  ChatPhasedRunProgressLabels,
+  ChatPhasedRunProgressProps,
+  ChatRunPhase,
+  ChatRunPhaseStatus,
+} from './ChatPhasedRunProgress';
 export { ChatComposer } from './ChatComposer';
 export type { ChatComposerProps } from './ChatComposer';
+export { ChatConversationBar } from './ChatConversationBar';
+export type { ChatConversationBarProps } from './ChatConversationBar';
+export { ChatHistoryMenu } from './ChatHistoryMenu';
+export type { ChatHistoryMenuProps } from './ChatHistoryMenu';
 export { ChatMessageItem } from './ChatMessageItem';
 export type { ChatMessageItemProps } from './ChatMessageItem';
 export { ChatMessageList } from './ChatMessageList';
 export type { ChatMessageListProps } from './ChatMessageList';
 export { ChatPanel } from './ChatPanel';
 export type { ChatPanelProps } from './ChatPanel';
-export type { ChatMessage, ChatMessageSource } from './types';
+export { ChatRenameDialog } from './ChatRenameDialog';
+export type { ChatRenameDialogProps } from './ChatRenameDialog';
+export { defaultWorkbenchChatConversationLabels } from './chatConversation';
+export type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+export type {
+  ChatMessage,
+  ChatMessageContentMode,
+  ChatMessageLayout,
+  ChatMessageSource,
+  ChatMessageTone,
+} from './types';
+export type { ChatCommandProposal, ChatCommandProposalStatus } from './types';
 export { useChatRuntimeState } from './useChatRuntimeState';
 export type { UseChatRuntimeStateInput, UseChatRuntimeStateResult } from './useChatRuntimeState';
+export {
+  DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES,
+  shouldCancelRuntimeOnUnmount,
+  useCancelRuntimeOnUnmount,
+} from './useCancelRuntimeOnUnmount';
+export type { UseCancelRuntimeOnUnmountOptions } from './useCancelRuntimeOnUnmount';
+export { useChatPrependPagination } from './useChatPrependPagination';
+export type {
+  UseChatPrependPaginationOptions,
+  UseChatPrependPaginationResult,
+} from './useChatPrependPagination';
+export {
+  isWorkbenchChatScrollContainerAtBottom,
+  resolveWorkbenchChatScrollContainer,
+  WORKBENCH_CHAT_LOAD_OLDER_ROOT_MARGIN,
+  WORKBENCH_CHAT_SCROLL_BOTTOM_THRESHOLD,
+} from './chatScroll';
 export { useSlashCommandSuggest } from './useSlashCommandSuggest';
 export type {
   UseSlashCommandSuggestOptions,

package/src/workbench/chat/slashCommand.ts

@@ -1,16 +1,14 @@
 export type SlashCommandParseResult =
-  | { type: 'none' }
-  | { type: 'run'; commandId: string }
-  | { type: 'unknown'; token: string };
+  { type: 'none' } | { type: 'run'; commandId: string } | { type: 'unknown'; token: string };
+
+const slashCommandInputPattern = /(?:^|\s)\/([^\s]*)$/;
 
 export function isSlashCommandInput(value: string): boolean {
-  return value.trimStart().startsWith('/');
+  return slashCommandInputPattern.test(value);
 }
 
 export function getSlashCommandQuery(value: string): string {
-  const trimmed = value.trimStart();
-  if (!trimmed.startsWith('/')) return '';
-  return trimmed.slice(1);
+  return slashCommandInputPattern.exec(value)?.[1] ?? '';
 }
 
 export function parseSlashCommand(

package/src/workbench/chat/types.ts

@@ -1,10 +1,45 @@
 import type { ReactNode } from 'react';
 
+import type { WorkbenchCommandExecutionPolicy } from '../commands/command-model';
+
 export type ChatMessageSource = 'assistant' | 'user';
 
+/** `assistant` = markdown AI replies; `peer` = direct messages with bubbles on both sides. */
+export type ChatMessageLayout = 'assistant' | 'peer';
+
+export type ChatMessageTone = 'default' | 'error' | 'warning';
+
+export type ChatMessageContentMode = 'plain' | 'markdown';
+
+export type ChatCommandProposalStatus =
+  'pending' | 'running' | 'allowed' | 'denied' | 'blocked' | 'executed' | 'failed';
+
+export interface ChatCommandProposal {
+  args?: readonly unknown[];
+  commandId: string;
+  description?: string;
+  id: string;
+  label?: string;
+  policy: WorkbenchCommandExecutionPolicy;
+  status: ChatCommandProposalStatus;
+}
+
+export type ChatMessageTimestamp = number | Date | string;
+
 export interface ChatMessage {
+  commandProposals?: readonly ChatCommandProposal[];
   content: string;
+  /**
+   * How `content` is rendered. Defaults to markdown for assistant-layout
+   * assistant messages; otherwise plain text.
+   */
+  contentMode?: ChatMessageContentMode;
+  createdAt?: string;
   id: string;
   label?: ReactNode;
   source: ChatMessageSource;
+  /** Preferred timestamp for display; falls back to `createdAt` when omitted. */
+  timestamp?: ChatMessageTimestamp;
+  /** Optional visual tone for host-driven status / error messages. */
+  tone?: ChatMessageTone;
 }

package/src/workbench/chat/useCancelRuntimeOnUnmount.ts

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+import type { RuntimeStatus } from '@workbench-kit/runtime';
+
+export const DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES = ['running'] as const;
+
+export interface UseCancelRuntimeOnUnmountOptions<TStatus extends string = RuntimeStatus> {
+  cancel: () => void;
+  cancellableStatuses?: readonly TStatus[];
+  enabled?: boolean;
+  getStatus?: () => TStatus;
+  status?: TStatus;
+}
+
+export function shouldCancelRuntimeOnUnmount(
+  status: string | undefined,
+  cancellableStatuses: readonly string[],
+): boolean {
+  if (status === undefined) {
+    return false;
+  }
+
+  return cancellableStatuses.includes(status);
+}
+
+export function useCancelRuntimeOnUnmount<TStatus extends string = RuntimeStatus>({
+  cancel,
+  cancellableStatuses,
+  enabled = true,
+  getStatus,
+  status,
+}: UseCancelRuntimeOnUnmountOptions<TStatus>): void {
+  const stateRef = useRef({
+    cancel,
+    cancellableStatuses: cancellableStatuses ?? DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES,
+    enabled,
+    getStatus,
+    status,
+  });
+
+  stateRef.current = {
+    cancel,
+    cancellableStatuses: cancellableStatuses ?? DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES,
+    enabled,
+    getStatus,
+    status,
+  };
+
+  useEffect(() => {
+    return () => {
+      const current = stateRef.current;
+      const currentStatus = current.getStatus?.() ?? current.status;
+      if (
+        current.enabled &&
+        shouldCancelRuntimeOnUnmount(currentStatus, current.cancellableStatuses)
+      ) {
+        current.cancel();
+      }
+    };
+  }, []);
+}