@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.4.0 → 0.4.2

package/src/ui/ChatBotHeader.tsx

@@ -121,21 +121,27 @@ export const ChatBotHeader: React.FC<ChatBotHeaderProps> = ({
           z-index: 2 !important;
           display: flex !important;
           justify-content: space-between !important;
-          align-items: center !important;
+          align-items: flex-start !important;
           width: 100% !important;
           pointer-events: none !important;
         `}>
           <div css={css`
             display: flex !important;
             align-items: center !important;
+            flex-wrap: wrap !important;
+            row-gap: 8px !important;
             gap: 10px !important;
             min-width: 0 !important;
+            flex: 1 1 auto !important;
+            padding-top: 2px !important;
             pointer-events: none !important;
           `}>
-            <h3 css={headerTitle}>AI Agent</h3>
+            <h3 css={[headerTitle, css`flex-shrink: 0 !important;`]}>AI Agent</h3>
             {metaChips}
           </div>
-          {actions}
+          <div css={css`flex-shrink: 0 !important;`}>
+            {actions}
+          </div>
         </div>
       )}
     </div>

package/src/ui/ChatBotUI.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import * as React from 'react';
+import { hasRecordedWalletVerification } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import { useDraggable, useLocalStorage, useResizable, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
 import { useChatBot } from '../context/ChatBotContext';
 import { ChatBotHeader } from './ChatBotHeader';
@@ -33,6 +34,12 @@ import {
 const MOBILE_BREAKPOINT = 768;
 const MOBILE_EDGE_MARGIN = 12;
 const MOBILE_FAB_POSITION = { right: MOBILE_EDGE_MARGIN, bottom: MOBILE_EDGE_MARGIN } as const;
+// Below this widget width, the desktop header's single-row layout (title + model/PII chips +
+// voice/settings/close actions, all in one line) has no room left and the chips start
+// overlapping the actions. The user can drag the window this narrow (MIN_WIDTH is 320px) even
+// on a wide desktop viewport, so this must be driven by the widget's own width, not just
+// window.innerWidth — falling back to the same stacked layout used on mobile viewports.
+const HEADER_COMPACT_WIDTH = 420;
 
 const isMobileViewport = (): boolean =>
   typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
@@ -123,6 +130,7 @@ export const ChatBotUI: React.FC = () => {
   const { position, handleDragStart, isDragging, updatePosition } = useDraggable(dimensions);
 
   const [mobileLayout, setMobileLayout] = React.useState(isMobileViewport);
+  const headerCompactLayout = mobileLayout || dimensions.width < HEADER_COMPACT_WIDTH;
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
     const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
@@ -154,7 +162,8 @@ export const ChatBotUI: React.FC = () => {
   const urlParams = new URLSearchParams(window.location.search);
   const hasBerifymeToken = urlParams.get('token') && urlParams.get('method') === 'berifyme';
 
-  const isWalletVerifiedWithBerifyme = walletInfo?.id && walletInfo?.method === 'berifyme';
+  const hasRecordedVerification = Boolean(walletInfo?.id)
+    && hasRecordedWalletVerification(walletInfo);
 
   // Helper function to update IDV suggestion state based on storage value
   const updateIDVSuggestionState = React.useCallback((dismissedValue: string | null) => {
@@ -214,7 +223,7 @@ export const ChatBotUI: React.FC = () => {
     const shouldShowBanner = hitAddress &&
       !props.requireWalletIDVVerification &&
       !hasBerifymeToken &&
-      !isWalletVerifiedWithBerifyme &&
+      !hasRecordedVerification &&
       !isNeedSignInWithWallet;
 
     if (shouldShowBanner) {
@@ -222,7 +231,7 @@ export const ChatBotUI: React.FC = () => {
         const shouldShowBannerAfterDelay = hitAddress &&
           !props.requireWalletIDVVerification &&
           !hasBerifymeToken &&
-          !isWalletVerifiedWithBerifyme &&
+          !hasRecordedVerification &&
           !isNeedSignInWithWallet;
 
         if (shouldShowBannerAfterDelay) {
@@ -709,7 +718,7 @@ export const ChatBotUI: React.FC = () => {
         )}
 
         <ChatBotHeader
-          mobileLayout={mobileLayout}
+          mobileLayout={headerCompactLayout}
           isDragging={isDragging}
           onDragStart={handleDragStart}
           isVoiceMode={isVoiceMode}
@@ -721,7 +730,7 @@ export const ChatBotUI: React.FC = () => {
           onClose={handleClose}
         />
 
-        {showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (
+        {showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !hasRecordedVerification && (
           <div
             data-idv-banner
             css={idvBanner}>

package/src/ui/MessageList.tsx

@@ -330,6 +330,8 @@ export const MessageList: React.FC = () => {
     availableModels,
     serviceId,
     piiDisplayMode,
+    setShowPermissionForm,
+    setIsPermissionFormOpen,
   } = useChatBot();
   const messagesEndRef = React.useRef<HTMLDivElement>(null);
 
@@ -367,6 +369,9 @@ export const MessageList: React.FC = () => {
           }
         }
       }
+    } else if (buttonType === 'verifyWallet') {
+      setIsPermissionFormOpen(true);
+      setShowPermissionForm(true);
     } else if (buttonType === 'continue') {
       const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
       if (lastUserMsg && lastUserMsg.content) {
@@ -672,6 +677,7 @@ export const MessageList: React.FC = () => {
                   {isAutoConnecting ? 'Connecting...' :
                     message.button === 'connectWallet' ? (Boolean(hitAddress) ? 'Connected' : walletTextUtils.getWalletText('Connect Wallet', serviceId)) :
                       message.button === 'signIn' ? (!isNeedSignInWithWallet ? 'Signed In' : 'Sign In') :
+                        message.button === 'verifyWallet' ? 'Verify Wallet' :
                         message.button === 'continue' ? 'Continue' :
                           message.button === 'enableAIT' ?
                             ((isAITLoading || isAITEnabling) ? 'Enabling...' :

package/src/ui/PermissionForm.tsx

@@ -3,6 +3,7 @@ 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 { hasRecordedWalletVerification } from '@bytexbyte/nxtlinq-ai-agent-core-development';
 import { actionButton, modalOverlay } from './styles/isolatedStyles';
 
 interface PermissionFormProps {
@@ -103,13 +104,10 @@ export const PermissionForm: React.FC<PermissionFormProps> = ({ onClose }) => {
 
   // Check if wallet IDV verification is required based on configuration
   const requireWalletIDVVerification = props.requireWalletIDVVerification ?? true; // Default to true
-  const isWalletVerified = Boolean(walletInfo?.id);
-  const isWalletVerifiedWithBerifyme = walletInfo?.method === 'berifyme';
-
-  // Show verification prompt if:
-  // 1. IDV verification is required AND wallet is not verified, OR
-  // 2. IDV verification is required AND wallet is verified but not with Berifyme
-  const shouldShowVerificationPrompt = requireWalletIDVVerification && (!isWalletVerified || !isWalletVerifiedWithBerifyme);
+  // Any recorded verification source is valid. Custom additionally requires
+  // its explicit username evidence so synthetic AIT-provisioned rows do not count.
+  const shouldShowVerificationPrompt = requireWalletIDVVerification
+    && (!walletInfo?.id || !hasRecordedWalletVerification(walletInfo));
 
   const handleSave = async () => {
     setIsSaving(true);
@@ -415,10 +413,7 @@ export const PermissionForm: React.FC<PermissionFormProps> = ({ onClose }) => {
             font-size: 16px !important;
             color: #666 !important;
           `}>
-            {isWalletVerified && !isWalletVerifiedWithBerifyme
-              ? walletTextUtils.getWalletText('Your wallet is verified with custom method, but Berify.me verification is required to continue.', serviceId)
-              : walletTextUtils.getWalletText('Please verify your wallet with Berify.me to continue', serviceId)
-            }
+            {walletTextUtils.getWalletText('Please verify your wallet identity to continue', serviceId)}
           </p>
           <button
             onClick={() => onVerifyWallet('berifyme')}
@@ -629,4 +624,4 @@ export const PermissionForm: React.FC<PermissionFormProps> = ({ onClose }) => {
       )}
     </div>
   );
