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

package/src/workbench/chat/ChatHistoryMenuRow.tsx

@@ -0,0 +1,74 @@
+import { Button } from '../../primitives/button';
+import { IconButton } from '../../primitives/icon-button';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+
+export interface ChatHistoryMenuRowProps {
+  conversation: WorkbenchChatConversation;
+  isActive: boolean;
+  labels: WorkbenchChatConversationLabels;
+  canDeleteAny: boolean;
+  onActivate: () => void;
+  onDelete: () => void;
+  onOpenRowMenu: (anchor: { x: number; y: number }) => void;
+}
+
+export function ChatHistoryMenuRow({
+  conversation,
+  isActive,
+  labels,
+  canDeleteAny,
+  onActivate,
+  onDelete,
+  onOpenRowMenu,
+}: ChatHistoryMenuRowProps) {
+  return (
+    <div
+      className="chat-history-menu__row"
+      onContextMenu={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onOpenRowMenu({ x: event.clientX, y: event.clientY });
+      }}
+    >
+      <Button
+        className="ui-context-menu__item chat-history-menu__select"
+        role="menuitem"
+        title={
+          typeof conversation.metaSummary === 'string'
+            ? conversation.metaSummary
+            : conversation.title
+        }
+        onClick={onActivate}
+      >
+        <span className="ui-context-menu__icon">
+          <i
+            aria-hidden="true"
+            className={`codicon ${isActive ? 'codicon-check' : 'codicon-comment-discussion'}`}
+          />
+        </span>
+        <span className="ui-context-menu__label chat-history-menu__label">
+          <span className="chat-history-menu__title">{conversation.title}</span>
+          {conversation.metaSummary ? (
+            <span className="chat-history-menu__meta">{conversation.metaSummary}</span>
+          ) : null}
+        </span>
+      </Button>
+
+      <IconButton
+        className="chat-history-menu__delete"
+        compact
+        disabled={!canDeleteAny}
+        icon="codicon-trash"
+        label={canDeleteAny ? labels.deleteChat(conversation.title) : labels.cannotDeleteLast}
+        variant="danger"
+        onClick={(event) => {
+          event.stopPropagation();
+          onDelete();
+        }}
+      />
+    </div>
+  );
+}

package/src/workbench/chat/ChatMessageCollapsible.tsx

