@paymanai/payman-ask-sdk 1.2.26 → 2.0.0

package/dist/index.native.js

@@ -1,18 +1,17 @@
 'use strict';
 
-var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
-var React = require('react');
+var react = require('react');
 var reactNative = require('react-native');
-var lucideReactNative = require('lucide-react-native');
 var jsxRuntime = require('react/jsx-runtime');
-var Animated2 = require('react-native-reanimated');
-var Markdown = require('react-native-markdown-display');
+var lucideReact = require('lucide-react');
+var framerMotion = require('framer-motion');
+var reactDom = require('react-dom');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var paymanTypescriptAskSdk = require('@paymanai/payman-typescript-ask-sdk');
+var lucideReactNative = require('lucide-react-native');
 var Sentry = require('@sentry/react');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -31,1475 +30,919 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var Animated2__default = /*#__PURE__*/_interopDefault(Animated2);
-var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 var Sentry__namespace = /*#__PURE__*/_interopNamespace(Sentry);
 
 // 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;
-}
-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 AI_DISCLAIMER_TEXT = "AI can make mistakes. Please double-check responses.";
-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 = "Chat with Claude",
-  isWaitingForResponse = false,
-  hasSelectedSession = true,
-  isSessionParamsConfigured = true,
-  onClick,
-  inputStyle = "rounded",
-  layout = "full-width",
-  enableVoice = false,
-  onVoicePress,
-  voiceAvailable = false,
-  isRecording = false,
-  recordingDurationSeconds = 0,
-  onConfirmRecording,
-  onCancelRecording,
-  transcribedText,
-  onInputFocus
-}) {
-  const isInputDisabled = disabled || isWaitingForResponse;
-  const showVoiceButton = enableVoice && onVoicePress != null;
-  const isVoiceButtonDisabled = isWaitingForResponse || !voiceAvailable || !isSessionParamsConfigured;
-  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;
-    }
-    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.jsxs(
-    reactNative.View,
-    {
-      style: [
-        s.outerBar,
-        layout === "centered" && s.outerBarCentered,
-        showVoiceBar && s.outerBarVoiceMargin
-      ],
-      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,
-                onFocus: onInputFocus,
-                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,
-                  {
-                    opacity: animOpacity,
-                    transform: [{ scale: animScale }]
-                  }
-                ],
-                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,
-                      {
-                        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 }) })
-              }
-            ),
-            /* @__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" }) })
-              }
-            )
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s.disclaimerWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s.disclaimerText, children: AI_DISCLAIMER_TEXT }) })
-      ]
-    }
-  );
-}
-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
-  },
-  outerBarCentered: { alignItems: "center" },
-  disclaimerWrap: {
-    maxWidth: 672,
-    width: "100%",
-    alignSelf: "center",
-    paddingHorizontal: 12,
-    marginTop: 2
-  },
-  disclaimerText: {
-    fontSize: 11,
-    lineHeight: 15,
-    color: "#6B7280",
-    textAlign: "center"
-  },
-  column: {
-    maxWidth: 672,
-    width: "100%",
-    alignSelf: "center",
-    gap: 10
-  },
-  actionsRow: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    marginBottom: 10
-  },
-  iconBtn: {
-    width: 36,
-    height: 36,
-    justifyContent: "center",
+var PaymanChat = react.forwardRef(function PaymanChat2(_props, _ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.title, children: "PaymanChat v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.body, children: "React Native support is coming in a follow-up release. Please use the web SDK for now." })
+  ] });
+});
+var styles = reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
     alignItems: "center",
-    borderRadius: 18,
-    overflow: "hidden"
-  },
-  iconBtnInner: {
-    width: 36,
-    height: 36,
     justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.1)",
-    borderRadius: 18
-  },
-  inputWrap: {
-    width: "100%",
-    minHeight: 56,
-    justifyContent: "center",
-    paddingHorizontal: 4
-  },
-  inputWrapRelative: {
-    position: "relative"
-  },
-  inputHiddenKeepFocus: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    opacity: 0,
-    zIndex: 0
+    padding: 24
   },
-  input: {
-    minHeight: 56,
-    maxHeight: 140,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
+  title: {
     fontSize: 16,
-    color: "#1F2937",
-    lineHeight: 22
-  },
-  inputDisabled: { opacity: 0.5 },
-  rightActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  sendBtn: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    overflow: "hidden",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  sendBtnInner: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    backgroundColor: "#00858d",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  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
-  },
-  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
-  },
-  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"
+    marginBottom: 8
   },
-  voiceBarConfirmBtn: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: "#FFFFFF",
-    borderWidth: 1,
-    borderColor: VOICE_THEME_COLOR,
-    alignItems: "center",
-    justifyContent: "center"
+  body: {
+    fontSize: 13,
+    color: "#666",
+    textAlign: "center"
   }
 });
-
-// src/utils/errorMessages.ts
-var WORKFLOW_FAILED = "WORKFLOW_FAILED";
-var STREAM_NOT_STARTED = "STREAM_NOT_STARTED";
-var HTTP_ERROR_PREFIX = /^HTTP\s+(\d+)\s*:\s*([\s\S]+)$/;
-function isFriendlyWorkflowError(errorDetails) {
-  if (!errorDetails) return false;
-  return errorDetails === WORKFLOW_FAILED || errorDetails === STREAM_NOT_STARTED || errorDetails.includes(WORKFLOW_FAILED);
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function parseErrorPayload(payload) {
+var DEFAULT_WIDTH = 280;
+var DEFAULT_MIN_WIDTH = 240;
+var DEFAULT_MAX_WIDTH = 480;
+var DEFAULT_PAGE_SIZE = 20;
+function getPersistKey(config, opts) {
+  if (opts.persistKey) return opts.persistKey;
+  return `payman-chat-sidebar:${config.workflow.id ?? "unknown"}`;
+}
+function loadPersistedState(key) {
+  if (typeof window === "undefined") return null;
   try {
-    const parsed = JSON.parse(payload);
-    if (typeof parsed === "string") {
-      return { message: parsed.trim() || void 0 };
-    }
-    if (typeof parsed === "object" && parsed !== null) {
-      const record = parsed;
-      return {
-        status: typeof record.status === "number" ? record.status : void 0,
-        message: typeof record.message === "string" && record.message.trim() ? record.message.trim() : void 0
-      };
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.width !== "number" || typeof parsed.collapsed !== "boolean") {
+      return null;
     }
+    return { width: parsed.width, collapsed: parsed.collapsed };
   } catch {
+    return null;
   }
-  return {};
 }
-function getConflictErrorMessage(errorDetails) {
-  if (!errorDetails) return void 0;
-  const trimmedError = errorDetails.trim();
-  const httpMatch = trimmedError.match(HTTP_ERROR_PREFIX);
-  const httpStatus = httpMatch ? Number(httpMatch[1]) : void 0;
-  const rawPayload = (httpMatch ? httpMatch[2] : trimmedError).trim();
-  const payload = parseErrorPayload(rawPayload);
-  const status = payload.status ?? httpStatus;
-  if (status !== 409) {
-    return void 0;
-  }
-  if (payload.message) {
-    return payload.message;
+function savePersistedState(key, state) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(state));
+  } catch {
   }
-  return rawPayload || void 0;
 }
-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 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 };
+function useSessionHistory(config, options = {}, optimisticActivity) {
+  const defaultWidth = options.defaultWidth ?? DEFAULT_WIDTH;
+  const minWidth = options.minWidth ?? DEFAULT_MIN_WIDTH;
+  const maxWidth = options.maxWidth ?? DEFAULT_MAX_WIDTH;
+  const pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
+  const persistKey = react.useMemo(
+    () => getPersistKey(config, options),
+    [config.workflow.id, options.persistKey]
+  );
+  const [width, setWidthState] = react.useState(() => {
+    const persisted = loadPersistedState(persistKey);
+    return persisted?.width ?? defaultWidth;
   });
-  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 looksLikeRawError(text) {
-  if (!text || text.length < 10) return false;
-  return text.includes("errorType=") || /failed:\s*\{/.test(text);
-}
-function AgentMessage({
-  message,
-  animated = false,
-  showAgentName = false,
-  agentName = "Assistant",
-  showAvatar = false,
-  layout = "full-width",
-  showTimestamp: _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 isCancelled = message.isCancelled ?? false;
-  const currentExecutingStepId = message.currentExecutingStepId;
-  const [isStepsExpanded, setIsStepsExpanded] = React.useState(
-    isStreaming && hasSteps
+  const [collapsed, setCollapsedState] = react.useState(() => {
+    const persisted = loadPersistedState(persistKey);
+    return persisted?.collapsed ?? options.defaultCollapsed ?? false;
+  });
+  react.useEffect(() => {
+    const persisted = loadPersistedState(persistKey);
+    setWidthState(persisted?.width ?? defaultWidth);
+    setCollapsedState(persisted?.collapsed ?? options.defaultCollapsed ?? false);
+  }, [persistKey]);
+  const setWidth = react.useCallback(
+    (px) => {
+      const clamped = Math.max(minWidth, Math.min(maxWidth, Math.round(px)));
+      setWidthState(clamped);
+      savePersistedState(persistKey, { width: clamped, collapsed });
+    },
+    [collapsed, maxWidth, minWidth, persistKey]
   );
-  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 hasMeaningfulContent = content.length > 0 && !looksLikeRawError(content);
-  const completedWithNoContent = !isStreaming && !isCancelled && content.length === 0 && (message.streamProgress === "completed" || message.streamProgress === "error");
-  const conflictErrorMessage = getConflictErrorMessage(message.errorDetails);
-  const isError = !!conflictErrorMessage || (isFriendlyWorkflowError(message.errorDetails) || looksLikeRawError(content)) && !hasMeaningfulContent || completedWithNoContent;
-  const activeThinkingText = message.activeThinkingText;
-  const allThinkingText = message.allThinkingText;
-  const currentStep = React.useMemo(
-    () => message.steps?.find(
-      (s9) => s9.id === currentExecutingStepId && s9.status === "in_progress"
-    ),
-    [message.steps, currentExecutingStepId]
+  const setCollapsed = react.useCallback(
+    (value) => {
+      setCollapsedState((prev) => {
+        const next = typeof value === "function" ? value(prev) : value;
+        savePersistedState(persistKey, { width, collapsed: next });
+        return next;
+      });
+    },
+    [persistKey, width]
   );
-  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));
+  const isReady = !!(config.session?.owner?.id && (config.workflow.id || config.workflow.name));
+  const [sessions, setSessions] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [page, setPage] = react.useState(0);
+  const [hasNext, setHasNext] = react.useState(false);
+  const inFlightRef = react.useRef(null);
+  const configRef = react.useRef(config);
+  configRef.current = config;
+  const fetchPage = react.useCallback(
+    async (pageIndex, replace) => {
+      if (!isReady) return;
+      inFlightRef.current?.abort();
+      const ac = new AbortController();
+      inFlightRef.current = ac;
+      setIsLoading(true);
+      setError(null);
+      try {
+        const resp = await paymanTypescriptAskSdk.listSessions(configRef.current, {
+          page: pageIndex,
+          size: pageSize,
+          signal: ac.signal
+        });
+        setSessions((prev) => replace ? resp.data : [...prev, ...resp.data]);
+        setPage(pageIndex);
+        setHasNext(resp.pageInfo.hasNext);
+      } catch (err) {
+        if (err.name !== "AbortError") {
+          setError(err);
+        }
+      } finally {
+        if (inFlightRef.current === ac) {
+          setIsLoading(false);
+        }
       }
-      return `${count} ${stepWord} completed`;
     },
-    [message.steps, streamingStepsText, completedStepsText, totalElapsedMs]
+    [isReady, pageSize]
   );
-  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 refresh = react.useCallback(() => fetchPage(0, true), [fetchPage]);
+  const loadMore = react.useCallback(async () => {
+    if (!hasNext || isLoading) return;
+    await fetchPage(page + 1, false);
+  }, [fetchPage, hasNext, isLoading, page]);
+  react.useEffect(() => {
+    if (!optimisticActivity) return;
+    setSessions((prev) => {
+      const next = [...prev];
+      let existingIndex = next.findIndex(
+        (session) => session.sessionId === optimisticActivity.sessionId
+      );
+      if (existingIndex === -1 && optimisticActivity.previousSessionId) {
+        existingIndex = next.findIndex(
+          (session) => session.sessionId === optimisticActivity.previousSessionId
+        );
+      }
+      const existing = existingIndex >= 0 ? next.splice(existingIndex, 1)[0] : void 0;
+      const preferredTitle = existing?.sessionTitle && existing.sessionTitle.trim() && existing.sessionTitle !== "Untitled session" ? existing.sessionTitle : optimisticActivity.sessionTitle?.trim() || existing?.sessionTitle || "Untitled session";
+      const localSession = existing ?? {
+        userId: config.session?.owner?.id ?? "",
+        userLabel: config.session?.owner?.name ?? config.session?.owner?.id ?? "",
+        sessionId: optimisticActivity.sessionId,
+        workflowId: config.workflow.id ?? "",
+        workflowName: config.workflow.name,
+        workflowVersion: config.workflow.version ?? 0,
+        lastMessageAt: optimisticActivity.lastMessageAt,
+        messageCount: 0,
+        sessionTitle: preferredTitle
+      };
+      next.unshift({
+        ...localSession,
+        sessionId: optimisticActivity.sessionId,
+        lastMessageAt: optimisticActivity.lastMessageAt,
+        sessionTitle: preferredTitle
+      });
+      return next;
+    });
+  }, [
+    config.session?.owner?.id,
+    config.session?.owner?.name,
+    config.workflow.id,
+    config.workflow.name,
+    config.workflow.version,
+    optimisticActivity
+  ]);
+  react.useEffect(() => {
+    if (!isReady) return;
+    void fetchPage(0, true);
+    return () => {
+      inFlightRef.current?.abort();
+    };
+  }, [
+    isReady,
+    config.workflow.id,
+    config.workflow.stage,
+    config.session?.owner?.id
+  ]);
+  return {
+    sessions,
+    isLoading,
+    error,
+    hasNext,
+    loadMore,
+    refresh,
+    width,
+    setWidth,
+    collapsed,
+    setCollapsed,
+    minWidth,
+    maxWidth,
+    isReady
   };
-  const showSteps = showExecutionSteps && hasSteps && !isStreaming && !isError;
-  const handleStepsToggle = React.useCallback(() => {
-    setIsStepsExpanded((prev) => !prev);
+}
+var MOBILE_BREAKPOINT = 640;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  });
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
   }, []);
-  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,
+  return isMobile;
+}
+function readPortalThemeStyle(source) {
+  if (typeof window === "undefined" || !source) return {};
+  const root = source.closest(".payman-v2-root");
+  if (!(root instanceof HTMLElement)) return {};
+  const computed = window.getComputedStyle(root);
+  const style = {
+    color: computed.color,
+    fontFamily: computed.fontFamily,
+    fontSize: computed.fontSize,
+    lineHeight: computed.lineHeight
+  };
+  for (let index = 0; index < computed.length; index += 1) {
+    const name = computed.item(index);
+    if (!name.startsWith("--payman-v2-")) continue;
+    const value = computed.getPropertyValue(name).trim();
+    if (value) style[name] = value;
+  }
+  return style;
+}
+function SessionHistorySidebar({
+  config,
+  options,
+  activeSessionId,
+  loadingSessionId,
+  streamingSessionIds,
+  recentlyCompletedSessionIds,
+  optimisticActivity,
+  onSelectSession,
+  mobileOpen,
+  onMobileOpenChange
+}) {
+  const isMobile = useIsMobile();
+  const mobileThemeSourceRef = react.useRef(null);
+  const [mobilePortalThemeStyle, setMobilePortalThemeStyle] = react.useState({});
+  const history = useSessionHistory(config, options, optimisticActivity);
+  react.useEffect(() => {
+    if (!isMobile) return;
+    setMobilePortalThemeStyle(readPortalThemeStyle(mobileThemeSourceRef.current));
+  }, [isMobile, mobileOpen]);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: mobileThemeSourceRef, style: { display: "contents" }, children: [
+      !mobileOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-mobile-trigger", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          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: isError ? conflictErrorMessage ?? "Something went wrong. Please try again." : content || (isStreaming ? "Thinking..." : isCancelled ? "Request was stopped." : "")
-                    }
-                  ) })
-                ]
-              }
-            )
-          ]
+          type: "button",
+          "aria-label": "Open recent sessions",
+          title: "Recent sessions",
+          onClick: () => onMobileOpenChange(true),
+          className: "payman-sidebar-collapsed-button payman-sidebar-mobile-trigger-button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelBottomOpen, { size: 17 })
         }
-      ),
-      hasTraceData && onExecutionTraceClick && /* @__PURE__ */ jsxRuntime.jsx(
-        reactNative.Pressable,
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MobileDrawer,
         {
-          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" })
+          open: mobileOpen,
+          onOpenChange: onMobileOpenChange,
+          themeStyle: mobilePortalThemeStyle,
+          history,
+          activeSessionId,
+          loadingSessionId,
+          streamingSessionIds,
+          recentlyCompletedSessionIds,
+          onSelectSession: (s3) => {
+            onSelectSession(s3);
+            onMobileOpenChange(false);
+          }
         }
       )
