@opengeni/react-native 1.4.5-canary.37615713321001

package/src/timeline/queue-dock.tsx

@@ -0,0 +1,331 @@
+import type { ComposerDraft, SessionTurn } from "@opengeni/sdk";
+import type { useTurnQueue } from "@opengeni/react/session";
+import {
+  isAuthoritativeQueuedTurn,
+  QUEUE_ITEM_CONTENT_UNAVAILABLE,
+  QUEUE_REPLACE_DRAFT_COPY,
+  queueItemContent,
+  queuedTurnPresentation,
+  queueNeighborAnchors,
+} from "@opengeni/react/queue-presentation-model";
+import { useMemo, useState, type ReactNode } from "react";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { Button } from "./controls";
+import { Icon, type NativeIconName } from "./icon";
+import { blendOver, withAlpha } from "./primitives";
+import { fontStyle, useNativeTimelineTheme } from "./theme";
+
+/* ----------------------------------------------------------------------------
+   The web session-chrome queue dock above the composer: a "N queued · Steer"
+   chip, then each waiting prompt on one line with Move up/down, Steer, Edit
+   (back into the composer, confirming before it replaces a draft) and Remove.
+   Which turns count, their text and the move anchors are the shared queue
+   model.
+   -------------------------------------------------------------------------- */
+
+type TurnQueue = ReturnType<typeof useTurnQueue>;
+
+/** The composer surface the dock checks prompts out into. */
+export interface QueueDockComposer {
+  draftRevision: number;
+  hasDraftContent: () => boolean;
+  applyDraft: (draft: ComposerDraft) => void;
+  draftPersistence?: "durable" | "disabled" | undefined;
+}
+
+export function QueueDock({
+  queue,
+  composer,
+  onComposerFocus,
+  leading,
+}: {
+  queue: TurnQueue;
+  composer?: QueueDockComposer | undefined;
+  onComposerFocus?: (() => void) | undefined;
+  /** Chips sharing the queue chip's row (goal, agents, commands). */
+  leading?: ReactNode;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const [open, setOpen] = useState(true);
+  const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
+  const turns = useMemo(
+    () => queue.queue.filter((turn) => isAuthoritativeQueuedTurn(turn, queue.mutationFor)),
+    [queue.mutationFor, queue.queue],
+  );
+  if (turns.length === 0) {
+    return leading ? <View style={{ flexDirection: "row" }}>{leading}</View> : null;
+  }
+  const first = turns[0]!;
+  // The compact signal chip text (goal, agents and the queue share one row).
+  const small = { ...fontStyle(theme, 500), fontSize: 13, color: c.fg };
+  const canEdit = composer !== undefined && composer.draftPersistence !== "disabled";
+  const checkout = async (turnId: string, replaceDraft: boolean) => {
+    if (!composer) return;
+    const draft = await queue.editTurn(turnId, {
+      expectedDraftRevision: composer.draftRevision,
+      replaceDraft,
+    });
+    if (draft) {
+      composer.applyDraft(draft);
+      onComposerFocus?.();
+    }
+  };
+  const edit = (turn: SessionTurn) => {
+    if (!composer) return;
+    if (composer.hasDraftContent()) setReplaceDraftFor(turn.id);
+    else void checkout(turn.id, false);
+  };
+  return (
+    <View style={{ gap: 6 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+        {leading}
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            height: 30,
+            borderRadius: 15,
+            backgroundColor: c["surface-2"],
+          }}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityState={{ expanded: open }}
+            accessibilityLabel={`${turns.length} queued prompt${turns.length === 1 ? "" : "s"}`}
+            onPress={() => setOpen((value) => !value)}
+            hitSlop={{ top: 7, bottom: 7 }}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 5,
+              height: 30,
+              paddingLeft: 10,
+              paddingRight: 6,
+            }}
+          >
+            <Icon name="list-ordered" size={13} color={c["fg-muted"]} />
+            <Text style={small}>{`${turns.length} queued`}</Text>
+          </Pressable>
+          <View style={{ width: 1, height: 14, backgroundColor: c.border }} />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Steer first queued message"
+            disabled={queue.mutating || queue.mutationFor(first.id) !== null}
+            onPress={() => void queue.steerTurn(first.id)}
+            hitSlop={{ top: 7, bottom: 7 }}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4,
+              height: 30,
+              paddingLeft: 6,
+              paddingRight: 10,
+            }}
+          >
+            <Icon name="corner-down-right" size={13} color={c["fg-muted"]} />
+            <Text style={small}>Steer</Text>
+          </Pressable>
+        </View>
+      </View>
+      {open ? (
+        <View
+          accessibilityLabel="Queued prompts"
+          style={{
+            borderRadius: theme.radius.lg,
+            // Opaque: the dock floats over scrolling conversation.
+            backgroundColor: blendOver(c.bg, c["surface-2"], 0.6),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+          }}
+        >
+          {turns.map((turn, index) => {
+            const presentation = queuedTurnPresentation(turn);
+            const voice = presentation.kind !== "prompt";
+            const pending = queue.mutationFor(turn.id);
+            const busy = pending !== null;
+            const { beforeUp, beforeDown } = queueNeighborAnchors(turns, index);
+            const annotationCount = turn.annotations?.length ?? 0;
+            const content = queueItemContent(presentation.text, annotationCount);
+            const label =
+              content === "text"
+                ? presentation.text
+                : content === "annotations"
+                  ? `${annotationCount} timeline annotation${annotationCount === 1 ? "" : "s"}`
+                  : QUEUE_ITEM_CONTENT_UNAVAILABLE;
+            return (
+              <View key={turn.id} style={{ gap: 4 }}>
+                <View
+                  style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingLeft: 6 }}
+                >
+                  {voice ? (
+                    <Icon name="audio-lines" size={12} color={c.accent} />
+                  ) : (
+                    <Text
+                      style={{
+                        ...fontStyle(theme, 400, "mono"),
+                        fontSize: 10,
+                        color: c["fg-subtle"],
+                      }}
+                    >
+                      {index + 1}
+                    </Text>
+                  )}
+                  <Text
+                    numberOfLines={1}
+                    style={{
+                      ...fontStyle(theme),
+                      flex: 1,
+                      fontSize: theme.size.xs,
+                      lineHeight: 16,
+                      color: content === "unavailable" ? c["fg-muted"] : c.fg,
+                      fontStyle: content === "unavailable" ? "italic" : "normal",
+                    }}
+                  >
+                    {label}
+                  </Text>
+                  {turns.length > 1 ? (
+                    <>
+                      <RowAction
+                        icon="arrow-up"
+                        label={`Move queued prompt ${index + 1} up`}
+                        disabled={busy || index === 0}
+                        onPress={() => void queue.moveTurn(turn.id, beforeUp)}
+                      />
+                      <RowAction
+                        icon="arrow-down"
+                        label={`Move queued prompt ${index + 1} down`}
+                        disabled={busy || index >= turns.length - 1}
+                        onPress={() => void queue.moveTurn(turn.id, beforeDown)}
+                      />
+                    </>
+                  ) : null}
+                  <RowAction
+                    icon="corner-down-right"
+                    label={`Steer queued prompt ${index + 1}`}
+                    disabled={busy}
+                    busy={pending === "steer"}
+                    onPress={() => void queue.steerTurn(turn.id)}
+                  />
+                  {canEdit ? (
+                    <RowAction
+                      icon="pencil"
+                      label={`Edit queued prompt ${index + 1}`}
+                      disabled={busy}
+                      busy={pending === "edit"}
+                      onPress={() => edit(turn)}
+                    />
+                  ) : null}
+                  <RowAction
+                    icon="trash-2"
+                    label={`Remove queued prompt ${index + 1}`}
+                    disabled={busy}
+                    busy={pending === "delete"}
+                    onPress={() => void queue.removeTurn(turn.id)}
+                  />
+                </View>
+                {replaceDraftFor === turn.id ? (
+                  <View
+                    style={{
+                      gap: 4,
+                      padding: 8,
+                      marginBottom: 4,
+                      borderRadius: theme.radius.sm,
+                      borderWidth: 1,
+                      borderColor: withAlpha(c["status-waiting"], 0.3),
+                      backgroundColor: withAlpha(c["status-waiting"], 0.1),
+                    }}
+                  >
+                    <Text style={{ ...fontStyle(theme), fontSize: theme.size.xs, color: c.fg }}>
+                      {QUEUE_REPLACE_DRAFT_COPY.title}
+                    </Text>
+                    <Text
+                      style={{ ...fontStyle(theme), fontSize: theme.size.xs, color: c["fg-muted"] }}
+                    >
+                      {QUEUE_REPLACE_DRAFT_COPY.detail}
+                    </Text>
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        justifyContent: "flex-end",
+                        gap: 6,
+                        marginTop: 4,
+                      }}
+                    >
+                      <Button
+                        label={QUEUE_REPLACE_DRAFT_COPY.keep}
+                        variant="ghost"
+                        onPress={() => setReplaceDraftFor(null)}
+                      />
+                      <Button
+                        label={QUEUE_REPLACE_DRAFT_COPY.replace}
+                        variant="primary"
+                        onPress={() => {
+                          setReplaceDraftFor(null);
+                          void checkout(turn.id, true);
+                        }}
+                      />
+                    </View>
+                  </View>
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+      {queue.mutationError ? (
+        <Pressable accessibilityRole="alert" onPress={queue.clearMutationError}>
+          <Text style={{ ...fontStyle(theme), fontSize: theme.size.xs, color: c["status-failed"] }}>
+            {queue.mutationError.message}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+/** A web IconAction at touch size: icon, optional text, a spinner while busy. */
+function RowAction(props: {
+  icon: NativeIconName;
+  label: string;
+  text?: string | undefined;
+  disabled?: boolean | undefined;
+  busy?: boolean | undefined;
+  onPress: () => void;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+      accessibilityState={{ disabled: Boolean(props.disabled), busy: Boolean(props.busy) }}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      hitSlop={{ top: 6, bottom: 6, left: 2, right: 2 }}
+      style={({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4,
+        minWidth: 30,
+        height: 32,
+        paddingHorizontal: props.text ? 6 : 0,
+        borderRadius: theme.radius.sm,
+        backgroundColor: pressed ? c.hover : "transparent",
+        opacity: props.disabled && !props.busy ? 0.4 : 1,
+      })}
+    >
+      {props.busy ? (
+        <ActivityIndicator size="small" color={c["fg-muted"]} />
+      ) : (
+        <Icon name={props.icon} size={14} color={c.fg} />
+      )}
+      {props.text ? (
+        <Text style={{ ...fontStyle(theme), fontSize: theme.size.xs, color: c.fg }}>
+          {props.text}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}

package/src/timeline/session-actions.tsx

@@ -0,0 +1,379 @@
+import type { Session, UpdateSessionPinRequest, UpdateSessionRequest } from "@opengeni/sdk";
+import {
+  resolveRenameSubmission,
+  SESSION_TITLE_MAX_LENGTH,
+  sessionDisplayTitle,
+  sessionRenameSeed,
+} from "@opengeni/react/session-list-model";
+import { useEffect, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { Button } from "./controls";
+import { Icon, type NativeIconName } from "./icon";
+import { BottomSheet } from "./sheet";
+import { fontStyle, useNativeTimelineTheme } from "./theme";
+
+/* ----------------------------------------------------------------------------
+   The web session header's Rename and Pin, behind one native overflow button:
+   an action sheet, then a rename sheet that seeds and resolves exactly as the
+   web title editor does (shared session-list model).
+   -------------------------------------------------------------------------- */
+
+export interface SessionActionsClient {
+  updateSession(
+    workspaceId: string,
+    sessionId: string,
+    request: UpdateSessionRequest,
+  ): Promise<Session>;
+  updateSessionPin(
+    workspaceId: string,
+    sessionId: string,
+    request: UpdateSessionPinRequest,
+  ): Promise<Session>;
+}
+
+export interface SessionActionsProps {
+  session: Session;
+  client: SessionActionsClient;
+  /** Called with the server's session after a change, so the host can refresh. */
+  onChanged: (session: Session) => void;
+  /** Host actions appended after Rename and Pin. */
+  extraActions?: SessionAction[] | undefined;
+  onActionFeedback?: (() => void) | undefined;
+  /**
+   * Present the actions in a host-native menu (a UIMenu on iOS) anchored to the
+   * trigger instead of the slide-up sheet. The host wraps `trigger`.
+   */
+  renderMenu?: ((input: { actions: SessionAction[]; trigger: ReactNode }) => ReactNode) | undefined;
+}
+
+export interface SessionAction {
+  key: string;
+  label: string;
+  icon: NativeIconName;
+  onPress: () => void;
+  destructive?: boolean | undefined;
+  /** SF Symbol for a native menu. */
+  systemImage?: string | undefined;
+}
+
+export function SessionActionsButton(props: SessionActionsProps) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // The pin flips immediately on this device and rolls back on failure, as on web.
+  const [pinnedOverride, setPinnedOverride] = useState<boolean | null>(null);
+  const pinned = pinnedOverride ?? props.session.pinned ?? false;
+  useEffect(() => setPinnedOverride(null), [props.session.pinned, props.session.pinVersion]);
+
+  const togglePin = async () => {
+    const next = !pinned;
+    setPinnedOverride(next);
+    setError(null);
+    props.onActionFeedback?.();
+    try {
+      const updated = await props.client.updateSessionPin(
+        props.session.workspaceId,
+        props.session.id,
+        {
+          pinned: next,
+          ...(props.session.pinVersion !== undefined
+            ? { expectedVersion: props.session.pinVersion }
+            : {}),
+        },
+      );
+      props.onChanged(updated);
+    } catch (caught) {
+      setPinnedOverride(null);
+      const message =
+        `Couldn't ${next ? "pin" : "unpin"} this chat. ${caught instanceof Error ? caught.message : ""}`.trim();
+      setError(message);
+      if (props.renderMenu) Alert.alert(message);
+      else setMenuOpen(true);
+    }
+  };
+
+  const actions: SessionAction[] = [
+    {
+      key: "rename",
+      label: "Rename",
+      icon: "pencil",
+      systemImage: "pencil",
+      onPress: () => {
+        setMenuOpen(false);
+        // Let a dismissing menu or sheet finish before presenting the next one.
+        setTimeout(() => setRenaming(true), props.renderMenu ? 50 : 350);
+      },
+    },
+    {
+      key: "pin",
+      label: pinned ? "Unpin" : "Pin",
+      icon: pinned ? "pin-off" : "pin",
+      systemImage: pinned ? "pin.slash" : "pin",
+      onPress: () => {
+        setMenuOpen(false);
+        void togglePin();
+      },
+    },
+    ...(props.extraActions ?? []).map((action) => ({
+      ...action,
+      onPress: () => {
+        setMenuOpen(false);
+        action.onPress();
+      },
+    })),
+  ];
+
+  const icon = (
+    <>
+      {pinned ? (
+        <View
+          style={{
+            position: "absolute",
+            top: 5,
+            right: 5,
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            backgroundColor: c["fg-muted"],
+          }}
+        />
+      ) : null}
+      <Icon name="ellipsis" size={20} color={c.fg} />
+    </>
+  );
+  const renameSheet = (
+    <RenameSheet
+      open={renaming}
+      session={props.session}
+      client={props.client}
+      onClose={() => setRenaming(false)}
+      onRenamed={(session) => {
+        setRenaming(false);
+        props.onActionFeedback?.();
+        props.onChanged(session);
+      }}
+    />
+  );
+  if (props.renderMenu) {
+    return (
+      <>
+        {props.renderMenu({
+          actions,
+          trigger: (
+            <View
+              accessible
+              accessibilityRole="button"
+              accessibilityLabel="Chat actions"
+              style={{ width: 36, height: 36, alignItems: "center", justifyContent: "center" }}
+            >
+              {icon}
+            </View>
+          ),
+        })}
+        {renameSheet}
+      </>
+    );
+  }
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Chat actions"
+        hitSlop={6}
+        onPress={() => setMenuOpen(true)}
+        style={({ pressed }) => ({
+          width: 36,
+          height: 36,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 18,
+          backgroundColor: pressed ? c.hover : "transparent",
+        })}
+      >
+        {icon}
+      </Pressable>
+      <BottomSheet
+        open={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        accessibilityLabel="Chat actions"
+      >
+        <Text
+          numberOfLines={1}
+          style={{
+            ...fontStyle(theme, 600),
+            fontSize: 15,
+            color: c.fg,
+            paddingHorizontal: 20,
+            paddingBottom: 8,
+          }}
+        >
+          {sessionDisplayTitle(props.session)}
+        </Text>
+        {error ? (
+          <Text
+            accessibilityRole="alert"
+            style={{
+              ...fontStyle(theme),
+              fontSize: 13,
+              color: c["status-failed"],
+              paddingHorizontal: 20,
+              paddingBottom: 6,
+            }}
+          >
+            {error}
+          </Text>
+        ) : null}
+        {actions.map((action) => (
+          <Pressable
+            key={action.key}
+            accessibilityRole="button"
+            accessibilityLabel={action.label}
+            onPress={action.onPress}
+            style={({ pressed }) => ({
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 14,
+              minHeight: 52,
+              paddingHorizontal: 20,
+              backgroundColor: pressed ? c.hover : "transparent",
+            })}
+          >
+            <Icon
+              name={action.icon}
+              size={18}
+              color={action.destructive ? c["status-failed"] : c["fg-muted"]}
+            />
+            <Text
+              style={{
+                ...fontStyle(theme),
+                fontSize: 16,
+                color: action.destructive ? c["status-failed"] : c.fg,
+              }}
+            >
+              {action.label}
+            </Text>
+          </Pressable>
+        ))}
+      </BottomSheet>
+      {renameSheet}
+    </>
+  );
+}
+
+function RenameSheet(props: {
+  open: boolean;
+  session: Session;
+  client: SessionActionsClient;
+  onClose: () => void;
+  onRenamed: (session: Session) => void;
+}) {
+  // Each opening mounts a fresh form seeded before its first render, so the
+  // focused field selects the whole seed and typing replaces it.
+  const [generation, setGeneration] = useState(0);
+  useEffect(() => {
+    if (props.open) setGeneration((value) => value + 1);
+  }, [props.open]);
+  return (
+    <BottomSheet open={props.open} onClose={props.onClose} accessibilityLabel="Rename chat">
+      <RenameForm key={generation} {...props} />
+    </BottomSheet>
+  );
+}
+
+function RenameForm(props: {
+  session: Session;
+  client: SessionActionsClient;
+  onClose: () => void;
+  onRenamed: (session: Session) => void;
+}) {
+  const theme = useNativeTimelineTheme();
+  const c = theme.colors;
+  const [seed] = useState(() => sessionRenameSeed(props.session));
+  const [draft, setDraft] = useState(seed);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inFlight = useRef(false);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const save = async () => {
+    if (inFlight.current) return;
+    const next = resolveRenameSubmission(draft, sessionDisplayTitle(props.session), seed);
+    if (next === null) {
+      props.onClose();
+      return;
+    }
+    inFlight.current = true;
+    setSaving(true);
+    setError(null);
+    try {
+      const updated = await props.client.updateSession(
+        props.session.workspaceId,
+        props.session.id,
+        { title: next },
+      );
+      props.onRenamed(updated);
+    } catch (caught) {
+      setError(
+        `Couldn't rename this chat. ${caught instanceof Error ? caught.message : "Try again."}`,
+      );
+    } finally {
+      inFlight.current = false;
+      setSaving(false);
+    }
+  };
+  return (
+    <View style={{ paddingHorizontal: 20, gap: 12 }}>
+      <Text
+        accessibilityRole="header"
+        style={{ ...fontStyle(theme, 600), fontSize: 17, color: c.fg }}
+      >
+        Rename chat
+      </Text>
+      <TextInput
+        accessibilityLabel="Chat title"
+        value={draft}
+        onChangeText={setDraft}
+        ref={inputRef}
+        onFocus={() => {
+          // selectTextOnFocus is unreliable for autofocused fields in a modal.
+          setTimeout(() => inputRef.current?.setSelection(0, seed.length), 50);
+        }}
+        maxLength={SESSION_TITLE_MAX_LENGTH}
+        autoFocus
+        editable={!saving}
+        returnKeyType="done"
+        onSubmitEditing={() => void save()}
+        style={{
+          ...fontStyle(theme),
+          fontSize: 16,
+          color: c.fg,
+          minHeight: 44,
+          paddingHorizontal: 12,
+          borderRadius: theme.radius.md,
+          borderWidth: 1,
+          borderColor: c.border,
+          backgroundColor: c["surface-1"],
+        }}
+      />
+      {error ? (
+        <Text
+          accessibilityRole="alert"
+          style={{ ...fontStyle(theme), fontSize: 13, color: c["status-failed"] }}
+        >
+          {error}
+        </Text>
+      ) : null}
+      <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
+        <Button label="Cancel" variant="ghost" onPress={props.onClose} disabled={saving} />
+        <Button
+          label={saving ? "Saving…" : "Save"}
+          variant="primary"
+          onPress={() => void save()}
+          disabled={saving}
+          busy={saving}
+        />
+      </View>
+    </View>
+  );
+}