@ateam-ai-mobile/ui 0.1.2 → 0.1.3

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[];

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[];

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,