@alia.onl/sdk 15.7.0 → 19.0.0

package/src/components/Markdown.tsx

@@ -1,31 +1,515 @@
-import type { ReactNode } from 'react';
-import { Markdown } from '@oxy.so/bloom/markdown';
+import React, { useMemo, type ReactNode } from 'react';
+import { View, Text, Platform, Linking } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import Markdown, { MarkdownIt, type ASTNode } from 'react-native-markdown-display';
+import { CodeBlock } from '@oxy.so/bloom/code';
+import { fontFamilies } from '@oxy.so/bloom/fonts';
+import type { AliaColors } from '../theme';
 
-/** The body text of a reply: its bubble sets its padding from these. Bloom's `lg` ramp. */
-export const MARKDOWN_BODY = { fontSize: 16, lineHeight: 28 } as const;
+// Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
+// The main app always passes resolved colors via the `colors` prop.
+const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
+const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
+const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
 
+function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
+
+  /**
+   * Fenced and indented code: Bloom's `CodeBlock` unless the host brings a
+   * code card of its own.
+   */
+  const drawCodeBlock: RenderCodeBlock =
+    renderCodeBlock ?? ((code, language) => <CodeBlock code={code} language={language} />);
+  const codeRules = {
+    fence: (node: ASTNode) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {drawCodeBlock(node.content.replace(/\n$/, ''), codeLanguage(node))}
+      </View>
+    ),
+    code_block: (node: ASTNode) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {drawCodeBlock(node.content.replace(/\n$/, ''), undefined)}
+      </View>
+    ),
+  };
+
+  return {
+    ...codeRules,
+    heading1: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          fontSize: 18,
+          fontWeight: '600',
+          lineHeight: 24,
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    heading2: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    heading3: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    heading4: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    heading5: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    heading6: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    code: (node: ASTNode, children: ReactNode[], parent: ASTNode[]) => {
+      return parent.length > 1 ? (
+        <View
+          key={node.key}
+          style={{
+            marginVertical: 8,
+            overflow: 'hidden',
+            borderRadius: 6,
+            backgroundColor: muted,
+            borderWidth: 1,
+            borderColor: border,
+            padding: 12,
+          }}
+        >
+          <Text style={{ fontSize: 13, fontFamily: MONO_FONT }}>{children}</Text>
+        </View>
+      ) : (
+        <Text
+          key={node.key}
+          style={{
+            backgroundColor: muted,
+            paddingHorizontal: 4,
+            paddingVertical: 1,
+            fontSize: 13,
+            fontFamily: MONO_FONT,
+            borderRadius: 3,
+          }}
+        >
+          {children}
+        </Text>
+      );
+    },
+    list_item: (node: ASTNode, children: ReactNode[], parent: ASTNode[]) => {
+      const isOrdered = parent[parent.length - 1]?.type === 'ordered_list';
+      const bullet = isOrdered
+        ? `${parent[parent.length - 1].children.indexOf(node) + 1}.`
+        : '\u2022';
+
+      return (
+        <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>
+            {bullet}
+          </Text>
+          {/* A View, not a Text: a nested list is a View, and inside a Text it runs inline. */}
+          <View style={{ flex: 1 }}>{children}</View>
+        </View>
+      );
+    },
+    ordered_list: (node: ASTNode, children: ReactNode[]) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {children}
+      </View>
+    ),
+    unordered_list: (node: ASTNode, children: ReactNode[]) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {children}
+      </View>
+    ),
+    strong: (node: ASTNode, children: ReactNode[]) => (
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
+    ),
+    link: (node: ASTNode, children: ReactNode[]) => (
+      <Text
+        key={node.key}
+        style={{ color: primary, textDecorationLine: 'underline', ...BODY_TEXT }}
+        onPress={() => {
+          if (node.attributes?.href) Linking.openURL(node.attributes.href);
+        }}
+      >
+        {children}
+      </Text>
+    ),
+    paragraph: (node: ASTNode, children: ReactNode[]) => (
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
+    ),
+    blockquote: (node: ASTNode, children: ReactNode[]) => (
+      <View
+        key={node.key}
+        style={{
+          marginVertical: 8,
+          borderLeftWidth: 4,
+          borderLeftColor: border,
+          backgroundColor: muted,
+          paddingHorizontal: 12,
+          paddingVertical: 4,
+          borderTopRightRadius: 6,
+          borderBottomRightRadius: 6,
+        }}
+      >
+        {children}
+      </View>
+    ),
+    hr: (node: ASTNode) => (
+      <View
+        key={node.key}
+        style={{
+          marginVertical: 16,
+          height: 1,
+          backgroundColor: border,
+        }}
+      />
+    ),
+    body: (node: ASTNode, children: ReactNode[]) => {
+      return (
+        <View key={node.key} style={{ marginBottom: -8 }}>
+          {children}
+        </View>
+      );
+    },
+  };
+}
+
+function createStyles(colors: AliaColors, fontFamily: string | undefined) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
+
+  return {
+    // On WEB the family arrives through the cascade down to `html`, so naming
+    // one here would override Bloom rather than complement it.
+    //
+    // On NATIVE nothing arrives. Bloom's only app-wide mechanism is the
+    // `Text.defaultProps.style` mutation in its `FontLoader.native.tsx`, and
+    // **React 19 drops `defaultProps` under the automatic JSX runtime** that
+    // Expo compiles to — measured on react@19.2.3: `createElement(Foo, {})`
+    // yields `{style:{fontFamily}}` while `jsx(Foo, {})` yields `{}`, for
+    // function AND class components alike. So that mutation reaches no `<Text>`
+    // in any Expo consumer, and this renderer cannot inherit a face.
+    //
+    // `fontFamily` therefore comes from the caller, which is the only party
+    // that both knows the family and is allowed to name it: react-native-markdown-display
+    // takes RN style objects, so there is no className path to NativeWind's token.
+    body: { ...BODY_TEXT, color: textColor, fontFamily },
+    text: { ...BODY_TEXT, color: textColor, fontFamily },
+    paragraph: { marginTop: 0, marginBottom: 8 },
+    strong: { fontWeight: '600' as const },
+    em: { fontStyle: 'italic' as const },
+    s: { textDecorationLine: 'line-through' as const },
+    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
+    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
+    bullet_list_content: { flex: 1 },
+    ordered_list_content: { flex: 1 },
+    code_inline: {
+      fontSize: 13,
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
+      borderWidth: 0,
+      borderRadius: 3,
+      paddingHorizontal: 4,
+      paddingVertical: 1,
+    },
+    code_block: {
+      fontSize: 13,
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
+      borderWidth: 1,
+      borderColor: border,
+      borderRadius: 6,
+      padding: 12,
+    },
+    fence: {
+      fontSize: 13,
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
+      borderWidth: 1,
+      borderColor: border,
+      borderRadius: 6,
+      padding: 12,
+    },
+    table: {
+      borderWidth: 1,
+      borderColor: border,
+      borderRadius: 12,
+      marginVertical: 8,
+      overflow: 'hidden' as const,
+    },
+    thead: { backgroundColor: muted },
+    th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT, color: textColor },
+    td: { flex: 1, padding: 8, ...BODY_TEXT, color: textColor },
+    tr: { borderBottomWidth: 1, borderColor: border, flexDirection: 'row' as const },
+    link: { textDecorationLine: 'underline' as const, color: primary, ...BODY_TEXT },
+    hr: { backgroundColor: border, height: 1, marginVertical: 16 },
+    heading1: { fontSize: 18, fontWeight: '600' as const },
+    heading2: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading3: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading4: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading5: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading6: { ...HEADING_TEXT, fontWeight: '500' as const },
+  };
+}
+
+/** Draws one block of code: its source, and the fence's language when it named one. */
 export type RenderCodeBlock = (code: string, language: string | undefined) => ReactNode;
 
