@windowkit/agent-chat 0.1.0 → 0.4.0

package/src/view/look.ts

@@ -4,6 +4,10 @@
 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;
@@ -18,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 {
@@ -36,10 +54,30 @@ 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]);
 }
 
+/**
+ * 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');