@windowkit/agent-chat 0.0.0-stage → 0.3.0

package/src/view/look.ts

@@ -0,0 +1,70 @@
+// The palette the chat draws with, read from the theme in force, so the chat
+// takes the app's look and the desktop's light or dark scheme.
+
+import { useMemo } from 'react';
+import { useTheme } from 'react-x11';
+import { tint } from 'react-x11/style';
+import {
+  codeBlockLook,
+  type CodeBlockLook,
+} from '@react-x11/components/codeblock';
+
+export interface ChatLook {
+  text: string;
+  muted: string;
+  border: string;
+  surface: string;
+  background: string;
+  accent: string;
+  danger: string;
+  success: string;
+  warning: string;
+  mono: string;
+  /** The user's bubble: the text colour, faintly, so it shows on any ground. */
+  bubble: string;
+}
+
+export function useLook(): ChatLook {
+  const theme = useTheme();
+  return useMemo(() => {
+    const text = String(theme.text ?? '#2d3436');
+    return {
+      text,
+      muted: String(theme.textMuted ?? '#7f8c8d'),
+      border: String(theme.border ?? '#b2bec3'),
+      surface: String(theme.surface ?? '#f1f2f6'),
+      background: String(theme.background ?? 'white'),
+      accent: String(theme.accent ?? '#2980b9'),
+      danger: String(theme.danger ?? '#c0392b'),
+      success: String(theme.success ?? '#27ae60'),
+      warning: String(theme.warning ?? '#e67e22'),
+      mono: String(theme.monoFamily ?? 'monospace'),
+      bubble: tint(text, 0.07),
+    };
+  }, [theme]);
+}
+
+/**
+ * What a block of code looks like here: what `<Markdown>` draws a fence
+ * with, at the chat's text size, so a fence the chat draws itself (to carry
+ * its actions) has the fill, radius, inset and spacing of one it does not.
+ */
+export function useCodeLook(fontSize: number | undefined): CodeBlockLook {
+  const theme = useTheme() as unknown as Record<string, unknown>;
+  return useMemo(
+    () => codeBlockLook(theme, fontSize ? { baseSize: fontSize } : {}),
+    [theme, fontSize],
+  );
+}
+
+/** At most `max` lines: the first and last halves, and how many were cut. */
+export function clipLines(text: string, max = 200): string {
+  const lines = text.split('\n');
+  if (lines.length <= max) return text;
+  const half = Math.floor(max / 2);
+  return [
+    ...lines.slice(0, half),
+    `… ${lines.length - max} more lines …`,
+    ...lines.slice(-half),
+  ].join('\n');
+}

package/src/view/types.ts

@@ -0,0 +1,71 @@
+// The view's own props: renderers and actions. Nothing here reaches the
+// session, but `describe` does reach the agent, as instructions.
+
+import type { ComponentType, ReactNode } from 'react';
+import type { IconName } from 'react-x11';
+import type { FenceInfo } from '@react-x11/components/markdown';
+
+import type { AgentSession } from '../core/session.js';
+import type {
+  ToolDef,
+  ToolParameters,
+  InferInput,
+  ToolRenderInfo,
+} from '../core/tools.js';
+import type { AgentMessage } from '../core/types.js';
+
+export type { FenceInfo };
+
+/**
+ * How a fenced block with this language is drawn: a function, or the
+ * function and a line that tells the agent the format exists.
+ */
+export type FenceEntry =
+  | ((fence: FenceInfo) => ReactNode)
+  | { render: (fence: FenceInfo) => ReactNode; describe?: string };
+
+/**
+ * A component a reply may name as a tag on its own line: `<Ticket id="12"/>`.
+ * A tag is a component iff its name is a key here; nothing is evaluated.
+ */
+export type ComponentEntry =
+  | ComponentType<Record<string, unknown>>
+  | { component: ComponentType<Record<string, unknown>>; describe?: string };
+
+/** What a code action is handed besides the fence. */
+export interface CodeActionContext {
+  session: AgentSession;
+  message: AgentMessage;
+  /** Put text on the clipboard. */
+  copy(text: string): Promise<void>;
+}
+
+/** A button on a fenced code block's header. */
+export interface CodeAction {
+  id: string;
+  label: string;
+  icon?: IconName;
+  /** Shown for a moment after `run` resolves: `'Copied'`. */
+  doneLabel?: string;
+  /** Default: every block. */
+  when?: (fence: FenceInfo) => boolean;
+  run(fence: FenceInfo, ctx: CodeActionContext): void | Promise<void>;
+}
+
+/** The built-in Copy. The default `codeActions` is `[copyCode]`. */
+export const copyCode: CodeAction = Object.freeze({
+  id: 'copy',
+  label: 'Copy',
+  doneLabel: 'Copied',
+  run: (fence: FenceInfo, ctx: CodeActionContext) => ctx.copy(fence.text),
+});
+
+/** Draws a tool call: the part, its parsed input, and what `run` returned. */
+export type ToolRenderer = (info: ToolRenderInfo) => ReactNode;
+
+/** `defineTool`, with `render` typed for this view. */
+export function defineTool<P extends ToolParameters, O>(
+  def: ToolDef<InferInput<P>, O, ReactNode> & { parameters: P },
+): ToolDef<InferInput<P>, O, ReactNode> {
+  return def;
+}

package/src/view/use-agent.ts

@@ -0,0 +1,40 @@
+// The session as React state.
+
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+
+import {
+  createAgentSession,
+  type AgentOptions,
+  type AgentSession,
+  type SessionSnapshot,
+} from '../core/session.js';
+
+/**
+ * A session for this component's life: made at the first render from
+ * `options`, which are read once (give the component a new `key` to start
+ * over), and closed when the component unmounts. The component re-renders
+ * whenever the session changes.
+ */
+export function useAgent(options: AgentOptions): AgentSession {
+  const [session] = useState(() => createAgentSession(options));
+  useSessionSnapshot(session);
+  // Closed a turn after the unmount, not at it: StrictMode's development
+  // double mount unmounts and mounts again at once, and the session should
+  // survive that.
+  const mounted = useRef(0);
+  useEffect(() => {
+    mounted.current++;
+    return () => {
+      const at = --mounted.current;
+      setTimeout(() => {
+        if (mounted.current === at && at === 0) void session.close();
+      }, 0);
+    };
+  }, [session]);
+  return session;
+}
+
+/** The session's current snapshot, re-rendering as it changes. */
+export function useSessionSnapshot(session: AgentSession): SessionSnapshot {
+  return useSyncExternalStore(session.subscribe, () => session.snapshot);
+}