-    ] }),
-    showSteps && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s2.stepsOuter, showAvatar && s2.stepsIndented], children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { onPress: handleStepsToggle, style: s2.stepsToggle, children: [
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DesktopSidebar,
+    {
+      history,
+      activeSessionId,
+      loadingSessionId,
+      streamingSessionIds,
+      recentlyCompletedSessionIds,
+      onSelectSession
+    }
+  );
+}
+function DesktopSidebar({
+  history,
+  activeSessionId,
+  loadingSessionId,
+  streamingSessionIds,
+  recentlyCompletedSessionIds,
+  onSelectSession
+}) {
+  const { width, setWidth, collapsed, setCollapsed, minWidth, maxWidth } = history;
+  const dragStateRef = react.useRef(null);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [handleHover, setHandleHover] = react.useState(false);
+  const onResizeStart = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      dragStateRef.current = { startX: e.clientX, startWidth: width };
+      setIsDragging(true);
+    },
+    [width]
+  );
+  react.useEffect(() => {
+    if (!isDragging) return;
+    const onMove = (e) => {
+      const st = dragStateRef.current;
+      if (!st) return;
+      setWidth(st.startWidth + (e.clientX - st.startX));
+    };
+    const onEnd = () => {
+      dragStateRef.current = null;
+      setIsDragging(false);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+    };
+  }, [isDragging, setWidth]);
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsedButton,
+      {
+        onExpand: () => setCollapsed(false),
+        history,
+        activeSessionId,
+        loadingSessionId,
+        streamingSessionIds,
+        recentlyCompletedSessionIds,
+        onSelectSession
+      }
+    );
+  }
+  const handleActive = handleHover || isDragging;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: "payman-sidebar payman-sidebar-desktop",
+      style: {
+        width,
+        minWidth,
+        maxWidth,
+        height: "100%",
+        minHeight: 0,
+        alignSelf: "stretch",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        transition: isDragging ? "none" : "width 140ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { onCollapse: () => setCollapsed(true) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SessionList,
+          {
+            history,
+            activeSessionId,
+            loadingSessionId,
+            streamingSessionIds,
+            recentlyCompletedSessionIds,
+            onSelectSession
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.View,
+          "div",
           {
+            role: "separator",
+            "aria-orientation": "vertical",
+            onPointerDown: onResizeStart,
+            onMouseEnter: () => setHandleHover(true),
+            onMouseLeave: () => setHandleHover(false),
+            className: "payman-sidebar-resize",
             style: {
-              transform: [{ rotate: isStepsExpanded ? "90deg" : "0deg" }]
+              position: "absolute",
+              top: 0,
+              right: -4,
+              width: 8,
+              height: "100%",
+              cursor: "col-resize",
+              userSelect: "none",
+              touchAction: "none",
+              zIndex: 2,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.ChevronRight, { size: 12, color: "rgba(156,163,175,0.6)" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                style: {
+                  width: 3,
+                  height: 36,
+                  borderRadius: 999,
+                  background: handleActive ? "var(--payman-v2-text-3)" : "transparent",
+                  opacity: handleActive ? 1 : 0,
+                  transition: "opacity 140ms ease, background 140ms ease"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var POPOVER_LEAVE_DELAY_MS = 200;
+function CollapsedButton({
+  onExpand,
+  history,
+  activeSessionId,
+  loadingSessionId,
+  streamingSessionIds,
+  recentlyCompletedSessionIds,
+  onSelectSession
+}) {
+  const [hoverOpen, setHoverOpen] = react.useState(false);
+  const leaveTimerRef = react.useRef(null);
+  const openPopover = () => {
+    if (leaveTimerRef.current) clearTimeout(leaveTimerRef.current);
+    setHoverOpen(true);
+  };
+  const schedulePopoverClose = () => {
+    if (leaveTimerRef.current) clearTimeout(leaveTimerRef.current);
+    leaveTimerRef.current = setTimeout(
+      () => setHoverOpen(false),
+      POPOVER_LEAVE_DELAY_MS
+    );
+  };
+  react.useEffect(
+    () => () => {
+      if (leaveTimerRef.current) clearTimeout(leaveTimerRef.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "payman-sidebar-collapsed",
+      onMouseEnter: openPopover,
+      onMouseLeave: schedulePopoverClose,
+      style: { position: "relative", alignSelf: "flex-start" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Expand sidebar",
+            title: "Expand sidebar",
+            onClick: onExpand,
+            className: "payman-sidebar-collapsed-button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { size: 16 })
           }
         ),
-        /* @__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 });
+        hoverOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "payman-sidebar-popover",
+            onMouseEnter: openPopover,
+            onMouseLeave: schedulePopoverClose,
+            style: {
+              position: "absolute",
+              left: "calc(100% + 6px)",
+              top: 6,
+              width: Math.min(history.width, 320),
+              maxHeight: 480,
+              zIndex: 50,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SessionList,
+                {
+                  history,
+                  activeSessionId,
+                  loadingSessionId,
+                  streamingSessionIds,
+                  recentlyCompletedSessionIds,
+                  onSelectSession: (s3) => {
+                    onSelectSession(s3);
+                    setHoverOpen(false);
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-var s2 = reactNative.StyleSheet.create({
-  outerWrap: { width: "100%" },
-  row: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 10,
-    width: "100%"
-  },
-  // Avatar
-  avatarWrap: { width: 28, height: 28, marginTop: 2 },
-  dotContainer: {
-    width: 28,
-    height: 28,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  streamDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: "#00858d",
-    opacity: 0.75
-  },
-  avatar: {
-    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"
-  },
-  // Bubble column
-  // Bubble column — flex: 1 so it fills available width on mobile (still capped by maxWidth)
-  bubbleCol: { flex: 1, minWidth: 0, maxWidth: "92%", flexShrink: 1 },
-  bubbleColCentered: { maxWidth: "95%" },
-  // Badge
-  badgeWrap: { marginBottom: 6 },
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 10,
-    alignSelf: "flex-start"
-  },
-  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%",
-    paddingHorizontal: 14,
-    paddingVertical: 10
-  },
-  bubbleDefault: {
-    backgroundColor: "rgba(0,0,0,0.04)",
-    borderRadius: 16,
-    borderTopLeftRadius: 4
-  },
-  bubbleCentered: {
-    backgroundColor: "#FFFFFF",
-    borderWidth: 1,
-    borderColor: "rgba(0,0,0,0.08)",
-    borderRadius: 16,
-    borderTopLeftRadius: 4
-  },
-  bubbleError: {
-    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: 14,
-    lineHeight: 21,
-    fontWeight: "600",
-    color: "rgba(0,0,0,0.35)",
-    marginBottom: 2
-  },
-  // All body text inside assistant bubble: same size as query (text-sm = 14px)
-  bubbleBodyText: {
-    fontSize: 14,
-    lineHeight: 21,
-    color: "#9CA3AF",
-    flex: 1,
-    minWidth: 0
-  },
-  // 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
-  },
-  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"
-  },
-  dotMuted: {
-    width: 5,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: "rgba(0,0,0,0.12)"
-  },
-  stepText: {
-    fontSize: 12,
-    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: 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"
-  },
-  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
-  },
-  thinkingToggleText: {
-    fontSize: 10,
-    color: "rgba(156,163,175,0.5)"
-  },
-  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: 21, color: "#1F2937" },
-  paragraph: { marginBottom: 8, fontSize: 14, lineHeight: 21 },
-  strong: { fontWeight: "600" },
-  em: { fontStyle: "italic" },
-  code_inline: {
-    backgroundColor: "rgba(0,0,0,0.04)",
-    paddingHorizontal: 5,
-    paddingVertical: 2,
-    borderRadius: 4,
-    fontSize: 12,
-    fontFamily: "monospace"
-  },
-  code_block: {
-    backgroundColor: "rgba(0,0,0,0.04)",
-    padding: 12,
-    borderRadius: 8,
-    fontSize: 12,
-    fontFamily: "monospace",
-    marginVertical: 8
-  },
-  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"
-  },
-  heading2: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginBottom: 6,
-    marginTop: 10,
-    color: "#1F2937"
-  },
-  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: "#EF4444" },
-  paragraph: { ...markdownStyles.paragraph, color: "#EF4444" }
-};
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+function MobileDrawer({
+  open,
+  onOpenChange,
+  themeStyle,
+  history,
+  activeSessionId,
+  loadingSessionId,
+  streamingSessionIds,
+  recentlyCompletedSessionIds,
+  onSelectSession
+}) {
+  if (!open || typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "payman-sidebar-backdrop",
+        onClick: () => onOpenChange(false),
+        style: themeStyle,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.18, ease: "easeOut" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.aside,
+          {
+            className: "payman-sidebar payman-sidebar-sheet",
+            "data-open": "true",
+            onClick: (e) => e.stopPropagation(),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Recent sessions",
+            initial: { y: 28, opacity: 0.96 },
+            animate: { y: 0, opacity: 1 },
+            transition: {
+              type: "spring",
+              stiffness: 380,
+              damping: 32,
+              mass: 0.92
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-sheet-grabber", "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { onCollapse: () => onOpenChange(false), mobile: true }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SessionList,
+                {
+                  history,
+                  activeSessionId,
+                  loadingSessionId,
+                  streamingSessionIds,
+                  recentlyCompletedSessionIds,
+                  onSelectSession
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
 }
-
-// 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 SidebarHeader({
+  onCollapse,
+  mobile = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-header", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Recent sessions" }),
+    onCollapse && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": mobile ? "Close recent sessions" : "Collapse sidebar",
+        title: mobile ? "Close recent sessions" : "Collapse sidebar",
+        onClick: onCollapse,
+        children: mobile ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 14 })
+      }
+    )
+  ] });
 }
-function captureSentryError(error, context) {
-  if (!Sentry__namespace.getClient()) return;
-  const tags = {};
-  if (context.executionId) tags.executionId = context.executionId;
-  if (context.sessionId) tags.sessionId = context.sessionId;
-  if (context.route) tags.route = context.route;
-  if (context.cfRay) tags.cfRay = context.cfRay;
-  if (context.customerId) tags.customerId = context.customerId;
-  if (context.customerEmail) tags.customerEmail = context.customerEmail;
-  const contexts = {
-    chat_session: {
-      sessionId: context.sessionId ?? null,
-      sessionOwnerId: context.sessionOwnerId ?? null,
-      executionId: context.executionId ?? null,
-      workflowName: context.workflowName ?? null,
-      cfRay: context.cfRay ?? null,
-      customerId: context.customerId ?? null,
-      customerEmail: context.customerEmail ?? null
+function SessionList({
+  history,
+  activeSessionId,
+  loadingSessionId,
+  streamingSessionIds,
+  recentlyCompletedSessionIds,
+  onSelectSession
+}) {
+  const listRef = react.useRef(null);
+  const { sessions, hasNext, isLoading, error, loadMore, isReady, refresh } = history;
+  const formattedNow = react.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const sessionGroups = react.useMemo(
+    () => groupSessionsByDate(sessions, formattedNow),
+    [sessions, formattedNow]
+  );
+  if (!isReady) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-notice", children: [
+      "Pass ",
+      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.id" }),
+      " (or",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "workflow.name" }),
+      ") and",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(InlineCode, { children: "session.owner.id" }),
+      " in your chat config to view recent sessions."
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: listRef,
+      className: "payman-sidebar-list",
+      style: { flex: "1 1 0%", minHeight: 0, overflowY: "auto" },
+      children: [
+        error && sessions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { onRetry: () => void refresh() }),
+        !error && sessions.length === 0 && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-loading", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 18 }) }),
+        !error && sessions.length === 0 && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, {}),
+        sessionGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            className: "payman-sidebar-group",
+            "aria-label": group.label,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-group-label", children: group.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-group-items", children: group.sessions.map((s3) => /* @__PURE__ */ jsxRuntime.jsx(
+                SessionRow,
+                {
+                  session: s3,
+                  isActive: s3.sessionId === activeSessionId,
+                  isLoading: s3.sessionId === loadingSessionId,
+                  isStreaming: streamingSessionIds?.has(s3.sessionId) ?? false,
+                  isRecentlyCompleted: recentlyCompletedSessionIds?.has(s3.sessionId) ?? false,
+                  onSelect: onSelectSession
+                },
+                s3.sessionId
+              )) })
+            ]
+          },
+          group.key
+        )),
+        sessions.length > 0 && hasNext && /* @__PURE__ */ jsxRuntime.jsx(
+          LoadMoreButton,
+          {
+            isLoading,
+            onClick: () => void loadMore()
+          }
+        ),
+        sessions.length > 0 && error && /* @__PURE__ */ jsxRuntime.jsx(
+          LoadMoreButton,
+          {
+            isLoading: false,
+            label: "Retry",
+            onClick: () => void refresh()
+          }
+        )
+      ]
     }
