@mobileai/react-native 0.9.18 → 0.9.20

package/lib/module/components/AgentChatBar.js

@@ -8,12 +8,12 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { View, TextInput, Pressable, Text, StyleSheet, Animated, PanResponder, ScrollView, Keyboard, Platform, useWindowDimensions } from 'react-native';
-import { MicIcon, SpeakerIcon, SendArrowIcon, StopIcon, LoadingDots, AIBadge, CloseIcon } from "./Icons.js";
+import { MicIcon, SpeakerIcon, SendArrowIcon, StopIcon, LoadingDots, AIBadge, HistoryIcon, NewChatIcon, CloseIcon } from "./Icons.js";
 import { logger } from "../utils/logger.js";
 import { DiscoveryTooltip } from "./DiscoveryTooltip.js";
 
 // ─── Props ─────────────────────────────────────────────────────
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ─── Mode Selector ─────────────────────────────────────────────
 
 function ModeSelector({
@@ -174,9 +174,18 @@ function TextInputRow({
   isArabic,
   theme
 }) {
+  const inputRef = useRef(null);
+  const handleSendWithClear = () => {
+    onSend();
+    // Imperatively clear the native TextInput — controlled `value=''` can be
+    // ignored by the iOS native layer when editable flips to false in the same
+    // render batch.
+    inputRef.current?.clear();
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.inputRow,
     children: [/*#__PURE__*/_jsx(TextInput, {
+      ref: inputRef,
       style: [styles.input, isArabic && styles.inputRTL, theme?.inputBackgroundColor ? {
         backgroundColor: theme.inputBackgroundColor
       } : undefined, theme?.textColor ? {
@@ -186,10 +195,11 @@ function TextInputRow({
       placeholderTextColor: theme?.textColor ? `${theme.textColor}66` : '#999',
       value: text,
       onChangeText: setText,
-      onSubmitEditing: onSend,
-      returnKeyType: "send",
+      onSubmitEditing: handleSendWithClear,
+      returnKeyType: "default",
+      blurOnSubmit: false,
       editable: !isThinking,
-      multiline: false
+      multiline: true
     }), /*#__PURE__*/_jsx(DictationButton, {
       language: isArabic ? 'ar' : 'en',
       onTranscript: t => setText(t),
@@ -198,7 +208,7 @@ function TextInputRow({
       style: [styles.sendButton, isThinking && styles.sendButtonDisabled, theme?.primaryColor ? {
         backgroundColor: theme.primaryColor
       } : undefined],
-      onPress: onSend,
+      onPress: handleSendWithClear,
       disabled: isThinking || !text.trim(),
       accessibilityLabel: "Send request to AI Agent",
       children: isThinking ? /*#__PURE__*/_jsx(LoadingDots, {
@@ -279,9 +289,9 @@ function VoiceControlsRow({
 export function AgentChatBar({
   onSend,
   isThinking,
+  statusText,
   lastResult,
   language,
-  onDismiss,
   availableModes = ['text'],
   mode = 'text',
   onModeChange,
@@ -297,43 +307,104 @@ export function AgentChatBar({
   selectedTicketId,
   onTicketSelect,
   autoExpandTrigger = 0,
-  lastUserMessage,
   unreadCounts = {},
   totalUnread = 0,
   showDiscoveryTooltip = false,
-  onTooltipDismiss
+  discoveryTooltipMessage,
+  onTooltipDismiss,
+  chatMessages = [],
+  conversations = [],
+  isLoadingHistory = false,
+  onConversationSelect,
+  onNewConversation,
+  pendingApprovalQuestion,
+  onPendingApprovalAction
 }) {
   const [text, setText] = useState('');
   const [isExpanded, setIsExpanded] = useState(false);
+  const [localUnread, setLocalUnread] = useState(0);
+  const [fabX, setFabX] = useState(10);
+  const [showHistory, setShowHistory] = useState(false);
+  const prevMsgCount = useRef(chatMessages.length);
+  const scrollRef = useRef(null);
   const {
-    height
+    height,
+    width
   } = useWindowDimensions();
   const isArabic = language === 'ar';
+  const [panelHeight, setPanelHeight] = useState(0);
+  const preKeyboardYRef = useRef(null);
+  const previousThinkingRef = useRef(false);
+  const autoCollapsedForThinkingRef = useRef(false);
+
+  // Track incoming AI messages while collapsed
+  useEffect(() => {
+    if (chatMessages.length > prevMsgCount.current && !isExpanded) {
+      setLocalUnread(prev => prev + (chatMessages.length - prevMsgCount.current));
+    }
+    prevMsgCount.current = chatMessages.length;
+  }, [chatMessages.length, isExpanded]);
+  const displayUnread = totalUnread + localUnread;
 
   // Auto-expand when triggered (e.g. on escalation)
   useEffect(() => {
     if (autoExpandTrigger > 0) setIsExpanded(true);
   }, [autoExpandTrigger]);
+  useEffect(() => {
+    const wasThinking = previousThinkingRef.current;
+    if (pendingApprovalQuestion) {
+      setIsExpanded(true);
+      autoCollapsedForThinkingRef.current = false;
+    }
+    if (wasThinking && !isThinking) {
+      autoCollapsedForThinkingRef.current = false;
+    }
+    previousThinkingRef.current = isThinking;
+  }, [isThinking, isExpanded, mode, pendingApprovalQuestion]);
   const pan = useRef(new Animated.ValueXY({
     x: 10,
     y: height - 200
   })).current;
-  const keyboardOffset = useRef(new Animated.Value(0)).current;
+  const tooltipSide = fabX < width / 2 ? 'right' : 'left';
+  useEffect(() => {
+    const listenerId = pan.x.addListener(({
+      value
+    }) => {
+      setFabX(value);
+    });
+    return () => {
+      pan.x.removeListener(listenerId);
+    };
+  }, [pan.x]);
 
   // ─── Keyboard Handling ──────────────────────────────────────
   useEffect(() => {
     const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
     const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const keyboardMargin = 12;
     const showSub = Keyboard.addListener(showEvent, e => {
-      Animated.timing(keyboardOffset, {
-        toValue: -e.endCoordinates.height,
-        duration: Platform.OS === 'ios' ? e.duration || 250 : 200,
-        useNativeDriver: false
-      }).start();
+      if (!isExpanded || mode !== 'text' || panelHeight <= 0) return;
+      pan.y.stopAnimation(currentY => {
+        const targetY = Math.max(keyboardMargin, height - e.endCoordinates.height - panelHeight - keyboardMargin);
+
+        // Preserve the pre-keyboard position so we can restore it on hide.
+        preKeyboardYRef.current = currentY;
+
+        // Only lift the widget if the keyboard would overlap it.
+        if (currentY <= targetY) return;
+        Animated.timing(pan.y, {
+          toValue: targetY,
+          duration: Platform.OS === 'ios' ? e.duration || 250 : 200,
+          useNativeDriver: false
+        }).start();
+      });
     });
     const hideSub = Keyboard.addListener(hideEvent, () => {
-      Animated.timing(keyboardOffset, {
-        toValue: 0,
+      const restoreY = preKeyboardYRef.current;
+      if (restoreY == null) return;
+      preKeyboardYRef.current = null;
+      Animated.timing(pan.y, {
+        toValue: restoreY,
         duration: 200,
         useNativeDriver: false
       }).start();
@@ -342,7 +413,7 @@ export function AgentChatBar({
       showSub.remove();
       hideSub.remove();
     };
-  }, [keyboardOffset]);
+  }, [height, isExpanded, mode, pan.y, panelHeight]);
   const panResponder = useRef(PanResponder.create({
     onMoveShouldSetPanResponder: (_, gestureState) => {
       return Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5;
@@ -389,9 +460,11 @@ export function AgentChatBar({
         } : undefined],
         onPress: () => {
           onTooltipDismiss?.();
+          setLocalUnread(0);
+          autoCollapsedForThinkingRef.current = false;
           setIsExpanded(true);
         },
-        accessibilityLabel: totalUnread > 0 ? `Open AI Agent Chat - ${totalUnread} unread messages` : 'Open AI Agent Chat',
+        accessibilityLabel: displayUnread > 0 ? `Open AI Agent Chat - ${displayUnread} unread messages` : 'Open AI Agent Chat',
         children: isThinking ? /*#__PURE__*/_jsx(LoadingDots, {
           size: 28,
           color: theme?.textColor || '#fff'
@@ -401,13 +474,57 @@ export function AgentChatBar({
       }), showDiscoveryTooltip && /*#__PURE__*/_jsx(DiscoveryTooltip, {
         language: language,
         primaryColor: theme?.primaryColor,
+        message: discoveryTooltipMessage,
+        side: tooltipSide,
         onDismiss: () => onTooltipDismiss?.()
-      }), totalUnread > 0 && /*#__PURE__*/_jsx(View, {
+      }), localUnread > 0 && chatMessages.length > 0 && /*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.unreadPopup, isArabic ? styles.unreadPopupRTL : styles.unreadPopupLTR],
+        onPress: () => {
+          onTooltipDismiss?.();
+          setLocalUnread(0);
+          setIsExpanded(true);
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.unreadPopupText, {
+            textAlign: isArabic ? 'right' : 'left'
+          }],
+          numberOfLines: 2,
+          children: (() => {
+            const lastMsg = [...chatMessages].reverse().find(m => m.role === 'assistant');
+            if (!lastMsg) return isArabic ? 'رسالة جديدة' : 'New message';
+            const content = Array.isArray(lastMsg.content) ? lastMsg.content.map(c => c.type === 'text' ? c.text : '').join('') : lastMsg.content;
+            return content || (isArabic ? 'رسالة جديدة' : 'New message');
+          })()
+        }), displayUnread > 1 && /*#__PURE__*/_jsx(View, {
+          style: [styles.fabUnreadBadge, styles.popupBadgeOverride],
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.fabUnreadBadgeText,
+            children: displayUnread > 99 ? '99+' : displayUnread
+          })
+        })]
+      }), isThinking && !pendingApprovalQuestion && /*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.statusPopup, isArabic ? styles.unreadPopupRTL : styles.unreadPopupLTR],
+        onPress: () => {
+          autoCollapsedForThinkingRef.current = false;
+          setIsExpanded(true);
+        },
+        children: [/*#__PURE__*/_jsx(LoadingDots, {
+          size: 14,
+          color: "#111827"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.statusPopupText, {
+            textAlign: isArabic ? 'right' : 'left'
+          }],
+          numberOfLines: 2,
+          children: statusText || (isArabic ? 'جاري التنفيذ...' : 'Working...')
+        })]
+      }), displayUnread > 0 && localUnread === 0 && /*#__PURE__*/_jsx(View, {
         style: styles.fabUnreadBadge,
         pointerEvents: "none",
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.fabUnreadBadgeText,
-          children: totalUnread > 99 ? '99+' : totalUnread
+          children: displayUnread > 99 ? '99+' : displayUnread
         })
       })]
     });
@@ -417,111 +534,330 @@ export function AgentChatBar({
 
   return /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.expandedContainer, pan.getLayout(), {
-      transform: [{
-        translateY: keyboardOffset
-      }]
+      maxHeight: height * 0.65
     }, theme?.backgroundColor ? {
       backgroundColor: theme.backgroundColor
     } : undefined],
-    children: [/*#__PURE__*/_jsxs(View, {
+    onLayout: event => {
+      const nextHeight = event.nativeEvent.layout.height;
+      if (Math.abs(nextHeight - panelHeight) > 1) {
+        setPanelHeight(nextHeight);
+      }
+    },
+    children: [/*#__PURE__*/_jsx(View, {
       ...panResponder.panHandlers,
       style: styles.dragHandleArea,
       accessibilityLabel: "Drag AI Agent",
-      children: [/*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(View, {
         style: styles.dragGrip
-      }), /*#__PURE__*/_jsx(Pressable, {
-        onPress: () => setIsExpanded(false),
-        style: styles.minimizeBtn,
-        accessibilityLabel: "Minimize AI Agent",
+      })
+    }), /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => {
+        setIsExpanded(false);
+        setShowHistory(false);
+      },
+      style: styles.minimizeBtn,
+      accessibilityLabel: "Minimize AI Agent",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.minimizeText,
+        children: "\u2014"
+      })
+    }), onConversationSelect && !showHistory && /*#__PURE__*/_jsxs(View, {
+      style: historyStyles.headerActions,
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        style: historyStyles.historyBtn,
+        onPress: () => setShowHistory(true),
+        accessibilityLabel: "View conversation history",
+        hitSlop: 8,
+        children: [/*#__PURE__*/_jsx(HistoryIcon, {
+          size: 18,
+          color: "rgba(255,255,255,0.55)"
+        }), conversations.length > 0 && /*#__PURE__*/_jsx(View, {
+          style: historyStyles.historyCountBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: historyStyles.historyCountBadgeText,
+            children: conversations.length > 9 ? '9+' : conversations.length
+          })
+        })]
+      }), onNewConversation && /*#__PURE__*/_jsx(Pressable, {
+        style: historyStyles.quickNewBtn,
+        onPress: onNewConversation,
+        accessibilityLabel: "Start new conversation",
+        hitSlop: 8,
         children: /*#__PURE__*/_jsx(Text, {
-          style: styles.minimizeText,
-          children: "\u2014"
+          style: historyStyles.quickNewBtnText,
+          children: "+"
         })
       })]
-    }), /*#__PURE__*/_jsx(ModeSelector, {
+    }), /*#__PURE__*/_jsx(View, {
+      ...panResponder.panHandlers,
+      style: [styles.cornerHandle, styles.cornerTL],
+      pointerEvents: "box-only",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.cornerIndicator, styles.cornerIndicatorTL]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      ...panResponder.panHandlers,
+      style: [styles.cornerHandle, styles.cornerTR],
+      pointerEvents: "box-only",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.cornerIndicator, styles.cornerIndicatorTR]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      ...panResponder.panHandlers,
+      style: [styles.cornerHandle, styles.cornerBL],
+      pointerEvents: "box-only",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.cornerIndicator, styles.cornerIndicatorBL]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      ...panResponder.panHandlers,
+      style: [styles.cornerHandle, styles.cornerBR],
+      pointerEvents: "box-only",
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.cornerIndicator, styles.cornerIndicatorBR]
+      })
+    }), !showHistory && /*#__PURE__*/_jsx(ModeSelector, {
       modes: availableModes,
       activeMode: mode,
       onSelect: m => onModeChange?.(m),
       isArabic: isArabic,
       totalUnread: totalUnread
-    }), lastResult && mode !== 'human' && (() => {
-      const cleanMessage = lastResult.message.trim();
-      return /*#__PURE__*/_jsxs(View, {
-        style: [styles.resultBubble, lastResult.success ? [styles.resultSuccess, theme?.successColor ? {
-          backgroundColor: theme.successColor
-        } : undefined] : [styles.resultError, theme?.errorColor ? {
-          backgroundColor: theme.errorColor
-        } : undefined]],
-        children: [/*#__PURE__*/_jsx(ScrollView, {
-          style: styles.resultScroll,
-          nestedScrollEnabled: true,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.resultText, {
-              textAlign: isArabic ? 'right' : 'left'
-            }, theme?.textColor ? {
-              color: theme.textColor
-            } : undefined],
-            children: lastUserMessage ?? cleanMessage
+    }), showHistory && /*#__PURE__*/_jsxs(View, {
+      style: historyStyles.panel,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: historyStyles.headerRow,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: historyStyles.backBtn,
+          onPress: () => setShowHistory(false),
+          accessibilityLabel: "Back to chat",
+          hitSlop: 8,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 4
+            },
+            children: [/*#__PURE__*/_jsx(CloseIcon, {
+              size: 13,
+              color: "#7B68EE"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: historyStyles.backBtnText,
+              children: "Back"
+            })]
           })
-        }), onDismiss && /*#__PURE__*/_jsx(Pressable, {
-          style: styles.dismissButton,
-          onPress: onDismiss,
-          hitSlop: 12,
-          children: /*#__PURE__*/_jsx(CloseIcon, {
-            size: 14,
-            color: theme?.textColor ? theme.textColor : 'rgba(255, 255, 255, 0.6)'
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6
+          },
+          children: [/*#__PURE__*/_jsx(HistoryIcon, {
+            size: 15,
+            color: "rgba(255,255,255,0.7)"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: historyStyles.headerTitle,
+            children: "History"
+          })]
+        }), /*#__PURE__*/_jsx(Pressable, {
+          style: historyStyles.newBtn,
+          onPress: () => {
+            onNewConversation?.();
+            setShowHistory(false);
+          },
+          accessibilityLabel: "Start new conversation",
+          hitSlop: 8,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 5
+            },
+            children: [/*#__PURE__*/_jsx(NewChatIcon, {
+              size: 14,
+              color: "#7B68EE"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: historyStyles.newBtnText,
+              children: "New"
+            })]
           })
         })]
-      });
-    })(), mode === 'text' && /*#__PURE__*/_jsx(TextInputRow, {
-      text: text,
-      setText: setText,
-      onSend: handleSend,
-      isThinking: isThinking,
-      isArabic: isArabic,
-      theme: theme
-    }), mode === 'human' && !selectedTicketId && /*#__PURE__*/_jsx(ScrollView, {
-      style: styles.ticketList,
-      nestedScrollEnabled: true,
-      children: tickets.length === 0 ? /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyText,
-        children: "No active tickets"
-      }) : tickets.map(ticket => {
-        const unreadCount = unreadCounts[ticket.id] || 0;
-        return /*#__PURE__*/_jsxs(Pressable, {
-          style: styles.ticketCard,
-          onPress: () => onTicketSelect?.(ticket.id),
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.ticketTopRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.ticketReason,
-              numberOfLines: 2,
-              children: ticket.history.length > 0 ? ticket.history[ticket.history.length - 1]?.content ?? ticket.reason : ticket.reason
-            }), unreadCount > 0 && /*#__PURE__*/_jsx(View, {
-              style: styles.unreadBadge,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.unreadBadgeText,
-                children: unreadCount > 99 ? '99+' : unreadCount
-              })
-            })]
+      }), isLoadingHistory && conversations.length === 0 && /*#__PURE__*/_jsx(View, {
+        style: historyStyles.shimmerWrap,
+        children: [1, 2, 3].map(i => /*#__PURE__*/_jsxs(View, {
+          style: historyStyles.shimmerCard,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [historyStyles.shimmerLine, {
+              width: '70%'
+            }]
           }), /*#__PURE__*/_jsx(View, {
-            style: styles.ticketMeta,
+            style: [historyStyles.shimmerLine, {
+              width: '45%',
+              marginTop: 6,
+              opacity: 0.5
+            }]
+          })]
+        }, i))
+      }), !isLoadingHistory && conversations.length === 0 && /*#__PURE__*/_jsxs(View, {
+        style: historyStyles.emptyWrap,
+        children: [/*#__PURE__*/_jsx(HistoryIcon, {
+          size: 36,
+          color: "rgba(255,255,255,0.25)"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: historyStyles.emptyTitle,
+          children: "No previous conversations"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: historyStyles.emptySubtitle,
+          children: "Your AI conversations will appear here"
+        })]
+      }), conversations.length > 0 && /*#__PURE__*/_jsx(ScrollView, {
+        style: {
+          maxHeight: height * 0.65 - 130
+        },
+        nestedScrollEnabled: true,
+        showsVerticalScrollIndicator: false,
+        children: conversations.map(conv => {
+          const relativeDate = getRelativeDate(conv.updatedAt);
+          return /*#__PURE__*/_jsxs(Pressable, {
+            style: ({
+              pressed
+            }) => [historyStyles.convCard, pressed && historyStyles.convCardPressed],
+            onPress: () => {
+              onConversationSelect?.(conv.id);
+              setShowHistory(false);
+            },
+            accessibilityLabel: `Load conversation: ${conv.title}`,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: historyStyles.convCardTop,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: historyStyles.convTitle,
+                numberOfLines: 1,
+                children: conv.title
+              }), /*#__PURE__*/_jsx(View, {
+                style: historyStyles.convMsgBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: historyStyles.convMsgBadgeText,
+                  children: conv.messageCount
+                })
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: historyStyles.convPreview,
+              numberOfLines: 1,
+              children: conv.preview || 'No messages'
+            }), /*#__PURE__*/_jsx(Text, {
+              style: historyStyles.convDate,
+              children: relativeDate
+            })]
+          }, conv.id);
+        })
+      })]
+    }), !showHistory && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [mode !== 'human' && chatMessages.length > 0 && /*#__PURE__*/_jsxs(ScrollView, {
+        style: [styles.messageList, {
+          maxHeight: height * 0.65 - 178
+        }],
+        nestedScrollEnabled: true,
+        ref: scrollRef,
+        onContentSizeChange: () => scrollRef.current?.scrollToEnd({
+          animated: true
+        }),
+        children: [chatMessages.filter(msg => msg.role === 'user' || msg.role === 'assistant').map(msg => {
+          const isUser = msg.role === 'user';
+          const contentText = Array.isArray(msg.content) ? msg.content.map(c => c.type === 'text' ? c.text : '').join('') : msg.content;
+          if (!contentText || contentText.trim() === '') return null;
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.messageBubble, isUser ? styles.messageBubbleUser : styles.messageBubbleAI, isUser && theme?.primaryColor ? {
+              backgroundColor: theme.primaryColor
+            } : undefined],
             children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.ticketStatus, ticket.status === 'open' && styles.statusOpen],
-              children: ticket.status
+              style: [styles.messageText, isUser ? styles.messageTextUser : styles.messageTextAI, {
+                textAlign: isArabic ? 'right' : 'left'
+              }],
+              children: contentText
             })
+          }, msg.id || `${msg.role}-${Math.random()}`);
+        }), isThinking && /*#__PURE__*/_jsx(View, {
+          style: [styles.messageBubble, styles.messageBubbleAI],
+          children: /*#__PURE__*/_jsx(LoadingDots, {
+            size: 18,
+            color: "#fff"
+          })
+        })]
+      }), mode === 'text' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [pendingApprovalQuestion && onPendingApprovalAction && /*#__PURE__*/_jsxs(View, {
+          style: styles.approvalPanel,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.approvalHint,
+            children: "The AI agent is requesting permission to perform this action. Tap \"Do it\" to approve, or \"Don\u2019t do it\" to cancel."
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.approvalActions,
+            children: [/*#__PURE__*/_jsx(Pressable, {
+              style: [styles.approvalActionBtn, styles.approvalActionSecondary],
+              onPress: () => onPendingApprovalAction('reject'),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.approvalActionText, styles.approvalActionSecondaryText],
+                children: "Don\u2019t do it"
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              style: [styles.approvalActionBtn, styles.approvalActionPrimary],
+              onPress: () => onPendingApprovalAction('approve'),
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.approvalActionText, styles.approvalActionPrimaryText],
+                children: "Do it"
+              })
+            })]
           })]
