@agentforge-io/chat-react 3.0.0 → 4.0.0

package/dist/messenger/tabs/HelpTab.js

@@ -0,0 +1,212 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpTab = HelpTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function HelpTab({ theme, adapter, title = 'Help' }) {
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [debounced, setDebounced] = (0, react_1.useState)('');
+    const [results, setResults] = (0, react_1.useState)(null);
+    const [collections, setCollections] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Debounce query
+    (0, react_1.useEffect)(() => {
+        const t = setTimeout(() => setDebounced(query.trim()), 250);
+        return () => clearTimeout(t);
+    }, [query]);
+    // Load collections once
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const cols = await adapter.listCollections();
+                if (!cancelled)
+                    setCollections(cols);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e.message);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter]);
+    // Search on debounced query change
+    (0, react_1.useEffect)(() => {
+        if (!debounced) {
+            setResults(null);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const r = await adapter.search(debounced);
+                if (!cancelled)
+                    setResults(r);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e.message);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, debounced]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            background: theme.surface,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '14px 16px 10px',
+                    borderBottom: '1px solid #e2e8f0',
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: 16,
+                            fontWeight: 600,
+                            color: theme.onSurface,
+                            textAlign: 'center',
+                            marginBottom: 10,
+                        }, children: title }), (0, jsx_runtime_1.jsx)(SearchInput, { value: query, onChange: setQuery, accent: theme.accent })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto' }, children: [error && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            padding: 16,
+                            color: '#dc2626',
+                            fontSize: 13,
+                        }, children: error })), debounced ? ((0, jsx_runtime_1.jsx)(ResultsList, { results: results, loading: loading, onWalkthroughOpen: adapter.onWalkthroughOpen, accent: theme.accent })) : ((0, jsx_runtime_1.jsx)(CollectionsList, { collections: collections, accent: theme.accent }))] })] }));
+}
+function SearchInput({ value, onChange, accent, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            background: '#f1f5f9',
+            borderRadius: 10,
+            padding: '8px 12px',
+        }, children: [(0, jsx_runtime_1.jsx)(SearchIcon, { color: "#64748b" }), (0, jsx_runtime_1.jsx)("input", { value: value, onChange: (e) => onChange(e.target.value), placeholder: "Search for help", style: {
+                    flex: 1,
+                    border: 'none',
+                    outline: 'none',
+                    background: 'transparent',
+                    fontSize: 14,
+                    color: '#0f172a',
+                    fontFamily: 'inherit',
+                }, "aria-label": "Search help" }), value && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onChange(''), "aria-label": "Clear search", style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: accent,
+                    cursor: 'pointer',
+                    fontSize: 18,
+                    lineHeight: 1,
+                    padding: 0,
+                }, children: "\u00D7" }))] }));
+}
+function CollectionsList({ collections, accent, }) {
+    if (collections === null) {
+        return (0, jsx_runtime_1.jsx)(Skeleton, { rows: 3 });
+    }
+    if (collections.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { padding: 20, fontSize: 13, color: '#64748b', textAlign: 'center' }, children: "No help content yet." }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '14px 16px 4px',
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: '#0f172a',
+                }, children: [collections.length, " collection", collections.length === 1 ? '' : 's'] }), collections.map((c) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '14px 16px',
+                    borderTop: '1px solid #e2e8f0',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    cursor: 'pointer',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    fontSize: 12,
+                                    fontWeight: 700,
+                                    letterSpacing: '0.04em',
+                                    textTransform: 'uppercase',
+                                    color: '#0f172a',
+                                    marginBottom: 4,
+                                }, children: c.name }), c.description && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 13, color: '#334155', marginBottom: 4 }, children: c.description })), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 12, color: '#94a3b8' }, children: [c.itemCount, " article", c.itemCount === 1 ? '' : 's'] })] }), (0, jsx_runtime_1.jsx)(ChevronRight, { color: accent })] }, c.id)))] }));
+}
+function ResultsList({ results, loading, onWalkthroughOpen, accent, }) {
+    if (loading && results === null) {
+        return (0, jsx_runtime_1.jsx)(Skeleton, { rows: 4 });
+    }
+    if (!results || results.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { padding: 20, fontSize: 13, color: '#64748b', textAlign: 'center' }, children: "No matches." }));
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: results.map((r) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ResultRow, { result: r, onWalkthroughOpen: onWalkthroughOpen, accent: accent }) }, r.id))) }));
+}
+function ResultRow({ result, onWalkthroughOpen, accent, }) {
+    const body = ((0, jsx_runtime_1.jsxs)("div", { style: {
+            padding: '12px 16px',
+            borderTop: '1px solid #e2e8f0',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: 14,
+                            fontWeight: 600,
+                            color: '#0f172a',
+                            marginBottom: 2,
+                        }, children: result.title }), result.excerpt && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: 12,
+                            color: '#64748b',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: result.excerpt }))] }), result.kind === 'walkthrough' ? ((0, jsx_runtime_1.jsx)(PlayIcon, { color: accent })) : ((0, jsx_runtime_1.jsx)(ChevronRight, { color: accent }))] }));
+    if (result.kind === 'walkthrough') {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                if (onWalkthroughOpen) {
+                    onWalkthroughOpen(result.id);
+                }
+                else if (typeof console !== 'undefined') {
+                    // Loud warning so the integrator notices the missing wire.
+                    console.warn(`[MessengerShell] HelpAdapter.onWalkthroughOpen not provided; clicking walkthrough result "${result.id}" is a no-op.`);
+                }
+            }, style: {
+                all: 'unset',
+                display: 'block',
+                width: '100%',
+                cursor: 'pointer',
+                fontFamily: 'inherit',
+            }, children: body }));
+    }
+    return ((0, jsx_runtime_1.jsx)("a", { href: result.href, target: "_blank", rel: "noopener noreferrer", style: { display: 'block', textDecoration: 'none' }, children: body }));
+}
+function Skeleton({ rows }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                padding: '14px 16px',
+                borderTop: i === 0 ? 'none' : '1px solid #e2e8f0',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 12,
+                        width: '40%',
+                        background: '#e2e8f0',
+                        borderRadius: 4,
+                        marginBottom: 8,
+                    } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 10,
+                        width: '70%',
+                        background: '#e2e8f0',
+                        borderRadius: 4,
+                    } })] }, i))) }));
+}
+function SearchIcon({ color }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "7", stroke: color, strokeWidth: "1.8" }), (0, jsx_runtime_1.jsx)("path", { d: "m20 20-3.5-3.5", stroke: color, strokeWidth: "1.8", strokeLinecap: "round" })] }));
+}
+function ChevronRight({ color }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 6l6 6-6 6", stroke: color, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function PlayIcon({ color }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9", stroke: color, strokeWidth: "1.8" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 8.5v7l6-3.5-6-3.5Z", fill: color })] }));
+}

