@paymanai/payman-ask-sdk 1.2.3 → 1.2.5

package/dist/index.native.js

@@ -1,234 +1,580 @@
 'use strict';
 
 var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
-var React4 = require('react');
+var React = require('react');
 var reactNative = require('react-native');
 var lucideReactNative = require('lucide-react-native');
 var jsxRuntime = require('react/jsx-runtime');
-var Animated = require('react-native-reanimated');
+var Animated2 = require('react-native-reanimated');
 var Markdown = require('react-native-markdown-display');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Animated2__default = /*#__PURE__*/_interopDefault(Animated2);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 
 // src/components/PaymanChat/index.native.tsx
-var PaymanChatContext = React4.createContext(void 0);
+var PaymanChatContext = React.createContext(void 0);
 function usePaymanChat() {
-  const context = React4.useContext(PaymanChatContext);
+  const context = React.useContext(PaymanChatContext);
   if (!context) {
     throw new Error("usePaymanChat must be used within a PaymanChat component");
   }
   return context;
 }
+if (reactNative.Platform.OS === "android" && reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+  reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var VOICE_DOT_COUNT = 24;
+var VOICE_DOT_MIN_H = 5;
+var VOICE_DOT_MAX_H = 14;
+var SPEECH_ACTIVITY_MS = 1400;
+var VOICE_THEME_COLOR = "#00858d";
+var VOICE_THEME_RGBA = "rgba(0, 133, 141, 0.6)";
+var VOICE_THEME_RGBA_LIGHT = "rgba(0, 133, 141, 0.2)";
+var VOICE_BAR_BG = "#f0f9f9";
+var VOICE_BAR_BORDER = "rgba(0, 133, 141, 0.35)";
+var VoiceWaveformBar = React.memo(
+  ({
+    index,
+    isActive,
+    barColor
+  }) => {
+    const height = React.useRef(new reactNative.Animated.Value(VOICE_DOT_MIN_H)).current;
+    React.useEffect(() => {
+      if (isActive) {
+        const delay = index * 25;
+        const duration = 180 + index % 3 * 40;
+        const animation = reactNative.Animated.loop(
+          reactNative.Animated.sequence([
+            reactNative.Animated.timing(height, {
+              toValue: VOICE_DOT_MAX_H,
+              duration,
+              delay,
+              easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+              useNativeDriver: false
+            }),
+            reactNative.Animated.timing(height, {
+              toValue: VOICE_DOT_MIN_H,
+              duration,
+              easing: reactNative.Easing.inOut(reactNative.Easing.ease),
+              useNativeDriver: false
+            })
+          ])
+        );
+        animation.start();
+        return () => animation.stop();
+      } else {
+        reactNative.Animated.timing(height, {
+          toValue: VOICE_DOT_MIN_H,
+          duration: 200,
+          useNativeDriver: false
+        }).start();
+      }
+    }, [isActive, index, height]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Animated.View,
+      {
+        style: [
+          s.voiceDotBase,
+          {
+            height,
+            backgroundColor: barColor
+          }
+        ]
+      }
+    );
+  }
+);
+VoiceWaveformBar.displayName = "VoiceWaveformBar";
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s9 = seconds % 60;
+  return `${m}:${s9.toString().padStart(2, "0")}`;
+}
 function ChatInput({
   value,
   onChange,
   onSend,
   onPause,
   disabled = false,
-  placeholder = "Type your message...",
+  placeholder = "Chat with Claude",
   isWaitingForResponse = false,
   hasSelectedSession = true,
   isSessionParamsConfigured = true,
   onClick,
   inputStyle = "rounded",
   layout = "full-width",
-  className,
   enableVoice = false,
   onVoicePress,
-  voiceAvailable = false
+  voiceAvailable = false,
+  isRecording = false,
+  recordingDurationSeconds = 0,
+  onConfirmRecording,
+  onCancelRecording,
+  transcribedText
 }) {
   const isInputDisabled = disabled || isWaitingForResponse;
   const showPauseButton = isWaitingForResponse && onPause;
   const showVoiceButton = enableVoice && onVoicePress != null;
   const isVoiceButtonDisabled = isWaitingForResponse || !voiceAvailable || !isSessionParamsConfigured;
-  const getPlaceholder = () => {
-    if (!hasSelectedSession) {
-      return "Select a version to start chatting";
+  const canSend = !isInputDisabled && value.trim().length > 0;
+  const showVoiceBar = enableVoice && isRecording && onConfirmRecording != null && onCancelRecording != null;
+  const [isUserSpeaking, setIsUserSpeaking] = React.useState(false);
+  const speechTimeoutRef = React.useRef(null);
+  const prevTranscriptRef = React.useRef("");
+  React.useEffect(() => {
+    if (!showVoiceBar) {
+      setIsUserSpeaking(false);
+      prevTranscriptRef.current = "";
+      if (speechTimeoutRef.current) {
+        clearTimeout(speechTimeoutRef.current);
+        speechTimeoutRef.current = null;
+      }
+      return;
     }
-    if (!isSessionParamsConfigured) {
-      return "Configure User ID and User Label in Session Params";
+    const current = transcribedText ?? "";
+    const changed = current !== prevTranscriptRef.current;
+    prevTranscriptRef.current = current;
+    if (changed) {
+      setIsUserSpeaking(true);
+      if (speechTimeoutRef.current) clearTimeout(speechTimeoutRef.current);
+      speechTimeoutRef.current = setTimeout(() => {
+        speechTimeoutRef.current = null;
+        setIsUserSpeaking(false);
+      }, SPEECH_ACTIVITY_MS);
+    }
+    return () => {
+      if (speechTimeoutRef.current) {
+        clearTimeout(speechTimeoutRef.current);
+        speechTimeoutRef.current = null;
+      }
+    };
+  }, [showVoiceBar, transcribedText]);
+  const animOpacity = React.useRef(new reactNative.Animated.Value(1)).current;
+  const animScale = React.useRef(new reactNative.Animated.Value(1)).current;
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (showVoiceBar) {
+      reactNative.LayoutAnimation.configureNext(
+        reactNative.LayoutAnimation.create(200, "easeInEaseOut", "opacity")
+      );
+      animOpacity.setValue(0.92);
+      animScale.setValue(0.98);
+      reactNative.Animated.parallel([
+        reactNative.Animated.timing(animOpacity, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        }),
+        reactNative.Animated.spring(animScale, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 12,
+          bounciness: 4
+        })
+      ]).start();
+    } else {
+      reactNative.LayoutAnimation.configureNext(
+        reactNative.LayoutAnimation.create(220, "easeInEaseOut", "opacity")
+      );
+      animOpacity.setValue(1);
+      animScale.setValue(1);
     }
+  }, [showVoiceBar, animOpacity, animScale]);
+  const getPlaceholder = () => {
+    if (!hasSelectedSession) return "Select a version to start chatting";
+    if (!isSessionParamsConfigured)
+      return "Configure User ID and User Label in Session Params";
     return placeholder;
   };
+  const handleSubmit = () => {
+    if (canSend) onSend();
+  };
+  const handleConfirmRecording = () => {
+    reactNative.LayoutAnimation.configureNext(
+      reactNative.LayoutAnimation.create(220, "easeOut", "opacity")
+    );
+    onConfirmRecording?.();
+  };
+  const handleCancelRecording = () => {
+    reactNative.LayoutAnimation.configureNext(
+      reactNative.LayoutAnimation.create(200, "easeIn", "opacity")
+    );
+    onCancelRecording?.();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
       style: [
-        styles.container,
-        layout === "centered" && styles.containerCentered
+        s.outerBar,
+        layout === "centered" && s.outerBarCentered,
+        showVoiceBar && s.outerBarVoiceMargin
       ],
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        reactNative.View,
-        {
-          style: [
-            styles.inputContainer,
-            inputStyle === "rounded" && styles.inputRounded
-          ],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.TextInput,
-              {
-                value,
-                onChangeText: onChange,
-                onPress: onClick,
-                editable: !isInputDisabled,
-                placeholder: getPlaceholder(),
-                placeholderTextColor: "#999",
-                multiline: true,
-                style: [styles.input, isInputDisabled && styles.inputDisabled],
-                returnKeyType: "default",
-                blurOnSubmit: false
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.actionsRow, children: [
-              showVoiceButton && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.voiceButton, children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Pressable,
-                {
-                  onPress: onVoicePress,
-                  disabled: isVoiceButtonDisabled,
-                  style: ({ pressed }) => [
-                    styles.iconButton,
-                    pressed && styles.buttonPressed,
-                    isVoiceButtonDisabled && styles.buttonDisabled
-                  ],
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Mic, { size: 20, color: "#000000" })
-                }
-              ) }),
-              showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.button, children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Pressable,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s.column, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s.inputWrap, showVoiceBar && s.inputWrapRelative], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: inputRef,
+              value,
+              onChangeText: onChange,
+              onPress: onClick,
+              editable: !isInputDisabled,
+              placeholder: getPlaceholder(),
+              placeholderTextColor: "#9CA3AF",
+              multiline: true,
+              style: [
+                s.input,
+                isInputDisabled && s.inputDisabled,
+                showVoiceBar && s.inputHiddenKeepFocus
+              ],
+              returnKeyType: "default",
+              blurOnSubmit: false,
+              onSubmitEditing: handleSubmit
+            }
+          ),
+          showVoiceBar && /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Animated.View,
+            {
+              pointerEvents: "box-none",
+              style: [
+                s.voiceBarContainer,
                 {
-                  onPress: onPause,
-                  style: ({ pressed }) => [
-                    styles.iconButton,
-                    pressed && styles.buttonPressed
-                  ],
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Pause, { size: 16, color: "#FFFFFF" })
+                  opacity: animOpacity,
+                  transform: [{ scale: animScale }]
                 }
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.View,
-                {
-                  style: [
-                    styles.button,
-                    (isInputDisabled || !value.trim()) && styles.buttonDisabled
-                  ],
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    reactNative.Pressable,
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s.voiceBar, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    onPress: handleCancelRecording,
+                    style: ({ pressed }) => [
+                      s.voiceBarCancelBtn,
+                      pressed && s.btnPressed
+                    ],
+                    accessibilityLabel: "Cancel recording",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 20, color: VOICE_THEME_COLOR, strokeWidth: 2.5 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s.voiceBarCenter, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.voiceBarDots, children: Array.from({ length: VOICE_DOT_COUNT }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    VoiceWaveformBar,
                     {
-                      onPress: onSend,
-                      disabled: isInputDisabled || !value.trim(),
-                      style: ({ pressed }) => [
-                        styles.iconButton,
-                        pressed && styles.buttonPressed
-                      ],
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Send, { size: 16, color: "#FFFFFF" })
-                    }
-                  )
-                }
-              )
-            ] })
-          ]
-        }
-      ) })
+                      index: i,
+                      isActive: isUserSpeaking,
+                      barColor: VOICE_THEME_RGBA
+                    },
+                    i
+                  )) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s.voiceBarTimer, children: formatDuration(recordingDurationSeconds) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    onPress: handleConfirmRecording,
+                    style: ({ pressed }) => [
+                      s.voiceBarConfirmBtn,
+                      pressed && s.btnPressed
+                    ],
+                    accessibilityLabel: "Confirm and send recording",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Check, { size: 22, color: VOICE_THEME_COLOR, strokeWidth: 2.5 })
+                  }
+                )
+              ] })
+            }
+          )
+        ] }),
+        !showVoiceBar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.actionsRow, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s.rightActions, children: [
+          showVoiceButton && /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: onVoicePress,
+              disabled: isVoiceButtonDisabled,
+              style: ({ pressed }) => [
+                s.iconBtn,
+                pressed && s.btnPressed,
+                isVoiceButtonDisabled && s.btnDisabled
+              ],
+              accessibilityLabel: "Voice input",
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.iconBtnInner, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Mic, { size: 22, color: "#6B7280", strokeWidth: 2 }) })
+            }
+          ),
+          showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: onPause,
+              style: ({ pressed }) => [
+                s.sendBtn,
+                pressed && s.btnPressed
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.sendBtnInner, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Pause, { size: 18, color: "#FFFFFF" }) })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: onSend,
+              disabled: !canSend,
+              style: ({ pressed }) => [
+                s.sendBtn,
+                !canSend && s.btnDisabled,
+                pressed && s.btnPressed
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.sendBtnInner, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Send, { size: 18, color: "#FFFFFF" }) })
+            }
+          )
+        ] }) })
+      ] })
     }
   );
 }
