@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1 → 0.1.3

package/dist/context/AgentAssistantContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK1F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,GAC5D,qBAAqB,GAAG;IACxB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAIF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,IAAI,CACN,qBAAqB,EACnB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,mBAAmB,GACnB,wBAAwB,CAC3B,CAAC;CACH,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,EAAE,GACH,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CA4LlD;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAQ9D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAU5D"}
+{"version":3,"file":"AgentAssistantContext.d.ts","sourceRoot":"","sources":["../../src/context/AgentAssistantContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,WAAW,EAAE,MAAM,8CAA8C,CAAC;AACzF,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,6CAA6C,CAAC;AACrD,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK1F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,GAC5D,qBAAqB,GAAG;IACxB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAIF,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,IAAI,CACN,qBAAqB,EACnB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,mBAAmB,GACnB,wBAAwB,CAC3B,CAAC;CACH,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,EAAE,GACH,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CA8MlD;AAED,wBAAgB,iBAAiB,IAAI,0BAA0B,CAQ9D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAU5D"}

package/dist/context/AgentAssistantContext.js

@@ -24,7 +24,9 @@ export function AgentAssistantProvider({ children, ui, }) {
     });
     const voiceTranscriptApi = useMemo(() => ({
         getMessages: () => agent.agent.getSnapshot().messages,
-        setMessages: agent.setMessages,
+        updateMessages: (updater) => {
+            agent.setMessages(updater(agent.agent.getSnapshot().messages));
+        },
         syncVoiceTurnHistory: agent.syncVoiceTurnHistory,
     }), [agent.agent, agent.setMessages, agent.syncVoiceTurnHistory]);
     const { handleTranscript, handleDone, clearVoiceStream } = useVoiceTranscriptMessages(voiceTranscriptApi, interactionMode, voice.voiceSessionId);
@@ -64,6 +66,24 @@ export function AgentAssistantProvider({ children, ui, }) {
         setInteractionMode,
     ]);
     const { wrappedStartVoice, wrappedStopVoice, wrappedInterrupt, isVoiceChannelReady, } = useVoiceConnectOrchestration(agent, voice, interactionMode, micStartsMuted, orchestrationCallbacks);
