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

package/dist/context/ChatBotContext.js

@@ -0,0 +1,2908 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { ethers } from 'ethers';
+import stringify from 'fast-json-stable-stringify';
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { createNxtlinqApi, setApiHosts, synthesizeSpeechToBuffer, useLocalStorage, useSessionStorage, useSpeechToTextFromMic, useVoiceMode, metakeepClient, getEthers, sleep, walletTextUtils, } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+const MIC_ENABLED_SESSION_KEY = 'chatbot-mic-enabled';
+const ChatBotContext = React.createContext(undefined);
+export const useChatBot = () => {
+    const context = React.useContext(ChatBotContext);
+    if (!context) {
+        throw new Error('useChatBot must be used within a ChatBotProvider');
+    }
+    return context;
+};
+export const ChatBotProvider = ({ onMessage, onError, onToolUse, presetMessages = [], placeholder = 'Type a message...', className = '', maxRetries = 3, retryDelay = 2000, serviceId, apiKey, apiSecret, environment = 'production', onVerifyWallet, permissionGroup, children, 
+// AI Model related attributes
+onModelChange, 
+// Storage mode configuration
+storageMode = "local-storage", 
+// Wallet verification configuration
+requireWalletIDVVerification = true, isSemiAutomaticMode = false, 
+// Custom user identity information
+customUserInfo, 
+// Custom username for wallet verification
+customUsername, 
+// IDV suggestion banner configuration
+idvBannerDismissSeconds = 86400, 
+// 24 hours in seconds
+isStopRecordingOnSend = false, 
+// Custom error message to display in chat
+customError, 
+// PII display mode
+piiDisplayMode = 'redacted', }) => {
+    // Set API hosts immediately based on environment (before any API calls)
+    setApiHosts(environment);
+    const nxtlinqApi = React.useMemo(() => createNxtlinqApi(apiKey, apiSecret), [apiKey, apiSecret]);
+    const apiKeyRef = React.useRef(apiKey);
+    const apiSecretRef = React.useRef(apiSecret);
+    const clientTtsVoiceRef = React.useRef(undefined);
+    React.useEffect(() => {
+        apiKeyRef.current = apiKey;
+        apiSecretRef.current = apiSecret;
+    }, [apiKey, apiSecret]);
+    // Custom hook
+    const { isMicEnabled, transcript, partialTranscript, start: startRecording, stop: stopRecording, clear: clearRecording } = useSpeechToTextFromMic({
+        apiKey,
+        apiSecret
+    });
+    // Messages: Use storage based on storageMode to support cross-tab sync (local-storage) or session isolation (session-storage)
+    const [messages, setMessages] = storageMode === "local-storage"
+        ? useLocalStorage('chatbot-messages', [])
+        : useSessionStorage('chatbot-messages', []);
+    const [isOpen, setIsOpen] = storageMode === "session-storage"
+        ? useSessionStorage('chatbot-is-open', false)
+        : React.useState(false);
+    const [inputValue, setInputValue] = React.useState('');
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [hitAddress, setHitAddress] = React.useState(null);
+    const [ait, setAit] = React.useState(null);
+    const [permissions, setPermissions] = React.useState([]);
+    const [availablePermissions, setAvailablePermissions] = React.useState([]);
+    const [showPermissionForm, setShowPermissionForm] = React.useState(false);
+    const [isPermissionFormOpen, setIsPermissionFormOpen] = React.useState(false);
+    const [isAITLoading, setIsAITLoading] = React.useState(false);
+    const [isDisabled, setIsDisabled] = React.useState(true);
+    const [signer, setSigner] = React.useState(null);
+    const [walletInfo, setWalletInfo] = React.useState(null);
+    const [isWalletLoading, setIsWalletLoading] = React.useState(false);
+    const [isAutoConnecting, setIsAutoConnecting] = React.useState(false);
+    // Persistent data (always use localStorage)
+    const [nxtlinqAITServiceAccessToken, setNxtlinqAITServiceAccessToken] = useLocalStorage('nxtlinqAITServiceAccessToken', '');
+    const [pseudoId, setPseudoId] = useLocalStorage('pseudoId', uuidv4());
+    // Suggestions: Use storage based on storageMode to support cross-tab sync (local-storage) or session isolation (session-storage)
+    const [suggestions, setSuggestions] = storageMode === "local-storage"
+        ? useLocalStorage('chatbot-suggestions', presetMessages)
+        : useSessionStorage('chatbot-suggestions', presetMessages);
+    const [isAITEnabling, setIsAITEnabling] = React.useState(false);
+    const [isAwaitingMicGesture, setIsAwaitingMicGesture] = React.useState(false);
+    // autoSendEnabled: Always use localStorage (do not sync across tabs to avoid conflicts with speech-to-text)
+    const [autoSendEnabled, setAutoSendEnabled] = useLocalStorage('chatbot-auto-send-enabled', true);
+    // Speech related state
+    const [textToSpeechEnabled, setTextToSpeechEnabled] = useLocalStorage('chatbot-text-to-speech-enabled', false);
+    const [preferredChatMode, setPreferredChatMode] = useLocalStorage('chatbot-active-mode', 'text');
+    const [speechingIndex, setSpeechingIndex] = React.useState(undefined);
+    // Speech related refs
+    const audioCtxRef = React.useRef(null);
+    const audioSourceRef = React.useRef(null);
+    const audioElementRef = React.useRef(null);
+    const speechingRef = React.useRef(false);
+    const [isTtsProcessing, setIsTtsProcessing] = React.useState(false);
+    const [requiresGesture, setRequiresGesture] = React.useState(false);
+    const pendingTtsRef = React.useRef(null);
+    /** Azure Speech STT：每次麥克風成功開啟時記錄，供寫入後端 usage log（開麥→送出） */
+    const messagesRef = React.useRef(messages);
+    messagesRef.current = messages;
+    const micSessionStartForLogRef = React.useRef(null);
+    // Clean up stale PII scanning state on mount (e.g. page refresh during active SSE)
+    React.useEffect(() => {
+        setMessages(prev => {
+            const hasStale = prev.some(m => m.piiStatus === 'scanning');
+            if (!hasStale)
+                return prev;
+            return prev.map(m => m.piiStatus === 'scanning'
+                ? { ...m, piiStatus: undefined, piiStep: undefined }
+                : m);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Use refs to get latest state values in hasPermission function
+    const hitAddressRef = React.useRef(hitAddress);
+    const aitRef = React.useRef(ait);
+    const permissionsRef = React.useRef(permissions);
+    const nxtlinqAITServiceAccessTokenRef = React.useRef(nxtlinqAITServiceAccessToken);
+    const signerRef = React.useRef(signer);
+    // Helper function to combine customUsername with Adilas customUserInfo
+    const getFinalCustomUsername = React.useCallback((username) => {
+        if (!username)
+            return username;
+        // For Adilas: combine customUsername, corpId and serverDomain
+        if (walletTextUtils.isAdilasService(serviceId) && customUserInfo) {
+            const { corpId, serverDomain } = customUserInfo;
+            if (corpId && serverDomain) {
+                // Format: customUsername|(corpId)|[serverDomain]
+                const parts = [username];
+                if (corpId)
+                    parts.push(`(${corpId})`);
+                if (serverDomain)
+                    parts.push(`[${serverDomain}]`);
+                return parts.join('|');
+            }
+        }
+        return username;
+    }, [serviceId, customUserInfo]);
+    // Refs for input value and recording state
+    const isMicEnabledRef = React.useRef(false);
+    const isRestoringRecordingRef = React.useRef(false);
+    const hasSyncedMicStateRef = React.useRef(false);
+    const isReacquiringMicRef = React.useRef(false);
+    const pendingMicAutoStartRef = React.useRef(false);
+    const autoStartGestureCleanupRef = React.useRef(null);
+    const textInputRef = React.useRef(null);
+    const lastPartialRangeRef = React.useRef(null);
+    const lastAutoSentTranscriptRef = React.useRef('');
+    const autoSendTimerRef = React.useRef(null);
+    const lastCustomErrorRef = React.useRef(undefined);
+    function insertPartial(input, partial, caret) {
+        let start = caret;
+        let end = caret;
+        if (lastPartialRangeRef.current) {
+            start = lastPartialRangeRef.current.start;
+            end = lastPartialRangeRef.current.end;
+        }
+        const before = input.slice(0, start);
+        const after = input.slice(end);
+        const next = before + partial + after;
+        const newCaret = start + partial.length;
+        lastPartialRangeRef.current = { start, end: newCaret };
+        return { next, caret: newCaret };
+    }
+    function finalizePartial(input, finalText) {
+        if (!lastPartialRangeRef.current) {
+            return { next: input, caret: input.length };
+        }
+        const { start, end } = lastPartialRangeRef.current;
+        const before = input.slice(0, start);
+        const after = input.slice(end);
+        const next = before + finalText + after;
+        const caret = start + finalText.length;
+        lastPartialRangeRef.current = null;
+        return { next, caret };
+    }
+    function normalizeTranscript(text) {
+        return text
+            .toLowerCase()
+            // Remove period only when NOT between digits (preserve decimals like 130.00)
+            .replace(/(?<!\d)\.(?!\d)/g, '')
+            .replace(/[,!?;:]/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+    // Simple token cleanup function
+    const clearExpiredToken = React.useCallback(() => {
+        try {
+            localStorage.removeItem('nxtlinqAITServiceAccessToken');
+            setNxtlinqAITServiceAccessToken('');
+        }
+        catch (error) {
+            console.error('Error clearing expired token:', error);
+        }
+    }, []);
+    // Internal: Play text-to-speech with retry mechanism
+    const playTextToSpeechWithRetry = React.useCallback(async (text, messageIndex, attempt = 0) => {
+        if (attempt > 2) {
+            console.error('TTS playback failed after retries');
+            setIsTtsProcessing(false);
+            return;
+        }
+        const synth = await synthesizeSpeechToBuffer({
+            text,
+            apiKey: apiKeyRef.current,
+            apiSecret: apiSecretRef.current,
+            settings: clientTtsVoiceRef.current,
+        });
+        if (!synth)
+            throw new Error('Failed to get audio buffer');
+        const bufferData = synth.buffer;
+        const audioMimeType = synth.mimeType;
+        const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        if (isMobileDevice) {
+            const blob = new Blob([bufferData], { type: audioMimeType });
+            const audioUrl = URL.createObjectURL(blob);
+            const audio = new Audio(audioUrl);
+            if ('setSinkId' in HTMLMediaElement.prototype) {
+                try {
+                    const devices = await navigator.mediaDevices?.enumerateDevices?.();
+                    const speakerDevice = devices?.find((d) => d.kind === 'audiooutput' && d.label.toLowerCase().includes('speaker'));
+                    if (speakerDevice)
+                        await audio.setSinkId(speakerDevice.deviceId);
+                    else
+                        await audio.setSinkId('default');
+                }
+                catch (err) {
+                    console.debug('Could not set audio sink:', err);
+                }
+            }
+            audio.volume = 1.0;
+            audioElementRef.current = audio;
+            speechingRef.current = true;
+            if (messageIndex !== undefined)
+                setSpeechingIndex(messageIndex);
+            // Track if onplay has been called to avoid clearing state multiple times
+            let playStarted = false;
+            const clearProcessingState = () => {
+                if (!playStarted) {
+                    playStarted = true;
+                    setIsTtsProcessing(false);
+                }
+            };
+            await new Promise(async (resolve, reject) => {
+                audio.onended = () => {
+                    speechingRef.current = false;
+                    setSpeechingIndex(undefined);
+                    URL.revokeObjectURL(audioUrl);
+                    audioElementRef.current = null;
+                    resolve();
+                };
+                audio.onerror = (error) => {
+                    speechingRef.current = false;
+                    setSpeechingIndex(undefined);
+                    URL.revokeObjectURL(audioUrl);
+                    audioElementRef.current = null;
+                    clearProcessingState();
+                    reject(error);
+                };
+                audio.onplay = () => {
+                    // Clear processing state when audio actually starts playing
+                    setRequiresGesture(false);
+                    clearProcessingState();
+                };
+                // Handle play() promise - some mobile browsers require user interaction
+                audio.play().then(() => {
+                    // Play promise resolved, but wait for onplay event to confirm actual playback
+                    // Don't clear requiresGesture here - let onplay handle it
+                    setTimeout(clearProcessingState, 100);
+                }).catch((playError) => {
+                    // Mark requires gesture and store pending text
+                    setRequiresGesture(true);
+                    pendingTtsRef.current = text;
+                    // Fallback: try WebAudio (AudioContext) playback on mobile
+                    try {
+                        if (audioCtxRef.current === null) {
+                            audioCtxRef.current = new AudioContext();
+                        }
+                        audioSourceRef.current = audioCtxRef.current.createBufferSource();
+                        if (!audioSourceRef.current) {
+                            throw playError;
+                        }
+                        audioCtxRef.current.decodeAudioData(bufferData.slice(0), (decodedBuffer) => {
+                            if (!audioSourceRef.current) {
+                                reject(playError);
+                                return;
+                            }
+                            audioSourceRef.current.buffer = decodedBuffer;
+                            audioSourceRef.current.connect(audioCtxRef.current.destination);
+                            speechingRef.current = true;
+                            clearProcessingState();
+                            audioSourceRef.current.onended = () => {
+                                speechingRef.current = false;
+                                setSpeechingIndex(undefined);
+                                audioSourceRef.current = null;
+                                // cleanup audio element blob URL
+                                URL.revokeObjectURL(audioUrl);
+                                audioElementRef.current = null;
+                                resolve();
+                            };
+                            try {
+                                // Ensure AudioContext is running before starting
+                                if (audioCtxRef.current?.state === 'suspended') {
+                                    audioCtxRef.current.resume().then(() => {
+                                        audioSourceRef.current?.start();
+                                        // Only clear requiresGesture after successfully starting
+                                        setRequiresGesture(false);
+                                    }).catch((resumeErr) => {
+                                        // AudioContext resume failed, keep requiresGesture true
+                                        reject(resumeErr);
+                                    });
+                                }
+                                else {
+                                    audioSourceRef.current.start();
+                                    // Only clear requiresGesture after successfully starting
+                                    setRequiresGesture(false);
+                                }
+                            }
+                            catch (e) {
+                                // start() failed, keep requiresGesture true
+                                reject(e);
+                            }
+                        }, (decodeErr) => {
+                            // If decode also fails, give up
+                            speechingRef.current = false;
+                            setSpeechingIndex(undefined);
+                            URL.revokeObjectURL(audioUrl);
+                            audioElementRef.current = null;
+                            clearProcessingState();
+                            reject(decodeErr);
+                        });
+                    }
+                    catch (fallbackErr) {
+                        // Play failed (e.g., user interaction required)
+                        speechingRef.current = false;
+                        setSpeechingIndex(undefined);
+                        URL.revokeObjectURL(audioUrl);
+                        audioElementRef.current = null;
+                        clearProcessingState();
+                        reject(fallbackErr);
+                    }
+                });
+            });
+            return;
+        }
+        if (audioCtxRef.current === null) {
+            audioCtxRef.current = new AudioContext();
+        }
+        audioSourceRef.current = audioCtxRef.current.createBufferSource();
+        if (!audioSourceRef.current)
+            return;
+        const buffer = await new Promise((resolve, reject) => {
+            if (audioCtxRef.current !== null && bufferData) {
+                audioCtxRef.current.decodeAudioData(bufferData, (decodedBuffer) => resolve(decodedBuffer), (error) => reject(error));
+            }
+            else {
+                reject(new Error('Audio context or buffer data is missing'));
+            }
+        });
+        if (!audioSourceRef.current.buffer) {
+            audioSourceRef.current.buffer = buffer;
+            audioSourceRef.current.connect(audioCtxRef.current.destination);
+            speechingRef.current = true;
+            if (messageIndex !== undefined)
+                setSpeechingIndex(messageIndex);
+            // Clear processing state when audio starts playing
+            setRequiresGesture(false);
+            setIsTtsProcessing(false);
+            await new Promise((resolve) => {
+                audioSourceRef.current.onended = () => {
+                    speechingRef.current = false;
+                    setSpeechingIndex(undefined);
+                    audioSourceRef.current = null;
+                    resolve();
+                };
+                audioSourceRef.current.start();
+            });
+        }
+    }, []);
+    // Update refs when state changes
+    React.useEffect(() => {
+        hitAddressRef.current = hitAddress;
+    }, [hitAddress]);
+    React.useEffect(() => {
+        aitRef.current = ait;
+    }, [ait]);
+    React.useEffect(() => {
+        permissionsRef.current = permissions;
+    }, [permissions]);
+    React.useEffect(() => {
+        nxtlinqAITServiceAccessTokenRef.current = nxtlinqAITServiceAccessToken;
+    }, [nxtlinqAITServiceAccessToken]);
+    React.useEffect(() => {
+        signerRef.current = signer;
+    }, [signer]);
+    React.useEffect(() => {
+        if (!textInputRef.current)
+            return;
+        const el = textInputRef.current;
+        const selStart = el.selectionStart ?? inputValue.length;
+        if (partialTranscript) {
+            const { next, caret } = insertPartial(inputValue, partialTranscript, selStart);
+            setInputValue(next);
+            setTimeout(() => {
+                if (textInputRef.current) {
+                    textInputRef.current.selectionStart = caret;
+                    textInputRef.current.selectionEnd = caret;
+                }
+            }, 0);
+        }
+    }, [partialTranscript]);
+    React.useEffect(() => {
+        if (!transcript)
+            return;
+        if (!textInputRef.current)
+            return;
+        // 每段新辨識結果重設 STT 計時起點（長期開麥、多輪自動送出時，每則請求各自一段，避免只記到第一則）
+        micSessionStartForLogRef.current = performance.now();
+        const { next, caret } = finalizePartial(inputValue, transcript);
+        const normalizedText = normalizeTranscript(next);
+        setInputValue(normalizedText);
+        setTimeout(() => {
+            if (textInputRef.current) {
+                textInputRef.current.selectionStart = caret;
+                textInputRef.current.selectionEnd = caret;
+            }
+        }, 0);
+        // Auto send on speech complete (if user enabled the toggle)
+        if (autoSendEnabled && isMicEnabled && normalizedText.trim()) {
+            // Avoid duplicate sends
+            if (lastAutoSentTranscriptRef.current !== normalizedText.trim()) {
+                // Clear any existing timer
+                if (autoSendTimerRef.current) {
+                    clearTimeout(autoSendTimerRef.current);
+                }
+                const currentTranscript = normalizedText.trim();
+                // Wait 3 seconds before auto-sending
+                // Timer will be cleared if user continues speaking (transcript/partialTranscript changes)
+                autoSendTimerRef.current = setTimeout(() => {
+                    if (lastAutoSentTranscriptRef.current !== currentTranscript && !isLoading) {
+                        lastAutoSentTranscriptRef.current = currentTranscript;
+                        sendMessage(currentTranscript).catch(error => {
+                            console.error('Failed to auto-send message from speech:', error);
+                            lastAutoSentTranscriptRef.current = '';
+                        });
+                    }
+                    autoSendTimerRef.current = null;
+                }, 3000); // 3 seconds delay
+            }
+        }
+        else if (autoSendTimerRef.current) {
+            // Clear timer if auto-send disabled or mic disabled
+            clearTimeout(autoSendTimerRef.current);
+            autoSendTimerRef.current = null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transcript, autoSendEnabled, isMicEnabled, isLoading]);
+    // Clear timer when user continues speaking (partialTranscript updates)
+    React.useEffect(() => {
+        if (partialTranscript && partialTranscript.trim() && autoSendEnabled && isMicEnabled && autoSendTimerRef.current) {
+            clearTimeout(autoSendTimerRef.current);
+            autoSendTimerRef.current = null;
+        }
+    }, [partialTranscript, autoSendEnabled, isMicEnabled]);
+    // Cleanup timer when mic is disabled or component unmounts
+    React.useEffect(() => {
+        if (!isMicEnabled) {
+            if (autoSendTimerRef.current) {
+                clearTimeout(autoSendTimerRef.current);
+                autoSendTimerRef.current = null;
+            }
+        }
+        return () => {
+            if (autoSendTimerRef.current) {
+                clearTimeout(autoSendTimerRef.current);
+                autoSendTimerRef.current = null;
+            }
+        };
+    }, [isMicEnabled]);
+    React.useEffect(() => {
+        isMicEnabledRef.current = isMicEnabled;
+        // Reset auto-sent transcript ref when starting new recording
+        if (isMicEnabled) {
+            lastAutoSentTranscriptRef.current = '';
+            // Clear any pending auto-send timer
+            if (autoSendTimerRef.current) {
+                clearTimeout(autoSendTimerRef.current);
+                autoSendTimerRef.current = null;
+            }
+            // Hide gesture prompt once mic is actually enabled
+            setIsAwaitingMicGesture(false);
+            // Remove any pending gesture listeners
+            if (autoStartGestureCleanupRef.current) {
+                autoStartGestureCleanupRef.current();
+                autoStartGestureCleanupRef.current = null;
+            }
+        }
+    }, [isMicEnabled]);
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (storageMode !== "session-storage") {
+            sessionStorage.removeItem(MIC_ENABLED_SESSION_KEY);
+            hasSyncedMicStateRef.current = false;
+            return;
+        }
+        if (!hasSyncedMicStateRef.current) {
+            return;
+        }
+        try {
+            sessionStorage.setItem(MIC_ENABLED_SESSION_KEY, JSON.stringify(isMicEnabled));
+        }
+        catch (error) {
+            console.warn('Failed to persist recording state to sessionStorage:', error);
+        }
+    }, [isMicEnabled, storageMode]);
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const cleanupAutoStartListeners = () => {
+            if (autoStartGestureCleanupRef.current) {
+                autoStartGestureCleanupRef.current();
+                autoStartGestureCleanupRef.current = null;
+            }
+        };
+        if (storageMode !== "session-storage") {
+            cleanupAutoStartListeners();
+            pendingMicAutoStartRef.current = false;
+            setIsAwaitingMicGesture(false);
+            return;
+        }
+        if (hasSyncedMicStateRef.current || isReacquiringMicRef.current) {
+            return;
+        }
+        const rawStoredValue = sessionStorage.getItem(MIC_ENABLED_SESSION_KEY);
+        const shouldRestore = rawStoredValue === 'true';
+        if (!shouldRestore || isMicEnabledRef.current || isRestoringRecordingRef.current) {
+            hasSyncedMicStateRef.current = true;
+            setIsAwaitingMicGesture(false);
+            return;
+        }
+        pendingMicAutoStartRef.current = true;
+        function scheduleRetryOnUserGesture() {
+            if (autoStartGestureCleanupRef.current)
+                return;
+            setIsAwaitingMicGesture(true);
+            const events = ['pointerdown', 'keydown', 'touchstart'];
+            const handler = async () => {
+                cleanupAutoStartListeners();
+                await attemptAutoStart('user-gesture');
+            };
+            events.forEach(event => window.addEventListener(event, handler, { once: true }));
+            autoStartGestureCleanupRef.current = () => {
+                events.forEach(event => window.removeEventListener(event, handler));
+                autoStartGestureCleanupRef.current = null;
+            };
+        }
+        async function attemptAutoStart(reason) {
+            isReacquiringMicRef.current = true;
+            // For initial restore, show gesture prompt immediately while checking
+            // This gives user early feedback and allows them to click anytime
+            if (reason === 'initial') {
+                scheduleRetryOnUserGesture();
+            }
+            if (typeof navigator !== 'undefined' && navigator.mediaDevices?.getUserMedia) {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    stream.getTracks().forEach(track => track.stop());
+                }
+                catch (error) {
+                    console.error('Failed to reacquire microphone stream:', error);
+                    const errorName = error?.name || '';
+                    const errorMessage = error instanceof Error ? error.message : String(error);
+                    if (reason === 'initial') {
+                        const isPermissionPermanentlyDenied = errorName === 'NotAllowedError' &&
+                            /permission.*denied|blocked|not.*granted/i.test(errorMessage);
+                        if (isPermissionPermanentlyDenied) {
+                            // Permission permanently denied, hide the prompt
+                            pendingMicAutoStartRef.current = false;
+                            setIsAwaitingMicGesture(false);
+                            try {
+                                sessionStorage.setItem(MIC_ENABLED_SESSION_KEY, JSON.stringify(false));
+                            }
+                            catch (storageError) {
+                                console.warn('Failed to reset recording state in sessionStorage:', storageError);
+                            }
+                            cleanupAutoStartListeners();
+                        }
+                        // Otherwise, keep the prompt showing (already shown above)
+                        isReacquiringMicRef.current = false;
+                        return;
+                    }
+                    // For user-gesture retry, treat as error
+                    pendingMicAutoStartRef.current = false;
+                    setIsAwaitingMicGesture(false);
+                    try {
+                        sessionStorage.setItem(MIC_ENABLED_SESSION_KEY, JSON.stringify(false));
+                    }
+                    catch (storageError) {
+                        console.warn('Failed to reset recording state in sessionStorage:', storageError);
+                    }
+                    isReacquiringMicRef.current = false;
+                    hasSyncedMicStateRef.current = true;
+                    cleanupAutoStartListeners();
+                    return;
+                }
+            }
+            else if (reason === 'initial') {
+                // getUserMedia not available, prompt already shown above
+                isReacquiringMicRef.current = false;
+                return;
+            }
+            isRestoringRecordingRef.current = true;
+            // Intercept console.warn to detect AudioContext warnings
+            let audioContextWarningDetected = false;
+            const originalWarn = console.warn;
+            console.warn = (...args) => {
+                const message = args.join(' ');
+                if (message.includes('AudioContext was not allowed to start')) {
+                    audioContextWarningDetected = true;
+                }
+                originalWarn.apply(console, args);
+            };
+            try {
+                await startRecording();
+                console.warn = originalWarn;
+                // Check mic status after a short delay
+                await new Promise(resolve => setTimeout(resolve, 300));
+                // If mic started successfully, hide the prompt
+                if (isMicEnabledRef.current) {
+                    pendingMicAutoStartRef.current = false;
+                    setIsAwaitingMicGesture(false);
+                    cleanupAutoStartListeners();
+                }
+                else if (reason === 'initial') {
+                    // Mic didn't start, keep the prompt showing (already shown earlier)
+                    isRestoringRecordingRef.current = false;
+                    return;
+                }
+            }
+            catch (error) {
+                console.error('startRecording threw an error:', error);
+                try {
+                    sessionStorage.setItem(MIC_ENABLED_SESSION_KEY, JSON.stringify(false));
+                }
+                catch (storageError) {
+                    console.warn('Failed to reset recording state in sessionStorage:', storageError);
+                }
+            }
+            finally {
+                console.warn = originalWarn;
+                isRestoringRecordingRef.current = false;
+                isReacquiringMicRef.current = false;
+                hasSyncedMicStateRef.current = true;
+            }
+        }
+        attemptAutoStart('initial');
+        return () => {
+            cleanupAutoStartListeners();
+            pendingMicAutoStartRef.current = false;
+            setIsAwaitingMicGesture(false);
+        };
+    }, [storageMode, startRecording]);
+    const [notification, setNotification] = React.useState({
+        show: false,
+        type: 'info',
+        message: '',
+        autoHide: true,
+        duration: 5000
+    });
+    // AI Model related state
+    const [modelsFromApi, setModelsFromApi] = React.useState([]);
+    const [selectedModelIndex, setSelectedModelIndex] = useLocalStorage('selectedAIModelIndex', 0);
+    // Use models from API only (no default fallback)
+    // This ensures SDK always uses Dashboard-configured models
+    const effectiveAvailableModels = React.useMemo(() => {
+        return modelsFromApi;
+    }, [modelsFromApi]);
+    // Auto determine if selector should be shown based on number of models
+    // Show selector only when there are 2 or more models
+    const showModelSelector = React.useMemo(() => {
+        return effectiveAvailableModels.length >= 2;
+    }, [effectiveAvailableModels]);
+    // Fetch available models from API on mount
+    React.useEffect(() => {
+        const fetchModels = async () => {
+            try {
+                const result = await nxtlinqApi.agent.getServiceModels({ apiKey, apiSecret });
+                if ('availableModels' in result && Array.isArray(result.availableModels)) {
+                    setModelsFromApi(result.availableModels);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch available models from API:', error);
+                // Silently fail and use default models
+            }
+        };
+        fetchModels();
+    }, [apiKey, apiSecret, nxtlinqApi]);
+    // Validate selectedModelIndex against effectiveAvailableModels
+    React.useEffect(() => {
+        // Check if selectedModelIndex is out of bounds
+        if (selectedModelIndex >= effectiveAvailableModels.length) {
+            setSelectedModelIndex(0);
+            return;
+        }
+        // Check if the selected model still exists in effectiveAvailableModels
+        const selectedModel = effectiveAvailableModels[selectedModelIndex];
+        if (!selectedModel) {
+            setSelectedModelIndex(0);
+            return;
+        }
+    }, [effectiveAvailableModels, selectedModelIndex, setSelectedModelIndex]);
+    // Notification functions
+    const showNotification = (type, message, duration = 5000) => {
+        setNotification({
+            show: true,
+            type,
+            message,
+            autoHide: true,
+            duration
+        });
+        if (duration > 0) {
+            setTimeout(() => {
+                setNotification(prev => ({ ...prev, show: false }));
+            }, duration);
+        }
+    };
+    const showSuccess = (message) => showNotification('success', message, 3000);
+    const showError = (message) => showNotification('error', message, 5000);
+    const showWarning = (message) => showNotification('warning', message, 4000);
+    const showInfo = (message) => showNotification('info', message, 3000);
+    // Show "Please log in again." instead of raw "Invalid or expired token" to users (English)
+    const normalizeErrorForUser = (message) => /invalid\s+or\s+expired\s+token/i.test(message) ? 'Please log in again.' : message;
+    // Fetch available permissions. Returns the service's permission list when successful, otherwise undefined.
+    const fetchAvailablePermissions = async () => {
+        if (!serviceId)
+            return undefined;
+        try {
+            const result = await nxtlinqApi.permissions.getServicePermissions({
+                serviceId,
+                ...(permissionGroup && { groupName: permissionGroup })
+            });
+            if ('error' in result) {
+                console.error('Failed to fetch permissions:', result.error);
+                return undefined;
+            }
+            setAvailablePermissions(result.permissions);
+            return result.permissions;
+        }
+        catch (error) {
+            console.error('Error fetching permissions:', error);
+            return undefined;
+        }
+    };
+    // Refresh AIT
+    const refreshAIT = async (forceUpdatePermissions = false) => {
+        if (!hitAddress) {
+            setAit(null);
+            setPermissions([]);
+            setWalletInfo(null);
+            setIsAITLoading(false);
+            return;
+        }
+        setIsAITLoading(true);
+        try {
+            // Get wallet info first - always try to get wallet info if we have a token
+            if (nxtlinqAITServiceAccessToken) {
+                try {
+                    const walletResponse = await nxtlinqApi.wallet.getWallet({ address: hitAddress }, nxtlinqAITServiceAccessToken);
+                    if (!('error' in walletResponse)) {
+                        setWalletInfo(walletResponse);
+                    }
+                    else {
+                        // Check if the error is due to invalid/expired token
+                        if (walletResponse.error.includes('Invalid or expired token')) {
+                            console.log('Token appears to be invalid during wallet info fetch, clearing it');
+                            clearExpiredToken();
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to fetch wallet info:', error);
+                }
+            }
+            // Only try to fetch AIT if we have a token
+            if (nxtlinqAITServiceAccessToken) {
+                const response = await nxtlinqApi.ait.getAITByServiceIdAndController({
+                    serviceId,
+                    controller: hitAddress,
+                    customUsername: (!requireWalletIDVVerification && customUsername) ? getFinalCustomUsername(customUsername) : undefined
+                }, nxtlinqAITServiceAccessToken);
+                if ('error' in response) {
+                    console.error('Failed to fetch AIT:', response.error);
+                    setAit(null);
+                    setPermissions([]);
+                    return;
+                }
+                setAit(response);
+                if (!isPermissionFormOpen || forceUpdatePermissions) {
+                    const newPermissions = response.metadata?.permissions || [];
+                    setPermissions(newPermissions);
+                }
+            }
+            else {
+                // No token available, clear AIT data
+                setAit(null);
+                setPermissions([]);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch AIT:', error);
+            setAit(null);
+            setPermissions([]);
+        }
+        finally {
+            setIsAITLoading(false);
+        }
+    };
+    // Check if user needs to sign in
+    const isNeedSignInWithWallet = React.useMemo(() => {
+        if (!hitAddress)
+            return false;
+        if (!nxtlinqAITServiceAccessToken)
+            return true;
+        try {
+            const payload = JSON.parse(atob(nxtlinqAITServiceAccessToken.split('.')[1]));
+            const address = payload.address;
+            if (address !== hitAddress)
+                return true;
+            return false;
+        }
+        catch (error) {
+            console.error('Error parsing token:', error);
+            return true;
+        }
+    }, [hitAddress, nxtlinqAITServiceAccessToken]);
+    // Connect wallet
+    const connectWallet = React.useCallback(async (autoShowSignInMessage = true) => {
+        if (typeof window === 'undefined') {
+            console.error('Web3 is not available in server-side rendering');
+            return;
+        }
+        try {
+            getEthers();
+            const web3Provider = await metakeepClient.ethereum;
+            if (!web3Provider) {
+                throw new Error('Web3 provider not available');
+            }
+            await web3Provider.enable();
+            // ethers v6: Use BrowserProvider instead of Web3Provider
+            const ethersProvider = new ethers.BrowserProvider(web3Provider);
+            // ethers v6: getSigner() and getAddress() are now async
+            const userSigner = await ethersProvider.getSigner();
+            const userAddress = await userSigner.getAddress();
+            localStorage.setItem('walletAddress', userAddress);
+            setHitAddress(userAddress);
+            setSigner(userSigner);
+            // Immediately update refs to ensure they're available for subsequent operations
+            hitAddressRef.current = userAddress;
+            signerRef.current = userSigner;
+            // Check if we have a valid token before trying to load AIT
+            if (nxtlinqAITServiceAccessToken) {
+                try {
+                    const payload = JSON.parse(atob(nxtlinqAITServiceAccessToken.split('.')[1]));
+                    const address = payload.address;
+                    // Check if address matches
+                    if (address !== userAddress) {
+                        console.log('Token address mismatch, clearing token');
+                        clearExpiredToken();
+                        // Don't call refreshAIT with invalid token
+                    }
+                    else {
+                        // Token address matches, try to load AIT
+                        await refreshAIT();
+                        await sleep(1000);
+                    }
+                }
+                catch (error) {
+                    console.error('Error parsing token during wallet connection:', error);
+                    clearExpiredToken();
+                }
+            }
+            // If requireIDV is false and we have customUsername, check if wallet exists in AIT Service
+            if (!requireWalletIDVVerification && customUsername) {
+                try {
+                    // Check if wallet exists in AIT Service
+                    const walletResponse = await nxtlinqApi.wallet.getWallet({ address: userAddress }, '');
+                    if ('error' in walletResponse) {
+                        // Wallet doesn't exist, create it with custom method
+                        console.log('Wallet not found in AIT Service, creating with custom method...');
+                        const verifyPayload = {
+                            address: userAddress,
+                            method: 'custom',
+                            timestamp: Date.now(),
+                            customUsername: getFinalCustomUsername(customUsername)
+                        };
+                        const verifyResponse = await nxtlinqApi.wallet.verifyWallet(verifyPayload, '');
+                        if ('error' in verifyResponse) {
+                            console.error('Failed to create wallet with custom method:', verifyResponse.error);
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error('Error checking/creating wallet in AIT Service:', error);
+                }
+            }
+            if (autoShowSignInMessage) {
+                if (isNeedSignInWithWallet) {
+                    setMessages(prev => [...prev, {
+                            id: Date.now().toString(),
+                            content: walletTextUtils.getWalletText('Please sign in with your wallet to continue.', serviceId),
+                            role: 'assistant',
+                            timestamp: new Date().toISOString(),
+                            button: 'signIn'
+                        }]);
+                }
+                else {
+                    showSuccess(walletTextUtils.getWalletText('Successfully connected your HIT wallet. You are already signed in and can use the AI agent.', serviceId));
+                }
+            }
+            return userAddress;
+        }
+        catch (error) {
+            console.error('Failed to connect wallet:', error);
+            localStorage.removeItem('walletAddress');
+            setHitAddress(null);
+            setSigner(null);
+            if (autoShowSignInMessage) {
+                throw error;
+            }
+            return false;
+        }
+    }, [nxtlinqAITServiceAccessToken, refreshAIT, isNeedSignInWithWallet, requireWalletIDVVerification, customUsername, nxtlinqApi]);
+    const signInWallet = async (autoShowSuccessMessage = true) => {
+        // Use refs to get latest state values for consistency with hasPermission
+        const currentHitAddress = hitAddressRef.current;
+        const currentSigner = signerRef.current;
+        // If refs don't have the values, try using current state values
+        let addressToUse = currentHitAddress || hitAddress;
+        let signerToUse = currentSigner || signer;
+        // If we have an address but no signer, try to auto-connect wallet
+        if (addressToUse && !signerToUse) {
+            const storedWalletAddress = localStorage.getItem('walletAddress');
+            if (storedWalletAddress === addressToUse) {
+                try {
+                    const autoConnectResult = await connectWallet(false); // Don't show sign-in message yet
+                    if (autoConnectResult) {
+                        // Wait for state to update
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                        // Get the updated signer
+                        signerToUse = signerRef.current || signer;
+                        addressToUse = hitAddressRef.current || hitAddress;
+                    }
+                }
+                catch (error) {
+                    console.error('Auto-connect failed during sign in:', error);
+                }
+            }
+        }
+        if (!addressToUse) {
+            console.log('No address available, returning early');
+            if (autoShowSuccessMessage) {
+                showError(walletTextUtils.getWalletText('Please connect your wallet first.', serviceId));
+            }
+            return;
+        }
+        if (!signerToUse) {
+            console.log('No signer available, returning early');
+            if (autoShowSuccessMessage) {
+                showError(walletTextUtils.getWalletText('Please connect your wallet first.', serviceId));
+            }
+            return;
+        }
+        try {
+            const nonceResponse = await nxtlinqApi.auth.getNonce({ address: addressToUse });
+            if ('error' in nonceResponse) {
+                if (autoShowSuccessMessage) {
+                    showError(normalizeErrorForUser(nonceResponse.error));
+                }
+                return;
+            }
+            const payload = {
+                address: addressToUse,
+                code: nonceResponse.code,
+                timestamp: nonceResponse.timestamp
+            };
+            const stringToSign = stringify(payload);
+            const signature = await signerToUse.signMessage(stringToSign || '');
+            const response = await nxtlinqApi.auth.signIn({
+                ...payload,
+                signature
+            });
+            if ('error' in response) {
+                if (autoShowSuccessMessage) {
+                    showError(normalizeErrorForUser(response.error));
+                }
+                return;
+            }
+            const { accessToken } = response;
+            setNxtlinqAITServiceAccessToken(accessToken);
+            // Wait for state to update before refreshing AIT
+            await new Promise(resolve => setTimeout(resolve, 100));
+            await refreshAIT();
+            if (autoShowSuccessMessage) {
+                showSuccess(walletTextUtils.getWalletText('Successfully signed in with your HIT wallet. You can now use the AI agent.', serviceId));
+            }
+        }
+        catch (error) {
+            console.error('Failed to sign in:', error);
+            if (autoShowSuccessMessage) {
+                showError('Failed to sign in. Please try again.');
+            }
+        }
+    };
+    // Check permissions
+    const hasPermission = async (requiredPermission, autoRetry = true, onAutoConnect, onAutoSignIn) => {
+        // Use refs to get latest state values
+        const currentHitAddress = hitAddressRef.current;
+        const currentAit = aitRef.current;
+        const currentPermissions = permissionsRef.current;
+        const currentToken = nxtlinqAITServiceAccessTokenRef.current;
+        if (!currentHitAddress) {
+            if (autoRetry) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: walletTextUtils.getWalletText('Please connect your HIT wallet to continue.', serviceId),
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        button: 'connectWallet'
+                    }]);
+                try {
+                    setIsAutoConnecting(true); // Mark as auto-connecting
+                    await connectWallet(false); // Don't show sign-in message yet
+                    setIsAutoConnecting(false); // Clear auto-connecting state
+                    // Show brief success message for auto-connect
+                    showSuccess(walletTextUtils.getWalletText('Auto wallet connection successful', serviceId));
+                    onAutoConnect?.(); // Call callback if provided
+                    await new Promise(resolve => setTimeout(resolve, 2000));
+                    // After auto connect, if not signed in, then auto sign-in
+                    const tokenAfterConnect = nxtlinqAITServiceAccessTokenRef.current;
+                    if (!tokenAfterConnect) {
+                        setIsAutoConnecting(true);
+                        await signInWallet(false);
+                        onAutoSignIn?.(); // Call callback if provided
+                        setIsAutoConnecting(false);
+                        showSuccess(walletTextUtils.getWalletText('Auto sign-in successful after wallet connect', serviceId));
+                        await refreshAIT();
+                        // Wait for AIT to be fully loaded with polling
+                        let attempts = 0;
+                        const maxAttempts = 5;
+                        while (!aitRef.current && attempts < maxAttempts) {
+                            await new Promise(resolve => setTimeout(resolve, 2000));
+                            attempts++;
+                        }
+                    }
+                    // If connection (and sign-in if needed) successful, continue with permission check
+                    const result = await hasPermission(requiredPermission, false);
+                    return result;
+                }
+                catch (error) {
+                    console.error('Failed to auto-connect wallet:', error);
+                    setIsAutoConnecting(false); // Clear auto-connecting state on error
+                    return false;
+                }
+            }
+            // If autoRetry is false, don't show message again, just return false
+            return false;
+        }
+        if (!currentToken) {
+            if (autoRetry) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: walletTextUtils.getWalletText('Please sign in with your HIT wallet to continue.', serviceId),
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        button: 'signIn'
+                    }]);
+                try {
+                    setIsAutoConnecting(true); // Mark as auto-signing
+                    await signInWallet(false); // Don't show success message yet
+                    onAutoSignIn?.(); // Call callback if provided
+                    setIsAutoConnecting(false); // Clear auto-signing state
+                    // Show brief success message for auto-sign-in
+                    showSuccess('Auto sign-in successful');
+                    // Ensure AIT is refreshed after sign-in
+                    await refreshAIT();
+                    // Wait for AIT to be fully loaded with polling
+                    let attempts = 0;
+                    const maxAttempts = 5; // Wait up to 10 seconds (5 * 2000ms)
+                    while (!aitRef.current && attempts < maxAttempts) {
+                        await new Promise(resolve => setTimeout(resolve, 2000));
+                        attempts++;
+                    }
+                    // Only continue if AIT is actually loaded
+                    if (aitRef.current) {
+                        // Wait a bit more to ensure permissions are also loaded
+                        await new Promise(resolve => setTimeout(resolve, 2000));
+                        // If sign-in successful, continue with permission check
+                        const result = await hasPermission(requiredPermission, false);
+                        return result;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to auto-sign-in wallet:', error);
+                    setIsAutoConnecting(false); // Clear auto-signing state on error
+                    return false;
+                }
+            }
+            // If autoRetry is false, don't show message again, just return false
+            return false;
+        }
+        try {
+            const payload = JSON.parse(atob(currentToken.split('.')[1]));
+            const address = payload.address;
+            if (address !== currentHitAddress) {
+                setNxtlinqAITServiceAccessToken('');
+                if (autoRetry) {
+                    setIsLoading(false); // Stop thinking before showing message
+                    setMessages(prev => [...prev, {
+                            id: Date.now().toString(),
+                            content: walletTextUtils.getWalletText('Wallet address mismatch. Please sign in with the correct wallet.', serviceId),
+                            role: 'assistant',
+                            timestamp: new Date().toISOString(),
+                            button: 'signIn'
+                        }]);
+                    try {
+                        setIsAutoConnecting(true); // Mark as auto-signing
+                        await signInWallet(false); // Don't show success message yet
+                        onAutoSignIn?.(); // Call callback if provided
+                        setIsAutoConnecting(false); // Clear auto-signing state
+                        // Show brief success message for auto-sign-in after address mismatch
+                        showSuccess('Auto sign-in successful after address mismatch');
+                        // Ensure AIT is refreshed after sign-in
+                        await refreshAIT();
+                        // Wait for AIT to be fully loaded with polling
+                        let attempts = 0;
+                        const maxAttempts = 5; // Wait up to 10 seconds (5 * 2000ms)
+                        while (!aitRef.current && attempts < maxAttempts) {
+                            await new Promise(resolve => setTimeout(resolve, 2000));
+                            attempts++;
+                        }
+                        // Only continue if AIT is actually loaded
+                        if (aitRef.current) {
+                            // Wait a bit more to ensure permissions are also loaded
+                            await new Promise(resolve => setTimeout(resolve, 2000));
+                            // If sign-in successful, continue with permission check
+                            const result = await hasPermission(requiredPermission, false);
+                            return result;
+                        }
+                        else {
+                            return false;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Failed to auto-sign-in after address mismatch:', error);
+                        setIsAutoConnecting(false); // Clear auto-signing state on error
+                        return false;
+                    }
+                }
+                // If autoRetry is false, don't show message again, just return false
+                return false;
+            }
+        }
+        catch (error) {
+            console.error('Error parsing token:', error);
+            setNxtlinqAITServiceAccessToken('');
+            if (autoRetry) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: walletTextUtils.getWalletText('Invalid wallet session. Please sign in again.', serviceId),
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        button: 'signIn'
+                    }]);
+                try {
+                    setIsAutoConnecting(true); // Mark as auto-signing
+                    await signInWallet(false); // Don't show success message yet
+                    onAutoSignIn?.(); // Call callback if provided
+                    setIsAutoConnecting(false); // Clear auto-signing state
+                    // Show brief success message for auto-sign-in after token parse error
+                    showSuccess('Auto sign-in successful after token error');
+                    // Ensure AIT is refreshed after sign-in
+                    await refreshAIT();
+                    // Wait for AIT to be fully loaded with polling
+                    let attempts = 0;
+                    const maxAttempts = 5; // Wait up to 10 seconds (5 * 2000ms)
+                    while (!aitRef.current && attempts < maxAttempts) {
+                        await new Promise(resolve => setTimeout(resolve, 2000));
+                        attempts++;
+                    }
+                    // Only continue if AIT is actually loaded
+                    if (aitRef.current) {
+                        // Wait a bit more to ensure permissions are also loaded
+                        await new Promise(resolve => setTimeout(resolve, 2000));
+                        // If sign-in successful, continue with permission check
+                        const result = await hasPermission(requiredPermission, false);
+                        return result;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                catch (signInError) {
+                    console.error('Failed to auto-sign-in after token parse error:', signInError);
+                    setIsAutoConnecting(false); // Clear auto-signing state on error
+                    return false;
+                }
+            }
+            // If autoRetry is false, don't show message again, just return false
+            return false;
+        }
+        if (!currentAit) {
+            // Show loading message if AIT is still loading
+            if (isAITLoading) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: walletTextUtils.getWalletText('Loading your wallet configuration... Please wait a moment.', serviceId),
+                        role: 'assistant',
+                        timestamp: new Date().toISOString()
+                    }]);
+                return false;
+            }
+            // If AIT is not loaded but we have a token, try to refresh it once
+            if (currentToken && !isAITLoading) {
+                try {
+                    await refreshAIT();
+                    // Wait for AIT to be loaded with polling
+                    let attempts = 0;
+                    const maxAttempts = 5; // Wait up to 10 seconds (5 * 2000ms)
+                    while (!aitRef.current && attempts < maxAttempts) {
+                        await new Promise(resolve => setTimeout(resolve, 2000));
+                        attempts++;
+                    }
+                    // Check again after refresh
+                    if (!aitRef.current) {
+                        setIsLoading(false); // Stop thinking before showing message
+                        setMessages(prev => [...prev, {
+                                id: Date.now().toString(),
+                                content: walletTextUtils.getWalletText('No AIT found for your wallet. Please click the settings button (⚙️) to configure your AIT permissions.', serviceId),
+                                role: 'assistant',
+                                timestamp: new Date().toISOString()
+                            }]);
+                        return false;
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to refresh AIT during permission check:', error);
+                    setIsLoading(false); // Stop thinking before showing message
+                    setMessages(prev => [...prev, {
+                            id: Date.now().toString(),
+                            content: 'No AIT found for your wallet. Please click the settings button (⚙️) to configure your AIT permissions.',
+                            role: 'assistant',
+                            timestamp: new Date().toISOString()
+                        }]);
+                    return false;
+                }
+            }
+            else {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: 'No AIT found for your wallet. Please click the settings button (⚙️) to configure your AIT permissions.',
+                        role: 'assistant',
+                        timestamp: new Date().toISOString()
+                    }]);
+                return false;
+            }
+        }
+        if (availablePermissions.length === 0) {
+            setIsLoading(false); // Stop thinking before showing message
+            setMessages(prev => [...prev, {
+                    id: Date.now().toString(),
+                    content: `No permissions available for your current identity provider. Please check your service configuration or contact support. Service ID: ${serviceId}, Permission Group: ${permissionGroup || 'None'}`,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString()
+                }]);
+            return false;
+        }
+        const checkToolPermissionResult = await nxtlinqApi.agent.checkToolPermission({
+            apiKey,
+            apiSecret,
+            aitToken: currentToken,
+            controller: currentHitAddress,
+            toolName: requiredPermission
+        });
+        if ('error' in checkToolPermissionResult) {
+            // Check if AIT is still loading or if we just auto-connected
+            if (isAITLoading || isAutoConnecting) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: walletTextUtils.getWalletText('Loading your wallet configuration... Please wait a moment.', serviceId),
+                        role: 'assistant',
+                        timestamp: new Date().toISOString()
+                    }]);
+                return false;
+            }
+            // Refresh service permissions before judging; use latest result to decide message
+            const freshAvailablePermissions = await fetchAvailablePermissions();
+            const latestAvailablePermissions = freshAvailablePermissions ?? availablePermissions;
+            const requiredPermission = checkToolPermissionResult.requiredPermission;
+            const isInServiceList = latestAvailablePermissions.some((p) => p.label === requiredPermission);
+            // Permission not in service's available list → "not available for your current identity provider"
+            if (!isInServiceList) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: `This permission (${requiredPermission}) is not available for your current identity provider.`,
+                        role: 'assistant',
+                        timestamp: new Date().toISOString()
+                    }]);
+                return false;
+            }
+            // AIT loaded but permissions empty (no AIT found)
+            if (currentAit && currentPermissions.length === 0) {
+                setIsLoading(false); // Stop thinking before showing message
+                setMessages(prev => [...prev, {
+                        id: Date.now().toString(),
+                        content: 'No AIT found for your wallet. Please click the settings button (⚙️) to configure your AIT permissions.',
+                        role: 'assistant',
+                        timestamp: new Date().toISOString()
+                    }]);
+                return false;
+            }
+            // User has AIT but hasn't enabled this permission → prompt to enable
+            setIsLoading(false); // Stop thinking before showing message
+            const permissionMsg = `You don't have the required AIT permission: ${requiredPermission}. Would you like to enable AIT permission?`;
+            setMessages(prev => [
+                ...prev,
+                {
+                    id: Date.now().toString(),
+                    content: permissionMsg,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    button: 'enableAIT',
+                    metadata: { requiredPermission }
+                }
+            ]);
+            return false;
+        }
+        return true;
+    };
+    // AI Model related functions
+    const handleModelChange = React.useCallback((modelIndex) => {
+        setSelectedModelIndex(modelIndex);
+        const selectedModel = effectiveAvailableModels[modelIndex];
+        onModelChange?.(selectedModel);
+    }, [effectiveAvailableModels, onModelChange, setSelectedModelIndex]);
+    const getCurrentModel = React.useCallback(() => {
+        // Safety check: ensure selectedModelIndex is within bounds
+        let safeIndex = selectedModelIndex;
+        if (selectedModelIndex >= effectiveAvailableModels.length) {
+            safeIndex = 0;
+        }
+        // If no models available, return a default model
+        if (effectiveAvailableModels.length === 0) {
+            return { label: 'Unknown', value: 'unknown' };
+        }
+        return effectiveAvailableModels[safeIndex];
+    }, [effectiveAvailableModels, selectedModelIndex]);
+    const updateSuggestions = React.useCallback(async (pseudoId, externalId) => {
+        const result = await nxtlinqApi.agent.generateSuggestions({
+            apiKey,
+            apiSecret,
+            pseudoId,
+            externalId
+        });
+        if ('error' in result) {
+            console.error('Failed to fetch suggestions:', result.error);
+            setSuggestions([]);
+            return;
+        }
+        setSuggestions(result.suggestions.map((sug) => ({
+            text: sug,
+            autoSend: true
+        })));
+    }, []);
+    // Updated sendMessage function to support different AI models and attachments
+    const sendMessage = async (content, retryCount = 0, isPresetMessage = false, attachments, clientPipelineOverride) => {
+        const hasContent = content.trim() || (attachments && attachments.length > 0);
+        if (!hasContent || isLoading)
+            return;
+        const currentModel = getCurrentModel();
+        // Initialize with current model, will be updated with actual model from backend response
+        let actualModelUsed = currentModel.value;
+        // Only add user message on first attempt, not on retries
+        // Also check if this is not a preset message (preset messages are added separately)
+        if (retryCount === 0 && !isPresetMessage) {
+            const userMessage = {
+                id: Date.now().toString(),
+                content: content || (attachments && attachments.length > 0 ? `Uploaded ${attachments.length} file(s)` : ''),
+                role: 'user',
+                timestamp: new Date().toISOString(),
+                attachments: attachments,
+                metadata: {
+                    model: currentModel.value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                },
+                piiStatus: piiDisplayMode === 'redacted' ? 'scanning' : undefined,
+            };
+            setMessages(prev => [...prev, userMessage]);
+            setInputValue('');
+        }
+        setIsLoading(true);
+        let streamAssistantId = null;
+        try {
+            // Prepare attachments for API
+            const apiAttachments = attachments?.map(att => ({
+                type: att.type,
+                url: att.url,
+                name: att.name,
+                mimeType: att.mimeType
+            }));
+            let clientPipelineTimings;
+            if (retryCount === 0) {
+                if (clientPipelineOverride?.length) {
+                    clientPipelineTimings = clientPipelineOverride;
+                }
+                else if (micSessionStartForLogRef.current != null) {
+                    clientPipelineTimings = [
+                        {
+                            name: 'speech_to_text',
+                            durationMs: Math.round(performance.now() - micSessionStartForLogRef.current),
+                        },
+                    ];
+                    micSessionStartForLogRef.current = null;
+                }
+            }
+            const isAgentStreamModel = currentModel.value.endsWith('-stream');
+            let streamedReplyBuffer = '';
+            if (isAgentStreamModel && retryCount === 0) {
+                const sid = `stream-assistant-${Date.now()}`;
+                streamAssistantId = sid;
+                setMessages(prev => [...prev, {
+                        id: sid,
+                        role: 'assistant',
+                        content: '',
+                        partialContent: '',
+                        isStreaming: true,
+                        timestamp: new Date().toISOString(),
+                        metadata: {
+                            model: currentModel.value,
+                            agentLlmStream: true,
+                            permissions: permissions,
+                            issuedBy: hitAddress || ''
+                        }
+                    }]);
+            }
+            const response = await nxtlinqApi.agent.sendMessage({
+                model: currentModel.value,
+                apiKey,
+                apiSecret,
+                pseudoId: pseudoId,
+                externalId: localStorage.getItem('walletAddress') || undefined,
+                customUserInfo,
+                customUsername,
+                message: content || (attachments && attachments.length > 0 ? `Uploaded ${attachments.length} file(s)` : ''),
+                attachments: apiAttachments,
+                isRetry: retryCount > 0,
+                ...(clientPipelineTimings?.length ? { clientPipelineTimings } : {}),
+                onStreamDelta: streamAssistantId
+                    ? (text) => {
+                        streamedReplyBuffer += text;
+                        flushSync(() => {
+                            setMessages(prev => prev.map(m => m.id === streamAssistantId
+                                ? { ...m, partialContent: (m.partialContent || '') + text }
+                                : m));
+                        });
+                        if (text) {
+                            setIsLoading(false);
+                        }
+                    }
+                    : undefined,
+                onPiiProgress: piiDisplayMode === 'redacted' ? (step, data) => {
+                    const stepMap = {
+                        scan_start: 0, // Scan active
+                        scan_complete: 1, // {N} protected — data available, show redacted
+                        send_start: 2, // Sending to AI
+                    };
+                    const piiStep = stepMap[step];
+                    if (piiStep === undefined)
+                        return;
+                    setMessages(prev => {
+                        const updated = [...prev];
+                        for (let i = updated.length - 1; i >= 0; i--) {
+                            if (updated[i].role === 'user' && updated[i].piiStatus === 'scanning') {
+                                const patch = { piiStep };
+                                // scan_complete carries anonymized data — set piiProtection early for immediate redact
+                                if (step === 'scan_complete' && data?.anonymizedUserMessage) {
+                                    patch.piiProtection = {
+                                        anonymizedContent: data.anonymizedUserMessage,
+                                        mapping: data.mapping || {},
+                                    };
+                                }
+                                updated[i] = { ...updated[i], ...patch };
+                                break;
+                            }
+                        }
+                        return updated;
+                    });
+                } : undefined,
+            });
+            if (!('error' in response && response.error)) {
+                const tr = response;
+                if (tr.ttsVoice &&
+                    typeof tr.ttsVoice === 'object' &&
+                    (tr.ttsVoice.provider === 'azure' || tr.ttsVoice.provider === 'openai')) {
+                    clientTtsVoiceRef.current = tr.ttsVoice;
+                }
+                else {
+                    clientTtsVoiceRef.current = undefined;
+                }
+            }
+            // Get the actual model used from response (may differ due to fallback)
+            actualModelUsed = response.model || currentModel.value;
+            if ('error' in response || response.result === 'error') {
+                // Check if it's an AIT-related error
+                const errorResponse = response;
+                if (errorResponse.requiresWalletConnection) {
+                    // Case where wallet connection is required - trigger auto-connect logic
+                    // Try to auto-connect wallet first
+                    const autoConnectResult = await connectWallet(false); // Don't show sign-in message yet
+                    if (autoConnectResult) {
+                        // If auto-connect successful, try to sign in and then retry
+                        try {
+                            // Try to sign in wallet
+                            await signInWallet(false); // Don't show success message yet
+                            if (isSemiAutomaticMode) {
+                                setIsLoading(false);
+                                setMessages(prev => [...prev, {
+                                        id: Date.now().toString(),
+                                        content: 'Click button to continue using tool',
+                                        role: 'assistant',
+                                        timestamp: new Date().toISOString(),
+                                        button: 'continue'
+                                    }]);
+                                return;
+                            }
+                            else {
+                                // Wait a bit for everything to settle
+                                await new Promise(resolve => setTimeout(resolve, 2000));
+                                // Retry the message
+                                sendMessage(content, retryCount + 1, isPresetMessage);
+                            }
+                        }
+                        catch (signInError) {
+                            setIsLoading(false);
+                            setMessages(prev => [...prev, {
+                                    id: Date.now().toString(),
+                                    content: 'Wallet connected but sign-in failed. Please try signing in manually.',
+                                    role: 'assistant',
+                                    timestamp: new Date().toISOString(),
+                                    button: 'signIn',
+                                    metadata: {
+                                        requiresWalletConnection: true,
+                                        toolName: errorResponse.toolName
+                                    }
+                                }]);
+                        }
+                        return;
+                    }
+                    else {
+                        // If auto-connect failed, show the error message with connect button
+                        setIsLoading(false);
+                        setMessages(prev => [...prev, {
+                                id: Date.now().toString(),
+                                content: normalizeErrorForUser(errorResponse.message),
+                                role: 'assistant',
+                                timestamp: new Date().toISOString(),
+                                button: 'connectWallet',
+                                metadata: {
+                                    requiresWalletConnection: true,
+                                    toolName: errorResponse.toolName
+                                }
+                            }]);
+                        return;
+                    }
+                }
+                else if (errorResponse.requiresPermissionUpdate) {
+                    // Case where permission update is required - show manual enable option
+                    setIsLoading(false);
+                    setMessages(prev => [...prev, {
+                            id: Date.now().toString(),
+                            content: normalizeErrorForUser(errorResponse.message),
+                            role: 'assistant',
+                            timestamp: new Date().toISOString(),
+                            button: 'enableAIT',
+                            metadata: {
+                                requiresPermissionUpdate: true,
+                                toolName: errorResponse.toolName,
+                                requiredPermission: errorResponse.requiredPermission
+                            }
+                        }]);
+                    return;
+                }
+                else {
+                    // Other errors (show user-friendly message for invalid/expired token)
+                    throw new Error(normalizeErrorForUser(errorResponse.error || errorResponse.message));
+                }
+            }
+            let botResponse;
+            let handledOpenAiStreamAssistant = false;
+            if (streamAssistantId && response.toolCall?.toolUse) {
+                setMessages(prev => prev.filter(m => m.id !== streamAssistantId));
+                streamAssistantId = null;
+            }
+            if (streamAssistantId && !response.toolCall?.toolUse) {
+                handledOpenAiStreamAssistant = true;
+                let replyText = '';
+                if (response.reply) {
+                    replyText = Array.isArray(response.reply)
+                        ? response.reply
+                            .map((item) => item.text)
+                            .join(' ') || ''
+                        : response.reply || '';
+                }
+                else {
+                    replyText = response.fullResponse?.output?.message?.content
+                        ?.find((item) => item.text)?.text || '';
+                }
+                if (!replyText.trim() && streamedReplyBuffer.trim()) {
+                    replyText = streamedReplyBuffer.trim();
+                }
+                if (!replyText.trim()) {
+                    replyText = 'Sorry, I cannot understand your question';
+                }
+                updateSuggestions(pseudoId, localStorage.getItem('walletAddress') || undefined);
+                setMessages(prev => prev.map(m => m.id === streamAssistantId
+                    ? {
+                        ...m,
+                        content: replyText,
+                        isStreaming: false,
+                        partialContent: undefined,
+                        metadata: {
+                            model: actualModelUsed,
+                            agentLlmStream: true,
+                            permissions: permissions,
+                            issuedBy: hitAddress || ''
+                        },
+                        piiProtection: response.piiProtection?.anonymizedReply
+                            ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                            : undefined,
+                    }
+                    : m));
+                botResponse = {
+                    id: streamAssistantId,
+                    content: replyText,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    metadata: {
+                        model: actualModelUsed,
+                        agentLlmStream: true,
+                        permissions: permissions,
+                        issuedBy: hitAddress || ''
+                    },
+                    piiProtection: response.piiProtection?.anonymizedReply
+                        ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                        : undefined,
+                };
+            }
+            // Store redirectUrl for later use (don't redirect yet)
+            const redirectUrl = response?.redirectUrl;
+            if (!handledOpenAiStreamAssistant && response.toolCall?.toolUse) {
+                // Handle tool calls
+                const toolUse = response.toolCall.toolUse;
+                let toolMsg = '';
+                if (onToolUse) {
+                    let wasAutoConnected = false;
+                    let wasAutoSignedIn = false;
+                    // Added: Mark if permission denied due to missing AIT permission
+                    let permissionDenied = false;
+                    // Use requiredPermission from response if available, otherwise fall back to toolUse.name
+                    const permissionToCheck = response?.requiredPermission || toolUse.name;
+                    const isToolAllowed = await hasPermission(permissionToCheck, true, () => { wasAutoConnected = true; }, () => { wasAutoSignedIn = true; });
+                    // If currentPermissions does not include permissionToCheck and availablePermissionLabels includes permissionToCheck, it means AIT permission is missing
+                    if (!isToolAllowed && !permissions.includes(permissionToCheck) && availablePermissions.map(p => p.label).includes(permissionToCheck)) {
+                        permissionDenied = true;
+                    }
+                    if (!isToolAllowed) {
+                        // If permission denied due to missing AIT permission return
+                        if (permissionDenied) {
+                            setIsLoading(false);
+                            return;
+                        }
+                        if (isSemiAutomaticMode) {
+                            setIsLoading(false);
+                            setMessages(prev => [...prev, {
+                                    id: Date.now().toString(),
+                                    content: 'Click button to continue using tool',
+                                    role: 'assistant',
+                                    timestamp: new Date().toISOString(),
+                                    button: 'continue'
+                                }]);
+                            return;
+                        }
+                        else {
+                            // Only retry for auto-connect/auto-sign-in scenarios
+                            if (wasAutoConnected && retryCount < 1) {
+                                // Clear loading state and retry immediately
+                                setIsLoading(false);
+                                // Check if wallet is already signed in
+                                const currentToken = nxtlinqAITServiceAccessTokenRef.current;
+                                if (!currentToken) {
+                                    // If not signed in, directly retry the message without waiting for AIT
+                                    setTimeout(() => {
+                                        sendMessage(content, retryCount + 1, isPresetMessage);
+                                    }, 2000);
+                                }
+                                else {
+                                    // If already signed in, wait for AIT to be fully loaded before retrying
+                                    setTimeout(async () => {
+                                        // Wait for AIT to be loaded if needed
+                                        if (!aitRef.current && nxtlinqAITServiceAccessTokenRef.current) {
+                                            await refreshAIT();
+                                        }
+                                        // Wait for AIT to be fully loaded with polling
+                                        let attempts = 0;
+                                        const maxAttempts = 5; // Wait up to 10 seconds (5 * 2000ms)
+                                        while (!aitRef.current && attempts < maxAttempts) {
+                                            await new Promise(resolve => setTimeout(resolve, 2000));
+                                            attempts++;
+                                        }
+                                        // Only retry if AIT is actually loaded
+                                        if (aitRef.current) {
+                                            // Wait a bit more to ensure permissions are also loaded
+                                            await new Promise(resolve => setTimeout(resolve, 3000));
+                                            sendMessage(content, retryCount + 1, isPresetMessage);
+                                        }
+                                    }, 2000);
+                                }
+                            }
+                            return;
+                        }
+                    }
+                    if (isSemiAutomaticMode && wasAutoSignedIn) {
+                        setIsLoading(false);
+                        setMessages(prev => [...prev, {
+                                id: Date.now().toString(),
+                                content: 'Click button to continue using tool',
+                                role: 'assistant',
+                                timestamp: new Date().toISOString(),
+                                button: 'continue'
+                            }]);
+                        return;
+                    }
+                    // Create streaming message for tool execution
+                    const streamingMessageId = `streaming-${Date.now()}`;
+                    const streamingMessage = {
+                        id: streamingMessageId,
+                        content: '',
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        isStreaming: true,
+                        streamingToolName: toolUse.name,
+                        streamingStatus: `Starting ${toolUse.name}...`,
+                        streamingProgress: 0,
+                        streamingSteps: [],
+                        metadata: {
+                            model: actualModelUsed,
+                            permissions: permissions,
+                            issuedBy: hitAddress || '',
+                            toolUse: toolUse
+                        }
+                    };
+                    // Add streaming message to chat
+                    setMessages(prev => [...prev, streamingMessage]);
+                    // Execute tool with streaming updates
+                    const toolResult = await onToolUse(toolUse, (update) => {
+                        // Update streaming message with progress
+                        setMessages(prev => prev.map(msg => msg.id === streamingMessageId
+                            ? {
+                                ...msg,
+                                content: update.partialResult || msg.content,
+                                partialContent: update.partialContent, // Token-level streaming
+                                streamingProgress: update.progress,
+                                streamingStatus: update.status,
+                                streamingSteps: update.steps || msg.streamingSteps
+                            }
+                            : msg));
+                    });
+                    toolMsg = toolResult?.content || `Tool ${toolUse.name} executed successfully`;
+                    // Merge AI original reply
+                    let replyText = '';
+                    if (response.reply) {
+                        replyText = Array.isArray(response.reply)
+                            ? response.reply
+                                .map((item) => item.text)
+                                .join(' ') || ''
+                            : response.reply || '';
+                    }
+                    else if (response.fullResponse?.output?.message?.content) {
+                        replyText = response.fullResponse.output.message.content
+                            ?.find((item) => item.text)?.text || '';
+                    }
+                    let finalContent = toolMsg;
+                    if (replyText && replyText.trim()) {
+                        finalContent += `\n\n${replyText}`;
+                    }
+                    // Mark streaming as complete with final content
+                    setMessages(prev => prev.map(msg => msg.id === streamingMessageId
+                        ? {
+                            ...msg,
+                            isStreaming: false,
+                            streamingProgress: 100,
+                            content: finalContent,
+                            metadata: {
+                                ...msg.metadata,
+                                model: actualModelUsed,
+                                toolUse: toolUse
+                            },
+                            piiProtection: response.piiProtection?.anonymizedReply
+                                ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                                : undefined,
+                        }
+                        : msg));
+                    // Update message content in database if assistantMessageId is available
+                    if (response.assistantMessageId && apiKey && apiSecret) {
+                        try {
+                            await nxtlinqApi.agent.updateMessageContent({
+                                apiKey,
+                                apiSecret,
+                                messageId: response.assistantMessageId,
+                                content: finalContent,
+                            });
+                        }
+                        catch (error) {
+                            console.error('Failed to update message content in database:', error);
+                            // Don't block the UI if update fails
+                        }
+                    }
+                    updateSuggestions(pseudoId, localStorage.getItem('walletAddress') || undefined);
+                    // Skip creating a new botResponse since we already updated the streaming message
+                }
+                else {
+                    toolMsg = `Tool ${toolUse.name} executed successfully`;
+                    // No onToolUse callback - create message without streaming
+                    let replyText = '';
+                    if (response.reply) {
+                        replyText = Array.isArray(response.reply)
+                            ? response.reply
+                                .map((item) => item.text)
+                                .join(' ') || ''
+                            : response.reply || '';
+                    }
+                    else if (response.fullResponse?.output?.message?.content) {
+                        replyText = response.fullResponse.output.message.content
+                            ?.find((item) => item.text)?.text || '';
+                    }
+                    let mergedContent = '';
+                    if (toolMsg) {
+                        mergedContent += toolMsg;
+                    }
+                    if (replyText && replyText.trim()) {
+                        mergedContent += `\n\n${replyText}`;
+                    }
+                    // Update message content in database if assistantMessageId is available
+                    if (response.assistantMessageId && apiKey && apiSecret) {
+                        try {
+                            await nxtlinqApi.agent.updateMessageContent({
+                                apiKey,
+                                apiSecret,
+                                messageId: response.assistantMessageId,
+                                content: mergedContent,
+                            });
+                        }
+                        catch (error) {
+                            console.error('Failed to update message content in database:', error);
+                            // Don't block the UI if update fails
+                        }
+                    }
+                    updateSuggestions(pseudoId, localStorage.getItem('walletAddress') || undefined);
+                    const newBotResponse = {
+                        id: (Date.now() + 1).toString(),
+                        content: mergedContent,
+                        role: 'assistant',
+                        timestamp: new Date().toISOString(),
+                        metadata: {
+                            model: actualModelUsed,
+                            permissions: permissions,
+                            issuedBy: hitAddress || '',
+                            toolUse: toolUse
+                        },
+                        piiProtection: response.piiProtection?.anonymizedReply
+                            ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                            : undefined,
+                    };
+                    setMessages(prev => [...prev, newBotResponse]);
+                    botResponse = newBotResponse;
+                }
+            }
+            else if (!handledOpenAiStreamAssistant && response.reply) {
+                const replyText = Array.isArray(response.reply)
+                    ? response.reply
+                        .map((item) => item.text)
+                        .join(' ') || 'Sorry, I cannot understand your question'
+                    : response.reply || 'Sorry, I cannot understand your question';
+                updateSuggestions(pseudoId, localStorage.getItem('walletAddress') || undefined);
+                const newBotResponse = {
+                    id: (Date.now() + 1).toString(),
+                    content: replyText,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    metadata: {
+                        model: actualModelUsed,
+                        permissions: permissions,
+                        issuedBy: hitAddress || ''
+                    },
+                    piiProtection: response.piiProtection?.anonymizedReply
+                        ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                        : undefined,
+                };
+                setMessages(prev => [...prev, newBotResponse]);
+                botResponse = newBotResponse;
+            }
+            else if (!handledOpenAiStreamAssistant) {
+                const replyText = response.fullResponse?.output?.message?.content
+                    ?.find((item) => item.text)?.text || 'Sorry, I cannot understand your question';
+                const newBotResponse = {
+                    id: (Date.now() + 1).toString(),
+                    content: replyText,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    metadata: {
+                        model: actualModelUsed,
+                        permissions: permissions,
+                        issuedBy: hitAddress || ''
+                    },
+                    piiProtection: response.piiProtection?.anonymizedReply
+                        ? { anonymizedContent: response.piiProtection.anonymizedReply ?? undefined, mapping: response.piiProtection.mapping ?? undefined }
+                        : undefined,
+                };
+                setMessages(prev => [...prev, newBotResponse]);
+                botResponse = newBotResponse;
+            }
+            // ===== PII Protection: Update user message with anonymized version =====
+            const anonymizedUserMsg = response.piiProtection?.anonymizedUserMessage;
+            const piiMappingData = response.piiProtection?.mapping ?? undefined;
+            if (anonymizedUserMsg) {
+                setMessages(prev => {
+                    const updated = [...prev];
+                    for (let i = updated.length - 1; i >= 0; i--) {
+                        if (updated[i].role === 'user') {
+                            updated[i] = {
+                                ...updated[i],
+                                piiProtection: { anonymizedContent: anonymizedUserMsg, mapping: piiMappingData },
+                                piiStatus: 'complete',
+                            };
+                            break;
+                        }
+                    }
+                    return updated;
+                });
+            }
+            else if (piiDisplayMode === 'redacted') {
+                // No PII detected — set piiStatus to 'none' to trigger "No sensitive data" indicator
+                setMessages(prev => {
+                    const updated = [...prev];
+                    for (let i = updated.length - 1; i >= 0; i--) {
+                        if (updated[i].role === 'user' && updated[i].piiStatus === 'scanning') {
+                            updated[i] = { ...updated[i], piiStatus: 'none' };
+                            break;
+                        }
+                    }
+                    return updated;
+                });
+            }
+            // Execute redirect after all message processing is complete
+            if (redirectUrl) {
+                // Use setTimeout to ensure the message is displayed before redirect
+                setTimeout(() => {
+                    window.location.href = redirectUrl;
+                }, 100);
+            }
+            // Play text-to-speech for AI response if enabled
+            if (botResponse && botResponse.role === 'assistant' && textToSpeechEnabled) {
+                const ttsContent = botResponse.content;
+                setTimeout(() => {
+                    playTextToSpeech(ttsContent).catch(error => {
+                        console.error('Failed to play text-to-speech:', error);
+                    });
+                }, 100);
+            }
+        }
+        catch (error) {
+            console.error('Failed to send message:', error);
+            if (streamAssistantId) {
+                setMessages(prev => prev.filter(m => m.id !== streamAssistantId));
+                streamAssistantId = null;
+            }
+            if (retryCount < maxRetries) {
+                // Show retry indicator to user
+                const retryMessage = {
+                    id: `retry-${Date.now()}-${retryCount}`,
+                    content: `Retrying... (Attempt ${retryCount + 1}/${maxRetries})`,
+                    role: 'assistant',
+                    timestamp: new Date().toISOString(),
+                    metadata: {
+                        model: actualModelUsed,
+                        permissions: permissions,
+                        issuedBy: hitAddress || '',
+                        isRetry: true
+                    }
+                };
+                setMessages(prev => [...prev, retryMessage]);
+                setTimeout(() => {
+                    // Remove retry message before next attempt
+                    setMessages(prev => prev.filter(msg => msg.id !== retryMessage.id));
+                    sendMessage(content, retryCount + 1, isPresetMessage);
+                }, retryDelay);
+                return;
+            }
+            // Clear piiStatus on error so stepper doesn't get stuck
+            if (piiDisplayMode === 'redacted') {
+                setMessages(prev => {
+                    const updated = [...prev];
+                    for (let i = updated.length - 1; i >= 0; i--) {
+                        if (updated[i].role === 'user' && updated[i].piiStatus === 'scanning') {
+                            updated[i] = { ...updated[i], piiStatus: undefined };
+                            break;
+                        }
+                    }
+                    return updated;
+                });
+            }
+            const rawMessage = error instanceof Error ? error.message : 'An error occurred while sending the message';
+            const errorMessage = {
+                id: (Date.now() + 1).toString(),
+                content: normalizeErrorForUser(rawMessage),
+                role: 'assistant',
+                timestamp: new Date().toISOString(),
+                metadata: {
+                    model: currentModel.value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                }
+            };
+            setMessages(prev => [...prev, errorMessage]);
+            onError?.(error instanceof Error ? error : new Error('Unknown error'));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    // Handle submit
+    const handleSubmit = async (e, attachments) => {
+        e.preventDefault();
+        if (isStopRecordingOnSend) {
+            while (isMicEnabledRef.current) {
+                stopRecording();
+                await sleep(1000);
+            }
+        }
+        else {
+            if (isMicEnabledRef.current) {
+                await sleep(1000);
+                clearRecording();
+            }
+        }
+        if (!textInputRef.current)
+            return;
+        const hasContent = textInputRef.current.value.trim() || (attachments && attachments.length > 0);
+        if (!hasContent || isLoading)
+            return;
+        // 如果此時有語音自動發送的計時器，優先取消，避免與手動發送同內容時重複送出
+        if (autoSendTimerRef.current) {
+            clearTimeout(autoSendTimerRef.current);
+            autoSendTimerRef.current = null;
+        }
+        // 標記這次手動送出的內容，讓語音自動發送邏輯視為已送出，避免同一段文字再自動發送一次
+        const manualContent = textInputRef.current.value.trim();
+        if (manualContent) {
+            lastAutoSentTranscriptRef.current = manualContent;
+        }
+        // Stop current speech playback when user sends new message
+        stopTextToSpeechAndReset();
+        // Show loading message if AIT is still loading
+        if (isAITLoading) {
+            const loadingMessage = {
+                id: Date.now().toString(),
+                content: 'Loading your wallet configuration... Please wait a moment.',
+                role: 'assistant',
+                timestamp: new Date().toISOString(),
+                metadata: {
+                    model: getCurrentModel().value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                }
+            };
+            setMessages(prev => [...prev, loadingMessage]);
+            return;
+        }
+        try {
+            const clientPipelineOverride = micSessionStartForLogRef.current != null
+                ? [
+                    {
+                        name: 'speech_to_text',
+                        durationMs: Math.round(performance.now() - micSessionStartForLogRef.current),
+                    },
+                ]
+                : undefined;
+            if (micSessionStartForLogRef.current != null) {
+                micSessionStartForLogRef.current = null;
+            }
+            await sendMessage(textInputRef.current.value, 0, false, attachments, clientPipelineOverride);
+        }
+        catch (error) {
+            console.error('Failed to send message:', error);
+            onError?.(error instanceof Error ? error : new Error('Failed to send message'));
+            const errorMessage = {
+                id: Date.now().toString(),
+                content: 'Sorry, there was an error processing your message. Please try again.',
+                role: 'assistant',
+                timestamp: new Date().toISOString(),
+                metadata: {
+                    model: getCurrentModel().value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                }
+            };
+            setMessages(prev => [...prev, errorMessage]);
+        }
+    };
+    // Stop text-to-speech (does not clear queue)
+    const stopTextToSpeech = React.useCallback(() => {
+        if (speechingRef.current) {
+            // Stop AudioContext source if exists
+            if (audioSourceRef.current) {
+                audioSourceRef.current.stop();
+                audioSourceRef.current.disconnect();
+                audioSourceRef.current = null;
+            }
+            // Stop HTML Audio element if exists
+            if (audioElementRef.current) {
+                audioElementRef.current.pause();
+                audioElementRef.current.currentTime = 0;
+                if (audioElementRef.current.src.startsWith('blob:')) {
+                    URL.revokeObjectURL(audioElementRef.current.src);
+                }
+                audioElementRef.current = null;
+            }
+            speechingRef.current = false;
+        }
+        setSpeechingIndex(undefined);
+    }, []);
+    // Stop text-to-speech (used when user sends new message)
+    const stopTextToSpeechAndReset = React.useCallback(() => {
+        stopTextToSpeech();
+        setRequiresGesture(false);
+        setIsTtsProcessing(false);
+        pendingTtsRef.current = null;
+    }, [stopTextToSpeech]);
+    // When TTS is disabled during playback, stop immediately
+    React.useEffect(() => {
+        if (!textToSpeechEnabled) {
+            stopTextToSpeechAndReset();
+        }
+    }, [textToSpeechEnabled, stopTextToSpeechAndReset]);
+    const { isVoiceMode, voiceStatus, isVoiceConnecting, isMicMuted, remoteAudioRef, enterVoiceMode, exitVoiceMode, toggleMicMute: toggleVoiceMicMute, interruptVoice, } = useVoiceMode({
+        apiKey,
+        apiSecret,
+        pseudoId,
+        externalId: hitAddress || undefined,
+        aitId: ait?.aitId,
+        walletAddress: hitAddress || undefined,
+        aitToken: nxtlinqAITServiceAccessToken || undefined,
+        metadata: customUserInfo,
+        nxtlinqApi,
+        getMessages: () => messagesRef.current,
+        setMessages,
+        onError,
+        stopRecording,
+        stopTextToSpeech: stopTextToSpeechAndReset,
+        voiceTransport: 'ws-realtime',
+    });
+    React.useEffect(() => {
+        if (!isOpen && isVoiceMode) {
+            void exitVoiceMode();
+        }
+    }, [isOpen, isVoiceMode, exitVoiceMode]);
+    React.useEffect(() => {
+        if (isOpen && preferredChatMode === 'voice' && !isVoiceMode && !isVoiceConnecting) {
+            void enterVoiceMode();
+        }
+    }, [isOpen, preferredChatMode, isVoiceMode, isVoiceConnecting, enterVoiceMode]);
+    React.useEffect(() => {
+        if (isVoiceMode || isVoiceConnecting) {
+            stopRecording();
+        }
+    }, [isVoiceMode, isVoiceConnecting, stopRecording]);
+    const handleEnterVoiceMode = React.useCallback(async () => {
+        stopRecording();
+        setPreferredChatMode('voice');
+        await enterVoiceMode();
+    }, [enterVoiceMode, setPreferredChatMode, stopRecording]);
+    const handleExitVoiceMode = React.useCallback(async () => {
+        setPreferredChatMode('text');
+        await exitVoiceMode();
+    }, [exitVoiceMode, setPreferredChatMode]);
+    // Play text-to-speech (simplified, no queue)
+    const playTextToSpeech = React.useCallback(async (text, messageIndex) => {
+        if (!textToSpeechEnabled || !text.trim())
+            return;
+        // Stop any ongoing speech
+        stopTextToSpeech();
+        // Show processing indicator
+        setIsTtsProcessing(true);
+        // Retry up to 2 times (3 attempts total)
+        let lastError;
+        for (let attempt = 0; attempt < 3; attempt++) {
+            try {
+                await playTextToSpeechWithRetry(text, messageIndex, attempt);
+                return; // Success, exit
+            }
+            catch (err) {
+                lastError = err;
+                if (attempt < 2) {
+                    // Continue to next attempt
+                    continue;
+                }
+            }
+        }
+        // All attempts failed
+        console.error('TTS playback failed after retries:', lastError);
+        setIsTtsProcessing(false);
+    }, [textToSpeechEnabled, stopTextToSpeech, playTextToSpeechWithRetry]);
+    const retryTtsWithGesture = React.useCallback(async () => {
+        try {
+            setRequiresGesture(false);
+            // Try to resume audio context
+            if (audioCtxRef.current) {
+                try {
+                    await audioCtxRef.current.resume();
+                }
+                catch { }
+            }
+            const pending = pendingTtsRef.current;
+            if (pending && textToSpeechEnabled) {
+                setIsTtsProcessing(true);
+                await playTextToSpeech(pending);
+                pendingTtsRef.current = null;
+            }
+        }
+        catch (err) {
+            console.error('Retry TTS with gesture failed:', err);
+            setIsTtsProcessing(false);
+        }
+    }, [textToSpeechEnabled, playTextToSpeech]);
+    // When browser blocks autoplay (requires gesture), retry on next user interaction
+    React.useEffect(() => {
+        if (!requiresGesture || !textToSpeechEnabled || !pendingTtsRef.current)
+            return;
+        const handleUserGesture = () => {
+            retryTtsWithGesture();
+        };
+        window.addEventListener('pointerdown', handleUserGesture, { once: true });
+        return () => window.removeEventListener('pointerdown', handleUserGesture);
+    }, [requiresGesture, textToSpeechEnabled, retryTtsWithGesture]);
+    const uploadAttachment = React.useCallback(async (file) => {
+        const result = await nxtlinqApi.agent.uploadAttachment({
+            apiKey,
+            apiSecret,
+            pseudoId,
+            file,
+        });
+        if ('error' in result)
+            return result;
+        return { url: result.url };
+    }, [nxtlinqApi, apiKey, apiSecret, pseudoId]);
+    // Handle preset message
+    const handlePresetMessage = (message) => {
+        // If preset is configured as auto-send, avoid duplicate sends when user clicks repeatedly
+        if (message.autoSend) {
+            const trimmedText = (message.text || '').trim();
+            if (!trimmedText)
+                return;
+            // Prevent sending messages while AI Agent is processing
+            if (isLoading) {
+                return;
+            }
+            // If this exact preset text was just sent (by auto-send / manual / preset), skip to prevent duplicates
+            if (lastAutoSentTranscriptRef.current === trimmedText) {
+                return;
+            }
+            // For preset messages, we need to add the user message first since sendMessage won't add it on retries
+            const userMessage = {
+                id: Date.now().toString(),
+                content: trimmedText,
+                role: 'user',
+                timestamp: new Date().toISOString(),
+                metadata: {
+                    model: getCurrentModel().value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                }
+            };
+            setMessages(prev => [...prev, userMessage]);
+            // Mark as last sent to guard against rapid re-clicks and other duplicate flows
+            lastAutoSentTranscriptRef.current = trimmedText;
+            // Pass a flag to indicate this is a preset message so sendMessage won't add user message again
+            sendMessage(trimmedText, 0, true);
+        }
+        else {
+            setInputValue(message.text);
+        }
+    };
+    // Generate and register AIT
+    const generateAndRegisterAIT = async (newPermissions, isFromAIAgent = false) => {
+        let currentSigner = signer;
+        let currentAddress = hitAddress;
+        // If we have an address but no signer, try to auto-connect wallet
+        if (currentAddress && !currentSigner) {
+            const storedWalletAddress = localStorage.getItem('walletAddress');
+            if (storedWalletAddress === currentAddress) {
+                try {
+                    const autoConnectResult = await connectWallet(false); // Don't show sign-in message yet
+                    if (autoConnectResult) {
+                        // Wait for state to update
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                        // Get the updated signer and address
+                        currentSigner = signerRef.current || signer;
+                        currentAddress = hitAddressRef.current || hitAddress;
+                    }
+                }
+                catch (error) {
+                    console.error('Auto-connect failed during AIT generation:', error);
+                }
+            }
+        }
+        if (!currentSigner || !currentAddress) {
+            throw new Error('Missing signer or wallet address');
+        }
+        return generateAndRegisterAITWithSigner(newPermissions, isFromAIAgent, currentSigner, currentAddress);
+    };
+    // Generate and register AIT with explicit signer and address
+    const generateAndRegisterAITWithSigner = async (newPermissions, isFromAIAgent = false, explicitSigner, explicitAddress) => {
+        const currentSigner = explicitSigner || signer;
+        const currentAddress = explicitAddress || hitAddress;
+        if (!currentSigner || !currentAddress) {
+            throw new Error('Missing signer or wallet address');
+        }
+        // If AI Agent is creating, must check if user has existing AIT
+        if (isFromAIAgent && !aitRef.current) {
+            throw new Error('You must have an existing AIT before AI Agent can create new AITs');
+        }
+        const timestamp = Math.floor(Date.now() / 1000);
+        const aitId = `did:polygon:nxtlinq:${currentAddress}:${timestamp}`;
+        const metadata = {
+            permissions: newPermissions || permissions,
+            issuedBy: currentAddress,
+        };
+        const metadataStr = stringify(metadata);
+        // ethers v6: utils.keccak256 -> keccak256, utils.toUtf8Bytes -> toUtf8Bytes
+        const metadataHash = ethers.keccak256(ethers.toUtf8Bytes(metadataStr));
+        const uploadResponse = await nxtlinqApi.metadata.createMetadata(metadata, nxtlinqAITServiceAccessToken || '');
+        if ('error' in uploadResponse) {
+            throw new Error(`Failed to upload metadata: ${uploadResponse.error}`);
+        }
+        const { metadataCid } = uploadResponse;
+        const createAITParams = {
+            aitId,
+            controller: currentAddress,
+            serviceId,
+            metadataHash,
+            metadataCid,
+            isFromAIAgent: isFromAIAgent,
+            parentAITId: isFromAIAgent ? aitRef.current?.aitId : undefined,
+        };
+        const createAITResponse = await nxtlinqApi.ait.createAIT(createAITParams, nxtlinqAITServiceAccessToken || '');
+        if ('error' in createAITResponse) {
+            throw new Error(`Failed to create AIT: ${createAITResponse.error}`);
+        }
+        const aitInfo = {
+            aitId,
+            controller: currentAddress,
+            metadata,
+            metadataHash,
+            metadataCid,
+        };
+        setAit(aitInfo);
+        setPermissions(newPermissions || permissions);
+    };
+    // Auto enable AIT permission
+    const enableAIT = async (toolName) => {
+        if (isAITEnabling)
+            return false; // Prevent duplicate
+        setIsAITEnabling(true);
+        let currentSigner = signer;
+        let currentHitAddress = hitAddress;
+        // If no wallet connected, try to auto-connect first
+        if (!currentSigner || !currentHitAddress) {
+            const autoConnectResult = await connectWallet(false); // Don't show sign-in message yet
+            if (autoConnectResult) {
+                // Wait for state to update - increase wait time
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                // Get the latest state values after connection
+                currentSigner = signerRef.current || signer;
+                currentHitAddress = hitAddressRef.current || hitAddress;
+                // Double check that we have the required state
+                if (!currentSigner || !currentHitAddress) {
+                    await new Promise(resolve => setTimeout(resolve, 1500));
+                    currentSigner = signerRef.current || signer;
+                    currentHitAddress = hitAddressRef.current || hitAddress;
+                }
+                try {
+                    await signInWallet(false); // Don't show success message yet
+                }
+                catch (signInError) {
+                    showError(walletTextUtils.getWalletText('Wallet connected but sign-in failed. Please try signing in manually.', serviceId));
+                    setIsAITEnabling(false);
+                    return false;
+                }
+            }
+            else {
+                showError(walletTextUtils.getWalletText('Please connect your wallet first', serviceId));
+                setIsAITEnabling(false);
+                return false;
+            }
+        }
+        // Final check before proceeding
+        if (!currentSigner || !currentHitAddress) {
+            console.error('Missing signer or wallet address after connection process');
+            console.error('Current signer:', !!currentSigner);
+            console.error('Current hitAddress:', currentHitAddress);
+            console.error('Signer ref:', !!signerRef.current);
+            console.error('HitAddress ref:', hitAddressRef.current);
+            showError(walletTextUtils.getWalletText('Wallet connection failed. Please try connecting your wallet manually.', serviceId));
+            setIsAITEnabling(false);
+            return false;
+        }
+        // If we don't have AIT loaded but we have a token, try to refresh it first
+        if (!aitRef.current && nxtlinqAITServiceAccessToken) {
+            try {
+                await refreshAIT();
+                // Wait a bit for AIT to be loaded
+                await new Promise(resolve => setTimeout(resolve, 1000));
+            }
+            catch (error) {
+                // Continue anyway, we'll create a new AIT if needed
+                console.error('Failed to refresh AIT:', error);
+            }
+        }
+        try {
+            // Get available permissions to find the tool
+            const availablePermissionLabels = availablePermissions.map(p => p.label);
+            if (!availablePermissionLabels.includes(toolName)) {
+                showError(`Tool ${toolName} is not available for your current identity provider`);
+                setIsAITEnabling(false);
+                return false;
+            }
+            // Get current permissions from AIT metadata instead of React state
+            // This ensures we don't lose existing permissions when enabling new ones
+            const currentAITPermissions = aitRef.current?.metadata?.permissions || permissions;
+            const newPermissions = [...currentAITPermissions];
+            if (!newPermissions.includes(toolName)) {
+                newPermissions.push(toolName);
+            }
+            // Filter out deleted permissions before saving
+            const validPermissions = newPermissions.filter(permission => availablePermissionLabels.includes(permission));
+            // Generate and register AIT with new permissions
+            // For auto-enable, we should create a regular AIT (not AI Agent AIT) if user doesn't have existing AIT
+            const shouldCreateAsAIAgent = !!aitRef.current; // Only create as AI Agent if user already has an AIT
+            await generateAndRegisterAITWithSigner(validPermissions, shouldCreateAsAIAgent, currentSigner, currentHitAddress);
+            showSuccess('AIT permission enabled successfully! You can now use the AI agent.');
+            await refreshAIT(true);
+            setIsAITEnabling(false);
+            return true;
+        }
+        catch (error) {
+            console.error('Failed to auto-enable AIT:', error);
+            setIsAITEnabling(false);
+            if (error instanceof Error) {
+                showError(error.message);
+            }
+            else {
+                showError('Failed to enable AIT permission. Please try again.');
+            }
+            return false;
+        }
+    };
+    // Save permissions
+    const savePermissions = async (newPermissions) => {
+        setIsDisabled(true);
+        try {
+            // Filter out deleted permissions before saving
+            const permissionsToSave = newPermissions || permissions;
+            const availablePermissionLabels = availablePermissions.map(p => p.label);
+            const validPermissions = permissionsToSave.filter(permission => availablePermissionLabels.includes(permission));
+            await generateAndRegisterAIT(validPermissions, false);
+            showSuccess('AIT permissions saved successfully! You can now use the AI agent with your configured permissions.');
+            setShowPermissionForm(false);
+            setIsPermissionFormOpen(false);
+            await refreshAIT(true);
+        }
+        catch (error) {
+            console.error('Failed to generate AIT:', error);
+            setIsDisabled(false);
+            if (error instanceof Error) {
+                showError(error.message);
+            }
+            else {
+                showError('Failed to save permissions. Please try again.');
+            }
+        }
+    };
+    // Handle verify wallet click
+    const handleVerifyWalletClick = async (method) => {
+        if (!hitAddress) {
+            showError('Please connect your wallet first.');
+            return;
+        }
+        try {
+            setIsLoading(true);
+            if (method === 'berifyme') {
+                if (!onVerifyWallet) {
+                    showError('Berify.me verification is not available. Please provide onVerifyWallet callback.');
+                    setIsLoading(false);
+                    return;
+                }
+                const result = await onVerifyWallet();
+                if (!result) {
+                    setIsLoading(false);
+                    return;
+                }
+                const { token } = result;
+                const address = hitAddress;
+                if (token && address) {
+                    const payload = {
+                        address: hitAddress,
+                        token,
+                        timestamp: Date.now(),
+                        method: 'berifyme'
+                    };
+                    try {
+                        const verifyWalletResponse = await nxtlinqApi.wallet.verifyWallet({ ...payload }, token);
+                        if ('error' in verifyWalletResponse) {
+                            if (verifyWalletResponse.error === 'Wallet already exists') {
+                                // Wallet already exists with the same method, just refresh AIT
+                                setIsWalletLoading(true);
+                                try {
+                                    const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
+                                    if (!('error' in walletResponse)) {
+                                        setWalletInfo(walletResponse);
+                                        const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({
+                                            serviceId,
+                                            controller: address,
+                                            customUsername: (!requireWalletIDVVerification && customUsername) ? getFinalCustomUsername(customUsername) : undefined
+                                        }, token);
+                                        if (!('error' in aitResponse)) {
+                                            setAit(aitResponse);
+                                        }
+                                    }
+                                }
+                                finally {
+                                    setIsWalletLoading(false);
+                                }
+                                if (typeof window !== 'undefined') {
+                                    try {
+                                        const url = new URL(window.location.href);
+                                        url.searchParams.delete('token');
+                                        url.searchParams.delete('isAutoConnect');
+                                        url.searchParams.delete('method');
+                                        url.searchParams.delete('returnUrl');
+                                        window.history.replaceState({}, '', url.toString());
+                                    }
+                                    catch (e) {
+                                        console.error('Failed to clean URL:', e);
+                                    }
+                                }
+                                setIsLoading(false);
+                                showSuccess(walletTextUtils.getWalletText('Wallet verification completed successfully! Your wallet is now verified and ready to use.', serviceId));
+                                refreshAIT();
+                                return;
+                            }
+                            showError(verifyWalletResponse.error);
+                            setIsLoading(false);
+                            return;
+                        }
+                        setIsWalletLoading(true);
+                        try {
+                            const walletResponse = await nxtlinqApi.wallet.getWallet({ address }, token);
+                            if (!('error' in walletResponse)) {
+                                setWalletInfo(walletResponse);
+                                const aitResponse = await nxtlinqApi.ait.getAITByServiceIdAndController({
+                                    serviceId,
+                                    controller: address,
+                                    customUsername: (!requireWalletIDVVerification && customUsername) ? getFinalCustomUsername(customUsername) : undefined
+                                }, token);
+                                if (!('error' in aitResponse)) {
+                                    setAit(aitResponse);
+                                }
+                            }
+                        }
+                        finally {
+                            setIsWalletLoading(false);
+                        }
+                        if (typeof window !== 'undefined') {
+                            try {
+                                const url = new URL(window.location.href);
+                                url.searchParams.delete('token');
+                                url.searchParams.delete('isAutoConnect');
+                                url.searchParams.delete('method');
+                                url.searchParams.delete('returnUrl');
+                                window.history.replaceState({}, '', url.toString());
+                            }
+                            catch (e) {
+                                console.error('Failed to clean URL:', e);
+                            }
+                        }
+                        setIsLoading(false);
+                        showSuccess('Wallet verification completed successfully! Your wallet is now verified and ready to use.');
+                        refreshAIT();
+                        return;
+                    }
+                    catch (error) {
+                        let msg = 'Verification failed';
+                        if (typeof error === 'object' && error !== null && 'response' in error) {
+                            msg = error.response?.data?.error || error.message || msg;
+                        }
+                        else if (error instanceof Error) {
+                            msg = error.message;
+                        }
+                        console.error('Wallet verification failed:', error);
+                        showError(msg);
+                        setIsLoading(false);
+                        throw error;
+                    }
+                }
+                setIsLoading(false);
+                return;
+            }
+            if (method === 'custom') {
+                if (!customUsername) {
+                    showError('Custom username is required for custom verification method.');
+                    setIsLoading(false);
+                    return;
+                }
+                const payload = {
+                    address: hitAddress,
+                    method: 'custom',
+                    timestamp: Date.now(),
+                    customUsername: getFinalCustomUsername(customUsername)
+                };
+                try {
+                    const verifyWalletResponse = await nxtlinqApi.wallet.verifyWallet(payload, '');
+                    if ('error' in verifyWalletResponse) {
+                        if (verifyWalletResponse.error === 'Wallet already exists') {
+                            // Wallet already exists with the same method, just refresh AIT
+                            await refreshAIT();
+                            setIsLoading(false);
+                            showSuccess(walletTextUtils.getWalletText('Wallet verification completed successfully! Your wallet is now verified and ready to use.', serviceId));
+                            return;
+                        }
+                        // Handle specific error messages
+                        if (verifyWalletResponse.error === 'Cannot downgrade from Berify.me verification to custom verification') {
+                            showError(walletTextUtils.getWalletText('This wallet is already verified with Berify.me. Custom verification cannot override Berify.me verification.', serviceId));
+                        }
+                        else {
+                            showError(verifyWalletResponse.error);
+                        }
+                        setIsLoading(false);
+                        return;
+                    }
+                    // Successfully created wallet with custom method
+                    await refreshAIT();
+                    setIsLoading(false);
+                    showSuccess(walletTextUtils.getWalletText('Wallet verification completed successfully! Your wallet is now verified and ready to use.', serviceId));
+                    return;
+                }
+                catch (error) {
+                    console.error('Custom wallet verification failed:', error);
+                    showError(walletTextUtils.getWalletText('Failed to verify wallet with custom method. Please try again.', serviceId));
+                    setIsLoading(false);
+                    return;
+                }
+            }
+            // If we reach here, the method is not supported
+            showError(`Unsupported verification method: ${method}`);
+            setIsLoading(false);
+        }
+        catch (error) {
+            console.error('Failed to verify wallet:', error);
+            setIsLoading(false);
+            showError(walletTextUtils.getWalletText('Failed to verify wallet. Please try again.', serviceId));
+            throw error;
+        }
+    };
+    // Initialize wallet address from localStorage on component mount
+    React.useEffect(() => {
+        const storedWalletAddress = localStorage.getItem('walletAddress');
+        if (storedWalletAddress && !hitAddress) {
+            setHitAddress(storedWalletAddress);
+            hitAddressRef.current = storedWalletAddress;
+        }
+    }, []);
+    React.useEffect(() => {
+        if (hitAddress && nxtlinqAITServiceAccessToken) {
+            refreshAIT();
+        }
+    }, [hitAddress, nxtlinqAITServiceAccessToken]);
+    // Set loading state when permission form opens
+    React.useEffect(() => {
+        if (isPermissionFormOpen && hitAddress) {
+            setIsAITLoading(true);
+        }
+    }, [isPermissionFormOpen, hitAddress]);
+    React.useEffect(() => {
+        fetchAvailablePermissions();
+    }, [serviceId, permissionGroup]);
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            try {
+                const urlParams = new URLSearchParams(window.location.search);
+                const token = urlParams.get('token');
+                if (token && hitAddress) {
+                    handleVerifyWalletClick('berifyme');
+                }
+            }
+            catch (e) {
+                console.error('Failed to get URL params:', e);
+            }
+        }
+    }, [hitAddress]);
+    // Handle custom error message display
+    React.useEffect(() => {
+        const trimmedError = customError?.trim();
+        // Only display error if it's a new value (different from last displayed error)
+        if (trimmedError && trimmedError !== lastCustomErrorRef.current) {
+            lastCustomErrorRef.current = trimmedError;
+            const errorMessage = {
+                id: `custom-error-${Date.now()}`,
+                content: trimmedError,
+                role: 'assistant',
+                timestamp: new Date().toISOString(),
+                metadata: {
+                    model: getCurrentModel().value,
+                    permissions: permissions,
+                    issuedBy: hitAddress || ''
+                }
+            };
+            setMessages(prev => [...prev, errorMessage]);
+            onMessage?.(errorMessage);
+        }
+        else if (!trimmedError) {
+            // Reset ref when customError is cleared
+            lastCustomErrorRef.current = undefined;
+        }
+    }, [customError, getCurrentModel, permissions, hitAddress, onMessage]);
+    React.useEffect(() => {
+        if (messages.length > 0) {
+            const lastMessage = messages[messages.length - 1];
+            onMessage?.(lastMessage);
+        }
+    }, [messages, onMessage]);
+    React.useEffect(() => {
+        if (!hitAddress) {
+            return;
+        }
+        const updateExternalId = async () => {
+            const externalId = hitAddress;
+            await nxtlinqApi.agent.updateMessagesExternalIdByPseudoId({
+                apiKey,
+                apiSecret,
+                pseudoId,
+                externalId: externalId,
+            });
+            await nxtlinqApi.agent.cloneUserProfileByPseudoId({
+                apiKey,
+                apiSecret,
+                pseudoId,
+                externalId: externalId,
+            });
+            await nxtlinqApi.agent.cloneUserTopicByPseudoId({
+                apiKey,
+                apiSecret,
+                pseudoId,
+                externalId: externalId,
+            });
+        };
+        updateExternalId();
+    }, [hitAddress, nxtlinqApi, apiKey, apiSecret, pseudoId]);
+    const contextValue = {
+        // State
+        messages,
+        inputValue,
+        isLoading,
+        isOpen,
+        hitAddress,
+        ait,
+        permissions,
+        availablePermissions,
+        showPermissionForm,
+        isPermissionFormOpen,
+        isAITLoading,
+        isDisabled,
+        walletInfo,
+        isWalletLoading,
+        isAutoConnecting,
+        notification,
+        isMicEnabled,
+        isAwaitingMicGesture,
+        transcript,
+        textInputRef,
+        autoSendEnabled,
+        // Speech related state
+        textToSpeechEnabled,
+        speechingIndex,
+        isTtsProcessing,
+        requiresGesture,
+        // AI Model related state
+        availableModels: effectiveAvailableModels,
+        selectedModelIndex,
+        showModelSelector,
+        suggestions,
+        isAITEnabling,
+        piiDisplayMode,
+        isVoiceMode,
+        voiceStatus,
+        isVoiceConnecting,
+        isMicMuted,
+        remoteAudioRef,
+        // Actions
+        setInputValue,
+        setIsOpen,
+        setShowPermissionForm,
+        setIsPermissionFormOpen,
+        setPermissions,
+        setIsDisabled,
+        setIsWalletLoading,
+        setNotification,
+        // AI Model related actions
+        setSelectedModelIndex,
+        setSuggestions,
+        setAutoSendEnabled,
+        setTextToSpeechEnabled,
+        // Functions
+        connectWallet,
+        signInWallet,
+        sendMessage,
+        handleSubmit,
+        handlePresetMessage,
+        savePermissions,
+        enableAIT,
+        handleVerifyWalletClick,
+        showSuccess,
+        showError,
+        showWarning,
+        showInfo,
+        refreshAIT,
+        startRecording,
+        stopRecording,
+        clearRecording,
+        // AI Model related functions
+        handleModelChange,
+        getCurrentModel,
+        // Speech related functions
+        playTextToSpeech,
+        stopTextToSpeech,
+        retryTtsWithGesture,
+        uploadAttachment,
+        enterVoiceMode: handleEnterVoiceMode,
+        exitVoiceMode: handleExitVoiceMode,
+        toggleVoiceMicMute,
+        interruptVoice,
+        // Additional properties for PermissionForm
+        onSave: savePermissions,
+        onConnectWallet: () => connectWallet(false),
+        onSignIn: () => signInWallet(false),
+        isNeedSignInWithWallet,
+        onVerifyWallet: (method) => handleVerifyWalletClick(method),
+        serviceId,
+        permissionGroup,
+        // Props
+        props: {
+            onMessage,
+            onError,
+            onToolUse,
+            presetMessages,
+            placeholder,
+            className,
+            maxRetries,
+            retryDelay,
+            serviceId,
+            apiKey,
+            apiSecret,
+            onVerifyWallet,
+            permissionGroup,
+            onModelChange,
+            storageMode,
+            requireWalletIDVVerification,
+            isSemiAutomaticMode,
+            customUserInfo,
+            customUsername,
+            idvBannerDismissSeconds,
+            isStopRecordingOnSend,
+            customError,
+        },
+        nxtlinqApi
+    };
+    return (_jsx(ChatBotContext.Provider, { value: contextValue, children: children }));
+};