-}; 
+};

package/src/ui/styles/isolatedStyles.ts

@@ -252,6 +252,7 @@ export const headerTitle = css`
   font-weight: 600 !important;
   color: white !important;
   font-family: inherit !important;
+  white-space: nowrap !important;
 `;
 
 // Header button styles

package/dist/NxtlinqAgentChat.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { NxtlinqAgentChatProps } from './types';
-/**
- * Drop-in React Web assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-web-development`.
- *
- * @example
- * ```tsx
- * import { NxtlinqAgentChat } from '@bytexbyte/nxtlinq-ai-agent-ui-react-development';
- *
- * export default function Page() {
- *   return (
- *     <NxtlinqAgentChat
- *       style={{ height: '100vh' }}
- *       serviceId="..."
- *       apiKey="..."
- *       apiSecret="..."
- *       environment="staging"
- *       pseudoId={userId}
- *       loadHistoryOnMount
- *     />
- *   );
- * }
- * ```
- */
-export declare function NxtlinqAgentChat({ title, placeholder, presetMessages, loadHistoryOnMount, historyLast, enableVoice, enableFileUpload, startInVoiceMode, startWithMicMuted, holdMicDuringAssistant, theme, style, headerStyle, onMessage, onError, onToolUse, children, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }: NxtlinqAgentChatProps): React.ReactElement;
-//# sourceMappingURL=NxtlinqAgentChat.d.ts.map

