@ateam-ai-mobile/ui 0.1.2 → 0.1.4

package/dist/index.d.mts

@@ -41,8 +41,11 @@ declare function TypingIndicator(): react_jsx_runtime.JSX.Element;
 
 interface Props$6 {
     progress: JobProgress;
+    /** Standalone placeholder (transparent bubble) — drop the top divider so it
+     *  floats cleanly over the background. */
+    standalone?: boolean;
 }
-declare function JobProgressBar({ progress }: Props$6): react_jsx_runtime.JSX.Element;
+declare function JobProgressBar({ progress, standalone }: Props$6): react_jsx_runtime.JSX.Element;
 
 interface Props$5 {
     columns: string[];
@@ -174,8 +177,10 @@ declare const useLightboxStore: zustand.UseBoundStore<zustand.StoreApi<LightboxS
 interface Props {
     visible: boolean;
     onClose: () => void;
+    /** Optional skill to hand the mic to on connect (voice /session → takeMic). */
+    skillSlug?: string;
 }
-declare function VoiceCallSheet({ visible, onClose }: Props): react_jsx_runtime.JSX.Element | null;
+declare function VoiceCallSheet({ visible, onClose, skillSlug }: Props): react_jsx_runtime.JSX.Element | null;
 
 interface TranscriptEntry {
     role: 'user' | 'ai' | 'tool';
@@ -183,7 +188,9 @@ interface TranscriptEntry {
     ts: number;
 }
 type CallState = 'idle' | 'connecting' | 'connected' | 'error';
-declare function useVoiceCall(): {
+declare function useVoiceCall({ skillSlug }?: {
+    skillSlug?: string;
+}): {
     callState: CallState;
     sessionId: string | null;
     error: string | null;
@@ -191,7 +198,7 @@ declare function useVoiceCall(): {
     aiPartial: string;
     userPartial: string;
     muted: boolean;
-    startCall: () => void;
+    startCall: () => Promise<void>;
     stopCall: () => void;
     toggleMute: () => void;
     handleWebViewMessage: (event: any) => void;

package/dist/index.d.ts

@@ -41,8 +41,11 @@ declare function TypingIndicator(): react_jsx_runtime.JSX.Element;
 
 interface Props$6 {
     progress: JobProgress;
+    /** Standalone placeholder (transparent bubble) — drop the top divider so it
+     *  floats cleanly over the background. */
+    standalone?: boolean;
 }
-declare function JobProgressBar({ progress }: Props$6): react_jsx_runtime.JSX.Element;
+declare function JobProgressBar({ progress, standalone }: Props$6): react_jsx_runtime.JSX.Element;
 
 interface Props$5 {
     columns: string[];
@@ -174,8 +177,10 @@ declare const useLightboxStore: zustand.UseBoundStore<zustand.StoreApi<LightboxS
 interface Props {
     visible: boolean;
     onClose: () => void;
+    /** Optional skill to hand the mic to on connect (voice /session → takeMic). */
+    skillSlug?: string;
 }
-declare function VoiceCallSheet({ visible, onClose }: Props): react_jsx_runtime.JSX.Element | null;
+declare function VoiceCallSheet({ visible, onClose, skillSlug }: Props): react_jsx_runtime.JSX.Element | null;
 
 interface TranscriptEntry {
     role: 'user' | 'ai' | 'tool';
@@ -183,7 +188,9 @@ interface TranscriptEntry {
     ts: number;
 }
 type CallState = 'idle' | 'connecting' | 'connected' | 'error';
-declare function useVoiceCall(): {
+declare function useVoiceCall({ skillSlug }?: {
+    skillSlug?: string;
+}): {
     callState: CallState;
     sessionId: string | null;
     error: string | null;
@@ -191,7 +198,7 @@ declare function useVoiceCall(): {
     aiPartial: string;
     userPartial: string;
     muted: boolean;
-    startCall: () => void;
+    startCall: () => Promise<void>;
     stopCall: () => void;
     toggleMute: () => void;
     handleWebViewMessage: (event: any) => void;

package/dist/index.js

@@ -81,7 +81,7 @@ var WARM_RED = "#C15545";
 var WARM_RED_SOFT = "rgba(193, 85, 69, 0.14)";
 var WARM_AMBER = "#D49A4E";
 var WARM_AMBER_SOFT = "rgba(212, 154, 78, 0.16)";
-function JobProgressBar({ progress }) {
+function JobProgressBar({ progress, standalone }) {
   const pulseAnim = (0, import_react.useRef)(new import_react_native.Animated.Value(0.5)).current;
   const [elapsed, setElapsed] = (0, import_react.useState)(0);
   const isRunning = progress.status === "running";
@@ -95,8 +95,10 @@ function JobProgressBar({ progress }) {
     }
     const anim = import_react_native.Animated.loop(
       import_react_native.Animated.sequence([
-        import_react_native.Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
-        import_react_native.Animated.timing(pulseAnim, { toValue: 0.5, duration: 800, useNativeDriver: true })
+        // Gentle breath — a soft fade rather than a hard blink, so the running
+        // indicator recedes into the bubble instead of demanding attention.
+        import_react_native.Animated.timing(pulseAnim, { toValue: 0.55, duration: 1100, useNativeDriver: true }),
+        import_react_native.Animated.timing(pulseAnim, { toValue: 0.22, duration: 1100, useNativeDriver: true })
       ])
     );
     anim.start();
@@ -117,33 +119,37 @@ function JobProgressBar({ progress }) {
   const statusColor = isDone ? WARM_GREEN : isError ? WARM_RED : isPaused ? WARM_AMBER : import_core.ada.orange;
   const statusBg = isDone ? WARM_GREEN_SOFT : isError ? WARM_RED_SOFT : isPaused ? WARM_AMBER_SOFT : import_core.ada.orangeSoft;
   if (isDone || isError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [styles.label, { color: statusColor }], children: isDone ? "Completed" : "Failed" })
     ] }) });
   }
   if (isPaused) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [styles.label, { color: statusColor }], children: "Waiting for your reply" })
     ] }) });
   }
