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

package/src/legacy/chatbot/context/ChatBotContext.tsx

@@ -0,0 +1,3227 @@
+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';
+import type {
+  AgentResponse,
+  AIT,
+  Attachment,
+  ClientTtsVoiceSettings,
+  Message,
+  ServicePermission,
+} from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import {
+  AIModel,
+  ChatBotContextType,
+  ChatBotProps,
+  PresetMessage
+} from '../types/ChatBotTypes';
+
+const MIC_ENABLED_SESSION_KEY = 'chatbot-mic-enabled';
+
+const ChatBotContext = React.createContext<ChatBotContextType | undefined>(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: React.FC<ChatBotProps> = ({
+  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" as "session-storage" | "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<ClientTtsVoiceSettings | undefined>(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<Message[]>('chatbot-messages', [])
+    : useSessionStorage<Message[]>('chatbot-messages', []);
+  const [isOpen, setIsOpen] = storageMode === "session-storage"
+    ? useSessionStorage<boolean>('chatbot-is-open', false)
+    : React.useState<boolean>(false);
+
+  const [inputValue, setInputValue] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [hitAddress, setHitAddress] = React.useState<string | null>(null);
+  const [ait, setAit] = React.useState<AIT | null>(null);
+  const [permissions, setPermissions] = React.useState<string[]>([]);
+  const [availablePermissions, setAvailablePermissions] = React.useState<ServicePermission[]>([]);
+  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<ethers.JsonRpcSigner | null>(null);
+  const [walletInfo, setWalletInfo] = React.useState<any>(null);
+  const [isWalletLoading, setIsWalletLoading] = React.useState(false);
+  const [isAutoConnecting, setIsAutoConnecting] = React.useState(false);
+
+  // Persistent data (always use localStorage)
+  const [nxtlinqAITServiceAccessToken, setNxtlinqAITServiceAccessToken] = useLocalStorage<string>('nxtlinqAITServiceAccessToken', '');
+  const [pseudoId, setPseudoId] = useLocalStorage<string>('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<PresetMessage[]>('chatbot-suggestions', presetMessages)
+    : useSessionStorage<PresetMessage[]>('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<boolean>('chatbot-auto-send-enabled', true);
+
+  // Speech related state
+  const [textToSpeechEnabled, setTextToSpeechEnabled] = useLocalStorage<boolean>('chatbot-text-to-speech-enabled', false);
+  const [preferredChatMode, setPreferredChatMode] = useLocalStorage<'text' | 'voice'>('chatbot-active-mode', 'text');
+  const [speechingIndex, setSpeechingIndex] = React.useState<number | undefined>(undefined);
+
+  // Speech related refs
+  const audioCtxRef = React.useRef<AudioContext | null>(null);
+  const audioSourceRef = React.useRef<AudioBufferSourceNode | null>(null);
+  const audioElementRef = React.useRef<HTMLAudioElement | null>(null);
+  const speechingRef = React.useRef(false);
+  const [isTtsProcessing, setIsTtsProcessing] = React.useState(false);
+  const [requiresGesture, setRequiresGesture] = React.useState(false);
+  const pendingTtsRef = React.useRef<string | null>(null);
+  /** Azure Speech STT：每次麥克風成功開啟時記錄，供寫入後端 usage log（開麥→送出） */
+  const messagesRef = React.useRef(messages);
+  messagesRef.current = messages;
+  const micSessionStartForLogRef = React.useRef<number | null>(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: string | undefined): string | undefined => {
+    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<(() => void) | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement | null>(null);
+  const lastPartialRangeRef = React.useRef<{ start: number; end: number } | null>(null);
+  const lastAutoSentTranscriptRef = React.useRef<string>('');
+  const autoSendTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+  const lastCustomErrorRef = React.useRef<string | undefined>(undefined);
+
+  function insertPartial(input: string, partial: string, caret: number) {
+    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: string, finalText: string) {
+    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: string): string {
+    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: string, messageIndex?: number, attempt = 0): Promise<void> => {
+    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 as any)?.enumerateDevices?.();
+          const speakerDevice = devices?.find((d: any) => d.kind === 'audiooutput' && d.label.toLowerCase().includes('speaker'));
+          if (speakerDevice) await (audio as any).setSinkId(speakerDevice.deviceId);
+          else await (audio as any).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<void>(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 as any);
+        };
+        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 as any);
+                }
+              },
+              (decodeErr) => {
+                // If decode also fails, give up
+                speechingRef.current = false;
+                setSpeechingIndex(undefined);
+                URL.revokeObjectURL(audioUrl);
+                audioElementRef.current = null;
+                clearProcessingState();
+                reject(decodeErr as any);
+              }
+            );
+          } catch (fallbackErr) {
+            // Play failed (e.g., user interaction required)
+            speechingRef.current = false;
+            setSpeechingIndex(undefined);
+            URL.revokeObjectURL(audioUrl);
+            audioElementRef.current = null;
+            clearProcessingState();
+            reject(fallbackErr as any);
+          }
+        });
+      });
+      return;
+    }
+
+    if (audioCtxRef.current === null) {
+      audioCtxRef.current = new AudioContext();
+    }
+    audioSourceRef.current = audioCtxRef.current.createBufferSource();
+    if (!audioSourceRef.current) return;
+    const buffer = await new Promise<AudioBuffer>((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<void>((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 as NodeJS.Timeout);
+      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 as NodeJS.Timeout);
+        autoSendTimerRef.current = null;
+      }
+    }
+    return () => {
+      if (autoSendTimerRef.current) {
+        clearTimeout(autoSendTimerRef.current as NodeJS.Timeout);
+        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 as NodeJS.Timeout);
+        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: Array<keyof WindowEventMap> = ['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: 'initial' | 'user-gesture') {
+      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: any) {
+          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: any[]) => {
+        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: boolean;
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    autoHide?: boolean;
+    duration?: number;
+  }>({
+    show: false,
+    type: 'info',
+    message: '',
+    autoHide: true,
+    duration: 5000
+  });
+
+  // AI Model related state
+  const [modelsFromApi, setModelsFromApi] = React.useState<AIModel[]>([]);
+  const [selectedModelIndex, setSelectedModelIndex] = useLocalStorage<number>('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: 'success' | 'error' | 'warning' | 'info', message: string, duration = 5000) => {
+    setNotification({
+      show: true,
+      type,
+      message,
+      autoHide: true,
+      duration
+    });
+
+    if (duration > 0) {
+      setTimeout(() => {
+        setNotification(prev => ({ ...prev, show: false }));
+      }, duration);
+    }
+  };
+
+  const showSuccess = (message: string) => showNotification('success', message, 3000);
+  const showError = (message: string) => showNotification('error', message, 5000);
+  const showWarning = (message: string) => showNotification('warning', message, 4000);
+  const showInfo = (message: string) => showNotification('info', message, 3000);
+
+  // Show "Please log in again." instead of raw "Invalid or expired token" to users (English)
+  const normalizeErrorForUser = (message: string): string =>
+    /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 (): Promise<ServicePermission[] | undefined> => {
+    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' as const,
+              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: string, autoRetry = true, onAutoConnect?: () => void, onAutoSignIn?: () => void): Promise<boolean> => {
+    // 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: number) => {
+    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: string, externalId?: string) => {
+    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: string) => ({
+      text: sug,
+      autoSend: true
+    })));
+  }, [])
+
+  // Updated sendMessage function to support different AI models and attachments
+  const sendMessage = async (
+    content: string,
+    retryCount = 0,
+    isPresetMessage = false,
+    attachments?: Attachment[],
+    clientPipelineOverride?: Array<{ name: string; durationMs: number }>
+  ): Promise<void> => {
+    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: Message = {
+        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: string | null = 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: Array<{ name: string; durationMs: number }> | undefined;
+      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: AgentResponse = 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: string) => {
+            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: 'scan_start' | 'scan_complete' | 'send_start' | 'done', data?: any) => {
+          const stepMap: Record<string, 0 | 1 | 2> = {
+            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: Partial<typeof updated[0]> = { 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 as { error?: string }).error)) {
+        const tr = response as AgentResponse;
+        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 as any).model || currentModel.value;
+
+      if ('error' in response || (response as any).result === 'error') {
+        // Check if it's an AIT-related error
+        const errorResponse = response as any;
+        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: Message | undefined;
+
+      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: any) => item.text)
+              .join(' ') || ''
+            : response.reply || '';
+        } else {
+          replyText = response.fullResponse?.output?.message?.content
+            ?.find((item: any) => 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 as any)?.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: Message = {
+            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: any) => item.text)
+                .join(' ') || ''
+              : response.reply || '';
+          } else if (response.fullResponse?.output?.message?.content) {
+            replyText = response.fullResponse.output.message.content
+              ?.find((item: any) => 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: any) => item.text)
+                .join(' ') || ''
+              : response.reply || '';
+          } else if (response.fullResponse?.output?.message?.content) {
+            replyText = response.fullResponse.output.message.content
+              ?.find((item: any) => 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: Message = {
+            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: any) => 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: Message = {
+          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: any) => item.text)?.text || 'Sorry, I cannot understand your question';
+
+        const newBotResponse: Message = {
+          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: Message = {
+          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: Message = {
+        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: React.FormEvent, attachments?: Attachment[]) => {
+    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 as NodeJS.Timeout);
+      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: Message = {
+        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: Message = {
+        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: string, messageIndex?: number): Promise<void> => {
+    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: any;
+    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: File): Promise<{ url: string } | { error: string }> => {
+    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: PresetMessage) => {
+    // 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: Message = {
+        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?: string[], 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?: string[],
+    isFromAIAgent = false,
+    explicitSigner?: ethers.JsonRpcSigner,
+    explicitAddress?: string
+  ) => {
+    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: string) => {
+    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?: string[]) => {
+    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: 'berifyme' | 'custom') => {
+    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 as any).response?.data?.error || (error as unknown as 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' as const,
+          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: Message = {
+        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: ChatBotContextType = {
+    // 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: 'berifyme' | 'custom') => 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 (
+    <ChatBotContext.Provider value={contextValue}>
+      {children}
+    </ChatBotContext.Provider>
+  );
+};