@windowkit/agent-chat 0.3.0 → 0.4.0

package/src/view/MessageList.tsx

@@ -6,8 +6,11 @@ import { memo, useState, type ReactElement } from 'react';
 import { Button, Icon, useClipboard } from 'react-x11';
 
 import { messageMarkdown, sourceLabel } from '../core/markdown.js';
-import type { AgentMessage, Part, PlanPart } from '../core/types.js';
+import type { AgentMessage, FilePart, Part } from '../core/types.js';
+import { DataPartView } from './DataPartView.js';
+import { ImageView } from './ImageView.js';
 import { useLook, type ChatLook } from './look.js';
+import { PlanChecklist } from './PlanChecklist.js';
 import { QuestionCard } from './QuestionCard.js';
 import { TextBlock } from './TextBlock.js';
 import { ToolCard } from './ToolCard.js';
@@ -89,6 +92,14 @@ function UserMessage({
               streaming={false}
               message={message}
             />
+          ) : p.type === 'file' && isImage(p) ? (
+            // a pasted screenshot is the picture, not its token
+            <ImageView
+              key={p.id}
+              source={{ data: p.data! }}
+              maxHeight={look.thumbHeight}
+              alt={p.label}
+            />
           ) : p.type === 'file' && !textOf(message).includes(`[${p.label}]`) ? (
             // an attachment the composer made is already in the text as its
             // token; one sent some other way gets a line of its own
@@ -157,7 +168,7 @@ function PartView({
     case 'question':
       return <QuestionCard part={part} />;
     case 'plan':
-      return <Plan part={part} look={look} />;
+      return <PlanChecklist part={part} />;
     case 'notice':
       return (
         <text
@@ -175,13 +186,15 @@ function PartView({
         </text>
       );
     case 'file':
-      return (
+      return isImage(part) ? (
+        <ImageView source={{ data: part.data! }} alt={part.label} />
+      ) : (
         <text
           style={{ color: look.muted, fontSize: 11 }}
         >{`[${part.label}]`}</text>
       );
     case 'data':
-      return null;
+      return <DataPartView part={part} />;
   }
 }
 
@@ -232,41 +245,6 @@ function Reasoning({
   );
 }
 
-function Plan({
-  part,
-  look,
-}: {
-  part: PlanPart;
-  look: ChatLook;
-}): ReactElement {
-  return (
-    <box style={{ flexDirection: 'column', gap: 2 }}>
-      {part.entries.map((e, i) => (
-        <box
-          key={i}
-          style={{ flexDirection: 'row', gap: 6, alignItems: 'center' }}
-        >
-          {e.status === 'completed' ? (
-            <Icon name="check" size={12} color={look.success} />
-          ) : e.status === 'in_progress' ? (
-            <Icon name="dot" size={12} color={look.accent} />
-          ) : (
-            <Icon name="dash" size={12} color={look.muted} />
-          )}
-          <text
-            style={{
-              color: e.status === 'completed' ? look.muted : look.text,
-              fontWeight: e.status === 'in_progress' ? 'bold' : 'normal',
-            }}
-          >
-            {e.text}
-          </text>
-        </box>
-      ))}
-    </box>
-  );
-}
-
 function CopyButton({ message }: { message: AgentMessage }): ReactElement {
   const clipboard = useClipboard();
   const [copied, setCopied] = useState(false);
@@ -285,6 +263,10 @@ function CopyButton({ message }: { message: AgentMessage }): ReactElement {
   );
 }
 
+function isImage(p: FilePart): boolean {
+  return p.mime.startsWith('image/') && !!p.data;
+}
+
 function textOf(message: AgentMessage): string {
   return message.parts.map((p) => (p.type === 'text' ? p.text : '')).join('');
 }

package/src/view/PlanChecklist.tsx

@@ -0,0 +1,49 @@
+// The agent's plan as a checklist: Claude Code's task list (or a
+// `TodoWrite`), kept current as it works — what is done in the muted
+// colour, what is under way in bold, and how far along it is.
+
+import type { ReactElement } from 'react';
+import { Icon } from 'react-x11';
+
+import type { PlanPart } from '../core/types.js';
+import { useLook } from './look.js';
+
+export function PlanChecklist({ part }: { part: PlanPart }): ReactElement {
+  const look = useLook();
+  const done = part.entries.filter((e) => e.status === 'completed').length;
+  return (
+    <box style={{ flexDirection: 'column', gap: 2 }} aria-label="Plan">
+      <text
+        style={{
+          color: look.muted,
+          fontSize: look.smallSize,
+          fontWeight: 'bold',
+        }}
+      >
+        {`PLAN · ${done} OF ${part.entries.length} DONE`}
+      </text>
+      {part.entries.map((e, i) => (
+        <box
+          key={i}
+          style={{ flexDirection: 'row', gap: look.gap, alignItems: 'center' }}
+        >
+          {e.status === 'completed' ? (
+            <Icon name="check" size={look.captionSize} color={look.success} />
+          ) : e.status === 'in_progress' ? (
+            <Icon name="dot" size={look.captionSize} color={look.accent} />
+          ) : (
+            <Icon name="dash" size={look.captionSize} color={look.muted} />
+          )}
+          <text
+            style={{
+              color: e.status === 'completed' ? look.muted : look.text,
+              fontWeight: e.status === 'in_progress' ? 'bold' : 'normal',
+            }}
+          >
+            {e.text}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}

package/src/view/PullRequestCard.tsx

@@ -0,0 +1,28 @@
+// A pull request a command opened, edited or merged: Bash's
+// `gitOperation.pr`.
+
+import type { ReactElement } from 'react';
+
+import type { PullRequestData } from '../core/types.js';
+import { LinkCard, shortUrl } from './LinkCard.js';
+
+export function PullRequestCard({
+  value,
+}: {
+  value: PullRequestData;
+}): ReactElement {
+  const action = value.action.replace(/-/g, ' ');
+  return (
+    <LinkCard
+      kind="Pull request"
+      title={`#${value.number}`}
+      detail={[
+        action.charAt(0).toUpperCase() + action.slice(1),
+        value.url ? shortUrl(value.url) : '',
+      ]
+        .filter(Boolean)
+        .join(' · ')}
+      {...(value.url ? { href: value.url } : {})}
+    />
+  );
+}

package/src/view/SessionCard.tsx

@@ -0,0 +1,22 @@
+// An agent session started somewhere else — a cloud session the Agent tool
+// launched, a workflow — which the user can open and follow.
+
+import type { ReactElement } from 'react';
+
+import type { SessionLinkData } from '../core/types.js';
+import { LinkCard, shortUrl } from './LinkCard.js';
+
+export function SessionCard({
+  value,
+}: {
+  value: SessionLinkData;
+}): ReactElement {
+  return (
+    <LinkCard
+      kind="Session started"
+      title={value.title ?? 'A new session'}
+      detail={shortUrl(value.url)}
+      href={value.url}
+    />
+  );
+}

package/src/view/SuggestedReplies.tsx

@@ -0,0 +1,34 @@
+// What the harness suggests the user might say next, as chips under the
+// last reply. Pressing one puts it in the composer to edit or send; it never
+// sends by itself.
+
+import type { ReactElement } from 'react';
+import { Button } from 'react-x11';
+
+import { useChat } from './context.js';
+import { useLook } from './look.js';
+
+export function SuggestedReplies({
+  suggestions,
+}: {
+  suggestions: readonly string[];
+}): ReactElement {
+  const { composer } = useChat();
+  const look = useLook();
+  return (
+    <box
+      style={{ flexDirection: 'row', flexWrap: 'wrap', gap: look.gap }}
+      aria-label="Suggested replies"
+    >
+      {suggestions.map((s) => (
+        <Button
+          key={s}
+          size="small"
+          variant="outline"
+          label={s}
+          onPress={() => composer.fill(s)}
+        />
+      ))}
+    </box>
+  );
+}

package/src/view/ToolCard.tsx

@@ -12,6 +12,7 @@ import { TerminalOutput } from '@react-x11/components/terminal-output';
 
 import type { ToolOutput, ToolPart } from '../core/types.js';
 import { useChat } from './context.js';
+import { ImageView } from './ImageView.js';
 import { clipLines, useLook, type ChatLook } from './look.js';
 import { MessageList } from './MessageList.js';
 
@@ -235,7 +236,15 @@ function Output({
     case 'diff':
       return <Diff output={output} />;
     case 'image':
-      return <text style={{ color: look.muted }}>[image, {output.mime}]</text>;
+      return (
+        <ImageView
+          source={{ data: output.data }}
+          {...(output.width && output.height
+            ? { width: output.width, height: output.height }
+            : {})}
+          alt={`An image, ${output.mime}`}
+        />
+      );
     case 'value':
       return (
         <Code source={clipLines(json(output.value), 80)} lang="json" wrap />

package/src/view/Transcript.tsx

@@ -15,6 +15,7 @@ import type { ScrollableNode, ScrollEvent } from 'react-x11';
 import { useChat } from './context.js';
 import { useLook } from './look.js';
 import { MessageList } from './MessageList.js';
+import { SuggestedReplies } from './SuggestedReplies.js';
 import { useSessionSnapshot } from './use-agent.js';
 
 /** Within this many pixels of the end counts as at the end. */
@@ -45,6 +46,13 @@ export function Transcript({ empty }: { empty?: ReactNode }): ReactElement {
   };
 
   const activity = activityOf(snap.status, snap.messages);
+  // offered once the turn is over, under the reply they follow
+  const suggestions =
+    snap.status === 'idle' &&
+    snap.suggestions.length &&
+    snap.messages[snap.messages.length - 1]?.role === 'assistant'
+      ? snap.suggestions
+      : null;
   return (
     <box
       ref={pane}
@@ -59,6 +67,7 @@ export function Transcript({ empty }: { empty?: ReactNode }): ReactElement {
         ) : (
           (empty ?? null)
         )}
+        {suggestions ? <SuggestedReplies suggestions={suggestions} /> : null}
         {activity ? (
           <text style={{ color: look.muted, fontSize: 12 }}>{activity}</text>
         ) : null}

package/src/view/context.ts

@@ -33,6 +33,25 @@ export interface ChatContextValue {
   onLink: ((href: string) => void) | undefined;
   /** Base text size, the theme's unless the app said. */
   fontSize: number | undefined;
+  /** The message box, for a part that puts text in it without sending. */
+  composer: ComposerChannel;
+}
+
+/** How a part reaches the composer: it attaches while mounted. */
+export interface ComposerChannel {
+  /** Replace what is in the box, and focus it. Sends nothing. */
+  fill(text: string): void;
+  attach(fill: ((text: string) => void) | null): void;
+}
+
+export function composerChannel(): ComposerChannel {
+  let current: ((text: string) => void) | null = null;
+  return {
+    fill: (text) => current?.(text),
+    attach: (fill) => {
+      current = fill;
+    },
+  };
 }
 
 export const ChatContext = createContext<ChatContextValue | null>(null);

package/src/view/look.ts

@@ -22,6 +22,20 @@ export interface ChatLook {
   mono: string;
   /** The user's bubble: the text colour, faintly, so it shows on any ground. */
   bubble: string;
+  /** Labels, states and captions. */
+  smallSize: number;
+  /** A secondary line: a thought, a notice, a card's detail. */
+  captionSize: number;
+  /** A card's corners. */
+  radius: number;
+  /** Inside a card, from its edge. */
+  inset: number;
+  /** Between a card's pieces. */
+  gap: number;
+  /** The tallest an image in a reply or a tool's output is drawn. */
+  imageHeight: number;
+  /** The tallest an image in the user's own message is drawn. */
+  thumbHeight: number;
 }
 
 export function useLook(): ChatLook {
@@ -40,6 +54,13 @@ export function useLook(): ChatLook {
       warning: String(theme.warning ?? '#e67e22'),
       mono: String(theme.monoFamily ?? 'monospace'),
       bubble: tint(text, 0.07),
+      smallSize: 11,
+      captionSize: 12,
+      radius: 6,
+      inset: 8,
+      gap: 6,
+      imageHeight: 320,
+      thumbHeight: 160,
     };
   }, [theme]);
 }