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

package/src/legacy/chatbot/types/ChatBotTypes.ts

@@ -0,0 +1,195 @@
+import type { VoiceStatus, AIT, AITApi, Message, ServicePermission, Attachment } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+
+export interface PresetMessage {
+  text: string;
+  autoSend?: boolean;
+}
+
+export interface ToolUse {
+  name: string;
+  input: Record<string, any>;
+}
+
+export interface ToolCall {
+  toolUse: ToolUse;
+}
+
+export interface NovaResponse {
+  result: string;
+  reply: Array<{ text: string }>;
+  toolCall?: ToolCall;
+}
+
+export interface NovaError {
+  error: string;
+}
+
+export interface AITMetadata {
+  permissions: string[];
+  issuedBy: string;
+}
+
+// AI Model related types
+export interface AIModel {
+  label: string;
+  value: string;
+}
+export interface ChatBotProps {
+  onMessage?: (message: Message) => void;
+  onError?: (error: Error) => void;
+  onToolUse?: (
+    toolUse: ToolUse,
+    onProgress?: (update: {
+      status?: string;
+      progress?: number;
+      partialResult?: string;
+      steps?: string[];
+      partialContent?: string;  // Token-level streaming - character-by-character content display
+    }) => void
+  ) => Promise<Message | void>;
+  presetMessages?: PresetMessage[];
+  placeholder?: string;
+  className?: string;
+  maxRetries?: number;
+  retryDelay?: number;
+  serviceId: string;
+  apiKey: string;
+  apiSecret: string;
+  environment?: 'production' | 'staging'; // API environment (default: production)
+  onVerifyWallet?: () => Promise<{
+    token: string;
+  } | undefined>;
+  permissionGroup?: string;
+  children?: React.ReactNode;
+  // AI Model related properties
+  onModelChange?: (model: AIModel) => void;
+  // Storage mode configuration
+  storageMode?: "session-storage" | "local-storage"; // Choose storage type: "session-storage" (no cross-tab sync) or "local-storage" (cross-tab sync, default)
+  // Wallet verification configuration
+  requireWalletIDVVerification?: boolean; // Control whether to check wallet IDV verification status before AIT operations (default: true)
+  isSemiAutomaticMode?: boolean; // Enable semi-automatic mode for fix user activation issue (default: false)
+  // Custom user identity information - additional user identification data
+  customUserInfo?: Record<string, any>; // Custom user identity information object with flexible properties
+  // Custom username for wallet verification
+  customUsername?: string; // Custom username for wallet verification when using custom method
+  // IDV suggestion banner configuration
+  idvBannerDismissSeconds?: number; // Seconds to hide IDV suggestion banner after user dismisses it (default: 86400 = 24 hours)
+  // BerifyMe integration mode configuration
+  berifymeMode?: 'built-in' | 'external'; // BerifyMe integration mode: 'built-in' for SDK internal loading, 'external' for external SDK loading (default: 'built-in')
+  isStopRecordingOnSend?: boolean; // Stop recording automatically when sending message (default: false)
+  // Custom error message to display in chat
+  customError?: string; // Custom error message to display as a chat message when provided
+  /** PII display mode: how PII protection is visualized in chat messages
+   * - 'plain': No visualization, messages look like normal chat
+   * - 'redacted': Anonymized text with PII tokens displayed (default)
+   */
+  piiDisplayMode?: 'plain' | 'redacted';
+}
+
+export interface ChatBotContextType {
+  // State
+  messages: Message[];
+  inputValue: string;
+  isLoading: boolean;
+  isOpen: boolean;
+  hitAddress: string | null;
+  ait: AIT | null;
+  permissions: string[];
+  availablePermissions: ServicePermission[];
+  showPermissionForm: boolean;
+  isPermissionFormOpen: boolean;
+  isAITLoading: boolean;
+  isAITEnabling: boolean;
+  isDisabled: boolean;
+  walletInfo: any;
+  isWalletLoading: boolean;
+  isAutoConnecting: boolean;
+  notification: {
+    show: boolean;
+    type: 'success' | 'error' | 'warning' | 'info';
+    message: string;
+    autoHide?: boolean;
+    duration?: number;
+  };
+  isMicEnabled: boolean;
+  isAwaitingMicGesture: boolean;
+  transcript: string;
+  textInputRef: React.RefObject<HTMLInputElement>;
+  autoSendEnabled: boolean;
+  // Speech related state
+  textToSpeechEnabled: boolean;
+  speechingIndex: number | undefined;
+  isTtsProcessing: boolean;
+  requiresGesture?: boolean;
+  // AI Model related state
+  availableModels: AIModel[];
+  selectedModelIndex: number;
+  showModelSelector: boolean;
+  suggestions: PresetMessage[];
+  // PII Protection visualization
+  piiDisplayMode: 'plain' | 'redacted';
+  // Realtime voice mode (WebRTC)
+  isVoiceMode: boolean;
+  voiceStatus: VoiceStatus;
+  isVoiceConnecting: boolean;
+  isMicMuted: boolean;
+  remoteAudioRef: React.RefObject<HTMLAudioElement>;
+
+  // Actions
+  setInputValue: (value: string) => void;
+  setIsOpen: (open: boolean) => void;
+  setShowPermissionForm: (show: boolean) => void;
+  setIsPermissionFormOpen: (open: boolean) => void;
+  setPermissions: (permissions: string[]) => void;
+  setIsDisabled: (disabled: boolean) => void;
+  setIsWalletLoading: (loading: boolean) => void;
+  setNotification: (notification: any) => void;
+  // AI Model related actions
+  setSelectedModelIndex: (index: number) => void;
+  setSuggestions: (suggestions: PresetMessage[]) => void;
+  setAutoSendEnabled: (enabled: boolean) => void;
+  setTextToSpeechEnabled: (enabled: boolean) => void;
+
+  // Functions
+  connectWallet: (autoShowSignInMessage?: boolean) => Promise<string | false | undefined>;
+  signInWallet: (autoShowSuccessMessage?: boolean) => Promise<void>;
+  sendMessage: (content: string, retryCount?: number) => Promise<void>;
+  handleSubmit: (e: React.FormEvent, attachments?: Attachment[]) => Promise<void>;
+  handlePresetMessage: (message: PresetMessage) => void;
+  savePermissions: (newPermissions?: string[]) => Promise<void>;
+  enableAIT: (toolName: string) => Promise<boolean>;
+  handleVerifyWalletClick: (method: 'berifyme' | 'custom') => Promise<void>;
+  showSuccess: (message: string) => void;
+  showError: (message: string) => void;
+  showWarning: (message: string) => void;
+  showInfo: (message: string) => void;
+  refreshAIT: (forceUpdatePermissions?: boolean) => Promise<void>;
+  startRecording: () => Promise<void>;
+  stopRecording: () => void;
+  clearRecording: () => void;
+  // AI Model related functions
+  handleModelChange: (modelIndex: number) => void;
+  getCurrentModel: () => AIModel;
+  // Speech related functions
+  playTextToSpeech: (text: string) => Promise<void>;
+  stopTextToSpeech: () => void;
+  retryTtsWithGesture?: () => Promise<void>;
+  uploadAttachment: (file: File) => Promise<{ url: string } | { error: string }>;
+  enterVoiceMode: () => Promise<void>;
+  exitVoiceMode: () => Promise<void>;
+  toggleVoiceMicMute: () => void;
+  interruptVoice: () => void;
+
+  // Additional properties for PermissionForm
+  onSave: (newPermissions?: string[]) => Promise<void>;
+  onConnectWallet: () => Promise<string | false | undefined>;
+  onSignIn: () => Promise<void>;
+  isNeedSignInWithWallet: boolean;
+  onVerifyWallet: (method: 'berifyme' | 'custom') => Promise<void>;
+  serviceId: string;
+  permissionGroup?: string;
+
+  // Props
+  props: ChatBotProps;
+  nxtlinqApi: AITApi;
+} 