-  };
-  if (typeof error === "string") {
-    Sentry__namespace.captureMessage(error, { level: "error", tags, contexts });
-  } else {
-    Sentry__namespace.captureException(error, { tags, contexts });
-  }
-}
-function UserMessage({
-  message,
-  animated = false,
-  showAvatar = false
-}) {
-  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: s3.avatarWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s3.avatar, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReactNative.User, { size: 13, color: "#FFFFFF" }) }) })
-  ] }) });
+  );
 }
-var s3 = reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    width: "100%",
-    gap: 10
-  },
-  messageCol: {
-    maxWidth: "80%",
-    minWidth: 0,
-    flexDirection: "column",
-    alignItems: "flex-end"
-  },
-  bubble: {
-    borderRadius: 16,
-    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"
-  }
-});
-function MessageRow({
-  message,
-  stage = "DEV",
-  animated = false,
-  showAgentName = false,
-  agentName = "Paygent",
-  showAvatars = false,
-  showUserAvatar,
-  showAssistantAvatar,
-  showExecutionSteps = false,
-  showStreamingDot = false,
-  streamingStepsText,
-  completedStepsText,
-  onExecutionTraceClick
+function SessionRow({
+  session,
+  isActive,
+  isLoading,
+  isStreaming,
+  isRecentlyCompleted,
+  onSelect
 }) {
-  const actualShowUserAvatar = showUserAvatar !== void 0 ? showUserAvatar : showAvatars;
-  const actualShowAssistantAvatar = showAssistantAvatar !== void 0 ? showAssistantAvatar : showAvatars;
-  if (message.role === "user") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      UserMessage,
+  let statusNode = null;
+  let statusLabel;
+  if (isStreaming) {
+    statusNode = /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "payman-sidebar-row-status payman-sidebar-row-status-live",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-live-dot" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-live-track" })
+        ]
+      }
+    );
+    statusLabel = "Running";
+  } else if (isRecentlyCompleted) {
+    statusNode = /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
       {
-        message,
-        animated,
-        showAvatar: actualShowUserAvatar
+        className: "payman-sidebar-row-status payman-sidebar-row-status-done",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 11, strokeWidth: 2.5 })
       }
     );
