opendesk-react-native 0.1.2 → 0.1.6

package/lib/ui/OpenDeskChat.js

@@ -7,6 +7,7 @@ const react_native_1 = require("react-native");
 const react_2 = require("../react");
 const BotFace_1 = require("./BotFace");
 const icons_1 = require("./icons");
+const keyboard_1 = require("./keyboard");
 const strings_1 = require("./strings");
 const theme_1 = require("./theme");
 const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
@@ -26,8 +27,10 @@ function OpenDeskChat({ initialConversationId, onClose, pickAttachment, accentCo
     const strings = (0, react_1.useMemo)(() => ({ ...strings_1.defaultStrings, ...stringOverrides }), [stringOverrides]);
     const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
     const ui = (0, react_1.useMemo)(() => ({ theme, strings, styles, bot: config?.bot ?? null }), [theme, strings, styles, config?.bot]);
+    const rootRef = (0, react_1.useRef)(null);
+    const keyboard = (0, keyboard_1.useKeyboardInset)(rootRef, keyboardVerticalOffset);
     const inThread = conversationId !== null || composing;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: styles.root, behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: keyboardVerticalOffset, children: inThread ? ((0, jsx_runtime_1.jsx)(Thread, { ui: ui, conversationId: conversationId, pickAttachment: pickAttachment, onBack: () => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: rootRef, style: [styles.root, { paddingBottom: keyboard.inset }], onLayout: keyboard.onLayout, children: inThread ? ((0, jsx_runtime_1.jsx)(Thread, { ui: ui, conversationId: conversationId, pickAttachment: pickAttachment, onBack: () => {
                 setConversationId(null);
                 setComposing(false);
             }, onClose: onClose, onStarted: (id) => {
@@ -67,6 +70,12 @@ function Thread({ ui, conversationId, pickAttachment, onBack, onClose, onStarted
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [inputHeight, setInputHeight] = (0, react_1.useState)(30);
     const [error, setError] = (0, react_1.useState)(null);
+    const [viewing, setViewing] = (0, react_1.useState)(null);
+    const openImage = (0, react_1.useCallback)((attachment) => {
+        react_native_1.Keyboard.dismiss();
+        setViewing(attachment);
+    }, []);
+    const closeImage = (0, react_1.useCallback)(() => setViewing(null), []);
     const topics = config?.topics ?? [];
     const topic = topics.find((t) => t.id === topicId) ?? null;
     const needsTopic = conversationId === null && topics.length > 0 && topic === null;
@@ -160,14 +169,14 @@ function Thread({ ui, conversationId, pickAttachment, onBack, onClose, onStarted
     }, [client, config?.attachment_extensions, pickAttachment, strings]);
     const showAttach = Boolean(pickAttachment) && config?.attachments !== false && (config?.attachment_extensions?.length ?? 1) > 0;
     const bot = config?.ai_answers ? config.bot : null;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.head, children: [(0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.back, onPress: onBack, icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg3, direction: "left" }) }), bot ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 26, look: bot.look, avatarUrl: bot.avatar_url })) : ((0, jsx_runtime_1.jsx)(Glyph, { ui: ui, name: name, url: config?.avatar_url ?? null })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headMain, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, numberOfLines: 1, children: conversation?.subject || name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.titleSub, numberOfLines: 1, children: subtitleFor(config, strings) })] }), onClose ? (0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.closeChat, onPress: onClose, icon: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3 }) }) : null] }), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.emptyScroll, keyboardShouldPersistTaps: "handled", children: needsTopic ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.picker], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerTitle, children: strings.topicsTitle }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerHint, children: strings.topicsHint }), topics.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => setTopicId(item.id), style: ({ pressed }) => [styles.topic, index > 0 && styles.convBorder, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicText, children: item.label }), (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg4, size: 14, direction: "right" })] }, item.id)))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.empty, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: config?.greeting || strings.greeting }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: config?.intro || strings.emptyHint })] })) })) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { inverted: true, style: styles.flex, data: rows, keyExtractor: (row) => row.key, contentContainerStyle: styles.thread, keyboardShouldPersistTaps: "handled", renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(ThreadRow, { ui: ui, row: item, showHandoff: item.kind === 'message' && item.message.id === handoffMessageId, onDecide: decide, onRequestHuman: requestHuman })) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.composer, children: [topic && conversationId === null ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topicRow, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.topicChip, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicChipText, numberOfLines: 1, children: topic.label }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.changeTopic, onPress: () => setTopicId(null), style: styles.topicChipX, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }) })) : null, attachments.length > 0 || uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pendingFiles, children: [attachments.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: (0, strings_1.format)(strings.removeFile, { name: attachment.filename }), onPress: () => setAttachments((current) => current.filter((a) => a.id !== attachment.id)), hitSlop: 8, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }, attachment.id))), uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.fg3, style: styles.chipSpinner }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: uploadingName })] })) : null] })) : null, error ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.err, children: error }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.cbar, showAttach && styles.cbarLead, focused && styles.cbarFocus, needsTopic && styles.cbarOff], children: [showAttach ? ((0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.attach, onPress: attach, disabled: uploadingName !== null || needsTopic, icon: (0, jsx_runtime_1.jsx)(icons_1.PaperclipIcon, { color: theme.fg3 }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, { height: inputHeight }], value: draft, onContentSizeChange: (event) => setInputHeight(Math.min(120, Math.max(30, Math.ceil(event.nativeEvent.contentSize.height)))), ...(react_native_1.Platform.OS === 'web' ? { rows: 1 } : {}), editable: !needsTopic, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onChangeText: (text) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.head, children: [(0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.back, onPress: onBack, icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg3, direction: "left" }) }), bot ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 26, look: bot.look, avatarUrl: bot.avatar_url })) : ((0, jsx_runtime_1.jsx)(Glyph, { ui: ui, name: name, url: config?.avatar_url ?? null })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headMain, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, numberOfLines: 1, children: conversation?.subject || name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.titleSub, numberOfLines: 1, children: subtitleFor(config, strings) })] }), onClose ? (0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.closeChat, onPress: onClose, icon: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3 }) }) : null] }), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.emptyScroll, keyboardShouldPersistTaps: "handled", children: needsTopic ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.picker], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerTitle, children: strings.topicsTitle }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerHint, children: strings.topicsHint }), topics.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => setTopicId(item.id), style: ({ pressed }) => [styles.topic, index > 0 && styles.convBorder, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicText, children: item.label }), (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg4, size: 14, direction: "right" })] }, item.id)))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.empty, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: config?.greeting || strings.greeting }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: config?.intro || strings.emptyHint })] })) })) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { inverted: true, style: styles.flex, data: rows, keyExtractor: (row) => row.key, contentContainerStyle: styles.thread, keyboardShouldPersistTaps: "handled", renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(ThreadRow, { ui: ui, row: item, showHandoff: item.kind === 'message' && item.message.id === handoffMessageId, onDecide: decide, onRequestHuman: requestHuman, onOpenImage: openImage })) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.composer, children: [topic && conversationId === null ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topicRow, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.topicChip, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicChipText, numberOfLines: 1, children: topic.label }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.changeTopic, onPress: () => setTopicId(null), style: styles.topicChipX, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }) })) : null, attachments.length > 0 || uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pendingFiles, children: [attachments.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: (0, strings_1.format)(strings.removeFile, { name: attachment.filename }), onPress: () => setAttachments((current) => current.filter((a) => a.id !== attachment.id)), hitSlop: 8, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }, attachment.id))), uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.fg3, style: styles.chipSpinner }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: uploadingName })] })) : null] })) : null, error ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.err, children: error }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.cbar, showAttach && styles.cbarLead, focused && styles.cbarFocus, needsTopic && styles.cbarOff], children: [showAttach ? ((0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.attach, onPress: attach, disabled: uploadingName !== null || needsTopic, icon: (0, jsx_runtime_1.jsx)(icons_1.PaperclipIcon, { color: theme.fg3 }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, { height: inputHeight }], value: draft, onContentSizeChange: (event) => setInputHeight(Math.min(120, Math.max(30, Math.ceil(event.nativeEvent.contentSize.height)))), ...(react_native_1.Platform.OS === 'web' ? { rows: 1 } : {}), editable: !needsTopic, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onChangeText: (text) => {
                                     setDraft(text);
                                     if (conversationId) {
                                         client.typing(conversationId);
                                     }
-                                }, placeholder: needsTopic ? strings.placeholderTopic : strings.placeholder, placeholderTextColor: theme.fg4, accessibilityLabel: strings.placeholder, multiline: true }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.send, disabled: !ready, onPress: send, style: [styles.send, ready && styles.sendReady], children: (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.accentFg, size: 14, angle: -90 }) })] })] })] }));
+                                }, placeholder: needsTopic ? strings.placeholderTopic : strings.placeholder, placeholderTextColor: theme.fg4, accessibilityLabel: strings.placeholder, multiline: true }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.send, disabled: !ready, onPress: send, style: [styles.send, ready && styles.sendReady], children: (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.accentFg, size: 14, angle: -90 }) })] })] }), viewing ? (0, jsx_runtime_1.jsx)(ImageViewer, { ui: ui, attachment: viewing, onClose: closeImage }) : null] }));
 }
