@paymanai/payman-ask-sdk 1.0.0

package/dist/index.native.js

@@ -0,0 +1,1178 @@
+'use strict';
+
+var React = require('react');
+var reactNative = require('react-native');
+var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
+var lucideReactNative = require('lucide-react-native');
+var jsxRuntime = require('react/jsx-runtime');
+var Animated = 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 React__default = /*#__PURE__*/_interopDefault(React);
+var Animated__default = /*#__PURE__*/_interopDefault(Animated);
+var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
+
+// src/components/PaymanChat/index.native.tsx
+var PaymanChatContext = React.createContext(void 0);
+function usePaymanChat() {
+  const context = React.useContext(PaymanChatContext);
+  if (!context) {
+    throw new Error("usePaymanChat must be used within a PaymanChat component");
+  }
+  return context;
+}
+function ChatInput({
+  value,
+  onChange,
+  onSend,
+  onPause,
+  disabled = false,
+  placeholder = "Type your message...",
+  isWaitingForResponse = false,
+  hasSelectedSession = true,
+  isSessionParamsConfigured = true,
+  onClick,
+  inputStyle = "rounded",
+  layout = "full-width",
+  className
+}) {
+  const isInputDisabled = disabled || isWaitingForResponse;
+  const showPauseButton = isWaitingForResponse && onPause;
+  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;
+  };
+  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" })
+      }
+    )
+  ] }) }) });
+}
+var styles = reactNative.StyleSheet.create({
+  container: {
+    padding: 16,
+    width: "100%"
+  },
+  containerCentered: {
+    alignItems: "center"
+  },
+  wrapper: {
+    position: "relative",
+    width: "100%",
+    maxWidth: 672
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    backgroundColor: "#F5F5F5",
+    borderWidth: 1,
+    borderColor: "#E5E5E5",
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  inputRounded: {
+    borderRadius: 24
+  },
+  input: {
+    flex: 1,
+    minHeight: 48,
+    maxHeight: 200,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 48,
+    fontSize: 14,
+    color: "#000",
+    lineHeight: 20
+  },
+  inputDisabled: {
+    opacity: 0.5
+  },
+  button: {
+    position: "absolute",
+    bottom: 8,
+    right: 8,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "#007AFF",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  buttonDisabled: {
+    opacity: 0.5
+  },
+  buttonPressed: {
+    opacity: 0.8
+  }
+});
+function AnimatedLoader({ size = 16, color = "#007AFF" }) {
+  const rotation = Animated.useSharedValue(0);
+  React__default.default.useEffect(() => {
+    rotation.value = Animated.withRepeat(
+      Animated.withTiming(360, {
+        duration: 1e3,
+        easing: Animated.Easing.linear
+      }),
+      -1
+    );
+  }, [rotation]);
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    return {
+      transform: [{ rotate: `${rotation.value}deg` }]
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: animatedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Loader2, { size, color }) });
+}
+function AgentMessage({
+  message,
+  animated = false,
+  showAgentName = false,
+  agentName = "Assistant",
+  showAvatar = false,
+  layout = "full-width",
+  showTimestamp = false,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick
+}) {
+  const isStreaming = message.isStreaming ?? false;
+  const hasSteps = message.steps && message.steps.length > 0;
+  const hasTraceData = !!(message.tracingData || message.executionId) && !isStreaming;
+  const isError = message.isError ?? (message.streamProgress === "error" || !!message.errorDetails);
+  const isCancelled = message.isCancelled ?? false;
+  const currentExecutingStepId = message.currentExecutingStepId;
+  const [isStepsExpanded, setIsStepsExpanded] = React.useState(
+    isStreaming && hasSteps
+  );
+  React.useEffect(() => {
+    if (isStreaming && hasSteps) {
+      setIsStepsExpanded(true);
+    }
+  }, [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: [
+          /* @__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: "#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
+                                  ],
+                                  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: "#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
+                                  ],
+                                  children: step.message
+                                }
+                              ),
+                              step.elapsedMs && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles2.stepTime, children: [
+                                "(",
+                                (step.elapsedMs / 1e3).toFixed(1),
+                                "s)"
+                              ] })
+                            ] })
+                          ]
+                        },
+                        step.id
+                      );
+                    })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress: () => onExecutionTraceClick({
+          message,
+          tracingData: message.tracingData,
+          executionId: message.executionId
+        }),
+        style: styles2.traceButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.Binoculars, { size: 16, color: "#007AFF" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedView, { ...animatedProps, children: messageContent });
+}
+var styles2 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    width: "100%",
+    gap: 16
+  },
+  avatarContainer: {
+    width: 32,
+    height: 32,
+    marginTop: 2
+  },
+  dotContainer: {
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#007AFF"
+  },
+  dotPulse: {
+    opacity: 0.75
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "#F5F5F5",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  messageContainer: {
+    minWidth: 0,
+    flex: 1,
+    maxWidth: "80%"
+  },
+  messageContainerCentered: {
+    maxWidth: "85%"
+  },
+  bubble: {
+    overflow: "hidden",
+    width: "100%",
+    padding: 12,
+    backgroundColor: "#F5F5F5",
+    borderRadius: 8
+  },
+  bubbleCentered: {
+    backgroundColor: "#FFFFFF",
+    borderWidth: 1,
+    borderColor: "#E5E5E5",
+    borderRadius: 16,
+    borderTopLeftRadius: 4
+  },
+  bubbleWithSteps: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  bubbleStreaming: {
+    borderColor: "#D1D5DB"
+  },
+  bubbleError: {
+    backgroundColor: "#FEE",
+    borderColor: "#FCC"
+  },
+  agentName: {
+    fontSize: 12,
+    fontWeight: "600",
+    opacity: 0.6,
+    marginBottom: 6
+  },
+  contentContainer: {
+    fontSize: 14,
+    lineHeight: 22
+  },
+  thinkingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  thinkingText: {
+    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
+  },
+  stepsContainerStreaming: {
+    borderTopColor: "#D1D5DB"
+  },
+  stepsButton: {
+    width: "100%",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    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
+  },
+  stepText: {
+    fontSize: 12,
+    color: "#666",
+    flexWrap: "wrap"
+  },
+  stepTextError: {
+    color: "#FF3B30"
+  },
+  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
+  }
+});
+var markdownStyles = {
+  body: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: "#000"
+  },
+  paragraph: {
+    marginBottom: 12,
+    fontSize: 14,
+    lineHeight: 22
+  },
+  strong: {
+    fontWeight: "600"
+  },
+  em: {
+    fontStyle: "italic"
+  },
+  code_inline: {
+    backgroundColor: "#F5F5F5",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    fontSize: 12,
+    fontFamily: "monospace"
+  },
+  code_block: {
+    backgroundColor: "#F5F5F5",
+    padding: 12,
+    borderRadius: 8,
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginVertical: 8
+  },
+  list_item: {
+    fontSize: 14,
+    lineHeight: 22
+  },
+  bullet_list: {
+    marginBottom: 12
+  },
+  ordered_list: {
+    marginBottom: 12
+  }
+};
+var markdownErrorStyles = {
+  ...markdownStyles,
+  body: {
+    ...markdownStyles.body,
+    color: "#FF3B30"
+  },
+  paragraph: {
+    ...markdownStyles.paragraph,
+    color: "#FF3B30"
+  }
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/utils/formatDate.ts
+function formatDate(timestamp) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) {
+    return "Just now";
+  }
+  if (diffMins < 60) {
+    return `${diffMins}m ago`;
+  }
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+  if (diffDays < 7) {
+    return `${diffDays}d ago`;
+  }
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() !== now.getFullYear() ? "numeric" : void 0
+  });
+}
+function UserMessage({
+  message,
+  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) })
+    ] }),
+    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" }) }) })
+  ] }) });
+}
+var styles3 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    width: "100%",
+    gap: 16
+  },
+  messageContainer: {
+    maxWidth: "85%",
+    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,
+    borderRadius: 16,
+    backgroundColor: "rgba(0, 122, 255, 0.1)",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+function MessageRow({
+  message,
+  stage = "DEV",
+  animated = false,
+  showAgentName = false,
+  agentName = "Paygent",
+  showAvatars = false,
+  showUserAvatar,
+  showAssistantAvatar,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick
+}) {
+  const actualShowUserAvatar = showUserAvatar !== void 0 ? showUserAvatar : showAvatars;
+  const actualShowAssistantAvatar = showAssistantAvatar !== void 0 ? showAssistantAvatar : showAvatars;
+  if (message.role === "user") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      UserMessage,
+      {
+        message,
+        animated,
+        showAvatar: actualShowUserAvatar
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AgentMessage,
+    {
+      message,
+      stage,
+      animated,
+      showAgentName,
+      agentName,
+      showAvatar: actualShowAssistantAvatar,
+      showExecutionSteps,
+      showStreamingDot,
+      streamingStepsText,
+      completedStepsText,
+      onExecutionTraceClick
+    }
+  );
+}
+function MessageRowSkeleton({
+  isRightAligned = false
+}) {
+  const opacity = Animated.useSharedValue(0.3);
+  React.useEffect(() => {
+    opacity.value = Animated.withRepeat(
+      Animated.withTiming(1, { duration: 1e3 }),
+      -1,
+      true
+    );
+  }, []);
+  const animatedStyle = Animated.useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: [
+        styles4.container,
+        isRightAligned ? styles4.containerRight : styles4.containerLeft
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.View,
+        {
+          style: [
+            styles4.content,
+            isRightAligned ? styles4.contentRight : styles4.contentLeft
+          ],
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.View,
+              {
+                style: [
+                  styles4.bubble,
+                  isRightAligned ? styles4.bubbleRight : styles4.bubbleLeft
+                ],
+                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%" }] })
+                ] }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Animated__default.default.View, { style: [styles4.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"
+  },
+  bubbleRight: {
+    backgroundColor: "rgba(0, 122, 255, 0.2)"
+  },
+  skeletonContainer: {
+    gap: 8
+  },
+  skeletonLine: {
+    height: 12,
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 4
+  },
+  timestamp: {
+    height: 8,
+    width: 64,
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 4,
+    marginTop: 4
+  }
+});
+function MessageList({
+  messages,
+  isLoading = false,
+  emptyStateText = "What can I help with?",
+  showEmptyStateIcon = true,
+  layout = "full-width",
+  showTimestamps = false,
+  stage = "DEV",
+  animated = false,
+  showAgentName = false,
+  agentName = "Paygent",
+  showAvatars = false,
+  showUserAvatar,
+  showAssistantAvatar,
+  showExecutionSteps = false,
+  showStreamingDot = false,
+  streamingStepsText,
+  completedStepsText,
+  onExecutionTraceClick,
+  className
+}) {
+  const flatListRef = React.useRef(null);
+  React.useEffect(() => {
+    if (messages.length > 0) {
+      setTimeout(() => {
+        flatListRef.current?.scrollToEnd({ animated: true });
+      }, 100);
+    }
+  }, [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(
+      MessageRowSkeleton,
+      {
+        isRightAligned: index % 3 === 0
+      },
+      `skeleton-${index}`
+    )) }) });
+  }
+  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.FlatList,
+    {
+      ref: flatListRef,
+      data: messages,
+      keyExtractor: (item) => item.id,
+      renderItem: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(
+        MessageRow,
+        {
+          message: item,
+          stage,
+          animated,
+          showAgentName,
+          agentName,
+          showAvatars,
+          showUserAvatar,
+          showAssistantAvatar,
+          showExecutionSteps,
+          showStreamingDot,
+          streamingStepsText,
+          completedStepsText,
+          onExecutionTraceClick
+        }
+      ),
+      contentContainerStyle: [
+        styles5.listContent,
+        layout === "centered" && styles5.listContentCentered
+      ],
+      showsVerticalScrollIndicator: true
+    }
+  );
+}
+var styles5 = reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    padding: 16,
+    gap: 16
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16
+  },
+  emptyContent: {
+    alignItems: "center",
+    gap: 16
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  emptyTitle: {
+    fontSize: 24,
+    fontWeight: "600",
+    color: "#007AFF",
+    textAlign: "center"
+  },
+  emptyTitleDefault: {
+    fontSize: 24,
+    fontWeight: "600",
+    color: "#000",
+    textAlign: "center"
+  },
+  emptySubtitle: {
+    fontSize: 14,
+    color: "#999",
+    textAlign: "center"
+  },
+  listContent: {
+    padding: 16,
+    gap: 16
+  },
+  listContentCentered: {
+    maxWidth: 672,
+    alignSelf: "center",
+    width: "100%"
+  }
+});
+function PaymanChat({
+  config,
+  callbacks = {},
+  className,
+  style,
+  children
+}) {
+  const [inputValue, setInputValue] = React.useState("");
+  const {
+    messages,
+    sendMessage,
+    isWaitingForResponse,
+    resetSession,
+    clearMessages,
+    cancelStream,
+    getSessionId,
+    getMessages
+  } = paymanTypescriptAskSdk.useChat(config, callbacks);
+  const contextValue = React.useMemo(
+    () => ({
+      resetSession,
+      clearMessages,
+      cancelStream,
+      getSessionId,
+      getMessages,
+      isWaitingForResponse
+    }),
+    [
+      resetSession,
+      clearMessages,
+      cancelStream,
+      getSessionId,
+      getMessages,
+      isWaitingForResponse
+    ]
+  );
+  const { onExecutionTraceClick } = callbacks;
+  const {
+    placeholder = "Type your message...",
+    emptyStateText = "What can I help with?",
+    sessionParams,
+    disableInput = false,
+    hasAskPermission = true,
+    streamingStepsText,
+    completedStepsText,
+    showAvatars = false,
+    showUserAvatar,
+    showAssistantAvatar,
+    showAgentName = true,
+    agentName = "Assistant",
+    showExecutionSteps = true,
+    showStreamingDot = true,
+    layout = "full-width",
+    showTimestamps = false,
+    animated = true,
+    isChatDisabled = false,
+    disabledComponent,
+    showEmptyStateIcon = true,
+    inputStyle = "rounded"
+  } = config;
+  const isSessionParamsConfigured = React.useMemo(() => {
+    if (!sessionParams) return false;
+    return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
+  }, [sessionParams?.id, sessionParams?.name]);
+  const handleSend = () => {
+    if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
+      sendMessage(inputValue.trim());
+      setInputValue("");
+    }
+  };
+  const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
+  if (isChatDisabled) {
+    if (disabledComponent) {
+      return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, style], children: [
+        children,
+        disabledComponent
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles6.container, style], children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.disabledContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.disabledText, children: "Chat is currently disabled" }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.KeyboardAvoidingView,
+    {
+      style: [styles6.container, style],
+      behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
+      keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MessageList,
+          {
+            messages,
+            isLoading: false,
+            emptyStateText,
+            showEmptyStateIcon,
+            layout,
+            showTimestamps,
+            stage: config.stage || "DEV",
+            animated,
+            showAgentName,
+            agentName,
+            showAvatars,
+            showUserAvatar,
+            showAssistantAvatar,
+            showExecutionSteps,
+            showStreamingDot,
+            streamingStepsText,
+            completedStepsText,
+            onExecutionTraceClick
+          }
+        ),
+        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(
+          ChatInput,
+          {
+            value: inputValue,
+            onChange: setInputValue,
+            onSend: handleSend,
+            onPause: cancelStream,
+            disabled: isInputDisabled,
+            placeholder,
+            isWaitingForResponse,
+            hasSelectedSession: true,
+            isSessionParamsConfigured,
+            inputStyle,
+            layout
+          }
+        )
+      ]
+    }
+  ) });
+}
+var styles6 = reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFF",
+    borderWidth: 1,
+    borderColor: "#E5E5E5",
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  disabledContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16
+  },
+  disabledText: {
+    fontSize: 14,
+    color: "#999",
+    textAlign: "center"
+  }
+});
+
+Object.defineProperty(exports, "generateId", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.generateId; }
+});
+Object.defineProperty(exports, "streamWorkflowEvents", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.streamWorkflowEvents; }
+});
+Object.defineProperty(exports, "useChat", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.useChat; }
+});
+exports.PaymanChat = PaymanChat;
+exports.PaymanChatContext = PaymanChatContext;
+exports.cn = cn;
+exports.formatDate = formatDate;
+exports.usePaymanChat = usePaymanChat;
+//# sourceMappingURL=index.native.js.map
+//# sourceMappingURL=index.native.js.map