@alia.onl/sdk 15.4.0 → 15.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @alia.onl/sdk
 
+## 15.6.0
+
+- **The composer has its loader again.** While a turn runs, the pill is wrapped in Bloom's
+  `ComposerLoader` (the light that laps its rim) with `surface={false}` and `frosted`, as the
+  composer had before it became `ComposerPill` (15.1.0) and lost it. A question Alia asks sits
+  beside the loader instead of inside the pill's `question` slot, so the light does not ring it.
+
+## 15.5.0
+
+- **Replies are set by Bloom's `Markdown`.** `AliaMarkdown` is a thin wrapper over
+  `@oxy.so/bloom/markdown` at its chat reading size (`lg`, 16/28): the parser, the streaming
+  behaviour and the colours are Bloom's. `react-native-markdown-display` — and with it
+  `markdown-it` and the `linkify-it` ReDoS advisory — is no longer a dependency, so apps stop
+  installing it. `AliaMarkdown` loses its `colors` and `fontFamily` props (nothing used them: the
+  text follows the app's Bloom theme) and gains `streaming`. Peer `@oxy.so/bloom` is `>=10.7.0`.
+
 ## 15.4.0
 
 - **New leaf entry `@alia.onl/sdk/avatar`.** `AliaAvatarIcon`, `AliaAvatar`, `ALIA_AVATAR` and

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@alia.onl/sdk",
-  "version": "15.4.0",
-  "description": "Alia AI chat SDK — reusable chat UI, voice calls, dictation and streaming components for Oxy apps",
+  "version": "15.6.0",
   "main": "src/index.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
@@ -32,7 +31,6 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "react-native-markdown-display": "^7.0.2",
     "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.7.0",
     "zustand": "^5.0.15"
@@ -41,7 +39,7 @@
     "react": "^19.2.3",
     "react-native": "^0.86.0",
     "@expo/vector-icons": "^15.1.1",
-    "@oxy.so/bloom": ">=10.6.0",
+    "@oxy.so/bloom": ">=10.7.0",
     "@oxy.so/core": ">=3.0.0",
     "@oxy.so/services": ">=8.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",

package/src/components/AliaChatContent.tsx

@@ -7,7 +7,8 @@
  * breadcrumb header is Bloom's `AiChatContainer`, the one the app's conversation uses.
  */
 
-import React, { Suspense, useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import type React from 'react';
+import { Suspense, useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View, type TextInput } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { turnActivityState } from '../lib/turn-state';

package/src/components/AliaChatMessageList.tsx

@@ -371,7 +371,9 @@ const AssistantMessage = React.memo(function AssistantMessage({
           agent={message.agentInfo}
           thinking={thinking}
           reasoning={
-            thinking && hasThinking ? <AliaMarkdown content={message.thinking!} /> : undefined
+            thinking && hasThinking ? (
+              <AliaMarkdown content={message.thinking!} streaming={message.isStreaming} />
+            ) : undefined
           }
           actions={replyActions}
         >
@@ -383,7 +385,7 @@ const AssistantMessage = React.memo(function AssistantMessage({
           ) : renderMarkdown ? (
             renderMarkdown(citedText)
           ) : (
-            <AliaMarkdown content={citedText} />
+            <AliaMarkdown content={citedText} streaming={message.isStreaming} />
           )}
         </ReplyBody>
       </Collapsible>

package/src/components/AliaChatScreen.tsx

@@ -17,7 +17,8 @@
  * `react-native-audio-api` never enters the bundle.
  */
 
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AgentAvatarProvider } from '@oxy.so/bloom/agent-avatar';

package/src/components/AliaComposer.tsx

@@ -19,6 +19,7 @@ import {
   type ComposerPanelAttachment,
   type ComposerPanelPermissionOption,
 } from '@oxy.so/bloom/composer-panel';
+import { ComposerLoader } from '@oxy.so/bloom/composer-loader';
 import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
 import { useAttachmentIntake } from '../hooks/useAttachmentIntake';
@@ -302,47 +303,52 @@ function AliaComposerBody<T extends AliaSuggestion>({
           {labels.dictationRemaining(remainingSeconds)}
         </Text>
       ) : null}
-      <ComposerPill
-        value={value}
-        onValueChange={onValueChange}
-        onSubmit={() => onSubmit()}
-        inputRef={inputRef}
-        busy={busy}
-        onStop={onStop}
-        disabled={disabled || intake.isBusy || !hasContent}
-        placeholder={placeholder ?? labels.placeholder}
-        addMenu={addMenu ?? EMPTY_ADD_MENU}
-        onAddMenuSelect={onAddMenuSelect}
-        permissions={modes ?? NO_MODES}
-        permission={mode}
-        onPermissionChange={onModeChange}
-        voiceState={
-          dictation.isTranscribing
-            ? 'transcribing'
-            : dictation.isRecording || dictation.state === 'requesting-permission'
-              ? 'recording'
-              : 'idle'
-        }
-        onVoiceStateChange={(next) => void handleListeningChange(next === 'recording')}
-        attachments={tiles}
-        onRemoveAttachment={removeTile}
-        // Clears the tile's error and starts its progress again: `intake.retry`
-        // puts the item back to `reading` over the same `File`.
-        onAttachmentRetry={intake.retry}
-        question={
-          questions && questions.items.length > 0 ? (
-            <QuestionCard
-              questions={questions.items}
-              onSubmit={questions.onSubmit}
-              onDismiss={questions.onDismiss}
-            />
-          ) : undefined
-        }
-        status={status}
-        emptyAction={emptyAction}
-        onKeyPress={onKeyPress}
-        labels={panelLabels}
-      />
+      {questions && questions.items.length > 0 ? (
+        // Beside the loader, not through the pill's `question` slot: the light traces the box it
+        // wraps, so a question inside it would be ringed too.
+        <QuestionCard
+          questions={questions.items}
+          onSubmit={questions.onSubmit}
+          onDismiss={questions.onDismiss}
+        />
+      ) : null}
+      <ComposerLoader active={busy}>
+        <ComposerPill
+          value={value}
+          onValueChange={onValueChange}
+          onSubmit={() => onSubmit()}
+          inputRef={inputRef}
+          busy={busy}
+          onStop={onStop}
+          disabled={disabled || intake.isBusy || !hasContent}
+          placeholder={placeholder ?? labels.placeholder}
+          addMenu={addMenu ?? EMPTY_ADD_MENU}
+          onAddMenuSelect={onAddMenuSelect}
+          permissions={modes ?? NO_MODES}
+          permission={mode}
+          onPermissionChange={onModeChange}
+          voiceState={
+            dictation.isTranscribing
+              ? 'transcribing'
+              : dictation.isRecording || dictation.state === 'requesting-permission'
+                ? 'recording'
+                : 'idle'
+          }
+          onVoiceStateChange={(next) => void handleListeningChange(next === 'recording')}
+          attachments={tiles}
+          onRemoveAttachment={removeTile}
+          // Clears the tile's error and starts its progress again: `intake.retry`
+          // puts the item back to `reading` over the same `File`.
+          onAttachmentRetry={intake.retry}
+          status={status}
+          emptyAction={emptyAction}
+          onKeyPress={onKeyPress}
+          labels={panelLabels}
+          // The loader paints the pill's surface behind its light; the controls go frosted over it.
+          surface={false}
+          frosted={busy}
+        />
+      </ComposerLoader>
       <ComposerDropOverlay visible={takesFiles && isDragOver} enabled={acceptsFiles} />
       {accessory ? (
         <View pointerEvents="box-none" className="absolute bottom-full right-0 mb-2">

package/src/components/Markdown.tsx

@@ -1,508 +1,31 @@
-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 type { AliaColors } from '../theme';
+import type { ReactNode } from 'react';
+import { Markdown } from '@oxy.so/bloom/markdown';
 
-// Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
-// The main app always passes resolved colors via the `colors` prop.
-/** The body text of a reply: its bubble sets its padding from these. */
+/** 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;
-const BODY_TEXT = MARKDOWN_BODY;
-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;
-}
-
 export interface AliaMarkdownProps {
-  /**
-   * The sans family for body text, as a SINGLE family name — RN's `fontFamily`
-   * takes one, not a CSS stack.
-   *
-   * Omitted, body text inherits: correct on web, where Bloom's
-   * `--bloom-font-sans` reaches it through the cascade. On native nothing is
-   * inherited (see `createStyles`), so a native caller that wants Bloom's face
-   * has to pass it — this renderer takes RN style objects, so it cannot
-   * read Bloom's token itself.
-   */
-  fontFamily?: string;
   content: string;
-  colors?: Partial<AliaColors>;
+  /** The text is still arriving: an unfinished trailing construct closes implicitly. */
+  streaming?: boolean;
   /**
-   * 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.
+   * 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.
    */
   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;
-
-/**
- * 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).
- */
-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.
+ * 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.
  */
-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) {
+export function AliaMarkdown({ content, streaming, renderCodeBlock }: AliaMarkdownProps) {
   return (
-    <StableMarkdown
-      rules={rules}
-      style={styles}
-      markdownit={PARSER}
-      allowedImageHandlers={IMAGE_HANDLERS}
-      topLevelMaxExceededItem={TOP_LEVEL_EXCEEDED}
-    >
+    <Markdown size="lg" streaming={streaming} renderCodeBlock={renderCodeBlock}>
       {content}
-    </StableMarkdown>
-  );
-}
-
-const MarkdownBlock = React.memo(ParsedMarkdown);
-
-export function AliaMarkdown({
-  content,
-  colors: colorOverrides,
-  fontFamily,
-  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>
+    </Markdown>
   );
 }

package/src/components/ThinkingBlock.tsx

@@ -37,7 +37,7 @@ export function ThinkingBlock({ text, streaming }: ThinkingBlockProps) {
 
   return (
     <AgentThinking thinking={false} label={finishedLabel}>
-      <AliaMarkdown content={text} />
+      <AliaMarkdown content={text} streaming={streaming} />
     </AgentThinking>
   );
 }