package/dist/NxtlinqAgentChat.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NxtlinqAgentChat.d.ts","sourceRoot":"","sources":["../src/NxtlinqAgentChat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,cAAc,EACd,kBAA0B,EAC1B,WAAW,EACX,WAAkB,EAClB,gBAAuB,EACvB,gBAAwB,EACxB,iBAAwB,EACxB,sBAA6B,EAC7B,KAAK,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,qBAAqB,EACrB,GAAG,WAAW,EACf,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CA6B5C"}

package/dist/NxtlinqAgentChat.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { NxtlinqAgentProvider } from '@bytexbyte/nxtlinq-ai-agent-web-development';
-import { AgentAssistantShell } from './components/AgentAssistantShell';
-/**
- * Drop-in React Web assistant UI wired to `@bytexbyte/nxtlinq-ai-agent-web-development`.
- *
- * @example
- * ```tsx
- * import { NxtlinqAgentChat } from '@bytexbyte/nxtlinq-ai-agent-ui-react-development';
- *
- * export default function Page() {
- *   return (
- *     <NxtlinqAgentChat
- *       style={{ height: '100vh' }}
- *       serviceId="..."
- *       apiKey="..."
- *       apiSecret="..."
- *       environment="staging"
- *       pseudoId={userId}
- *       loadHistoryOnMount
- *     />
- *   );
- * }
- * ```
- */
-export function NxtlinqAgentChat({ title, placeholder, presetMessages, loadHistoryOnMount = false, historyLast, enableVoice = true, enableFileUpload = true, startInVoiceMode = false, startWithMicMuted = true, holdMicDuringAssistant = true, theme, style, headerStyle, onMessage, onError, onToolUse, children, fetchImpl, getTimezone, resetOnIdentityChange, ...agentConfig }) {
-    return (_jsxs(NxtlinqAgentProvider, { fetchImpl: fetchImpl, getTimezone: getTimezone, resetOnIdentityChange: resetOnIdentityChange, onMessage: onMessage, onError: onError, onToolUse: onToolUse, ...agentConfig, children: [_jsx(AgentAssistantShell, { title: title, placeholder: placeholder, presetMessages: presetMessages, loadHistoryOnMount: loadHistoryOnMount, historyLast: historyLast, enableVoice: enableVoice, enableFileUpload: enableFileUpload, startInVoiceMode: startInVoiceMode, startWithMicMuted: startWithMicMuted, holdMicDuringAssistant: holdMicDuringAssistant, theme: theme, style: style, headerStyle: headerStyle }), children] }));
-}

package/dist/components/AgentAssistantShell.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { NxtlinqAgentChatProps } from '../types';
-export type AgentAssistantShellProps = Pick<NxtlinqAgentChatProps, 'title' | 'placeholder' | 'presetMessages' | 'enableVoice' | 'enableFileUpload' | 'theme' | 'style' | 'headerStyle' | 'loadHistoryOnMount' | 'historyLast' | 'startInVoiceMode' | 'startWithMicMuted' | 'holdMicDuringAssistant'>;
-export declare function AgentAssistantShell(props: AgentAssistantShellProps): React.ReactElement;
-//# sourceMappingURL=AgentAssistantShell.d.ts.map