package/dist/messenger/tabs/HomeTab.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { ResolvedTheme } from '../theme';
+import type { HomeAction } from '../adapters';
+export interface HomeTabProps {
+    theme: ResolvedTheme;
+    brand?: ReactNode;
+    onClose?: () => void;
+    /** First-name and emoji shown in the greeting headline. When `name`
+     *  is absent we render "Hi 👋 / How can I help?" so the page never
+     *  shows a half-empty greeting. */
+    greeting?: {
+        name?: string;
+        emoji?: string;
+    };
+    /** Question shown under the greeting. Defaults to "How can I help?". */
+    question?: string;
+    /** Support team avatars rendered in the header. Up to 3. */
+    avatars?: Array<{
+        src: string;
+        alt: string;
+    }>;
+    /** The "Send us a message" CTA. When omitted we render a default one
+     *  that switches to the Messages tab on click. */
+    onSendMessage?: () => void;
+    sendMessageLabel?: string;
+    /** Vertical list of action cards under the CTA. */
+    actions?: HomeAction[];
+    /** Optional extra content rendered above the tabs (e.g. a footer
+     *  with featured content). Renders inside the scroll area so it
+     *  scrolls with the page. */
+    footer?: ReactNode;
+}
+export declare function HomeTab({ theme, brand, onClose, greeting, question, avatars, onSendMessage, sendMessageLabel, actions, footer, }: HomeTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/messenger/tabs/HomeTab.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomeTab = HomeTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MessengerHeader_1 = require("../MessengerHeader");
+function HomeTab({ theme, brand, onClose, greeting, question = 'How can I help?', avatars, onSendMessage, sendMessageLabel = 'Send us a message', actions = [], footer, }) {
+    const name = greeting?.name?.trim();
+    const emoji = greeting?.emoji ?? '👋';
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            background: theme.surface,
+            overflow: 'hidden',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                flex: 1,
+                minHeight: 0,
+                overflowY: 'auto',
+                // Negative margin pulls the scrollable content under the
+                // header's bottom radius so the rounded corner looks like
+                // a real shape (the content scrolls under it).
+            }, children: [(0, jsx_runtime_1.jsx)(MessengerHeader_1.MessengerHeader, { theme: theme, brand: brand, avatars: avatars, onClose: onClose, bottomRadius: 24, greeting: (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    fontSize: 22,
+                                    fontWeight: 500,
+                                    opacity: 0.7,
+                                    marginBottom: 4,
+                                }, children: [name ? `Hi ${name}` : 'Hi', " ", emoji] }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 26, fontWeight: 700 }, children: question })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 10,
+                        padding: '12px 12px 16px',
+                        // Pull up under the header's rounded bottom so the first
+                        // card sits visually inside the curve.
+                        marginTop: -16,
+                        position: 'relative',
+                        zIndex: 1,
+                    }, children: [onSendMessage !== undefined && ((0, jsx_runtime_1.jsx)(ActionCard, { accent: theme.accent, variant: "primary", label: sendMessageLabel, onClick: onSendMessage, trailing: (0, jsx_runtime_1.jsx)(SendIcon, { color: theme.accent }) })), actions.map((a) => ((0, jsx_runtime_1.jsx)(ActionCard, { accent: theme.accent, variant: "secondary", icon: a.icon, label: a.label, href: a.href, onClick: a.onClick, trailing: (0, jsx_runtime_1.jsx)(TrailingIcon, { kind: a.trailingIcon ?? (a.href ? 'external' : 'arrow'), color: theme.accent }) }, a.id))), footer && (0, jsx_runtime_1.jsx)("div", { style: { paddingTop: 8 }, children: footer })] })] }) }));
+}
+function ActionCard({ accent, variant, icon, label, href, onClick, trailing, }) {
+    const baseStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        padding: '14px 16px',
+        background: '#fff',
+        border: '1px solid #e2e8f0',
+        borderRadius: 12,
+        boxShadow: '0 1px 2px rgba(15, 23, 42, 0.06)',
+        color: '#0f172a',
+        textDecoration: 'none',
+        fontSize: 15,
+        fontWeight: variant === 'primary' ? 600 : 500,
+        cursor: onClick || href ? 'pointer' : 'default',
+        fontFamily: 'inherit',
+    };
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 18, display: 'flex', alignItems: 'center' }, children: icon })), (0, jsx_runtime_1.jsx)("span", { style: { flex: 1, minWidth: 0 }, children: label }), trailing] }));
+    if (href) {
+        return ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: baseStyle, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, style: baseStyle, children: content }));
+}
+function SendIcon({ color }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 12l16-8-6 16-2.5-6L4 12Z", fill: color, stroke: color, strokeWidth: "1.2", strokeLinejoin: "round" }) }));
+}
+function TrailingIcon({ kind, color, }) {
+    if (kind === 'none')
+        return null;
+    if (kind === 'external') {
+        return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M14 5h5v5M19 5l-9 9M5 7v12h12", stroke: color, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 6l6 6-6 6", stroke: color, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/messenger/tabs/MessagesTab.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { type ChatPanelProps } from '../../ChatPanel';
+import type { ResolvedTheme } from '../theme';
+/**
+ * Messages tab. Thin wrapper around `ChatPanel` so the shell can
+ * decorate the chat with a tab-specific header (title only, no
+ * greeting block — the chat needs the height for its message list).
+ *
+ * We don't recompose ChatPanel — that would duplicate every interaction
+ * (input, scroll, bubble rendering). The shell just sits above it.
+ */
+export interface MessagesTabProps {
+    theme: ResolvedTheme;
+    /** Title shown in the simple top bar. Defaults to "Messages". */
+    title?: string;
+    /** Rendered on the right side of the top bar (e.g. close button). */
+    topBarAction?: ReactNode;
+    /** Forwarded to ChatPanel. */
+    panelProps?: Omit<ChatPanelProps, 'style' | 'className'>;
+}
+export declare function MessagesTab({ theme, title, topBarAction, panelProps, }: MessagesTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/messenger/tabs/MessagesTab.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagesTab = MessagesTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChatPanel_1 = require("../../ChatPanel");
+function MessagesTab({ theme, title = 'Messages', topBarAction, panelProps, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            background: theme.surface,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '14px 16px',
+                    borderBottom: '1px solid #e2e8f0',
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: 16,
+                            fontWeight: 600,
+                            color: theme.onSurface,
+                        }, children: title }), topBarAction] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minHeight: 0 }, children: (0, jsx_runtime_1.jsx)(ChatPanel_1.ChatPanel, { ...panelProps, 
+                    // The shell already provides the surface + border, so we
+                    // strip the panel's own chrome to avoid double-bordering.
+                    style: {
+                        height: '100%',
+                        border: 'none',
+                        borderRadius: 0,
+                    } }) })] }));
+}

