@lotics/ui 4.2.0 → 4.4.0

package/src/sources.tsx

@@ -0,0 +1,92 @@
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+import { PressableHighlight } from "./pressable_highlight";
+
+export type SourceKind = "record" | "document" | "table" | "web" | "knowledge";
+
+export interface SourceRef {
+  id: string;
+  label: string;
+  kind?: SourceKind;
+  /** A locator under the label — "page 2", a record code, a column. */
+  detail?: string;
+}
+
+export interface SourcesProps {
+  sources: SourceRef[];
+  /** Eyebrow above the chips. Default "Sources". */
+  label?: string;
+  /** Pass to make each chip openable (jump to the record / document / page). */
+  onOpen?: (source: SourceRef) => void;
+}
+
+const KIND_ICON: Record<SourceKind, IconName> = {
+  record: "box",
+  document: "file-text",
+  table: "table-2",
+  web: "external-link",
+  knowledge: "book-open",
+};
+
+/**
+ * Where the AI's output came FROM — a row of source chips under a generated
+ * answer, summary, or extracted value, each openable. Provenance is what makes
+ * AI output verifiable; show it on anything the agent produced from data it
+ * read (extraction, summarization, Q&A). Renders nothing for an empty list.
+ */
+export function Sources(props: SourcesProps) {
+  if (props.sources.length === 0) return null;
+  return (
+    <View style={{ gap: 6 }}>
+      <Text size="xs" color="muted" transform="uppercase">
+        {props.label ?? "Sources"}
+      </Text>
+      <View style={styles.row}>
+        {props.sources.map((s) =>
+          props.onOpen ? (
+            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} style={styles.chip}>
+              <SourceChip source={s} />
+            </PressableHighlight>
+          ) : (
+            <View key={s.id} style={styles.chip}>
+              <SourceChip source={s} />
+            </View>
+          ),
+        )}
+      </View>
+    </View>
+  );
+}
+
+function SourceChip({ source }: { source: SourceRef }) {
+  return (
+    <>
+      <Icon name={KIND_ICON[source.kind ?? "document"]} size={12} color={colors.zinc[500]} />
+      <Text size="xs" weight="medium" numberOfLines={1}>
+        {source.label}
+      </Text>
+      {source.detail ? (
+        <Text size="xs" color="muted" numberOfLines={1}>
+          {source.detail}
+        </Text>
+      ) : null}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+  },
+});

package/src/suggestion.tsx

@@ -0,0 +1,102 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, solid, tint } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { LinkButton } from "./link_button";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface SuggestionProps {
+  /** The proposal headline — what the AI suggests. */
+  title: string;
+  /** One line of WHY — the rationale the human is weighing. */
+  rationale?: string;
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  /** The proposal body — render the proposed value/preview however fits (a
+   *  field stack, a chip row, a diagram). Omit for a title-only suggestion. */
+  children?: ReactNode;
+  onAccept?: () => void;
+  /** Tweak before accepting — the host opens its editor. */
+  onEdit?: () => void;
+  onDismiss?: () => void;
+  acceptLabel?: string;
+  /** Once resolved the card settles to a quiet outcome line (no actions). */
+  status?: "open" | "accepted" | "dismissed";
+}
+
+/**
+ * The core review-for-approval surface: an AI proposal the human accepts,
+ * edits, or dismisses — never auto-applied. The violet sparkle marks it as
+ * AI-proposed; a `Confidence` chip says how sure; the body shows the proposed
+ * value. The decision is the human's. For a shortlist, stack several (rank by
+ * confidence, the top one first). Pair with `AgentRun` (what produced it) and
+ * `ChangeReview` (when the proposal is an edit to existing state).
+ */
+export function Suggestion(props: SuggestionProps) {
+  const status = props.status ?? "open";
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+  return (
+    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+      <View style={styles.header}>
+        <Icon name="sparkles" size={14} color={solid("violet")} />
+        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={2}>
+          {props.title}
+        </Text>
+        {status === "open" && hasConfidence ? (
+          <Confidence level={props.confidence} score={props.confidenceScore} />
+        ) : null}
+      </View>
+
+      {props.rationale ? (
+        <Text size="xs" color="muted">
+          {props.rationale}
+        </Text>
+      ) : null}
+
+      {props.children ? <View>{props.children}</View> : null}
+
+      {status !== "open" ? (
+        <View style={styles.outcome}>
+          <Icon
+            name={status === "accepted" ? "circle-check" : "x"}
+            size={14}
+            color={status === "accepted" ? solid("emerald") : colors.zinc[400]}
+          />
+          <Text size="xs" color="muted">
+            {status === "accepted" ? "Accepted" : "Dismissed"}
+          </Text>
+        </View>
+      ) : (
+        <View style={styles.footer}>
+          {props.onDismiss ? <LinkButton title="Dismiss" onPress={props.onDismiss} /> : <View />}
+          <View style={styles.actions}>
+            {props.onEdit ? (
+              <Button title="Edit" color="secondary" shape="rounded" icon="square-pen" onPress={props.onEdit} />
+            ) : null}
+            {props.onAccept ? (
+              <Button title={props.acceptLabel ?? "Accept"} color="primary" shape="rounded" onPress={props.onAccept} />
+            ) : null}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: tint("violet", 0.35),
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 14,
+    gap: 10,
+  },
+  resolved: { borderColor: colors.border, backgroundColor: colors.zinc[50] },
+  header: { flexDirection: "row", alignItems: "center", gap: 8 },
+  outcome: { flexDirection: "row", alignItems: "center", gap: 6 },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  actions: { flexDirection: "row", alignItems: "center", gap: 8 },
+});