package/dist/components/AgentAssistantShell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentAssistantShell.d.ts","sourceRoot":"","sources":["../../src/components/AgentAssistantShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAOtD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,qBAAqB,EACnB,OAAO,GACP,aAAa,GACb,gBAAgB,GAChB,aAAa,GACb,kBAAkB,GAClB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,aAAa,GACb,kBAAkB,GAClB,mBAAmB,GACnB,wBAAwB,CAC3B,CAAC;AA2DF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAiBvF"}

package/dist/components/AgentAssistantShell.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { AgentAssistantProvider, useAgentAssistant, } from '../context/AgentAssistantContext';
-import { AgentComposer } from './AgentComposer';
-import { AgentMessageList } from './AgentMessageList';
-import { AgentRemoteAudio } from './AgentRemoteAudio';
-import { AgentVoiceBar } from './AgentVoiceBar';
-import { PresetMessageChips } from './PresetMessageChips';
-function AgentAssistantInner({ title, headerStyle, style, loadHistoryOnMount, historyLast, startInVoiceMode, }) {
-    const { theme, loadHistory, startVoice, isVoiceAvailable } = useAgentAssistant();
-    const [historyReady, setHistoryReady] = useState(!loadHistoryOnMount);
-    const voiceAutoStartRef = useRef(false);
-    useEffect(() => {
-        if (loadHistoryOnMount) {
-            void loadHistory({ last: historyLast ?? 50 }).finally(() => setHistoryReady(true));
-        }
-    }, [loadHistory, loadHistoryOnMount, historyLast]);
-    useEffect(() => {
-        if (!startInVoiceMode || !isVoiceAvailable || voiceAutoStartRef.current)
-            return;
-        voiceAutoStartRef.current = true;
-        void startVoice();
-    }, [startInVoiceMode, isVoiceAvailable, startVoice]);
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            minHeight: 0,
-            backgroundColor: theme.colors.background,
-            ...style,
-        }, children: [_jsx("header", { style: {
-                    padding: theme.spacing.md,
-                    borderBottom: `1px solid ${theme.colors.border}`,
-                    backgroundColor: theme.colors.surface,
-                    fontSize: theme.typography.titleSize,
-                    fontWeight: 600,
-                    color: theme.colors.assistantText,
-                    ...headerStyle,
-                }, children: title ?? 'AI Assistant' }), _jsx(PresetMessageChips, {}), historyReady ? _jsx(AgentMessageList, {}) : _jsx("div", { style: { flex: 1 } }), _jsx(AgentVoiceBar, {}), _jsx(AgentComposer, {}), _jsx(AgentRemoteAudio, {})] }));
-}
-export function AgentAssistantShell(props) {
-    return (_jsx(AgentAssistantProvider, { ui: {
-            title: props.title,
-            placeholder: props.placeholder,
-            presetMessages: props.presetMessages,
-            enableVoice: props.enableVoice,
-            enableFileUpload: props.enableFileUpload,
-            theme: props.theme,
-            startWithMicMuted: props.startWithMicMuted,
-            holdMicDuringAssistant: props.holdMicDuringAssistant,
-        }, children: _jsx(AgentAssistantInner, { ...props }) }));
-}

package/dist/components/AgentComposer.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function AgentComposer(): React.ReactElement | null;
-//# sourceMappingURL=AgentComposer.d.ts.map

package/dist/components/AgentComposer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentComposer.d.ts","sourceRoot":"","sources":["../../src/components/AgentComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,aAAa,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAkIzD"}