package/dist/messenger/tabs/NewsTab.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { ResolvedTheme } from '../theme';
+import type { NewsAdapter } from '../adapters';
+/**
+ * News tab. Shows a feed of announcements with read/unread state and
+ * an empty-state when there's nothing new. The shell delegates all
+ * storage / persistence to the adapter.
+ *
+ * Ordering: pinned items first, then by publishedAt desc.
+ */
+export interface NewsTabProps {
+    theme: ResolvedTheme;
+    adapter: NewsAdapter;
+    title?: string;
+    /** Header section content. The shell renders a small "Latest" label
+     *  with avatars by default, but the consumer can override. */
+    header?: ReactNode;
+    /** Avatars rendered in the default header. */
+    teamAvatars?: Array<{
+        src: string;
+        alt: string;
+    }>;
+    /** Team name rendered in the default header. */
+    teamLabel?: string;
+}
+export declare function NewsTab({ theme, adapter, title, header, teamAvatars, teamLabel, }: NewsTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/messenger/tabs/NewsTab.js

@@ -0,0 +1,175 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsTab = NewsTab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function NewsTab({ theme, adapter, title = 'News', header, teamAvatars, teamLabel, }) {
+    const [items, setItems] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const list = await adapter.listAnnouncements();
+                if (cancelled)
+                    return;
+                // Sort once on receive so the render path stays simple.
+                const sorted = [...list].sort((a, b) => {
+                    if (a.pinned !== b.pinned)
+                        return a.pinned ? -1 : 1;
+                    return (new Date(b.publishedAt).getTime() -
+                        new Date(a.publishedAt).getTime());
+                });
+                setItems(sorted);
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e.message);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter]);
+    async function handleClick(item) {
+        if (!item.read && adapter.markRead) {
+            // Optimistic update; we silently ignore failures because the
+            // user already saw the content — flipping back to unread would
+            // be more confusing than a slightly stale badge.
+            setItems((prev) => prev
+                ? prev.map((i) => (i.id === item.id ? { ...i, read: true } : i))
+                : prev);
+            try {
+                await adapter.markRead(item.id);
+            }
+            catch {
+                /* swallow */
+            }
+        }
+        if (item.href) {
+            window.open(item.href, '_blank', 'noopener,noreferrer');
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            background: theme.surface,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: '14px 16px',
+                    borderBottom: '1px solid #e2e8f0',
+                    fontSize: 16,
+                    fontWeight: 600,
+                    color: theme.onSurface,
+                    textAlign: 'center',
+                    flexShrink: 0,
+                }, children: title }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minHeight: 0, overflowY: 'auto' }, children: [header ?? ((0, jsx_runtime_1.jsx)(DefaultHeader, { teamAvatars: teamAvatars, teamLabel: teamLabel })), error && ((0, jsx_runtime_1.jsx)("div", { style: { padding: 16, color: '#dc2626', fontSize: 13 }, children: error })), items === null ? ((0, jsx_runtime_1.jsx)(Skeleton, { rows: 2 })) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState, {})) : ((0, jsx_runtime_1.jsxs)("div", { style: { padding: '0 16px 24px' }, children: [items.map((item) => ((0, jsx_runtime_1.jsx)(AnnouncementCard, { item: item, onClick: () => void handleClick(item), accent: theme.accent }, item.id))), (0, jsx_runtime_1.jsx)(CaughtUpFooter, {})] }))] })] }));
+}
+function DefaultHeader({ teamAvatars, teamLabel, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 18, fontWeight: 700, color: '#0f172a' }, children: "Latest" }), teamLabel && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 13, color: '#64748b' }, children: ["From ", teamLabel] }))] }), teamAvatars && teamAvatars.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex' }, children: teamAvatars.slice(0, 3).map((a, i) => ((0, jsx_runtime_1.jsx)("img", { src: a.src, alt: a.alt, style: {
+                        width: 30,
+                        height: 30,
+                        borderRadius: '50%',
+                        border: '2px solid #fff',
+                        marginLeft: i === 0 ? 0 : -8,
+                        objectFit: 'cover',
+                    } }, a.src))) }))] }));
+}
+function AnnouncementCard({ item, onClick, accent, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onClick, style: {
+            all: 'unset',
+            display: 'block',
+            width: '100%',
+            marginBottom: 12,
+            padding: 14,
+            background: '#fff',
+            border: '1px solid #e2e8f0',
+            borderRadius: 12,
+            boxShadow: '0 1px 2px rgba(15, 23, 42, 0.05)',
+            cursor: 'pointer',
+            fontFamily: 'inherit',
+        }, children: [item.imageUrl && ((0, jsx_runtime_1.jsx)("img", { src: item.imageUrl, alt: "", style: {
+                    width: '100%',
+                    aspectRatio: '16 / 9',
+                    objectFit: 'cover',
+                    borderRadius: 8,
+                    marginBottom: 10,
+                } })), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    marginBottom: 6,
+                }, children: !item.read && ((0, jsx_runtime_1.jsx)("span", { style: {
+                        display: 'inline-block',
+                        padding: '2px 8px',
+                        fontSize: 11,
+                        fontWeight: 600,
+                        background: `${accent}22`,
+                        color: accent,
+                        borderRadius: 10,
+                    }, children: "New" })) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 15,
+                    fontWeight: 700,
+                    color: '#0f172a',
+                    marginBottom: 6,
+                    lineHeight: 1.3,
+                }, children: item.title }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 13,
+                    color: '#475569',
+                    lineHeight: 1.45,
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                }, children: item.body })] }));
+}
+function CaughtUpFooter() {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            padding: '24px 16px',
+            textAlign: 'center',
+            color: '#94a3b8',
+            fontSize: 13,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 36,
+                    height: 36,
+                    borderRadius: '50%',
+                    background: '#f1f5f9',
+                    marginBottom: 8,
+                }, children: "\u2713" }), (0, jsx_runtime_1.jsx)("div", { children: "You're all caught up!" })] }));
+}
+function EmptyState() {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            padding: '60px 24px',
+            textAlign: 'center',
+            color: '#64748b',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\uD83D\uDCE3" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: 14 }, children: "No announcements yet." })] }));
+}
+function Skeleton({ rows }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0 16px' }, children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                background: '#fff',
+                border: '1px solid #e2e8f0',
+                borderRadius: 12,
+                padding: 14,
+                marginBottom: 12,
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 14,
+                        width: '70%',
+                        background: '#e2e8f0',
+                        borderRadius: 4,
+                        marginBottom: 8,
+                    } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        height: 10,
+                        width: '90%',
+                        background: '#e2e8f0',
+                        borderRadius: 4,
+                    } })] }, i))) }));
+}

package/dist/messenger/theme.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Resolves the extended ChatTheme into a flat set of CSS values the
+ * Messenger components use. Keeping the resolution in one place means
+ * the same source-of-truth defaults flow through Header / Footer / tabs
+ * — no component invents its own "what if primaryColor is missing".
+ */
+import type { ChatTheme } from '@agentforge-io/chat-sdk';
+export interface ResolvedTheme {
+    primary: string;
+    primarySoft: string;
+    headerBg: string;
+    surface: string;
+    accent: string;
+    onHeader: string;
+    onSurface: string;
+}
+export declare function resolveTheme(theme: ChatTheme | undefined): ResolvedTheme;
+/** Same helper ChatPanel uses — duplicated locally to avoid coupling
+ *  the messenger module to ChatPanel's internals. Tiny enough to copy. */
+export declare function hexToRgba(hex: string, alpha: number): string;
+/**
+ * Lighten/darken a hex color by a percentage. Negative = darker.
+ * Used only for the auto-derived header gradient — when the consumer
+ * supplies `headerGradient` we never hit this code path.
+ */
+export declare function shade(hex: string, percent: number): string;