@alia.onl/sdk 15.8.0 → 19.0.0

package/src/components/canvas/CodeRenderer.tsx

@@ -0,0 +1,24 @@
+import { useLabels } from '../../lib/labels';
+import { CodeBlock } from '@oxy.so/bloom/code';
+import * as Clipboard from 'expo-clipboard';
+
+interface CodeData {
+  language: string;
+  code: string;
+}
+
+/** Shared code surface and copy feedback; clipboard works on both platforms. */
+export function CodeRenderer({ data, filename }: { data: CodeData; filename?: string }) {
+  const { t } = useLabels();
+  return (
+    <CodeBlock
+      code={data.code}
+      language={data.language}
+      filename={filename}
+      onCopy={async (code) => {
+        await Clipboard.setStringAsync(code);
+      }}
+      labels={{ copy: t('panels.code.copy'), copied: t('panels.code.copied') }}
+    />
+  );
+}

package/src/components/canvas/FormRenderer.tsx

@@ -0,0 +1,101 @@
+import { useLabels } from '../../lib/labels';
+import { Button } from '@oxy.so/bloom/button';
+import { Checkbox } from '@oxy.so/bloom/checkbox';
+import { Field } from '@oxy.so/bloom/field';
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '@oxy.so/bloom/select';
+import { TextFieldInput } from '@oxy.so/bloom/text-field';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+interface FormField {
+  name: string;
+  type: 'text' | 'select' | 'checkbox';
+  label: string;
+  options?: string[];
+}
+
+interface FormData {
+  fields: FormField[];
+}
+
+interface FormRendererProps {
+  data: FormData;
+  onSubmit?: (formData: Record<string, any>) => void;
+}
+
+/** A generated form on Bloom's own controls: `Field` + `TextFieldInput`, `Select`, `Checkbox`. */
+export function FormRenderer({ data, onSubmit }: FormRendererProps) {
+  const { t } = useLabels();
+  const { fields } = data;
+  const [formValues, setFormValues] = useState<Record<string, any>>({});
+
+  const updateValue = (name: string, value: any) => {
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return (
+    <View className="gap-4">
+      {fields.map((field, i) =>
+        field.type === 'checkbox' ? (
+          <Checkbox
+            key={i}
+            label={field.label}
+            checked={!!formValues[field.name]}
+            onCheckedChange={(v) => updateValue(field.name, v)}
+          />
+        ) : (
+          <Field key={i} label={field.label}>
+            {field.type === 'select' ? (
+              <Select
+                value={formValues[field.name]}
+                onValueChange={(v) => updateValue(field.name, v)}
+              >
+                <SelectTrigger label={field.label}>
+                  <SelectValue placeholder={t('panels.form.select')} />
+                  <SelectIcon />
+                </SelectTrigger>
+                <SelectContent
+                  label={field.label}
+                  items={(field.options ?? []).map((option) => ({ value: option, label: option }))}
+                  valueExtractor={(item) => item.value}
+                  renderItem={(item) => (
+                    <SelectItem value={item.value} label={item.label}>
+                      <SelectItemIndicator />
+                      <SelectItemText>{item.label}</SelectItemText>
+                    </SelectItem>
+                  )}
+                />
+              </Select>
+            ) : (
+              <TextFieldInput
+                label={field.label}
+                value={formValues[field.name] || ''}
+                onValueChange={(v) => updateValue(field.name, v)}
+                placeholder={t('panels.form.enter', { field: field.label.toLowerCase() })}
+              />
+            )}
+          </Field>
+        ),
+      )}
+
+      {/* Only a form with somewhere to send its values offers to send them.
+          No caller passes `onSubmit` today — the workspace panel renders the
+          canvas without a path back into the conversation — and the button
+          used to render regardless, a Submit that did nothing (#608, rule 6). */}
+      {onSubmit === undefined ? null : (
+        <View className="mt-2">
+          <Button onPress={() => onSubmit(formValues)}>{t('panels.form.submit')}</Button>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/canvas/MarkdownRenderer.tsx

@@ -0,0 +1,14 @@
+import { ReplyMarkdown } from '../ReplyMarkdown';
+
+interface MarkdownData {
+  content: string;
+}
+
+interface MarkdownRendererProps {
+  data: MarkdownData;
+}
+
+/** A generated document, written by the same Markdown renderer as a chat reply. */
+export function MarkdownRenderer({ data }: MarkdownRendererProps) {
+  return <ReplyMarkdown content={data.content} />;
+}

package/src/components/canvas/TableRenderer.tsx

@@ -0,0 +1,47 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@oxy.so/bloom/table';
+
+interface TableData {
+  headers: string[];
+  rows: string[][];
+}
+
+interface TableRendererProps {
+  data: TableData;
+  /** Names the table for assistive tech — the canvas component's title. */
+  title?: string;
+}
+
+/** Below this width per column the table scrolls sideways instead of squeezing. */
+const COLUMN_MIN_WIDTH = 100;
+
+export function TableRenderer({ data, title }: TableRendererProps) {
+  const { headers, rows } = data;
+
+  return (
+    <Table size="sm" accessibilityLabel={title} minWidth={headers.length * COLUMN_MIN_WIDTH}>
+      <TableHeader>
+        {headers.map((header, i) => (
+          <TableColumn key={i} minWidth={COLUMN_MIN_WIDTH}>
+            {header}
+          </TableColumn>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {rows.map((row, rowIdx) => (
+          <TableRow key={rowIdx}>
+            {row.map((cell, cellIdx) => (
+              <TableCell key={cellIdx}>{cell}</TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/thought/FilesAndSources.tsx

@@ -0,0 +1,120 @@
+import { useLabels } from '../../lib/labels';
+import type { OutputFile, Source } from '../../runtime/model';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@oxy.so/bloom/accordion';
+import { EmptyState } from '@oxy.so/bloom/empty-state';
+import { RiFileTextLine } from '@oxy.so/bloom/icons/RiFileTextLine';
+import { RiGlobalLine } from '@oxy.so/bloom/icons/RiGlobalLine';
+import { Item } from '@oxy.so/bloom/item';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useState } from 'react';
+
+/**
+ * "Files and sources": what a turn produced and what it read, as two Bloom
+ * `Accordion` sections of `Item` rows.
+ *
+ * An output row is pressable only when the canvas holds its artifact to open;
+ * otherwise it is a labelled row and says so to assistive tech. A name is
+ * truncated on screen and whole in the row's accessible label.
+ *
+ * An empty section stays, with its header and one muted line, so the tab can
+ * never look like it failed to load and never hides that a persisted turn
+ * produced nothing (#542).
+ */
+export interface FilesAndSourcesProps {
+  outputs: OutputFile[];
+  sources: Source[];
+  /** What the host can do with a generated file; absent, no output is pressable. */
+  outputActions?: OutputActions;
+  onOpenSource: (source: Source) => void;
+}
+
+/** Where a generated file opens: the host's canvas, for as long as it holds the file. */
+export interface OutputActions {
+  /**
+   * Whether `open` can show this output. A host that keeps the files it was told about answers
+   * `false` for one it no longer holds, so a reloaded thread lists the file by name with no
+   * press, rather than a press that opens nothing.
+   */
+  canOpen: (output: OutputFile) => boolean;
+  open: (output: OutputFile) => void;
+}
+
+const ALL_OPEN = ['outputs', 'sources'];
+
+export function FilesAndSources({
+  outputs,
+  sources,
+  outputActions,
+  onOpenSource,
+}: FilesAndSourcesProps) {
+  const { t } = useLabels();
+  const { colors } = useTheme();
+  const [open, setOpen] = useState<string[]>(ALL_OPEN);
+
+  return (
+    <Accordion
+      type="multiple"
+      value={open}
+      onValueChange={(next) =>
+        setOpen(Array.isArray(next) ? next : next === undefined ? [] : [next])
+      }
+    >
+      <AccordionItem value="outputs">
+        <AccordionTrigger>{t('thought.outputs')}</AccordionTrigger>
+        <AccordionContent>
+          {outputs.length === 0 ? (
+            <EmptyState variant="compact" description={t('thought.noOutputs')} />
+          ) : (
+            outputs.map((output) => {
+              // A row is a control only when the canvas can actually show
+              // the file — the caller says so per output, so a persisted
+              // turn whose artifact is gone lists the name without a dead
+              // button under it.
+              const openable = outputActions?.canOpen(output) === true;
+              return (
+                <Item
+                  key={output.id}
+                  role="listitem"
+                  density="compact"
+                  leading={<RiFileTextLine size="md" fill={colors.textSecondary} />}
+                  title={output.name}
+                  accessibilityLabel={
+                    openable ? t('thought.openOutput', { name: output.name }) : output.name
+                  }
+                  onPress={openable ? () => outputActions?.open(output) : undefined}
+                />
+              );
+            })
+          )}
+        </AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="sources">
+        <AccordionTrigger>{t('thought.sources')}</AccordionTrigger>
+        <AccordionContent>
+          {sources.length === 0 ? (
+            <EmptyState variant="compact" description={t('thought.noSources')} />
+          ) : (
+            sources.map((source, index) => (
+              <Item
+                key={source.url}
+                role="listitem"
+                density="compact"
+                leading={<RiGlobalLine size="sm" fill={colors.textSecondary} />}
+                title={source.title}
+                subtitle={source.domain}
+                accessibilityLabel={t('thought.sourceLabel', { n: index + 1, title: source.title })}
+                onPress={() => onOpenSource(source)}
+              />
+            ))
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}