-const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, onDecide, onRequestHuman, }) {
+const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, onDecide, onRequestHuman, onOpenImage, }) {
     const { theme, strings, styles } = ui;
     switch (row.kind) {
         case 'day':
@@ -177,16 +186,16 @@ const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, o
         case 'handed':
             return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.handed, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.handedIc, children: (0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg2 }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handedTitle, children: strings.handedOff }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handedText, children: strings.handedOffHint })] })] }));
         case 'reply':
-            return (0, jsx_runtime_1.jsx)(Bubble, { ui: ui, reply: row.reply, first: true, last: true, gap: true, showHandoff: false, onDecide: onDecide, onRequestHuman: onRequestHuman });
+            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, reply: row.reply, first: true, last: true, gap: true, showHandoff: false, onDecide: onDecide, onRequestHuman: onRequestHuman, onOpenImage: onOpenImage }));
         case 'message':
-            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, message: row.message, first: row.first, last: row.last, gap: row.gap, showHandoff: showHandoff, onDecide: onDecide, onRequestHuman: onRequestHuman }));
+            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, message: row.message, first: row.first, last: row.last, gap: row.gap, showHandoff: showHandoff, onDecide: onDecide, onRequestHuman: onRequestHuman, onOpenImage: onOpenImage }));
     }
 });
 /**
  * One bubble for a stored message or an AI answer still streaming. Both share one element
  * tree, so when the stored message replaces the stream (same row key) nothing remounts.
  */
