@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/workbench/chat/ChatComposer.tsx

@@ -1,148 +1,165 @@
-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>
-  );
-}
+import {
+  forwardRef,
+  useImperativeHandle,
+  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;
+  commandSuggestPopover?: ReactNode;
+  contextLabel?: string;
+  isRunning?: boolean;
+  onCancel?: () => void;
+  onCommandClick?: () => void;
+  onContextClick?: () => void;
+  onSubmit: (message: string) => void;
+  onValueChange: (value: string) => void;
+  showTools?: boolean;
+  submitLabel?: string;
+  toolbarStart?: ReactNode;
+  value: string;
+}
+
+export const ChatComposer = forwardRef<HTMLTextAreaElement, ChatComposerProps>(
+  function ChatComposer(
+    {
+      cancelLabel = 'Stop response',
+      className,
+      commandLabel = 'Open commands',
+      commandSuggestPopover,
+      contextLabel = 'Add context',
+      disabled,
+      isRunning = false,
+      onCancel,
+      onCommandClick,
+      onContextClick,
+      onSubmit,
+      onValueChange,
+      placeholder = 'Type a message...',
+      showTools = true,
+      submitLabel = 'Send message',
+      toolbarStart,
+      value,
+      ...props
+    }: ChatComposerProps,
+    ref,
+  ) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    useImperativeHandle(ref, () => textareaRef.current!);
+
+    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">
+        {commandSuggestPopover}
+        <div className="composer__box">
+          <textarea
+            ref={textareaRef}
+            {...props}
+            className={cx('composer__textarea', 'ui-workbench-scrollbar', 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"
+                    onClick={onContextClick}
+                  >
+                    <i className="codicon codicon-add" />
+                  </button>
+                  <button
+                    aria-label={commandLabel}
+                    className="composer__tool-btn"
+                    title={commandLabel}
+                    type="button"
+                    onClick={onCommandClick}
+                  >
+                    <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

@@ -1,4 +1,5 @@
 import Markdown from 'react-markdown';
+import { cx } from '../../utils/cx';
 import type { ChatMessage } from './types';
 
 export interface ChatMessageItemProps {
@@ -27,7 +28,15 @@ export function ChatMessageItem({
         {message.label ?? assistantLabel}
       </div>
       <div className="md-content">
-        <Markdown>{message.content}</Markdown>
+        <Markdown
+          components={{
+            code: ({ className, ...props }) => (
+              <code className={cx('ui-workbench-scrollbar', className)} {...props} />
+            ),
+          }}
+        >
+          {message.content}
+        </Markdown>
         {isStreaming ? <span aria-hidden="true" className="message__cursor" /> : null}
       </div>
     </div>

package/src/workbench/chat/index.ts

@@ -7,3 +7,12 @@ export type { ChatMessageListProps } from './ChatMessageList';
 export { ChatPanel } from './ChatPanel';
 export type { ChatPanelProps } from './ChatPanel';
 export type { ChatMessage, ChatMessageSource } from './types';
+export { useChatRuntimeState } from './useChatRuntimeState';
+export type { UseChatRuntimeStateInput, UseChatRuntimeStateResult } from './useChatRuntimeState';
+export { useSlashCommandSuggest } from './useSlashCommandSuggest';
+export type {
+  UseSlashCommandSuggestOptions,
+  UseSlashCommandSuggestResult,
+} from './useSlashCommandSuggest';
+export { getSlashCommandQuery, isSlashCommandInput, parseSlashCommand } from './slashCommand';
+export type { SlashCommandParseResult } from './slashCommand';

package/src/workbench/chat/slashCommand.ts

@@ -0,0 +1,28 @@
+export type SlashCommandParseResult =
+  | { type: 'none' }
+  | { type: 'run'; commandId: string }
+  | { type: 'unknown'; token: string };
+
+export function isSlashCommandInput(value: string): boolean {
+  return value.trimStart().startsWith('/');
+}
+
+export function getSlashCommandQuery(value: string): string {
+  const trimmed = value.trimStart();
+  if (!trimmed.startsWith('/')) return '';
+  return trimmed.slice(1);
+}
+
+export function parseSlashCommand(
+  input: string,
+  isValidCommandId: (id: string) => boolean,
+): SlashCommandParseResult {
+  const trimmed = input.trim();
+  if (!trimmed.startsWith('/')) return { type: 'none' };
+
+  const [rawToken] = trimmed.slice(1).split(/\s+/, 1);
+  if (!rawToken) return { type: 'unknown', token: '' };
+
+  if (isValidCommandId(rawToken)) return { type: 'run', commandId: rawToken };
+  return { type: 'unknown', token: rawToken };
+}

package/src/workbench/chat/useChatRuntimeState.ts

@@ -0,0 +1,76 @@
+import { useEffect, useReducer } from 'react';
+import type {
+  RuntimeChatMessage,
+  RuntimeStatus,
+  WorkbenchRuntimeEvent,
+  WorkbenchRuntimeListener,
+} from '@workbench-kit/runtime';
+
+interface ChatRuntimeState {
+  messages: RuntimeChatMessage[];
+  status: RuntimeStatus;
+}
+
+function chatRuntimeReducer(
+  state: ChatRuntimeState,
+  action: WorkbenchRuntimeEvent,
+): ChatRuntimeState {
+  if (action.type === 'message') {
+    const exists = state.messages.some((m) => m.id === action.message.id);
+    return {
+      ...state,
+      messages: exists
+        ? state.messages.map((m) => (m.id === action.message.id ? action.message : m))
+        : [...state.messages, action.message],
+    };
+  }
+
+  if (action.type === 'message-delta') {
+    const exists = state.messages.some((m) => m.id === action.message.id);
+    return {
+      ...state,
+      messages: exists
+        ? state.messages.map((m) => (m.id === action.message.id ? action.message : m))
+        : [...state.messages, action.message],
+    };
+  }
+
+  if (action.type === 'status') {
+    return { ...state, status: action.status };
+  }
+
+  return state;
+}
+
+const INITIAL_STATE: ChatRuntimeState = {
+  messages: [],
+  status: 'idle',
+};
+
+export interface UseChatRuntimeStateInput {
+  subscribe: (listener: WorkbenchRuntimeListener) => () => void;
+}
+
+export interface UseChatRuntimeStateResult {
+  isStreaming: boolean;
+  messages: RuntimeChatMessage[];
+  status: RuntimeStatus;
+}
+
+export function useChatRuntimeState({
+  subscribe,
+}: UseChatRuntimeStateInput): UseChatRuntimeStateResult {
+  const [state, dispatch] = useReducer(chatRuntimeReducer, INITIAL_STATE);
+
+  useEffect(() => {
+    return subscribe((event) => {
+      dispatch(event);
+    });
+  }, [subscribe]);
+
+  return {
+    isStreaming: state.status === 'running',
+    messages: state.messages,
+    status: state.status,
+  };
+}

package/src/workbench/chat/useSlashCommandSuggest.ts

@@ -0,0 +1,101 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import {
+  filterWorkbenchCommands,
+  getNextWorkbenchCommandIndex,
+  type WorkbenchCommandDescriptor,
+} from '../CommandPalette';
+import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
+
+export interface UseSlashCommandSuggestOptions {
+  commands: readonly WorkbenchCommandDescriptor[];
+  limit?: number;
+  value: string;
+}
+
+export interface UseSlashCommandSuggestResult {
+  activeCommand: WorkbenchCommandDescriptor | undefined;
+  activeCommandIndex: number;
+  commandQuery: string;
+  isOpen: boolean;
+  suggestedCommands: readonly WorkbenchCommandDescriptor[];
+  handleKeyDown: (event: KeyboardEvent, onSelect: (commandId: string) => void) => void;
+  setActiveCommandByKey: (commandId: string) => void;
+  setActiveCommandIndex: (index: number) => void;
+}
+
+export function useSlashCommandSuggest({
+  commands,
+  limit = 8,
+  value,
+}: UseSlashCommandSuggestOptions): UseSlashCommandSuggestResult {
+  const [activeCommandIndex, setActiveCommandIndex] = useState(0);
+
+  const isOpen = isSlashCommandInput(value);
+  const commandQuery = getSlashCommandQuery(value);
+
+  const suggestedCommands = useMemo(
+    () => (isOpen ? filterWorkbenchCommands({ commands, limit, query: commandQuery }) : []),
+    [commands, commandQuery, isOpen, limit],
+  );
+
+  const resolvedActiveIndex =
+    suggestedCommands.length > 0 ? Math.min(activeCommandIndex, suggestedCommands.length - 1) : -1;
+  const activeCommand =
+    resolvedActiveIndex >= 0 ? suggestedCommands[resolvedActiveIndex] : undefined;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent, onSelect: (commandId: string) => void) => {
+      if (!isOpen) return;
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setActiveCommandIndex((current) =>
+          getNextWorkbenchCommandIndex({
+            commands: suggestedCommands,
+            currentIndex: current,
+            direction: 'next',
+          }),
+        );
+        return;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setActiveCommandIndex((current) =>
+          getNextWorkbenchCommandIndex({
+            commands: suggestedCommands,
+            currentIndex: current,
+            direction: 'previous',
+          }),
+        );
+        return;
+      }
+
+      if (event.key === 'Enter' && !event.shiftKey && activeCommand) {
+        event.preventDefault();
+        onSelect(activeCommand.id);
+      }
+    },
+    [activeCommand, isOpen, suggestedCommands],
+  );
+
+  const setActiveCommandByKey = useCallback(
+    (commandId: string) => {
+      const index = suggestedCommands.findIndex((cmd) => cmd.id === commandId);
+      setActiveCommandIndex(Math.max(0, index));
+    },
+    [suggestedCommands],
+  );
+
+  return {
+    activeCommand,
+    activeCommandIndex: resolvedActiveIndex,
+    commandQuery,
+    handleKeyDown,
+    isOpen,
+    setActiveCommandByKey,
+    setActiveCommandIndex,
+    suggestedCommands,
+  };
+}