@alia.onl/sdk 15.8.0 → 19.1.0

package/src/components/ReplyMarkdown.tsx

@@ -0,0 +1,359 @@
+import { CodeBlock } from '@oxy.so/bloom/code';
+import { Text } from '@oxy.so/bloom/typography';
+import * as Clipboard from 'expo-clipboard';
+import * as WebBrowser from 'expo-web-browser';
+import { useMemo } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import {
+  type CitationSource,
+  extractCitationSources,
+  linkifyCitations,
+  type ReferenceEntry,
+  splitReferences,
+} from '../lib/citations';
+import { useLabels } from '../lib/labels';
+import type { ToolInvocation } from '../runtime/types';
+import { AliaMarkdown, type RenderCodeBlock } from './Markdown';
+import { Banner, CompactList, Comparison, Credibility, RichImage, Timeline } from './RichBlocks';
+
+// Cheap pre-check: plain markdown (the overwhelmingly common case) skips the
+// six per-pattern regex scans below with a single pass.
+const SPECIAL_BLOCK_HINT_RE =
+  /\[(?:ALIA_)?(?:COMPACTLIST|BANNER|COMPARISON|TIMELINE|IMAGE|CREDIBILITY)/;
+
+// Parse special blocks from content
+function parseSpecialBlocks(
+  content: string,
+): Array<{ type: 'text' | 'block'; content: string; blockType?: string; data?: any }> {
+  if (!SPECIAL_BLOCK_HINT_RE.test(content)) {
+    return [{ type: 'text', content }];
+  }
+
+  const blocks: Array<{ type: 'text' | 'block'; content: string; blockType?: string; data?: any }> =
+    [];
+
+  const patterns = [
+    {
+      name: 'COMPACTLIST',
+      regex: /\[(?:ALIA_)?COMPACTLIST title="([^"]+)"\]([\s\S]*?)\[\/(?:ALIA_)?COMPACTLIST\]/g,
+    },
+    {
+      name: 'BANNER',
+      regex: /\[(?:ALIA_)?BANNER type="([^"]+)" title="([^"]+)"\]([\s\S]*?)\[\/(?:ALIA_)?BANNER\]/g,
+    },
+    {
+      name: 'COMPARISON',
+      regex: /\[(?:ALIA_)?COMPARISON title="([^"]+)"\]([\s\S]*?)\[\/(?:ALIA_)?COMPARISON\]/g,
+    },
+    {
+      name: 'TIMELINE',
+      regex: /\[(?:ALIA_)?TIMELINE title="([^"]+)"\]([\s\S]*?)\[\/(?:ALIA_)?TIMELINE\]/g,
+    },
+    {
+      name: 'IMAGE',
+      regex:
+        /\[(?:ALIA_)?IMAGE url="([^"]+)"(?:\s+title="([^"]*)")?\s*(?:caption="([^"]*)")?\s*\/\]/g,
+    },
+    {
+      name: 'CREDIBILITY',
+      regex: /\[(?:ALIA_)?CREDIBILITY level="(\d+)" source="([^"]+)"\s*\/\]/g,
+    },
+  ];
+
+  let lastIndex = 0;
+  const matches: Array<{ index: number; length: number; block: any }> = [];
+
+  // Find all matches
+  patterns.forEach(({ name, regex }) => {
+    let match;
+    const regexCopy = new RegExp(regex.source, regex.flags);
+    while ((match = regexCopy.exec(content)) !== null) {
+      matches.push({
+        index: match.index,
+        length: match[0].length,
+        block: { type: name, match, fullMatch: match[0] },
+      });
+    }
+  });
+
+  // Sort matches by index
+  matches.sort((a, b) => a.index - b.index);
+
+  // Build blocks array
+  matches.forEach((m) => {
+    // Add text before block
+    if (lastIndex < m.index) {
+      const textContent = content.substring(lastIndex, m.index).trim();
+      if (textContent) {
+        blocks.push({ type: 'text', content: textContent });
+      }
+    }
+
+    // Add block
+    blocks.push({
+      type: 'block',
+      content: m.block.fullMatch,
+      blockType: m.block.type,
+      data: parseBlockData(m.block.type, m.block.match),
+    });
+
+    lastIndex = m.index + m.length;
+  });
+
+  // Add remaining text
+  if (lastIndex < content.length) {
+    const textContent = content.substring(lastIndex).trim();
+    if (textContent) {
+      blocks.push({ type: 'text', content: textContent });
+    }
+  }
+
+  // If no blocks found, return all as text
+  if (blocks.length === 0) {
+    blocks.push({ type: 'text', content });
+  }
+
+  return blocks;
+}
+
+function parseBlockData(type: string, match: RegExpExecArray): any {
+  try {
+    switch (type) {
+      case 'COMPACTLIST': {
+        const title = match[1];
+        const itemsText = match[2];
+        const items = itemsText
+          .split('\n')
+          .filter((line) => line.trim().startsWith('-'))
+          .map((line) => {
+            try {
+              const jsonStr = line.trim().substring(1).trim();
+              return JSON.parse(jsonStr);
+            } catch {
+              return null;
+            }
+          })
+          .filter(Boolean);
+        return { title, items };
+      }
+      case 'BANNER': {
+        return {
+          type: match[1],
+          title: match[2],
+          content: match[3].trim(),
+        };
+      }
+      case 'COMPARISON': {
+        const title = match[1];
+        const content = match[2];
+        const leftMatch = content.match(/LEFT:\s*({.*?})/s);
+        const rightMatch = content.match(/RIGHT:\s*({.*?})/s);
+        const conclusionMatch = content.match(/CONCLUSION:\s*(.*?)$/s);
+
+        return {
+          title,
+          left: leftMatch ? JSON.parse(leftMatch[1]) : {},
+          right: rightMatch ? JSON.parse(rightMatch[1]) : {},
+          conclusion: conclusionMatch ? conclusionMatch[1].trim() : undefined,
+        };
+      }
+      case 'TIMELINE': {
+        const title = match[1];
+        const itemsText = match[2];
+        const items = itemsText
+          .split('\n')
+          .filter((line) => line.trim().startsWith('-'))
+          .map((line) => {
+            try {
+              const jsonStr = line.trim().substring(1).trim();
+              return JSON.parse(jsonStr);
+            } catch {
+              return null;
+            }
+          })
+          .filter(Boolean);
+        return { title, items };
+      }
+      case 'IMAGE': {
+        return {
+          url: match[1],
+          title: match[2] || undefined,
+          caption: match[3] || undefined,
+        };
+      }
+      case 'CREDIBILITY': {
+        return {
+          level: parseInt(match[1], 10),
+          source: match[2],
+        };
+      }
+      default:
+        return {};
+    }
+  } catch (e) {
+    console.error('Error parsing block data:', e);
+    return {};
+  }
+}
+
+function renderBlock(blockType: string, data: any, key: number) {
+  switch (blockType) {
+    case 'COMPACTLIST':
+      return <CompactList key={key} {...data} />;
+    case 'BANNER':
+      return <Banner key={key} {...data} />;
+    case 'COMPARISON':
+      return <Comparison key={key} {...data} />;
+    case 'TIMELINE':
+      return <Timeline key={key} {...data} />;
+    case 'IMAGE':
+      return <RichImage key={key} {...data} />;
+    case 'CREDIBILITY':
+      return <Credibility key={key} {...data} />;
+    default:
+      return null;
+  }
+}
+
+/** Open a source the way the Sources tab does: a new tab on web, the in-app browser on native. */
+function openSource(url: string): void {
+  if (Platform.OS === 'web') {
+    window.open(url, '_blank', 'noopener,noreferrer');
+  } else {
+    void WebBrowser.openBrowserAsync(url);
+  }
+}
+
+/**
+ * The references section of a research answer, as links.
+ *
+ * The API now writes each entry as a Markdown link, and the SDK's renderer
+ * would make those pressable on its own — but not ACCESSIBLE: its link rule
+ * is a `Text` with `onPress`, which a screen reader reads as text and a
+ * keyboard cannot reach. So the section is cut off the Markdown and drawn
+ * here, one `accessibilityRole="link"` per entry — an `<a href>` on web, so
+ * Tab reaches it and Enter opens it — named "Source n: title". Older answers,
+ * whose entries were a title over a bare URL, split the same way.
+ */
+function ReferenceList({
+  entries,
+  onCitationPress,
+}: {
+  entries: ReferenceEntry[];
+  onCitationPress?: (source: CitationSource) => void;
+}) {
+  const { t } = useLabels();
+  return (
+    <View className="mt-3 gap-1 border-t border-border pt-3" accessibilityRole="list">
+      <Text className="text-xs font-medium text-muted-foreground">{t('thought.references')}</Text>
+      {entries.map((entry) => {
+        const press = () => {
+          if (onCitationPress) onCitationPress(entry);
+          else openSource(entry.url);
+        };
+        // On web the anchor itself navigates (new tab, no opener); `onPress`
+        // is wired only when the caller wants the press instead of the
+        // navigation, and the default is then prevented.
+        const webAnchor =
+          Platform.OS === 'web'
+            ? ({
+                href: entry.url,
+                hrefAttrs: { target: '_blank', rel: 'noopener noreferrer' },
+              } as object)
+            : {};
+        const onPress =
+          Platform.OS === 'web'
+            ? onCitationPress
+              ? (e: { preventDefault?: () => void }) => {
+                  e.preventDefault?.();
+                  press();
+                }
+              : undefined
+            : press;
+        return (
+          <Pressable
+            key={entry.id}
+            accessibilityRole="link"
+            accessibilityLabel={t('thought.sourceLabel', { n: entry.id, title: entry.title })}
+            className="flex-row items-start gap-2 rounded-md py-0.5 active:opacity-70"
+            onPress={onPress}
+            {...webAnchor}
+          >
+            <Text className="text-sm text-muted-foreground">[{entry.id}]</Text>
+            <Text className="flex-1 text-sm text-primary underline" numberOfLines={2}>
+              {entry.title}
+            </Text>
+            <Text className="text-xs text-muted-foreground" numberOfLines={1}>
+              {entry.domain}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+/** Copy through Expo's clipboard, which Bloom's card needs on native (web has its own). */
+const copyCode = async (code: string) => {
+  await Clipboard.setStringAsync(code);
+};
+
+/**
+ * Fenced code as Bloom's code card: the language chip, a copy button and
+ * numbered lines. Module-level so its identity is stable — it is part of the
+ * SDK renderer's rules memo.
+ */
+const renderCodeBlock: RenderCodeBlock = (code, language) => (
+  <CodeBlock code={code} language={language} onCopy={copyCode} />
+);
+
+/**
+ * The chat's Markdown, plus what a research answer needs on top of it.
+ *
+ * `toolInvocations` (the message's persisted record) and `researchSources`
+ * (the live progress event, before persistence) are where the `[n]` markers
+ * resolve: a marker naming a known source becomes a link to it, titled
+ * "Source n: title", and the References section becomes the accessible list
+ * above. Markers the model spelled as `【n†…】` or `[n, m]` in an older answer
+ * are normalised first. A message with neither prop renders exactly as
+ * before.
+ *
+ * `onCitationPress` replaces opening the URL for the references list. The
+ * inline markers are rendered by the SDK's link rule, which opens the URL
+ * itself and offers no hook, so they do not reach it.
+ */
+export function ReplyMarkdown({
+  content,
+  toolInvocations,
+  researchSources,
+  onCitationPress,
+}: {
+  content: string;
+  toolInvocations?: ToolInvocation[];
+  researchSources?: Array<{ id: number; url: string; title: string }> | null;
+  onCitationPress?: (source: CitationSource) => void;
+}) {
+  const sources = useMemo(
+    () => extractCitationSources(toolInvocations, researchSources),
+    [toolInvocations, researchSources],
+  );
+  const { body, references } = useMemo(() => splitReferences(content, sources), [content, sources]);
+  const linked = useMemo(() => linkifyCitations(body, sources), [body, sources]);
+  const blocks = useMemo(() => parseSpecialBlocks(linked), [linked]);
+
+  return (
+    <View>
+      {blocks.map((block, idx) => {
+        if (block.type === 'text') {
+          return (
+            <AliaMarkdown key={idx} content={block.content} renderCodeBlock={renderCodeBlock} />
+          );
+        } else if (block.type === 'block' && block.blockType) {
+          return renderBlock(block.blockType, block.data, idx);
+        }
+        return null;
+      })}
+      {references ? <ReferenceList entries={references} onCitationPress={onCitationPress} /> : null}
+    </View>
+  );
+}

package/src/components/RichBlocks.tsx

@@ -0,0 +1,195 @@
+import { useLabels } from '../lib/labels';
+import {
+  Admonition,
+  AdmonitionContent,
+  AdmonitionIcon,
+  AdmonitionRoot,
+  AdmonitionRow,
+  AdmonitionText,
+} from '@oxy.so/bloom/admonition';
+import { Card, CardBody, CardHeader, CardTitle } from '@oxy.so/bloom/card';
+import { RiExternalLinkLine } from '@oxy.so/bloom/icons/RiExternalLinkLine';
+import { Item } from '@oxy.so/bloom/item';
+import { Rating } from '@oxy.so/bloom/rating';
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import { Image } from './Image';
+import { Linking, View } from 'react-native';
+
+/**
+ * The rich blocks a reply can carry (```compactlist, ```banner, …), drawn with
+ * Bloom: a card per block, `Item` rows, `Admonition` for a banner and `Rating`
+ * for a source's credibility. `ReplyMarkdown.tsx` parses the fences.
+ */
+
+type CompactListItem = {
+  title: string;
+  href?: string;
+  meta?: string;
+  image?: string;
+};
+
+export function CompactList({ title, items }: { title: string; items: CompactListItem[] }) {
+  return (
+    <Card appearance="outline" className="my-2">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardBody>
+        <View role="list">
+          {items.map((item, index) => (
+            <Item
+              key={index}
+              role="listitem"
+              title={item.title}
+              subtitle={item.meta}
+              leading={
+                item.image ? (
+                  <Image
+                    source={{ uri: item.image }}
+                    className="h-10 w-10 rounded"
+                    contentFit="cover"
+                  />
+                ) : undefined
+              }
+              trailing={item.href ? <RiExternalLinkLine size="sm" /> : undefined}
+              onPress={item.href ? () => void Linking.openURL(item.href!) : undefined}
+            />
+          ))}
+        </View>
+      </CardBody>
+    </Card>
+  );
+}
+
+type BannerType = 'info' | 'success' | 'warning' | 'danger';
+
+/** A block's tone, in Bloom's admonition vocabulary. */
+const ADMONITION = { info: 'info', success: 'tip', warning: 'warning', danger: 'error' } as const;
+
+export function Banner({
+  type = 'info',
+  title,
+  content,
+}: {
+  type?: BannerType;
+  title: string;
+  content: string;
+}) {
+  return (
+    <View className="my-2">
+      <AdmonitionRoot type={Object.hasOwn(ADMONITION, type) ? ADMONITION[type] : 'info'}>
+        <AdmonitionRow>
+          <AdmonitionIcon />
+          <AdmonitionContent>
+            <Text variant="body-medium">{title}</Text>
+            <AdmonitionText>{content}</AdmonitionText>
+          </AdmonitionContent>
+        </AdmonitionRow>
+      </AdmonitionRoot>
+    </View>
+  );
+}
+
+type ComparisonSide = {
+  title: string;
+  content: string;
+  source?: string;
+};
+
+function ComparisonSideCard({ side }: { side: ComparisonSide }) {
+  const { t } = useLabels();
+  return (
+    <Card appearance="outline">
+      <CardBody>
+        <Text variant="body-medium">{side.title}</Text>
+        <Muted>{side.content}</Muted>
+        {side.source ? <Muted>{t('chat.richBlocks.source', { source: side.source })}</Muted> : null}
+      </CardBody>
+    </Card>
+  );
+}
+
+export function Comparison({
+  title,
+  left,
+  right,
+  conclusion,
+}: {
+  title: string;
+  left: ComparisonSide;
+  right: ComparisonSide;
+  conclusion?: string;
+}) {
+  return (
+    <Card appearance="outline" className="my-2">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardBody>
+        <View className="gap-2">
+          <ComparisonSideCard side={left} />
+          <ComparisonSideCard side={right} />
+          {conclusion ? <Admonition type="tip">{conclusion}</Admonition> : null}
+        </View>
+      </CardBody>
+    </Card>
+  );
+}
+
+type TimelineItem = {
+  date: string;
+  title: string;
+  description?: string;
+};
+
+export function Timeline({ title, items }: { title: string; items: TimelineItem[] }) {
+  return (
+    <Card appearance="outline" className="my-2">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardBody>
+        <View role="list">
+          {items.map((item, index) => (
+            <Item
+              key={index}
+              role="listitem"
+              leading={<Muted>{item.date}</Muted>}
+              title={item.title}
+              subtitle={item.description}
+            />
+          ))}
+        </View>
+      </CardBody>
+    </Card>
+  );
+}
+
+export function RichImage({
+  url,
+  title,
+  caption,
+}: {
+  url: string;
+  title?: string;
+  caption?: string;
+}) {
+  return (
+    <View className="my-2 gap-1">
+      <Image source={{ uri: url }} className="aspect-video w-full rounded-lg" contentFit="cover" />
+      {title ? <Text variant="body-medium">{title}</Text> : null}
+      {caption ? <Muted>{caption}</Muted> : null}
+    </View>
+  );
+}
+
+/** How far a source can be trusted, on a five-point scale. */
+export function Credibility({ level, source }: { level: number; source: string }) {
+  const { t } = useLabels();
+  return (
+    <View className="my-2 flex-row items-center gap-2">
+      <Rating value={Math.max(0, Math.min(5, level))} size="sm" />
+      <Muted>{t('chat.richBlocks.source', { source })}</Muted>
+    </View>
+  );
+}

package/src/components/canvas/CanvasComponent.tsx

@@ -0,0 +1,59 @@
+import { useLabels } from '../../lib/labels';
+import { Muted, Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
+import { ChartRenderer } from './ChartRenderer';
+import { CodeRenderer } from './CodeRenderer';
+import { FormRenderer } from './FormRenderer';
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { TableRenderer } from './TableRenderer';
+
+interface CanvasComponentProps {
+  component: {
+    id: string;
+    type: string;
+    title: string;
+    data: any;
+  };
+  onFormSubmit?: (formData: Record<string, any>) => void;
+}
+
+export function CanvasComponent({ component, onFormSubmit }: CanvasComponentProps) {
+  const { t } = useLabels();
+
+  // Code carries its own header (the file name), and a chart card its own title.
+  if (component.type === 'code')
+    return <CodeRenderer data={component.data} filename={component.title} />;
+  if (component.type === 'artifact' && component.data.language)
+    return (
+      <CodeRenderer
+        data={{ language: component.data.language, code: component.data.content }}
+        filename={component.title}
+      />
+    );
+  if (component.type === 'chart')
+    return <ChartRenderer data={component.data} title={component.title} />;
+
+  const content = (() => {
+    switch (component.type) {
+      case 'table':
+        return <TableRenderer data={component.data} title={component.title} />;
+      case 'form':
+        return <FormRenderer data={component.data} onSubmit={onFormSubmit} />;
+      case 'image':
+        return <Muted>{component.data.alt || t('panels.canvas.image')}</Muted>;
+      case 'markdown':
+        return <MarkdownRenderer data={component.data} />;
+      case 'artifact':
+        return <MarkdownRenderer data={{ content: component.data.content }} />;
+      default:
+        return <Muted>{t('panels.canvas.unsupported', { type: component.type })}</Muted>;
+    }
+  })();
+
+  return (
+    <View className="gap-3">
+      <Text variant="body-semibold">{component.title}</Text>
+      {content}
+    </View>
+  );
+}

package/src/components/canvas/ChartRenderer.tsx

@@ -0,0 +1,73 @@
+import { useLabels } from '../../lib/labels';
+import { BarListCard, LineChartCard } from '@oxy.so/bloom/chart-cards';
+
+interface ChartData {
+  chartType: 'bar' | 'line' | 'pie';
+  labels: string[];
+  datasets: { label: string; values: number[] }[];
+}
+
+interface ChartRendererProps {
+  data: ChartData;
+  /** The canvas component's title, used as the chart's name. */
+  title?: string;
+}
+
+const NUMBER = new Intl.NumberFormat();
+const format = (value: number) => NUMBER.format(value);
+
+/**
+ * A generated chart on Bloom's chart cards, painted from Bloom's chart palette.
+ *
+ *  - one `line` series → `LineChartCard`;
+ *  - a `pie` → `BarListCard` in shares of the whole, which is what a pie says;
+ *  - bars, or several series → `BarListCard` in raw values, one tab per series.
+ */
+export function ChartRenderer({ data, title }: ChartRendererProps) {
+  const { t } = useLabels();
+  const { chartType, labels, datasets } = data;
+  const itemsOf = (values: number[]) =>
+    labels.map((label, i) => ({ label, value: values[i] || 0 }));
+
+  if (chartType === 'line' && datasets.length === 1) {
+    const series = datasets[0];
+    return (
+      <LineChartCard
+        title={series.label || title}
+        data={itemsOf(series.values)}
+        format={format}
+        formatAxisValue={format}
+        getPointTitle={(point) => point.label}
+        accessibilityLabel={title ?? series.label}
+      />
+    );
+  }
+
+  if (chartType === 'pie' || datasets.length <= 1) {
+    const series = datasets[0];
+    return (
+      <BarListCard
+        title={series?.label || title}
+        metricLabel={chartType === 'pie' ? t('panels.chart.share') : t('panels.chart.value')}
+        metric={chartType === 'pie' ? 'share' : 'value'}
+        format={format}
+        items={itemsOf(series?.values ?? [])}
+        limit={labels.length}
+      />
+    );
+  }
+
+  return (
+    <BarListCard
+      metricLabel={t('panels.chart.value')}
+      metric="value"
+      format={format}
+      tabs={datasets.map((series, i) => ({
+        id: `series-${i}`,
+        label: series.label,
+        items: itemsOf(series.values),
+      }))}
+      limit={labels.length}
+    />
+  );
+}