-function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, onRequestHuman, }) {
+function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, onRequestHuman, onOpenImage, }) {
     const { theme, strings, styles, bot: fallbackBot } = ui;
     const mine = message?.direction === 'inbound';
     const ai = reply !== undefined || message?.ai === true;
@@ -210,7 +219,7 @@ function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, o
                     mine ? styles.msgMe : ai ? styles.msgAi : styles.msgThem,
                     corners,
                     local && styles.sendingMsg,
-                ], children: text ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.msgText, mine && { color: theme.accentFg }], children: text }) : (0, jsx_runtime_1.jsx)(Dots, { color: theme.ai }) })) : null, images.map((attachment) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: styles.fileGap, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.thumb, accessibilityLabel: attachment.filename, resizeMode: "cover" }) }, attachment.id))), files.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: [styles.chip, styles.fileGap], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipSize, children: fileSize(attachment.size_bytes) })] }, attachment.id))), message && action ? (0, jsx_runtime_1.jsx)(ActionCard, { ui: ui, message: message, onDecide: onDecide }) : null, message && showHandoff ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => onRequestHuman(message), style: ({ pressed }) => [styles.handoff, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg, size: 14 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handoffText, children: strings.talkToPerson })] })) : null, last && message ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.meta, children: local ? strings.sending : clockTime(message.created_at) }) : null] }));
+                ], children: text ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.msgText, mine && { color: theme.accentFg }], children: text }) : (0, jsx_runtime_1.jsx)(Dots, { color: theme.ai }) })) : null, images.map((attachment) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "imagebutton", accessibilityLabel: (0, strings_1.format)(strings.viewImage, { name: attachment.filename }), onPress: () => onOpenImage(attachment), style: ({ pressed }) => [styles.fileGap, pressed && styles.pressed], children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.thumb, resizeMode: "cover" }) }, attachment.id))), files.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: [styles.chip, styles.fileGap], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipSize, children: fileSize(attachment.size_bytes) })] }, attachment.id))), message && action ? (0, jsx_runtime_1.jsx)(ActionCard, { ui: ui, message: message, onDecide: onDecide }) : null, message && showHandoff ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => onRequestHuman(message), style: ({ pressed }) => [styles.handoff, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg, size: 14 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handoffText, children: strings.talkToPerson })] })) : null, last && message ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.meta, children: local ? strings.sending : clockTime(message.created_at) }) : null] }));
 }
 function ActionCard({ ui, message, onDecide, }) {
     const { theme, strings, styles } = ui;
@@ -225,6 +234,21 @@ function ActionCard({ ui, message, onDecide, }) {
     }[action.status];
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.action, pending && styles.actionPending], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionTop, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionTool, children: [(0, jsx_runtime_1.jsx)(icons_1.SparkIcon, { color: theme.ai, size: 8 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionToolText, numberOfLines: 1, children: action.tool.replace(/_/g, ' ') })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionNeed, action.status === 'failed' && { color: theme.danger }], children: label })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionTitle, children: action.title }), action.summary ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionSum, children: action.summary }) : null, pending ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionBtns, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onDecide(message, 'decline'), style: [styles.btn, styles.btnGhost], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.btnGhostText, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onDecide(message, 'confirm'), style: [styles.btn, styles.btnSolid], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.btnSolidText, children: strings.confirm }) })] })) : null] }));
 }