@@ -0,0 +1,115 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+
+export const CHAT_MESSAGE_COLLAPSE_MAX_LINES = 8;
+
+export interface ChatMessageCollapsibleProps {
+  children: ReactNode;
+  className?: string;
+  content: string;
+  footer?: ReactNode;
+  isStreaming?: boolean;
+  maxLines?: number;
+  surfaceClassName?: string;
+  toggleClassName?: string;
+}
+
+function measureChatMessageNeedsCollapse(body: HTMLElement, maxLines: number): boolean {
+  const style = getComputedStyle(body);
+  const fontSize = Number.parseFloat(style.fontSize) || 14;
+  const parsedLineHeight = Number.parseFloat(style.lineHeight);
+  const lineHeight =
+    Number.isFinite(parsedLineHeight) && parsedLineHeight > 0 ? parsedLineHeight : fontSize * 1.6;
+
+  return body.scrollHeight > lineHeight * maxLines + 1;
+}
+
+export function ChatMessageCollapsible({
+  children,
+  className,
+  content,
+  footer,
+  isStreaming = false,
+  maxLines = CHAT_MESSAGE_COLLAPSE_MAX_LINES,
+  surfaceClassName,
+  toggleClassName,
+}: ChatMessageCollapsibleProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [needsCollapse, setNeedsCollapse] = useState(false);
+  const isClamped = needsCollapse && !expanded && !isStreaming;
+
+  useLayoutEffect(() => {
+    setExpanded(false);
+    setNeedsCollapse(false);
+  }, [content]);
+
+  useLayoutEffect(() => {
+    if (isStreaming) {
+      setNeedsCollapse(false);
+      return;
+    }
+
+    const body = bodyRef.current;
+    if (!body) {
+      return;
+    }
+
+    if (expanded) {
+      return;
+    }
+
+    setNeedsCollapse(measureChatMessageNeedsCollapse(body, maxLines));
+  }, [content, expanded, isStreaming, maxLines]);
+
+  useLayoutEffect(() => {
+    if (isStreaming || expanded) {
+      return undefined;
+    }
+
+    const body = bodyRef.current;
+    if (!body || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      setNeedsCollapse(measureChatMessageNeedsCollapse(body, maxLines));
+    });
+    observer.observe(body);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [content, expanded, isStreaming, maxLines]);
+
+  return (
+    <div className={cx('message__bubble-wrap', className)}>
+      <div className={cx('message__bubble-surface', surfaceClassName)}>
+        <div
+          ref={bodyRef}
+          className={cx('message__bubble-body', isClamped && 'message__bubble-body--collapsed')}
+          style={
+            isClamped
+              ? ({
+                  '--chat-message-collapse-lines': String(maxLines),
+                } as CSSProperties)
+              : undefined
+          }
+        >
+          {children}
+        </div>
+        {needsCollapse && !isStreaming ? (
+          <Button
+            aria-expanded={expanded}
+            className={cx('message__collapse-toggle', toggleClassName)}
+            onClick={() => setExpanded((current) => !current)}
+          >
+            {expanded ? 'Show less' : 'Show more'}
+          </Button>
+        ) : null}
+        {footer ? <div className="message__bubble-footer">{footer}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/workbench/chat/ChatMessageItem.tsx

@@ -1,44 +1,318 @@
 import Markdown from 'react-markdown';
+import type { ReactNode } from 'react';
 import { cx } from '../../utils/cx';
-import type { ChatMessage } from './types';
+import { workbenchMarkdownRemarkPlugins } from '../markdownRemarkPlugins';
+import { ChatCommandProposalCard } from './ChatCommandProposalCard';
+import { ChatMessageCollapsible } from './ChatMessageCollapsible';
+import { ChatMessageTime, resolveChatMessageTimestamp } from './chatMessageMeta';
+import type {
+  ChatCommandProposal,
+  ChatMessage,
+  ChatMessageContentMode,
+  ChatMessageLayout,
+  ChatMessageTone,
+} from './types';
 
 export interface ChatMessageItemProps {
+  /**
+   * Rendered after the bubble (and before command proposals). Use for
+   * attachments or host chrome that should stay outside the collapsible surface.
+   */
+  afterMessage?: ReactNode | undefined;
   assistantLabel?: string;
+  /** Overrides `message.contentMode` when set. */
+  contentMode?: ChatMessageContentMode | undefined;
+  /**
+   * Forwarded into `ChatMessageCollapsible` in-bubble footer (progress, actions).
+   */
+  footer?: ReactNode | undefined;
   isStreaming?: boolean;
+  layout?: ChatMessageLayout;
   message: ChatMessage;
+  onCommandProposalAllow?: ((messageId: string, proposal: ChatCommandProposal) => void) | undefined;
+  onCommandProposalDeny?: ((messageId: string, proposal: ChatCommandProposal) => void) | undefined;
+  showSenderLabel?: boolean;
+  /** When true, keeps the inline timestamp visible without hover. */
+  showTimestamp?: boolean;
+  /** Overrides `message.tone` when set. */
+  tone?: ChatMessageTone | undefined;
+  userLabel?: string;
 }
 
-export function ChatMessageItem({
-  assistantLabel = 'Assistant',
-  isStreaming = false,
+function renderMessageTimestamp(message: ChatMessage, pinned: boolean) {
+  const timestamp = resolveChatMessageTimestamp(message);
+  if (!timestamp) {
+    return undefined;
+  }
+
+  return (
+    <ChatMessageTime
+      className={cx('message__time', pinned && 'message__time--pinned')}
+      timestamp={timestamp}
+    />
+  );
+}
+
+function MessageBubbleLine({
+  align,
+  children,
+  timestamp,
+}: {
+  align: 'start' | 'end';
+  children: ReactNode;
+  timestamp?: ReactNode;
+}) {
+  return (
+    <div
+      className={cx(
+        'message__bubble-line',
+        align === 'end' ? 'message__bubble-line--end' : 'message__bubble-line--start',
+      )}
+    >
+      {align === 'end' && timestamp ? <div className="message__time-slot">{timestamp}</div> : null}
+      {children}
+      {align === 'start' && timestamp ? (
+        <div className="message__time-slot">{timestamp}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function ChatMessageCommandProposals({
   message,
-}: ChatMessageItemProps) {
-  if (message.source === 'user') {
-    return (
-      <div className="message message--user">
-        <div className="message__bubble">{message.content}</div>
-      </div>
-    );
+  onCommandProposalAllow,
+  onCommandProposalDeny,
+}: {
+  message: ChatMessage;
+  onCommandProposalAllow?: ChatMessageItemProps['onCommandProposalAllow'];
+  onCommandProposalDeny?: ChatMessageItemProps['onCommandProposalDeny'];
+}) {
+  if (!message.commandProposals?.length) {
+    return null;
   }
 
   return (
-    <div className="message message--assistant">
-      <div className="message__label message__label--assistant">
-        <i className="codicon codicon-sparkle message__label-icon" />
-        {message.label ?? assistantLabel}
-      </div>
+    <div className="message__command-proposals">
+      {message.commandProposals.map((proposal) => (
+        <ChatCommandProposalCard
+          key={proposal.id}
+          proposal={proposal}
+          onAllow={
+            onCommandProposalAllow
+              ? (currentProposal) => onCommandProposalAllow(message.id, currentProposal)
+              : undefined
+          }
+          onDeny={
+            onCommandProposalDeny
+              ? (currentProposal) => onCommandProposalDeny(message.id, currentProposal)
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+function ChatMessageAfterSlot({ children }: { children: ReactNode | undefined }) {
+  if (!children) {
+    return null;
+  }
+
+  return <div className="message__after">{children}</div>;
+}
+
+function resolveChatMessageContentMode(
+  message: ChatMessage,
+  layout: ChatMessageLayout,
+  contentModeOverride?: ChatMessageContentMode,
+): ChatMessageContentMode {
+  const explicit = contentModeOverride ?? message.contentMode;
+  if (explicit) {
+    return explicit;
+  }
+
+  // Default: assistant layout + non-user source → markdown; otherwise plain.
+  if (layout === 'assistant' && message.source !== 'user') {
+    return 'markdown';
+  }
+
+  return 'plain';
+}
+
+function resolveChatMessageToneClass(
+  tone: ChatMessageTone | undefined,
+): string | false | undefined {
+  if (tone === 'error') {
+    return 'message--tone-error';
+  }
+  if (tone === 'warning') {
+    return 'message--tone-warning';
+  }
+  return undefined;
+}
+
+function ChatMessageBody({
+  content,
+  contentMode,
+  isStreaming,
+}: {
+  content: string;
+  contentMode: ChatMessageContentMode;
+  isStreaming: boolean;
+}) {
+  if (contentMode === 'markdown') {
+    return (
       <div className="md-content">
         <Markdown
+          remarkPlugins={workbenchMarkdownRemarkPlugins}
           components={{
-            code: ({ className, ...props }) => (
-              <code className={cx('ui-workbench-scrollbar', className)} {...props} />
+            code: ({ children, className }) => (
+              <code className={cx('ui-workbench-scrollbar', className)}>{children}</code>
             ),
           }}
         >
-          {message.content}
+          {content}
         </Markdown>
         {isStreaming ? <span aria-hidden="true" className="message__cursor" /> : null}
       </div>
+    );
+  }
+
+  return (
+    <>
+      {content}
+      {isStreaming ? <span aria-hidden="true" className="message__cursor" /> : null}
+    </>
+  );
+}
+
+export function ChatMessageItem({
+  afterMessage,
+  assistantLabel = 'Assistant',
+  contentMode: contentModeProp,
+  footer,
+  isStreaming = false,
+  layout = 'assistant',
+  message,
+  onCommandProposalAllow,
+  onCommandProposalDeny,
+  showSenderLabel = true,
+  showTimestamp = false,
+  tone: toneProp,
+  userLabel,
+}: ChatMessageItemProps) {
+  const timestamp = renderMessageTimestamp(message, showTimestamp);
+  const bubbleAlign = message.source === 'user' ? 'end' : 'start';
+  const contentMode = resolveChatMessageContentMode(message, layout, contentModeProp);
+  const toneClass = resolveChatMessageToneClass(toneProp ?? message.tone);
+  const body = (
+    <ChatMessageBody
+      content={message.content}
+      contentMode={contentMode}
+      isStreaming={isStreaming}
+    />
+  );
+
+  if (message.source === 'user') {
+    const displayUserLabel =
+      layout === 'peer' && showSenderLabel ? (message.label ?? userLabel) : undefined;
+
+    return (
+      <div
+        className={cx(
+          'message',
+          'message--user',
+          layout === 'peer' && 'message--user-peer',
+          layout === 'peer' && !showSenderLabel && 'message--continued',
+          toneClass,
+        )}
+      >
+        <div className="message__row">
+          <div className="message__main">
+            {displayUserLabel ? (
+              <div className="message__user-label">{displayUserLabel}</div>
+            ) : null}
+            <MessageBubbleLine align={bubbleAlign} timestamp={timestamp}>
+              <ChatMessageCollapsible
+                content={message.content}
+                footer={footer}
+                isStreaming={isStreaming}
+                surfaceClassName="message__bubble"
+              >
+                {body}
+              </ChatMessageCollapsible>
+            </MessageBubbleLine>
+            <ChatMessageAfterSlot>{afterMessage}</ChatMessageAfterSlot>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (layout === 'peer') {
+    const peerLabel = showSenderLabel ? (message.label ?? assistantLabel) : undefined;
+
+    return (
+      <div
+        className={cx(
+          'message',
+          'message--peer',
+          !showSenderLabel && 'message--continued',
+          toneClass,
+        )}
+      >
+        <div className="message__row">
+          <div className="message__main">
+            {peerLabel ? <div className="message__peer-label">{peerLabel}</div> : null}
+            <MessageBubbleLine align={bubbleAlign} timestamp={timestamp}>
+              <ChatMessageCollapsible
+                content={message.content}
+                footer={footer}
+                isStreaming={isStreaming}
+                surfaceClassName="message__bubble message__bubble--peer"
+              >
+                {body}
+              </ChatMessageCollapsible>
+            </MessageBubbleLine>
+            <ChatMessageAfterSlot>{afterMessage}</ChatMessageAfterSlot>
+            <ChatMessageCommandProposals
+              message={message}
+              onCommandProposalAllow={onCommandProposalAllow}
+              onCommandProposalDeny={onCommandProposalDeny}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx('message', 'message--assistant', toneClass)}>
+      <div className="message__row">
+        <div className="message__main">
+          <div className="message__label message__label--assistant">
+            <i className="codicon codicon-sparkle message__label-icon" />
+            {message.label ?? assistantLabel}
+          </div>
+          <MessageBubbleLine align={bubbleAlign} timestamp={timestamp}>
+            <ChatMessageCollapsible
+              className="message__assistant-collapsible"
+              content={message.content}
+              footer={footer}
+              isStreaming={isStreaming}
+              surfaceClassName="message__collapsible-surface--assistant"
+            >
+              {body}
+            </ChatMessageCollapsible>
+          </MessageBubbleLine>
+          <ChatMessageAfterSlot>{afterMessage}</ChatMessageAfterSlot>
+          <ChatMessageCommandProposals
+            message={message}
+            onCommandProposalAllow={onCommandProposalAllow}
+            onCommandProposalDeny={onCommandProposalDeny}
+          />
+        </div>
+      </div>
     </div>
   );
 }

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 | undefined;
   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>
   );