-        }, ticket.id);
-      })
-    }), mode === 'human' && selectedTicketId && null, mode === 'voice' && /*#__PURE__*/_jsx(VoiceControlsRow, {
-      isMicActive: isMicActive,
-      isSpeakerMuted: isSpeakerMuted,
-      onMicToggle: onMicToggle || (() => {}),
-      onSpeakerToggle: onSpeakerToggle || (() => {}),
-      isAISpeaking: isAISpeaking,
-      isVoiceConnected: isVoiceConnected,
-      isArabic: isArabic,
-      onStopSession: onStopSession
+        }), /*#__PURE__*/_jsx(TextInputRow, {
+          text: text,
+          setText: setText,
+          onSend: handleSend,
+          isThinking: isThinking,
+          isArabic: isArabic,
+          theme: theme
+        })]
+      }), mode === 'human' && !selectedTicketId && /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.ticketList,
+        nestedScrollEnabled: true,
+        children: tickets.length === 0 ? /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No active tickets"
+        }) : tickets.map(ticket => {
+          const unreadCount = unreadCounts[ticket.id] || 0;
+          return /*#__PURE__*/_jsxs(Pressable, {
+            style: styles.ticketCard,
+            onPress: () => onTicketSelect?.(ticket.id),
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.ticketTopRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.ticketReason,
+                numberOfLines: 2,
+                children: ticket.history.length > 0 ? ticket.history[ticket.history.length - 1]?.content ?? ticket.reason : ticket.reason
+              }), unreadCount > 0 && /*#__PURE__*/_jsx(View, {
+                style: styles.unreadBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.unreadBadgeText,
+                  children: unreadCount > 99 ? '99+' : unreadCount
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.ticketMeta,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.ticketStatus, ticket.status === 'open' && styles.statusOpen],
+                children: ticket.status
+              })
+            })]
+          }, ticket.id);
+        })
+      }), mode === 'human' && selectedTicketId && null, mode === 'voice' && /*#__PURE__*/_jsx(VoiceControlsRow, {
+        isMicActive: isMicActive,
+        isSpeakerMuted: isSpeakerMuted,
+        onMicToggle: onMicToggle || (() => {}),
+        onSpeakerToggle: onSpeakerToggle || (() => {}),
+        isAISpeaking: isAISpeaking,
+        isVoiceConnected: isVoiceConnected,
+        isArabic: isArabic,
+        onStopSession: onStopSession
+      })]
     })]
   });
 }