+/** An attached image shown full size over the thread, so it opens in the chat instead of a browser. */
+function ImageViewer({ ui, attachment, onClose }) {
+    const { strings, styles } = ui;
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android') {
+            return;
+        }
+        const subscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', () => {
+            onClose();
+            return true;
+        });
+        return () => subscription.remove();
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.viewer, accessibilityViewIsModal: true, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.viewerHead, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.viewerName, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.closeImage, onPress: onClose, hitSlop: 6, style: ({ pressed }) => [styles.iconBtn, pressed && styles.viewerPressed], children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "#ffffff" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.viewerBody, maximumZoomScale: 4, minimumZoomScale: 1, centerContent: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.viewerImage, resizeMode: "contain", accessibilityLabel: attachment.filename }) })] }));
+}
 function IconButton({ ui, label, onPress, icon, disabled, }) {
     return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: onPress, disabled: disabled, hitSlop: 6, style: ({ pressed }) => [ui.styles.iconBtn, pressed && { backgroundColor: ui.theme.bg2 }, disabled && ui.styles.disabled], children: icon }));
 }
@@ -377,13 +401,13 @@ function createStyles(t) {
             alignItems: 'center',
             gap: 10,
             paddingHorizontal: 12,
-            paddingTop: 12,
-            paddingBottom: 11,
+            paddingTop: 18,
+            paddingBottom: 14,
             borderBottomWidth: 1,
             borderBottomColor: t.line,
             backgroundColor: t.bg,
         },
-        headHome: { flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: 16, paddingBottom: 20, backgroundColor: t.headBg },
+        headHome: { flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: 16, paddingTop: 22, paddingBottom: 20, backgroundColor: t.headBg },
         headRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 },
         headMain: { flex: 1, minWidth: 0 },
         ws: { flexDirection: 'row', alignItems: 'center', gap: 9, flexShrink: 1 },
