@workbench-kit/react 0.0.1-prototype.0

package/src/workbench/chat/ChatComposer.tsx

@@ -0,0 +1,148 @@
+import {
+  useLayoutEffect,
+  useRef,
+  type KeyboardEvent,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from 'react';
+import { cx } from '../../utils/cx';
+
+export interface ChatComposerProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'onChange' | 'onSubmit' | 'value'
+> {
+  cancelLabel?: string;
+  commandLabel?: string;
+  contextLabel?: string;
+  isRunning?: boolean;
+  onCancel?: () => void;
+  onSubmit: (message: string) => void;
+  onValueChange: (value: string) => void;
+  showTools?: boolean;
+  submitLabel?: string;
+  toolbarStart?: ReactNode;
+  value: string;
+}
+
+export function ChatComposer({
+  cancelLabel = 'Stop response',
+  className,
+  commandLabel = 'Open commands',
+  contextLabel = 'Add context',
+  disabled,
+  isRunning = false,
+  onCancel,
+  onSubmit,
+  onValueChange,
+  placeholder = 'Type a message...',
+  showTools = true,
+  submitLabel = 'Send message',
+  toolbarStart,
+  value,
+  ...props
+}: ChatComposerProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const resizeTextarea = () => {
+    const element = textareaRef.current;
+    if (!element) return;
+
+    element.style.height = 'auto';
+    element.style.height = `${Math.min(element.scrollHeight, 160)}px`;
+  };
+
+  useLayoutEffect(() => {
+    resizeTextarea();
+  }, [value]);
+
+  const handleSubmit = () => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled || isRunning) return;
+
+    onSubmit(trimmed);
+    window.requestAnimationFrame(() => {
+      if (!textareaRef.current) return;
+
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.focus();
+    });
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    props.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className="composer">
+      <div className="composer__box">
+        <textarea
+          ref={textareaRef}
+          {...props}
+          className={cx('composer__textarea', className)}
+          disabled={disabled}
+          placeholder={placeholder}
+          rows={1}
+          value={value}
+          onChange={(event) => onValueChange(event.currentTarget.value)}
+          onInput={resizeTextarea}
+          onKeyDown={handleKeyDown}
+        />
+        <div className="composer__toolbar">
+          <div className="composer__toolbar-left">
+            {toolbarStart}
+            {showTools ? (
+              <>
+                <button
+                  aria-label={contextLabel}
+                  className="composer__tool-btn"
+                  title={contextLabel}
+                  type="button"
+                >
+                  <i className="codicon codicon-add" />
+                </button>
+                <button
+                  aria-label={commandLabel}
+                  className="composer__tool-btn"
+                  title={commandLabel}
+                  type="button"
+                >
+                  <i className="codicon codicon-terminal" />
+                </button>
+              </>
+            ) : null}
+          </div>
+          <div className="composer__toolbar-right">
+            {isRunning ? (
+              <button
+                aria-label={cancelLabel}
+                className="composer__send-btn composer__send-btn--cancel"
+                title={cancelLabel}
+                type="button"
+                onClick={onCancel}
+              >
+                <i className="codicon codicon-stop-circle" />
+              </button>
+            ) : (
+              <button
+                aria-label={submitLabel}
+                className="composer__send-btn"
+                disabled={disabled || !value.trim()}
+                title={submitLabel}
+                type="button"
+                onClick={handleSubmit}
+              >
+                <i className="codicon codicon-send" />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/workbench/chat/ChatMessageItem.tsx

@@ -0,0 +1,35 @@
+import Markdown from 'react-markdown';
+import type { ChatMessage } from './types';
+
+export interface ChatMessageItemProps {
+  assistantLabel?: string;
+  isStreaming?: boolean;
+  message: ChatMessage;
+}
+
+export function ChatMessageItem({
+  assistantLabel = 'Assistant',
+  isStreaming = false,
+  message,
+}: ChatMessageItemProps) {
+  if (message.source === 'user') {
+    return (
+      <div className="message message--user">
+        <div className="message__bubble">{message.content}</div>
+      </div>
+    );
+  }
+
+  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="md-content">
+        <Markdown>{message.content}</Markdown>
+        {isStreaming ? <span aria-hidden="true" className="message__cursor" /> : null}
+      </div>
+    </div>
+  );
+}

package/src/workbench/chat/ChatMessageList.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+import { SideBarScrollSpacer } from '../../layout/SideBarViewFrame';
+import { ChatMessageItem } from './ChatMessageItem';
+import type { ChatMessage } from './types';
+
+export interface ChatMessageListProps {
+  assistantLabel?: string;
+  emptyLabel?: string;
+  isStreaming?: boolean;
+  messages: ChatMessage[];
+}
+
+export function ChatMessageList({
+  assistantLabel,
+  emptyLabel = 'How can I help?',
+  isStreaming = false,
+  messages,
+}: ChatMessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'auto', block: 'end' });
+  }, [isStreaming, messages.length]);
+
+  if (messages.length === 0) {
+    return (
+      <div className="message-empty">
+        <i className="codicon codicon-sparkle" />
+        <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}
+        />
+      ))}
+      <SideBarScrollSpacer ref={bottomRef} />
+    </div>
+  );
+}

package/src/workbench/chat/ChatPanel.tsx

@@ -0,0 +1,55 @@
+import { SideBarViewFrame } from '../../layout/SideBarViewFrame';
+import { ChatComposer, type ChatComposerProps } from './ChatComposer';
+import { ChatMessageList, type ChatMessageListProps } from './ChatMessageList';
+
+export interface ChatPanelProps
+  extends
+    ChatMessageListProps,
+    Pick<
+      ChatComposerProps,
+      | 'disabled'
+      | 'isRunning'
+      | 'onCancel'
+      | 'onSubmit'
+      | 'onValueChange'
+      | 'placeholder'
+      | 'showTools'
+      | 'value'
+    > {
+  title?: string;
+}
+
+export function ChatPanel({
+  title = 'Chat',
+  value,
+  onValueChange,
+  onSubmit,
+  onCancel,
+  placeholder,
+  disabled,
+  isRunning,
+  showTools,
+  ...messageListProps
+}: ChatPanelProps) {
+  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}
+    >
+      <ChatMessageList isStreaming={isRunning} {...messageListProps} />
+    </SideBarViewFrame>
+  );
+}

package/src/workbench/chat/index.ts

@@ -0,0 +1,9 @@
+export { ChatComposer } from './ChatComposer';
+export type { ChatComposerProps } from './ChatComposer';
+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';

package/src/workbench/chat/types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type ChatMessageSource = 'assistant' | 'user';
+
+export interface ChatMessage {
+  content: string;
+  id: string;
+  label?: ReactNode;
+  source: ChatMessageSource;
+}