+    statusLabel = "Just finished";
+  } else if (isLoading) {
+    statusNode = /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "payman-sidebar-row-spinner" });
+    statusLabel = "Loading";
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    AgentMessage,
+    "button",
     {
-      message,
-      stage,
-      animated,
-      showAgentName,
-      agentName,
-      showAvatar: actualShowAssistantAvatar,
-      showExecutionSteps,
-      showStreamingDot,
-      streamingStepsText,
-      completedStepsText,
-      onExecutionTraceClick
+      type: "button",
+      onClick: () => onSelect(session),
+      className: cn("payman-sidebar-row", isActive && "is-active"),
+      title: statusLabel ? `${session.sessionTitle || "Untitled session"} \u2014 ${statusLabel}` : session.sessionTitle,
+      "aria-busy": isLoading || isStreaming || void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "payman-sidebar-row-main", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "payman-sidebar-row-title", children: session.sessionTitle || "Untitled session" }),
+        statusNode
+      ] })
     }
   );
 }
-function MessageRowSkeleton({
-  isRightAligned = false
+function EmptyState() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-empty", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-empty-icon", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { size: 18 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-empty-title", children: "No sessions yet" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-empty-desc", children: "Your conversations will appear here once you start chatting." })
+  ] });
+}
+function ErrorState({ onRetry }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payman-sidebar-error", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-error-icon", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 18 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-error-title", children: "Couldn't load sessions" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payman-sidebar-error-desc", children: "Check your connection and try again." }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      LoadMoreButton,
+      {
+        isLoading: false,
+        label: "Try again",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 12 }),
+        onClick: onRetry
+      }
+    )
+  ] });
+}
+function LoadMoreButton({
+  isLoading,
+  onClick,
+  label,
+  icon
 }) {
-  const opacity = Animated2.useSharedValue(0.3);
-  React.useEffect(() => {
-    opacity.value = Animated2.withRepeat(Animated2.withTiming(0.8, { duration: 1200 }), -1, true);
-  }, []);
-  const animatedStyle = Animated2.useAnimatedStyle(() => ({ opacity: opacity.value }));
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
+    "button",
     {
-      style: [s4.container, isRightAligned ? s4.containerRight : s4.containerLeft],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        reactNative.View,
-        {
-          style: [s4.content, isRightAligned ? s4.contentRight : s4.contentLeft],
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Animated2__default.default.View,
-              {
-                style: [
-                  s4.bubble,
-                  isRightAligned ? s4.bubbleRight : s4.bubbleLeft,
-                  animatedStyle
-                ],
-                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(Animated2__default.default.View, { style: [s4.timestamp, animatedStyle] })
-          ]
-        }
-      )
+      type: "button",
+      onClick,
+      disabled: isLoading,
+      className: "payman-sidebar-load-more",
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label ?? "Load more sessions" })
+      ] })
     }
   );
 }
