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

package/src/workbench/chat/ChatComposer.tsx

@@ -1,163 +1,163 @@
-import {
-  forwardRef,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  type KeyboardEvent,
-  type ReactNode,
-  type TextareaHTMLAttributes,
-} from 'react';
-import { IconButton } from '../../primitives/icon-button';
-import { TextArea } from '../../primitives/text-area';
-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 = () => {
-      if (!value || disabled || isRunning) return;
-
-      onSubmit(value);
-      window.requestAnimationFrame(() => {
-        if (!textareaRef.current) return;
-
-        textareaRef.current.style.height = 'auto';
-        textareaRef.current.focus();
-      });
-    };
-
-    const handleCommandClick = () => {
-      onCommandClick?.();
-      window.requestAnimationFrame(() => {
-        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)}
-            controlWidth="full"
-            disabled={disabled}
-            placeholder={placeholder}
-            resize="none"
-            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 ? (
-                <>
-                  <IconButton
-                    className="composer__tool-btn"
-                    icon="add"
-                    label={contextLabel}
-                    onClick={onContextClick}
-                  />
-                  <IconButton
-                    className="composer__tool-btn"
-                    icon="terminal"
-                    label={commandLabel}
-                    onClick={handleCommandClick}
-                  />
-                </>
-              ) : null}
-            </div>
-            <div className="composer__toolbar-right">
-              {isRunning ? (
-                <IconButton
-                  className="composer__send-btn composer__send-btn--cancel"
-                  icon="stop-circle"
-                  label={cancelLabel}
-                  onClick={onCancel}
-                />
-              ) : (
-                <IconButton
-                  className="composer__send-btn"
-                  disabled={disabled || !value}
-                  icon="send"
-                  label={submitLabel}
-                  onClick={handleSubmit}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
+import {
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  type KeyboardEvent,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from 'react';
+import { IconButton } from '../../primitives/icon-button';
+import { TextArea } from '../../primitives/text-area';
+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 = () => {
+      if (!value || disabled || isRunning) return;
+
+      onSubmit(value);
+      window.requestAnimationFrame(() => {
+        if (!textareaRef.current) return;
+
+        textareaRef.current.style.height = 'auto';
+        textareaRef.current.focus();
+      });
+    };
+
+    const handleCommandClick = () => {
+      onCommandClick?.();
+      window.requestAnimationFrame(() => {
+        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)}
+            controlWidth="full"
+            disabled={disabled}
+            placeholder={placeholder}
+            resize="none"
+            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 ? (
+                <>
+                  <IconButton
+                    className="composer__tool-btn"
+                    icon="add"
+                    label={contextLabel}
+                    onClick={onContextClick}
+                  />
+                  <IconButton
+                    className="composer__tool-btn"
+                    icon="terminal"
+                    label={commandLabel}
+                    onClick={handleCommandClick}
+                  />
+                </>
+              ) : null}
+            </div>
+            <div className="composer__toolbar-right">
+              {isRunning ? (
+                <IconButton
+                  className="composer__send-btn composer__send-btn--cancel"
+                  icon="stop-circle"
+                  label={cancelLabel}
+                  onClick={onCancel}
+                />
+              ) : (
+                <IconButton
+                  className="composer__send-btn"
+                  disabled={disabled || !value}
+                  icon="send"
+                  label={submitLabel}
+                  onClick={handleSubmit}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/workbench/chat/ChatConversationBar.tsx

@@ -1,134 +1,134 @@
-import { useCallback, useId, useRef, useState, type ReactNode } from 'react';
-import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
-import { Button } from '../../primitives/button';
-import { IconButton } from '../../primitives/icon-button';
-import { ChatHistoryMenu } from './ChatHistoryMenu';
-import type {
-  WorkbenchChatConversation,
-  WorkbenchChatConversationLabels,
-} from './chatConversation';
-import { defaultWorkbenchChatConversationLabels } from './chatConversation';
-
-export interface ChatConversationBarProps {
-  activeConversationId: string;
-  conversations: readonly WorkbenchChatConversation[];
-  labels?: Partial<WorkbenchChatConversationLabels> | undefined;
-  moreMenuItems?: readonly ContextMenuItem[] | undefined;
-  onActivate: (conversationId: string) => void;
-  onCreate: () => void;
-  onDelete: (conversationId: string) => void;
-  onRename: (conversationId: string, title: string) => void;
-  /** Optional slot for a second pill next to the active conversation control. */
-  secondaryPill?: ReactNode | undefined;
-}
-
-export function ChatConversationBar({
-  activeConversationId,
-  conversations,
-  labels: labelOverrides,
-  moreMenuItems,
-  onActivate,
-  onCreate,
-  onDelete,
-  onRename,
-  secondaryPill,
-}: ChatConversationBarProps) {
-  const labels = { ...defaultWorkbenchChatConversationLabels, ...labelOverrides };
-  const pillRef = useRef<HTMLButtonElement>(null);
-  const metaTooltipId = useId();
-  const [menu, setMenu] = useState<{ kind: 'history' | 'more'; x: number; y: number } | null>(null);
-
-  const activeConversation = conversations.find(
-    (conversation) => conversation.id === activeConversationId,
-  );
-  const activeTitle = activeConversation?.title ?? labels.newChat;
-
-  const openMenu = useCallback((kind: 'history' | 'more', anchor: HTMLElement) => {
-    const rect = anchor.getBoundingClientRect();
-    setMenu({
-      kind,
-      x: rect.left,
-      y: rect.bottom + 4,
-    });
-  }, []);
-
-  const closeMenu = useCallback(() => {
-    setMenu(null);
-  }, []);
-
-  return (
-    <>
-      <div className="chat-conversation-bar">
-        <div className="chat-conversation-bar__pill-wrap">
-          <Button
-            ref={pillRef}
-            aria-describedby={activeConversation?.metaTooltip ? metaTooltipId : undefined}
-            aria-expanded={menu?.kind === 'history'}
-            aria-haspopup="menu"
-            aria-label={labels.historyTitle(activeTitle)}
-            className="chat-conversation-bar__pill"
-            title={activeTitle}
-            onClick={() => {
-              if (pillRef.current) openMenu('history', pillRef.current);
-            }}
-          >
-            <span className="chat-conversation-bar__pill-label">{activeTitle}</span>
-            <i aria-hidden="true" className="codicon codicon-chevron-down" />
-          </Button>
-
-          {activeConversation?.metaTooltip ? (
-            <div className="chat-conversation-bar__meta-wrap" id={metaTooltipId} role="tooltip">
-              <div className="chat-conversation-bar__meta">{activeConversation.metaTooltip}</div>
-            </div>
-          ) : null}
-        </div>
-
-        {secondaryPill}
-
-        <IconButton
-          className="chat-conversation-bar__icon-btn"
-          compact
-          icon="codicon-add"
-          label={labels.newChatAction}
-          onClick={() => onCreate()}
-        />
-
-        {moreMenuItems?.length ? (
-          <IconButton
-            className="chat-conversation-bar__icon-btn"
-            compact
-            icon="codicon-ellipsis"
-            label={labels.moreActions}
-            onClick={(event) => openMenu('more', event.currentTarget)}
-          />
-        ) : null}
-      </div>
-
-      {menu?.kind === 'history' ? (
-        <ChatHistoryMenu
-          activeConversationId={activeConversationId}
-          conversations={conversations}
-          labels={labels}
-          x={menu.x}
-          y={menu.y}
-          onActivate={onActivate}
-          onClose={closeMenu}
-          onCreate={onCreate}
-          onDelete={onDelete}
-          onRename={onRename}
-        />
-      ) : null}
-
-      {menu?.kind === 'more' && moreMenuItems?.length ? (
-        <ContextMenu
-          ariaLabel={labels.moreActions}
-          className="chat-conversation-bar__menu"
-          items={[...moreMenuItems]}
-          x={menu.x}
-          y={menu.y}
-          onClose={closeMenu}
-        />
-      ) : null}
-    </>
-  );
-}
+import { useCallback, useId, useRef, useState, type ReactNode } from 'react';
+import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
+import { Button } from '../../primitives/button';
+import { IconButton } from '../../primitives/icon-button';
+import { ChatHistoryMenu } from './ChatHistoryMenu';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+import { defaultWorkbenchChatConversationLabels } from './chatConversation';
+
+export interface ChatConversationBarProps {
+  activeConversationId: string;
+  conversations: readonly WorkbenchChatConversation[];
+  labels?: Partial<WorkbenchChatConversationLabels> | undefined;
+  moreMenuItems?: readonly ContextMenuItem[] | undefined;
+  onActivate: (conversationId: string) => void;
+  onCreate: () => void;
+  onDelete: (conversationId: string) => void;
+  onRename: (conversationId: string, title: string) => void;
+  /** Optional slot for a second pill next to the active conversation control. */
+  secondaryPill?: ReactNode | undefined;
+}
+
+export function ChatConversationBar({
+  activeConversationId,
+  conversations,
+  labels: labelOverrides,
+  moreMenuItems,
+  onActivate,
+  onCreate,
+  onDelete,
+  onRename,
+  secondaryPill,
+}: ChatConversationBarProps) {
+  const labels = { ...defaultWorkbenchChatConversationLabels, ...labelOverrides };
+  const pillRef = useRef<HTMLButtonElement>(null);
+  const metaTooltipId = useId();
+  const [menu, setMenu] = useState<{ kind: 'history' | 'more'; x: number; y: number } | null>(null);
+
+  const activeConversation = conversations.find(
+    (conversation) => conversation.id === activeConversationId,
+  );
+  const activeTitle = activeConversation?.title ?? labels.newChat;
+
+  const openMenu = useCallback((kind: 'history' | 'more', anchor: HTMLElement) => {
+    const rect = anchor.getBoundingClientRect();
+    setMenu({
+      kind,
+      x: rect.left,
+      y: rect.bottom + 4,
+    });
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    setMenu(null);
+  }, []);
+
+  return (
+    <>
+      <div className="chat-conversation-bar">
+        <div className="chat-conversation-bar__pill-wrap">
+          <Button
+            ref={pillRef}
+            aria-describedby={activeConversation?.metaTooltip ? metaTooltipId : undefined}
+            aria-expanded={menu?.kind === 'history'}
+            aria-haspopup="menu"
+            aria-label={labels.historyTitle(activeTitle)}
+            className="chat-conversation-bar__pill"
+            title={activeTitle}
+            onClick={() => {
+              if (pillRef.current) openMenu('history', pillRef.current);
+            }}
+          >
+            <span className="chat-conversation-bar__pill-label">{activeTitle}</span>
+            <i aria-hidden="true" className="codicon codicon-chevron-down" />
+          </Button>
+
+          {activeConversation?.metaTooltip ? (
+            <div className="chat-conversation-bar__meta-wrap" id={metaTooltipId} role="tooltip">
+              <div className="chat-conversation-bar__meta">{activeConversation.metaTooltip}</div>
+            </div>
+          ) : null}
+        </div>
+
+        {secondaryPill}
+
+        <IconButton
+          className="chat-conversation-bar__icon-btn"
+          compact
+          icon="codicon-add"
+          label={labels.newChatAction}
+          onClick={() => onCreate()}
+        />
+
+        {moreMenuItems?.length ? (
+          <IconButton
+            className="chat-conversation-bar__icon-btn"
+            compact
+            icon="codicon-ellipsis"
+            label={labels.moreActions}
+            onClick={(event) => openMenu('more', event.currentTarget)}
+          />
+        ) : null}
+      </div>
+
+      {menu?.kind === 'history' ? (
+        <ChatHistoryMenu
+          activeConversationId={activeConversationId}
+          conversations={conversations}
+          labels={labels}
+          x={menu.x}
+          y={menu.y}
+          onActivate={onActivate}
+          onClose={closeMenu}
+          onCreate={onCreate}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      ) : null}
+
+      {menu?.kind === 'more' && moreMenuItems?.length ? (
+        <ContextMenu
+          ariaLabel={labels.moreActions}
+          className="chat-conversation-bar__menu"
+          items={[...moreMenuItems]}
+          x={menu.x}
+          y={menu.y}
+          onClose={closeMenu}
+        />
+      ) : null}
+    </>
+  );
+}