@@ -552,6 +888,71 @@ const styles = StyleSheet.create({
   fabIcon: {
     fontSize: 28
   },
+  unreadPopup: {
+    position: 'absolute',
+    bottom: 70,
+    // Float above the FAB
+    left: -70,
+    // Centered over a 60px FAB
+    width: 200,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 12,
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 5
+  },
+  unreadPopupLTR: {
+    borderBottomLeftRadius: 4
+  },
+  unreadPopupRTL: {
+    borderBottomRightRadius: 4
+  },
+  unreadPopupText: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20
+  },
+  statusPopup: {
+    position: 'absolute',
+    bottom: 70,
+    left: -70,
+    width: 220,
+    minHeight: 48,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  statusPopupText: {
+    color: '#111827',
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 18,
+    flex: 1
+  },
+  popupBadgeOverride: {
+    top: -8,
+    right: -8,
+    borderColor: '#fff'
+  },
   expandedContainer: {
     position: 'absolute',
     zIndex: 9999,
@@ -586,35 +987,98 @@ const styles = StyleSheet.create({
     position: 'absolute',
     right: 0,
     top: 0,
-    padding: 8
+    padding: 12,
+    zIndex: 20 // ensure it sits above the drag corner
   },
   minimizeText: {
     color: '#fff',
     fontSize: 18,
     fontWeight: 'bold'
   },
-  resultBubble: {
-    borderRadius: 12,
+  // ── Corner drag handles ────────────────────────────────────────
+  cornerHandle: {
+    position: 'absolute',
+    width: 32,
+    height: 32,
+    zIndex: 10
+  },
+  cornerTL: {
+    top: 0,
+    left: 0
+  },
+  cornerTR: {
+    top: 0,
+    right: 0
+  },
+  cornerBL: {
+    bottom: 0,
+    left: 0
+  },
+  cornerBR: {
+    bottom: 0,
+    right: 0
+  },
+  // Subtle L-shaped indicator so users know the corners are draggable
+  cornerIndicator: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)'
+  },
+  cornerIndicatorTL: {
+    top: 6,
+    left: 6,
+    width: 10,
+    height: 2,
+    borderTopLeftRadius: 1
+  },
+  cornerIndicatorTR: {
+    top: 6,
+    right: 6,
+    width: 10,
+    height: 2,
+    borderTopRightRadius: 1
+  },
+  cornerIndicatorBL: {
+    bottom: 6,
+    left: 6,
+    width: 10,
+    height: 2,
+    borderBottomLeftRadius: 1
+  },
+  cornerIndicatorBR: {
+    bottom: 6,
+    right: 6,
+    width: 10,
+    height: 2,
+    borderBottomRightRadius: 1
+  },
+  messageList: {
+    marginBottom: 12
+  },
+  messageBubble: {
     padding: 12,
-    marginBottom: 12,
-    flexDirection: 'row',
-    alignItems: 'flex-start'
+    borderRadius: 16,
+    marginBottom: 8,
+    maxWidth: '85%'
   },
-  resultSuccess: {
-    backgroundColor: 'rgba(40, 167, 69, 0.2)'
+  messageBubbleUser: {
+    alignSelf: 'flex-end',
+    backgroundColor: '#7B68EE',
+    borderBottomRightRadius: 4
   },
-  resultError: {
-    backgroundColor: 'rgba(220, 53, 69, 0.2)'
+  messageBubbleAI: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderBottomLeftRadius: 4
   },
-  resultText: {
-    color: '#fff',
+  messageText: {
     fontSize: 14,
-    lineHeight: 20,
-    flex: 1
+    lineHeight: 20
   },
-  resultScroll: {
-    maxHeight: 200,
-    flex: 1
+  messageTextUser: {
+    color: '#fff'
+  },
+  messageTextAI: {
+    color: '#fff' // Or slightly off-white for contrast
   },
   dismissButton: {
     marginLeft: 8,
@@ -627,27 +1091,74 @@ const styles = StyleSheet.create({
   },
   inputRow: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     gap: 8,
-    justifyContent: 'center'
+    justifyContent: 'center',
+    paddingBottom: 2 // Slight padding so buttons don't clip against bottom edge
+  },
+  approvalPanel: {
+    marginBottom: 10,
+    gap: 8
+  },
+  approvalHint: {
+    color: 'rgba(255,255,255,0.72)',
+    fontSize: 12,
+    lineHeight: 18,
+    textAlign: 'center'
+  },
+  approvalActions: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  approvalActionBtn: {
+    flex: 1,
+    minHeight: 42,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10
+  },
+  approvalActionPrimary: {
+    backgroundColor: '#7B68EE'
+  },
+  approvalActionNeutral: {
+    backgroundColor: 'rgba(255,255,255,0.16)'
+  },
+  approvalActionSecondary: {
+    backgroundColor: 'rgba(255,255,255,0.08)'
+  },
+  approvalActionText: {
+    color: '#ffffff',
+    fontSize: 13,
+    fontWeight: '700',
+    textAlign: 'center'
+  },
+  approvalActionPrimaryText: {
+    color: '#ffffff'
+  },
+  approvalActionSecondaryText: {
+    color: 'rgba(255,255,255,0.82)'
   },
   input: {
     flex: 1,
     backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderRadius: 20,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
+    borderRadius: 24,
+    paddingHorizontal: 18,
+    paddingTop: 14,
+    paddingBottom: 14,
     color: '#fff',
-    fontSize: 16
+    fontSize: 16,
+    minHeight: 48,
+    maxHeight: 120 // wrap up to ~5 lines before scrolling internal
   },
   inputRTL: {
     textAlign: 'right',
     writingDirection: 'rtl'
   },
   sendButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
     justifyContent: 'center',
     alignItems: 'center'
@@ -659,9 +1170,9 @@ const styles = StyleSheet.create({
     fontSize: 18
   },
   dictationButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
     justifyContent: 'center',
     alignItems: 'center'
@@ -979,4 +1490,187 @@ const audioStyles = StyleSheet.create({
     fontSize: 14
   }
 });
+// ─── Relative Date Helper ────────────────────────────────────────────────────
+
+function getRelativeDate(timestampMs) {
+  const now = Date.now();
+  const diff = now - timestampMs;
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (minutes < 1) return 'Just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days === 1) return 'Yesterday';
+  if (days < 7) return `${days} days ago`;
+  return new Date(timestampMs).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
+// ─── History Styles ───────────────────────────────────────────────────────
+
+const historyStyles = StyleSheet.create({
+  headerActions: {
+    position: 'absolute',
+    left: 16,
+    top: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 20
+  },
+  // ─ History trigger button
+  historyBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 4
+  },
+  quickNewBtn: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  quickNewBtnText: {
+    color: 'rgba(255,255,255,0.78)',
+    fontSize: 18,
+    lineHeight: 18,
+    fontWeight: '500',
+    marginTop: -1
+  },
+  historyCountBadge: {
+    marginLeft: 3,
+    backgroundColor: 'rgba(123,104,238,0.8)',
+    borderRadius: 8,
+    paddingHorizontal: 5,
+    paddingVertical: 1
+  },
+  historyCountBadgeText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '700',
+    lineHeight: 14
+  },
+  // ─ Panel container
+  panel: {
+    flex: 1
+  },
+  // ─ Header row (Back | History | + New)
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+    paddingHorizontal: 4
+  },
+  backBtn: {
+    padding: 4
+  },
+  backBtnText: {
+    color: '#7B68EE',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  headerTitle: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '700',
+    letterSpacing: 0.3
+  },
+  newBtn: {
+    backgroundColor: 'rgba(123,104,238,0.25)',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 5
+  },
+  newBtnText: {
+    color: '#7B68EE',
+    fontSize: 12,
+    fontWeight: '700'
+  },
+  // ─ Shimmer loading cards
+  shimmerWrap: {
+    gap: 8
+  },
+  shimmerCard: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderRadius: 12,
+    padding: 14,
+    height: 64,
+    justifyContent: 'center'
+  },
+  shimmerLine: {
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: 'rgba(255,255,255,0.12)'
+  },
+  // ─ Empty state
+  emptyWrap: {
+    alignItems: 'center',
+    paddingVertical: 32,
+    gap: 6
+  },
+  emptyTitle: {
+    color: 'rgba(255,255,255,0.7)',
+    fontSize: 15,
+    fontWeight: '600'
+  },
+  emptySubtitle: {
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 12,
+    textAlign: 'center'
+  },
+  // ─ Conversation cards
+  convCard: {
+    backgroundColor: 'rgba(255,255,255,0.07)',
+    borderRadius: 14,
+    padding: 14,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.06)'
+  },
+  convCardPressed: {
+    backgroundColor: 'rgba(123,104,238,0.18)',
+    borderColor: 'rgba(123,104,238,0.3)'
+  },
+  convCardTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4
+  },
+  convTitle: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+    flex: 1,
+    marginRight: 8
+  },
+  convMsgBadge: {
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    borderRadius: 8,
+    paddingHorizontal: 7,
+    paddingVertical: 2
+  },
+  convMsgBadgeText: {
+    color: 'rgba(255,255,255,0.6)',
+    fontSize: 10,
+    fontWeight: '600'
+  },
+  convPreview: {
+    color: 'rgba(255,255,255,0.45)',
+    fontSize: 12,
+    lineHeight: 16,
+    marginBottom: 6
+  },
+  convDate: {
+    color: 'rgba(255,255,255,0.3)',
+    fontSize: 11,
+    fontWeight: '500'
+  }
+});
 //# sourceMappingURL=AgentChatBar.js.map