-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.08)",
-    borderBottomRightRadius: 4
-  },
-  skeletonWrap: { gap: 8 },
-  line: { height: 10, backgroundColor: "rgba(0,0,0,0.08)", borderRadius: 5 },
-  timestamp: {
-    height: 6,
-    width: 50,
-    backgroundColor: "rgba(0,0,0,0.06)",
-    borderRadius: 3,
-    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,
-  isWaitingForResponse = false,
-  scrollToEndHandleRef
-}) {
-  const flatListRef = React.useRef(null);
-  const messagesRef = React.useRef(messages);
-  messagesRef.current = messages;
-  const prevWaitingRef = React.useRef(isWaitingForResponse);
-  const prevLastStreamingRef = React.useRef(void 0);
-  const scrollToEnd = React.useCallback(() => {
-    flatListRef.current?.scrollToEnd({ animated: true });
-  }, []);
-  const scrollToEndOnAssistantLayout = React.useCallback(() => {
-    const list = messagesRef.current;
-    const last = list[list.length - 1];
-    const shouldFollow = isWaitingForResponse || last?.role === "assistant" && last.isStreaming;
-    if (!shouldFollow) return;
-    const run = () => flatListRef.current?.scrollToEnd({ animated: false });
-    run();
-    requestAnimationFrame(run);
-    setTimeout(run, 16);
-    setTimeout(run, 48);
-  }, [isWaitingForResponse]);
-  React.useEffect(() => {
-    if (!scrollToEndHandleRef) return;
-    scrollToEndHandleRef.current = scrollToEnd;
-    return () => {
-      scrollToEndHandleRef.current = null;
-    };
-  }, [scrollToEndHandleRef, scrollToEnd]);
-  React.useEffect(() => {
-    if (messages.length > 0) {
-      setTimeout(() => {
-        scrollToEnd();
-      }, 100);
-    }
-  }, [messages.length, scrollToEnd]);
-  React.useEffect(() => {
-    const last = messages[messages.length - 1];
-    const streaming = last?.isStreaming;
-    if (prevLastStreamingRef.current === true && streaming === false) {
-      setTimeout(() => scrollToEnd(), 0);
+function Spinner({ size = 12 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "payman-sidebar-spinner",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        border: `${Math.max(1.5, size / 8)}px solid var(--payman-v2-border-1)`,
+        borderTopColor: "var(--payman-v2-text-2)",
+        display: "inline-block",
+        animation: "payman-v2-spin 0.7s linear infinite"
+      }
     }
-    prevLastStreamingRef.current = streaming;
-  }, [messages, scrollToEnd]);
-  React.useEffect(() => {
-    if (prevWaitingRef.current === true && isWaitingForResponse === false) {
-      setTimeout(() => scrollToEnd(), 50);
+  );
+}
+function InlineCode({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: "payman-sidebar-inline-code", children });
+}
+function groupSessionsByDate(sessions, now) {
+  const groups = /* @__PURE__ */ new Map();
+  const orderedGroups = [];
+  for (const session of sessions) {
+    const bucket = getSessionDateBucket(session.lastMessageAt, now);
+    const existing = groups.get(bucket.key);
+    if (existing) {
+      existing.sessions.push(session);
+      continue;
     }
-    prevWaitingRef.current = isWaitingForResponse;
-  }, [isWaitingForResponse, scrollToEnd]);
-  if (isLoading) {
-    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
-      },
-      `skeleton-${index}`
-    )) }) });
+    const group = {
+      key: bucket.key,
+      label: bucket.label,
+      sessions: [session]
+    };
+    groups.set(bucket.key, group);
+    orderedGroups.push(group);
   }
-  if (messages.length === 0) {
-    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 orderedGroups;
+}
+function getSessionDateBucket(iso, now) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return { key: "older", label: "Older" };
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.FlatList,
-    {
-      ref: flatListRef,
-      style: s5.list,
-      data: messages,
-      keyExtractor: (item) => item.id,
-      keyboardShouldPersistTaps: "handled",
-      keyboardDismissMode: "interactive",
-      renderItem: ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(
-        MessageRow,
-        {
-          message: item,
-          stage,
-          animated,
-          showAgentName,
-          agentName,
-          showAvatars,
-          showUserAvatar,
-          showAssistantAvatar,
-          showExecutionSteps,
-          showStreamingDot,
-          streamingStepsText,
-          completedStepsText,
-          onExecutionTraceClick
-        }
-      ),
-      contentContainerStyle: [
-        s5.listContent,
-        layout === "centered" && s5.listContentCentered
-      ],
-      ListFooterComponent: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s5.listFooterSpacer }),
-      onContentSizeChange: scrollToEndOnAssistantLayout,
-      showsVerticalScrollIndicator: false
-    }
+  const dayKey = [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, "0"),
+    String(date.getDate()).padStart(2, "0")
+  ].join("-");
+  const sessionDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const dayDiff = Math.round(
+    (today.getTime() - sessionDay.getTime()) / 864e5
   );
+  if (dayDiff <= 0) return { key: dayKey, label: "Today" };
+  if (dayDiff === 1) return { key: dayKey, label: "Yesterday" };
+  if (dayDiff < 7) {
+    return {
+      key: dayKey,
+      label: date.toLocaleDateString(void 0, { weekday: "long" })
+    };
+  }
+  const sameYear = date.getFullYear() === now.getFullYear();
+  return {
+    key: dayKey,
+    label: date.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric",
+      year: sameYear ? void 0 : "numeric"
+    })
+  };
 }
-var s5 = reactNative.StyleSheet.create({
-  /** Fills space above the input so messages stay in the scroll region, not behind it. */
-  list: { flex: 1 },
-  container: { flex: 1 },
-  skeletonContent: { padding: 16, gap: 16 },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: "center",
+function ChatHeader({
+  sessionId,
+  onCopySessionId,
+  onNewSession,
+  showResetSession = false,
+  children
+}) {
+  const [copiedSessionId, setCopiedSessionId] = react.useState(false);
+  const handleCopySessionId = () => {
+    if (sessionId && onCopySessionId) {
+      reactNative.Clipboard.setString(sessionId);
+      setCopiedSessionId(true);
+      setTimeout(() => setCopiedSessionId(false), 2e3);
+      onCopySessionId(sessionId);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.left, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.title, children: "Chat" }),
+      sessionId && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Pressable, { onPress: handleCopySessionId, style: styles2.sessionChip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.sessionText, children: sessionId.length > 20 ? `${sessionId.substring(0, 8)}\u2026${sessionId.slice(-8)}` : sessionId }),
+        copiedSessionId ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.copyHint, children: "copied" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.copyHint, children: "copy" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.right, children: [
+      showResetSession && onNewSession && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: onNewSession, style: styles2.btn, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.btnText, children: "Reset" }) }),
+      children
+    ] })
+  ] });
+}
+var styles2 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
     alignItems: "center",
-    padding: 24
-  },
-  emptyContent: { alignItems: "center", gap: 10, maxWidth: 280 },
-  iconContainer: {
-    width: 56,
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
     height: 56,
-    borderRadius: 16,
-    backgroundColor: "rgba(0,0,0,0.03)",
-    borderWidth: reactNative.StyleSheet.hairlineWidth,
-    borderColor: "rgba(0,0,0,0.06)",
-    justifyContent: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(0,0,0,0.08)",
+    backgroundColor: "rgba(255,255,255,0.85)"
+  },
+  left: { flex: 1, minWidth: 0 },
+  right: { flexDirection: "row", alignItems: "center", gap: 6 },
+  title: { fontSize: 14, fontWeight: "600", color: "#111" },
+  sessionChip: {
+    flexDirection: "row",
     alignItems: "center",
-    marginBottom: 4
-  },
-  emptyTitle: {
-    fontSize: 20,
-    fontWeight: "600",
-    color: "#1F2937",
-    textAlign: "center"
-  },
-  emptySubtitle: {
-    fontSize: 14,
-    color: "#9CA3AF",
-    textAlign: "center",
-    lineHeight: 20
+    gap: 4,
+    marginTop: 2
   },