+/** The fence's info string up to the first space (```ts title=x → `ts`). */
+function codeLanguage(node: ASTNode): string | undefined {
+  const info = (node as ASTNode & { sourceInfo?: string }).sourceInfo?.trim() ?? '';
+  const language = info.split(/\s+/)[0];
+  return language === '' ? undefined : language;
+}
+
+/**
+ * The body face, which `react-native-markdown-display` cannot inherit on native.
+ *
+ * It is driven by RN STYLE OBJECTS and supports no `className`, so NativeWind's `--font-sans`
+ * cannot reach the `<Text>` elements it renders. And Bloom's app-wide native default — the
+ * `Text.defaultProps` mutation in its `FontLoader.native.tsx` — does not apply: React 19 drops
+ * `defaultProps` under the automatic JSX runtime Expo compiles to. So the family is handed over
+ * explicitly, taken from Bloom's own token so it has one owner. `fontFamilies.sans` is a CSS
+ * STACK and RN's `fontFamily` takes a single family, hence the leading entry. Web is left
+ * undefined on purpose: there the cascade from `html` already carries `--bloom-font-sans`, and
+ * naming a family would override Bloom instead of complementing it.
+ */
+const BODY_FONT = Platform.OS === 'web' ? undefined : fontFamilies.sans.split(',')[0].trim();
+
 export interface AliaMarkdownProps {
+  /**
+   * The sans family for body text, as a SINGLE family name — RN's `fontFamily` takes one, not a
+   * CSS stack. Omitted, Bloom's own (see `BODY_FONT`).
+   */
+  fontFamily?: string;
   content: string;
-  /** The text is still arriving: an unfinished trailing construct closes implicitly. */
-  streaming?: boolean;
+  colors?: Partial<AliaColors>;
   /**
-   * Draw fenced code with the host's own code card. Keep the function's identity stable (a
-   * module-level function or a `useCallback`): it is called once per render of each block.
+   * Draw fenced code with the host's own code card. Keep the function's
+   * identity stable (a module-level function or a `useCallback`): it is part of
+   * the rules' memo, and a new one per render re-parses every block.
    */
   renderCodeBlock?: RenderCodeBlock;
 }
 