-var styles = reactNative.StyleSheet.create({
-  container: {
-    padding: 16,
-    width: "100%"
-  },
-  containerCentered: {
-    alignItems: "center"
+var s = reactNative.StyleSheet.create({
+  outerBar: {
+    width: "100%",
+    backgroundColor: "#f1f5f9",
+    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.08)",
+    paddingTop: 12,
+    paddingBottom: reactNative.Platform.OS === "ios" ? 28 : 12,
+    paddingHorizontal: 12,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
   },
-  wrapper: {
-    position: "relative",
+  outerBarCentered: { alignItems: "center" },
+  column: {
+    maxWidth: 672,
     width: "100%",
-    maxWidth: 672
+    alignSelf: "center",
+    gap: 10
   },
-  inputContainer: {
+  actionsRow: {
     flexDirection: "row",
-    alignItems: "flex-end",
-    backgroundColor: "#F5F5F5",
-    borderWidth: 1,
-    borderColor: "#E5E5E5",
-    borderRadius: 12,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginBottom: 10
+  },
+  iconBtn: {
+    width: 36,
+    height: 36,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 18,
     overflow: "hidden"
   },
-  inputRounded: {
-    borderRadius: 24
+  iconBtnInner: {
+    width: 36,
+    height: 36,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.1)",
+    borderRadius: 18
   },
-  input: {
-    flex: 1,
-    minHeight: 48,
-    maxHeight: 200,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 16,
-    paddingRight: 8,
-    fontSize: 14,
-    color: "#000",
-    lineHeight: 20
+  inputWrap: {
+    width: "100%",
+    minHeight: 56,
+    justifyContent: "center",
+    paddingHorizontal: 4
   },
-  inputDisabled: {
-    opacity: 0.5
+  inputWrapRelative: {
+    position: "relative"
   },
-  actionsRow: {
+  inputHiddenKeepFocus: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    opacity: 0,
+    zIndex: 0
+  },
+  input: {
+    minHeight: 56,
+    maxHeight: 140,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    color: "#1F2937",
+    lineHeight: 22
+  },
+  inputDisabled: { opacity: 0.5 },
+  rightActions: {
     flexDirection: "row",
     alignItems: "center",
-    marginRight: 8,
-    marginBottom: 8,
-    gap: 4
+    gap: 6
   },
-  button: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: "#007AFF",
+  sendBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    overflow: "hidden",
     justifyContent: "center",
     alignItems: "center"
   },
-  iconButton: {
-    width: "100%",
-    height: "100%",
+  sendBtnInner: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "#00858d",
     justifyContent: "center",
     alignItems: "center"
   },
-  buttonDisabled: {
-    opacity: 0.5
+  btnDisabled: { opacity: 0.35 },
+  btnPressed: { opacity: 0.7 },
+  outerBarVoiceMargin: {
+    paddingBottom: reactNative.Platform.OS === "ios" ? 36 : 20
+  },
+  // Voice bar (replaces input when recording) – theme #00858d
+  voiceBarContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: "center",
+    zIndex: 1
   },
-  buttonPressed: {
-    opacity: 0.8
+  voiceBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: VOICE_BAR_BG,
+    borderWidth: 1,
+    borderColor: VOICE_BAR_BORDER,
+    borderRadius: 28,
+    minHeight: 56,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 12
   },
-  voiceButton: {
-    width: 32,
-    height: 32,
-    justifyContent: "center",
-    alignItems: "center"
+  voiceBarCancelBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: VOICE_THEME_RGBA_LIGHT,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  voiceBarCenter: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 10,
+    marginLeft: 8
+  },
+  voiceBarDots: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 4
+  },
+  voiceDotBase: {
+    width: 4,
+    borderRadius: 2
+  },
+  voiceDot: {
+    width: 4,
+    height: 6,
+    borderRadius: 2,
+    backgroundColor: VOICE_THEME_RGBA
+  },
+  voiceDotActive: {
+    height: 12,
+    backgroundColor: VOICE_THEME_COLOR
+  },
+  voiceBarTimer: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: VOICE_THEME_COLOR,
+    minWidth: 36,
+    textAlign: "right"
+  },
+  voiceBarConfirmBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#FFFFFF",
+    borderWidth: 1,
+    borderColor: VOICE_THEME_COLOR,
+    alignItems: "center",
+    justifyContent: "center"
   }
 });
-function AnimatedLoader({ size = 16, color = "#007AFF" }) {
-  const rotation = Animated.useSharedValue(0);
-  React4__default.default.useEffect(() => {
-    rotation.value = Animated.withRepeat(
-      Animated.withTiming(360, {
-        duration: 1e3,
-        easing: Animated.Easing.linear
-      }),
+function AnimatedLoader({
+  size = 14,
+  color = "#00858d"
+}) {
+  const rotation = Animated2.useSharedValue(0);
+  React__default.default.useEffect(() => {
+    rotation.value = Animated2.withRepeat(
+      Animated2.withTiming(360, { duration: 1e3, easing: Animated2.Easing.linear }),
       -1
     );
   }, [rotation]);
-  const animatedStyle = Animated.useAnimatedStyle(() => {
-    return {
-      transform: [{ rotate: `${rotation.value}deg` }]
-    };
+  const style = Animated2.useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }]
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Animated2__default.default.View, { style, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Loader2, { size, color }) });
+}
+function ShimmerText({
+  children,
+  style: textStyle
+}) {
+  const progress = Animated2.useSharedValue(0);
+  React__default.default.useEffect(() => {
+    progress.value = Animated2.withRepeat(
+      Animated2.withTiming(1, { duration: 3500, easing: Animated2.Easing.linear }),
+      -1,
+      false
+    );
+  }, [progress]);
+  const animatedStyle = Animated2.useAnimatedStyle(() => {
+    const color = Animated2.interpolateColor(
+      progress.value,
+      [0, 0.35, 0.5, 0.65, 1],
+      ["#9CA3AF", "#9CA3AF", "#00858d", "#9CA3AF", "#9CA3AF"]
+    );
+    return { color };
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: animatedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Loader2, { size, color }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Animated2__default.default.Text, { style: [textStyle, animatedStyle, { fontWeight: "600" }], children });
+}
+function ThoughtProcessLabel({ style }) {
+  const opacity = Animated2.useSharedValue(1);
+  React__default.default.useEffect(() => {
+    opacity.value = Animated2.withRepeat(
+      Animated2.withTiming(0.5, { duration: 800, easing: Animated2.Easing.inOut(Animated2.Easing.ease) }),
+      -1,
+      true
+    );
+  }, [opacity]);
+  const animatedStyle = Animated2.useAnimatedStyle(() => ({ opacity: opacity.value }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Animated2__default.default.Text, { style: [style, animatedStyle], children: "Thought Process" });
+}
+function ThinkingBlock({ text }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const hasContent = typeof text === "string" && text.trim().length > 0;
+  if (!hasContent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: ts.thinkingWrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        onPress: () => setIsOpen((prev) => !prev),
+        style: ts.thinkingToggle,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: isOpen },
+        accessibilityLabel: isOpen ? "Collapse thought process" : "Expand thought process",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { transform: [{ rotate: isOpen ? "180deg" : "0deg" }] }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronDown, { size: 10, color: "rgba(156,163,175,0.5)" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: ts.thinkingToggleText, children: "Thought process" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: ts.thinkingContent, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: ts.thinkingContentText, children: text }) })
+  ] });
 }
 function AgentMessage({
   message,
@@ -250,501 +596,447 @@ function AgentMessage({
   const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
   const isCancelled = message.isCancelled ?? false;
   const currentExecutingStepId = message.currentExecutingStepId;
-  const [isStepsExpanded, setIsStepsExpanded] = React4.useState(
+  const [isStepsExpanded, setIsStepsExpanded] = React.useState(
     isStreaming && hasSteps
   );
-  React4.useEffect(() => {
-    if (isStreaming && hasSteps) {
-      setIsStepsExpanded(true);
-    }
+  const wasStreamingRef = React.useRef(isStreaming);
+  React.useEffect(() => {
+    if (isStreaming && hasSteps) setIsStepsExpanded(true);
+    if (wasStreamingRef.current && !isStreaming) setIsStepsExpanded(false);
+    wasStreamingRef.current = isStreaming;
   }, [isStreaming, hasSteps]);
   const totalElapsedMs = hasSteps ? message.steps.reduce((sum, step) => sum + (step.elapsedMs || 0), 0) : 0;
   const currentMessage = message.currentMessage;
   const rawContent = message.streamingContent || message.content || "";
   const content = rawContent.replace(/\\n/g, "\n");
-  const getStreamingStepsText = (expanded) => {
-    const defaultText = `${expanded ? "Hide" : "View"} progress ({count} ${message.steps.length === 1 ? "step" : "steps"})`;
-    const text = streamingStepsText || defaultText;
-    const prefix = expanded ? "Hide" : "View";
-    return text.replace("{count}", message.steps.length.toString()).replace(/^(View|Hide)/, prefix);
-  };
-  const getCompletedStepsText = (expanded) => {
-    if (completedStepsText) {
-      const result = completedStepsText.replace("{count}", message.steps.length.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
-      return result;
-    }
-    const prefix = expanded ? "Hide" : "View";
-    const stepWord = message.steps.length === 1 ? "step" : "steps";
-    return `${prefix} execution steps (${message.steps.length} ${stepWord})`;
-  };
-  const AnimatedView = animated ? Animated__default.default.View : reactNative.View;
-  const animatedProps = animated ? { entering: Animated.FadeInDown.duration(200), layout: Animated.Layout } : {};
-  const messageContent = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.container, children: [
-    showAvatar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.avatarContainer, children: isStreaming && showStreamingDot ? (
-      // Animated dot indicator while streaming
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.dotContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.dot, styles2.dotPulse] }) })
-    ) : (
-      // Avatar after completion
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.avatar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Bot, { size: 16, color: "#666" }) })
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
-      {
-        style: [
-          styles2.messageContainer,
-          layout === "centered" && styles2.messageContainerCentered
-        ],
-        children: [
-          message.userActionResult && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.badgeContainer, children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.badge, styles2.badgeApproved], children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.CheckCircle2, { size: 12, color: "#15803d" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.badgeApprovedText, children: "OTP Verified" })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles2.badge, styles2.badgeRejected], children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#b91c1c" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.badgeRejectedText, children: "Rejected" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.View,
-            {
-              style: [
-                styles2.bubble,
-                layout === "centered" && styles2.bubbleCentered,
-                hasSteps && styles2.bubbleWithSteps,
-                isStreaming && styles2.bubbleStreaming,
-                isError && styles2.bubbleError
-              ],
-              children: [
-                showAgentName && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.agentName, children: agentName }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.contentContainer, children: isStreaming && !content ? !showAvatar ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.thinkingContainer, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 16, color: "#007AFF" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.thinkingText, children: currentMessage || "Thinking..." })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.thinkingText, children: currentMessage || "Thinking..." }) : isCancelled && !content ? !showAvatar ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.thinkingContainer, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 16, color: "#666" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.thinkingText, children: currentMessage || "The request was stopped." })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.thinkingText, children: currentMessage || "The request was stopped." }) : /* @__PURE__ */ jsxRuntime.jsx(
-                  Markdown__default.default,
-                  {
-                    style: isError ? markdownErrorStyles : markdownStyles,
-                    children: content || (isStreaming ? "Thinking..." : isCancelled ? "The request was stopped." : isError ? "Oops, something went wrong. Please try again." : "")
-                  }
-                ) })
-              ]
-            }
-          ),
-          showExecutionSteps && hasSteps && !isStreaming && !isError && /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.View,
-            {
-              style: [
-                styles2.stepsContainer,
-                layout === "centered" && styles2.stepsContainerCentered
-              ],
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactNative.Pressable,
-                  {
-                    onPress: () => setIsStepsExpanded(!isStepsExpanded),
-                    style: styles2.stepsButton,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getCompletedStepsText(!!isStepsExpanded) }),
-                      isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronUp, { size: 12, color: "#666" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronDown, { size: 12, color: "#666" })
-                    ]
-                  }
-                ),
-                isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(
-                  Animated__default.default.View,
-                  {
-                    entering: animated ? Animated.FadeIn.duration(200) : void 0,
-                    exiting: animated ? Animated.FadeOut.duration(200) : void 0,
-                    style: styles2.stepsList,
-                    children: message.steps.map((step, index) => {
-                      const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        Animated__default.default.View,
-                        {
-                          entering: animated ? Animated.FadeInUp.duration(300).delay(index * 50) : void 0,
-                          layout: animated ? Animated.Layout.springify() : void 0,
-                          style: styles2.stepItem,
-                          children: [
-                            isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#666" }),
-                            step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(
-                              lucideReactNative.Check,
-                              {
-                                size: 12,
-                                color: step.eventType === "USER_ACTION_SUCCESS" ? "#16a34a" : "#007AFF"
-                              }
-                            ),
-                            step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 12, color: "#FF3B30" }),
-                            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.stepContent, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactNative.Text,
-                                {
-                                  style: [
-                                    styles2.stepText,
-                                    step.status === "error" && styles2.stepTextError,
-                                    step.eventType === "USER_ACTION_SUCCESS" && styles2.stepTextSuccess
-                                  ],
-                                  children: step.message
-                                }
-                              ),
-                              step.elapsedMs && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles2.stepTime, children: [
-                                "(",
-                                (step.elapsedMs / 1e3).toFixed(1),
-                                "s)"
-                              ] })
-                            ] })
-                          ]
-                        },
-                        step.id
-                      );
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          hasSteps && isStreaming && /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.View,
-            {
-              style: [
-                styles2.stepsContainer,
-                styles2.stepsContainerStreaming,
-                layout === "centered" && styles2.stepsContainerCentered
-              ],
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactNative.Pressable,
-                  {
-                    onPress: () => setIsStepsExpanded(!isStepsExpanded),
-                    style: styles2.stepsButton,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.stepsButtonText, children: getStreamingStepsText(!!isStepsExpanded) }),
-                      isStepsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronUp, { size: 12, color: "#666" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronDown, { size: 12, color: "#666" })
-                    ]
-                  }
-                ),
-                isStepsExpanded && /* @__PURE__ */ jsxRuntime.jsx(
-                  Animated__default.default.View,
-                  {
-                    entering: animated ? Animated.FadeIn.duration(200) : void 0,
-                    exiting: animated ? Animated.FadeOut.duration(200) : void 0,
-                    style: styles2.stepsList,
-                    children: message.steps.map((step, index) => {
-                      const isCurrentlyExecuting = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        Animated__default.default.View,
-                        {
-                          entering: animated ? Animated.FadeInUp.duration(300).delay(index * 50) : void 0,
-                          layout: animated ? Animated.Layout.springify() : void 0,
-                          style: styles2.stepItem,
-                          children: [
-                            isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "pending" && isCancelled && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.XCircle, { size: 12, color: "#666" }),
-                            step.status === "pending" && !isCancelled && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "in_progress" && !isCurrentlyExecuting && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 12, color: "#007AFF" }),
-                            step.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(
-                              lucideReactNative.Check,
-                              {
-                                size: 12,
-                                color: step.eventType === "USER_ACTION_SUCCESS" ? "#16a34a" : "#007AFF"
-                              }
-                            ),
-                            step.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 12, color: "#FF3B30" }),
-                            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.stepContent, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactNative.Text,
-                                {
-                                  style: [
-                                    styles2.stepText,
-                                    step.status === "error" && styles2.stepTextError,
-                                    step.eventType === "USER_ACTION_SUCCESS" && styles2.stepTextSuccess
-                                  ],
-                                  children: step.message
-                                }
-                              ),
-                              step.elapsedMs && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles2.stepTime, children: [
-                                "(",
-                                (step.elapsedMs / 1e3).toFixed(1),
-                                "s)"
-                              ] })
-                            ] })
-                          ]
-                        },
-                        step.id
-                      );
-                    })
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
+  const activeThinkingText = message.activeThinkingText;
+  const allThinkingText = message.allThinkingText;
+  const currentStep = React.useMemo(
+    () => message.steps?.find(
+      (s9) => s9.id === currentExecutingStepId && s9.status === "in_progress"
     ),
-    hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        onPress: () => onExecutionTraceClick({
-          message,
-          tracingData: message.tracingData,
-          executionId: message.executionId
-        }),
-        style: [
-          styles2.traceButton,
-          message.userActionResult ? styles2.traceButtonWithBadge : void 0
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Binoculars, { size: 16, color: "#007AFF" })
+    [message.steps, currentExecutingStepId]
+  );
+  const getStepsLabel = React.useCallback(
+    (streaming) => {
+      const count = message.steps.length;
+      const stepWord = count === 1 ? "step" : "steps";
+      if (streaming) {
+        if (streamingStepsText)
+          return streamingStepsText.replace("{count}", count.toString());
+        return `${count} ${stepWord} in progress`;
+      }
+      if (completedStepsText) {
+        return completedStepsText.replace("{count}", count.toString()).replace("{time}", (totalElapsedMs / 1e3).toFixed(1));
       }
-    )
+      return `${count} ${stepWord} completed`;
+    },
+    [message.steps, streamingStepsText, completedStepsText, totalElapsedMs]
+  );
+  const renderStepIcon = (step, isCurrentlyExecuting) => {
+    const W = s2.iconWrap;
+    if (isCurrentlyExecuting)
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 13, color: "#00858d" }) });
+    if (step.status === "pending" && isCancelled)
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.dotMuted }) });
+    if (step.status === "pending" || step.status === "in_progress")
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 13, color: "rgba(0,133,141,0.4)" }) });
+    if (step.status === "completed")
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReactNative.Check,
+        {
+          size: 13,
+          color: step.eventType === "USER_ACTION_SUCCESS" ? "#10B981" : "rgba(0,133,141,0.7)"
+        }
+      ) });
+    if (step.status === "error")
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 13, color: "#EF4444" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: W, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.dotMuted }) });
+  };
+  const showSteps = showExecutionSteps && hasSteps && !isStreaming && !isError;
+  const handleStepsToggle = React.useCallback(() => {
+    setIsStepsExpanded((prev) => !prev);
+  }, []);
+  const AnimatedView = animated ? Animated2__default.default.View : reactNative.View;
+  const animatedProps = animated ? { entering: Animated2.FadeInDown.duration(200), layout: Animated2.Layout } : {};
+  const messageContent = /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.outerWrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.row, children: [
+      showAvatar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.avatarWrap, children: isStreaming && showStreamingDot ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.dotContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.streamDot }) }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.avatar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Sparkles, { size: 14, color: "#9CA3AF" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.View,
+        {
+          style: [s2.bubbleCol, layout === "centered" && s2.bubbleColCentered],
+          children: [
+            message.userActionResult && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.badgeWrap, children: message.userActionResult === "approved" ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s2.badge, s2.badgeApproved], children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Check, { size: 10, color: "#15803D" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.badgeApprovedText, children: "Verified" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s2.badge, s2.badgeRejected], children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 10, color: "#B91C1C" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.badgeRejectedText, children: "Rejected" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.View,
+              {
+                style: [
+                  s2.bubble,
+                  layout === "centered" ? s2.bubbleCentered : s2.bubbleDefault,
+                  isError && s2.bubbleError
+                ],
+                children: [
+                  showAgentName && (isStreaming && !content ? /* @__PURE__ */ jsxRuntime.jsx(ThoughtProcessLabel, { style: s2.agentName }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.agentName, children: agentName })),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: isStreaming && !content ? (
+                    // One active item at a time, by event order: thinking stream OR current step with loading (same bullet UI as dropdown)
+                    activeThinkingText ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.stepRow, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.iconWrap, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 13, color: "rgba(0,133,141,0.7)" }) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s2.bubbleBodyText, s2.thinkingTextFlex], children: activeThinkingText })
+                    ] }) : currentStep ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.stepRow, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: 1 }, children: renderStepIcon(currentStep, true) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ShimmerText, { style: s2.bubbleBodyText, children: currentStep.message })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.thinkingRow, children: [
+                      !showAvatar && /* @__PURE__ */ jsxRuntime.jsx(AnimatedLoader, { size: 15, color: "rgba(0,133,141,0.7)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.bubbleBodyText, children: currentMessage || "Thinking..." })
+                    ] })
+                  ) : isCancelled && !content ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.thinkingRow, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.X, { size: 15, color: "#9CA3AF" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [s2.bubbleBodyText, { fontStyle: "italic" }], children: currentMessage || "Request was stopped." })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    Markdown__default.default,
+                    {
+                      style: isError ? markdownErrorStyles : markdownStyles,
+                      children: content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : isError ? "Something went wrong. Please try again." : "")
+                    }
+                  ) })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          onPress: () => onExecutionTraceClick({
+            message,
+            tracingData: message.tracingData,
+            executionId: message.executionId
+          }),
+          style: [s2.traceBtn, message.userActionResult && s2.traceBtnOffset],
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Binoculars, { size: 15, color: "#9CA3AF" })
+        }
+      )
+    ] }),
+    showSteps && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s2.stepsOuter, showAvatar && s2.stepsIndented], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { onPress: handleStepsToggle, style: s2.stepsToggle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              transform: [{ rotate: isStepsExpanded ? "90deg" : "0deg" }]
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronRight, { size: 12, color: "rgba(156,163,175,0.6)" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.stepsToggleText, children: getStepsLabel(false) })
+      ] }),
+      isStepsExpanded && hasSteps && /* @__PURE__ */ jsxRuntime.jsxs(
+        Animated2__default.default.View,
+        {
+          entering: animated ? Animated2.FadeIn.duration(200) : void 0,
+          exiting: animated ? Animated2.FadeOut.duration(150) : void 0,
+          children: [
+            !isStreaming && allThinkingText?.trim() ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlock, { text: allThinkingText }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.stepsList, children: message.steps.map((step) => {
+              const isExec = step.id === currentExecutingStepId && step.status === "in_progress" && isStreaming && !isCancelled;
+              const hasTime = step.elapsedMs != null && step.elapsedMs > 0;
+              return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.stepItem, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.stepRow, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: 1 }, children: renderStepIcon(step, isExec) }),
+                  isExec ? /* @__PURE__ */ jsxRuntime.jsx(ShimmerText, { style: s2.stepText, children: step.message }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      style: [
+                        s2.stepText,
+                        step.status === "completed" && s2.stepTextMuted,
+                        step.status === "error" && s2.stepTextError,
+                        step.eventType === "USER_ACTION_SUCCESS" && s2.stepTextSuccess,
+                        step.status === "pending" && s2.stepTextPending,
+                        step.status === "in_progress" && !isExec && s2.stepTextInProgress
+                      ],
+                      children: step.message
+                    }
+                  )
+                ] }),
+                hasTime && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s2.timeBadgeWrap, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.timeBadge, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Clock, { size: 8, color: "rgba(156,163,175,0.6)" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: s2.timeBadgeText, children: [
+                    (step.elapsedMs / 1e3).toFixed(1),
+                    "s"
+                  ] })
+                ] }) })
+              ] }, step.id);
+            }) })
+          ]
+        }
+      )
+    ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(AnimatedView, { ...animatedProps, children: messageContent });
 }
