@ateam-ai-mobile/ui 0.1.3 → 0.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ateam-ai-mobile/ui",
-  "version": "0.1.3",
-  "description": "Prebuilt ADAS chat experience for React Native \u2014 full-screen chat, chips, widget views. Built on @ateam-ai-mobile/core + @ateam-ai-mobile/plugin-runtime.",
+  "version": "0.1.5",
+  "description": "Prebuilt ADAS chat experience for React Native — full-screen chat, chips, widget views. Built on @ateam-ai-mobile/core + @ateam-ai-mobile/plugin-runtime.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -9,8 +9,8 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@ateam-ai-mobile/core": "0.1.3",
-    "@ateam-ai-mobile/plugin-runtime": "0.1.3",
+    "@ateam-ai-mobile/core": "^0.1.5",
+    "@ateam-ai-mobile/plugin-runtime": "^0.1.5",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {
@@ -31,4 +31,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/chat/MessageBubble.tsx

@@ -6,6 +6,7 @@ import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig, ada, borderRadius, font
 import { AdaOrb, getHaptics } from '@ateam-ai-mobile/plugin-runtime';
 import JobProgressBar from './JobProgressBar';
 import UIActionsRow from './UIActionsRow';
+import QuestionChips from './QuestionChips';
 import TableCardBlock from './TableCardBlock';
 import { useLightboxStore } from '../stores/lightboxStore';
 import { getClipboard } from '../providers';
@@ -77,6 +78,10 @@ export default function MessageBubble({ message }: Props) {
   // answer yet. Render it near-transparent so it floats over the background
   // instead of looking like a solid message bubble.
   const st = message.jobProgress?.status;
+  // A turn that asked a question with choices (sys.askUser). We take the clean
+  // question string from here and render its options as chips — never the raw
+  // JSON payload. Not a "pending" mode: answering just sends a normal message.
+  const pq = !isUser ? message.jobProgress?.pendingQuestion : undefined;
   const isProgressOnly =
     !isUser &&
     (st === 'running' || st === 'paused') &&
@@ -170,7 +175,9 @@ export default function MessageBubble({ message }: Props) {
           // No "Working on it…" text — the indicator below is the whole message.
           null
         ) : (
-          renderAssistantContent(message.content, copyText)
+          // When the turn asked a question, show its clean question string —
+          // never message.content, which may carry the raw JSON payload.
+          renderAssistantContent(pq?.question || message.content, copyText)
         )}
         {!!copied && (
           <View style={styles.copiedBadge}>
@@ -186,6 +193,9 @@ export default function MessageBubble({ message }: Props) {
         {!isUser && message.actions && message.actions.length > 0 && (
           <UIActionsRow actions={message.actions} />
         )}
+        {pq && (
+          <QuestionChips inputType={pq.inputType} options={pq.options} />
+        )}
         {!isProgressOnly && (
           <Text style={[styles.timeText, isUser && styles.timeTextUser]}>
             {formatTime(message.timestamp)}

package/src/chat/QuestionChips.tsx

@@ -0,0 +1,76 @@
+// Renders the option chips for an assistant turn that asked a question with
+// choices (sys.askUser). This is NOT a special "pending question" mode — a tap
+// simply calls sendMessage(label), i.e. the user's answer goes back as an
+// ordinary new message (exactly what they'd get by typing it). Kept separate
+// from UIActionsRow (home-action chips) so that mechanism is untouched.
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, Platform } from 'react-native';
+import { ada, fontSize, useChatStore } from '@ateam-ai-mobile/core';
+
+const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
+
+/** Normalize the options: confirm → Yes/No when no explicit options given. */
+function resolveOptions(inputType: string | undefined, options?: string[]): string[] {
+  if (Array.isArray(options) && options.length) return options.filter(o => typeof o === 'string' && o.trim());
+  if (inputType === 'confirm') return ['Yes', 'No'];
+  return [];
+}
+
+export default function QuestionChips({
+  inputType,
+  options,
+}: {
+  inputType?: string;
+  options?: string[];
+}) {
+  const opts = resolveOptions(inputType, options);
+  if (!opts.length) return null;
+
+  const answer = (label: string) => {
+    // The reply is just another message on the same chain — the chain-router
+    // folds it into the running task. No dedicated respond endpoint.
+    try { useChatStore.getState().sendMessage(label); } catch { /* no-op */ }
+  };
+
+  return (
+    <View style={styles.row}>
+      {opts.map((label, i) => (
+        <Pressable
+          key={`${label}-${i}`}
+          accessibilityRole="button"
+          accessibilityLabel={label}
+          onPress={() => answer(label)}
+          style={({ pressed }) => [styles.chip, pressed && styles.chipPressed]}
+        >
+          <Text style={styles.label} numberOfLines={2}>{label}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginTop: 10,
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: ada.orangeSoft,
+    borderColor: ada.orange,
+    borderWidth: 1,
+    borderRadius: 14,
+  },
+  chipPressed: {
+    backgroundColor: ada.orange,
+  },
+  label: {
+    color: ada.orangeDeep,
+    fontSize: fontSize.xs,
+    fontWeight: '600',
+    fontFamily: fontFam,
+  },
+});

package/src/chat/UIActionsRow.tsx

@@ -50,7 +50,13 @@ export default function UIActionsRow({ actions }: Props) {
     // directly — skip navigation (which would try getPlugin() and fail).
     const surface = useSurfaceStore.getState().manifests[id];
     if (surface) {
-      useSurfaceStore.getState().show(id, focus ? { focus } : undefined);
+      // Thread the chip's opaque payload (e.g. { skillSlug } for platform:voice)
+      // through to the surface as props, alongside focus — same shape the loop /
+      // focusUiPlugin path delivers, so chip-tap and loop-open behave identically.
+      // GENERIC: we don't interpret payload.data; the surface Component reads
+      // what it understands.
+      const props = { ...(focus ? { focus } : {}), ...(a.payload?.data || {}) };
+      useSurfaceStore.getState().show(id, Object.keys(props).length ? props : undefined);
       return;
     }
 

package/src/voice/VoiceCallSheet.tsx

@@ -23,6 +23,8 @@ import useVoiceCall from './useVoiceCall';
 interface Props {
   visible: boolean;
   onClose: () => void;
+  /** Optional skill to hand the mic to on connect (voice /session → takeMic). */
+  skillSlug?: string;
 }
 
 const fontFam = Platform.OS === 'ios' ? 'SF Pro Rounded' : undefined;
@@ -88,12 +90,12 @@ function HighlightedText({
   );
 }
 
-export default function VoiceCallSheet({ visible, onClose }: Props) {
+export default function VoiceCallSheet({ visible, onClose, skillSlug }: Props) {
   const {
     callState, aiPartial, userPartial, transcript, error, muted,
     startCall, stopCall, toggleMute, handleWebViewMessage, getWebViewSource, webViewRef,
     injectedTrackHook,
-  } = useVoiceCall();
+  } = useVoiceCall({ skillSlug });
 
   const scrollRef = useRef<ScrollView>(null);
 

package/src/voice/useVoiceCall.ts

@@ -7,7 +7,36 @@
  * without it. Identity (token/tenant/actor) comes from the host-owned config.
  */
 import { useState, useRef, useCallback } from 'react';
-import { getVoiceApiUrl, getToken, getTenant, getUser } from '@ateam-ai-mobile/core';
+import { getVoiceApiUrl, getToken, getTenant, getUser, refreshToken } from '@ateam-ai-mobile/core';
+
+/**
+ * The voice WebView bakes the JWT into its URL once at mount and never
+ * refreshes it (unlike the SDK REST client, which self-heals on 401). So a
+ * token that has gone stale by the time the user taps the mic is handed to
+ * voice-backend and rejected by Core /api/auth/me ("Invalid or expired
+ * token"). Guard: if the current token is expired or within `SKEW_MS` of
+ * expiry, refresh it BEFORE the WebView mounts so it gets a fresh token.
+ * Cheap in the common case — we only pay the round-trip when actually near
+ * expiry (decoded locally, no network unless needed).
+ */
+const TOKEN_REFRESH_SKEW_MS = 90_000; // refresh if <90s of life left (or expired)
+function tokenNeedsRefresh(token: string | null): boolean {
+  if (!token) return true;
+  try {
+    const payloadB64 = token.split('.')[1];
+    const padded = payloadB64.replace(/-/g, '+').replace(/_/g, '/');
+    // Hermes has atob; Buffer fallback for older runtimes (mirrors
+    // apps/mobile authStore.decodeJwtPayload).
+    const json = typeof atob === 'function'
+      ? atob(padded)
+      : Buffer.from(padded, 'base64').toString('utf8');
+    const exp = JSON.parse(json)?.exp;
+    if (typeof exp !== 'number') return false;
+    return Date.now() >= exp * 1000 - TOKEN_REFRESH_SKEW_MS;
+  } catch {
+    return false; // can't decode → let the server decide, don't block the call
+  }
+}
 
 export interface TranscriptEntry {
   role: 'user' | 'ai' | 'tool';
@@ -113,7 +142,7 @@ const buildMuteScript = (muted: boolean) => `
 })(${muted}); true;
 `;
 
-export default function useVoiceCall() {
+export default function useVoiceCall({ skillSlug }: { skillSlug?: string } = {}) {
   const [callState, setCallState] = useState<CallState>('idle');
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -156,12 +185,25 @@ export default function useVoiceCall() {
     } catch {}
   }, []);
 
-  const startCall = useCallback(() => {
-    setCallState('connecting');
+  const startCall = useCallback(async () => {
     setError(null);
     setTranscript([]);
     setAiPartial('');
     setUserPartial('');
+    // Ensure the WebView is handed a FRESH token BEFORE it mounts (it never
+    // refreshes once mounted, and the WebView mounts as soon as callState
+    // leaves 'idle'). Only pays a round-trip when the token is expired or
+    // near-expiry; otherwise instant. Flip to 'connecting' only after, so
+    // getWebViewSource() reads the refreshed token.
+    try {
+      if (tokenNeedsRefresh(getToken())) {
+        await refreshToken();
+      }
+    } catch {
+      // Refresh failed — proceed with whatever token we have; voice-backend
+      // will surface a clean auth error rather than us blocking the call.
+    }
+    setCallState('connecting');
   }, []);
 
   const stopCall = useCallback(() => {
@@ -187,10 +229,13 @@ export default function useVoiceCall() {
     const token = getToken();
     const tenant = getTenant();
     const actorId = getUser()?.actorId || '';
+    // skillSlug (when opened for a specific skill) is read by the voice mini-app
+    // and posted to /session, which turns it into takeMic (E1 held-mic entry).
+    const skillParam = skillSlug ? `&skillSlug=${encodeURIComponent(skillSlug)}` : '';
     return {
-      uri: `${getVoiceApiUrl()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || '')}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}`,
+      uri: `${getVoiceApiUrl()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || '')}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}${skillParam}`,
     };
-  }, []);
+  }, [skillSlug]);
 
   return {
     callState, sessionId, error, transcript, aiPartial, userPartial, muted,