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

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,119 @@
+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 {
+  /** In-bubble region after message body (file chips, etc.). */
+  attachments?: ReactNode;
+  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({
+  attachments,
+  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>
+        {attachments ? <div className="message__attachments">{attachments}</div> : null}
+        {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,376 @@
 import Markdown from 'react-markdown';
+import type { ReactNode } from 'react';
 import { cx } from '../../utils/cx';
-import type { ChatMessage } from './types';
+import {
+  workbenchMarkdownRemarkPlugins,
+  workbenchMarkdownRehypePlugins,
+} from '../markdown/markdownRemarkPlugins';
+import { sanitizeMarkdownHref } from '../markdown/sanitizeMarkdownHref';
+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
+   * host chrome that should stay outside the collapsible surface.
+   * Prefer `attachments` for in-bubble file chips.
+   */
+  afterMessage?: ReactNode;
+  /**
+   * In-bubble attachment region (file chips, etc.). Renders inside the bubble
+   * surface after the message body. Prefer this over `afterMessage` when chips
+   * must stay end-aligned with user bubbles.
+   */
+  attachments?: ReactNode;
   assistantLabel?: string;
+  /** Overrides `message.contentMode` when set. */
+  contentMode?: ChatMessageContentMode;
+  /**
+   * Forwarded into `ChatMessageCollapsible` in-bubble footer (progress, actions).
+   */
+  footer?: ReactNode;
   isStreaming?: boolean;
+  /**
+   * Assistant-layout label icon. Defaults to sparkle; error/warning tones use
+   * status icons. Pass a custom node to override, or `false` to hide.
+   */
+  labelIcon?: ReactNode | false;
+  layout?: ChatMessageLayout;
   message: ChatMessage;
+  onCommandProposalAllow?: (messageId: string, proposal: ChatCommandProposal) => void;
+  onCommandProposalDeny?: (messageId: string, proposal: ChatCommandProposal) => void;
+  showSenderLabel?: boolean;
+  /** When true, keeps the inline timestamp visible without hover. */
+  showTimestamp?: boolean;
+  /** Overrides `message.tone` when set. */
+  tone?: ChatMessageTone;
+  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 resolveAssistantLabelIcon(
+  labelIcon: ReactNode | false | undefined,
+  tone: ChatMessageTone | undefined,
+): ReactNode | null {
+  if (labelIcon === false) {
+    return null;
+  }
+  if (labelIcon !== undefined) {
+    return labelIcon;
+  }
+  if (tone === 'error') {
+    return <i className="codicon codicon-error message__label-icon" />;
+  }
+  if (tone === 'warning') {
+    return <i className="codicon codicon-warning message__label-icon" />;
+  }
+  return <i className="codicon codicon-sparkle message__label-icon" />;
+}
+
+function ChatMessageBody({
+  content,
+  contentMode,
+  isStreaming,
+}: {
+  content: string;
+  contentMode: ChatMessageContentMode;
+  isStreaming: boolean;
+}) {
+  if (contentMode === 'markdown') {
+    return (
       <div className="md-content">
         <Markdown
+          remarkPlugins={workbenchMarkdownRemarkPlugins}
+          rehypePlugins={workbenchMarkdownRehypePlugins}
           components={{
-            code: ({ className, ...props }) => (
-              <code className={cx('ui-workbench-scrollbar', className)} {...props} />
+            a: ({ children, href }) => {
+              const safeHref = sanitizeMarkdownHref(href);
+              if (!safeHref) {
+                return <span>{children}</span>;
+              }
+              return (
+                <a
+                  href={safeHref}
+                  rel="noreferrer"
+                  target={safeHref.startsWith('#') ? undefined : '_blank'}
+                >
+                  {children}
+                </a>
+              );
+            },
+            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,
+  attachments,
+  assistantLabel = 'Assistant',
+  contentMode: contentModeProp,
+  footer,
+  isStreaming = false,
+  labelIcon,
+  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 resolvedTone = toneProp ?? message.tone;
+  const toneClass = resolveChatMessageToneClass(resolvedTone);
+  const assistantLabelIcon = resolveAssistantLabelIcon(labelIcon, resolvedTone);
+  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
+                attachments={attachments}
+                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
+                attachments={attachments}
+                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">
+            {assistantLabelIcon}
+            {message.label ?? assistantLabel}
+          </div>
+          <MessageBubbleLine align={bubbleAlign} timestamp={timestamp}>
+            <ChatMessageCollapsible
+              attachments={attachments}
+              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>
   );
 }