-var styles2 = reactNative.StyleSheet.create({
-  container: {
+var s2 = reactNative.StyleSheet.create({
+  outerWrap: { width: "100%" },
+  row: {
     flexDirection: "row",
-    justifyContent: "flex-start",
     alignItems: "flex-start",
-    width: "100%",
-    gap: 16
-  },
-  avatarContainer: {
-    width: 32,
-    height: 32,
-    marginTop: 2
+    gap: 10,
+    width: "100%"
   },
+  // Avatar
+  avatarWrap: { width: 28, height: 28, marginTop: 2 },
   dotContainer: {
-    width: 32,
-    height: 32,
+    width: 28,
+    height: 28,
     justifyContent: "center",
     alignItems: "center"
   },
-  dot: {
+  streamDot: {
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: "#007AFF"
-  },
-  dotPulse: {
+    backgroundColor: "#00858d",
     opacity: 0.75
   },
   avatar: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: "#F5F5F5",
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "rgba(0,0,0,0.03)",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0,0,0,0.08)",
     justifyContent: "center",
     alignItems: "center"
   },
-  messageContainer: {
-    minWidth: 0,
-    flex: 1,
-    maxWidth: "80%"
+  // Bubble column
+  bubbleCol: { minWidth: 0, maxWidth: "80%", flexShrink: 1 },
+  bubbleColCentered: { maxWidth: "85%" },
+  // Badge
+  badgeWrap: { marginBottom: 6 },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 10,
+    alignSelf: "flex-start"
   },
-  messageContainerCentered: {
-    maxWidth: "85%"
+  badgeApproved: {
+    backgroundColor: "#DCFCE7",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(34,197,94,0.3)"
+  },
+  badgeApprovedText: { fontSize: 14, lineHeight: 21, fontWeight: "500", color: "#15803D" },
+  badgeRejected: {
+    backgroundColor: "#FEE2E2",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(239,68,68,0.3)"
   },
+  badgeRejectedText: { fontSize: 14, lineHeight: 21, fontWeight: "500", color: "#B91C1C" },
+  // Bubble
   bubble: {
     overflow: "hidden",
     width: "100%",
-    padding: 12,
-    backgroundColor: "#F5F5F5",
-    borderRadius: 8
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  bubbleDefault: {
+    backgroundColor: "rgba(0,0,0,0.04)",
+    borderRadius: 16,
+    borderTopLeftRadius: 4
   },
   bubbleCentered: {
     backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#E5E5E5",
+    borderColor: "rgba(0,0,0,0.08)",
     borderRadius: 16,
     borderTopLeftRadius: 4
   },
-  bubbleWithSteps: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  bubbleStreaming: {
-    borderColor: "#D1D5DB"
-  },
   bubbleError: {
-    backgroundColor: "#FEE",
-    borderColor: "#FCC"
+    backgroundColor: "rgba(239,68,68,0.05)",
+    borderWidth: 1,
+    borderColor: "rgba(239,68,68,0.15)"
   },
+  // Agent name (text-sm to match query)
   agentName: {
-    fontSize: 12,
-    fontWeight: "600",
-    opacity: 0.6,
-    marginBottom: 6
-  },
-  contentContainer: {
     fontSize: 14,
-    lineHeight: 22
-  },
-  thinkingContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
+    lineHeight: 21,
+    fontWeight: "600",
+    color: "rgba(0,0,0,0.35)",
+    marginBottom: 2
   },
-  thinkingText: {
+  // All body text inside assistant bubble: same size as query (text-sm = 14px)
+  bubbleBodyText: {
     fontSize: 14,
-    color: "#666"
-  },
-  stepsContainer: {
-    overflow: "hidden",
-    backgroundColor: "#F5F5F5",
-    borderTopWidth: 1,
-    borderTopColor: "rgba(0,0,0,0.1)",
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 8
-  },
-  stepsContainerCentered: {
-    backgroundColor: "#FFFFFF",
-    borderWidth: 1,
-    borderTopWidth: 0,
-    borderColor: "#E5E5E5",
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16
+    lineHeight: 21,
+    color: "#9CA3AF",
+    flex: 1,
+    minWidth: 0
   },
-  stepsContainerStreaming: {
-    borderTopColor: "#D1D5DB"
+  // Thinking state
+  thinkingRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+  thinkingText: { fontSize: 14, lineHeight: 21, color: "#9CA3AF" },
+  thinkingTextFlex: { flex: 1, minWidth: 0 },
+  // Trace button
+  traceBtn: {
+    padding: 7,
+    backgroundColor: "rgba(0,0,0,0.02)",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0,0,0,0.08)",
+    borderRadius: 8,
+    marginTop: 2
   },
-  stepsButton: {
-    width: "100%",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    flexDirection: "row",
-    justifyContent: "space-between",
+  traceBtnOffset: { marginTop: 30 },
+  // Steps section
+  stepsOuter: { marginTop: 6 },
+  stepsIndented: { marginLeft: 38 },
+  // 28 avatar + 10 gap
+  // Toggle
+  stepsToggle: { flexDirection: "row", alignItems: "center", gap: 5 },
+  stepsToggleText: { fontSize: 11, color: "rgba(156,163,175,0.65)" },
+  // Steps list
+  stepsList: { marginTop: 6 },
+  stepItem: { marginBottom: 6 },
+  stepRow: { flexDirection: "row", alignItems: "flex-start", gap: 5 },
+  iconWrap: {
+    width: 16,
+    height: 16,
+    justifyContent: "center",
     alignItems: "center"
   },
-  stepsButtonText: {
-    fontSize: 12,
-    color: "#666"
-  },
-  stepsList: {
-    paddingHorizontal: 16,
-    paddingBottom: 12,
-    paddingTop: 8,
-    gap: 8,
-    backgroundColor: "rgba(0,0,0,0.02)"
-  },
-  stepItem: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 8
-  },
-  stepContent: {
-    flex: 1,
-    minWidth: 0
+  dotMuted: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "rgba(0,0,0,0.12)"
   },
   stepText: {
     fontSize: 12,
-    color: "#666",
-    flexWrap: "wrap"
-  },
-  stepTextError: {
-    color: "#FF3B30"
-  },
-  stepTextSuccess: {
-    color: "#16a34a"
-  },
-  stepTime: {
-    fontSize: 10,
-    opacity: 0.5,
-    marginLeft: 6
-  },
-  traceButton: {
-    marginTop: 2,
-    padding: 8,
-    backgroundColor: "rgba(255,255,255,0.05)",
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.2)",
-    borderRadius: 8
-  },
-  traceButtonWithBadge: {
-    marginTop: 32
-  },
-  badgeContainer: {
-    marginBottom: 8
-  },
-  badge: {
+    lineHeight: 17,
+    flex: 1,
+    minWidth: 0,
+    color: "#374151"
+  },
+  stepTextMuted: { color: "#9CA3AF" },
+  stepTextError: { color: "#EF4444" },
+  stepTextSuccess: { color: "#10B981" },
+  stepTextPending: { color: "rgba(156,163,175,0.4)" },
+  stepTextInProgress: { color: "rgba(156,163,175,0.6)" },
+  // Time badge — aligned with text (pl = 16 icon + 5 gap = 21)
+  timeBadgeWrap: { paddingLeft: 21, marginTop: 3 },
+  timeBadge: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
+    gap: 3,
+    backgroundColor: "rgba(0,0,0,0.03)",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0,0,0,0.06)",
+    borderRadius: 4,
+    paddingHorizontal: 5,
+    paddingVertical: 2,
     alignSelf: "flex-start"
   },
-  badgeApproved: {
-    backgroundColor: "#dcfce7"
-  },
-  badgeApprovedText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: "#15803d"
+  timeBadgeText: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    color: "rgba(156,163,175,0.6)"
+  }
+});
+var ts = reactNative.StyleSheet.create({
+  thinkingWrap: { marginTop: 4, marginBottom: 4 },
+  thinkingToggle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3
   },
-  badgeRejected: {
-    backgroundColor: "#fee2e2"
+  thinkingToggleText: {
+    fontSize: 10,
+    color: "rgba(156,163,175,0.5)"
   },
-  badgeRejectedText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: "#b91c1c"
+  thinkingContent: {
+    marginTop: 4,
+    backgroundColor: "rgba(0,0,0,0.03)",
+    borderRadius: 6,
+    padding: 8
+  },
+  thinkingContentText: {
+    fontSize: 11,
+    lineHeight: 16,
+    color: "rgba(107,114,128,0.8)"
   }
 });
 var markdownStyles = {
-  body: {
-    fontSize: 14,
-    lineHeight: 22,
-    color: "#000"
-  },
-  paragraph: {
-    marginBottom: 12,
-    fontSize: 14,
-    lineHeight: 22
-  },
-  strong: {
-    fontWeight: "600"
-  },
-  em: {
-    fontStyle: "italic"
-  },
+  body: { fontSize: 14, lineHeight: 21, color: "#1F2937" },
+  paragraph: { marginBottom: 8, fontSize: 14, lineHeight: 21 },
+  strong: { fontWeight: "600" },
+  em: { fontStyle: "italic" },
   code_inline: {
-    backgroundColor: "#F5F5F5",
-    paddingHorizontal: 6,
+    backgroundColor: "rgba(0,0,0,0.04)",
+    paddingHorizontal: 5,
     paddingVertical: 2,
     borderRadius: 4,
     fontSize: 12,
     fontFamily: "monospace"
   },
   code_block: {
-    backgroundColor: "#F5F5F5",
+    backgroundColor: "rgba(0,0,0,0.04)",
     padding: 12,
     borderRadius: 8,
     fontSize: 12,
     fontFamily: "monospace",
     marginVertical: 8
   },
-  list_item: {
-    fontSize: 14,
-    lineHeight: 22
+  list_item: { fontSize: 14, lineHeight: 21 },
+  bullet_list: { marginBottom: 8 },
+  ordered_list: { marginBottom: 8 },
+  heading1: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 6,
+    marginTop: 12,
+    color: "#1F2937"
   },
-  bullet_list: {
-    marginBottom: 12
+  heading2: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 6,
+    marginTop: 10,
+    color: "#1F2937"
   },
-  ordered_list: {
-    marginBottom: 12
-  }
+  heading3: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 4,
+    marginTop: 8,
+    color: "#1F2937"
+  },
+  blockquote: {
+    borderLeftWidth: 3,
+    borderLeftColor: "rgba(0,0,0,0.1)",
+    paddingLeft: 12,
+    marginVertical: 8,
+    fontStyle: "italic",
+    color: "#6B7280"
+  },
+  hr: {
+    marginVertical: 16,
+    borderBottomWidth: reactNative.StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(0,0,0,0.1)"
+  },
+  link: { color: "#007AFF", textDecorationLine: "underline" }
 };
 var markdownErrorStyles = {
   ...markdownStyles,
-  body: {
-    ...markdownStyles.body,
-    color: "#FF3B30"
-  },
-  paragraph: {
-    ...markdownStyles.paragraph,
-    color: "#FF3B30"
-  }
+  body: { ...markdownStyles.body, color: "#EF4444" },
+  paragraph: { ...markdownStyles.paragraph, color: "#EF4444" }
 };
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -781,54 +1073,44 @@ function UserMessage({
   animated = false,
   showAvatar = false
 }) {
-  const AnimatedView = animated ? Animated__default.default.View : reactNative.View;
-  const animatedProps = animated ? { entering: Animated.FadeInDown.duration(300) } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedView, { ...animatedProps, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.messageContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.bubble, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.text, children: message.content }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.timestamp, children: formatDate(message.timestamp) })
+  const AnimatedView = animated ? Animated2__default.default.View : reactNative.View;
+  const animatedProps = animated ? { entering: Animated2.FadeInDown.duration(250) } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedView, { ...animatedProps, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s3.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s3.messageCol, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s3.bubble, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s3.text, children: message.content }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s3.timestamp, children: formatDate(message.timestamp) })
     ] }),
