@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/workbench/chat/ChatMessageList.tsx

@@ -1,134 +1,134 @@
-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 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 (
-      <>
-        {messageListAddon}
-        <div className={cx('message-empty', 'ui-panel-centered-state')}>
-          <i className={cx('codicon', emptyIconClass)} />
-          <span>{emptyLabel}</span>
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <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>
-  );
-}
+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 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 (
+      <>
+        {messageListAddon}
+        <div className={cx('message-empty', 'ui-panel-centered-state')}>
+          <i className={cx('codicon', emptyIconClass)} />
+          <span>{emptyLabel}</span>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <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,168 +1,177 @@
-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';
-
-export interface ChatPanelProps
-  extends
-    ChatMessageListProps,
-    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 (
-    <div
-      className={cx('chat-panel-drop-target', isFileDragActive && 'chat-panel-drop-target--active')}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-    >
-      <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>
-  );
-}
+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';
+
+export interface ChatPanelProps
+  extends
+    ChatMessageListProps,
+    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 (
+    <div
+      className={cx('chat-panel-drop-target', isFileDragActive && 'chat-panel-drop-target--active')}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <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>
+  );
+}