package/dist/components/AgentComposer.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import React from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-export function AgentComposer() {
-    const { theme, placeholder, inputText, setInputText, sendText, isLoading, isVoiceAvailable, interactionMode, startVoice, isVoiceConnecting, enableFileUpload, sendMessage, } = useAgentAssistant();
-    const fileInputRef = React.useRef(null);
-    if (interactionMode === 'voice') {
-        return null;
-    }
-    const handleFiles = async (files) => {
-        if (!files?.length)
-            return;
-        const { fileToAttachment } = await import('@bytexbyte/nxtlinq-ai-agent-web-development');
-        const attachments = await Promise.all(Array.from(files).map((file) => fileToAttachment(file)));
-        await sendMessage(attachments.length ? `Uploaded ${attachments.length} file(s)` : '', { attachments });
-        if (fileInputRef.current)
-            fileInputRef.current.value = '';
-    };
-    return (_jsxs("div", { style: {
-            borderTop: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.surface,
-            padding: theme.spacing.md,
-        }, children: [_jsxs("div", { style: { display: 'flex', gap: theme.spacing.sm, alignItems: 'flex-end' }, children: [enableFileUpload ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isLoading, style: {
-                                    width: 36,
-                                    height: 36,
-                                    borderRadius: theme.radius.button,
-                                    border: `1px solid ${theme.colors.border}`,
-                                    backgroundColor: theme.colors.surface,
-                                    cursor: 'pointer',
-                                }, "aria-label": "Upload file", children: "+" }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: "image/*,.pdf,.doc,.docx,.txt", style: { display: 'none' }, onChange: (e) => void handleFiles(e.target.files) })] })) : null, _jsx("textarea", { value: inputText, onChange: (e) => setInputText(e.target.value), placeholder: placeholder, rows: 2, disabled: isLoading, maxLength: 4000, style: {
-                            flex: 1,
-                            resize: 'none',
-                            border: `1px solid ${theme.colors.border}`,
-                            borderRadius: theme.radius.panel,
-                            padding: theme.spacing.sm,
-                            fontSize: theme.typography.bodySize,
-                            color: theme.colors.assistantText,
-                        } }), _jsx("button", { type: "button", onClick: () => void sendText(), disabled: isLoading || !inputText.trim(), style: {
-                            backgroundColor: theme.colors.primary,
-                            color: theme.colors.primaryText,
-                            border: 'none',
-                            borderRadius: theme.radius.button,
-                            padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
-                            fontWeight: 600,
-                            opacity: isLoading || !inputText.trim() ? 0.5 : 1,
-                            cursor: 'pointer',
-                        }, children: "Send" })] }), isVoiceAvailable ? (_jsx("button", { type: "button", onClick: () => {
-                    startVoice().catch((err) => {
-                        console.warn('[nxtlinq] startVoice failed:', err);
-                    });
-                }, disabled: isVoiceConnecting, style: {
-                    display: 'block',
-                    margin: `${theme.spacing.sm}px auto 0`,
-                    border: 'none',
-                    background: 'none',
-                    color: theme.colors.primary,
-                    fontSize: theme.typography.captionSize,
-                    cursor: 'pointer',
-                }, children: isVoiceConnecting ? 'Connecting voice…' : 'Switch to voice mode' })) : null] }));
-}

package/dist/components/AgentMessageList.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function AgentMessageList(): React.ReactElement;
-//# sourceMappingURL=AgentMessageList.d.ts.map

package/dist/components/AgentMessageList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentMessageList.d.ts","sourceRoot":"","sources":["../../src/components/AgentMessageList.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAyCjD,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,YAAY,CAmCrD"}