-    showAvatar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.avatarContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.avatar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.User, { size: 16, color: "#007AFF" }) }) })
+    showAvatar && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s3.avatarWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s3.avatar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.User, { size: 13, color: "#FFFFFF" }) }) })
   ] }) });
 }
-var styles3 = reactNative.StyleSheet.create({
+var s3 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     justifyContent: "flex-end",
     width: "100%",
-    gap: 16
+    gap: 10
   },
-  messageContainer: {
-    maxWidth: "85%",
+  messageCol: {
+    maxWidth: "80%",
     minWidth: 0,
     flexDirection: "column",
     alignItems: "flex-end"
   },
-  bubble: {
-    borderRadius: 8,
-    padding: 12,
-    backgroundColor: "#007AFF"
-  },
-  text: {
-    fontSize: 14,
-    color: "#FFFFFF",
-    lineHeight: 20
-  },
-  timestamp: {
-    fontSize: 10,
-    marginTop: 4,
-    color: "#666"
-  },
-  avatarContainer: {
-    width: 32,
-    height: 32,
-    marginTop: 2
-  },
-  avatar: {
-    width: 32,
-    height: 32,
+  bubble: {
     borderRadius: 16,
-    backgroundColor: "rgba(0, 122, 255, 0.1)",
+    borderBottomRightRadius: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    backgroundColor: "#00858d"
+  },
+  text: { fontSize: 14, color: "#FFFFFF", lineHeight: 20 },
+  timestamp: { fontSize: 10, marginTop: 3, color: "rgba(0,0,0,0.25)" },
+  avatarWrap: { width: 28, height: 28, marginTop: 2 },
+  avatar: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#00858d",
     justifyContent: "center",
     alignItems: "center"
   }
@@ -880,98 +1162,62 @@ function MessageRow({
 function MessageRowSkeleton({
   isRightAligned = false
 }) {
-  const opacity = Animated.useSharedValue(0.3);
-  React4.useEffect(() => {
-    opacity.value = Animated.withRepeat(
-      Animated.withTiming(1, { duration: 1e3 }),
-      -1,
-      true
-    );
+  const opacity = Animated2.useSharedValue(0.3);
+  React.useEffect(() => {
+    opacity.value = Animated2.withRepeat(Animated2.withTiming(0.8, { duration: 1200 }), -1, true);
   }, []);
-  const animatedStyle = Animated.useAnimatedStyle(() => ({
-    opacity: opacity.value
-  }));
+  const animatedStyle = Animated2.useAnimatedStyle(() => ({ opacity: opacity.value }));
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
-      style: [
-        styles4.container,
-        isRightAligned ? styles4.containerRight : styles4.containerLeft
-      ],
+      style: [s4.container, isRightAligned ? s4.containerRight : s4.containerLeft],
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         reactNative.View,
         {
-          style: [
-            styles4.content,
-            isRightAligned ? styles4.contentRight : styles4.contentLeft
-          ],
+          style: [s4.content, isRightAligned ? s4.contentRight : s4.contentLeft],
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.View,
+              Animated2__default.default.View,
               {
                 style: [
-                  styles4.bubble,
-                  isRightAligned ? styles4.bubbleRight : styles4.bubbleLeft
+                  s4.bubble,
+                  isRightAligned ? s4.bubbleRight : s4.bubbleLeft,
+                  animatedStyle
                 ],
-                children: /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: animatedStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.skeletonContainer, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.skeletonLine, { width: "75%" }] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.skeletonLine, { width: "100%" }] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.skeletonLine, { width: "85%" }] })
-                ] }) })
+                children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s4.skeletonWrap, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s4.line, { width: "70%" }] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s4.line, { width: "100%" }] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s4.line, { width: "80%" }] })
+                ] })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: [styles4.timestamp, animatedStyle] })
+            /* @__PURE__ */ jsxRuntime.jsx(Animated2__default.default.View, { style: [s4.timestamp, animatedStyle] })
           ]
         }
       )
     }
   );
 }