package/src/legacy/chatbot/ui/BerifyMeModal.tsx

@@ -0,0 +1,145 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React, { useEffect, useRef } from 'react';
+import { modalOverlay } from './styles/isolatedStyles';
+
+interface BerifyMeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onVerificationComplete?: (token?: string) => void;
+  mode?: 'built-in' | 'external'; // BerifyMe integration mode
+}
+
+// Built-in BerifyMe configuration
+const BUILT_IN_BERIFYME_CONFIG = {
+  apiKeyId: 'idv_XjN7vvuQVfHnaUkVQAEhdTuxAsQeKoa9',
+  secretKey: 'aaa444b1-087c-4b17-821a-9a6974286905',
+  environment: 'idv' as const
+};
+
+export const BerifyMeModal: React.FC<BerifyMeModalProps> = ({
+  isOpen,
+  onClose,
+  onVerificationComplete,
+  mode = 'built-in'
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const berifyMeModalRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    if (mode === 'external') {
+      // External mode: This should not be called as BerifyMeModal is not rendered in external mode
+      console.warn('⚠️ BerifyMeModal should not be rendered in external mode');
+      onClose();
+    } else {
+      // Built-in mode: dynamically load BerifyMe SDK
+      const loadBerifyMeSDK = async () => {
+        try {
+          // Check if already loaded
+          if (window.BerifyMeSDK) {
+            renderBerifyMeModal();
+            return;
+          }
+
+          // Dynamically load SDK
+          const script = document.createElement('script');
+          script.src = 'https://docs.nxtlinq.ai/sdk/umd/berifyme-sdk.umd.js';
+          script.onload = () => {
+            if (window.BerifyMeSDK) {
+              renderBerifyMeModal();
+            }
+          };
+          script.onerror = () => {
+            console.error('❌ Failed to load BerifyMe SDK');
+            onClose();
+          };
+          document.head.appendChild(script);
+        } catch (error) {
+          console.error('❌ Error loading BerifyMe SDK:', error);
+          onClose();
+        }
+      };
+
+      loadBerifyMeSDK();
+    }
+
+    return () => {
+      // Cleanup function
+      if (berifyMeModalRef.current) {
+        try {
+          berifyMeModalRef.current.unmount?.();
+        } catch (e) {
+          // Ignore cleanup errors
+        }
+      }
+    };
+  }, [isOpen]);
+
+  const renderBerifyMeModal = () => {
+    if (!window.BerifyMeSDK || !modalRef.current) return;
+
+    try {
+      // Build redirect URL - always redirect to current page
+      const currentUrl = window.location.href;
+      const redirectUrl = `${window.location.origin}${window.location.pathname}?isAutoConnect=true&method=berifyme&returnUrl=${encodeURIComponent(currentUrl)}`;
+
+      // Create BerifyMe modal using built-in config
+      const berifyMeModal = window.BerifyMeSDK.modal;
+
+      // Use React 18's createRoot
+      const { createRoot } = require('react-dom/client');
+      const root = createRoot(modalRef.current);
+      berifyMeModalRef.current = root;
+
+      root.render(React.createElement(berifyMeModal, {
+        environment: BUILT_IN_BERIFYME_CONFIG.environment,
+        apiKeyId: BUILT_IN_BERIFYME_CONFIG.apiKeyId,
+        secretKey: BUILT_IN_BERIFYME_CONFIG.secretKey,
+        redirectUrl,
+        onUpdate: (event: any) => {
+          if (event.detail.page.pageName === 'All Set') {
+            console.log('✅ BerifyMe wallet verification completed successfully!');
+
+            // Get token if available
+            const urlParams = new URLSearchParams(window.location.search);
+            const token = urlParams.get('token');
+
+            // Call completion callback
+            if (onVerificationComplete) {
+              onVerificationComplete(token || undefined);
+            }
+
+            // Close modal
+            onClose();
+          }
+        }
+      }));
+    } catch (error) {
+      console.error('❌ Error rendering BerifyMe modal:', error);
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={modalRef}
+      css={css`
+        ${modalOverlay}
+        z-index: 9999 !important;
+      `}
+    />
+  );
+};
+
+// Add global type declarations
+declare global {
+  interface Window {
+    BerifyMeSDK?: {
+      modal: any;
+    };
+  }
+}