@alia.onl/sdk 10.1.1 → 11.1.0

package/src/components/Markdown.tsx

@@ -1,11 +1,15 @@
 import React, { useMemo, type ReactNode } from 'react';
 import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
 import Markdown, { MarkdownIt, type ASTNode } from 'react-native-markdown-display';
+import { CodeBlock } from '@oxy.so/bloom/code';
 import type { AliaColors } from '../theme';
 
 // 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 FALLBACK_LIGHT: Pick<AliaColors, 'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'> = {
+const FALLBACK_LIGHT: Pick<
+  AliaColors,
+  'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'
+> = {
   text: '#11181C',
   muted: '#F4F4F5',
   border: '#E5E5EA',
@@ -28,32 +32,37 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
   const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
   /**
-   * Fenced and indented code, drawn by the host when it brings a code card of
-   * its own (the app passes Bloom's `CodeBlock`). This package has no Bloom
-   * dependency, so it cannot name one itself; without the prop the library's
-   * default `fence` / `code_block` rendering, styled below, stays.
+   * Fenced and indented code: Bloom's `CodeBlock` unless the host brings a
+   * code card of its own.
    */
-  const codeRules = renderCodeBlock === undefined
-    ? {}
-    : {
-        fence: (node: ASTNode) => (
-          <View key={node.key} style={{ marginVertical: 8 }}>
-            {renderCodeBlock(node.content.replace(/\n$/, ''), codeLanguage(node))}
-          </View>
-        ),
-        code_block: (node: ASTNode) => (
-          <View key={node.key} style={{ marginVertical: 8 }}>
-            {renderCodeBlock(node.content.replace(/\n$/, ''), undefined)}
-          </View>
-        ),
-      };
+  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 }}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          fontSize: 18,
+          fontWeight: '600',
+          lineHeight: 24,
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -61,7 +70,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading2: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -69,7 +84,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading3: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -77,7 +98,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading4: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -85,7 +112,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading5: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -93,7 +126,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading6: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -138,19 +177,27 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>{bullet}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>
+            {bullet}
+          </Text>
           <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
     },
     ordered_list: (node: ASTNode, children: ReactNode[]) => (
-      <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {children}
+      </View>
     ),
     unordered_list: (node: ASTNode, children: ReactNode[]) => (
-      <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
+      <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>
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
     ),
     link: (node: ASTNode, children: ReactNode[]) => (
       <Text
@@ -164,7 +211,9 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
       </Text>
     ),
     paragraph: (node: ASTNode, children: ReactNode[]) => (
-      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
     ),
     blockquote: (node: ASTNode, children: ReactNode[]) => (
       <View
@@ -194,7 +243,11 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
       />
     ),
     body: (node: ASTNode, children: ReactNode[]) => {
-      return <View key={node.key} style={{ marginBottom: -8 }}>{children}</View>;
+      return (
+        <View key={node.key} style={{ marginBottom: -8 }}>
+          {children}
+        </View>
+      );
     },
   };
 }