-  listContent: {
-    paddingTop: 16,
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    gap: 16
+  sessionText: { fontSize: 10, color: "#666", fontFamily: "Menlo" },
+  copyHint: { fontSize: 9, color: "#999" },
+  btn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.12)"
   },
-  listContentCentered: { maxWidth: 672, alignSelf: "center", width: "100%" },
-  /** Extra space below last message — thinking/stream text can wrap to multiple lines before scroll runs. */
-  listFooterSpacer: {
-    height: reactNative.Platform.select({ ios: 52, android: 60, default: 52 })
-  }
+  btnText: { fontSize: 12, color: "#555" }
 });
 
 // src/assets/payman-mono-crop-blue.png
@@ -1516,20 +959,20 @@ function OtpInput({
   disabled = false,
   error = false
 }) {
-  const inputRefs = React.useRef([]);
-  const shakeAnim = React.useRef(new reactNative.Animated.Value(0)).current;
-  const scaleAnim = React.useRef(new reactNative.Animated.Value(1)).current;
-  const prevLenRef = React.useRef(0);
-  const [internalError, setInternalError] = React.useState(false);
+  const inputRefs = react.useRef([]);
+  const shakeAnim = react.useRef(new reactNative.Animated.Value(0)).current;
+  const scaleAnim = react.useRef(new reactNative.Animated.Value(1)).current;
+  const prevLenRef = react.useRef(0);
+  const [internalError, setInternalError] = react.useState(false);
   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);
   const isFull = value.length === safeMaxLength && /^\d+$/.test(value);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!disabled) {
       inputRefs.current[0]?.focus();
     }
   }, [disabled]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!error) {
       setInternalError(false);
       return;
@@ -1540,7 +983,7 @@ function OtpInput({
       reactNative.Animated.timing(shakeAnim, { toValue: 0, duration: 0, useNativeDriver: true })
     ]).start();
   }, [error, shakeAnim]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (isFull && prevLenRef.current < safeMaxLength) {
       reactNative.Animated.sequence([
         reactNative.Animated.timing(scaleAnim, { toValue: 1.04, duration: COMPLETE_PULSE_MS * 0.4, useNativeDriver: true }),
@@ -1596,7 +1039,7 @@ function OtpInput({
     reactNative.Animated.View,
     {
       style: [
-        s6.container,
+        s.container,
         { transform: [{ translateX: shakeTranslate }, { scale: scaleAnim }] }
       ],
       children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1613,9 +1056,9 @@ function OtpInput({
           onKeyPress: ({ nativeEvent }) => handleKeyPress(i, nativeEvent.key),
           onFocus: () => inputRefs.current[i]?.setNativeProps({ selection: { start: 0, end: 1 } }),
           style: [
-            s6.input,
-            disabled && s6.inputDisabled,
-            internalError && s6.inputError
+            s.input,
+            disabled && s.inputDisabled,
+            internalError && s.inputError
           ],
           accessibilityLabel: `Digit ${i + 1}`
         },
@@ -1630,7 +1073,7 @@ var PAYMAN_OTP = {
   fg: "#18181b",
   disabledBg: "rgba(0,0,0,0.03)"
 };
-var s6 = reactNative.StyleSheet.create({
+var s = reactNative.StyleSheet.create({
   container: { flexDirection: "row", gap: 8, justifyContent: "center" },
   input: {
     width: 44,
@@ -1718,17 +1161,17 @@ 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 [keyboardVisible, setKeyboardVisible] = React.useState(false);
-  const [otpError, setOtpError] = React.useState(false);
-  const lastAutoSubmittedRef = React.useRef("");
-  const submitInFlightRef = React.useRef(false);
-  const submitGenerationRef = React.useRef(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 [keyboardVisible, setKeyboardVisible] = react.useState(false);
+  const [otpError, setOtpError] = react.useState(false);
+  const lastAutoSubmittedRef = react.useRef("");
+  const submitInFlightRef = react.useRef(false);
+  const submitGenerationRef = react.useRef(0);
   const schema = getOtpSchemaFromRequest(userActionRequest?.requestedSchema);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const show = reactNative.Keyboard.addListener(
       reactNative.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
       () => setKeyboardVisible(true)
@@ -1742,11 +1185,11 @@ function UserActionModal({
       hide.remove();
     };
   }, []);
-  const resetActionState = React.useCallback(() => {
+  const resetActionState = react.useCallback(() => {
     setIsSubmitting(false);
     setActionType(null);
   }, []);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (isOpen) {
       setResendCooldownRemaining(RESEND_OTP_COOLDOWN_SECONDS);
     } else {
@@ -1759,7 +1202,7 @@ function UserActionModal({
       submitGenerationRef.current += 1;
     }
   }, [isOpen, resetActionState]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (resendCooldownRemaining <= 0) return;
     const timer = setTimeout(
       () => setResendCooldownRemaining((prev) => prev - 1),
@@ -1767,7 +1210,7 @@ function UserActionModal({
     );
     return () => clearTimeout(timer);
   }, [resendCooldownRemaining]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (clearOtpTrigger > 0) {
       setOtpError(true);
       const t = setTimeout(() => {
@@ -1778,7 +1221,7 @@ function UserActionModal({
       return () => clearTimeout(t);
     }
   }, [clearOtpTrigger, resetActionState]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen || !isSubmitting) return;
     if (actionType !== "approve" && actionType !== "reject") return;
     const timeout = setTimeout(
@@ -1787,7 +1230,7 @@ function UserActionModal({
     );
     return () => clearTimeout(timeout);
   }, [isOpen, isSubmitting, actionType, resetActionState]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isOpen || !userActionRequest) return;
     if (otp.length !== schema.maxLength || !/^\d+$/.test(otp)) {
       return;
@@ -1820,7 +1263,7 @@ function UserActionModal({
     onApprove,
     resetActionState
   ]);
-  const handleReject = React.useCallback(async () => {
+  const handleReject = react.useCallback(async () => {
     setIsSubmitting(true);
     setActionType("reject");
     try {
@@ -1829,7 +1272,7 @@ function UserActionModal({
       resetActionState();
     }
   }, [onReject, resetActionState]);
-  const handleResend = React.useCallback(async () => {
+  const handleResend = react.useCallback(async () => {
     if (resendCooldownRemaining > 0) return;
     setIsSubmitting(true);
     setActionType("resend");
@@ -1860,25 +1303,25 @@ function UserActionModal({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.KeyboardAvoidingView,
         {
-          style: [s7.keyboardAvoid, { justifyContent: modalPosition }],
+          style: [s2.keyboardAvoid, { justifyContent: modalPosition }],
           behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
           keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 0 : 20,
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s7.modalOverlay, { justifyContent: modalPosition }], children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [s2.modalOverlay, { justifyContent: modalPosition }], children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.ScrollView,
             {
               contentContainerStyle: [
-                s7.scrollContent,
+                s2.scrollContent,
                 { justifyContent: modalPosition }
               ],
               showsVerticalScrollIndicator: false,
               keyboardShouldPersistTaps: "handled",
-              children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s7.dialog, { width: DIALOG_MAX_WIDTH }], children: [
+              children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [s2.dialog, { width: DIALOG_MAX_WIDTH }], children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.Pressable,
                   {
                     onPress: handleReject,
                     disabled: isSubmitting,
-                    style: s7.closeBtn,
+                    style: s2.closeBtn,
                     accessibilityLabel: "Close",
                     hitSlop: 8,
                     children: ({ pressed }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1894,19 +1337,19 @@ function UserActionModal({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.Text,
                   {
-                    style: s7.description,
+                    style: s2.description,
                     accessibilityLabel: "payman-modal-desc",
                     children: userActionRequest.message
                   }
                 ),
-                isPayment ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.transferLabel, children: "Pay" }) : null,
-                isPayment && userActionRequest.metadata?.amount ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.heroAmount, children: formatAmountForDisplay(userActionRequest.metadata.amount) }) : null,
-                isPayee ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.transferLabel, children: "Create Payee" }) : null,
-                isPayee && userActionRequest.metadata?.payeeName ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.heroPayeeWrap, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.heroPayeeName, children: userActionRequest.metadata.payeeName }),
-                  userActionRequest.metadata.payeeType ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.heroPayeeType, children: userActionRequest.metadata.payeeType }) : null
+                isPayment ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.transferLabel, children: "Pay" }) : null,
+                isPayment && userActionRequest.metadata?.amount ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.heroAmount, children: formatAmountForDisplay(userActionRequest.metadata.amount) }) : null,
+                isPayee ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.transferLabel, children: "Create Payee" }) : null,
+                isPayee && userActionRequest.metadata?.payeeName ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.heroPayeeWrap, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.heroPayeeName, children: userActionRequest.metadata.payeeName }),
+                  userActionRequest.metadata.payeeType ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.heroPayeeType, children: userActionRequest.metadata.payeeType }) : null
                 ] }) : null,
-                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.otpWrap, accessibilityLabel: "payman-otp-wrap", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.otpWrap, accessibilityLabel: "payman-otp-wrap", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     OtpInput,
                     {
@@ -1917,7 +1360,7 @@ function UserActionModal({
                       error: otpError
                     }
                   ),
-                  isVerifying ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.verifyingRow, children: [
+                  isVerifying ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.verifyingRow, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       reactNative.ActivityIndicator,
                       {
@@ -1925,10 +1368,10 @@ function UserActionModal({
                         color: PAYMAN_BRAND_GREEN
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.verifyingText, children: MODAL_CONTENT.LOADING_APPROVE })
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.verifyingText, children: MODAL_CONTENT.LOADING_APPROVE })
                   ] }) : null
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.linksCol, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.linksCol, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     reactNative.Pressable,
                     {
@@ -1940,9 +1383,9 @@ function UserActionModal({
                         reactNative.Text,
                         {
                           style: [
-                            s7.linkText,
+                            s2.linkText,
                             pressed && { opacity: 0.6 },
-                            (isSubmitting || resendCooldownRemaining > 0) && s7.linkDisabled
+                            (isSubmitting || resendCooldownRemaining > 0) && s2.linkDisabled
                           ],
                           children: actionType === "resend" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: MODAL_CONTENT.LOADING_RESEND }) : resendCooldownRemaining > 0 ? `${MODAL_CONTENT.RESEND_AVAILABLE_IN} ${resendCooldownRemaining}s` : BUTTON_LABELS.RESEND_CODE
                         }
@@ -1968,11 +1411,11 @@ function UserActionModal({
                           reactNative.Text,
                           {
                             style: [
-                              s7.linkText,
+                              s2.linkText,
                               pressed && !isSubmitting && {
                                 color: PAYMAN.foreground
                               },
-                              isSubmitting && !isCancelling && s7.linkDisabled
+                              isSubmitting && !isCancelling && s2.linkDisabled
                             ],
                             children: isCancelling ? MODAL_CONTENT.LOADING_REJECT : isPayee ? BUTTON_LABELS.CANCEL : BUTTON_LABELS.CANCEL_TRANSFER
                           }
@@ -1981,19 +1424,19 @@ function UserActionModal({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s7.footer, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.footerPrefix, children: MODAL_CONTENT.SECURED_BY_PREFIX }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: s2.footer, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.footerPrefix, children: MODAL_CONTENT.SECURED_BY_PREFIX }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     reactNative.Image,
                     {
                       source: { uri: payman_mono_crop_blue_default },
-                      style: s7.footerLogo,
+                      style: s2.footerLogo,
                       resizeMode: "contain",
                       accessibilityElementsHidden: true,
                       importantForAccessibility: "no-hide-descendants"
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s7.footerBrand, children: MODAL_CONTENT.SECURED_BY_BRAND })
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s2.footerBrand, children: MODAL_CONTENT.SECURED_BY_BRAND })
                 ] })
               ] })
             }
@@ -2003,7 +1446,7 @@ function UserActionModal({
     }
   );
 }
-var s7 = reactNative.StyleSheet.create({
+var s2 = reactNative.StyleSheet.create({
   keyboardAvoid: {
     flex: 1,
     width: "100%"
@@ -2144,297 +1587,222 @@ var s7 = reactNative.StyleSheet.create({
     color: "#0A3B44"
   }
 });
-var DEFAULT_USER_ACTION_STATE = {
-  request: null,
-  clearOtpTrigger: 0
-};
-var NOOP_ASYNC = async () => {
-};
-function PaymanChat({
+
+// 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 captureSentryError(error, context) {
+  if (!Sentry__namespace.getClient()) return;
+  const tags = {};
+  if (context.executionId) tags.executionId = context.executionId;
+  if (context.sessionId) tags.sessionId = context.sessionId;
+  if (context.route) tags.route = context.route;
+  if (context.cfRay) tags.cfRay = context.cfRay;
+  if (context.customerId) tags.customerId = context.customerId;
+  if (context.customerEmail) tags.customerEmail = context.customerEmail;
+  const contexts = {
+    chat_session: {
+      sessionId: context.sessionId ?? null,
+      sessionOwnerId: context.sessionOwnerId ?? null,
+      executionId: context.executionId ?? null,
+      workflowName: context.workflowName ?? null,
+      cfRay: context.cfRay ?? null,
+      customerId: context.customerId ?? null,
+      customerEmail: context.customerEmail ?? null
+    }
+  };
+  if (typeof error === "string") {
+    Sentry__namespace.captureMessage(error, { level: "error", tags, contexts });
+  } else {
+    Sentry__namespace.captureException(error, { tags, contexts });
+  }
+}
+function FloatingChat({
   config,
   callbacks = {},
-  className,
-  style,
-  children
+  buttonPosition = "bottom-right",
+  buttonSize = "md",
+  buttonColor,
+  buttonIcon,
+  buttonIconUrl,
+  windowWidth = 380,
+  windowHeight = 560,
+  headerTitle = "AI Assistant",
+  headerSubtitle = "Online \u2022 Ready to help",
+  headerAvatar = "\u{1F916}",
+  headerColor,
+  defaultOpen = false,
+  showNotificationBadge = false
 }) {
-  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 scrollMessagesToEndRef = React.useRef(null);
-  const chat = paymanTypescriptAskSdk.useChat(config, callbacks);
-  const {
-    messages,
-    sendMessage,
-    isWaitingForResponse,
-    resetSession,
-    clearMessages,
-    cancelStream,
-    getSessionId,
-    getMessages
-  } = chat;
-  const userActionState = chat.userActionState ?? DEFAULT_USER_ACTION_STATE;
-  const approveUserAction = chat.approveUserAction ?? NOOP_ASYNC;
-  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 {
-    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);
-      }
-    }
-  );
-  const isRecording = voiceState === "listening";
-  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",
-    enableVoice = false
-  } = config;
-  const isSessionParamsConfigured = React.useMemo(() => {
-    if (!sessionParams) return false;
-    return !!(sessionParams.id?.trim() && sessionParams.name?.trim());
-  }, [sessionParams?.id, sessionParams?.name]);
-  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;
+  const [isOpen, setIsOpen] = react.useState(defaultOpen);
+  const toggleChat = () => setIsOpen(!isOpen);
+  const buttonSizes = { sm: "w-12 h-12", md: "w-14 h-14", lg: "w-16 h-16" };
+  const iconSizes = { sm: "w-5 h-5", md: "w-6 h-6", lg: "w-7 h-7" };
+  const positions = {
+    "bottom-right": "bottom-5 right-5",
+    "bottom-left": "bottom-5 left-5",
+    "top-right": "top-5 right-5",
+    "top-left": "top-5 left-5"
+  };
+  const windowPositions = {
+    "bottom-right": "bottom-[5.5rem] right-5",
+    "bottom-left": "bottom-[5.5rem] left-5",
+    "top-right": "top-[5.5rem] right-5",
+    "top-left": "top-[5.5rem] left-5"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: toggleChat,
+        className: cn(
+          "fixed z-[9999] rounded-full shadow-lg",
+          "flex items-center justify-center cursor-pointer border-0 outline-none",
+          "hover:scale-105 active:scale-95 transition-transform duration-200",
+          buttonSizes[buttonSize],
+          positions[buttonPosition],
+          !buttonColor && "bg-foreground text-background"
+        ),
+        style: buttonColor ? { background: buttonColor, color: "#fff" } : void 0,
+        "aria-label": isOpen ? "Close chat" : "Open chat",
+        children: [
+          showNotificationBadge && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full border-2 border-background" }),
+          buttonIcon ? buttonIcon : buttonIconUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: buttonIconUrl,
+              alt: "Chat",
+              className: cn("object-contain", iconSizes[buttonSize])
+            }
+          ) : isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: cn(iconSizes[buttonSize]) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { className: cn(iconSizes[buttonSize]) })
+        ]
       }