-var styles4 = reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    width: "100%"
-  },
-  containerLeft: {
-    justifyContent: "flex-start"
-  },
-  containerRight: {
-    justifyContent: "flex-end"
-  },
-  content: {
-    maxWidth: "80%",
-    width: "100%"
-  },
-  contentLeft: {
-    alignItems: "flex-start"
-  },
-  contentRight: {
-    alignItems: "flex-end"
-  },
-  bubble: {
-    borderRadius: 8,
-    padding: 12,
-    width: "100%"
-  },
-  bubbleLeft: {
-    backgroundColor: "#F5F5F5"
-  },
+var s4 = reactNative.StyleSheet.create({
+  container: { flexDirection: "row", width: "100%" },
+  containerLeft: { justifyContent: "flex-start" },
+  containerRight: { justifyContent: "flex-end" },
+  content: { maxWidth: "75%", width: "100%" },
+  contentLeft: { alignItems: "flex-start" },
+  contentRight: { alignItems: "flex-end" },
+  bubble: { borderRadius: 16, padding: 14, width: "100%" },
+  bubbleLeft: { backgroundColor: "rgba(0,0,0,0.04)", borderTopLeftRadius: 4 },
   bubbleRight: {
-    backgroundColor: "rgba(0, 122, 255, 0.2)"
-  },
-  skeletonContainer: {
-    gap: 8
-  },
-  skeletonLine: {
-    height: 12,
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: 4
+    backgroundColor: "rgba(0,122,255,0.08)",
+    borderBottomRightRadius: 4
   },
+  skeletonWrap: { gap: 8 },
+  line: { height: 10, backgroundColor: "rgba(0,0,0,0.08)", borderRadius: 5 },
   timestamp: {
-    height: 8,
-    width: 64,
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: 4,
+    height: 6,
+    width: 50,
+    backgroundColor: "rgba(0,0,0,0.06)",
+    borderRadius: 3,
     marginTop: 4
   }
 });
