@paymanai/payman-ask-sdk 1.1.1 → 1.2.0

package/dist/index.native.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var React = require('react');
-var reactNative = require('react-native');
 var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
+var React4 = 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');
@@ -12,14 +12,14 @@ var tailwindMerge = require('tailwind-merge');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var Animated__default = /*#__PURE__*/_interopDefault(Animated);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 
 // src/components/PaymanChat/index.native.tsx
-var PaymanChatContext = React.createContext(void 0);
+var PaymanChatContext = React4.createContext(void 0);
 function usePaymanChat() {
-  const context = React.useContext(PaymanChatContext);
+  const context = React4.useContext(PaymanChatContext);
   if (!context) {
     throw new Error("usePaymanChat must be used within a PaymanChat component");
   }
@@ -38,10 +38,15 @@ function ChatInput({
   onClick,
   inputStyle = "rounded",
   layout = "full-width",
-  className
+  className,
+  enableVoice = false,
+  onVoicePress,
+  voiceAvailable = false
 }) {
   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";
@@ -51,49 +56,87 @@ function ChatInput({
     }
     return placeholder;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.container, layout === "centered" && styles.containerCentered], 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
-      }
-    ),
-    showPauseButton ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        onPress: onPause,
-        style: ({ pressed }) => [
-          styles.button,
-          pressed && styles.buttonPressed
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Pause, { size: 16, color: "#FFFFFF" })
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        onPress: onSend,
-        disabled: isInputDisabled || !value.trim(),
-        style: ({ pressed }) => [
-          styles.button,
-          (isInputDisabled || !value.trim()) && styles.buttonDisabled,
-          pressed && styles.buttonPressed
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Send, { size: 16, color: "#FFFFFF" })
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: [
+        styles.container,
+        layout === "centered" && styles.containerCentered
+      ],
+      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,
+                {
+                  onPress: onPause,
+                  style: ({ pressed }) => [
+                    styles.iconButton,
+                    pressed && styles.buttonPressed
+                  ],
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Pause, { size: 16, color: "#FFFFFF" })
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
+                {
+                  style: [
+                    styles.button,
+                    (isInputDisabled || !value.trim()) && styles.buttonDisabled
+                  ],
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Pressable,
+                    {
+                      onPress: onSend,
+                      disabled: isInputDisabled || !value.trim(),
+                      style: ({ pressed }) => [
+                        styles.iconButton,
+                        pressed && styles.buttonPressed
+                      ],
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Send, { size: 16, color: "#FFFFFF" })
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
 }
 var styles = reactNative.StyleSheet.create({
   container: {
@@ -127,7 +170,7 @@ var styles = reactNative.StyleSheet.create({
     paddingTop: 12,
     paddingBottom: 12,
     paddingLeft: 16,
-    paddingRight: 48,
+    paddingRight: 8,
     fontSize: 14,
     color: "#000",
     lineHeight: 20
@@ -135,10 +178,14 @@ var styles = reactNative.StyleSheet.create({
   inputDisabled: {
     opacity: 0.5
   },
+  actionsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 8,
+    marginBottom: 8,
+    gap: 4
+  },
   button: {
-    position: "absolute",
-    bottom: 8,
-    right: 8,
     width: 32,
     height: 32,
     borderRadius: 16,
@@ -146,16 +193,28 @@ var styles = reactNative.StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
+  iconButton: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center"
+  },
   buttonDisabled: {
     opacity: 0.5
   },
   buttonPressed: {
     opacity: 0.8
+  },
+  voiceButton: {
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center"
   }
 });
 function AnimatedLoader({ size = 16, color = "#007AFF" }) {
   const rotation = Animated.useSharedValue(0);
-  React__default.default.useEffect(() => {
+  React4__default.default.useEffect(() => {
     rotation.value = Animated.withRepeat(
       Animated.withTiming(360, {
         duration: 1e3,
@@ -191,10 +250,10 @@ function AgentMessage({
   const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
   const isCancelled = message.isCancelled ?? false;
   const currentExecutingStepId = message.currentExecutingStepId;
-  const [isStepsExpanded, setIsStepsExpanded] = React.useState(
+  const [isStepsExpanded, setIsStepsExpanded] = React4.useState(
     isStreaming && hasSteps
   );
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (isStreaming && hasSteps) {
       setIsStepsExpanded(true);
     }
@@ -822,7 +881,7 @@ function MessageRowSkeleton({
   isRightAligned = false
 }) {
   const opacity = Animated.useSharedValue(0.3);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     opacity.value = Animated.withRepeat(
       Animated.withTiming(1, { duration: 1e3 }),
       -1,
@@ -937,8 +996,8 @@ function MessageList({
   onExecutionTraceClick,
   className
 }) {
-  const flatListRef = React.useRef(null);
-  React.useEffect(() => {
+  const flatListRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
         flatListRef.current?.scrollToEnd({ animated: true });
@@ -1059,13 +1118,283 @@ var styles5 = reactNative.StyleSheet.create({
     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"
+  },
+  hintText: {
+    fontSize: 12,
+    marginTop: 12
+  }
+});
 var DEFAULT_MAX_LENGTH = 6;
 var MAX_SUPPORTED_LENGTH = 12;
 function OtpInput({ value, onChange, maxLength, disabled = false }) {
-  const inputRefs = React.useRef([]);
+  const inputRefs = React4.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);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (!disabled) {
       inputRefs.current[0]?.focus();
     }
@@ -1109,7 +1438,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.container, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.container, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.TextInput,
     {
       ref: (el) => {
@@ -1122,13 +1451,13 @@ 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: [styles6.input, disabled && styles6.inputDisabled],
+      style: [styles7.input, disabled && styles7.inputDisabled],
       accessibilityLabel: `Digit ${i + 1}`
     },
     i
   )) });
 }
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
     gap: 8,
@@ -1192,16 +1521,16 @@ function UserActionModal({
   onResend,
   clearOtpTrigger
 }) {
-  const [otp, setOtp] = React.useState("");
-  const [actionType, setActionType] = React.useState(null);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [resendCooldownRemaining, setResendCooldownRemaining] = React.useState(0);
+  const [otp, setOtp] = React4.useState("");
+  const [actionType, setActionType] = React4.useState(null);
+  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+  const [resendCooldownRemaining, setResendCooldownRemaining] = React4.useState(0);
   const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
-  const resetActionState = React.useCallback(() => {
+  const resetActionState = React4.useCallback(() => {
     setIsSubmitting(false);
     setActionType(null);
   }, []);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
     } else {
@@ -1210,20 +1539,20 @@ function UserActionModal({
       setResendCooldownRemaining(0);
     }
   }, [isOpen, resetActionState]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (resendCooldownRemaining <= 0) return;
     const timer = setTimeout(() => {
       setResendCooldownRemaining((prev) => prev - 1);
     }, 1e3);
     return () => clearTimeout(timer);
   }, [resendCooldownRemaining]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (clearOtpTrigger > 0) {
       setOtp("");
       resetActionState();
     }
   }, [clearOtpTrigger, resetActionState]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (!isOpen || !isSubmitting) return;
     if (actionType !== "approve" && actionType !== "reject") return;
     const timeout = setTimeout(() => {
@@ -1231,7 +1560,7 @@ function UserActionModal({
     }, ACTION_PENDING_TIMEOUT_MS);
     return () => clearTimeout(timeout);
   }, [isOpen, isSubmitting, actionType, resetActionState]);
-  const handleApprove = React.useCallback(async () => {
+  const handleApprove = React4.useCallback(async () => {
     if (otp.length !== schema.maxLength || !/^\d+$/.test(otp)) return;
     setIsSubmitting(true);
     setActionType("approve");
@@ -1241,7 +1570,7 @@ function UserActionModal({
       resetActionState();
     }
   }, [otp, schema.maxLength, onApprove, resetActionState]);
-  const handleReject = React.useCallback(async () => {
+  const handleReject = React4.useCallback(async () => {
     setIsSubmitting(true);
     setActionType("reject");
     try {
@@ -1250,7 +1579,7 @@ function UserActionModal({
       resetActionState();
     }
   }, [onReject, resetActionState]);
-  const handleResend = React.useCallback(async () => {
+  const handleResend = React4.useCallback(async () => {
     if (resendCooldownRemaining > 0) return;
     setIsSubmitting(true);
     setActionType("resend");
@@ -1279,10 +1608,10 @@ function UserActionModal({
       animationType: "fade",
       onRequestClose: () => {
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.backdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.dialog, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.title, children: MODAL_CONTENT.TITLE }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.description, children: userActionRequest.message }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.otpContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      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(
           OtpInput,
           {
             value: otp,
@@ -1291,21 +1620,21 @@ function UserActionModal({
             disabled: isSubmitting
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.buttonsColumn, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.primaryButtonsRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.buttonsColumn, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.primaryButtonsRow, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
                 onPress: handleReject,
                 disabled: isSubmitting,
                 style: ({ pressed }) => [
-                  styles7.rejectButton,
-                  isSubmitting && styles7.buttonDisabled,
-                  pressed && styles7.rejectButtonPressed
+                  styles8.rejectButton,
+                  isSubmitting && styles8.buttonDisabled,
+                  pressed && styles8.rejectButtonPressed
                 ],
                 children: [
-                  actionType === "reject" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#DC2626", style: styles7.spinner }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.rejectButtonText, children: actionType === "reject" ? MODAL_CONTENT.LOADING_REJECT : BUTTON_LABELS.REJECT })
+                  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 })
                 ]
               }
             ),
@@ -1315,13 +1644,13 @@ function UserActionModal({
                 onPress: handleApprove,
                 disabled: !isOtpValid || isSubmitting,
                 style: ({ pressed }) => [
-                  styles7.approveButton,
-                  (!isOtpValid || isSubmitting) && styles7.buttonDisabled,
-                  pressed && styles7.approveButtonPressed
+                  styles8.approveButton,
+                  (!isOtpValid || isSubmitting) && styles8.buttonDisabled,
+                  pressed && styles8.approveButtonPressed
                 ],
                 children: [
-                  actionType === "approve" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#FFF", style: styles7.spinner }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.approveButtonText, children: actionType === "approve" ? MODAL_CONTENT.LOADING_APPROVE : BUTTON_LABELS.APPROVE })
+                  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 })
                 ]
               }
             )
@@ -1332,13 +1661,13 @@ function UserActionModal({
               onPress: handleResend,
               disabled: isSubmitting || resendCooldownRemaining > 0,
               style: ({ pressed }) => [
-                styles7.resendButton,
-                (isSubmitting || resendCooldownRemaining > 0) && styles7.buttonDisabled,
-                pressed && styles7.resendButtonPressed
+                styles8.resendButton,
+                (isSubmitting || resendCooldownRemaining > 0) && styles8.buttonDisabled,
+                pressed && styles8.resendButtonPressed
               ],
               children: [
-                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#666", style: styles7.spinner }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.resendButtonText, children: getResendLabel() })
+                actionType === "resend" && /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { size: "small", color: "#666", style: styles8.spinner }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.resendButtonText, children: getResendLabel() })
               ]
             }
           )
@@ -1347,7 +1676,7 @@ function UserActionModal({
     }
   );
 }
-var styles7 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -1460,7 +1789,9 @@ function PaymanChat({
   style,
   children
 }) {
-  const [inputValue, setInputValue] = React.useState("");
+  const [inputValue, setInputValue] = React4.useState("");
+  const [voiceOverlayVisible, setVoiceOverlayVisible] = React4.useState(false);
+  const prevInputValueRef = React4.useRef(inputValue);
   const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
   const {
     messages,
@@ -1477,7 +1808,27 @@ function PaymanChat({
   const rejectUserAction = chat.rejectUserAction ?? NOOP_ASYNC;
   const resendOtp = chat.resendOtp ?? NOOP_ASYNC;
   const isUserActionSupported = typeof chat.approveUserAction === "function" && typeof chat.rejectUserAction === "function" && typeof chat.resendOtp === "function";
-  const contextValue = React.useMemo(
+  const {
+    voiceState,
+    transcribedText,
+    isAvailable: voiceAvailable,
+    startRecording,
+    stopRecording,
+    clearTranscript
+  } = paymanTypescriptAskSdk.useVoice(
+    {
+      lang: config.voiceLang || "en-US",
+      interimResults: config.voiceInterimResults !== false,
+      continuous: config.voiceContinuous !== false
+    },
+    {
+      onError: (error) => {
+        console.error("Voice error:", error);
+        setVoiceOverlayVisible(false);
+      }
+    }
+  );
+  const contextValue = React4.useMemo(
     () => ({
       resetSession,
       clearMessages,
@@ -1517,35 +1868,67 @@ function PaymanChat({
     isChatDisabled = false,
     disabledComponent,
     showEmptyStateIcon = true,
-    inputStyle = "rounded"
+    inputStyle = "rounded",
+    enableVoice = false
   } = config;
-  const isSessionParamsConfigured = React.useMemo(() => {
+  const isSessionParamsConfigured = React4.useMemo(() => {
     if (!sessionParams) return false;
     return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
   }, [sessionParams?.id, sessionParams?.name]);
-  const handleSend = () => {
+  React4.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(() => {
+    stopRecording();
+    setVoiceOverlayVisible(false);
     if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
       sendMessage(inputValue.trim());
       setInputValue("");
     }
-  };
+  }, [
+    inputValue,
+    disableInput,
+    isSessionParamsConfigured,
+    sendMessage,
+    stopRecording
+  ]);
   const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
+  const handleVoicePress = React4.useCallback(async () => {
+    if (!voiceAvailable) return;
+    setVoiceOverlayVisible(true);
+    clearTranscript();
+    await startRecording();
+  }, [voiceAvailable, startRecording, clearTranscript]);
+  const handleStopRecording = React4.useCallback(() => {
+    stopRecording();
+    setVoiceOverlayVisible(false);
+    if (transcribedText.trim()) {
+      setInputValue(transcribedText);
+    }
+  }, [stopRecording, transcribedText]);
   if (isChatDisabled) {
     if (disabledComponent) {
-      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.container, style], children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.container, style], children: [
         children,
         disabledComponent
       ] }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.container, style], children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.container, style], children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.disabledText, children: "Chat is currently disabled" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles9.disabledText, children: "Chat is currently disabled" }) })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.KeyboardAvoidingView,
     {
-      style: [styles8.container, style],
+      style: [styles9.container, style],
       behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
       children: [
@@ -1573,22 +1956,36 @@ function PaymanChat({
             onExecutionTraceClick
           }
         ),
-        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
-          ChatInput,
-          {
-            value: inputValue,
-            onChange: setInputValue,
-            onSend: handleSend,
-            onPause: cancelStream,
-            disabled: isInputDisabled,
-            placeholder,
-            isWaitingForResponse,
-            hasSelectedSession: true,
-            isSessionParamsConfigured,
-            inputStyle,
-            layout
-          }
-        ),
+        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
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           UserActionModal,
           {
@@ -1604,7 +2001,7 @@ function PaymanChat({
     }
   ) });
 }
-var styles8 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#FFF",
@@ -1650,6 +2047,10 @@ Object.defineProperty(exports, "useChat", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.useChat; }
 });
+Object.defineProperty(exports, "useVoice", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.useVoice; }
+});
 exports.PaymanChat = PaymanChat;
 exports.PaymanChatContext = PaymanChatContext;
 exports.cn = cn;