package/dist/components/AgentMessageList.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-function MessageBubble({ message }) {
-    const { theme } = useAgentAssistant();
-    const isUser = message.role === 'user';
-    const displayText = message.partialContent && message.isStreaming
-        ? message.partialContent
-        : message.content;
-    return (_jsx("div", { style: {
-            display: 'flex',
-            justifyContent: isUser ? 'flex-end' : 'flex-start',
-            marginBottom: theme.spacing.sm,
-        }, children: _jsxs("div", { style: {
-                maxWidth: '85%',
-                padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
-                borderRadius: theme.radius.bubble,
-                backgroundColor: isUser ? theme.colors.userBubble : theme.colors.assistantBubble,
-                color: isUser ? theme.colors.userText : theme.colors.assistantText,
-                fontSize: theme.typography.bodySize,
-                whiteSpace: 'pre-wrap',
-            }, children: [displayText || ' ', message.error ? (_jsx("div", { style: { color: theme.colors.error, fontSize: theme.typography.captionSize }, children: message.error })) : null] }) }));
-}
-export function AgentMessageList() {
-    const { messages, isLoading, theme } = useAgentAssistant();
-    const endRef = useRef(null);
-    useEffect(() => {
-        endRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [messages.length, messages[messages.length - 1]?.content, messages[messages.length - 1]?.partialContent]);
-    return (_jsxs("div", { style: {
-            flex: 1,
-            minHeight: 0,
-            overflowY: 'auto',
-            padding: theme.spacing.md,
-            backgroundColor: theme.colors.background,
-        }, children: [messages.length === 0 ? (_jsx("p", { style: { textAlign: 'center', color: theme.colors.mutedText, marginTop: 40 }, children: "Send a message to start the conversation." })) : (messages.map((message) => (_jsx(MessageBubble, { message: message }, message.id)))), isLoading ? (_jsx("p", { style: { color: theme.colors.mutedText, fontSize: theme.typography.captionSize }, children: "Thinking\u2026" })) : null, _jsx("div", { ref: endRef })] }));
-}

package/dist/components/AgentRemoteAudio.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-/** Plays assistant WebRTC remote audio with retry until stream is ready. */
-export declare function AgentRemoteAudio(): React.ReactElement | null;
-//# sourceMappingURL=AgentRemoteAudio.d.ts.map

package/dist/components/AgentRemoteAudio.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentRemoteAudio.d.ts","sourceRoot":"","sources":["../../src/components/AgentRemoteAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,4EAA4E;AAC5E,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CA6B5D"}

package/dist/components/AgentRemoteAudio.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-/** Plays assistant WebRTC remote audio with retry until stream is ready. */
-export function AgentRemoteAudio() {
-    const { getRemoteAudioStream, isVoiceActive, isVoiceChannelReady } = useAgentAssistant();
-    const audioRef = useRef(null);
-    useEffect(() => {
-        const audio = audioRef.current;
-        if (!audio || !isVoiceActive)
-            return;
-        let cancelled = false;
-        const attach = () => {
-            if (cancelled)
-                return;
-            const stream = getRemoteAudioStream();
-            if (!stream)
-                return;
-            audio.srcObject = stream;
-            void audio.play().catch(() => undefined);
-        };
-        attach();
-        const timer = window.setInterval(attach, 120);
-        return () => {
-            cancelled = true;
-            window.clearInterval(timer);
-            audio.pause();
-            audio.srcObject = null;
-        };
-    }, [getRemoteAudioStream, isVoiceActive, isVoiceChannelReady]);
-    if (!isVoiceActive)
-        return null;
-    return _jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true, style: { display: 'none' } });
-}

package/dist/components/AgentVoiceBar.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function AgentVoiceBar(): React.ReactElement | null;
-//# sourceMappingURL=AgentVoiceBar.d.ts.map

package/dist/components/AgentVoiceBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgentVoiceBar.d.ts","sourceRoot":"","sources":["../../src/components/AgentVoiceBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAsC3C,wBAAgB,aAAa,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAsIzD"}

