indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/auth/ProtectedRoute.js

@@ -0,0 +1,48 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProtectedRoute = ProtectedRoute;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const navigation_1 = require("next/navigation");
+const ModuleAuthContext_1 = require("../../contexts/ModuleAuthContext.js");
+const DeviceContext_1 = require("../../contexts/DeviceContext.js");
+const NavigationContext_1 = require("../../contexts/NavigationContext.js");
+const utils_1 = require("../../lib/utils.js");
+const UnauthorizedPage_1 = require("./UnauthorizedPage.js");
+// Paths that always work on mobile (no MobileSupported check needed)
+const MOBILE_PUBLIC_PATHS = ['/home', '/dashboard', '/settings', '/login', '/'];
+function ProtectedRoute({ children }) {
+    const pathname = (0, navigation_1.usePathname)();
+    const { hasAccess } = (0, ModuleAuthContext_1.useModuleAuth)();
+    const { isMobile } = (0, DeviceContext_1.useDevice)();
+    const { groupedModules, loading } = (0, NavigationContext_1.useNavigation)();
+    // Check permission access for current path
+    if (!pathname || !hasAccess(pathname)) {
+        return (0, jsx_runtime_1.jsx)(UnauthorizedPage_1.UnauthorizedPage, {});
+    }
+    // Mobile gate: block modules where MobileSupported is falsy
+    if (isMobile && !loading && groupedModules.length > 0) {
+        const isPublicPath = MOBILE_PUBLIC_PATHS.some(p => pathname === p || (p !== '/' && pathname.startsWith(p + '/')));
+        if (!isPublicPath) {
+            const normalizedPath = pathname.toLowerCase();
+            let isMobileSupported = false;
+            let moduleExists = false;
+            for (const group of groupedModules) {
+                for (const mod of group.modules) {
+                    const modulePath = (0, utils_1.getModuleRoutePath)(mod.ModuleName).toLowerCase();
+                    if (normalizedPath === modulePath || normalizedPath.startsWith(modulePath + '/')) {
+                        moduleExists = true;
+                        isMobileSupported = mod.MobileSupported === 1 || mod.MobileSupported === true;
+                        break;
+                    }
+                }
+                if (moduleExists)
+                    break;
+            }
+            if (moduleExists && !isMobileSupported) {
+                return (0, jsx_runtime_1.jsx)(UnauthorizedPage_1.MobileUnavailablePage, {});
+            }
+        }
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}

package/dist/cjs/components/auth/UnauthorizedPage.js

@@ -0,0 +1,19 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnauthorizedPage = UnauthorizedPage;
+exports.MobileUnavailablePage = MobileUnavailablePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const navigation_1 = require("next/navigation");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+function UnauthorizedPage({ message }) {
+    const router = (0, navigation_1.useRouter)();
+    const { t } = (0, useTranslation_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center min-h-[50vh] p-6", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "w-12 h-12 text-[rgb(var(--fg-muted))] mb-4", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-medium text-[rgb(var(--fg-default))] mb-1", children: t('Access Restricted') }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-4 text-center max-w-sm", children: message || t('You don\'t have permission to view this page.') }), (0, jsx_runtime_1.jsx)("button", { onClick: () => router.push('/home'), className: "text-sm text-[rgb(var(--color-primary))] hover:underline", children: t('Return to Home') })] }));
+}
+function MobileUnavailablePage() {
+    const router = (0, navigation_1.useRouter)();
+    const { t } = (0, useTranslation_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center min-h-[60vh] p-6 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-16 h-16 rounded-2xl bg-[rgb(var(--bg-subtle))] flex items-center justify-center mb-5", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Monitor, { className: "w-8 h-8 text-[rgb(var(--fg-muted))]", strokeWidth: 1.5 }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold text-[rgb(var(--fg-default))] mb-2", children: t('Desktop Only') }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-6 max-w-xs leading-relaxed", children: t('This module is optimized for desktop. Please use a larger screen for the best experience.') }), (0, jsx_runtime_1.jsx)("button", { onClick: () => router.push('/home'), className: "px-5 py-2.5 text-sm font-medium rounded-lg bg-[rgb(var(--color-primary))] text-white hover:opacity-90 transition-opacity min-h-[2.75rem]", children: t('Go to Home') })] }));
+}

package/dist/cjs/components/auth/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileUnavailablePage = exports.UnauthorizedPage = exports.ProtectedRoute = void 0;
+var ProtectedRoute_1 = require("./ProtectedRoute.js");
+Object.defineProperty(exports, "ProtectedRoute", { enumerable: true, get: function () { return ProtectedRoute_1.ProtectedRoute; } });
+var UnauthorizedPage_1 = require("./UnauthorizedPage.js");
+Object.defineProperty(exports, "UnauthorizedPage", { enumerable: true, get: function () { return UnauthorizedPage_1.UnauthorizedPage; } });
+Object.defineProperty(exports, "MobileUnavailablePage", { enumerable: true, get: function () { return UnauthorizedPage_1.MobileUnavailablePage; } });

package/dist/cjs/components/chat/ai-messages.js

@@ -0,0 +1,271 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Messages = Messages;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Reusable chat message list with auto-scroll, message bubbles, markdown rendering,
+ * copy/edit actions, typing indicator, and optional export/share bar.
+ * Domain-specific rendering (cards, empty states) is injected via props.
+ */
+const react_1 = require("react");
+const utils_1 = require("../../lib/utils.js");
+const lucide_react_1 = require("lucide-react");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+// Individual Message Bubble Component
+function Message({ message, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, renderBotContent }) {
+    const isUser = message.role === 'user';
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [feedback, setFeedback] = (0, react_1.useState)(message.feedback ?? null);
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [editText, setEditText] = (0, react_1.useState)('');
+    const editTextareaRef = (0, react_1.useRef)(null);
+    const handleCopy = async () => {
+        await navigator.clipboard.writeText(message.content);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    const handleStartEdit = (0, react_1.useCallback)(() => {
+        setEditText(message.content);
+        setIsEditing(true);
+    }, [message.content]);
+    const handleCancelEdit = (0, react_1.useCallback)(() => {
+        setIsEditing(false);
+        setEditText('');
+    }, []);
+    const handleSaveEdit = (0, react_1.useCallback)(() => {
+        const trimmed = editText.trim();
+        if (!trimmed) {
+            handleCancelEdit();
+            return;
+        }
+        onEditMessage?.(message.id, trimmed);
+        setIsEditing(false);
+        setEditText('');
+    }, [editText, message.id, onEditMessage, handleCancelEdit]);
+    const handleEditKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape') {
+            handleCancelEdit();
+        }
+        else if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSaveEdit();
+        }
+    }, [handleCancelEdit, handleSaveEdit]);
+    // Regenerate — re-send the same content via the edit flow (cascades delete after this message, re-posts)
+    const handleRegenerate = (0, react_1.useCallback)(() => {
+        if (onEditMessage && message.content) {
+            onEditMessage(message.id, message.content);
+        }
+    }, [onEditMessage, message.id, message.content]);
+    const handleRegenerateAi = (0, react_1.useCallback)(() => {
+        onRegenerateAi?.(message.id);
+    }, [onRegenerateAi, message.id]);
+    const handleFeedback = (0, react_1.useCallback)((rating) => {
+        const next = feedback === rating ? null : rating;
+        setFeedback(next);
+        onFeedback?.(message.id, next);
+    }, [feedback, onFeedback, message.id]);
+    // Claude-style short timestamp: "Apr 19" for older, "2:34 PM" for today
+    const formattedTimestamp = (() => {
+        const d = message.timestamp instanceof Date ? message.timestamp : new Date(message.timestamp);
+        if (isNaN(d.getTime()))
+            return '';
+        const now = new Date();
+        const sameDay = d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
+        if (sameDay) {
+            return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+        }
+        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    })();
+    // Auto-resize and focus edit textarea
+    (0, react_1.useEffect)(() => {
+        if (isEditing && editTextareaRef.current) {
+            const ta = editTextareaRef.current;
+            ta.style.height = 'auto';
+            ta.style.height = `${ta.scrollHeight}px`;
+            ta.focus();
+            ta.setSelectionRange(ta.value.length, ta.value.length);
+        }
+    }, [isEditing]);
+    // Try custom bot content renderer first
+    const customBotContent = !isUser && renderBotContent ? renderBotContent(message, onSelectItem) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-message-id": message.id, "data-message-role": message.role, className: (0, utils_1.cn)('flex gap-4 group animate-[popIn_0.25s_cubic-bezier(0.175,0.885,0.32,1.05)]', isUser && 'flex-row-reverse'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-8 h-8 shrink-0 rounded-full flex items-center justify-center', isUser
+                    ? 'bg-[rgb(var(--color-primary))]'
+                    : 'bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))]'), children: isUser ? ((0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "w-4 h-4 text-white" })) : (botAvatar || (0, jsx_runtime_1.jsx)(lucide_react_1.Bot, { className: "w-4 h-4 text-[rgb(var(--fg-muted))]" })) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex-1', isUser ? 'max-w-[85%] flex flex-col items-end' : 'max-w-[95%]'), children: [(0, jsx_runtime_1.jsx)("div", { className: "relative", children: !isUser && !isEditing && customBotContent ? ((0, jsx_runtime_1.jsx)("div", { className: "break-words text-sm leading-relaxed text-[rgb(var(--fg-default))] max-w-xl", children: customBotContent })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('inline-block break-words', isEditing
+                                ? 'px-3 py-2 rounded-xl bg-[rgb(var(--bg-surface))] border-2 border-[rgb(var(--color-primary))] w-full'
+                                : (0, utils_1.cn)('px-4 py-3', isUser
+                                    ? 'rounded-[18px_4px_18px_18px] bg-[rgb(var(--color-primary))] text-white animate-[sendBubble_0.22s_ease-out]'
+                                    : 'rounded-[4px_18px_18px_18px] bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-default))]')), children: isEditing ? (
+                            /* Edit Mode */
+                            (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("textarea", { ref: editTextareaRef, value: editText, onChange: (e) => {
+                                            setEditText(e.target.value);
+                                            // Auto-resize
+                                            e.target.style.height = 'auto';
+                                            e.target.style.height = `${e.target.scrollHeight}px`;
+                                        }, onKeyDown: handleEditKeyDown, className: "w-full bg-transparent text-[rgb(var(--fg-default))] text-sm leading-relaxed resize-none outline-none min-h-[40px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 justify-end mt-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleCancelEdit, className: "px-3 py-1.5 rounded-lg text-xs font-semibold bg-[rgb(var(--bg-subtle))] border border-[rgb(var(--bd-default))] text-[rgb(var(--fg-muted))] hover:bg-[rgb(var(--bg-app))] hover:text-[rgb(var(--fg-default))] transition-all", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSaveEdit, className: "px-3 py-1.5 rounded-lg text-xs font-semibold bg-[rgb(var(--color-primary))] text-white hover:opacity-90 transition-all", children: "Save & Resend" })] })] })) : (
+                            /* Message Content */
+                            (0, jsx_runtime_1.jsx)("div", { className: "text-sm leading-relaxed", children: isUser ? ((0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap", children: message.content })) : ((0, jsx_runtime_1.jsx)("div", { className: "markdown-content text-left", children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], components: {
+                                            p: ({ children }) => (0, jsx_runtime_1.jsx)("p", { className: "mb-2 last:mb-0 text-left", children: children }),
+                                            ul: ({ children }) => (0, jsx_runtime_1.jsx)("ul", { className: "list-disc list-inside mb-2 space-y-1 text-left", children: children }),
+                                            ol: ({ children }) => (0, jsx_runtime_1.jsx)("ol", { className: "list-decimal list-inside mb-2 space-y-1 text-left", children: children }),
+                                            li: ({ children }) => (0, jsx_runtime_1.jsx)("li", { className: "ml-4 text-left", children: children }),
+                                            strong: ({ children }) => (0, jsx_runtime_1.jsx)("strong", { className: "font-semibold", children: children }),
+                                            em: ({ children }) => (0, jsx_runtime_1.jsx)("em", { className: "italic", children: children }),
+                                            a: ({ href, children }) => ((0, jsx_runtime_1.jsx)("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-[rgb(var(--color-primary))] underline hover:opacity-80", children: children })),
+                                            code: ({ children }) => ((0, jsx_runtime_1.jsx)("code", { className: "bg-[rgb(var(--bg-app))] px-1.5 py-0.5 rounded text-xs font-mono", children: children })),
+                                            pre: ({ children }) => ((0, jsx_runtime_1.jsx)("pre", { className: "bg-[rgb(var(--bg-app))] p-3 rounded-lg overflow-x-auto mb-2 text-xs", children: children })),
+                                            blockquote: ({ children }) => ((0, jsx_runtime_1.jsx)("blockquote", { className: "border-l-4 border-[rgb(var(--bd-default))] pl-4 italic my-2", children: children })),
+                                            h1: ({ children }) => (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-bold mb-2", children: children }),
+                                            h2: ({ children }) => (0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-bold mb-2", children: children }),
+                                            h3: ({ children }) => (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-bold mb-2", children: children }),
+                                            img: ({ src, alt }) => {
+                                                let normalizedSrc = src || '';
+                                                const m = normalizedSrc.match(/^\/?(?:images\/)?Contents\/(.+)$/i);
+                                                if (m) {
+                                                    normalizedSrc = '/Contents/' + m[1];
+                                                }
+                                                return ((0, jsx_runtime_1.jsx)("img", { src: normalizedSrc, alt: alt || '', className: "w-32 h-auto rounded-lg my-2 block", loading: "lazy", onError: (e) => {
+                                                        const cur = e.currentTarget.src;
+                                                        if (cur.includes('.jpg') && !cur.includes('_tried_png')) {
+                                                            e.currentTarget.src = cur.replace('.jpg', '.png') + '?_tried_png=1';
+                                                        }
+                                                        else if (!cur.includes('Rectangular')) {
+                                                            e.currentTarget.src = '/Contents/Rectangular.jpg';
+                                                        }
+                                                    } }));
+                                            },
+                                        }, children: (() => {
+                                            let text = message.content;
+                                            const jsonStart = text.search(/\{"(?:source|ui_data_id|ui_state)":/);
+                                            if (jsonStart >= 0)
+                                                text = text.substring(0, jsonStart).trim();
+                                            let processed = text
+                                                // Repair multi-line markdown images: `![\n...\n](url)` → `![](url)` (LLM sometimes splits syntax across lines)
+                                                .replace(/!\[([^\]]*)\]\s*\n+\s*\(([^)]+)\)/g, (_, alt, url) => `![${alt}](${url})`)
+                                                .replace(/!\[\s*\n+\s*\]\(([^)]+)\)/g, (_, url) => `![](${url})`)
+                                                .replace(/^(.+?)\s*(?:[—–-]{1,3}|[.:])?\s*(?:[Ii]mage:\s*)?(\/?(?:images\/)?Contents\/[^\n]+?\.(?:jpg|png))\s*$/gm, (_, alt, path) => `![${alt.trim()}](${path.trim()})`)
+                                                .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, url) => `![${alt}](${url.replace(/ /g, '%20')})`);
+                                            const normalizeImgKey = (url) => {
+                                                const cleaned = decodeURIComponent(url.trim()).replace(/\s+/g, '');
+                                                const m = cleaned.match(/^\/?(?:images\/)?Contents\/(.+)$/i);
+                                                return (m ? `/Contents/${m[1]}` : cleaned).toLowerCase();
+                                            };
+                                            const seenImgUrls = new Set();
+                                            processed = processed.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (full, _alt, url) => {
+                                                const key = normalizeImgKey(url);
+                                                if (seenImgUrls.has(key))
+                                                    return '';
+                                                seenImgUrls.add(key);
+                                                return full;
+                                            });
+                                            return processed;
+                                        })() }) })) })) })) }), !isEditing && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center gap-2 mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200', isUser ? 'justify-end' : 'justify-start'), children: [formattedTimestamp && ((0, jsx_runtime_1.jsx)("span", { className: "text-[0.7rem] text-[rgb(var(--fg-muted))]/70 select-none", children: formattedTimestamp })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerate, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), isUser && onEditMessage && ((0, jsx_runtime_1.jsx)("button", { onClick: handleStartEdit, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Edit message", title: "Edit", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { className: "w-3.5 h-3.5" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: handleCopy, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Copy message", title: "Copy", children: copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "w-3.5 h-3.5" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "w-3.5 h-3.5" })) }), !isUser && onRegenerateAi && ((0, jsx_runtime_1.jsx)("button", { onClick: handleRegenerateAi, className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Regenerate response", title: "Regenerate", children: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCcw, { className: "w-3.5 h-3.5" }) })), !isUser && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('up'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Good response", title: "Good response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { className: "w-3.5 h-3.5", fill: feedback === 'up' ? 'currentColor' : 'none' }) }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleFeedback('down'), className: "w-7 h-7 rounded-md flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] transition-colors", "aria-label": "Bad response", title: "Bad response", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsDown, { className: "w-3.5 h-3.5", fill: feedback === 'down' ? 'currentColor' : 'none' }) })] })), !isUser && message.tokens && process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))]/70 font-mono select-none ml-1", children: ["P: ", message.tokens.prompt.toLocaleString(), "  R: ", message.tokens.completion.toLocaleString(), "  T: ", message.tokens.total.toLocaleString()] }))] }))] })] }));
+}
+// Synthia thinking phrases — the fun ones
+const SYNTHIA_THINKING = [
+    'Accomplishing', 'Actioning', 'Actualizing', 'Architecting', 'Baking', 'Beaming', 'Beboppin\'',
+    'Befuddling', 'Billowing', 'Blanching', 'Bloviating', 'Boogieing', 'Boondoggling', 'Booping', 'Bootstrapping', 'Brewing',
+    'Bunning', 'Burrowing', 'Calculating', 'Canoodling', 'Caramelizing', 'Cascading', 'Catapulting', 'Cerebrating', 'Channeling',
+    'Channelling', 'Choreographing', 'Churning', 'Coalescing', 'Cogitating', 'Combobulating', 'Composing', 'Computing',
+    'Concocting', 'Considering', 'Contemplating', 'Cooking', 'Crafting', 'Creating', 'Crunching', 'Crystallizing', 'Cultivating',
+    'Deciphering', 'Deliberating', 'Determining', 'Dilly-dallying', 'Doing', 'Doodling', 'Drizzling', 'Ebbing',
+    'Effecting', 'Elucidating', 'Embellishing', 'Enchanting', 'Envisioning', 'Evaporating', 'Fermenting', 'Fiddle-faddling',
+    'Finagling', 'Flambéing', 'Flibbertigibbeting', 'Flowing', 'Flummoxing', 'Fluttering', 'Forging', 'Forming', 'Frolicking',
+    'Frosting', 'Gallivanting', 'Galloping', 'Garnishing', 'Generating', 'Gesticulating', 'Germinating', 'Gitifying', 'Grooving',
+    'Gusting', 'Harmonizing', 'Hashing', 'Hatching', 'Herding', 'Honking', 'Hullaballooing', 'Hyperspacing', 'Ideating', 'Imagining',
+    'Improvising', 'Incubating', 'Inferring', 'Infusing', 'Ionizing', 'Jitterbugging', 'Julienning', 'Kneading', 'Leavening',
+    'Levitating', 'Lollygagging', 'Manifesting', 'Marinating', 'Meandering', 'Metamorphosing', 'Misting', 'Moonwalking', 'Moseying',
+    'Mulling', 'Mustering', 'Musing', 'Nebulizing', 'Nesting', 'Newspapering', 'Noodling', 'Nucleating', 'Orbiting', 'Orchestrating',
+    'Osmosing', 'Perambulating', 'Percolating', 'Perusing', 'Philosophising', 'Photosynthesizing', 'Pollinating', 'Pondering',
+    'Pontificating', 'Pouncing', 'Precipitating', 'Prestidigitating', 'Processing', 'Proofing', 'Propagating', 'Puttering',
+    'Puzzling', 'Quantumizing', 'Razzle-dazzling', 'Razzmatazzing', 'Recombobulating', 'Reticulating', 'Roosting', 'Ruminating',
+    'Sautéing', 'Scampering', 'Schlepping', 'Scurrying', 'Seasoning', 'Shenaniganing', 'Shimmying', 'Simmering', 'Skedaddling',
+    'Sketching', 'Slithering', 'Smooshing', 'Sock-hopping', 'Spelunking', 'Spinning', 'Sprouting', 'Stewing', 'Sublimating',
+    'Swirling', 'Swooping', 'Symbioting', 'Synthesizing', 'Tempering', 'Thinking', 'Thundering', 'Tinkering', 'Tomfoolering',
+    'Topsy-turvying', 'Transfiguring', 'Transmuting', 'Twisting', 'Undulating', 'Unfurling', 'Unravelling', 'Vibing', 'Waddling',
+    'Wandering', 'Warping', 'Whatchamacalliting', 'Whirlpooling', 'Whirring', 'Whisking', 'Wibbling', 'Working', 'Wrangling',
+    'Zesting', 'Zigzagging',
+];
+// Contextual first phrase based on what the user asked — each bucket rotates randomly
+const THINKING_CONTEXT = [
+    { test: /\b(cost|costing|estimate|pricing|quote|quotation)\b/i, phrases: ['Crunching', 'Tallying numbers', 'Sharpening pencils', 'Doing math'] },
+    { test: /\b(plant|unit|factory|production)\b/i, phrases: ['Spooling plants', 'Walking floor', 'Counting machines', 'Booting units'] },
+    { test: /\b(customer|client|party|lead)\b/i, phrases: ['Dialing', 'Flipping rolodex', 'Pulling clients', 'Sleuthing leads'] },
+    { test: /\b(paper|gsm|quality|mill|material)\b/i, phrases: ['Weighing GSM', 'Sniffing mills', 'Stacking reels', 'Sorting paper'] },
+    { test: /\b(color|colour|printing|print)\b/i, phrases: ['Mixing inks', 'Calibrating', 'Loading plates', 'Tuning press'] },
+    { test: /\b(corrugat|ply|flute|liner)\b/i, phrases: ['Stacking flutes', 'Counting plies', 'Folding liners', 'Fluting'] },
+    { test: /\b(freight|delivery|location|ship)\b/i, phrases: ['Plotting routes', 'Loading trucks', 'Pinging logistics', 'Shipping'] },
+    { test: /\b(process|lamination|varnish|emboss|foil)\b/i, phrases: ['Heating foil', 'Queueing finishes', 'Laminating', 'Lining post-press'] },
+    { test: /\b(save|confirm|generate|finalize)\b/i, phrases: ['Locking it in', 'Sealing deal', 'Stamping', 'Finalizing'] },
+    { test: /\b(login|activity|audit|log|who)\b/i, phrases: ['Reading trail', 'Pulling logs', 'Tracing steps', 'Snooping'] },
+    { test: /\b(enquir|inquir|estimation|quotation|how many|count|list|report|status)\b/i, phrases: ['Pulling reports', 'Counting rows', 'Scanning books', 'Fetching'] },
+];
+function getContextualPhrase(lastUserMsg) {
+    if (lastUserMsg) {
+        for (const ctx of THINKING_CONTEXT) {
+            if (ctx.test.test(lastUserMsg)) {
+                return ctx.phrases[Math.floor(Math.random() * ctx.phrases.length)];
+            }
+        }
+    }
+    return SYNTHIA_THINKING[Math.floor(Math.random() * SYNTHIA_THINKING.length)];
+}
+// Typing Indicator — contextual first phrase, fun word on second rotation, max 2
+function TypingIndicator({ lastUserMessage }) {
+    const [phrase, setPhrase] = (0, react_1.useState)(() => getContextualPhrase(lastUserMessage));
+    const rotatedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        rotatedRef.current = false;
+        setPhrase(getContextualPhrase(lastUserMessage));
+        const timer = setTimeout(() => {
+            if (!rotatedRef.current) {
+                rotatedRef.current = true;
+                setPhrase(SYNTHIA_THINKING[Math.floor(Math.random() * SYNTHIA_THINKING.length)]);
+            }
+        }, 4000);
+        return () => clearTimeout(timer);
+    }, [lastUserMessage]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-start", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 px-4 py-2", "aria-label": "AI typing", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full animate-bounce [animation-delay:-0.3s]" }), (0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full animate-bounce [animation-delay:-0.15s]" }), (0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 bg-[rgb(var(--color-primary))] rounded-full animate-bounce" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))] animate-pulse ml-1", children: [phrase, "..."] })] }) }));
+}
+// Main Messages Container
+function Messages({ messages, isLoading = false, onExport, onShare, onSelectItem, onEditMessage, onRegenerateAi, onFeedback, botAvatar, emptyState, renderBotContent }) {
+    const bottomRef = (0, react_1.useRef)(null);
+    const [fadeKey, setFadeKey] = (0, react_1.useState)(0);
+    const prevFirstMsgIdRef = (0, react_1.useRef)(null);
+    // Detect conversation switch (first message ID changes = different conversation loaded)
+    (0, react_1.useEffect)(() => {
+        const firstId = messages.length > 0 ? messages[0].id : null;
+        if (firstId && prevFirstMsgIdRef.current && firstId !== prevFirstMsgIdRef.current) {
+            setFadeKey(k => k + 1);
+        }
+        prevFirstMsgIdRef.current = firstId;
+    }, [messages]);
+    // Auto-scroll to bottom when messages update
+    (0, react_1.useEffect)(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [messages.length, isLoading]);
+    // Empty State
+    if (messages.length === 0 && !isLoading) {
+        if (emptyState)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyState });
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col", children: [messages.length > 0 && (onExport || onShare) && ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-[rgb(var(--bd-default))] px-4 py-2 flex items-center justify-between bg-[rgb(var(--bg-surface))]", children: [process.env.NEXT_PUBLIC_SHOW_TOKENS === 'true' ? (() => {
+                        const totals = messages.reduce((acc, m) => {
+                            if (m.tokens) {
+                                acc.prompt += m.tokens.prompt;
+                                acc.completion += m.tokens.completion;
+                                acc.total += m.tokens.total;
+                            }
+                            return acc;
+                        }, { prompt: 0, completion: 0, total: 0 });
+                        if (totals.total === 0)
+                            return (0, jsx_runtime_1.jsx)("div", {});
+                        return ((0, jsx_runtime_1.jsxs)("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] font-mono", children: ["P:", totals.prompt.toLocaleString(), " \u00B7 C:", totals.completion.toLocaleString(), " \u00B7 T:", totals.total.toLocaleString(), " \u00B7 ", messages.filter(m => m.tokens).length, " calls"] }));
+                    })() : (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [onExport && ((0, jsx_runtime_1.jsxs)("button", { onClick: onExport, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "w-4 h-4" }), "Export"] })), onShare && ((0, jsx_runtime_1.jsxs)("button", { onClick: onShare, className: "flex items-center gap-2 px-3 py-1.5 text-sm text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] rounded-lg transition-colors", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { className: "w-4 h-4" }), "Share"] }))] })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-5xl mx-auto px-3 sm:px-4 py-6 space-y-6 animate-[fadeInUp_0.28s_ease-out]", children: [messages.map((message) => ((0, jsx_runtime_1.jsx)(Message, { message: message, onSelectItem: onSelectItem, onEditMessage: onEditMessage, onRegenerateAi: onRegenerateAi, onFeedback: onFeedback, botAvatar: botAvatar, renderBotContent: renderBotContent }, message.id))), isLoading && (0, jsx_runtime_1.jsx)(TypingIndicator, { lastUserMessage: messages.filter(m => m.role === 'user').at(-1)?.content }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }, fadeKey) })] }));
+}

