@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.2 → 0.1.4

package/dist/ui/MessageList.js

@@ -0,0 +1,455 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { convertUrlsToLinks, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { useChatBot } from '../context/ChatBotContext';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import { messageListContainer, messageBubble, userMessage, messageContent, userMessageContent, retryMessageContent, chatbotButton, connectedButton, loadingIndicator, modelIndicator, modelBadge, modelDot, streamingCaret, streamingContainer, streamingHeader, streamingIcon, streamingToolName, streamingProgressPercent, streamingProgressContainer, streamingProgressBar, streamingPartialText, streamingStatus, streamingStepsContainer, streamingStepItem, streamingStepCheck, piiTokenReveal, } from './styles/isolatedStyles';
+const piiTokenStatic = {
+    fontFamily: 'monospace',
+    fontWeight: 400,
+    display: 'inline',
+};
+/**
+ * Highlight PII tokens in anonymized content.
+ * When animate=true (live transition), each token gets a staggered glow animation.
+ * When animate=false (loaded from history), tokens are styled statically.
+ */
+function highlightPiiTokens(text, animate = false) {
+    const parts = text.split(/(<?[A-Z][A-Z_]*_\d+>?)/g);
+    if (parts.length === 1)
+        return text;
+    let tokenIndex = 0;
+    return React.createElement(React.Fragment, null, ...parts.map((part, i) => {
+        if (/^<?[A-Z][A-Z_]*_\d+>?$/.test(part)) {
+            const idx = tokenIndex++;
+            if (animate) {
+                return React.createElement('span', {
+                    key: i,
+                    css: piiTokenReveal,
+                    style: { animationDelay: `${idx * 0.25 + 0.6}s` },
+                }, part);
+            }
+            return React.createElement('span', { key: i, style: piiTokenStatic }, part);
+        }
+        return part;
+    }));
+}
+// ===== PII Bubble Header =====
+/** Word-boundary match — prevents PERSON_1 from matching inside PERSON_11 */
+function tokenInText(text, token) {
+    return new RegExp(`\\b${token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(text);
+}
+const ShieldIcon = () => (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" }) }));
+// --- Styles: all PII header styles co-located for maintainability ---
+/** Scan line overlay on the blue bubble during scanning */
+const piiScanOverlay = css `
+  overflow: hidden !important;
+  &::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: inherit !important;
+    pointer-events: none !important;
+    z-index: 1 !important;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255,255,255,0.06) 30%,
+      rgba(255,255,255,0.18) 50%,
+      rgba(255,255,255,0.06) 70%,
+      transparent 100%
+    ) !important;
+    @keyframes piiScanLine {
+      0%   { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    animation: piiScanLine 1.8s ease-in-out infinite !important;
+  }
+`;
+/** Content fade-in when text swaps from original → redacted */
+const piiContentFadeIn = css `
+  @keyframes piiFadeIn {
+    0%   { opacity: 0.2; }
+    100% { opacity: 1; }
+  }
+  animation: piiFadeIn 0.6s ease-out !important;
+`;
+const piiHeaderRow = css `
+  display: flex !important;
+  align-items: center !important;
+  gap: 5px !important;
+  font-size: 11px !important;
+  font-weight: 500 !important;
+  font-family: inherit !important;
+  margin-bottom: 6px !important;
+  padding-bottom: 5px !important;
+  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
+  color: rgba(255,255,255,0.85) !important;
+`;
+const piiScanLabel = css `
+  @keyframes piiPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+  display: inline-flex !important;
+  align-items: baseline !important;
+  animation: piiPulse 1.2s ease-in-out infinite !important;
+`;
+const piiBounceDot0 = css `
+  @keyframes piiBounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-3px); }
+  }
+  display: inline-block !important;
+  margin-left: 2px !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 0ms !important;
+`;
+const piiBounceDot1 = css `
+  display: inline-block !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 150ms !important;
+`;
+const piiBounceDot2 = css `
+  display: inline-block !important;
+  animation: piiBounce 0.6s ease-in-out infinite !important;
+  animation-delay: 300ms !important;
+`;
+/** Below-bubble green badge: "✓ {N} items protected ▸" */
+const piiBelowBubbleBtn = css `
+  all: unset !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  font-family: inherit !important;
+  color: #2e7d32 !important;
+  background: #e8f5e9 !important;
+  border-radius: 12px !important;
+  padding: 3px 10px !important;
+  margin-top: 6px !important;
+  cursor: pointer !important;
+  &:hover { background: #c8e6c9 !important; }
+`;
+const piiNoPiiStyle = css `
+  @keyframes piiFadeOut {
+    0%   { opacity: 1; }
+    70%  { opacity: 1; }
+    100% { opacity: 0; }
+  }
+  animation: piiFadeOut 2s ease-out forwards !important;
+`;
+/** Entity mapping panel — below bubble, original card style */
+const piiEntityPanel = css `
+  margin-top: 6px !important;
+  padding: 8px 12px !important;
+  background-color: #fafafa !important;
+  border: 1px solid #e0e0e0 !important;
+  border-radius: 8px !important;
+  font-family: inherit !important;
+`;
+const piiEntityRowStyle = css `
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  font-size: 11px !important;
+  line-height: 1.6 !important;
+`;
+const piiOriginalStyle = css `
+  color: #d32f2f !important;
+  text-decoration: line-through !important;
+  font-family: inherit !important;
+`;
+const piiArrowStyle = css `
+  color: #bdbdbd !important;
+  font-size: 10px !important;
+`;
+const piiTokenMappingStyle = css `
+  color: #1565c0 !important;
+  font-family: monospace !important;
+  font-weight: 600 !important;
+`;
+/** Green checkmark icon for below-bubble badge */
+const GreenCheckIcon = () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "#2e7d32", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+/** Status-only header inside the bubble */
+const PiiStatusHeader = React.memo(({ message }) => {
+    const getInitialPhase = () => {
+        if (message.piiStatus === 'complete' && message.piiProtection?.anonymizedContent)
+            return 'done';
+        if (message.piiStatus === 'none')
+            return 'faded';
+        if (message.piiStatus === 'scanning')
+            return 'scanning';
+        return 'idle';
+    };
+    const [phase, setPhase] = React.useState(getInitialPhase);
+    const prevStatusRef = React.useRef(message.piiStatus);
+    const timerRef = React.useRef(null);
+    React.useEffect(() => () => { if (timerRef.current)
+        clearTimeout(timerRef.current); }, []);
+    React.useEffect(() => {
+        const prev = prevStatusRef.current;
+        const curr = message.piiStatus;
+        prevStatusRef.current = curr;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (curr === 'scanning' && prev !== 'scanning') {
+            setPhase('scanning');
+        }
+        else if (curr === 'complete') {
+            setPhase(message.piiProtection?.anonymizedContent ? 'done' : 'faded');
+        }
+        else if (curr === 'none') {
+            if (prev === 'scanning') {
+                setPhase('no-pii');
+                timerRef.current = setTimeout(() => setPhase('faded'), 2000);
+            }
+            else {
+                setPhase('faded');
+            }
+        }
+    }, [message.piiStatus, message.piiProtection?.anonymizedContent]);
+    if (phase === 'idle' || phase === 'faded')
+        return null;
+    if (phase === 'scanning') {
+        const step = message.piiStep ?? 0;
+        const label = step >= 1 ? 'Sending' : 'Scanning';
+        return (_jsxs("div", { css: piiHeaderRow, children: [_jsx(ShieldIcon, {}), _jsxs("span", { css: piiScanLabel, children: [label, _jsx("span", { css: piiBounceDot0, children: "." }), _jsx("span", { css: piiBounceDot1, children: "." }), _jsx("span", { css: piiBounceDot2, children: "." })] })] }));
+    }
+    if (phase === 'no-pii') {
+        return (_jsxs("div", { css: [piiHeaderRow, piiNoPiiStyle], children: [_jsx(ShieldIcon, {}), _jsx("span", { children: "No sensitive data found" })] }));
+    }
+    // Done: simple status label
+    return (_jsxs("div", { css: piiHeaderRow, children: [_jsx(ShieldIcon, {}), _jsx("span", { children: "\u2713 Protected" })] }));
+});
+export const MessageList = () => {
+    const { messages, isLoading, isTtsProcessing, requiresGesture, retryTtsWithGesture, connectWallet, signInWallet, hitAddress, isAutoConnecting, isNeedSignInWithWallet, enableAIT, isAITLoading, isAITEnabling, sendMessage, permissions, availableModels, serviceId, piiDisplayMode, } = useChatBot();
+    const messagesEndRef = React.useRef(null);
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    React.useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+    // Track which message's PII entity panel is expanded (only one at a time)
+    const [expandedPiiMsgId, setExpandedPiiMsgId] = React.useState(null);
+    const handleButtonClick = async (buttonType, message) => {
+        // Prevent sending messages while AI Agent is processing
+        if (isLoading) {
+            return;
+        }
+        if (buttonType === 'connectWallet') {
+            connectWallet(true);
+        }
+        else if (buttonType === 'signIn') {
+            signInWallet(true);
+        }
+        else if (buttonType === 'enableAIT') {
+            const requiredPermission = message.metadata?.requiredPermission;
+            if (requiredPermission) {
+                const success = await enableAIT(requiredPermission);
+                if (success) {
+                    // Find the last user message
+                    const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+                    if (lastUserMsg && lastUserMsg.content) {
+                        // Re-execute the previous user message (retryCount=1 to skip duplicate PII log)
+                        await sendMessage(lastUserMsg.content, 1);
+                    }
+                }
+            }
+        }
+        else if (buttonType === 'continue') {
+            const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+            if (lastUserMsg && lastUserMsg.content) {
+                // Re-execute the previous user message (retryCount=1 to skip duplicate PII log)
+                await sendMessage(lastUserMsg.content, 1);
+            }
+        }
+    };
+    // Get model display name from API-provided model list
+    const getModelDisplayName = (modelValue) => {
+        if (!modelValue)
+            return '';
+        // Special case: show "Adi" for specific serviceId
+        const targetServiceId = 'e48fc2b9-a7d1-49e3-85cb-9d621a0bf774';
+        if (serviceId && serviceId.trim() === targetServiceId) {
+            return 'Adi';
+        }
+        // Find model in the list returned by API
+        const model = availableModels.find(m => m.value === modelValue);
+        // Use label from API or fallback to value
+        return model?.label || modelValue;
+    };
+    return (_jsxs("div", { css: messageListContainer, children: [messages.map((message) => {
+                // Determine user message content based on piiStep
+                // Show redacted as soon as piiStep >= 1 ({N} protected) — data available
+                const showRedacted = message.role === 'user'
+                    && piiDisplayMode === 'redacted'
+                    && message.piiProtection?.anonymizedContent
+                    && (message.piiStep !== undefined && message.piiStep >= 1);
+                // Is the bubble currently in scanning state? (for scan overlay animation)
+                const isUserScanning = message.role === 'user'
+                    && piiDisplayMode === 'redacted'
+                    && message.piiStatus === 'scanning';
+                const showPiiHeader = message.role === 'user'
+                    && piiDisplayMode === 'redacted'
+                    && !!message.piiStatus;
+                const isPiiExpanded = expandedPiiMsgId === message.id;
+                // Compute relevant entity mapping for this message
+                let relevantMapping = {};
+                if (showPiiHeader && message.piiProtection?.mapping && message.piiProtection?.anonymizedContent) {
+                    const content = message.piiProtection.anonymizedContent;
+                    for (const [original, token] of Object.entries(message.piiProtection.mapping)) {
+                        if (tokenInText(content, token)) {
+                            relevantMapping[original] = token;
+                        }
+                    }
+                }
+                const entityCount = Object.keys(relevantMapping).length;
+                const isAgentLikeStream = message.metadata?.agentLlmStream
+                    || message.metadata?.voiceRealtime
+                    || message.metadata?.model?.endsWith('-stream');
+                const isAgentStreamAwaitingFirstToken = message.role === 'assistant'
+                    && message.isStreaming
+                    && (message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream'))
+                    && !(message.partialContent ?? '').length;
+                if (isAgentStreamAwaitingFirstToken) {
+                    return null;
+                }
+                return (_jsxs("div", { css: message.role === 'user' ? userMessage : messageBubble, children: [_jsxs("div", { css: [
+                                message.role === 'user'
+                                    ? userMessageContent
+                                    : message.metadata?.isRetry
+                                        ? retryMessageContent
+                                        : messageContent,
+                                isUserScanning && piiScanOverlay,
+                            ], children: [showPiiHeader && (_jsx(PiiStatusHeader, { message: message })), message.metadata?.isRetry && (_jsx("span", { css: css `margin-right: 8px !important; font-size: 14px !important;`, children: "\uD83D\uDD04" })), message.attachments && message.attachments.length > 0 && (_jsx("div", { css: css `
+                  display: flex !important;
+                  flex-wrap: wrap !important;
+                  gap: 8px !important;
+                  margin-bottom: ${message.content ? '10px' : '0'} !important;
+                `, children: message.attachments.map((attachment, idx) => (_jsxs("div", { css: css `
+                      position: relative !important;
+                      display: inline-block !important;
+                      border: 1px solid #ddd !important;
+                      border-radius: 8px !important;
+                      overflow: hidden !important;
+                      background: #f5f5f5 !important;
+                      max-width: 200px !important;
+                    `, children: [attachment.type === 'image' && (_jsx("img", { src: attachment.url, alt: attachment.name, css: css `
+                          max-width: 200px !important;
+                          max-height: 200px !important;
+                          object-fit: cover !important;
+                          display: block !important;
+                          cursor: pointer !important;
+                        `, onClick: () => {
+                                                    // Open image in new window on click
+                                                    const newWindow = window.open();
+                                                    if (newWindow) {
+                                                        newWindow.document.write(`<img src="${attachment.url}" style="max-width: 100%; height: auto;" />`);
+                                                    }
+                                                } })), attachment.type === 'file' && (_jsxs("div", { css: css `
+                          padding: 20px 15px !important;
+                          text-align: center !important;
+                          min-width: 150px !important;
+                          display: flex !important;
+                          align-items: center !important;
+                          justify-content: center !important;
+                          flex-direction: column !important;
+                          gap: 8px !important;
+                        `, children: [_jsx(AttachFileIcon, { css: css `font-size: 32px !important; color: #666 !important;` }), _jsx("span", { css: css `
+                            font-size: 12px !important;
+                            color: #666 !important;
+                            word-break: break-word !important;
+                            max-width: 120px !important;
+                          `, children: attachment.name }), attachment.size && (_jsxs("span", { css: css `
+                              font-size: 10px !important;
+                              color: #999 !important;
+                            `, children: [(attachment.size / 1024).toFixed(1), " KB"] }))] }))] }, idx))) })), message.isStreaming && message.metadata?.voiceRealtime
+                                    && (message.partialContent ?? '').length > 0 && (_jsxs("div", { css: streamingPartialText, children: [message.role === 'assistant'
+                                            ? convertUrlsToLinks(message.partialContent ?? '')
+                                            : message.partialContent, _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && message.role === 'assistant'
+                                    && (message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream'))
+                                    && !message.metadata?.voiceRealtime
+                                    && (message.partialContent ?? '').length > 0 && (_jsxs("div", { css: streamingPartialText, children: [convertUrlsToLinks(message.partialContent ?? ''), _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && message.partialContent
+                                    && !message.metadata?.voiceRealtime
+                                    && !(message.metadata?.agentLlmStream || message.metadata?.model?.endsWith('-stream')) && (_jsxs("div", { css: streamingPartialText, children: [message.role === 'assistant' ? convertUrlsToLinks(message.partialContent) : message.partialContent, _jsx("span", { css: streamingCaret, children: "\u258A" })] })), message.isStreaming && !message.partialContent && message.role === 'assistant'
+                                    && !isAgentLikeStream && (_jsxs("div", { css: streamingContainer, children: [_jsxs("div", { css: streamingHeader, children: [_jsx("span", { css: streamingIcon, children: "\uD83D\uDD27" }), _jsx("span", { css: streamingToolName, children: message.streamingToolName || 'Processing' }), message.streamingProgress !== undefined && (_jsxs("span", { css: streamingProgressPercent, children: [message.streamingProgress, "%"] }))] }), message.streamingProgress !== undefined && (_jsx("div", { css: streamingProgressContainer, children: _jsx("div", { css: [streamingProgressBar, css `width: ${message.streamingProgress}% !important;`] }) })), message.streamingStatus && (_jsx("div", { css: streamingStatus, children: message.streamingStatus })), message.streamingSteps && message.streamingSteps.length > 0 && (_jsx("div", { css: streamingStepsContainer, children: message.streamingSteps.map((step, idx) => (_jsxs("div", { css: streamingStepItem, children: [_jsx("span", { css: streamingStepCheck, children: "\u2713" }), _jsx("span", { children: step })] }, idx))) }))] })), !message.isStreaming && (() => {
+                                    // User message with redacted PII available — show tokens with fade-in
+                                    if (showRedacted) {
+                                        const isLive = message.piiStatus === 'scanning';
+                                        const content = highlightPiiTokens(message.piiProtection.anonymizedContent, isLive);
+                                        return isLive
+                                            ? _jsx("span", { css: piiContentFadeIn, children: content })
+                                            : content;
+                                    }
+                                    // User message during scanning (step 0) — show original text (scan overlay handles animation)
+                                    if (isUserScanning && !showRedacted) {
+                                        return message.content;
+                                    }
+                                    // Assistant message with redacted PII
+                                    if (message.role === 'assistant'
+                                        && piiDisplayMode === 'redacted'
+                                        && message.piiProtection?.anonymizedContent) {
+                                        return highlightPiiTokens(message.piiProtection.anonymizedContent, false);
+                                    }
+                                    // Default
+                                    return message.role === 'assistant'
+                                        ? convertUrlsToLinks(message.content)
+                                        : message.content;
+                                })(), message.button && (_jsx("div", { css: css `margin-top: 10px !important;`, children: _jsx("button", { onClick: () => {
+                                            if (message.button && message.button.trim()) {
+                                                handleButtonClick(message.button, message);
+                                            }
+                                        }, disabled: isAutoConnecting ||
+                                            (message.button === 'connectWallet' && Boolean(hitAddress)) ||
+                                            (message.button === 'signIn' && !isNeedSignInWithWallet) ||
+                                            (message.button === 'enableAIT' && (isAITLoading || isAITEnabling ||
+                                                (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission)))) || false, css: (message.button === 'connectWallet' && Boolean(hitAddress)) ? connectedButton :
+                                            (message.button === 'signIn' && !isNeedSignInWithWallet) ? connectedButton :
+                                                (message.button === 'continue') ? connectedButton :
+                                                    (message.button === 'enableAIT' && (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission))) ? connectedButton :
+                                                        chatbotButton, children: isAutoConnecting ? 'Connecting...' :
+                                            message.button === 'connectWallet' ? (Boolean(hitAddress) ? 'Connected' : walletTextUtils.getWalletText('Connect Wallet', serviceId)) :
+                                                message.button === 'signIn' ? (!isNeedSignInWithWallet ? 'Signed In' : 'Sign In') :
+                                                    message.button === 'continue' ? 'Continue' :
+                                                        message.button === 'enableAIT' ?
+                                                            ((isAITLoading || isAITEnabling) ? 'Enabling...' :
+                                                                (message.metadata?.requiredPermission && permissions.includes(message.metadata.requiredPermission)) ? 'AIT Enabled' : 'Enable AIT Permissions') :
+                                                            message.button }) }))] }), showPiiHeader && message.piiStatus === 'complete' && entityCount > 0 && (_jsxs("div", { css: css `text-align: right !important;`, children: [_jsxs("button", { css: piiBelowBubbleBtn, onClick: () => setExpandedPiiMsgId(v => v === message.id ? null : message.id), type: "button", children: [_jsx(GreenCheckIcon, {}), entityCount, " item", entityCount !== 1 ? 's' : '', " protected ", isPiiExpanded ? '▴' : '▸'] }), isPiiExpanded && (_jsx("div", { css: piiEntityPanel, children: Object.entries(relevantMapping).map(([original, token]) => (_jsxs("div", { css: piiEntityRowStyle, children: [_jsx("span", { css: piiOriginalStyle, children: original }), _jsx("span", { css: piiArrowStyle, children: "\u2192" }), _jsx("span", { css: piiTokenMappingStyle, children: token })] }, original))) }))] })), message.role === 'assistant' && message.metadata?.model && (_jsxs("div", { css: css `
+              ${modelIndicator}
+              gap: 8px !important;
+            `, children: [_jsxs("div", { css: modelBadge, children: [_jsx("span", { css: modelDot }), getModelDisplayName(message.metadata.model)] }), (isTtsProcessing || requiresGesture) && !isLoading && message.id === messages[messages.length - 1]?.id && (_jsxs("div", { css: css `
+                  display: flex !important;
+                  align-items: center !important;
+                  font-size: 12px !important;
+                  color: #666 !important;
+                  gap: 4px !important;
+                `, children: [_jsx("span", { role: "img", "aria-hidden": "true", children: "\uD83D\uDD0A" }), _jsx("span", { children: requiresGesture ? (_jsx("button", { onClick: () => retryTtsWithGesture && retryTtsWithGesture(), css: css `
+                          background: none !important;
+                          border: none !important;
+                          color: #1976d2 !important;
+                          padding: 0 !important;
+                          text-decoration: underline !important;
+                          cursor: pointer !important;
+                        `, children: "Tap to play voice" })) : 'Preparing voice reply...' })] }))] }))] }, message.id));
+            }), isLoading && (() => {
+                // During PII pipeline (step 0-1), hide "Thinking..." — message hasn't been sent to AI yet.
+                // Only show once Send step (2) is reached, meaning the anonymized message was sent to AI.
+                if (piiDisplayMode === 'redacted') {
+                    const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+                    if (lastUserMsg?.piiStatus === 'scanning' && (lastUserMsg.piiStep === undefined || lastUserMsg.piiStep < 2)) {
+                        return null;
+                    }
+                }
+                return (_jsx("div", { css: loadingIndicator, children: "Thinking..." }));
+            })(), _jsx("div", { ref: messagesEndRef })] }));
+};

package/dist/ui/ModelSelector.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+export declare const ModelSelector: React.FC;
+//# sourceMappingURL=ModelSelector.d.ts.map

package/dist/ui/ModelSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../src/ui/ModelSelector.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAsLjC,CAAC"}

package/dist/ui/ModelSelector.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+import { css } from '@emotion/react';
+import { useChatBot } from '../context/ChatBotContext';
+import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { adiSideItalicDataUri } from '../assets/images/adiSideItalicDataUri';
+export const ModelSelector = () => {
+    const { availableModels, selectedModelIndex, handleModelChange, serviceId } = useChatBot();
+    // Safety check: ensure selectedModelIndex is within bounds
+    const safeSelectedModelIndex = selectedModelIndex >= availableModels.length ? 0 : selectedModelIndex;
+    // Check if current service is Adilas
+    const isAdilasService = walletTextUtils.isAdilasService(serviceId);
+    // Get fallback model label (first available model or 'Unknown')
+    // For Adilas, we don't show the label, only the image
+    const fallbackModelLabel = availableModels.length > 0
+        ? availableModels[0].label
+        : 'Unknown';
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuItemClick = (event, index) => {
+        handleModelChange(index);
+        setAnchorEl(null);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    // Don't show anything if no models available
+    if (availableModels.length === 0) {
+        return null;
+    }
+    // For Adilas: only show image, no text (Adilas always has only 1 model)
+    if (isAdilasService) {
+        return (_jsx("div", { css: css `
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+      `, children: _jsx("div", { css: css `
+          background-color: white !important;
+          border-radius: 4px !important;
+          padding: 2px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        `, children: _jsx("img", { src: adiSideItalicDataUri, alt: "Adi", css: css `
+              width: 28px !important;
+              height: 28px !important;
+              display: block !important;
+            ` }) }) }));
+    }
+    // For other services: handle single or multiple models
+    // If only 1 model, show model name
+    if (availableModels.length === 1) {
+        return (_jsx("div", { css: css `
+        display: flex !important;
+        align-items: center !important;
+        gap: 6px !important;
+      `, children: _jsx("div", { css: css `
+          display: flex !important;
+          align-items: center !important;
+          padding: 4px 8px !important;
+          border-radius: 4px !important;
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          font-size: 12px !important;
+          font-weight: 500 !important;
+        `, children: _jsx("span", { children: availableModels[0].label }) }) }));
+    }
+    // If 2+ models, show full selector with dropdown
+    return (_jsxs("div", { css: css `
+      display: flex !important;
+      align-items: center !important;
+      position: relative !important;
+      gap: 6px !important;
+    `, children: [_jsxs("div", { css: css `
+          display: flex !important;
+          align-items: center !important;
+          cursor: pointer !important;
+          padding: 4px 8px !important;
+          border-radius: 4px !important;
+          background-color: rgba(255, 255, 255, 0.1) !important;
+          transition: background-color 0.2s !important;
+          font-size: 12px !important;
+          font-weight: 500 !important;
+          gap: 6px !important;
+          
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.2) !important;
+          }
+        `, onClick: handleClick, title: "Change AI Model", children: [_jsx("span", { children: availableModels[safeSelectedModelIndex]?.label || fallbackModelLabel }), _jsx("span", { css: css `font-size: 10px !important;`, children: "\u25BC" })] }), open && (_jsx("div", { css: css `
+            position: absolute !important;
+            top: 100% !important;
+            left: 0 !important;
+            background-color: white !important;
+            border: 1px solid #ddd !important;
+            border-radius: 4px !important;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+            z-index: 1000 !important;
+            min-width: 120px !important;
+            margin-top: 4px !important;
+          `, children: availableModels.map((model, index) => (_jsx("div", { css: css `
+                padding: 8px 12px !important;
+                cursor: pointer !important;
+                background-color: ${index === safeSelectedModelIndex ? '#f0f0f0' : 'transparent'} !important;
+                color: ${index === safeSelectedModelIndex ? '#007bff' : '#333'} !important;
+                font-size: 12px !important;
+                border-bottom: ${index < availableModels.length - 1 ? '1px solid #eee' : 'none'} !important;
+                
+                &:hover {
+                  background-color: ${index === safeSelectedModelIndex ? '#f0f0f0' : '#f8f9fa'} !important;
+                }
+              `, onClick: (event) => handleMenuItemClick(event, index), children: model.label }, model.value))) })), open && (_jsx("div", { css: css `
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 0 !important;
+            z-index: 999 !important;
+          `, onClick: handleClose }))] }));
+};

package/dist/ui/NotificationModal.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import * as React from 'react';
+interface NotificationModalProps {
+    type: 'success' | 'error' | 'info' | 'warning';
+    title: string;
+    message: string;
+    onClose: () => void;
+    onConfirm?: () => void;
+    showConfirm?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+}
+export declare const NotificationModal: React.FC<NotificationModalProps>;
+export {};
+//# sourceMappingURL=NotificationModal.d.ts.map

package/dist/ui/NotificationModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationModal.d.ts","sourceRoot":"","sources":["../../src/ui/NotificationModal.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,sBAAsB;IAC9B,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4F9D,CAAC"}