-      setRecordingElapsedSeconds(0);
-    }
-    return () => {
-      if (recordingIntervalRef.current) {
-        clearInterval(recordingIntervalRef.current);
-        recordingIntervalRef.current = null;
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed z-[9998] bg-card rounded-2xl shadow-2xl overflow-hidden flex flex-col",
+          "border border-border/60",
+          "animate-fade-in-up",
+          windowPositions[buttonPosition]
+        ),
+        style: {
+          width: typeof windowWidth === "number" ? `${windowWidth}px` : windowWidth,
+          height: typeof windowHeight === "number" ? `${windowHeight}px` : windowHeight,
+          maxWidth: "calc(100vw - 40px)",
+          maxHeight: "calc(100vh - 120px)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "px-4 py-3 flex items-center justify-between shrink-0",
+                !headerColor && "bg-foreground text-background"
+              ),
+              style: headerColor ? { background: headerColor, color: "#fff" } : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-xl bg-white/15 flex items-center justify-center text-lg shrink-0", children: headerAvatar }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm leading-tight truncate", children: headerTitle }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] opacity-70 leading-tight truncate", children: headerSubtitle })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: toggleChat,
+                    className: "w-8 h-8 rounded-lg hover:bg-white/10 flex items-center justify-center transition-colors shrink-0",
+                    "aria-label": "Minimize chat",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            PaymanChat,
+            {
+              config,
+              callbacks,
+              className: "h-full border-0 rounded-none"
+            }
+          ) })
+        ]
       }
