opendesk-react-native 0.0.0-stage → 0.1.1

package/lib/ui/OpenDeskChat.js

@@ -0,0 +1,636 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDeskChat = OpenDeskChat;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_2 = require("../react");
+const BotFace_1 = require("./BotFace");
+const icons_1 = require("./icons");
+const strings_1 = require("./strings");
+const theme_1 = require("./theme");
+const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
+const GROUP_GAP_MS = 5 * 60 * 1000;
+/**
+ * A drop-in support screen that mirrors openDesk's web widget: the home screen, the thread
+ * with AI streaming, actions and handoff, and the composer with attachments.
+ */
+function OpenDeskChat({ initialConversationId, onClose, pickAttachment, accentColor, theme: themeSetting, strings: stringOverrides, keyboardVerticalOffset = 0, }) {
+    const [conversationId, setConversationId] = (0, react_1.useState)(initialConversationId ?? null);
+    const [composing, setComposing] = (0, react_1.useState)(false);
+    const config = (0, react_2.useOpenDeskState)((state) => state.config);
+    const systemScheme = (0, react_native_1.useColorScheme)();
+    const setting = themeSetting ?? config?.theme ?? 'auto';
+    const scheme = setting === 'auto' ? (systemScheme === 'dark' ? 'dark' : 'light') : setting;
+    const theme = (0, react_1.useMemo)(() => (0, theme_1.makeTheme)(config, scheme, accentColor), [config, scheme, accentColor]);
+    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 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: () => {
+                setConversationId(null);
+                setComposing(false);
+            }, onClose: onClose, onStarted: (id) => {
+                setComposing(false);
+                setConversationId(id);
+            } })) : ((0, jsx_runtime_1.jsx)(Home, { ui: ui, onClose: onClose, onOpen: setConversationId, onNew: () => setComposing(true) })) }));
+}
+function subtitleFor(config, strings) {
+    if (config?.subtitle) {
+        return config.subtitle;
+    }
+    return config?.ai_answers && config.bot ? (0, strings_1.format)(strings.replyTimeAi, { name: config.bot.name }) : strings.replyTime;
+}
+function Home({ ui, onClose, onOpen, onNew, }) {
+    const { theme, strings, styles } = ui;
+    const { conversations, ready, error } = (0, react_2.useConversations)();
+    const unread = (0, react_2.useOpenDeskState)((state) => state.unread);
+    const config = (0, react_2.useOpenDeskState)((state) => state.config);
+    const name = config?.title || config?.workspace_name || strings.support;
+    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, styles.headHome], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.ws, children: [(0, jsx_runtime_1.jsx)(Glyph, { ui: ui, name: name, url: config?.avatar_url ?? null }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.wsName, numberOfLines: 1, children: name })] }), 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] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.greet, children: config?.greeting || strings.greeting }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.subRow, children: [(0, jsx_runtime_1.jsx)(AvatarStack, { ui: ui, config: config }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sub, children: subtitleFor(config, strings) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.homeBody, children: [!ready ? (error ? ((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: strings.unavailable }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: strings.unavailableHint })] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.skeletonCard], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.skel, { width: '60%' }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.skel, { width: '85%' }] })] }))) : null, ready && conversations.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.card, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardHead, children: strings.yourConversations }), conversations.map((conversation, index) => ((0, jsx_runtime_1.jsx)(ConversationRow, { ui: ui, conversation: conversation, unread: unread[conversation.id] ?? 0, first: index === 0, onOpen: onOpen }, conversation.id)))] })) : null, config?.open === false ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.away, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.awayText, children: config.offline_message || strings.offlineDefault }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: onNew, style: ({ pressed }) => [styles.primary, pressed && styles.pressed], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.primaryText, children: strings.sendMessage }), (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.accentFg, size: 15 })] }), config?.help_center_url ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.card, children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "link", onPress: () => react_native_1.Linking.openURL(config.help_center_url), style: ({ pressed }) => [styles.linkRow, pressed && { backgroundColor: theme.bg3 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.linkText, children: strings.searchHelp }), (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.fg3, size: 14, angle: -45 })] }) })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "link", onPress: () => react_native_1.Linking.openURL('https://opendesk.sh'), style: styles.foot, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.footText, children: strings.poweredBy }) })] }));
+}
+const ConversationRow = (0, react_1.memo)(function ConversationRow({ ui, conversation, unread, first, onOpen, }) {
+    const { theme, strings, styles } = ui;
+    const open = conversation.status === 'open' || conversation.status === 'pending';
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => onOpen(conversation.id), style: ({ pressed }) => [styles.conv, !first && styles.convBorder, pressed && { backgroundColor: theme.bg3 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.dot, open && { backgroundColor: theme.accent }] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.convMain, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.convTop, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.convSubject, unread > 0 && styles.bold], numberOfLines: 1, children: conversation.subject || strings.conversation }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.time, children: relativeTime(conversation.last_message_at) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.convTop, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.convPrev, numberOfLines: 1, children: conversation.last_message_preview || ' ' }), unread > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.unread, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.unreadText, children: unread }) })) : null] })] })] }));
+});
+function Thread({ ui, conversationId, pickAttachment, onBack, onClose, onStarted, }) {
+    const { theme, strings, styles } = ui;
+    const client = (0, react_2.useOpenDesk)();
+    const config = (0, react_2.useOpenDeskState)((state) => state.config);
+    const { messages, aiReplies, typing, conversation } = (0, react_2.useConversation)(conversationId);
+    const [draft, setDraft] = (0, react_1.useState)('');
+    const [attachments, setAttachments] = (0, react_1.useState)([]);
+    const [uploadingName, setUploadingName] = (0, react_1.useState)(null);
+    const [topicId, setTopicId] = (0, react_1.useState)(null);
+    const [sending, setSending] = (0, react_1.useState)(false);
+    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 topics = config?.topics ?? [];
+    const topic = topics.find((t) => t.id === topicId) ?? null;
+    const needsTopic = conversationId === null && topics.length > 0 && topic === null;
+    const name = config?.title || config?.workspace_name || strings.support;
+    const lastMessage = messages[messages.length - 1];
+    const lastAiIndex = lastIndexWhere(messages, (m) => m.ai === true);
+    const handedOff = conversation?.ai_handoff === true && !messages.slice(lastAiIndex + 1).some((m) => m.author.type === 'user');
+    const handoffMessageId = conversation && !conversation.ai_handoff && aiReplies.length === 0 && lastMessage?.ai && lastMessage.direction === 'outbound'
+        ? lastMessage.id
+        : null;
+    const rows = (0, react_1.useMemo)(() => buildRows(messages, aiReplies, typing, handedOff, strings), [messages, aiReplies, typing, handedOff, strings]);
+    const decide = (0, react_1.useCallback)((message, decision) => {
+        if (message.ai_action) {
+            client.decideAction(message.ticket_id, message.ai_action.id, decision).catch(() => undefined);
+        }
+    }, [client]);
+    const requestHuman = (0, react_1.useCallback)((message) => {
+        client.requestHuman(message.ticket_id).catch(() => setError(strings.handoffFailed));
+    }, [client, strings.handoffFailed]);
+    const ready = (draft.trim().length > 0 || attachments.length > 0) && !sending && uploadingName === null && !needsTopic;
+    const send = (0, react_1.useCallback)(async () => {
+        if (!ready) {
+            return;
+        }
+        const body = draft.trim();
+        const attachmentIds = attachments.map((attachment) => attachment.id);
+        setError(null);
+        setDraft('');
+        setAttachments([]);
+        try {
+            if (conversationId) {
+                await client.sendMessage(conversationId, { ...(body ? { body } : {}), attachment_ids: attachmentIds });
+            }
+            else {
+                setSending(true);
+                const started = await client.startConversation({
+                    ...(body ? { body } : {}),
+                    attachment_ids: attachmentIds,
+                    ...(topicId ? { topic_id: topicId } : {}),
+                });
+                onStarted(started.id);
+            }
+        }
+        catch (caught) {
+            setDraft(body);
+            setAttachments(attachments);
+            setError(caught instanceof Error ? `${strings.notSent} ${caught.message}` : strings.notSent);
+        }
+        finally {
+            setSending(false);
+        }
+    }, [attachments, client, conversationId, draft, onStarted, ready, strings.notSent, topicId]);
+    const attach = (0, react_1.useCallback)(async () => {
+        if (!pickAttachment) {
+            return;
+        }
+        setError(null);
+        let file;
+        try {
+            file = await pickAttachment();
+        }
+        catch {
+            return;
+        }
+        if (!file) {
+            return;
+        }
+        const fileName = 'name' in file && typeof file.name === 'string' ? file.name : 'file';
+        const size = 'size' in file && typeof file.size === 'number' ? file.size : undefined;
+        const allowed = config?.attachment_extensions;
+        const dot = fileName.lastIndexOf('.');
+        if (allowed && allowed.length > 0 && (dot < 1 || !allowed.includes(fileName.slice(dot).toLowerCase()))) {
+            setError((0, strings_1.format)(strings.fileTypeRefused, { name: fileName }));
+            return;
+        }
+        if (size !== undefined && size > MAX_UPLOAD_BYTES) {
+            setError((0, strings_1.format)(strings.fileTooLarge, { name: fileName }));
+            return;
+        }
+        setUploadingName(fileName);
+        try {
+            const uploaded = await client.upload(file);
+            setAttachments((current) => [...current, uploaded]);
+        }
+        catch (caught) {
+            setError(caught instanceof Error && caught.message ? caught.message : (0, strings_1.format)(strings.uploadFailed, { name: fileName }));
+        }
+        finally {
+            setUploadingName(null);
+        }
+    }, [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) => {
+                                    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 }) })] })] })] }));
+}
+const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, onDecide, onRequestHuman, }) {
+    const { theme, strings, styles } = ui;
+    switch (row.kind) {
+        case 'day':
+            return (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.day, children: row.label });
+        case 'typing':
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.typing, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.typingBubble, children: (0, jsx_runtime_1.jsx)(Dots, { color: theme.fg3 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.typingText, children: (0, strings_1.format)(strings.typing, { name: row.name }) })] }));
+        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 });
+        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 }));
+    }
+});
+/**
+ * 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, }) {
+    const { theme, strings, styles, bot: fallbackBot } = ui;
+    const mine = message?.direction === 'inbound';
+    const ai = reply !== undefined || message?.ai === true;
+    const author = message ? message.author.user?.name || message.author.bot?.name : reply?.bot?.name;
+    const bot = message ? message.author.bot : reply?.bot;
+    const avatar = message ? (message.author.user?.avatar_url ?? bot?.avatar_url) : bot?.avatar_url;
+    const botLook = bot?.look ?? fallbackBot?.look;
+    const text = message ? (message.body_text ?? '') : (reply?.text ?? '');
+    const local = message?.id.startsWith('local-') === true;
+    const action = message?.ai_action;
+    const tools = reply?.tools ?? [];
+    const corners = mine
+        ? { borderBottomRightRadius: 4, ...(first ? {} : { borderTopRightRadius: 4 }) }
+        : { borderBottomLeftRadius: 4, ...(first ? {} : { borderTopLeftRadius: 4 }) };
+    const images = (message?.attachments ?? []).filter((a) => a.content_type.startsWith('image/'));
+    const files = (message?.attachments ?? []).filter((a) => !a.content_type.startsWith('image/'));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.row, mine ? styles.rowMe : styles.rowThem, gap && styles.rowGap], children: [!mine && first && author ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.who, children: [ai ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 18, look: botLook, avatarUrl: avatar })) : avatar ? ((0, jsx_runtime_1.jsx)(Avatar, { ui: ui, size: 18, name: author, url: avatar, tint: theme.bg2 })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.whoName, children: author }), ai ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.aiPill, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.aiPillText, children: strings.ai }) })) : null] })) : null, tools.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.tools, children: tools.map((tool, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.tool, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.toolIc, tool.status === 'error' && { backgroundColor: theme.bg2 }], children: (0, jsx_runtime_1.jsx)(icons_1.SparkIcon, { color: tool.status === 'error' ? theme.fg3 : theme.ai, size: 8 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.toolText, tool.status === 'running' && { color: theme.fg2 }], children: (0, strings_1.format)(tool.status === 'running' ? strings.checking : tool.status === 'error' ? strings.toolFailed : strings.checked, {
+                                tool: tool.name.replace(/_/g, ' '),
+                            }) })] }, `${tool.name}-${index}`))) })) : null, text || reply ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    styles.msg,
+                    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] }));
+}
+function ActionCard({ ui, message, onDecide, }) {
+    const { theme, strings, styles } = ui;
+    const action = message.ai_action;
+    const pending = action.status === 'pending';
+    const label = {
+        pending: strings.actionPending,
+        confirmed: strings.actionConfirmed,
+        declined: strings.actionDeclined,
+        expired: strings.actionExpired,
+        failed: strings.actionFailed,
+    }[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] }));
+}
+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 }));
+}
+function Glyph({ ui, name, url }) {
+    const { styles } = ui;
+    return url ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: url }, style: styles.wsGlyph })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.wsGlyph, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.wsGlyphText, children: name.trim().charAt(0).toUpperCase() }) }));
+}
+function Avatar({ ui, size, name, url, round, tint, style, }) {
+    const radius = round ? size / 2 : Math.min(ui.theme.radius.av, size / 2);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            { width: size, height: size, borderRadius: radius, backgroundColor: tint, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },
+            style,
+        ], children: url ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: url }, style: { width: size, height: size } })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: size * 0.4, fontWeight: '600', color: ui.theme.fg2 }, children: initials(name) })) }));
+}
+function AvatarStack({ ui, config }) {
+    const { theme } = ui;
+    const ring = { borderWidth: 2, borderColor: theme.headBg };
+    const team = (config?.team ?? []).slice(0, 3);
+    const bot = config?.ai_answers ? config.bot : null;
+    if (!bot && team.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [bot ? (0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 22, look: bot.look, avatarUrl: bot.avatar_url }) : null, team.map((member, index) => ((0, jsx_runtime_1.jsx)(Avatar, { ui: ui, size: 22, name: member.name, url: member.avatar_url, tint: theme.bg2, style: [ring, { marginLeft: index === 0 && bot ? 1 : -7 }] }, `${member.name}-${index}`)))] }));
+}
+/** Three dots that pulse in turn, like the widget's typing indicator. */
+function Dots({ color }) {
+    const values = (0, react_1.useRef)([0, 1, 2].map(() => new react_native_1.Animated.Value(0.3))).current;
+    (0, react_1.useEffect)(() => {
+        const native = react_native_1.Platform.OS !== 'web';
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.stagger(160, values.map((value) => react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(value, { toValue: 1, duration: 280, useNativeDriver: native }),
+            react_native_1.Animated.timing(value, { toValue: 0.3, duration: 280, useNativeDriver: native }),
+        ]))));
+        loop.start();
+        return () => loop.stop();
+    }, [values]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center', height: 19.5, gap: 3 }, children: values.map((opacity, index) => ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: { width: 5, height: 5, borderRadius: 3, backgroundColor: color, opacity } }, index))) }));
+}
+/** Newest first for the inverted list: typing, streaming answers, then messages grouped by author with day labels. */
+function buildRows(messages, aiReplies, typing, handedOff, strings) {
+    const rows = [];
+    const authorKey = (m) => m.direction === 'inbound' ? 'me' : `${m.author.type}:${m.author.user?.id ?? m.author.bot?.id ?? ''}:${m.ai ? 'ai' : ''}`;
+    messages.forEach((message, index) => {
+        const previous = messages[index - 1];
+        const next = messages[index + 1];
+        const day = dayLabel(message.created_at, strings);
+        const newDay = !previous || dayLabel(previous.created_at, strings) !== day;
+        if (newDay) {
+            rows.push({ kind: 'day', key: `day-${day}`, label: day });
+        }
+        const startsGroup = newDay || authorKey(previous) !== authorKey(message) || Date.parse(message.created_at) - Date.parse(previous.created_at) > GROUP_GAP_MS;
+        const endsGroup = !next ||
+            authorKey(next) !== authorKey(message) ||
+            Date.parse(next.created_at) - Date.parse(message.created_at) > GROUP_GAP_MS ||
+            dayLabel(next.created_at, strings) !== day;
+        rows.push({
+            kind: 'message',
+            key: message.client_id ?? message.id,
+            message,
+            first: startsGroup,
+            last: endsGroup,
+            gap: startsGroup && !newDay,
+        });
+    });
+    if (handedOff) {
+        rows.push({ kind: 'handed', key: 'handed' });
+    }
+    aiReplies.forEach((reply) => rows.push({ kind: 'reply', key: `ai-${reply.id}`, reply }));
+    if (typing) {
+        rows.push({ kind: 'typing', key: 'typing', name: typing });
+    }
+    return rows.reverse();
+}
+function lastIndexWhere(items, predicate) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (predicate(items[i])) {
+            return i;
+        }
+    }
+    return -1;
+}
+function initials(name) {
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part.charAt(0).toUpperCase())
+        .join('');
+}
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+function dayLabel(iso, strings) {
+    const date = new Date(iso);
+    const today = new Date();
+    const yesterday = new Date(today.getTime() - 86400000);
+    if (date.toDateString() === today.toDateString()) {
+        return strings.today;
+    }
+    if (date.toDateString() === yesterday.toDateString()) {
+        return strings.yesterday;
+    }
+    return `${months[date.getMonth()]} ${date.getDate()}`;
+}
+function clockTime(iso) {
+    const date = new Date(iso);
+    const hours = date.getHours();
+    return `${hours % 12 || 12}:${String(date.getMinutes()).padStart(2, '0')} ${hours < 12 ? 'AM' : 'PM'}`;
+}
+function relativeTime(iso) {
+    const seconds = Math.round((Date.now() - Date.parse(iso)) / 1000);
+    if (!Number.isFinite(seconds)) {
+        return '';
+    }
+    if (seconds < 45) {
+        return 'now';
+    }
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60) {
+        return `${minutes}m ago`;
+    }
+    const hours = Math.round(minutes / 60);
+    if (hours < 24) {
+        return `${hours}h ago`;
+    }
+    const days = Math.round(hours / 24);
+    if (days < 7) {
+        return `${days}d ago`;
+    }
+    const date = new Date(iso);
+    return `${months[date.getMonth()]} ${date.getDate()}`;
+}
+function fileSize(bytes) {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+        return `${Math.round(bytes / 1024)} KB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function createStyles(t) {
+    const r = t.radius;
+    return react_native_1.StyleSheet.create({
+        root: { flex: 1, backgroundColor: t.bg },
+        flex: { flex: 1 },
+        bold: { fontWeight: '600' },
+        pressed: { opacity: 0.92, transform: [{ scale: 0.985 }] },
+        disabled: { opacity: 0.4 },
+        head: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 10,
+            paddingHorizontal: 12,
+            paddingTop: 12,
+            paddingBottom: 11,
+            borderBottomWidth: 1,
+            borderBottomColor: t.line,
+            backgroundColor: t.bg,
+        },
+        headHome: { flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: 16, 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 },
+        wsGlyph: {
+            width: 26,
+            height: 26,
+            borderRadius: Math.min(r.av, 13),
+            backgroundColor: t.accent,
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+        },
+        wsGlyphText: { color: t.accentFg, fontSize: 12, fontWeight: '700' },
+        wsName: { fontSize: 13.5, fontWeight: '600', letterSpacing: -0.14, color: t.fg, flexShrink: 1 },
+        greet: { marginTop: 18, fontSize: 22, lineHeight: 28, fontWeight: '600', letterSpacing: -0.55, color: t.fg },
+        subRow: { marginTop: 8, flexDirection: 'row', alignItems: 'center', gap: 8 },
+        sub: { flex: 1, color: t.fg3, fontSize: 13, lineHeight: 18 },
+        title: { fontSize: 14, fontWeight: '600', letterSpacing: -0.14, color: t.fg },
+        titleSub: { fontSize: 12, color: t.fg3, marginTop: 1 },
+        iconBtn: { width: 30, height: 30, borderRadius: Math.min(r.ctl, 15), alignItems: 'center', justifyContent: 'center' },
+        homeBody: { padding: 16, gap: 12 },
+        card: { borderWidth: 1, borderColor: t.line, borderRadius: r.card, backgroundColor: t.bg, overflow: 'hidden' },
+        cardHead: {
+            paddingHorizontal: 14,
+            paddingTop: 12,
+            paddingBottom: 6,
+            fontSize: 11,
+            fontWeight: '600',
+            letterSpacing: 0.66,
+            textTransform: 'uppercase',
+            color: t.fg4,
+        },
+        conv: { flexDirection: 'row', alignItems: 'flex-start', gap: 10, paddingVertical: 10, paddingHorizontal: 14 },
+        convBorder: { borderTopWidth: 1, borderTopColor: t.line },
+        dot: { width: 7, height: 7, borderRadius: 4, marginTop: 6, backgroundColor: t.line2 },
+        convMain: { flex: 1, minWidth: 0 },
+        convTop: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 8 },
+        convSubject: { flex: 1, fontSize: 13, fontWeight: '500', color: t.fg },
+        convPrev: { flex: 1, fontSize: 12.5, color: t.fg3, marginTop: 1 },
+        time: { fontFamily: t.mono, fontSize: 10.5, color: t.fg4 },
+        unread: { minWidth: 18, height: 18, borderRadius: 9, paddingHorizontal: 5, backgroundColor: t.danger, alignItems: 'center', justifyContent: 'center' },
+        unreadText: { color: '#ffffff', fontSize: 10.5, fontWeight: '600' },
+        primary: {
+            height: 44,
+            borderRadius: r.ctl,
+            backgroundColor: t.accent,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            shadowColor: '#000000',
+            shadowOpacity: 0.08,
+            shadowRadius: 2,
+            shadowOffset: { width: 0, height: 1 },
+            elevation: 1,
+        },
+        primaryText: { color: t.accentFg, fontSize: 13.5, fontWeight: '500' },
+        linkRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 12, paddingHorizontal: 14 },
+        linkText: { fontSize: 13, fontWeight: '500', color: t.fg },
+        away: { borderWidth: 1, borderColor: t.line, borderRadius: r.card, backgroundColor: t.bg3, padding: 12 },
+        awayText: { fontSize: 12.5, lineHeight: 18, color: t.fg2 },
+        foot: { height: 30, alignItems: 'center', justifyContent: 'center', borderTopWidth: 1, borderTopColor: t.line },
+        footText: { fontSize: 11, color: t.fg4 },
+        skeletonCard: { paddingVertical: 4 },
+        skel: { height: 12, borderRadius: 4, marginVertical: 10, marginHorizontal: 14, backgroundColor: t.bg2 },
+        emptyScroll: { flexGrow: 1 },
+        empty: { paddingVertical: 32, paddingHorizontal: 24, alignItems: 'center' },
+        emptyTitle: { fontSize: 14, fontWeight: '600', color: t.fg, marginBottom: 4, textAlign: 'center' },
+        emptyText: { fontSize: 13, lineHeight: 19, color: t.fg3, textAlign: 'center' },
+        picker: { margin: 14 },
+        pickerTitle: { paddingHorizontal: 14, paddingTop: 14, fontSize: 14, fontWeight: '600', color: t.fg },
+        pickerHint: { paddingHorizontal: 14, marginTop: 2, marginBottom: 12, fontSize: 12.5, lineHeight: 18, color: t.fg3 },
+        topic: {
+            minHeight: 42,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 10,
+            paddingVertical: 10,
+            paddingHorizontal: 14,
+        },
+        topicText: { flex: 1, fontSize: 13.5, lineHeight: 19, fontWeight: '500', color: t.fg },
+        thread: { paddingTop: 16, paddingHorizontal: 14, paddingBottom: 8 },
+        day: { alignSelf: 'center', fontFamily: t.mono, fontSize: 10.5, color: t.fg4, marginTop: 10, marginBottom: 6 },
+        row: { maxWidth: '84%', marginTop: 2 },
+        rowMe: { alignSelf: 'flex-end', alignItems: 'flex-end' },
+        rowThem: { alignSelf: 'flex-start', alignItems: 'flex-start' },
+        rowGap: { marginTop: 12 },
+        who: { flexDirection: 'row', alignItems: 'center', gap: 6, marginHorizontal: 2, marginBottom: 4 },
+        whoName: { fontSize: 11.5, fontWeight: '500', color: t.fg2 },
+        aiPill: { height: 16, paddingHorizontal: 5, borderRadius: 4, backgroundColor: t.aiSoft, justifyContent: 'center' },
+        aiPillText: { color: t.ai, fontSize: 9.5, fontWeight: '600', letterSpacing: 0.38 },
+        msg: { paddingVertical: 8, paddingHorizontal: 12, maxWidth: '100%', borderRadius: r.bubble },
+        msgMe: { backgroundColor: t.accent },
+        msgThem: { backgroundColor: t.bg2 },
+        msgAi: { backgroundColor: t.bg3, borderWidth: 1, borderColor: t.line },
+        msgText: { fontSize: 13.5, lineHeight: 19.5, color: t.fg },
+        sendingMsg: { opacity: 0.7 },
+        meta: { fontFamily: t.mono, fontSize: 10, color: t.fg4, marginTop: 3, marginHorizontal: 4 },
+        tools: { gap: 4, marginBottom: 6 },
+        tool: { flexDirection: 'row', alignItems: 'center', gap: 7 },
+        toolIc: { width: 16, height: 16, borderRadius: 8, backgroundColor: t.aiSoft, alignItems: 'center', justifyContent: 'center' },
+        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 },
+        chip: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            maxWidth: 240,
+            height: 30,
+            paddingHorizontal: 10,
+            borderRadius: r.ctl,
+            borderWidth: 1,
+            borderColor: t.line,
+            backgroundColor: t.bg,
+        },
+        chipText: { flexShrink: 1, fontSize: 12, color: t.fg },
+        chipSize: { fontFamily: t.mono, fontSize: 10.5, color: t.fg4 },
+        chipSpinner: { transform: [{ scale: 0.6 }], width: 14, height: 14 },
+        handoff: {
+            marginTop: 6,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            height: 30,
+            paddingHorizontal: 11,
+            borderRadius: r.ctl,
+            borderWidth: 1,
+            borderColor: t.line2,
+            backgroundColor: t.bg,
+        },
+        handoffText: { fontSize: 12.5, fontWeight: '500', color: t.fg },
+        handed: {
+            marginTop: 6,
+            marginBottom: 14,
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 10,
+            paddingVertical: 11,
+            paddingHorizontal: 12,
+            borderRadius: r.card,
+            backgroundColor: t.bg3,
+            borderWidth: 1,
+            borderColor: t.line,
+        },
+        handedIc: {
+            width: 28,
+            height: 28,
+            borderRadius: Math.min(r.av, 14),
+            backgroundColor: t.bg,
+            borderWidth: 1,
+            borderColor: t.line,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        handedTitle: { fontSize: 13, lineHeight: 18, fontWeight: '600', color: t.fg },
+        handedText: { fontSize: 12, lineHeight: 17, color: t.fg3 },
+        typing: { alignSelf: 'flex-start', flexDirection: 'row', alignItems: 'center', gap: 8, paddingTop: 10, paddingBottom: 4 },
+        typingBubble: {
+            paddingHorizontal: 12,
+            height: 36,
+            justifyContent: 'center',
+            borderRadius: r.bubble,
+            borderBottomLeftRadius: 4,
+            backgroundColor: t.bg2,
+        },
+        typingText: { fontSize: 12, color: t.fg3 },
+        action: {
+            marginTop: 6,
+            width: 272,
+            maxWidth: '100%',
+            paddingTop: 11,
+            paddingHorizontal: 12,
+            paddingBottom: 12,
+            borderRadius: r.card,
+            borderWidth: 1,
+            borderColor: t.line,
+            backgroundColor: t.bg,
+        },
+        actionPending: { borderColor: t.aiLine },
+        actionTop: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8, minHeight: 20 },
+        actionTool: { flexDirection: 'row', alignItems: 'center', gap: 5, flexShrink: 1 },
+        actionToolText: { fontSize: 11.5, fontWeight: '500', color: t.ai },
+        actionNeed: { fontSize: 11, color: t.fg4 },
+        actionTitle: { marginTop: 6, fontSize: 13.5, lineHeight: 19, fontWeight: '600', letterSpacing: -0.14, color: t.fg },
+        actionSum: { marginTop: 2, fontSize: 12.5, lineHeight: 18, color: t.fg2 },
+        actionBtns: { flexDirection: 'row', justifyContent: 'flex-end', gap: 6, marginTop: 10 },
+        btn: { height: 30, paddingHorizontal: 12, borderRadius: r.ctl, alignItems: 'center', justifyContent: 'center' },
+        btnSolid: { backgroundColor: t.accent },
+        btnSolidText: { color: t.accentFg, fontSize: 12.5, fontWeight: '500' },
+        btnGhost: { borderWidth: 1, borderColor: t.line2 },
+        btnGhostText: { color: t.fg, fontSize: 12.5, fontWeight: '500' },
+        composer: { paddingTop: 10, paddingHorizontal: 12, paddingBottom: 12, gap: 6, backgroundColor: t.bg },
+        topicRow: { alignItems: 'center' },
+        topicChip: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            height: 26,
+            paddingLeft: 10,
+            paddingRight: 4,
+            borderRadius: 999,
+            backgroundColor: t.bg2,
+            borderWidth: 1,
+            borderColor: t.line,
+        },
+        topicChipText: { fontSize: 12, fontWeight: '500', color: t.fg },
+        topicChipX: { width: 20, height: 20, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
+        pendingFiles: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+        pendingChip: { height: 26 },
+        err: { color: t.danger, fontSize: 12 },
+        cbar: {
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: 4,
+            padding: 5,
+            paddingLeft: 12,
+            borderWidth: 1,
+            borderColor: t.line,
+            borderRadius: r.bar,
+            backgroundColor: t.bg,
+        },
+        cbarLead: { paddingLeft: 5 },
+        cbarFocus: { borderColor: t.fg4 },
+        cbarOff: { backgroundColor: t.bg3 },
+        input: {
+            flex: 1,
+            minHeight: 30,
+            maxHeight: 120,
+            paddingVertical: 5,
+            paddingHorizontal: 0,
+            fontSize: 14,
+            lineHeight: 20,
+            color: t.fg,
+            ...(react_native_1.Platform.OS === 'web' ? { outlineStyle: 'none' } : {}),
+        },
+        send: {
+            width: 30,
+            height: 30,
+            borderRadius: Math.min(r.ctl, 15),
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: t.accent,
+            opacity: 0.28,
+            transform: [{ scale: 0.9 }],
+        },
+        sendReady: { opacity: 1, transform: [{ scale: 1 }] },
+    });
+}