@@ -996,8 +1242,8 @@ function MessageList({
   onExecutionTraceClick,
   className
 }) {
-  const flatListRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const flatListRef = React.useRef(null);
+  React.useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
         flatListRef.current?.scrollToEnd({ animated: true });
@@ -1005,7 +1251,7 @@ function MessageList({
     }
   }, [messages.length]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.container, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.content, children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.container, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.skeletonContent, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       MessageRowSkeleton,
       {
         isRightAligned: index % 3 === 0
@@ -1014,26 +1260,17 @@ function MessageList({
     )) }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.emptyContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Animated__default.default.View,
-      {
-        entering: Animated.FadeIn.duration(500),
-        style: styles5.emptyContent,
-        children: [
-          showEmptyStateIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Bot, { size: 24, color: "#999" }) }),
-          emptyStateText.split("\n").map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
-            {
-              style: [
-                index === 0 ? layout === "centered" ? styles5.emptyTitle : styles5.emptyTitleDefault : styles5.emptySubtitle
-              ],
-              children: line
-            },
-            index
-          ))
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.emptyContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(Animated2__default.default.View, { entering: Animated2.FadeIn.duration(500), style: s5.emptyContent, children: [
+      showEmptyStateIcon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.MessageCircle, { size: 24, color: "rgba(156,163,175,0.7)" }) }),
+      emptyStateText.split("\n").map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: index === 0 ? s5.emptyTitle : s5.emptySubtitle,
+          children: line
+        },
+        index
+      ))
+    ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.FlatList,
@@ -1060,341 +1297,56 @@ function MessageList({
         }
       ),
       contentContainerStyle: [
-        styles5.listContent,
-        layout === "centered" && styles5.listContentCentered
+        s5.listContent,
+        layout === "centered" && s5.listContentCentered
       ],
-      showsVerticalScrollIndicator: true
+      showsVerticalScrollIndicator: false
     }
   );
 }
-var styles5 = reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    padding: 16,
-    gap: 16
-  },
+var s5 = reactNative.StyleSheet.create({
+  container: { flex: 1 },
+  skeletonContent: { padding: 16, gap: 16 },
   emptyContainer: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 16
-  },
-  emptyContent: {
-    alignItems: "center",
-    gap: 16
+    padding: 24
   },
+  emptyContent: { alignItems: "center", gap: 10, maxWidth: 280 },
   iconContainer: {
-    width: 48,
-    height: 48,
+    width: 56,
+    height: 56,
+    borderRadius: 16,
+    backgroundColor: "rgba(0,0,0,0.03)",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0,0,0,0.06)",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    marginBottom: 4
   },
   emptyTitle: {
-    fontSize: 24,
-    fontWeight: "600",
-    color: "#007AFF",
-    textAlign: "center"
-  },
-  emptyTitleDefault: {
-    fontSize: 24,
+    fontSize: 20,
     fontWeight: "600",
-    color: "#000",
+    color: "#1F2937",
     textAlign: "center"
   },
   emptySubtitle: {
     fontSize: 14,
-    color: "#999",
-    textAlign: "center"
-  },
-  listContent: {
-    padding: 16,
-    gap: 16
-  },
-  listContentCentered: {
-    maxWidth: 672,
-    alignSelf: "center",
-    width: "100%"
-  }
-});
-var WaveformBar = React4.memo(
-  ({
-    delay,
-    isActive,
-    color
-  }) => {
-    const height = React4.useRef(new reactNative.Animated.Value(6)).current;
-    React4.useEffect(() => {
-      if (isActive) {
-        const animation = reactNative.Animated.loop(
-          reactNative.Animated.sequence([
-            reactNative.Animated.timing(height, {
-              toValue: 14 + Math.random() * 10,
-              duration: 300 + Math.random() * 50,
-              delay,
-              easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-              useNativeDriver: false
-            }),
-            reactNative.Animated.timing(height, {
-              toValue: 6 + Math.random() * 4,
-              duration: 300 + Math.random() * 50,
-              easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-              useNativeDriver: false
-            })
-          ])
-        );
-        animation.start();
-        return () => animation.stop();
-      } else {
-        reactNative.Animated.timing(height, {
-          toValue: 6,
-          duration: 300,
-          useNativeDriver: false
-        }).start();
-      }
-    }, [isActive, delay, height]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Animated.View,
-      {
-        style: [styles6.waveformBar, { height, backgroundColor: color }]
-      }
-    );
-  }
-);
-WaveformBar.displayName = "WaveformBar";
-var RollingText = React4.memo(({ text, color }) => {
-  const [lines, setLines] = React4__default.default.useState([]);
-  const [currentLineIndex, setCurrentLineIndex] = React4__default.default.useState(0);
-  const translateY = React4.useRef(new reactNative.Animated.Value(0)).current;
-  const opacity = React4.useRef(new reactNative.Animated.Value(1)).current;
-  React4.useEffect(() => {
-    if (!text) {
-      setLines([]);
-      setCurrentLineIndex(0);
-      return;
-    }
-    const words = text.split(" ");
-    const newLines = [];
-    let currentLine = "";
-    words.forEach((word) => {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      if (testLine.length > 35 && currentLine) {
-        newLines.push(currentLine);
-        currentLine = word;
-      } else {
-        currentLine = testLine;
-      }
-    });
-    if (currentLine) {
-      newLines.push(currentLine);
-    }
-    setLines(newLines);
-    if (newLines.length > 0) {
-      const newIndex = newLines.length - 1;
-      if (newIndex > currentLineIndex) {
-        reactNative.Animated.sequence([
-          reactNative.Animated.parallel([
-            reactNative.Animated.timing(translateY, {
-              toValue: -20,
-              duration: 150,
-              useNativeDriver: true
-            }),
-            reactNative.Animated.timing(opacity, {
-              toValue: 0,
-              duration: 150,
-              useNativeDriver: true
-            })
-          ]),
-          reactNative.Animated.timing(translateY, {
-            toValue: 20,
-            duration: 0,
-            useNativeDriver: true
-          }),
-          reactNative.Animated.parallel([
-            reactNative.Animated.timing(translateY, {
-              toValue: 0,
-              duration: 200,
-              easing: reactNative.Easing.out(reactNative.Easing.ease),
-              useNativeDriver: true
-            }),
-            reactNative.Animated.timing(opacity, {
-              toValue: 1,
-              duration: 200,
-              useNativeDriver: true
-            })
-          ])
-        ]).start();
-        setCurrentLineIndex(newIndex);
-      }
-    }
-  }, [text, currentLineIndex, translateY, opacity]);
-  const currentText = lines[currentLineIndex] || text;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Animated.Text,
-    {
-      style: [
-        styles6.transcribedText,
-        {
-          color,
-          opacity,
-          transform: [{ translateY }]
-        }
-      ],
-      numberOfLines: 1,
-      children: currentText
-    }
-  );
-});
-RollingText.displayName = "RollingText";
-var VoiceOverlay = React4.memo(
-  ({
-    visible,
-    voiceState,
-    transcribedText,
-    onStopRecording
-  }) => {
-    const panelHeight = React4.useRef(new reactNative.Animated.Value(0)).current;
-    const contentOpacity = React4.useRef(new reactNative.Animated.Value(0)).current;
-    const isListening = voiceState === "listening";
-    const PANEL_CONTENT_HEIGHT = 180;
-    const bgColor = "rgba(250, 250, 252, 0.98)";
-    const textColor = "#000000";
-    const mutedColor = "#007AFF";
-    const primaryColor = "#007AFF";
-    React4.useEffect(() => {
-      if (visible) {
-        reactNative.Animated.sequence([
-          reactNative.Animated.timing(panelHeight, {
-            toValue: PANEL_CONTENT_HEIGHT,
-            duration: 300,
-            easing: reactNative.Easing.out(reactNative.Easing.cubic),
-            useNativeDriver: false
-          }),
-          reactNative.Animated.timing(contentOpacity, {
-            toValue: 1,
-            duration: 150,
-            useNativeDriver: true
-          })
-        ]).start();
-      } else {
-        reactNative.Animated.parallel([
-          reactNative.Animated.timing(contentOpacity, {
-            toValue: 0,
-            duration: 100,
-            useNativeDriver: true
-          }),
-          reactNative.Animated.timing(panelHeight, {
-            toValue: 0,
-            duration: 220,
-            easing: reactNative.Easing.in(reactNative.Easing.ease),
-            useNativeDriver: false
-          })
-        ]).start();
-      }
-    }, [visible, panelHeight, contentOpacity]);
-    if (!visible && panelHeight._value === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Animated.View,
-      {
-        style: [
-          styles6.panel,
-          {
-            height: panelHeight,
-            backgroundColor: bgColor
-          }
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Animated.View, { style: [styles6.content, { opacity: contentOpacity }], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.textContainer, children: transcribedText.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(RollingText, { text: transcribedText, color: textColor }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.placeholderText, { color: mutedColor }], children: "Listening..." }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.controlsContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.waveformContainer, children: [0, 1, 2, 3, 4].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
-              WaveformBar,
-              {
-                delay: index * 20,
-                isActive: isListening,
-                color: primaryColor
-              },
-              index
-            )) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onStopRecording, style: styles6.micButton, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Mic, { size: 24, color: primaryColor, strokeWidth: 2 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hintText, { color: mutedColor }], children: "Tap to stop" })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-VoiceOverlay.displayName = "VoiceOverlay";
-var styles6 = reactNative.StyleSheet.create({
-  panel: {
-    overflow: "hidden",
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    borderWidth: 1,
-    borderColor: "#E5E5E5"
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-    paddingTop: 20
-  },
-  textContainer: {
-    height: 32,
-    justifyContent: "center",
-    marginBottom: 16,
-    overflow: "hidden"
-  },
-  transcribedText: {
-    fontSize: 18,
-    fontWeight: "500",
-    textAlign: "left"
-  },
-  placeholderText: {
-    fontSize: 15,
-    textAlign: "left",
-    fontWeight: "800"
-  },
-  controlsContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "flex-start"
-  },
-  waveformContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 5,
-    height: 28,
-    marginBottom: 16
-  },
-  waveformBar: {
-    width: 3,
-    borderRadius: 2
-  },
-  micButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#FFFFFF",
-    borderWidth: 1,
-    borderColor: "#E5E5E5"
+    color: "#9CA3AF",
+    textAlign: "center",
+    lineHeight: 20
   },