-    };
-  }, [isRecording]);
-  React.useEffect(() => {
-    const wasEmpty = prevInputValueRef.current.trim() === "";
-    const isEmpty = inputValue.trim() === "";
-    prevInputValueRef.current = inputValue;
-    if (!wasEmpty && isEmpty) {
-      clearTranscript();
-      stopRecording();
-    }
-  }, [inputValue, clearTranscript, stopRecording]);
-  const handleSend = React.useCallback(() => {
-    stopRecording();
-    if (inputValue.trim() && !disableInput && isSessionParamsConfigured) {
-      sendMessage(inputValue.trim());
-      setInputValue("");
-    }
-  }, [
-    inputValue,
-    disableInput,
-    isSessionParamsConfigured,
-    sendMessage,
-    stopRecording
-  ]);
-  const isInputDisabled = isWaitingForResponse || !isSessionParamsConfigured || disableInput;
-  const handleVoicePress = React.useCallback(async () => {
-    if (!voiceAvailable) return;
-    clearTranscript();
-    await startRecording();
-  }, [voiceAvailable, startRecording, clearTranscript]);
-  const handleConfirmRecording = React.useCallback(() => {
-    stopRecording();
-    if (transcribedText.trim()) setInputValue(transcribedText);
-  }, [stopRecording, transcribedText]);
-  const handleCancelRecording = React.useCallback(() => {
-    stopRecording();
-  }, [stopRecording]);
-  const handleInputFocus = React.useCallback(() => {
-    const run = () => scrollMessagesToEndRef.current?.();
-    run();
-    requestAnimationFrame(run);
-    setTimeout(run, 100);
-    setTimeout(run, 280);
-  }, []);
-  if (isChatDisabled) {
-    if (disabledComponent) {
-      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: [s8.container, style], children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.disabledWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: s8.disabledText, children: "Chat is currently disabled" }) })
-    ] }) });
+    )
+  ] });
+}
+var PaymanChatContext = react.createContext(void 0);
+function usePaymanChat() {
+  const ctx = react.useContext(PaymanChatContext);
+  if (!ctx) {
+    throw new Error("usePaymanChat must be used within a PaymanChat component");
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(PaymanChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.KeyboardAvoidingView,
-    {
-      style: [s8.container, style],
-      behavior: "padding",
-      keyboardVerticalOffset: reactNative.Platform.OS === "ios" ? 90 : 0,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.messageListWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
-          MessageList,
-          {
-            messages,
-            isWaitingForResponse,
-            isLoading: false,
-            emptyStateText,
-            showEmptyStateIcon,
-            layout,
-            showTimestamps,
-            stage: config.stage || "DEV",
-            animated,
-            showAgentName,
-            agentName,
-            showAvatars,
-            showUserAvatar,
-            showAssistantAvatar,
-            showExecutionSteps,
-            showStreamingDot,
-            streamingStepsText,
-            completedStepsText,
-            onExecutionTraceClick,
-            scrollToEndHandleRef: scrollMessagesToEndRef
-          }
-        ) }),
-        hasAskPermission && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: s8.inputBarWrap, 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,
-            isRecording: enableVoice && isRecording,
-            recordingDurationSeconds: recordingElapsedSeconds,
-            onConfirmRecording: enableVoice ? handleConfirmRecording : void 0,
-            onCancelRecording: enableVoice ? handleCancelRecording : void 0,
-            transcribedText: enableVoice && isRecording ? transcribedText : void 0,
-            onInputFocus: handleInputFocus
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          UserActionModal,
-          {
-            isOpen: isUserActionSupported && userActionState.request !== null,
-            userActionRequest: userActionState.request,
-            onApprove: approveUserAction,
-            onReject: rejectUserAction,
-            onResend: resendOtp,
-            clearOtpTrigger: userActionState.clearOtpTrigger
-          }
-        )
-      ]
-    }
-  ) });
+  return ctx;
+}
+
+// src/utils/relativeTime.ts
+function formatRelativeTime(iso, now = /* @__PURE__ */ new Date()) {
+  const then = new Date(iso);
+  if (Number.isNaN(then.getTime())) return "";
+  const diffMs = now.getTime() - then.getTime();
+  const diffSec = Math.round(diffMs / 1e3);
+  const diffMin = Math.round(diffMs / 6e4);
+  const diffHour = Math.round(diffMs / 36e5);
+  if (diffSec < 45) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  const thenDate = new Date(then.getFullYear(), then.getMonth(), then.getDate());
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const dayDiff = Math.round(
+    (today.getTime() - thenDate.getTime()) / 864e5
+  );
+  if (dayDiff === 1) return "Yesterday";
+  if (dayDiff < 7) {
+    return then.toLocaleDateString(void 0, { weekday: "short" });
+  }
+  const sameYear = then.getFullYear() === now.getFullYear();
+  return then.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: sameYear ? void 0 : "numeric"
+  });
 }
-var s8 = reactNative.StyleSheet.create({
-  /** Lets the message list shrink when the keyboard opens; pairs with FlatList flex:1. */
-  messageListWrap: { flex: 1, minHeight: 0, zIndex: 0 },
-  /**
-   * Keeps the composer above the message list when scrolling so rows (e.g. stream step toggles)
-   * do not paint over the input. Elevation applies on Android only.
-   */
-  inputBarWrap: {
-    width: "100%",
-    zIndex: 2,
-    ...reactNative.Platform.select({
-      android: { elevation: 8 },
-      default: {}
-    })
-  },
-  container: {
-    flex: 1,
-    backgroundColor: "#FFFFFF",
-    borderWidth: reactNative.StyleSheet.hairlineWidth,
-    borderColor: "rgba(0,0,0,0.08)",
-    borderRadius: 16,
-    overflow: "hidden"
-  },
-  disabledWrap: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 16
-  },
-  disabledText: { fontSize: 14, color: "#9CA3AF", textAlign: "center" }
-});
 
 Object.defineProperty(exports, "buildFormattedThinking", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.buildFormattedThinking; }
 });
+Object.defineProperty(exports, "buildScopeKey", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.buildScopeKey; }
+});
 Object.defineProperty(exports, "cancelUserAction", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.cancelUserAction; }
@@ -2447,6 +1815,14 @@ Object.defineProperty(exports, "generateId", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.generateId; }
 });
+Object.defineProperty(exports, "listConversations", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.listConversations; }
+});
+Object.defineProperty(exports, "listSessions", {
+  enumerable: true,
+  get: function () { return paymanTypescriptAskSdk.listSessions; }
+});
 Object.defineProperty(exports, "processStreamEventV2", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.processStreamEventV2; }
@@ -2463,10 +1839,6 @@ Object.defineProperty(exports, "submitUserAction", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.submitUserAction; }
 });
-Object.defineProperty(exports, "useChat", {
-  enumerable: true,
-  get: function () { return paymanTypescriptAskSdk.useChat; }
-});
 Object.defineProperty(exports, "useChatV2", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.useChatV2; }
@@ -2475,11 +1847,17 @@ Object.defineProperty(exports, "useVoice", {
   enumerable: true,
   get: function () { return paymanTypescriptAskSdk.useVoice; }
 });
+exports.ChatHeader = ChatHeader;
+exports.FloatingChat = FloatingChat;
 exports.PaymanChat = PaymanChat;
 exports.PaymanChatContext = PaymanChatContext;
+exports.SessionHistorySidebar = SessionHistorySidebar;
+exports.UserActionModal = UserActionModal;
 exports.captureSentryError = captureSentryError;
 exports.cn = cn;
 exports.formatDate = formatDate;
+exports.formatRelativeTime = formatRelativeTime;
 exports.usePaymanChat = usePaymanChat;
+exports.useSessionHistory = useSessionHistory;
 //# sourceMappingURL=index.native.js.map
 //# sourceMappingURL=index.native.js.map