-  const elapsedStr = progress.chainStartedAt ? `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}` : null;
+  const elapsedStr = progress.chainStartedAt ? elapsed < 60 ? `${elapsed}s` : `${Math.floor(elapsed / 60)}m ${elapsed % 60}s` : null;
   const metaParts = [
     progress.iteration != null && progress.iteration > 0 ? `iter ${progress.iteration}` : null,
     elapsedStr
   ].filter(Boolean);
+  const labels = progress.humanLabels;
+  const label = (t) => t && labels?.[t] || t;
+  const headline = progress.humanStatus || label(progress.skillSlug) || "Processing...";
+  const showRawTool = !progress.humanStatus && !!progress.currentTool;
   const lp = progress.liveProgress;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.container, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.container, standalone && styles.containerStandalone], children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.row, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_native.Animated.View,
         {
-          style: [styles.dot, { backgroundColor: import_core.ada.orange, opacity: pulseAnim }]
+          style: [styles.dot, styles.dotRunning, { opacity: pulseAnim }]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.skill, numberOfLines: 1, children: progress.skillSlug || "Processing..." }),
-      !!progress.currentTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${progress.currentTool}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.skill, numberOfLines: 1, children: headline }),
+      showRawTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${label(progress.currentTool)}` }),
       metaParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.meta, numberOfLines: 1, children: `  \xB7  ${metaParts.join("  \xB7  ")}` })
     ] }),
     !!lp?.message && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.liveProgressRow, children: [
@@ -156,10 +162,10 @@ function JobProgressBar({ progress }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles.liveProgressMsg, numberOfLines: 1, children: lp.message })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.progressTrack, { backgroundColor: statusBg }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.progressTrack, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native.Animated.View,
       {
-        style: [styles.progressFill, { backgroundColor: import_core.ada.orange, opacity: pulseAnim }]
+        style: [styles.progressFill, { opacity: pulseAnim }]
       }
     ) })
   ] });
@@ -171,6 +177,12 @@ var styles = import_react_native.StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: import_core.ada.border
   },
+  // Standalone (transparent-bubble) placeholder — no divider/top spacing.
+  containerStandalone: {
+    marginTop: 0,
+    paddingTop: 0,
+    borderTopWidth: 0
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -178,21 +190,26 @@ var styles = import_react_native.StyleSheet.create({
     overflow: "hidden"
   },
   dot: {
-    width: 7,
-    height: 7,
-    borderRadius: 4,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
     marginRight: 6,
     flexShrink: 0
   },
+  // Running dot: soft orange, not the full-saturation accent.
+  dotRunning: {
+    backgroundColor: "rgba(255, 122, 40, 0.6)"
+  },
   label: {
     fontSize: import_core.fontSize.xs,
     fontWeight: "600"
   },
-  // Running state text segments
+  // Running state text segments — muted so the indicator blends into the
+  // bubble rather than shouting in orange.
   skill: {
     fontSize: import_core.fontSize.xs,
-    fontWeight: "600",
-    color: import_core.ada.orange,
+    fontWeight: "500",
+    color: import_core.ada.inkSoft,
     flexShrink: 1
   },
   tool: {
@@ -218,19 +235,23 @@ var styles = import_react_native.StyleSheet.create({
   },
   liveProgressMsg: {
     fontSize: import_core.fontSize.xs,
-    color: import_core.ada.orange,
+    color: import_core.ada.inkSoft,
     flex: 1
   },
   progressTrack: {
-    height: 3,
-    borderRadius: 2,
-    marginTop: 6,
-    overflow: "hidden"
+    height: 2,
+    borderRadius: 1,
+    marginTop: 8,
+    overflow: "hidden",
+    // Barely-there rail so the bar reads as a hint, not a status meter.
+    backgroundColor: "rgba(26, 20, 16, 0.05)"
   },
   progressFill: {
     height: "100%",
-    width: "60%",
-    borderRadius: 2
+    width: "55%",
+    borderRadius: 1,
+    // Muted orange — present but recessive.
+    backgroundColor: "rgba(255, 122, 40, 0.4)"
   }
 });
 
@@ -1140,6 +1161,8 @@ function MessageBubble({ message }) {
   const isUser = message.role === "user";
   const isSystem = message.role === "system";
   const isNotification = !isUser && message.kind === "notification";
+  const st = message.jobProgress?.status;
+  const isProgressOnly = !isUser && (st === "running" || st === "paused") && (!message.content?.trim() || message.content === "Working on it...");
   const [copied, setCopied] = (0, import_react7.useState)("");
   const showCopied = (0, import_react7.useCallback)((label) => {
     setCopied(label);
@@ -1175,7 +1198,8 @@ function MessageBubble({ message }) {
           styles6.bubble,
           isUser && styles6.bubbleUser,
           isSystem && styles6.bubbleSystem,
-          isNotification && styles6.bubbleNotification
+          isNotification && styles6.bubbleNotification,
+          isProgressOnly && styles6.bubbleProgress
         ],
         children: [
           isNotification && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles6.notificationHeader, children: [
@@ -1208,12 +1232,15 @@ function MessageBubble({ message }) {
           isUser ? (
             // Hide the "See attachment" placeholder when the bubble already shows the photo.
             message.content && !(message.content === "See attachment" && message.attachments?.length) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { selectable: true, style: styles6.userText, children: message.content }) : null
+          ) : isProgressOnly ? (
+            // No "Working on it…" text — the indicator below is the whole message.
+            null
           ) : renderAssistantContent(message.content, copyText),
           !!copied && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles6.copiedBadge, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: styles6.copiedText, children: copied }) }),
           message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolCallsBadge, { calls: message.toolCalls }),
-          message.jobProgress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(JobProgressBar, { progress: message.jobProgress }),
+          message.jobProgress && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(JobProgressBar, { progress: message.jobProgress, standalone: isProgressOnly }),
           !isUser && message.actions && message.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UIActionsRow, { actions: message.actions }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
+          !isProgressOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
         ]
       }
     ),
@@ -1336,6 +1363,14 @@ var styles6 = import_react_native7.StyleSheet.create({
     backgroundColor: import_core9.ada.userBubble,
     borderColor: "transparent"
   },
+  // Live-chain placeholder: no fill, no border, tighter padding — the
+  // indicator floats over the background instead of sitting in a bubble.
+  bubbleProgress: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    paddingHorizontal: 4,
+    paddingVertical: 2
+  },
   bubbleSystem: {
     backgroundColor: import_core9.ada.orangeSoft,
     borderColor: import_core9.ada.orange,
@@ -2053,6 +2088,20 @@ var import_plugin_runtime9 = require("@ateam-ai-mobile/plugin-runtime");
 // src/voice/useVoiceCall.ts
 var import_react12 = require("react");
 var import_core16 = require("@ateam-ai-mobile/core");
+var TOKEN_REFRESH_SKEW_MS = 9e4;
+function tokenNeedsRefresh(token) {
+  if (!token) return true;
+  try {
+    const payloadB64 = token.split(".")[1];
+    const padded = payloadB64.replace(/-/g, "+").replace(/_/g, "/");
+    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 * 1e3 - TOKEN_REFRESH_SKEW_MS;
+  } catch {
+    return false;
+  }
+}
 var INJECT_TRACK_HOOK = `
 (function() {
   if (window._adaTrackHookInstalled) return;
@@ -2143,7 +2192,7 @@ var buildMuteScript = (muted) => `
   console.log('[ada-mute]', muted ? 'MUTED' : 'UNMUTED', 'tracks=', n);
 })(${muted}); true;
 `;
-function useVoiceCall() {
+function useVoiceCall({ skillSlug } = {}) {
   const [callState, setCallState] = (0, import_react12.useState)("idle");
   const [sessionId, setSessionId] = (0, import_react12.useState)(null);
   const [error, setError] = (0, import_react12.useState)(null);
@@ -2184,12 +2233,18 @@ function useVoiceCall() {
     } catch {
     }
   }, []);
-  const startCall = (0, import_react12.useCallback)(() => {
-    setCallState("connecting");
+  const startCall = (0, import_react12.useCallback)(async () => {
     setError(null);
     setTranscript([]);
     setAiPartial("");
     setUserPartial("");
+    try {
+      if (tokenNeedsRefresh((0, import_core16.getToken)())) {
+        await (0, import_core16.refreshToken)();
+      }
+    } catch {
+    }
+    setCallState("connecting");
   }, []);
   const stopCall = (0, import_react12.useCallback)(() => {
     webViewRef.current?.injectJavaScript?.("window.hangUp && window.hangUp(); true;");
@@ -2209,10 +2264,11 @@ function useVoiceCall() {
     const token = (0, import_core16.getToken)();
     const tenant = (0, import_core16.getTenant)();
     const actorId = (0, import_core16.getUser)()?.actorId || "";
+    const skillParam = skillSlug ? `&skillSlug=${encodeURIComponent(skillSlug)}` : "";
     return {
-      uri: `${(0, import_core16.getVoiceApiUrl)()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || "")}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}`
+      uri: `${(0, import_core16.getVoiceApiUrl)()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || "")}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}${skillParam}`
     };
-  }, []);
+  }, [skillSlug]);
   return {
     callState,
     sessionId,
@@ -2279,7 +2335,7 @@ function HighlightedText({
   const segments = (0, import_react13.useMemo)(() => highlightSegments(text), [text]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.Text, { style: baseStyle, children: segments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.Text, { style: seg.important ? importantStyle : void 0, children: seg.text }, i)) });
 }
-function VoiceCallSheet({ visible, onClose }) {
+function VoiceCallSheet({ visible, onClose, skillSlug }) {
   const {
     callState,
     aiPartial,
@@ -2294,7 +2350,7 @@ function VoiceCallSheet({ visible, onClose }) {
     getWebViewSource,
     webViewRef,
     injectedTrackHook
-  } = useVoiceCall();
+  } = useVoiceCall({ skillSlug });
   const scrollRef = (0, import_react13.useRef)(null);
   (0, import_react13.useEffect)(() => {
     if (visible && callState === "idle") startCall();