-  hintText: {
-    fontSize: 12,
-    marginTop: 12
-  }
+  listContent: { padding: 16, gap: 16 },
+  listContentCentered: { maxWidth: 672, alignSelf: "center", width: "100%" }
 });
 var DEFAULT_MAX_LENGTH = 6;
 var MAX_SUPPORTED_LENGTH = 12;
 function OtpInput({ value, onChange, maxLength, disabled = false }) {
-  const inputRefs = React4.useRef([]);
+  const inputRefs = React.useRef([]);
   const safeMaxLength = Number.isInteger(maxLength) && maxLength > 0 ? Math.min(maxLength, MAX_SUPPORTED_LENGTH) : DEFAULT_MAX_LENGTH;
   const digits = value.split("").concat(Array(safeMaxLength).fill("")).slice(0, safeMaxLength);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (!disabled) {
       inputRefs.current[0]?.focus();
     }
@@ -1438,7 +1390,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.container, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s6.container, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TextInput,
     {
       ref: (el) => {
@@ -1451,33 +1403,27 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       onChangeText: (text) => handleChange(i, text),
       onKeyPress: ({ nativeEvent }) => handleKeyPress(i, nativeEvent.key),
       onFocus: () => inputRefs.current[i]?.setNativeProps({ selection: { start: 0, end: 1 } }),
-      style: [styles7.input, disabled && styles7.inputDisabled],
+      style: [s6.input, disabled && s6.inputDisabled],
       accessibilityLabel: `Digit ${i + 1}`
     },
     i
   )) });
 }
-var styles7 = reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    justifyContent: "center"
-  },
+var s6 = reactNative.StyleSheet.create({
+  container: { flexDirection: "row", gap: 8, justifyContent: "center" },
   input: {
-    width: 40,
-    height: 48,
+    width: 42,
+    height: 50,
     textAlign: "center",
     fontSize: 20,
     fontWeight: "600",
     borderWidth: 1,
-    borderColor: "#E5E5E5",
-    borderRadius: 8,
-    color: "#000"
+    borderColor: "rgba(0,0,0,0.1)",
+    borderRadius: 10,
+    color: "#1F2937",
+    backgroundColor: "#FFFFFF"
   },
-  inputDisabled: {
-    backgroundColor: "#F5F5F5",
-    opacity: 0.5
-  }
+  inputDisabled: { backgroundColor: "rgba(0,0,0,0.03)", opacity: 0.5 }
 });
 
 // src/components/UserActionModal/constants.ts
@@ -1521,16 +1467,16 @@ function UserActionModal({
   onResend,
   clearOtpTrigger
 }) {
-  const [otp, setOtp] = React4.useState("");
-  const [actionType, setActionType] = React4.useState(null);
-  const [isSubmitting, setIsSubmitting] = React4.useState(false);
-  const [resendCooldownRemaining, setResendCooldownRemaining] = React4.useState(0);
+  const [otp, setOtp] = React.useState("");
+  const [actionType, setActionType] = React.useState(null);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [resendCooldownRemaining, setResendCooldownRemaining] = React.useState(0);
   const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
-  const resetActionState = React4.useCallback(() => {
+  const resetActionState = React.useCallback(() => {
     setIsSubmitting(false);
     setActionType(null);
   }, []);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
     } else {
@@ -1539,28 +1485,30 @@ function UserActionModal({
       setResendCooldownRemaining(0);
     }
   }, [isOpen, resetActionState]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (resendCooldownRemaining <= 0) return;
-    const timer = setTimeout(() => {
-      setResendCooldownRemaining((prev) => prev - 1);
-    }, 1e3);
+    const timer = setTimeout(
+      () => setResendCooldownRemaining((prev) => prev - 1),
+      1e3
+    );
     return () => clearTimeout(timer);
   }, [resendCooldownRemaining]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (clearOtpTrigger > 0) {
       setOtp("");
       resetActionState();
     }
   }, [clearOtpTrigger, resetActionState]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (!isOpen || !isSubmitting) return;
     if (actionType !== "approve" && actionType !== "reject") return;
-    const timeout = setTimeout(() => {
-      resetActionState();
-    }, ACTION_PENDING_TIMEOUT_MS);
+    const timeout = setTimeout(
+      () => resetActionState(),
+      ACTION_PENDING_TIMEOUT_MS
+    );
     return () => clearTimeout(timeout);
   }, [isOpen, isSubmitting, actionType, resetActionState]);
