@opengeni/react-native 1.4.5-canary.37615713321001

package/src/ui/attention.tsx

@@ -0,0 +1,220 @@
+import type { PendingApproval, PendingHumanInputRequest } from "@opengeni/react/session";
+import { toolDisplayName } from "@opengeni/react/session";
+import type { HumanInputAnswer } from "@opengeni/sdk";
+import { useState } from "react";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated, { FadeInDown, FadeOutDown, LinearTransition } from "react-native-reanimated";
+import { ActionButton } from "./cards";
+import { toolDetail } from "./format";
+import { AgentIcon } from "./icons";
+import type { AgentTheme } from "./theme";
+
+type Attention =
+  | { kind: "approval"; approval: PendingApproval }
+  | { kind: "question"; request: PendingHumanInputRequest };
+
+function approvalSummary(approval: PendingApproval): string | null {
+  return toolDetail({
+    kind: "tool-call",
+    id: approval.id,
+    turnId: null,
+    callId: null,
+    name: approval.name,
+    arguments: approval.arguments,
+    output: null,
+    raw: null,
+    status: "running",
+    occurredAt: "",
+  });
+}
+
+/**
+ * Everything the agent is waiting on, docked directly above the composer. One item at a
+ * time with a counter; decisions never scroll away with the conversation.
+ */
+export function AgentAttentionTray(props: {
+  approvals: readonly PendingApproval[];
+  humanInput: readonly PendingHumanInputRequest[];
+  theme: AgentTheme;
+  onApproval(approvalId: string, decision: "approve" | "reject"): void;
+  onAnswer(requestId: string, answers: HumanInputAnswer[] | null): void;
+}) {
+  const { theme } = props;
+  const items: Attention[] = [
+    ...props.approvals.map((approval) => ({ kind: "approval" as const, approval })),
+    ...props.humanInput.map((request) => ({ kind: "question" as const, request })),
+  ];
+  const [selected, setSelected] = useState<string[]>([]);
+  const current = items[0];
+  if (!current) return null;
+  const key = current.kind === "approval" ? `a:${current.approval.id}` : `q:${current.request.id}`;
+  const question = current.kind === "question" ? current.request.questions[0] : undefined;
+  const multi = question?.kind === "multi_select";
+
+  return (
+    <Animated.View
+      entering={FadeInDown.duration(220)}
+      exiting={FadeOutDown.duration(160)}
+      key={key}
+      layout={LinearTransition.duration(180)}
+      style={{
+        marginHorizontal: 12,
+        marginBottom: 6,
+        borderRadius: theme.radius.card,
+        backgroundColor: theme.colors.surfaceRaised,
+        borderWidth: StyleSheet.hairlineWidth * 2,
+        borderColor: theme.colors.attention,
+        padding: 14,
+        gap: 10,
+        shadowColor: "#000",
+        shadowOpacity: theme.scheme === "light" ? 0.1 : 0,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 6 },
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <AgentIcon
+          color={theme.colors.attention}
+          name={current.kind === "approval" ? "alert" : "question"}
+          size={15}
+        />
+        <Text
+          style={{
+            flex: 1,
+            color: theme.colors.attention,
+            fontSize: theme.type.small,
+            fontWeight: "600",
+          }}
+        >
+          {current.kind === "approval" ? "Approve to continue" : "Answer to continue"}
+        </Text>
+        {items.length > 1 ? (
+          <Text style={{ color: theme.colors.textFaint, fontSize: theme.type.small }}>
+            1 of {items.length}
+          </Text>
+        ) : null}
+      </View>
+      {current.kind === "approval" ? (
+        <>
+          <View>
+            <Text
+              style={{
+                color: theme.colors.text,
+                fontSize: theme.type.body,
+                fontWeight: theme.type.weightStrong,
+              }}
+            >
+              {toolDisplayName(current.approval.name, current.approval.display)}
+            </Text>
+            {approvalSummary(current.approval) ? (
+              <Text
+                numberOfLines={2}
+                style={{
+                  marginTop: 2,
+                  color: theme.colors.textMuted,
+                  fontSize: theme.type.small,
+                  lineHeight: theme.type.smallLine,
+                }}
+              >
+                {approvalSummary(current.approval)}
+              </Text>
+            ) : null}
+          </View>
+          <View style={{ flexDirection: "row", gap: 10 }}>
+            <ActionButton
+              flex
+              label="Deny"
+              onPress={() => props.onApproval(current.approval.id, "reject")}
+              theme={theme}
+              variant="secondary"
+            />
+            <ActionButton
+              flex
+              label="Approve"
+              onPress={() => props.onApproval(current.approval.id, "approve")}
+              theme={theme}
+              variant="primary"
+            />
+          </View>
+        </>
+      ) : question ? (
+        <>
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontSize: theme.type.body,
+              fontWeight: theme.type.weightStrong,
+            }}
+          >
+            {question.prompt}
+          </Text>
+          <ScrollView
+            contentContainerStyle={{ gap: 8 }}
+            horizontal
+            keyboardShouldPersistTaps="handled"
+            showsHorizontalScrollIndicator={false}
+          >
+            {question.options.map((option) => {
+              const active = selected.includes(option.id);
+              return (
+                <Pressable
+                  accessibilityRole={multi ? "checkbox" : "radio"}
+                  accessibilityState={{ checked: active }}
+                  key={option.id}
+                  onPress={() =>
+                    setSelected((values) =>
+                      multi
+                        ? values.includes(option.id)
+                          ? values.filter((value) => value !== option.id)
+                          : [...values, option.id]
+                        : [option.id],
+                    )
+                  }
+                  style={{
+                    minHeight: theme.layout.target - 4,
+                    paddingHorizontal: 14,
+                    borderRadius: theme.radius.control,
+                    justifyContent: "center",
+                    backgroundColor: active ? theme.colors.accent : theme.colors.surface,
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: active ? theme.colors.onAccent : theme.colors.text,
+                      fontSize: theme.type.body - 1,
+                      fontWeight: "600",
+                    }}
+                  >
+                    {option.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+          <View style={{ flexDirection: "row", gap: 10 }}>
+            {current.request.allowSkip ? (
+              <ActionButton
+                flex
+                label="Skip"
+                onPress={() => props.onAnswer(current.request.id, null)}
+                theme={theme}
+                variant="secondary"
+              />
+            ) : null}
+            <ActionButton
+              disabled={selected.length === 0}
+              flex
+              label="Send"
+              onPress={() => {
+                props.onAnswer(current.request.id, [{ questionId: question.id, values: selected }]);
+                setSelected([]);
+              }}
+              theme={theme}
+              variant="primary"
+            />
+          </View>
+        </>
+      ) : null}
+    </Animated.View>
+  );
+}

package/src/ui/cards.tsx

@@ -0,0 +1,267 @@
+import type { PendingApproval, PendingHumanInputRequest } from "@opengeni/react/session";
+import { toolDisplayName } from "@opengeni/react/session";
+import type { HumanInputAnswer } from "@opengeni/sdk";
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { AgentIcon } from "./icons";
+import type { AgentTheme } from "./theme";
+
+function argumentRows(args: unknown): [string, string][] {
+  if (!args || typeof args !== "object") return [];
+  return Object.entries(args as Record<string, unknown>)
+    .slice(0, 4)
+    .map(([key, value]) => [key, typeof value === "string" ? value : JSON.stringify(value)]);
+}
+
+export function ActionButton(props: {
+  label: string;
+  onPress(): void;
+  theme: AgentTheme;
+  variant: "primary" | "secondary" | "danger";
+  disabled?: boolean;
+  flex?: boolean;
+}) {
+  const { theme, variant } = props;
+  const primary = variant === "primary";
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!props.disabled }}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      style={({ pressed }) => ({
+        flex: props.flex ? 1 : undefined,
+        minHeight: theme.layout.target,
+        paddingHorizontal: 18,
+        borderRadius: theme.radius.control,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: primary ? theme.colors.accent : "transparent",
+        borderWidth: primary ? 0 : StyleSheet.hairlineWidth * 2,
+        borderColor: variant === "danger" ? theme.colors.danger : theme.colors.border,
+        opacity: props.disabled ? 0.4 : pressed ? 0.75 : 1,
+      })}
+    >
+      <Text
+        style={{
+          color: primary
+            ? theme.colors.onAccent
+            : variant === "danger"
+              ? theme.colors.danger
+              : theme.colors.text,
+          fontSize: theme.type.body - 1,
+          fontWeight: theme.type.weightStrong,
+        }}
+      >
+        {props.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function CardShell(props: {
+  theme: AgentTheme;
+  icon: "alert" | "question";
+  eyebrow: string;
+  title: string;
+  children: React.ReactNode;
+}) {
+  const { theme } = props;
+  return (
+    <View
+      style={{
+        marginVertical: theme.space.row,
+        borderRadius: theme.radius.card,
+        backgroundColor: theme.colors.surfaceRaised,
+        borderWidth: StyleSheet.hairlineWidth * 2,
+        borderColor: theme.colors.attention,
+        padding: 16,
+        gap: 12,
+        shadowColor: "#000",
+        shadowOpacity: theme.scheme === "light" ? 0.06 : 0,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 4 },
+      }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <AgentIcon color={theme.colors.attention} name={props.icon} size={16} />
+        <Text
+          style={{
+            color: theme.colors.attention,
+            fontSize: theme.type.small,
+            fontWeight: "600",
+            letterSpacing: 0.2,
+          }}
+        >
+          {props.eyebrow}
+        </Text>
+      </View>
+      <Text
+        style={{
+          color: theme.colors.text,
+          fontSize: theme.type.body + 1,
+          lineHeight: theme.type.bodyLine + 1,
+          fontWeight: theme.type.weightStrong,
+        }}
+      >
+        {props.title}
+      </Text>
+      {props.children}
+    </View>
+  );
+}
+
+export function ApprovalCard(props: {
+  approval: PendingApproval;
+  theme: AgentTheme;
+  onDecision(decision: "approve" | "reject"): void;
+}) {
+  const { approval, theme } = props;
+  const rows = argumentRows(approval.arguments);
+  return (
+    <CardShell
+      eyebrow="Needs your approval"
+      icon="alert"
+      theme={theme}
+      title={toolDisplayName(approval.name, approval.display)}
+    >
+      {rows.length ? (
+        <View
+          style={{
+            borderRadius: theme.radius.control,
+            backgroundColor: theme.colors.codeBackground,
+            padding: 10,
+            gap: 4,
+          }}
+        >
+          {rows.map(([key, value]) => (
+            <View key={key} style={{ flexDirection: "row", gap: 8 }}>
+              <Text
+                style={{
+                  color: theme.colors.textFaint,
+                  fontSize: theme.type.small,
+                  fontFamily: theme.type.mono,
+                }}
+              >
+                {key}
+              </Text>
+              <Text
+                numberOfLines={2}
+                style={{
+                  flex: 1,
+                  color: theme.colors.text,
+                  fontSize: theme.type.small,
+                  fontFamily: theme.type.mono,
+                }}
+              >
+                {value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      <View style={{ flexDirection: "row", gap: 10 }}>
+        <ActionButton
+          flex
+          label="Deny"
+          onPress={() => props.onDecision("reject")}
+          theme={theme}
+          variant="secondary"
+        />
+        <ActionButton
+          flex
+          label="Approve"
+          onPress={() => props.onDecision("approve")}
+          theme={theme}
+          variant="primary"
+        />
+      </View>
+    </CardShell>
+  );
+}
+
+export function QuestionCard(props: {
+  request: PendingHumanInputRequest;
+  theme: AgentTheme;
+  onAnswer(answers: HumanInputAnswer[] | null): void;
+}) {
+  const { request, theme } = props;
+  const question = request.questions[0];
+  const [selected, setSelected] = useState<string[]>([]);
+  if (!question) return null;
+  const multi = question.kind === "multi_select";
+  const toggle = (id: string) =>
+    setSelected((current) =>
+      multi
+        ? current.includes(id)
+          ? current.filter((value) => value !== id)
+          : [...current, id]
+        : [id],
+    );
+  return (
+    <CardShell eyebrow="Question for you" icon="question" theme={theme} title={question.prompt}>
+      <View style={{ gap: 8 }}>
+        {question.options.map((option) => {
+          const active = selected.includes(option.id);
+          return (
+            <Pressable
+              accessibilityRole={multi ? "checkbox" : "radio"}
+              accessibilityState={{ checked: active }}
+              key={option.id}
+              onPress={() => toggle(option.id)}
+              style={{
+                minHeight: theme.layout.target,
+                borderRadius: theme.radius.control,
+                borderWidth: active ? 2 : StyleSheet.hairlineWidth * 2,
+                borderColor: active ? theme.colors.accent : theme.colors.border,
+                paddingHorizontal: 14,
+                paddingVertical: 10,
+                justifyContent: "center",
+              }}
+            >
+              <Text
+                style={{
+                  color: theme.colors.text,
+                  fontSize: theme.type.body - 1,
+                  fontWeight: "500",
+                }}
+              >
+                {option.label}
+              </Text>
+              {option.description ? (
+                <Text
+                  style={{
+                    color: theme.colors.textMuted,
+                    fontSize: theme.type.small,
+                    marginTop: 2,
+                  }}
+                >
+                  {option.description}
+                </Text>
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </View>
+      <View style={{ flexDirection: "row", gap: 10 }}>
+        {request.allowSkip ? (
+          <ActionButton
+            flex
+            label="Skip"
+            onPress={() => props.onAnswer(null)}
+            theme={theme}
+            variant="secondary"
+          />
+        ) : null}
+        <ActionButton
+          disabled={selected.length === 0}
+          flex
+          label="Send answer"
+          onPress={() => props.onAnswer([{ questionId: question.id, values: selected }])}
+          theme={theme}
+          variant="primary"
+        />
+      </View>
+    </CardShell>
+  );
+}