@ateam-ai-mobile/ui 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -14,7 +14,7 @@ import { ada as ada7, useChatStore, pluginCommandEmitter as pluginCommandEmitter
 import { useState as useState4, useCallback as useCallback3 } from "react";
 import { View as View7, Text as Text6, Pressable as Pressable3, StyleSheet as StyleSheet6, Image, Platform as Platform4 } from "react-native";
 import Markdown from "react-native-markdown-display";
-import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig as getConfig2, ada as ada6, borderRadius as borderRadius3, fontSize as fontSize4 } from "@ateam-ai-mobile/core";
+import { TABLE_BLOCK_OPEN, TABLE_BLOCK_CLOSE, getConfig as getConfig2, ada as ada6, borderRadius as borderRadius2, fontSize as fontSize4 } from "@ateam-ai-mobile/core";
 import { AdaOrb, getHaptics as getHaptics2 } from "@ateam-ai-mobile/plugin-runtime";
 
 // src/chat/JobProgressBar.tsx
@@ -28,7 +28,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 = useRef(new Animated.Value(0.5)).current;
   const [elapsed, setElapsed] = useState(0);
   const isRunning = progress.status === "running";
@@ -42,8 +42,10 @@ function JobProgressBar({ progress }) {
     }
     const anim = Animated.loop(
       Animated.sequence([
-        Animated.timing(pulseAnim, { toValue: 1, duration: 800, useNativeDriver: true }),
-        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.
+        Animated.timing(pulseAnim, { toValue: 0.55, duration: 1100, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 0.22, duration: 1100, useNativeDriver: true })
       ])
     );
     anim.start();