package/dist/cjs/components/chat/chat-prompt-navigator.js

@@ -0,0 +1,110 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPromptNavigator = ChatPromptNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../lib/utils.js");
+const LanguageContext_1 = require("../../contexts/LanguageContext.js");
+const stripJson = (raw) => {
+    let s = raw;
+    for (let start = 0; start < s.length; start++) {
+        const open = s[start];
+        if (open !== '{' && open !== '[')
+            continue;
+        const close = open === '{' ? '}' : ']';
+        let depth = 0;
+        let end = -1;
+        let inStr = false;
+        let esc = false;
+        for (let i = start; i < s.length; i++) {
+            const ch = s[i];
+            if (inStr) {
+                if (esc)
+                    esc = false;
+                else if (ch === '\\')
+                    esc = true;
+                else if (ch === '"')
+                    inStr = false;
+            }
+            else if (ch === '"')
+                inStr = true;
+            else if (ch === open)
+                depth++;
+            else if (ch === close && --depth === 0) {
+                end = i;
+                break;
+            }
+        }
+        if (end === -1)
+            break;
+        s = s.slice(0, start) + ' ' + s.slice(end + 1);
+        start--;
+    }
+    return s;
+};
+const previewText = (content) => stripJson(content || '')
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    .replace(/[#*`>_~]/g, '')
+    .replace(/\[\d+ file\(s\) attached\]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+function ChatPromptNavigator({ messages, scrollContainer, moduleName }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const [mode, setMode] = (0, react_1.useState)('user');
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const entries = (0, react_1.useMemo)(() => messages
+        .filter((m) => m.role === mode)
+        .map((m) => ({ id: m.id, text: previewText(m.content) }))
+        .filter((e) => e.text.length > 0), [messages, mode]);
+    // Track which entry is currently in view so its tick/row is highlighted.
+    (0, react_1.useEffect)(() => {
+        const el = scrollContainer();
+        if (!el || entries.length === 0)
+            return;
+        const onScroll = () => {
+            const top = el.getBoundingClientRect().top;
+            let current = null;
+            for (const e of entries) {
+                const node = el.querySelector(`[data-message-id="${CSS.escape(e.id)}"]`);
+                if (!node)
+                    continue;
+                if (node.getBoundingClientRect().top - top <= 80)
+                    current = e.id;
+                else
+                    break;
+            }
+            setActiveId(current ?? entries[0]?.id ?? null);
+        };
+        onScroll();
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => el.removeEventListener('scroll', onScroll);
+    }, [scrollContainer, entries]);
+    const scrollToEntry = (0, react_1.useCallback)((id) => {
+        const el = scrollContainer();
+        const node = el?.querySelector(`[data-message-id="${CSS.escape(id)}"]`);
+        if (!el || !node)
+            return;
+        const top = el.scrollTop + (node.getBoundingClientRect().top - el.getBoundingClientRect().top) - 16;
+        el.scrollTo({ top, behavior: 'smooth' });
+    }, [scrollContainer]);
+    // Hide only when neither side has anything worth navigating.
+    const userCount = (0, react_1.useMemo)(() => messages.filter((m) => m.role === 'user').length, [messages]);
+    const botCount = (0, react_1.useMemo)(() => messages.filter((m) => m.role === 'assistant').length, [messages]);
+    if (userCount < 2 && botCount < 2)
+        return null;
+    const botLabel = moduleName || t('Assistant');
+    const TabButton = ({ value, label }) => ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => { e.stopPropagation(); setMode(value); }, className: (0, utils_1.cn)('flex-1 rounded-md px-2 py-1 text-[0.7rem] font-medium transition-colors', mode === value
+            ? 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--color-primary))] shadow-sm'
+            : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))]'), children: label }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "hidden lg:flex absolute right-2 top-1/2 -translate-y-1/2 z-20", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('absolute right-full top-1/2 -translate-y-1/2 mr-1.5 flex max-h-[40vh] w-72 flex-col overflow-hidden rounded-xl border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] shadow-xl transition-opacity duration-150', hovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'), children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b border-[rgb(var(--bd-default))] p-1.5", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 rounded-lg bg-[rgb(var(--bg-subtle))] p-0.5", children: [(0, jsx_runtime_1.jsx)(TabButton, { value: "assistant", label: botLabel }), (0, jsx_runtime_1.jsx)(TabButton, { value: "user", label: t('You') })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto py-1", children: entries.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-4 text-center text-xs text-[rgb(var(--fg-muted))]", children: t('Nothing to show') })) : (entries.map((entry, i) => {
+                            const isActive = activeId === entry.id;
+                            return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => scrollToEntry(entry.id), title: entry.text, className: (0, utils_1.cn)('group relative flex w-full items-start gap-2.5 px-3 py-2 text-left transition-colors', isActive ? 'bg-[rgb(var(--color-primary))]/8' : 'hover:bg-[rgb(var(--bg-subtle))]'), children: [isActive && ((0, jsx_runtime_1.jsx)("span", { className: "absolute left-0 top-1/2 h-5 -translate-y-1/2 w-[3px] rounded-r-full bg-[rgb(var(--color-primary))]" })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('mt-[0.05rem] shrink-0 text-[0.6875rem] font-semibold tabular-nums', isActive ? 'text-[rgb(var(--color-primary))]' : 'text-[rgb(var(--fg-muted))]'), children: i + 1 }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('min-w-0 flex-1 truncate text-xs leading-relaxed', isActive
+                                            ? 'text-[rgb(var(--color-primary))] font-medium'
+                                            : 'text-[rgb(var(--fg-default))]/80 group-hover:text-[rgb(var(--fg-default))]'), children: entry.text })] }, entry.id));
+                        })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex max-h-[40vh] flex-col items-center justify-center gap-1.5 overflow-y-auto px-1 py-1", children: entries.map((entry) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => scrollToEntry(entry.id), "aria-label": entry.text, className: (0, utils_1.cn)('shrink-0 rounded-full transition-all duration-150', activeId === entry.id
+                        ? 'h-2 w-2 bg-[rgb(var(--color-primary))]'
+                        : 'h-1 w-1 bg-[rgb(var(--fg-muted))]/40 hover:bg-[rgb(var(--fg-muted))]/70') }, entry.id))) })] }));
+}