+const FENCE_RE = /^\s*(?:```|~~~)/;
+const LIST_OR_TABLE_RE = /^\s*(?:[-*+]\s|\d+[.)]\s|\|)/;
+// Link reference definitions ([1]: https://…) resolve per-parse, so a document
+// using them cannot be split into independently parsed blocks.
+const LINK_REF_DEF_RE = /^\s*\[[^\]]+\]:\s/m;
+
 /**
- * A reply or a thought, set in Bloom's `Markdown` at its chat reading size. Bloom owns the parser
- * (no `markdown-it`, no `linkify-it`), the streaming behaviour (only the last block is re-read as
- * the text grows) and the colours, which follow the app's chosen theme.
+ * Split markdown into top-level blocks at blank-line boundaries, keeping
+ * fenced code, list runs, and tables intact. During streaming only the last
+ * block's text changes, so every completed block hits React.memo and skips
+ * its markdown-it re-parse — the per-flush cost drops from O(document) to
+ * O(trailing block).
  */
-export function AliaMarkdown({ content, streaming, renderCodeBlock }: AliaMarkdownProps) {
+function splitMarkdownBlocks(content: string): string[] {
+  if (LINK_REF_DEF_RE.test(content)) return [content];
+
+  const lines = content.split('\n');
+  const blocks: string[] = [];
+  let current: string[] = [];
+  let lastNonBlank = '';
+  let inFence = false;
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (FENCE_RE.test(line)) {
+      inFence = !inFence;
+      current.push(line);
+      lastNonBlank = line;
+      i += 1;
+      continue;
+    }
+    if (!inFence && line.trim() === '') {
+      let j = i;
+      while (j < lines.length && lines[j].trim() === '') j += 1;
+      const next = j < lines.length ? lines[j] : '';
+      // Splitting a list or table at a blank line would restart ordered-list
+      // numbering and break table parsing — keep those runs in one block.
+      const keepTogether = LIST_OR_TABLE_RE.test(lastNonBlank) || LIST_OR_TABLE_RE.test(next);
+      if (keepTogether || current.length === 0) {
+        for (; i < j; i += 1) current.push(lines[i]);
+      } else {
+        blocks.push(current.join('\n'));
+        current = [];
+        i = j;
+      }
+      continue;
+    }
+    current.push(line);
+    lastNonBlank = line;
+    i += 1;
+  }
+  if (current.length > 0) blocks.push(current.join('\n'));
+  return blocks.length > 0 ? blocks : [content];
+}
+
+type MarkdownBlockProps = {
+  content: string;
+  rules: ReturnType<typeof createRules>;
+  styles: ReturnType<typeof createStyles>;
+};
+
+/**
+ * `react-native-markdown-display` gives three of its props DEFAULT VALUES that
+ * are new objects on every render: `markdownit = MarkdownIt({ typographer:
+ * true })`, `allowedImageHandlers = [...]` and `topLevelMaxExceededItem =
+ * <Text>`. A default parameter is evaluated per call, so each render of each
+ * `<Markdown>` built a parser (compiling linkify-it's regexes), and the two
+ * others sit in the deps of its renderer's `useMemo`, so the renderer — and
+ * the `StyleSheet.create` of every style inside it — was rebuilt every render
+ * too. A streamed answer re-renders its last block per token, and opening a
+ * thread renders every block once: both paid for it. Passing the defaults'
+ * own values, created once, makes both memos hold. The parser is shared:
+ * `parse` keeps no state between calls.
+ *
+ * The typings omit the last two props, which the component does take.
+ */
+const PARSER = MarkdownIt({ typographer: true });
+const IMAGE_HANDLERS = [
+  'data:image/png;base64',
+  'data:image/gif;base64',
+  'data:image/jpeg;base64',
+  'https://',
+  'http://',
+];
+const TOP_LEVEL_EXCEEDED = <Text key="dotdotdot">...</Text>;
+const StableMarkdown = Markdown as React.ComponentType<
+  React.ComponentProps<typeof Markdown> & {
+    allowedImageHandlers?: string[];
+    topLevelMaxExceededItem?: ReactNode;
+  }
+>;
+
+function ParsedMarkdown({ content, rules, styles }: MarkdownBlockProps) {
   return (
-    <Markdown size="lg" streaming={streaming} renderCodeBlock={renderCodeBlock}>
+    <StableMarkdown
+      rules={rules}
+      style={styles}
+      markdownit={PARSER}
+      allowedImageHandlers={IMAGE_HANDLERS}
+      topLevelMaxExceededItem={TOP_LEVEL_EXCEEDED}
+    >
       {content}
-    </Markdown>
+    </StableMarkdown>
+  );
+}
+
+const MarkdownBlock = React.memo(ParsedMarkdown);
+
+export function AliaMarkdown({
+  content,
+  colors: colorOverrides,
+  fontFamily = BODY_FONT,
+  renderCodeBlock,
+}: AliaMarkdownProps) {
+  // Bloom's theme, which follows the app's chosen mode, not the system's scheme: a person who
+  // picked light on a dark OS gets dark text on a light surface, not the reverse.
+  const { colors: theme } = useTheme();
+  const colors = {
+    text: theme.text,
+    muted: theme.backgroundSecondary,
+    border: theme.border,
+    primary: theme.primary,
+    mutedForeground: theme.textSecondary,
+    ...colorOverrides,
+  } as AliaColors;
+
+  const customRules = useMemo(
+    () => createRules(colors, renderCodeBlock),
+    [
+      colors.text,
+      colors.muted,
+      colors.border,
+      colors.primary,
+      colors.mutedForeground,
+      renderCodeBlock,
+    ],
+  );
+  const markdownStyles = useMemo(
+    () => createStyles(colors, fontFamily),
+    [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground, fontFamily],
+  );
+  const blocks = useMemo(() => splitMarkdownBlocks(content), [content]);
+
+  if (blocks.length === 1) {
+    return <ParsedMarkdown content={blocks[0]} rules={customRules} styles={markdownStyles} />;
+  }
+
+  // Each block's `body` rule cancels its own trailing paragraph margin
+  // (marginBottom: -8), so rowGap restores the exact inter-paragraph spacing
+  // a single continuous parse would produce.
+  return (
+    <View style={{ rowGap: 8 }}>
+      {blocks.map((block, i) => (
+        <MarkdownBlock key={i} content={block} rules={customRules} styles={markdownStyles} />
+      ))}
+    </View>
   );
 }

package/src/components/PlanPreviewCard.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@oxy.so/bloom/button';
-import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@oxy.so/bloom/card';
-import { RiCheckLine, RiCloseLine, RiListCheck3 } from '@oxy.so/bloom/icons';
+import { Card, CardBody, CardHeader, CardTitle } from '@oxy.so/bloom/card';
+import { RiListCheck3 } from '@oxy.so/bloom/icons';
 import { Item } from '@oxy.so/bloom/item';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
@@ -12,35 +11,16 @@ import type { PlanStep } from '../types';
 
 interface PlanPreviewCardProps {
   steps: PlanStep[];
-  onApprove: () => void;
-  onReject: () => void;
-  approved?: boolean;
-  rejected?: boolean;
 }
 
-/** The plan Alia proposes, until the person approves or cancels it; then one line saying which. */
-export function PlanPreviewCard({
-  steps,
-  onApprove,
-  onReject,
-  approved,
-  rejected,
-}: PlanPreviewCardProps) {
+/**
+ * The plan the agent shows before it works. It is only shown: the agent does not wait on it, and
+ * nobody is asked to approve it.
+ */
+export function PlanPreviewCard({ steps }: PlanPreviewCardProps) {
   const labels = useLabels();
   const { colors } = useTheme();
 
-  if (approved || rejected) {
-    const Icon = approved ? RiCheckLine : RiCloseLine;
-    return (
-      <View className="flex-row items-center gap-1.5 py-1">
-        <Icon width={14} height={14} fill={approved ? colors.success : colors.error} />
-        <Text className="text-xs text-text-secondary">
-          {approved ? labels.planApproved : labels.planCancelled}
-        </Text>
-      </View>
-    );
-  }
-
   return (
     <Animated.View entering={planPreviewEnter} className="my-2">
       <Card appearance="outline">
@@ -67,28 +47,6 @@ export function PlanPreviewCard({
             />
           ))}
         </CardBody>
-        <CardFooter>
-          <View className="flex-1 flex-row gap-2">
-            <Button
-              tone="action"
-              size="sm"
-              className="flex-1"
-              leadingIcon={RiCheckLine}
-              onPress={onApprove}
-            >
-              {labels.planApprove}
-            </Button>
-            <Button
-              tone="neutral"
-              appearance="subtle"
-              size="sm"
-              className="flex-1"
-              onPress={onReject}
-            >
-              {labels.planCancel}
-            </Button>
-          </View>
-        </CardFooter>
       </Card>
     </Animated.View>
   );