@@ -64,33 +66,37 @@ function JobProgressBar({ progress }) {
   const statusColor = isDone ? WARM_GREEN : isError ? WARM_RED : isPaused ? WARM_AMBER : ada.orange;
   const statusBg = isDone ? WARM_GREEN_SOFT : isError ? WARM_RED_SOFT : isPaused ? WARM_AMBER_SOFT : ada.orangeSoft;
   if (isDone || isError) {
-    return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    return /* @__PURE__ */ jsx(View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: statusColor }], children: isDone ? "Completed" : "Failed" })
     ] }) });
   }
   if (isPaused) {
-    return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    return /* @__PURE__ */ jsx(View, { style: [styles.container, standalone && styles.containerStandalone], children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: statusColor }] }),
       /* @__PURE__ */ jsx(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__ */ jsxs(View, { style: styles.container, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, standalone && styles.containerStandalone], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       /* @__PURE__ */ jsx(
         Animated.View,
         {
-          style: [styles.dot, { backgroundColor: ada.orange, opacity: pulseAnim }]
+          style: [styles.dot, styles.dotRunning, { opacity: pulseAnim }]
         }
       ),
-      /* @__PURE__ */ jsx(Text, { style: styles.skill, numberOfLines: 1, children: progress.skillSlug || "Processing..." }),
-      !!progress.currentTool && /* @__PURE__ */ jsx(Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${progress.currentTool}` }),
+      /* @__PURE__ */ jsx(Text, { style: styles.skill, numberOfLines: 1, children: headline }),
+      showRawTool && /* @__PURE__ */ jsx(Text, { style: styles.tool, numberOfLines: 1, children: ` \u2192 ${label(progress.currentTool)}` }),
       metaParts.length > 0 && /* @__PURE__ */ jsx(Text, { style: styles.meta, numberOfLines: 1, children: `  \xB7  ${metaParts.join("  \xB7  ")}` })
     ] }),
     !!lp?.message && /* @__PURE__ */ jsxs(View, { style: styles.liveProgressRow, children: [
@@ -103,10 +109,10 @@ function JobProgressBar({ progress }) {
       ] }),
       /* @__PURE__ */ jsx(Text, { style: styles.liveProgressMsg, numberOfLines: 1, children: lp.message })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.progressTrack, { backgroundColor: statusBg }], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(View, { style: styles.progressTrack, children: /* @__PURE__ */ jsx(
       Animated.View,
       {
-        style: [styles.progressFill, { backgroundColor: ada.orange, opacity: pulseAnim }]
+        style: [styles.progressFill, { opacity: pulseAnim }]
       }
     ) })
   ] });
@@ -118,6 +124,12 @@ var styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: ada.border
   },
+  // Standalone (transparent-bubble) placeholder — no divider/top spacing.
+  containerStandalone: {
+    marginTop: 0,
+    paddingTop: 0,
+    borderTopWidth: 0
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -125,21 +137,26 @@ var styles = 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: 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: fontSize.xs,
-    fontWeight: "600",
-    color: ada.orange,
+    fontWeight: "500",
+    color: ada.inkSoft,
     flexShrink: 1
   },
   tool: {
@@ -165,19 +182,23 @@ var styles = StyleSheet.create({
   },
   liveProgressMsg: {
     fontSize: fontSize.xs,
-    color: ada.orange,
+    color: 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)"
   }
 });
 
@@ -979,7 +1000,7 @@ var styles4 = StyleSheet4.create({
 
 // src/chat/TableCardBlock.tsx
 import { View as View6, Text as Text5, StyleSheet as StyleSheet5, Platform as Platform3 } from "react-native";
-import { ada as ada5, borderRadius as borderRadius2, fontSize as fontSize3, spacing } from "@ateam-ai-mobile/core";
+import { ada as ada5, borderRadius, fontSize as fontSize3, spacing } from "@ateam-ai-mobile/core";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var fontFam2 = Platform3.OS === "ios" ? "SF Pro Rounded" : void 0;
 function TableCardBlock({ columns, rows }) {
@@ -1008,7 +1029,7 @@ var styles5 = StyleSheet5.create({
   },
   card: {
     backgroundColor: ada5.paper,
-    borderRadius: borderRadius2.md,
+    borderRadius: borderRadius.md,
     borderWidth: 1,
     borderColor: ada5.border,
     padding: spacing.md
@@ -1104,6 +1125,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] = useState4("");
   const showCopied = useCallback3((label) => {
     setCopied(label);
@@ -1139,7 +1162,8 @@ function MessageBubble({ message }) {
           styles6.bubble,
           isUser && styles6.bubbleUser,
           isSystem && styles6.bubbleSystem,
-          isNotification && styles6.bubbleNotification
+          isNotification && styles6.bubbleNotification,
+          isProgressOnly && styles6.bubbleProgress
         ],
         children: [
           isNotification && /* @__PURE__ */ jsxs6(View7, { style: styles6.notificationHeader, children: [
@@ -1172,12 +1196,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__ */ jsx8(Text6, { 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__ */ jsx8(View7, { style: styles6.copiedBadge, children: /* @__PURE__ */ jsx8(Text6, { style: styles6.copiedText, children: copied }) }),
           message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx8(ToolCallsBadge, { calls: message.toolCalls }),
-          message.jobProgress && /* @__PURE__ */ jsx8(JobProgressBar, { progress: message.jobProgress }),
+          message.jobProgress && /* @__PURE__ */ jsx8(JobProgressBar, { progress: message.jobProgress, standalone: isProgressOnly }),
           !isUser && message.actions && message.actions.length > 0 && /* @__PURE__ */ jsx8(UIActionsRow, { actions: message.actions }),
-          /* @__PURE__ */ jsx8(Text6, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
+          !isProgressOnly && /* @__PURE__ */ jsx8(Text6, { style: [styles6.timeText, isUser && styles6.timeTextUser], children: formatTime(message.timestamp) })
         ]
       }
     ),
@@ -1292,7 +1319,7 @@ var styles6 = StyleSheet6.create({
     backgroundColor: ada6.botBubble,
     borderWidth: 1,
     borderColor: ada6.botBubbleBorder,
-    borderRadius: borderRadius3.xl,
+    borderRadius: borderRadius2.xl,
     paddingHorizontal: 16,
     paddingVertical: 12
   },
@@ -1300,6 +1327,14 @@ var styles6 = StyleSheet6.create({
     backgroundColor: ada6.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: ada6.orangeSoft,
     borderColor: ada6.orange,
@@ -1308,7 +1343,7 @@ var styles6 = StyleSheet6.create({
   bubbleNotification: {
     backgroundColor: ada6.orangeSoft,
     borderColor: "rgba(255, 122, 40, 0.35)",
-    borderRadius: borderRadius3.lg,
+    borderRadius: borderRadius2.lg,
     maxWidth: "90%"
   },
   notificationLeftStripe: {
@@ -1380,7 +1415,7 @@ var styles6 = StyleSheet6.create({
     backgroundColor: "#5A8A5C",
     paddingHorizontal: 8,
     paddingVertical: 2,
-    borderRadius: borderRadius3.sm
+    borderRadius: borderRadius2.sm
   },
   copiedText: {
     color: "#fff",
@@ -1496,7 +1531,7 @@ import {
   Platform as Platform5
 } from "react-native";
 import Svg, { Path, Line, Polygon } from "react-native-svg";
-import { colors as colors2, borderRadius as borderRadius4 } from "@ateam-ai-mobile/core";
+import { colors as colors2, borderRadius as borderRadius3 } from "@ateam-ai-mobile/core";
 import { getHaptics as getHaptics3 } from "@ateam-ai-mobile/plugin-runtime";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ChatInput({ onSend, onCallStart, loading, prefill, placeholder }) {
@@ -1564,7 +1599,7 @@ var styles8 = StyleSheet8.create({
     flexDirection: "row",
     alignItems: "flex-end",
     backgroundColor: colors2.light.bgInput,
-    borderRadius: borderRadius4.xl,
+    borderRadius: borderRadius3.xl,
     borderWidth: 1,
     borderColor: colors2.light.border,
     paddingHorizontal: 4,
@@ -1893,7 +1928,7 @@ var styles11 = StyleSheet11.create({
 // src/TenantPicker.tsx
 import { useEffect as useEffect7, useState as useState8 } from "react";
 import { View as View13, Text as Text9, Pressable as Pressable7, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet12, Platform as Platform8 } from "react-native";
-import { ada as ada9, fontSize as fontSize5, borderRadius as borderRadius5, listMyTenants, switchTenant, getTenant as getTenant4 } from "@ateam-ai-mobile/core";
+import { ada as ada9, fontSize as fontSize5, borderRadius as borderRadius4, listMyTenants, switchTenant, getTenant as getTenant4 } from "@ateam-ai-mobile/core";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var fontFam5 = Platform8.OS === "ios" ? "SF Pro Rounded" : void 0;
 function TenantPicker({ onSwitched, onSelect, currentTenantId }) {
@@ -1967,7 +2002,7 @@ var styles12 = StyleSheet12.create({
     alignItems: "center",
     gap: 12,
     backgroundColor: ada9.paperSoft,
-    borderRadius: borderRadius5.lg,
+    borderRadius: borderRadius4.lg,
     borderWidth: 1,
     borderColor: "transparent",
     paddingHorizontal: 16,
@@ -2037,7 +2072,21 @@ import { AdaOrb as AdaOrb3, SurfaceFullscreen as SurfaceFullscreen2 } from "@ate
 
 // src/voice/useVoiceCall.ts
 import { useState as useState9, useRef as useRef5, useCallback as useCallback6 } from "react";
-import { getVoiceApiUrl as getVoiceApiUrl2, getToken as getToken2, getTenant as getTenant5, getUser as getUser2 } from "@ateam-ai-mobile/core";
+import { getVoiceApiUrl as getVoiceApiUrl2, getToken as getToken2, getTenant as getTenant5, getUser as getUser2, refreshToken } from "@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;
@@ -2128,7 +2177,7 @@ var buildMuteScript = (muted) => `
   console.log('[ada-mute]', muted ? 'MUTED' : 'UNMUTED', 'tracks=', n);
 })(${muted}); true;
 `;
-function useVoiceCall() {
+function useVoiceCall({ skillSlug } = {}) {
   const [callState, setCallState] = useState9("idle");
   const [sessionId, setSessionId] = useState9(null);
   const [error, setError] = useState9(null);
@@ -2169,12 +2218,18 @@ function useVoiceCall() {
     } catch {
     }
   }, []);
-  const startCall = useCallback6(() => {
-    setCallState("connecting");
+  const startCall = useCallback6(async () => {
     setError(null);
     setTranscript([]);
     setAiPartial("");
     setUserPartial("");
+    try {
+      if (tokenNeedsRefresh(getToken2())) {
+        await refreshToken();
+      }
+    } catch {
+    }
+    setCallState("connecting");
   }, []);
   const stopCall = useCallback6(() => {
     webViewRef.current?.injectJavaScript?.("window.hangUp && window.hangUp(); true;");
@@ -2194,10 +2249,11 @@ function useVoiceCall() {
     const token = getToken2();
     const tenant = getTenant5();
     const actorId = getUser2()?.actorId || "";
+    const skillParam = skillSlug ? `&skillSlug=${encodeURIComponent(skillSlug)}` : "";
     return {
-      uri: `${getVoiceApiUrl2()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || "")}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}`
+      uri: `${getVoiceApiUrl2()}/app?mode=mini&embedded=rn&authToken=${encodeURIComponent(token || "")}&tenant=${encodeURIComponent(tenant)}&actorId=${encodeURIComponent(actorId)}${skillParam}`
     };
-  }, []);
+  }, [skillSlug]);
   return {
     callState,
     sessionId,
@@ -2264,7 +2320,7 @@ function HighlightedText({
   const segments = useMemo5(() => highlightSegments(text), [text]);
   return /* @__PURE__ */ jsx15(Text10, { style: baseStyle, children: segments.map((seg, i) => /* @__PURE__ */ jsx15(Text10, { style: seg.important ? importantStyle : void 0, children: seg.text }, i)) });
 }
-function VoiceCallSheet({ visible, onClose }) {
+function VoiceCallSheet({ visible, onClose, skillSlug }) {
   const {
     callState,
     aiPartial,
@@ -2279,7 +2335,7 @@ function VoiceCallSheet({ visible, onClose }) {
     getWebViewSource,
     webViewRef,
     injectedTrackHook
-  } = useVoiceCall();
+  } = useVoiceCall({ skillSlug });
   const scrollRef = useRef6(null);
   useEffect8(() => {
     if (visible && callState === "idle") startCall();