+    // iOS 切換 App 或相機後返回時，若 WebRTC App Channel 已斷開則自動停止語音 session，
+    // 避免麥克風圖示顯示活躍但狀態卡在 Idle 的問題。
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            if (voice.voiceSessionId == null)
+                return;
+            const session = agent.agent.getVoiceSession();
+            if (!session?.isAppChannelOpen()) {
+                void wrappedStopVoice();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, [voice.voiceSessionId, agent.agent, wrappedStopVoice]);
     const theme = useMemo(() => ({
         ...defaultAgentAssistantTheme,
         ...ui.theme,

package/dist/legacy/chatbot/ui/ChatBotHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type ChatBotHeaderProps = {
+    mobileLayout: boolean;
+    isDragging: boolean;
+    onDragStart: (event: React.PointerEvent<HTMLDivElement>) => void;
+    isVoiceMode: boolean;
+    isVoiceConnecting: boolean;
+    onVoiceToggle: () => void;
+    piiDisplayMode: 'plain' | 'redacted';
+    isAITLoading: boolean;
+    onSettingsClick: () => void;
+    onClose: () => void;
+};
+export declare const ChatBotHeader: React.FC<ChatBotHeaderProps>;
+//# sourceMappingURL=ChatBotHeader.d.ts.map

package/dist/legacy/chatbot/ui/ChatBotHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBotHeader.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/ChatBotHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,OAAO,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqHtD,CAAC"}

package/dist/legacy/chatbot/ui/ChatBotHeader.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { ModelSelector } from './ModelSelector';
+import { DRAG_CORNER_EXCLUSION_PX, HeaderActions, HeaderLoadingIndicator, PiiBadge, } from './chatBotHeaderParts';
+import { chatHeader, headerTitle } from './styles/isolatedStyles';
+export const ChatBotHeader = ({ mobileLayout, isDragging, onDragStart, isVoiceMode, isVoiceConnecting, onVoiceToggle, piiDisplayMode, isAITLoading, onSettingsClick, onClose, }) => {
+    const actions = (_jsx(HeaderActions, { isVoiceMode: isVoiceMode, isVoiceConnecting: isVoiceConnecting, onVoiceToggle: onVoiceToggle, onSettingsClick: onSettingsClick, onClose: onClose }));
+    const metaChips = !isVoiceMode ? (_jsxs(_Fragment, { children: [_jsx("div", { css: css `position: relative !important; pointer-events: auto !important;`, children: _jsx(ModelSelector, {}) }), piiDisplayMode === 'redacted' && _jsx(PiiBadge, {}), isAITLoading && _jsx(HeaderLoadingIndicator, {})] })) : null;
+    const dragOverlay = (_jsx("div", { css: css `
+        position: absolute !important;
+        left: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+        right: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+        top: 0 !important;
+        bottom: 0 !important;
+        z-index: 1 !important;
+        cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
+        user-select: none !important;
+      `, onPointerDown: onDragStart, title: "Drag to move", "aria-hidden": true }));
+    return (_jsxs("div", { css: [chatHeader, css `
+      position: relative !important;
+      ${mobileLayout ? css `
+        padding: 10px 12px !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 8px !important;
+      ` : ''}
+    `], children: [dragOverlay, mobileLayout ? (_jsxs("div", { css: css `
+          position: relative !important;
+          z-index: 2 !important;
+          display: flex !important;
+          flex-direction: column !important;
+          gap: 8px !important;
+          width: 100% !important;
+        `, children: [_jsxs("div", { css: css `
+            display: flex !important;
+            justify-content: space-between !important;
+            align-items: center !important;
+            gap: 8px !important;
+            pointer-events: none !important;
+          `, children: [_jsx("h3", { css: [headerTitle, css `pointer-events: none !important;`], children: "AI Agent" }), actions] }), metaChips && (_jsx("div", { css: css `
+              display: flex !important;
+              align-items: center !important;
+              flex-wrap: wrap !important;
+              gap: 8px !important;
+              pointer-events: none !important;
+            `, children: metaChips }))] })) : (_jsxs("div", { css: css `
+          position: relative !important;
+          z-index: 2 !important;
+          display: flex !important;
+          justify-content: space-between !important;
+          align-items: center !important;
+          width: 100% !important;
+          pointer-events: none !important;
+        `, children: [_jsxs("div", { css: css `
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            min-width: 0 !important;
+            pointer-events: none !important;
+          `, children: [_jsx("h3", { css: headerTitle, children: "AI Agent" }), metaChips] }), actions] }))] }));
+};

package/dist/legacy/chatbot/ui/ChatBotUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBotUI.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/ChatBotUI.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuG/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EA20B7B,CAAC"}
+{"version":3,"file":"ChatBotUI.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/ChatBotUI.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+F/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAgtB7B,CAAC"}

package/dist/legacy/chatbot/ui/ChatBotUI.js

@@ -4,16 +4,13 @@ import { css } from '@emotion/react';
 import * as React from 'react';
 import { useDraggable, useLocalStorage, useResizable, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
 import { useChatBot } from '../context/ChatBotContext';
-import GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import { ChatBotHeader } from './ChatBotHeader';
 import { MessageInput } from './MessageInput';
 import { MessageList } from './MessageList';
-import { ModelSelector } from './ModelSelector';
 import { PermissionForm } from './PermissionForm';
 import { PresetMessages } from './PresetMessages';
 import { VoiceModePanel } from './VoiceModePanel';
-import { chatHeader, chatWindow, closeButton, errorToast, floatingButton, headerButton, headerTitle, idvBanner, idvBannerText, idvBannerTitle, idvDismissButton, idvVerifyButton, infoToast, loadingSpinner, modalOverlay, resizeHandleNE, resizeHandleNW, resizeHandleSE, resizeHandleSW, sdkContainer, successToast, toastCloseButton, warningToast } from './styles/isolatedStyles';
-/** Header drag band inset so it does not overlap corner resize hit areas */
-const DRAG_CORNER_EXCLUSION_PX = 20;
+import { chatWindow, errorToast, floatingButton, idvBanner, idvBannerText, idvBannerTitle, idvDismissButton, idvVerifyButton, infoToast, modalOverlay, resizeHandleNE, resizeHandleNW, resizeHandleSE, resizeHandleSW, sdkContainer, successToast, toastCloseButton, warningToast } from './styles/isolatedStyles';
 const MOBILE_BREAKPOINT = 768;
 const MOBILE_EDGE_MARGIN = 12;
 const MOBILE_FAB_POSITION = { right: MOBILE_EDGE_MARGIN, bottom: MOBILE_EDGE_MARGIN };
@@ -526,72 +523,7 @@ export const ChatBotUI = () => {
             left: ${MOBILE_EDGE_MARGIN}px !important;
             top: ${MOBILE_EDGE_MARGIN}px !important;
           ` : ''}
-        `], children: [!mobileLayout && (_jsxs(_Fragment, { children: [_jsx("div", { css: resizeHandleNW, onPointerDown: handleResizeStart('nw'), title: "Resize", "aria-label": "Resize chat window from top-left" }), _jsx("div", { css: resizeHandleNE, onPointerDown: handleResizeStart('ne'), title: "Resize", "aria-label": "Resize chat window from top-right" }), _jsx("div", { css: resizeHandleSW, onPointerDown: handleResizeStart('sw'), title: "Resize", "aria-label": "Resize chat window from bottom-left" }), _jsx("div", { css: resizeHandleSE, onPointerDown: handleResizeStart('se'), title: "Resize", "aria-label": "Resize chat window from bottom-right" })] })), _jsxs("div", { css: [chatHeader, css `
-            position: relative !important;
-          `], children: [_jsx("div", { css: css `
-              position: absolute !important;
-              left: ${DRAG_CORNER_EXCLUSION_PX}px !important;
-              right: ${DRAG_CORNER_EXCLUSION_PX}px !important;
-              top: 0 !important;
-              bottom: 0 !important;
-              z-index: 1 !important;
-              cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
-              user-select: none !important;
-            `, onPointerDown: handleDragStart, title: "Drag to move", "aria-hidden": true }), _jsxs("div", { css: css `
-              position: relative !important;
-              z-index: 2 !important;
-              display: flex !important;
-              justify-content: space-between !important;
-              align-items: center !important;
-              width: 100% !important;
-              pointer-events: none !important;
-            `, children: [_jsxs("div", { css: css `
-            display: flex !important;
-            align-items: center !important;
-            gap: 10px !important;
-            pointer-events: none !important;
-          `, children: [_jsx("h3", { css: headerTitle, children: "AI Agent" }), !isVoiceMode && (_jsx("div", { css: css `
-                position: relative !important;
-                pointer-events: auto !important;
-              `, children: _jsx(ModelSelector, {}) })), !isVoiceMode && piiDisplayMode === 'redacted' && (_jsxs("div", { css: css `
-                  display: inline-flex !important;
-                  align-items: center !important;
-                  gap: 4px !important;
-                  padding: 2px 8px !important;
-                  background-color: rgba(255, 255, 255, 0.2) !important;
-                  border: 1px solid rgba(255, 255, 255, 0.4) !important;
-                  border-radius: 10px !important;
-                  font-size: 10px !important;
-                  font-weight: 600 !important;
-                  color: #ffffff !important;
-                  white-space: nowrap !important;
-                  line-height: 1.4 !important;
-                  user-select: none !important;
-                `, title: "PII Protection is active \u2014 sensitive data is automatically anonymized before sending to AI", children: [_jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "#ffffff", 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" }) }), "PII Protected"] })), isAITLoading && (_jsxs("div", { css: css `
-                display: flex !important;
-                align-items: center !important;
-                gap: 5px !important;
-                font-size: 12px !important;
-                opacity: 0.8 !important;
-              `, children: [_jsx("div", { css: loadingSpinner }), "Loading..."] }))] }), _jsxs("div", { css: css `
-            display: flex !important;
-            align-items: center !important;
-            gap: 10px !important;
-            pointer-events: auto !important;
-          `, children: [_jsxs("button", { onClick: () => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode()), css: [headerButton, css `
-                width: auto !important;
-                min-width: 82px !important;
-                padding: 0 10px !important;
-                gap: 6px !important;
-                font-size: 12px !important;
-                font-weight: 600 !important;
-                line-height: 1 !important;
-                white-space: nowrap !important;
-              `], title: isVoiceConnecting
-                                                    ? 'Cancel voice connection and return to text mode'
-                                                    : isVoiceMode
-                                                        ? 'Switch to text mode'
-                                                        : 'Switch to voice mode', onPointerDown: (e) => e.stopPropagation(), children: [_jsx(GraphicEqIcon, { css: css `font-size: 16px !important; color: #fff !important;` }), (isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'] }), _jsx("button", { onClick: handleSettingsClick, css: headerButton, title: "AIT Settings", onPointerDown: (e) => e.stopPropagation(), children: "\u2699\uFE0F" }), _jsx("button", { onClick: handleClose, css: closeButton, onPointerDown: (e) => e.stopPropagation(), title: "Minimize", children: "\u2212" })] })] })] }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
+        `], children: [!mobileLayout && (_jsxs(_Fragment, { children: [_jsx("div", { css: resizeHandleNW, onPointerDown: handleResizeStart('nw'), title: "Resize", "aria-label": "Resize chat window from top-left" }), _jsx("div", { css: resizeHandleNE, onPointerDown: handleResizeStart('ne'), title: "Resize", "aria-label": "Resize chat window from top-right" }), _jsx("div", { css: resizeHandleSW, onPointerDown: handleResizeStart('sw'), title: "Resize", "aria-label": "Resize chat window from bottom-left" }), _jsx("div", { css: resizeHandleSE, onPointerDown: handleResizeStart('se'), title: "Resize", "aria-label": "Resize chat window from bottom-right" })] })), _jsx(ChatBotHeader, { mobileLayout: mobileLayout, isDragging: isDragging, onDragStart: handleDragStart, isVoiceMode: isVoiceMode, isVoiceConnecting: isVoiceConnecting, onVoiceToggle: () => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode()), piiDisplayMode: piiDisplayMode, isAITLoading: isAITLoading, onSettingsClick: handleSettingsClick, onClose: handleClose }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
               font-size: 20px !important;
               color: #f39c12 !important;
             `, children: "\uD83D\uDCA1" }), _jsxs("div", { css: css `flex: 1 !important;`, children: [_jsx("h5", { css: idvBannerTitle, children: walletTextUtils.getWalletText('Recommended: Verify Your Wallet', serviceId) }), _jsx("p", { css: idvBannerText, children: walletTextUtils.getWalletText('While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions.', serviceId) }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: idvVerifyButton, children: walletTextUtils.getWalletText('Verify Wallet', serviceId) })] }), _jsx("button", { onClick: handleDismissIDV, css: idvDismissButton, title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { css: css `

package/dist/legacy/chatbot/ui/chatBotHeaderParts.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const DRAG_CORNER_EXCLUSION_PX = 20;
+export declare const piiBadgeStyles: import("@emotion/utils").SerializedStyles;
+export declare const PiiBadge: React.FC;
+type HeaderActionsProps = {
+    isVoiceMode: boolean;
+    isVoiceConnecting: boolean;
+    onVoiceToggle: () => void;
+    onSettingsClick: () => void;
+    onClose: () => void;
+};
+export declare const HeaderActions: React.FC<HeaderActionsProps>;
+export declare const HeaderLoadingIndicator: React.FC;
+export {};
+//# sourceMappingURL=chatBotHeaderParts.d.ts.map

package/dist/legacy/chatbot/ui/chatBotHeaderParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatBotHeaderParts.d.ts","sourceRoot":"","sources":["../../../../src/legacy/chatbot/ui/chatBotHeaderParts.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAa3C,eAAO,MAAM,cAAc,2CAc1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAU5B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8CtD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAW1C,CAAC"}

package/dist/legacy/chatbot/ui/chatBotHeaderParts.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import { closeButton, headerButton, loadingSpinner } from './styles/isolatedStyles';
+export const DRAG_CORNER_EXCLUSION_PX = 20;
+const voiceButtonStyles = css `
+  width: auto !important;
+  min-width: 82px !important;
+  padding: 0 10px !important;
+  gap: 6px !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+`;
+export const piiBadgeStyles = css `
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 2px 8px !important;
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  border-radius: 10px !important;
+  font-size: 10px !important;
+  font-weight: 600 !important;
+  color: #ffffff !important;
+  white-space: nowrap !important;
+  line-height: 1.4 !important;
+  user-select: none !important;
+`;
+export const PiiBadge = () => (_jsxs("div", { css: piiBadgeStyles, title: "PII Protection is active \u2014 sensitive data is automatically anonymized before sending to AI", children: [_jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "#ffffff", 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" }) }), "PII Protected"] }));
+export const HeaderActions = ({ isVoiceMode, isVoiceConnecting, onVoiceToggle, onSettingsClick, onClose, }) => (_jsxs("div", { css: css `
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+    flex-shrink: 0 !important;
+    pointer-events: auto !important;
+  `, children: [_jsxs("button", { onClick: onVoiceToggle, css: [headerButton, voiceButtonStyles], title: isVoiceConnecting
+                ? 'Cancel voice connection and return to text mode'
+                : isVoiceMode
+                    ? 'Switch to text mode'
+                    : 'Switch to voice mode', onPointerDown: (e) => e.stopPropagation(), children: [_jsx(GraphicEqIcon, { css: css `font-size: 16px !important; color: #fff !important;` }), (isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'] }), _jsx("button", { onClick: onSettingsClick, css: headerButton, title: "AIT Settings", onPointerDown: (e) => e.stopPropagation(), children: "\u2699\uFE0F" }), _jsx("button", { onClick: onClose, css: closeButton, onPointerDown: (e) => e.stopPropagation(), title: "Minimize", children: "\u2212" })] }));
+export const HeaderLoadingIndicator = () => (_jsxs("div", { css: css `
+    display: flex !important;
+    align-items: center !important;
+    gap: 5px !important;
+    font-size: 12px !important;
+    opacity: 0.8 !important;
+  `, children: [_jsx("div", { css: loadingSpinner }), "Loading..."] }));

package/dist/voice/useVoiceTranscriptMessages.d.ts

@@ -1,15 +1,17 @@
 import type { Message, VoiceDoneEvent, VoiceTranscriptEvent } from '@bytexbyte/nxtlinq-ai-agent-core-development';
-import type { InteractionMode } from '../context/AgentAssistantContext';
-type VoiceTranscriptAgentApi = {
+type InteractionMode = 'text' | 'voice';
+export type VoiceTranscriptAgentApi = {
     getMessages: () => Message[];
-    setMessages: (messages: Message[]) => void;
+    updateMessages: (updater: (prev: Message[]) => Message[]) => void;
     syncVoiceTurnHistory: (options?: {
         last?: number;
     }) => Promise<void>;
 };
-export declare function useVoiceTranscriptMessages(api: VoiceTranscriptAgentApi, interactionMode: InteractionMode, voiceSessionId: string | null): {
+export declare function useVoiceTranscriptMessages(api: VoiceTranscriptAgentApi, interactionMode: InteractionMode, voiceSessionId: string | null, getPendingUserText?: () => string): {
     handleTranscript: (event: VoiceTranscriptEvent) => void;
-    handleDone: (event: VoiceDoneEvent) => void;
+    handleDone: (event: VoiceDoneEvent, options?: {
+        pendingUserText?: string;
+    }) => void;
     clearVoiceStream: () => void;
 };
 export {};

package/dist/voice/useVoiceTranscriptMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVoiceTranscriptMessages.d.ts","sourceRoot":"","sources":["../../src/voice/useVoiceTranscriptMessages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,oBAAoB,EACrB,MAAM,8CAA8C,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,KAAK,uBAAuB,GAAG;IAC7B,WAAW,EAAE,MAAM,OAAO,EAAE,CAAC;IAC7B,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtE,CAAC;AAWF,wBAAgB,0BAA0B,CACxC,GAAG,EAAE,uBAAuB,EAC5B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,MAAM,GAAG,IAAI;8BA6FnB,oBAAoB;wBA4BpB,cAAc;;EAwBzB"}
+{"version":3,"file":"useVoiceTranscriptMessages.d.ts","sourceRoot":"","sources":["../../src/voice/useVoiceTranscriptMessages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,oBAAoB,EACrB,MAAM,8CAA8C,CAAC;AAKtD,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAExC,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,OAAO,EAAE,CAAC;IAC7B,cAAc,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,IAAI,CAAC;IAClE,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtE,CAAC;AAWF,wBAAgB,0BAA0B,CACxC,GAAG,EAAE,uBAAuB,EAC5B,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,MAAM,GAAG,IAAI,EAC7B,kBAAkB,CAAC,EAAE,MAAM,MAAM;8BAiGvB,oBAAoB;wBA4BpB,cAAc,YAAY;QAAE,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE;;EAgCjE"}

package/dist/voice/useVoiceTranscriptMessages.js

@@ -1,5 +1,6 @@
 import { mergeStreamingTranscript } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import { useCallback, useRef } from 'react';
+import { ensureUserBubbleForVoiceTurn } from './voiceUserBubble';
 const STREAM_PREFIX = 'voice-stream-';
 function voiceMeta(sessionId) {
     return {
@@ -7,104 +8,105 @@ function voiceMeta(sessionId) {
         voiceSessionId: sessionId ?? undefined,
     };
 }
-export function useVoiceTranscriptMessages(api, interactionMode, voiceSessionId) {
+export function useVoiceTranscriptMessages(api, interactionMode, voiceSessionId, getPendingUserText) {
     const streamIdRef = useRef(null);
     const sessionIdRef = useRef(voiceSessionId);
     sessionIdRef.current = voiceSessionId;
     const isVoiceUiActive = useCallback(() => interactionMode === 'voice' && sessionIdRef.current != null, [interactionMode]);
     const upsertStreaming = useCallback((text) => {
-        const messages = api.getMessages();
-        let streamId = streamIdRef.current;
-        if (!streamId) {
-            streamId = `${STREAM_PREFIX}${Date.now()}`;
-            streamIdRef.current = streamId;
-        }
-        const idx = messages.findIndex((m) => m.id === streamId);
-        const partialContent = idx >= 0
-            ? mergeStreamingTranscript(messages[idx]?.partialContent ?? '', text)
-            : text;
-        const meta = voiceMeta(sessionIdRef.current);
-        if (idx >= 0) {
-            api.setMessages(messages.map((m, i) => i === idx
-                ? { ...m, partialContent, isStreaming: true, metadata: { ...m.metadata, ...meta } }
-                : m));
-            return;
-        }
-        api.setMessages([
-            ...messages,
-            {
-                id: streamId,
-                role: 'assistant',
-                content: '',
-                partialContent,
-                isStreaming: true,
-                timestamp: new Date().toISOString(),
-                metadata: meta,
-            },
-        ]);
-    }, [api]);
+        api.updateMessages((prev) => {
+            let streamId = streamIdRef.current;
+            if (!streamId) {
+                streamId = `${STREAM_PREFIX}${Date.now()}`;
+                streamIdRef.current = streamId;
+            }
+            const idx = prev.findIndex((m) => m.id === streamId);
+            const partialContent = idx >= 0
+                ? mergeStreamingTranscript(prev[idx]?.partialContent ?? '', text)
+                : text;
+            const meta = voiceMeta(sessionIdRef.current);
+            if (idx >= 0) {
+                return prev.map((m, i) => i === idx
+                    ? { ...m, partialContent, isStreaming: true, metadata: { ...m.metadata, ...meta } }
+                    : m);
+            }
+            const withUser = ensureUserBubbleForVoiceTurn(prev, getPendingUserText?.() ?? '', undefined, meta);
+            return [
+                ...withUser,
+                {
+                    id: streamId,
+                    role: 'assistant',
+                    content: '',
+                    partialContent,
+                    isStreaming: true,
+                    timestamp: new Date().toISOString(),
+                    metadata: meta,
+                },
+            ];
+        });
+    }, [api, getPendingUserText]);
     const finalizeAssistant = useCallback((text, messageId) => {
         const trimmed = text.trim();
         streamIdRef.current = null;
         if (!trimmed)
             return;
-        const messages = api.getMessages();
-        const streamIdx = messages.findIndex((m) => m.isStreaming && m.role === 'assistant');
-        if (streamIdx >= 0) {
-            api.setMessages(messages.map((m, i) => i === streamIdx
-                ? {
-                    ...m,
-                    id: messageId ?? m.id,
+        api.updateMessages((prev) => {
+            const streamIdx = prev.findIndex((m) => m.isStreaming && m.role === 'assistant');
+            if (streamIdx >= 0) {
+                return prev.map((m, i) => i === streamIdx
+                    ? {
+                        ...m,
+                        id: messageId ?? m.id,
+                        content: trimmed,
+                        partialContent: undefined,
+                        isStreaming: false,
+                        metadata: { ...m.metadata, ...voiceMeta(sessionIdRef.current) },
+                    }
+                    : m);
+            }
+            const last = prev[prev.length - 1];
+            if (last?.role === 'assistant' && last.content === trimmed)
+                return prev;
+            return [
+                ...prev,
+                {
+                    id: messageId ?? `voice-asst-${Date.now()}`,
+                    role: 'assistant',
                     content: trimmed,
-                    partialContent: undefined,
-                    isStreaming: false,
-                    metadata: { ...m.metadata, ...voiceMeta(sessionIdRef.current) },
-                }
-                : m));
-            return;
-        }
-        const last = messages[messages.length - 1];
-        if (last?.role === 'assistant' && last.content === trimmed)
-            return;
-        api.setMessages([
-            ...messages,
-            {
-                id: messageId ?? `voice-asst-${Date.now()}`,
-                role: 'assistant',
-                content: trimmed,
-                timestamp: new Date().toISOString(),
-                metadata: voiceMeta(sessionIdRef.current),
-            },
-        ]);
+                    timestamp: new Date().toISOString(),
+                    metadata: voiceMeta(sessionIdRef.current),
+                },
+            ];
+        });
     }, [api]);
     const handleTranscript = useCallback((event) => {
         if (!isVoiceUiActive())
             return;
         const text = event.text?.trim() ?? '';
         if (event.role === 'assistant') {
-            // Keep one streaming bubble for the whole turn; finalize only in handleDone.
             if (text)
                 upsertStreaming(text);
             return;
         }
         if (event.role === 'user' && !event.interim && text) {
-            const messages = api.getMessages();
-            const last = messages[messages.length - 1];
-            if (last?.role === 'user' && last.content === text)
-                return;
-            api.setMessages([
-                ...messages,
-                {
-                    id: `voice-user-${Date.now()}`,
-                    role: 'user',
-                    content: text,
-                    timestamp: new Date().toISOString(),
-                    metadata: voiceMeta(sessionIdRef.current),
-                },
-            ]);
+            api.updateMessages((prev) => {
+                const last = prev[prev.length - 1];
+                if (last?.role === 'user' && last.content === text)
+                    return prev;
+                return [
+                    ...prev,
+                    {
+                        id: `voice-user-${Date.now()}`,
+                        role: 'user',
+                        content: text,
+                        timestamp: new Date().toISOString(),
+                        metadata: voiceMeta(sessionIdRef.current),
+                    },
+                ];
+            });
         }
-    }, [api, finalizeAssistant, isVoiceUiActive, upsertStreaming]);
-    const handleDone = useCallback((event) => {
+    }, [api, isVoiceUiActive, upsertStreaming]);
+    const handleDone = useCallback((event, options) => {
         if (!isVoiceUiActive())
             return;
         if (event.guardrailsBlocked || event.billingBlocked || event.error) {
@@ -113,6 +115,7 @@ export function useVoiceTranscriptMessages(api, interactionMode, voiceSessionId)
         }
         const reply = event.replyText?.trim() ?? '';
         if (reply) {
+            api.updateMessages((prev) => ensureUserBubbleForVoiceTurn(prev, options?.pendingUserText ?? getPendingUserText?.() ?? '', event.userMessageId, voiceMeta(sessionIdRef.current)));
             finalizeAssistant(reply, event.assistantMessageId ?? undefined);
         }
         else {
@@ -121,7 +124,7 @@ export function useVoiceTranscriptMessages(api, interactionMode, voiceSessionId)
         void api.syncVoiceTurnHistory({ last: 20 }).catch((err) => {
             console.warn('[nxtlinq] syncVoiceTurnHistory after voice turn failed', err);
         });
-    }, [api, finalizeAssistant, isVoiceUiActive]);
+    }, [api, finalizeAssistant, getPendingUserText, isVoiceUiActive]);
     const clearVoiceStream = useCallback(() => {
         streamIdRef.current = null;
     }, []);

package/dist/voice/voiceUserBubble.d.ts

@@ -0,0 +1,10 @@
+import type { Message } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+export declare const VOICE_USER_INPUT_PLACEHOLDER = "(Voice input)";
+type VoiceMeta = {
+    voiceRealtime: true;
+    voiceSessionId?: string;
+};
+/** Ensure a user bubble exists before the in-flight assistant reply for this turn. */
+export declare function ensureUserBubbleForVoiceTurn(messages: Message[], userText: string, userMessageId: string | null | undefined, metaForPlaceholder: VoiceMeta | undefined): Message[];
+export {};
+//# sourceMappingURL=voiceUserBubble.d.ts.map

package/dist/voice/voiceUserBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"voiceUserBubble.d.ts","sourceRoot":"","sources":["../../src/voice/voiceUserBubble.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,8CAA8C,CAAC;AAE5E,eAAO,MAAM,4BAA4B,kBAAkB,CAAC;AAE5D,KAAK,SAAS,GAAG;IACf,aAAa,EAAE,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,sFAAsF;AACtF,wBAAgB,4BAA4B,CAC1C,QAAQ,EAAE,OAAO,EAAE,EACnB,QAAQ,EAAE,MAAM,EAChB,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACxC,kBAAkB,EAAE,SAAS,GAAG,SAAS,GACxC,OAAO,EAAE,CAuDX"}

package/dist/voice/voiceUserBubble.js

@@ -0,0 +1,52 @@
+export const VOICE_USER_INPUT_PLACEHOLDER = '(Voice input)';
+/** Ensure a user bubble exists before the in-flight assistant reply for this turn. */
+export function ensureUserBubbleForVoiceTurn(messages, userText, userMessageId, metaForPlaceholder) {
+    const streamIdx = messages.findIndex((m) => m.isStreaming && m.role === 'assistant');
+    const insertAt = streamIdx >= 0 ? streamIdx : messages.length;
+    const before = messages.slice(0, insertAt);
+    const lastAsstIdx = (() => {
+        for (let i = before.length - 1; i >= 0; i -= 1) {
+            const m = before[i];
+            if (m.role === 'assistant' && !m.isStreaming && Boolean(m.content?.trim()))
+                return i;
+        }
+        return -1;
+    })();
+    const lastUserIdx = (() => {
+        for (let i = before.length - 1; i >= 0; i -= 1) {
+            if (before[i].role === 'user')
+                return i;
+        }
+        return -1;
+    })();
+    const hasUserForTurn = lastUserIdx >= 0 && lastUserIdx > lastAsstIdx;
+    const trimmed = userText.trim();
+    const displayText = trimmed || VOICE_USER_INPUT_PLACEHOLDER;
+    if (hasUserForTurn) {
+        const existing = before[lastUserIdx];
+        const shouldUpgrade = trimmed &&
+            existing.content !== trimmed &&
+            (existing.content === VOICE_USER_INPUT_PLACEHOLDER || !existing.content.trim());
+        if (!shouldUpgrade)
+            return messages;
+        const upgraded = before.map((m, i) => i === lastUserIdx
+            ? {
+                ...m,
+                content: trimmed,
+                id: userMessageId ?? m.id,
+                metadata: userMessageId ? undefined : m.metadata,
+            }
+            : m);
+        return [...upgraded, ...messages.slice(insertAt)];
+    }
+    const userMsg = {
+        id: userMessageId ?? `voice-user-${Date.now()}`,
+        role: 'user',
+        content: displayText,
+        timestamp: new Date().toISOString(),
+        metadata: userMessageId ? undefined : metaForPlaceholder,
+    };
+    const next = [...messages];
+    next.splice(insertAt, 0, userMsg);
+    return next;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytexbyte/nxtlinq-ai-agent-ui-react-development",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Official React Web UI for nxtlinq AI Agent — drop-in chat widget",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,8 +38,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@bytexbyte/nxtlinq-ai-agent-core-development": "0.3.8",
-    "@bytexbyte/nxtlinq-ai-agent-web-development": "0.1.1",
+    "@bytexbyte/nxtlinq-ai-agent-core-development": "0.3.9",
+    "@bytexbyte/nxtlinq-ai-agent-web-development": "0.1.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",