Merge pull request #2651 from GCWing/gcwing/steering-queue-redesign

feat(flow-chat): redesign steering queue and composer editing

Author: GCWing

design-system/apps/design-lab/src/preview/FlowChatPreviewRegistry.tsx

@@ -23,28 +23,40 @@ import {
   Image as ImageIcon,
   Info,
   Layers,
+  ListEnd,
   ListTodo,
   MessageSquare,
   Mic,
   Monitor,
   Plus,
+  Pencil,
   Rocket,
   Search,
   SearchCheck,
   Shield,
   SquareTerminal,
   Terminal,
   Timer,
+  Trash2,
   Zap,
   type LucideIcon,
 } from "lucide-react";
+import { IconButton } from "@bitfun/ui";
 import {
   AgentControlToolCard,
   AgentWaitToolCard,
   AmbientToolCard,
   AmbientToolCardHeader,
   AskUser,
   ChatComposer,
+  ChatComposerQueue,
+  ChatComposerQueueAttachmentBadge,
+  ChatComposerQueueHeader,
+  ChatComposerQueueItem,
+  ChatComposerQueueItemActions,
+  ChatComposerQueueItemContent,
+  ChatComposerQueueList,
+  ChatComposerQueueTitle,
   CommandToolCard,
   ContextCompressionToolCard,
   DefaultToolCard,
@@ -122,6 +134,7 @@ type PreviewProps = FlowChatPreviewRenderOptions;
 function ChatComposerPreview({ interactive, state }: PreviewProps) {
   const [value, setValue] = useState("");
   const expanded = state === "expanded";
+  const queued = state === "queued";
 
   return (
     <div className="flow-chat-composer-preview">
@@ -168,6 +181,44 @@ function ChatComposerPreview({ interactive, state }: PreviewProps) {
           </>
         )}
         layout={expanded ? "expanded" : "compact"}
+        queue={queued ? (
+          <ChatComposerQueue aria-label="Wait for sending">
+            <ChatComposerQueueHeader>
+              <ListEnd aria-hidden="true" />
+              <ChatComposerQueueTitle count={13}>
+                Wait for sending
+              </ChatComposerQueueTitle>
+            </ChatComposerQueueHeader>
+            <ChatComposerQueueList>
+              <ChatComposerQueueItem>
+                <ChatComposerQueueItemContent>
+                  Help me turn these two photos into Studio Ghibli style. Wait, maybe…
+                </ChatComposerQueueItemContent>
+                <ChatComposerQueueAttachmentBadge
+                  count={3}
+                  label="3 image attachments"
+                />
+                <ChatComposerQueueItemActions>
+                  <IconButton
+                    aria-label="Send now"
+                    icon={<ArrowUp />}
+                    size="xs"
+                  />
+                  <IconButton
+                    aria-label="Delete"
+                    icon={<Trash2 />}
+                    size="xs"
+                  />
+                  <IconButton
+                    aria-label="Edit"
+                    icon={<Pencil />}
+                    size="xs"
+                  />
+                </ChatComposerQueueItemActions>
+              </ChatComposerQueueItem>
+            </ChatComposerQueueList>
+          </ChatComposerQueue>
+        ) : undefined}
         startActions={(
           <button
             aria-label="Add context"
@@ -970,7 +1021,7 @@ export const flowChatPreviewDefinitions = {
   },
   ChatComposer: {
     attention: "adaptive",
-    codeSample: () => `import { ChatComposer } from "@bitfun/ui/flow-chat";\n\n<ChatComposer\n  contextBar={<WorkspaceContext />}\n  layout={multiline ? "expanded" : "compact"}\n  startActions={<AddMenu />}\n  endActions={<ComposerActions />}\n>\n  <RichTextEditor />\n</ChatComposer>`,
+    codeSample: () => `import { ChatComposer } from "@bitfun/ui/flow-chat";\n\n<ChatComposer\n  contextBar={<WorkspaceContext />}\n  queue={pendingMessages.length ? <PendingMessageQueue items={pendingMessages} /> : undefined}\n  layout={multiline ? "expanded" : "compact"}\n  startActions={<AddMenu />}\n  endActions={<ComposerActions />}\n>\n  <RichTextEditor />\n</ChatComposer>`,
     icon: MessageSquare,
     render: (options) => <ChatComposerPreview {...options} />,
     section: "framework",

design-system/apps/design-lab/vite/component-detail-contract.test.mjs

@@ -160,7 +160,7 @@ test("FlowChat gallery renders only the real migrated tool-card components", asy
 
 test("CommandToolCard previews follow the runtime command-state presentation", async () => {
   const preview = await readFile(flowChatPreviewSource, "utf8");
-  const commandPreview = /function CommandPreview[\s\S]*?\n}\n\nfunction resolveFileOperation/.exec(preview)?.[0];
+  const commandPreview = /function CommandPreview[\s\S]*?\r?\n}\r?\n\r?\nfunction resolveFileOperation/.exec(preview)?.[0];
 
   assert.ok(commandPreview);
   assert.match(

design-system/packages/ui/src/flow-chat/composer/ChatComposer.meta.ts

@@ -2,26 +2,31 @@ import type { ComponentMeta } from "../../registry.types";
 
 export const chatComposerMeta = {
   category: "flow-chat",
-  description: "A slot-based FlowChat composer with a context bar and compact or expanded input anatomy.",
+  description: "A slot-based FlowChat composer with context, pending-message queue, and compact or expanded input anatomy.",
   maturity: "stable",
   name: "ChatComposer",
   props: [
     { defaultValue: "compact", name: "layout", type: "compact | expanded" },
     { name: "contextBar", type: "ReactNode" },
+    { name: "queue", type: "ReactNode" },
     { name: "children", type: "ReactNode" },
     { name: "startActions", type: "ReactNode" },
     { name: "endActions", type: "ReactNode" },
     { defaultValue: "false", name: "busy", type: "boolean" },
     { defaultValue: "false", name: "disabled", type: "boolean" },
     { name: "surfaceClassName", type: "string" },
   ],
-  states: ["default", "expanded", "focus-visible", "busy", "disabled"],
+  states: ["default", "expanded", "queued", "focus-visible", "busy", "disabled"],
   tokens: [
     "border.width.default",
     "color.action.neutral.border",
     "color.border.default",
+    "color.content.muted",
     "color.content.primary",
+    "color.content.secondary",
     "color.surface.panel",
+    "color.surface.raised",
+    "color.surface.subtle",
     "control.chatComposer.compactGap",
     "control.chatComposer.compactHeight",
     "control.chatComposer.compactPaddingBlock",
@@ -30,14 +35,18 @@ export const chatComposerMeta = {
     "control.chatComposer.controlHeight",
     "control.height.md",
     "font.family.control",
+    "font.size.body",
     "font.size.small",
+    "font.weight.medium",
     "font.weight.regular",
+    "radius.lg",
     "radius.2xl",
     "radius.pill",
     "shadow.base",
     "space.1",
     "space.2",
     "space.3",
+    "space.4",
     "space.6",
     "space.8",
     "space.12",

design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css

@@ -28,6 +28,38 @@
     padding-inline: var(--bf-space-2);
   }
 
+  .body {
+    display: contents;
+  }
+
+  .queue {
+    min-inline-size: 0;
+  }
+
+  .queue:empty {
+    display: none;
+  }
+
+  .body:has(> .queue:not(:empty)) {
+    box-sizing: border-box;
+    display: grid;
+    min-inline-size: 0;
+    inline-size: 100%;
+    gap: var(--bf-space-2);
+    padding: var(--bf-space-2);
+    border: var(--bf-border-width-default) solid var(--bf-color-action-neutral-border);
+    border-radius: var(--bf-radius-2xl);
+    background: var(--bf-color-surface-panel);
+    box-shadow: var(--bf-shadow-base);
+    transition:
+      border-color var(--bf-motion-duration-fast) var(--bf-motion-easing-standard),
+      box-shadow var(--bf-motion-duration-fast) var(--bf-motion-easing-standard);
+  }
+
+  .body:has(> .queue:not(:empty)):focus-within {
+    border-color: var(--bf-color-border-default);
+  }
+
   .surface {
     display: grid;
     min-inline-size: 0;
@@ -79,6 +111,20 @@
     border-color: var(--bf-color-border-default);
   }
 
+  .body:has(> .queue:not(:empty)) .surface {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .body:has(> .queue:not(:empty)) .surface:focus-within {
+    border-color: transparent;
+  }
+
+  .body:has(> .queue:not(:empty)) .surface[data-bf-layout="compact"] {
+    padding-inline: 0;
+  }
+
   .content {
     grid-area: content;
     box-sizing: border-box;
@@ -136,14 +182,16 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .body,
     .surface {
       transition: none;
     }
   }
 
   @media (forced-colors: active) {
     .surface,
-    .surface:focus-within {
+    .surface:focus-within,
+    .body:has(> .queue:not(:empty)) {
       border-color: CanvasText;
       box-shadow: none;
     }

design-system/packages/ui/src/flow-chat/composer/ChatComposer.tsx

@@ -18,6 +18,7 @@ export interface ChatComposerProps
   disabled?: boolean;
   endActions?: ReactNode;
   layout?: ChatComposerLayout;
+  queue?: ReactNode;
   startActions?: ReactNode;
   surfaceClassName?: string;
 }
@@ -93,6 +94,7 @@ export const ChatComposer = forwardRef<HTMLDivElement, ChatComposerProps>(
     disabled = false,
     endActions,
     layout = "compact",
+    queue,
     startActions,
     surfaceClassName,
     ...props
@@ -113,7 +115,6 @@ export const ChatComposer = forwardRef<HTMLDivElement, ChatComposerProps>(
       <div
         {...props}
         aria-busy={busy ? true : ariaBusy}
-        aria-disabled={disabled || undefined}
         className={classNames(styles.root, className)}
         data-bf-component="chat-composer"
         data-bf-state={state}
@@ -125,24 +126,32 @@ export const ChatComposer = forwardRef<HTMLDivElement, ChatComposerProps>(
             {contextBar}
           </div>
         )}
-        <div
-          className={classNames(styles.surface, surfaceClassName)}
-          data-bf-layout={layout}
-          data-bf-part="surface"
-        >
-          {hasSlot(resolvedStartActions) && (
-            <div className={styles.startActions} data-bf-part="startActions">
-              {resolvedStartActions}
+        <div className={styles.body} data-bf-part="body">
+          {hasSlot(queue) && (
+            <div className={styles.queue} data-bf-part="queue">
+              {queue}
             </div>
           )}
-          <div className={styles.content} data-bf-part="content">
-            {compoundSlots.content}
-          </div>
-          {hasSlot(resolvedEndActions) && (
-            <div className={styles.endActions} data-bf-part="endActions">
-              {resolvedEndActions}
+          <div
+            aria-disabled={disabled || undefined}
+            className={classNames(styles.surface, surfaceClassName)}
+            data-bf-layout={layout}
+            data-bf-part="surface"
+          >
+            {hasSlot(resolvedStartActions) && (
+              <div className={styles.startActions} data-bf-part="startActions">
+                {resolvedStartActions}
+              </div>
+            )}
+            <div className={styles.content} data-bf-part="content">
+              {compoundSlots.content}
             </div>
-          )}
+            {hasSlot(resolvedEndActions) && (
+              <div className={styles.endActions} data-bf-part="endActions">
+                {resolvedEndActions}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     );