-  const handleApprove = React4.useCallback(async () => {
+  const handleApprove = React.useCallback(async () => {
     if (otp.length !== schema.maxLength || !/^\d+$/.test(otp)) return;
     setIsSubmitting(true);
     setActionType("approve");
@@ -1570,7 +1518,7 @@ function UserActionModal({
       resetActionState();
     }
   }, [otp, schema.maxLength, onApprove, resetActionState]);
-  const handleReject = React4.useCallback(async () => {
+  const handleReject = React.useCallback(async () => {
     setIsSubmitting(true);
     setActionType("reject");
     try {
@@ -1579,7 +1527,7 @@ function UserActionModal({
       resetActionState();
     }
   }, [onReject, resetActionState]);
-  const handleResend = React4.useCallback(async () => {
+  const handleResend = React.useCallback(async () => {
     if (resendCooldownRemaining > 0) return;
     setIsSubmitting(true);
     setActionType("resend");
@@ -1608,10 +1556,10 @@ function UserActionModal({
       animationType: "fade",
       onRequestClose: () => {
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.backdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.dialog, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.title, children: MODAL_CONTENT.TITLE }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.description, children: userActionRequest.message }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.otpContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.backdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.dialog, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.titleWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.title, children: MODAL_CONTENT.TITLE }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.description, children: userActionRequest.message }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s7.otpWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
           OtpInput,
           {
             value: otp,
@@ -1620,21 +1568,28 @@ function UserActionModal({
             disabled: isSubmitting
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.buttonsColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.primaryButtonsRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.buttonsCol, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.primaryRow, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
                 onPress: handleReject,
                 disabled: isSubmitting,
                 style: ({ pressed }) => [
-                  styles8.rejectButton,
-                  isSubmitting && styles8.buttonDisabled,
-                  pressed && styles8.rejectButtonPressed
+                  s7.rejectBtn,
+                  isSubmitting && s7.btnDisabled,
+                  pressed && { opacity: 0.7 }
                 ],
                 children: [
-                  actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#DC2626", style: styles8.spinner }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.rejectButtonText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
+                  actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.ActivityIndicator,
+                    {
+                      size: "small",
+                      color: "#DC2626",
+                      style: s7.spinner
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.rejectBtnText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
                 ]
               }
             ),
@@ -1644,13 +1599,20 @@ function UserActionModal({
                 onPress: handleApprove,
                 disabled: !isOtpValid || isSubmitting,
                 style: ({ pressed }) => [
-                  styles8.approveButton,
-                  (!isOtpValid || isSubmitting) && styles8.buttonDisabled,
-                  pressed && styles8.approveButtonPressed
+                  s7.approveBtn,
+                  (!isOtpValid || isSubmitting) && s7.btnDisabled,
+                  pressed && { opacity: 0.85 }
                 ],
                 children: [
-                  actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#FFF", style: styles8.spinner }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.approveButtonText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
+                  actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.ActivityIndicator,
+                    {
+                      size: "small",
+                      color: "#FFF",
+                      style: s7.spinner
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.approveBtnText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
                 ]
               }
             )
@@ -1661,13 +1623,20 @@ function UserActionModal({
               onPress: handleResend,
               disabled: isSubmitting || resendCooldownRemaining > 0,
               style: ({ pressed }) => [
-                styles8.resendButton,
-                (isSubmitting || resendCooldownRemaining > 0) && styles8.buttonDisabled,
-                pressed && styles8.resendButtonPressed
+                s7.resendBtn,
+                (isSubmitting || resendCooldownRemaining > 0) && s7.btnDisabled,
+                pressed && { opacity: 0.7 }
               ],
               children: [
-                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#666", style: styles8.spinner }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.resendButtonText, children: getResendLabel() })
+                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.ActivityIndicator,
+                  {
+                    size: "small",
+                    color: "#6B7280",
+                    style: s7.spinner
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.resendBtnText, children: getResendLabel() })
               ]
             }
           )
@@ -1676,105 +1645,65 @@ function UserActionModal({
     }
   );
 }
-var styles8 = reactNative.StyleSheet.create({
+var s7 = reactNative.StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    backgroundColor: "rgba(0,0,0,0.4)",
     justifyContent: "center",
     alignItems: "center"
   },
   dialog: {
     backgroundColor: "#FFF",
-    borderRadius: 12,
+    borderRadius: 20,
     padding: 24,
     width: "90%",
-    maxWidth: 420
-  },
-  titleContainer: {
-    alignItems: "center",
-    marginBottom: 16
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#000"
+    maxWidth: 400
   },
+  titleWrap: { alignItems: "center", marginBottom: 14 },
+  title: { fontSize: 16, fontWeight: "600", color: "#1F2937" },
   description: {
     fontSize: 14,
-    color: "#666",
+    lineHeight: 21,
+    color: "#6B7280",
     textAlign: "center",
-    marginBottom: 24,
-    lineHeight: 21
-  },
-  otpContainer: {
-    marginBottom: 24
+    marginBottom: 20
   },
-  buttonsColumn: {
-    gap: 10
-  },
-  primaryButtonsRow: {
-    flexDirection: "row",
-    gap: 8
-  },
-  resendButton: {
-    borderRadius: 8,
-    paddingVertical: 8,
+  otpWrap: { marginBottom: 24 },
+  buttonsCol: { gap: 10 },
+  primaryRow: { flexDirection: "row", gap: 8 },
+  rejectBtn: {
+    flex: 1,
+    borderRadius: 12,
+    paddingVertical: 12,
     paddingHorizontal: 16,
+    backgroundColor: "rgba(220,38,38,0.08)",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  resendButtonPressed: {
-    opacity: 0.7
-  },
-  resendButtonText: {
-    color: "#666",
-    fontSize: 12,
-    fontWeight: "500"
-  },
-  rejectButton: {
+  rejectBtnText: { color: "#DC2626", fontSize: 14, fontWeight: "500" },
+  approveBtn: {
     flex: 1,
-    borderRadius: 8,
+    borderRadius: 12,
     paddingVertical: 12,
     paddingHorizontal: 16,
-    backgroundColor: "rgba(220, 38, 38, 0.1)",
+    backgroundColor: "#007AFF",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  rejectButtonPressed: {
-    backgroundColor: "rgba(220, 38, 38, 0.2)"
-  },
-  rejectButtonText: {
-    color: "#DC2626",
-    fontSize: 14,
-    fontWeight: "500"
-  },
-  approveButton: {
-    flex: 1,
-    borderRadius: 8,
-    paddingVertical: 12,
+  approveBtnText: { color: "#FFF", fontSize: 14, fontWeight: "600" },
+  resendBtn: {
+    borderRadius: 10,
+    paddingVertical: 8,
     paddingHorizontal: 16,
-    backgroundColor: "#007AFF",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center"
   },
-  approveButtonPressed: {
-    backgroundColor: "#0066D6",
-    opacity: 1
-  },
-  approveButtonText: {
-    color: "#FFF",
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  buttonDisabled: {
-    opacity: 0.5
-  },
-  spinner: {
-    marginRight: 8
-  }
+  resendBtnText: { color: "#6B7280", fontSize: 14, lineHeight: 21, fontWeight: "500" },
+  btnDisabled: { opacity: 0.4 },
+  spinner: { marginRight: 8 }
 });
 var DEFAULT_USER_ACTION_STATE = {
   request: null,
@@ -1789,9 +1718,11 @@ function PaymanChat({
   style,
   children
 }) {
-  const [inputValue, setInputValue] = React4.useState("");
-  const [voiceOverlayVisible, setVoiceOverlayVisible] = React4.useState(false);
-  const prevInputValueRef = React4.useRef(inputValue);
+  const [inputValue, setInputValue] = React.useState("");
+  const [recordingElapsedSeconds, setRecordingElapsedSeconds] = React.useState(0);
+  const recordingStartRef = React.useRef(null);
+  const recordingIntervalRef = React.useRef(null);
+  const prevInputValueRef = React.useRef(inputValue);
   const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
@@ -1824,11 +1755,11 @@ function PaymanChat({
     {
       onError: (error) => {
         console.error("Voice error:", error);
-        setVoiceOverlayVisible(false);
       }
     }
   );
-  const contextValue = React4.useMemo(
+  const isRecording = voiceState === "listening";
+  const contextValue = React.useMemo(
     () => ({
       resetSession,
       clearMessages,
@@ -1871,23 +1802,47 @@ function PaymanChat({
     inputStyle = "rounded",
     enableVoice = false
   } = config;
-  const isSessionParamsConfigured = React4.useMemo(() => {
+  const isSessionParamsConfigured = React.useMemo(() => {
     if (!sessionParams) return false;
     return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
   }, [sessionParams?.id, sessionParams?.name]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
+    if (isRecording) {
+      recordingStartRef.current = Date.now();
+      setRecordingElapsedSeconds(0);
+      recordingIntervalRef.current = setInterval(() => {
+        if (recordingStartRef.current != null) {
+          setRecordingElapsedSeconds(
+            Math.floor((Date.now() - recordingStartRef.current) / 1e3)
+          );
+        }
+      }, 1e3);
+    } else {
+      recordingStartRef.current = null;
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current);
+        recordingIntervalRef.current = null;
+      }
+      setRecordingElapsedSeconds(0);
+    }
+    return () => {
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current);
+        recordingIntervalRef.current = null;
+      }
+    };
+  }, [isRecording]);
+  React.useEffect(() => {
     const wasEmpty = prevInputValueRef.current.trim() === "";
     const isEmpty = inputValue.trim() === "";
     prevInputValueRef.current = inputValue;
     if (!wasEmpty && isEmpty) {
       clearTranscript();
       stopRecording();
-      setVoiceOverlayVisible(false);
     }
   }, [inputValue, clearTranscript, stopRecording]);
-  const handleSend = React4.useCallback(() => {
+  const handleSend = React.useCallback(() => {
     stopRecording();
-    setVoiceOverlayVisible(false);
     if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
       sendMessage(inputValue.trim());
       setInputValue("");
@@ -1900,35 +1855,34 @@ function PaymanChat({
     stopRecording
   ]);
   const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
-  const handleVoicePress = React4.useCallback(async () => {
+  const handleVoicePress = React.useCallback(async () => {
     if (!voiceAvailable) return;
-    setVoiceOverlayVisible(true);
     clearTranscript();
     await startRecording();
   }, [voiceAvailable, startRecording, clearTranscript]);
-  const handleStopRecording = React4.useCallback(() => {
+  const handleConfirmRecording = React.useCallback(() => {
     stopRecording();
-    setVoiceOverlayVisible(false);
-    if (transcribedText.trim()) {
-      setInputValue(transcribedText);
-    }
+    if (transcribedText.trim()) setInputValue(transcribedText);
   }, [stopRecording, transcribedText]);
+  const handleCancelRecording = React.useCallback(() => {
+    stopRecording();
+  }, [stopRecording]);
   if (isChatDisabled) {
     if (disabledComponent) {
-      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.container, style], children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s8.container, style], children: [
         children,
         disabledComponent
       ] }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.container, style], children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s8.container, style], children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles9.disabledText, children: "Chat is currently disabled" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.disabledWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s8.disabledText, children: "Chat is currently disabled" }) })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.KeyboardAvoidingView,
     {
-      style: [styles9.container, style],
+      style: [s8.container, style],
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
       children: [
@@ -1956,36 +1910,30 @@ function PaymanChat({
             onExecutionTraceClick
           }
         ),
-        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ChatInput,
-            {
-              value: inputValue,
-              onChange: setInputValue,
-              onSend: handleSend,
-              onPause: cancelStream,
-              disabled: isInputDisabled,
-              placeholder,
-              isWaitingForResponse,
-              hasSelectedSession: true,
-              isSessionParamsConfigured,
-              inputStyle,
-              layout,
-              enableVoice,
-              onVoicePress: enableVoice ? handleVoicePress : void 0,
-              voiceAvailable: enableVoice && voiceAvailable
-            }
-          ),
-          enableVoice && /* @__PURE__ */ jsxRuntime.jsx(
-            VoiceOverlay,
-            {
-              visible: voiceOverlayVisible,
-              voiceState,
-              transcribedText,
-              onStopRecording: handleStopRecording
-            }
-          )
-        ] }),
+        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
+          ChatInput,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onPause: cancelStream,
+            disabled: isInputDisabled,
+            placeholder,
+            isWaitingForResponse,
+            hasSelectedSession: true,
+            isSessionParamsConfigured,
+            inputStyle,
+            layout,
+            enableVoice,
+            onVoicePress: enableVoice ? handleVoicePress : void 0,
+            voiceAvailable: enableVoice && voiceAvailable,
+            isRecording: enableVoice && isRecording,
+            recordingDurationSeconds: recordingElapsedSeconds,
+            onConfirmRecording: enableVoice ? handleConfirmRecording : void 0,
+            onCancelRecording: enableVoice ? handleCancelRecording : void 0,
+            transcribedText: enableVoice && isRecording ? transcribedText : void 0
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           UserActionModal,
           {
@@ -2001,26 +1949,22 @@ function PaymanChat({
     }
   ) });
 }
-var styles9 = reactNative.StyleSheet.create({
+var s8 = reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#FFF",
-    borderWidth: 1,
-    borderColor: "#E5E5E5",
-    borderRadius: 8,
+    backgroundColor: "#FFFFFF",
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0,0,0,0.08)",
+    borderRadius: 16,
     overflow: "hidden"
   },
-  disabledContainer: {
+  disabledWrap: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
     padding: 16
   },
-  disabledText: {
-    fontSize: 14,
-    color: "#999",
-    textAlign: "center"
-  }
+  disabledText: { fontSize: 14, color: "#9CA3AF", textAlign: "center" }
 });
 
 Object.defineProperty(exports, "cancelUserAction", {