@@ -489,6 +513,12 @@ function createStyles(t) {
         toolText: { fontSize: 12, lineHeight: 18, color: t.fg3 },
         fileGap: { marginTop: 4 },
         thumb: { width: 220, height: 160, borderRadius: r.card, borderWidth: 1, borderColor: t.line, backgroundColor: t.bg2 },
+        viewer: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, zIndex: 10, elevation: 10, backgroundColor: '#000000' },
+        viewerHead: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 12, paddingTop: 18, paddingBottom: 14 },
+        viewerName: { flex: 1, fontSize: 14, fontWeight: '600', color: '#ffffff' },
+        viewerPressed: { backgroundColor: 'rgba(255,255,255,0.16)' },
+        viewerBody: { flexGrow: 1 },
+        viewerImage: { flex: 1, width: '100%' },
         chip: {
             flexDirection: 'row',
             alignItems: 'center',

package/lib/ui/keyboard.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { type View } from 'react-native';
+/**
+ * How far the keyboard covers the view in `ref`, for use as its bottom padding.
+ *
+ * KeyboardAvoidingView compares the keyboard with a layout relative to its parent, so it misses
+ * anything above that parent (a header, a sheet), and on Android it relies on the window
+ * shrinking, which edge-to-edge apps no longer do. This measures the view in window coordinates
+ * instead and works the same on both platforms. Call `onLayout` from the view's `onLayout` so a
+ * window that does shrink is measured again and the padding drops back.
+ */
+export declare function useKeyboardInset(ref: RefObject<View | null>, extraOffset?: number): {
+    inset: number;
+    onLayout: () => void;
+};

package/lib/ui/keyboard.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardInset = useKeyboardInset;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * How far the keyboard covers the view in `ref`, for use as its bottom padding.
+ *
+ * KeyboardAvoidingView compares the keyboard with a layout relative to its parent, so it misses
+ * anything above that parent (a header, a sheet), and on Android it relies on the window
+ * shrinking, which edge-to-edge apps no longer do. This measures the view in window coordinates
+ * instead and works the same on both platforms. Call `onLayout` from the view's `onLayout` so a
+ * window that does shrink is measured again and the padding drops back.
+ */
+function useKeyboardInset(ref, extraOffset = 0) {
+    const [inset, setInset] = (0, react_1.useState)(0);
+    const keyboard = (0, react_1.useRef)(null);
+    const measure = (0, react_1.useCallback)(() => {
+        const event = keyboard.current;
+        const view = ref.current;
+        if (!event || !view) {
+            setInset(0);
+            return;
+        }
+        view.measureInWindow((_x, y, _width, height) => {
+            if (keyboard.current !== event) {
+                return;
+            }
+            const next = Math.max(0, Math.round(y + height - event.endCoordinates.screenY + extraOffset));
+            setInset((current) => {
+                if (current !== next) {
+                    animateWithKeyboard(event);
+                }
+                return next;
+            });
+        });
+    }, [ref, extraOffset]);
+    (0, react_1.useEffect)(() => {
+        const show = (event) => {
+            keyboard.current = event;
+            measure();
+        };
+        const hide = (event) => {
+            keyboard.current = null;
+            animateWithKeyboard(event);
+            setInset(0);
+        };
+        const subscriptions = react_native_1.Platform.OS === 'ios'
+            ? [react_native_1.Keyboard.addListener('keyboardWillChangeFrame', show), react_native_1.Keyboard.addListener('keyboardWillHide', hide)]
+            : [react_native_1.Keyboard.addListener('keyboardDidShow', show), react_native_1.Keyboard.addListener('keyboardDidHide', hide)];
+        return () => subscriptions.forEach((subscription) => subscription.remove());
+    }, [measure]);
+    return { inset, onLayout: measure };
+}
+/** iOS reports the keyboard's own curve, so the padding can move in step with it. */
+function animateWithKeyboard(event) {
+    if (react_native_1.Platform.OS !== 'ios' || !event?.duration) {
+        return;
+    }
+    const type = react_native_1.LayoutAnimation.Types[event.easing] ?? react_native_1.LayoutAnimation.Types.keyboard;
+    react_native_1.LayoutAnimation.configureNext({ duration: event.duration, update: { duration: event.duration, type } });
+}

package/lib/ui/strings.d.ts

@@ -20,6 +20,8 @@ export declare const defaultStrings: {
     sending: string;
     uploading: string;
     removeFile: string;
+    viewImage: string;
+    closeImage: string;
     fileTypeRefused: string;
     fileTooLarge: string;
     uploadFailed: string;

package/lib/ui/strings.js

@@ -24,6 +24,8 @@ exports.defaultStrings = {
     sending: 'Sending…',
     uploading: 'Uploading…',
     removeFile: 'Remove {name}',
+    viewImage: 'View {name}',
+    closeImage: 'Close image',
     fileTypeRefused: "{name} can't be sent here. Try another file type.",
     fileTooLarge: '{name} is larger than 25 MB.',
     uploadFailed: "Couldn't upload {name}. Try again.",

package/package.json

@@ -1,45 +1,46 @@
-{
-  "name": "opendesk-react-native",
-  "version": "0.1.2",
-  "description": "React Native SDK for openDesk live chat: headless client, realtime, hooks and a drop-in chat screen.",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "lib",
-    "src",
-    "!src/**/__tests__"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "prepare": "npm run build",
-    "example": "vite --config example/vite.config.ts"
-  },
-  "keywords": [
-    "opendesk",
-    "react-native",
-    "live-chat",
-    "support"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "phoenix": "^1.7.21"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-native": ">=0.72"
-  },
-  "devDependencies": {
-    "@types/phoenix": "^1.6.6",
-    "@types/react": "^19.1.0",
-    "@vitejs/plugin-react": "^5.2.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.3.1",
-    "react-native": "^0.81.0",
-    "react-native-web": "^0.21.4",
-    "typescript": "^5.9.2",
-    "vite": "^7.3.7",
-    "vitest": "^3.2.4"
-  }
-}
+{
+  "name": "opendesk-react-native",
+  "version": "0.1.6",
+  "description": "React Native SDK for openDesk live chat: headless client, realtime, hooks and a drop-in chat screen.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "assets",
+    "!src/**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepare": "npm run build",
+    "example": "vite --config example/vite.config.ts"
+  },
+  "keywords": [
+    "opendesk",
+    "react-native",
+    "live-chat",
+    "support"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "phoenix": "^1.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72"
+  },
+  "devDependencies": {
+    "@types/phoenix": "^1.6.6",
+    "@types/react": "^19.1.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.3.1",
+    "react-native": "^0.81.0",
+    "react-native-web": "^0.21.4",
+    "typescript": "^5.9.2",
+    "vite": "^7.3.7",
+    "vitest": "^3.2.4"
+  }
+}