@@ -215,9 +268,8 @@ function createStyles(colors: AliaColors, fontFamily: string | undefined) {
     // 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: this package has no
-    // `@oxy.so/bloom` dependency, and react-native-markdown-display takes RN
-    // style objects, so there is no className path to NativeWind's token.
+    // 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 },
@@ -255,7 +307,13 @@ function createStyles(colors: AliaColors, fontFamily: string | undefined) {
       borderRadius: 6,
       padding: 12,
     },
-    table: { borderWidth: 1, borderColor: border, borderRadius: 12, marginVertical: 8, overflow: 'hidden' as const },
+    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 },
@@ -289,8 +347,8 @@ export interface AliaMarkdownProps {
    * 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 package has no `@oxy.so/bloom` dependency and so
-   * cannot name it itself.
+   * has to pass it — this renderer takes RN style objects, so it cannot
+   * read Bloom's token itself.
    */
   fontFamily?: string;
   content: string;
@@ -412,13 +470,31 @@ function ParsedMarkdown({ content, rules, styles }: MarkdownBlockProps) {
 
 const MarkdownBlock = React.memo(ParsedMarkdown);
 
-export function AliaMarkdown({ content, colors: colorOverrides, fontFamily, renderCodeBlock }: AliaMarkdownProps) {
+export function AliaMarkdown({
+  content,
+  colors: colorOverrides,
+  fontFamily,
+  renderCodeBlock,
+}: AliaMarkdownProps) {
   const scheme = useColorScheme();
   const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
   const colors = { ...fallback, ...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 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) {

package/src/components/PlanPreviewCard.tsx

@@ -1,11 +1,13 @@
-import { View, Pressable } from 'react-native';
-import { Text } from './ui/text';
-import { Button } from './ui/button';
-import Check from 'lucide-react-native/icons/check';
-import X from 'lucide-react-native/icons/x';
-import ListChecks from 'lucide-react-native/icons/list-checks';
+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 { Item } from '@oxy.so/bloom/item';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { planPreviewEnter } from '../animations';
+import { useLabels } from '../lib/labels';
 import type { PlanStep } from '../types';
 
 interface PlanPreviewCardProps {
@@ -16,64 +18,78 @@ interface PlanPreviewCardProps {
   rejected?: boolean;
 }
 
-export function PlanPreviewCard({ steps, onApprove, onReject, approved, rejected }: PlanPreviewCardProps) {
-  if (approved) {
-    return (
-      <View className="flex-row items-center gap-1.5 py-1">
-        <Check size={12} className="text-green-500" />
-        <Text className="text-xs text-muted-foreground">Plan approved</Text>
-      </View>
-    );
-  }
+/** 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) {
+  const labels = useLabels();
+  const { colors } = useTheme();
 
-  if (rejected) {
+  if (approved || rejected) {
+    const Icon = approved ? RiCheckLine : RiCloseLine;
     return (
       <View className="flex-row items-center gap-1.5 py-1">
-        <X size={12} className="text-red-500" />
-        <Text className="text-xs text-muted-foreground">Plan cancelled</Text>
+        <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}>
-      <View className="border border-border rounded-xl bg-card p-4 gap-3 my-2">
-        <View className="flex-row items-center gap-2">
-          <ListChecks size={16} className="text-foreground" />
-          <Text className="text-sm font-semibold text-foreground">Here's my plan</Text>
-        </View>
-
-        <View className="gap-2">
-          {steps.map((step, i) => (
-            <View key={i} className="flex-row items-start gap-2.5">
-              <View className="w-5 h-5 rounded-full bg-muted items-center justify-center mt-0.5">
-                <Text className="text-[10px] font-bold text-muted-foreground">{i + 1}</Text>
-              </View>
-              <View className="flex-1">
-                <Text className="text-[13px] font-medium text-foreground">{step.action}</Text>
-                {step.description ? (
-                  <Text className="text-xs text-muted-foreground">{step.description}</Text>
-                ) : null}
-              </View>
-            </View>
+    <Animated.View entering={planPreviewEnter} className="my-2">
+      <Card appearance="outline">
+        <CardHeader>
+          <View className="flex-row items-center gap-2">
+            <RiListCheck3 width={16} height={16} fill={colors.icon} />
+            <CardTitle>{labels.planTitle}</CardTitle>
+          </View>
+        </CardHeader>
+        <CardBody>
+          {steps.map((step, index) => (
+            <Item
+              // A plan has no ids and its steps never reorder: the position is the identity.
+              // biome-ignore lint/suspicious/noArrayIndexKey: see above
+              key={index}
+              density="compact"
+              leading={
+                <Text className="w-5 text-center text-xs font-bold text-text-secondary">
+                  {index + 1}
+                </Text>
+              }
+              title={step.action}
+              subtitle={step.description || undefined}
+            />
           ))}
-        </View>
-
-        <View className="flex-row gap-2 pt-1">
-          <Button onPress={onApprove} size="sm" className="flex-1">
-            <View className="flex-row items-center gap-1.5">
-              <Check size={14} className="text-primary-foreground" />
-              <Text className="text-sm font-medium text-primary-foreground">Approve</Text>
-            </View>
-          </Button>
-          <Pressable
-            onPress={onReject}
-            className="flex-1 items-center justify-center py-2 rounded-lg active:opacity-70"
-          >
-            <Text className="text-sm text-muted-foreground">Cancel</Text>
-          </Pressable>
-        </View>
-      </View>
+        </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>
   );
 }

package/src/components/QuestionCard.tsx

@@ -0,0 +1,62 @@
+import { Questionnaire, type QuestionnaireAnswers } from '@oxy.so/bloom/questionnaire';
+import { Muted } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import { type AskedQuestion, formatAnswers } from '../lib/questions';
+
+interface QuestionCardProps {
+  questions: AskedQuestion[];
+  /** Sends the answers as the person's next message. Absent: the card is read-only. */
+  onSubmit?: (message: string) => void;
+}
+
+/** Ids are positions: the questions are the model's, and carry none. */
+const idOf = (index: number) => `q${index}`;
+
+/**
+ * The questions Alia asked: Bloom's `Questionnaire` while the person can still answer, and
+ * the questions as plain lines once they have (the answer is their message, right below).
+ * Typing a reply in the composer answers just as well, which is why there is no dismiss.
+ */
+export function QuestionCard({ questions, onSubmit }: QuestionCardProps) {
+  if (onSubmit === undefined) {
+    return (
+      <View className="my-2 gap-1">
+        {questions.map((q, i) => (
+          // The model's questions never reorder: the position is the identity.
+          // biome-ignore lint/suspicious/noArrayIndexKey: see above
+          <Muted key={i}>{q.question}</Muted>
+        ))}
+      </View>
+    );
+  }
+
+  const complete = (answers: QuestionnaireAnswers) =>
+    onSubmit(
+      formatAnswers(
+        questions,
+        questions.map((_, i) => ({
+          picked: (answers[idOf(i)]?.values ?? []).map(Number),
+          other: answers[idOf(i)]?.other,
+        })),
+      ),
+    );
+
+  return (
+    <View className="my-2">
+      <Questionnaire
+        questions={questions.map((q, i) => ({
+          id: idOf(i),
+          question: q.question,
+          select: q.multiSelect ? 'multiple' : 'single',
+          other: true,
+          options: q.options.map((option, index) => ({
+            value: String(index),
+            label: option.label,
+            description: option.description,
+          })),
+        }))}
+        onComplete={complete}
+      />
+    </View>
+  );
+}

package/src/components/ThinkingBlock.tsx

@@ -0,0 +1,47 @@
+import { AgentThinking } from '@oxy.so/bloom/agent-thinking';
+import { useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { useLabels } from '../lib/labels';
+import { AliaMarkdown } from './Markdown';
+
+interface ThinkingBlockProps {
+  /** The model's reasoning, as Markdown. */
+  text: string;
+  /** Still reasoning: the block opens, and closes again when this turns false. */
+  streaming: boolean;
+}
+
+/**
+ * A turn's reasoning: Bloom's `AgentThinking` as a disclosure (live while it
+ * streams, "Thought for N seconds" once done), with the text set as Markdown.
+ * Open and close, the indicator and the chevron are Bloom's; this only counts
+ * how long the stream ran, because the message carries no duration.
+ */
+export function ThinkingBlock({ text, streaming }: ThinkingBlockProps) {
+  const labels = useLabels();
+  const startedAt = useRef<number | null>(null);
+  const [seconds, setSeconds] = useState<number>();
+
+  useEffect(() => {
+    if (streaming) {
+      startedAt.current = Date.now();
+    } else if (startedAt.current !== null) {
+      setSeconds(Math.max(1, Math.round((Date.now() - startedAt.current) / 1000)));
+      startedAt.current = null;
+    }
+  }, [streaming]);
+
+  const finishedLabel = seconds ? labels.thoughtFor(seconds) : labels.reasoning;
+
+  return (
+    <AgentThinking
+      variant="stars"
+      thinking={streaming}
+      label={streaming ? undefined : finishedLabel}
+    >
+      <View style={{ opacity: streaming ? 0.8 : 1 }}>
+        <AliaMarkdown content={text} />
+      </View>
+    </AgentThinking>
+  );
+}

package/src/components/VoiceModeIcon.tsx

@@ -0,0 +1,10 @@
+import Entypo from '@expo/vector-icons/Entypo';
+import type { BloomIconComponent } from '@oxy.so/bloom/icons';
+
+/**
+ * The glyph of Alia's voice button: Entypo's `sound`. Remix has no equivalent, so it is
+ * handed Bloom's icon contract (`width` / `fill`) for a Bloom `Button` to size and colour.
+ */
+export const VoiceModeIcon: BloomIconComponent = ({ width = 18, fill }) => (
+  <Entypo name="sound" size={width} color={fill} />
+);