package/dist/components/AgentVoiceBar.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAgentAssistant, voiceStatusLabel, } from '../context/AgentAssistantContext';
-function statusDotColor(status, theme) {
-    switch (status) {
-        case 'listening':
-            return theme.colors.voiceActive;
-        case 'speaking':
-            return theme.colors.voiceSpeaking;
-        case 'idle':
-            return theme.colors.mutedText;
-        default:
-            return theme.colors.primary;
-    }
-}
-function MicIcon({ color }) {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: color, "aria-hidden": true, children: _jsx("path", { d: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" }) }));
-}
-function MicOffIcon() {
-    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "#ef4444", "aria-hidden": true, children: _jsx("path", { d: "M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3s-3 1.34-3 3v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z" }) }));
-}
-export function AgentVoiceBar() {
-    const { theme, interactionMode, voiceStatus, voiceSessionId, isVoiceConnecting, isVoiceChannelReady, stopVoice, isVoiceAvailable, isMicMuted, isMicHeldForAssistant, toggleVoiceMicMute, } = useAgentAssistant();
-    const returnToTextMode = useCallback(() => {
-        void stopVoice();
-    }, [stopVoice]);
-    if (!isVoiceAvailable)
-        return null;
-    if (interactionMode !== 'voice' && !isVoiceConnecting)
-        return null;
-    const showConnecting = isVoiceConnecting;
-    const awaitingChannel = Boolean(voiceSessionId) &&
-        !isVoiceConnecting &&
-        !isVoiceChannelReady &&
-        voiceStatus === 'idle';
-    const statusHint = showConnecting
-        ? 'Tap Back to text mode below to cancel'
-        : awaitingChannel
-            ? 'Waiting for voice channel…'
-            : isMicHeldForAssistant
-                ? 'Assistant is responding — tap mic to interrupt and speak'
-                : isMicMuted
-                    ? 'Mic is off — tap the mic when ready to speak'
-                    : voiceStatus === 'listening'
-                        ? 'Start speaking'
-                        : voiceStatus === 'speaking'
-                            ? 'Assistant is speaking…'
-                            : voiceStatus === 'thinking'
-                                ? 'Thinking…'
-                                : '';
-    return (_jsxs("div", { style: {
-            borderTop: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.surface,
-            padding: theme.spacing.md,
-        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsxs("div", { style: {
-                            flex: 1,
-                            minWidth: 0,
-                            border: `1px solid ${theme.colors.border}`,
-                            borderRadius: 12,
-                            backgroundColor: theme.colors.background,
-                            padding: '8px 10px',
-                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: {
-                                            width: 8,
-                                            height: 8,
-                                            borderRadius: 4,
-                                            backgroundColor: statusDotColor(voiceStatus, theme),
-                                            flexShrink: 0,
-                                        } }), _jsx("span", { style: {
-                                            color: theme.colors.assistantText,
-                                            fontSize: theme.typography.captionSize,
-                                            fontWeight: 600,
-                                        }, children: showConnecting || awaitingChannel ? 'Connecting' : voiceStatusLabel(voiceStatus) }), showConnecting ? (_jsx("span", { style: { color: theme.colors.mutedText, fontSize: theme.typography.captionSize }, children: "\u2026" })) : null] }), statusHint ? (_jsx("p", { style: {
-                                    margin: '4px 0 0',
-                                    color: theme.colors.mutedText,
-                                    fontSize: theme.typography.captionSize - 1,
-                                }, children: statusHint })) : null] }), _jsx("button", { type: "button", onClick: toggleVoiceMicMute, disabled: showConnecting || awaitingChannel, style: {
-                            border: 'none',
-                            background: 'none',
-                            padding: 8,
-                            cursor: showConnecting || awaitingChannel ? 'not-allowed' : 'pointer',
-                            opacity: showConnecting || awaitingChannel ? 0.45 : 1,
-                        }, "aria-label": isMicMuted ? 'Unmute microphone' : 'Mute microphone', children: isMicMuted ? _jsx(MicOffIcon, {}) : _jsx(MicIcon, { color: theme.colors.assistantText }) })] }), _jsx("button", { type: "button", onClick: returnToTextMode, style: {
-                    display: 'block',
-                    margin: `${theme.spacing.sm}px auto 0`,
-                    border: 'none',
-                    background: 'none',
-                    color: theme.colors.primary,
-                    fontSize: theme.typography.captionSize,
-                    cursor: 'pointer',
-                }, children: "Back to text mode" })] }));
-}

package/dist/components/PresetMessageChips.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function PresetMessageChips(): React.ReactElement | null;
-//# sourceMappingURL=PresetMessageChips.d.ts.map

package/dist/components/PresetMessageChips.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresetMessageChips.d.ts","sourceRoot":"","sources":["../../src/components/PresetMessageChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,kBAAkB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAoC9D"}

package/dist/components/PresetMessageChips.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useAgentAssistant } from '../context/AgentAssistantContext';
-export function PresetMessageChips() {
-    const { presetMessages, selectPreset, theme, interactionMode } = useAgentAssistant();
-    if (!presetMessages.length || interactionMode === 'voice') {
-        return null;
-    }
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: theme.spacing.sm,
-            padding: `${theme.spacing.sm}px ${theme.spacing.md}px`,
-            borderBottom: `1px solid ${theme.colors.border}`,
-        }, children: presetMessages.map((preset, index) => (_jsx("button", { type: "button", onClick: () => void selectPreset(preset), style: {
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: theme.radius.button,
-                padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
-                backgroundColor: theme.colors.surface,
-                color: theme.colors.assistantText,
-                fontSize: theme.typography.captionSize,
-                cursor: 'pointer',
-            }, children: preset.text }, `${preset.text}-${index}`))) }));
-}