@bytexbyte/nxtlinq-ai-agent-sdk 1.2.3 → 1.2.5

package/README.md

@@ -1,26 +1,37 @@
 # Nxtlinq AI Agent SDK
 
-A React SDK designed for Nxtlinq AI Agent, providing complete wallet connection, AIT management, and AI conversation functionality.
+A powerful AI Agent SDK that supports multiple AI model switching, wallet connection, permission management, and more.
 
-## 🚀 Features
+## 🚀 What's New in v1.2.4
 
-- **Modular Design**: Clear code structure, easy to maintain and extend
-- **Wallet Integration**: Support for MetaKeep wallet connection and verification
-- **AIT Management**: Complete AIT (AI Identity Token) creation and management
-- **Permission Control**: Fine-grained permission management and validation
-- **Real-time Chat**: Real-time conversation functionality with AI Agent
-- **Type Safety**: Complete TypeScript type definitions
-- **Responsive UI**: Modern user interface design
+- **🎯 AI Model Switching**: Real-time switching between multiple AI models during conversations
+- **🤖 Multi-Model Support**: Support for Nova, Claude, ChatGPT, Llama, and Gemini
+- **🎨 Enhanced UI**: Model selector dropdown and model badges for messages
+- **💾 Persistent Preferences**: Model selection saved in localStorage
+- **🔧 Improved API**: Enhanced API client with dynamic model endpoints
 
-## 📦 Installation
+## Features
+
+- 🤖 **Multiple AI Models Support**: Supports Nova, Claude, ChatGPT, Llama, Gemini, and other AI models
+- 🔄 **Real-time Model Switching**: Users can switch AI models at any time during conversations
+- 👛 **Wallet Integration**: Supports MetaKeep wallet connection and verification
+- 🔐 **Permission Management**: AIT (AI Identity Token) based permission control system
+- 💬 **Real-time Chat**: Context-aware conversation functionality
+- 🎨 **Customizable UI**: Complete UI components and style customization options
+- 📱 **Responsive Design**: Works seamlessly across different screen sizes
+- 🔒 **Type Safety**: Full TypeScript support with comprehensive type definitions
+
+## Installation
 
 ```bash
 npm install @bytexbyte/nxtlinq-ai-agent-sdk
+# or
+yarn add @bytexbyte/nxtlinq-ai-agent-sdk
 ```
 
-## 🎯 Quick Start
+## Quick Start
 
-### Basic Usage
+### Basic Configuration
 
 ```tsx
 import { ChatBot } from '@bytexbyte/nxtlinq-ai-agent-sdk';
@@ -31,206 +42,472 @@ function App() {
       serviceId="your-service-id"
       apiKey="your-api-key"
       apiSecret="your-api-secret"
-      onMessage={(message) => console.log('New message:', message)}
-      onError={(error) => console.error('Error:', error)}
-      onToolUse={async (toolUse) => {
-        // Handle tool calls
-        console.log('Tool use:', toolUse);
+    />
+  );
+}
+```
+
+### AI Model Switching
+
+```tsx
+import { ChatBot, DEFAULT_AI_MODELS } from '@bytexbyte/nxtlinq-ai-agent-sdk';
+
+function App() {
+  return (
+    <ChatBot
+      serviceId="your-service-id"
+      apiKey="your-api-key"
+      apiSecret="your-api-secret"
+      // Enable AI model switching
+      showModelSelector={true}
+      defaultModelIndex={0} // Start with Nova
+      onModelChange={(model) => {
+        console.log('Switched to:', model.label);
+        // Track model usage
+        analytics.track('model_changed', { model: model.value });
       }}
     />
   );
 }
 ```
 
-### Advanced Configuration
+### Custom Model Configuration
 
 ```tsx
 import { ChatBot } from '@bytexbyte/nxtlinq-ai-agent-sdk';
 
 function App() {
+  // Custom available AI models
+  const customModels = [
+    { label: 'Nova', value: 'nova' },
+    { label: 'Claude', value: 'claude' },
+    { label: 'ChatGPT', value: 'open-ai' },
+    // Add more models as needed
+  ];
+
   return (
     <ChatBot
       serviceId="your-service-id"
       apiKey="your-api-key"
       apiSecret="your-api-secret"
-      permissionGroup="default"
-      maxRetries={3}
-      retryDelay={1000}
-      placeholder="Type your message..."
+      availableModels={customModels}
+      defaultModelIndex={1} // Default to Claude
+      showModelSelector={true}
+      onModelChange={(model) => {
+        console.log('Model changed to:', model.label);
+      }}
+    />
+  );
+}
+```
+
+### Advanced Configuration
+
+```tsx
+import { ChatBot, DEFAULT_AI_MODELS } from '@bytexbyte/nxtlinq-ai-agent-sdk';
+
+function App() {
+  return (
+    <ChatBot
+      serviceId="your-service-id"
+      apiKey="your-api-key"
+      apiSecret="your-api-secret"
+      // AI Model configuration
+      availableModels={DEFAULT_AI_MODELS}
+      defaultModelIndex={0}
+      showModelSelector={true}
+      onModelChange={(model) => {
+        console.log('Model changed to:', model.label);
+        // Update user preferences
+        localStorage.setItem('preferred-model', model.value);
+      }}
+      // Preset messages
       presetMessages={[
-        { text: "Hello", autoSend: false },
-        { text: "Help", autoSend: true }
+        { text: 'Hello, how can you help me?', autoSend: true },
+        { text: 'I want to switch to a different AI model.', autoSend: false },
+        { text: 'What are the differences between the available models?', autoSend: false }
       ]}
+      // Callback functions
+      onMessage={(message) => {
+        console.log('New message:', {
+          content: message.content,
+          role: message.role,
+          model: message.metadata?.model,
+          timestamp: message.timestamp
+        });
+      }}
+      onError={(error) => {
+        console.error('ChatBot error:', error);
+        // Add error reporting
+        errorReporting.captureException(error);
+      }}
+      onToolUse={async (toolUse) => {
+        console.log('Tool used:', toolUse);
+        // Handle tool calls
+        return {
+          id: Date.now().toString(),
+          content: 'Tool executed successfully',
+          role: 'assistant',
+          timestamp: new Date().toISOString()
+        };
+      }}
+      // Wallet verification
       onVerifyWallet={async () => {
         // Custom wallet verification logic
-        return { token: "verification-token" };
+        return { token: 'your-token' };
       }}
+      // Permission group
+      permissionGroup="default"
+      // UI configuration
+      placeholder="Type your message..."
+      className="custom-chatbot"
+      maxRetries={3}
+      retryDelay={1000}
     />
   );
 }
 ```
 
-## 🏗️ Project Structure
-
-```
-src/
-├── components/           # React Components
-│   ├── ChatBot.tsx      # Main component entry
-│   ├── context/         # Context and state management
-│   │   └── ChatBotContext.tsx
-│   ├── types/           # Type definitions
-│   │   └── ChatBotTypes.ts
-│   └── ui/              # UI Components
-│       ├── ChatBotUI.tsx
-│       ├── MessageList.tsx
-│       ├── MessageInput.tsx
-│       ├── PresetMessages.tsx
-│       ├── PermissionForm.tsx
-│       └── NotificationModal.tsx
-├── api/                 # API Layer
-│   └── nxtlinq-api.ts   # API Client
-├── core/                # Core functionality
-│   ├── metakeepClient.ts
-│   ├── lib/             # Utility libraries
-│   │   └── useLocalStorage.ts
-│   └── utils/           # Utility functions
-│       ├── walletUtils.ts
-│       ├── aitUtils.ts
-│       └── notificationUtils.ts
-├── types/               # Global type definitions
-│   ├── ait-api.ts
-│   └── window.d.ts
-└── index.ts             # Main entry file
-```
-
-## 🔧 API Reference
+## API Reference
 
 ### ChatBot Props
 
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `serviceId` | `string` | ✅ | Service ID |
-| `apiKey` | `string` | ✅ | API Key |
-| `apiSecret` | `string` | ✅ | API Secret |
-| `onMessage` | `(message: Message) => void` | ❌ | Message callback |
-| `onError` | `(error: Error) => void` | ❌ | Error callback |
-| `onToolUse` | `(toolUse: ToolUse) => Promise<Message \| void>` | ❌ | Tool use callback |
-| `presetMessages` | `PresetMessage[]` | ❌ | Preset messages |
-| `placeholder` | `string` | ❌ | Input placeholder |
-| `className` | `string` | ❌ | Custom CSS class |
-| `maxRetries` | `number` | ❌ | Maximum retry attempts |
-| `retryDelay` | `number` | ❌ | Retry delay |
-| `onVerifyWallet` | `() => Promise<{token: string} \| undefined>` | ❌ | Wallet verification callback |
-| `permissionGroup` | `string` | ❌ | Permission group |
-
-### Utility Functions
-
-#### Wallet Utilities
-
-```tsx
-import { connectWallet, disconnectWallet, validateToken } from '@bytexbyte/nxtlinq-ai-agent-sdk';
-
-// Connect wallet
-const { address, signer } = await connectWallet();
+| Property | Type | Default | Required | Description |
+|----------|------|---------|----------|-------------|
+| `serviceId` | `string` | - | ✅ | Service ID |
+| `apiKey` | `string` | - | ✅ | API Key |
+| `apiSecret` | `string` | - | ✅ | API Secret |
+| `availableModels` | `AIModel[]` | `DEFAULT_AI_MODELS` | ❌ | Available AI models list |
+| `defaultModelIndex` | `number` | `0` | ❌ | Default selected model index |
+| `showModelSelector` | `boolean` | `true` | ❌ | Whether to show model selector |
+| `onModelChange` | `(model: AIModel) => void` | - | ❌ | Model change callback |
+| `presetMessages` | `PresetMessage[]` | `[]` | ❌ | Preset messages list |
+| `placeholder` | `string` | `'Type a message...'` | ❌ | Input placeholder |
+| `className` | `string` | `''` | ❌ | Custom CSS class name |
+| `maxRetries` | `number` | `3` | ❌ | Maximum retry attempts |
+| `retryDelay` | `number` | `1000` | ❌ | Retry delay (milliseconds) |
+| `onMessage` | `(message: Message) => void` | - | ❌ | Message callback |
+| `onError` | `(error: Error) => void` | - | ❌ | Error callback |
+| `onToolUse` | `(toolUse: ToolUse) => Promise<Message \| void>` | - | ❌ | Tool use callback |
+| `onVerifyWallet` | `() => Promise<{token: string} \| undefined>` | - | ❌ | Wallet verification callback |
+| `permissionGroup` | `string` | - | ❌ | Permission group name |
+
+### AIModel Type
+
+```typescript
+interface AIModel {
+  label: string;  // Display name (e.g., "Nova", "Claude")
+  value: string;  // Model identifier (e.g., "nova", "claude")
+}
+```
 
-// Disconnect wallet
-disconnectWallet();
+### Default AI Models
 
-// Validate token
-const isValid = validateToken(token, address);
+```typescript
+const DEFAULT_AI_MODELS = [
+  { label: 'Nova', value: 'nova' },
+  { label: 'Claude', value: 'claude' },
+  { label: 'ChatGPT', value: 'open-ai' },
+  { label: 'Llama', value: 'llama' },
+  { label: 'Gemini', value: 'gemini' },
+];
 ```
 
-#### AIT Utilities
-
-```tsx
-import { generateAITId, createAITMetadata, prepareAITCreation } from '@bytexbyte/nxtlinq-ai-agent-sdk';
+### Message Type with Model Metadata
+
+```typescript
+interface Message {
+  id: string;
+  content: string;
+  role: 'user' | 'assistant';
+  timestamp: string;
+  metadata?: {
+    model?: string;           // AI model used
+    permissions?: string[];   // User permissions
+    issuedBy?: string;        // Wallet address
+    toolUse?: {              // Tool call information
+      name: string;
+      input: Record<string, any>;
+    };
+  };
+}
+```
 
-// Generate AIT ID
-const aitId = generateAITId(address);
+## Component Usage
 
-// Create AIT metadata
-const metadata = createAITMetadata(permissions, address);
+### Using Components Individually
 
-// Prepare AIT creation parameters
-const { aitId, metadata, metadataHash, createAITParams } = prepareAITCreation(
-  address, 
-  permissions, 
-  serviceId
-);
+```tsx
+import { 
+  ChatBotProvider, 
+  ChatBotUI, 
+  ModelSelector,
+  MessageList,
+  MessageInput 
+} from '@bytexbyte/nxtlinq-ai-agent-sdk';
+
+function CustomChatBot() {
+  return (
+    <ChatBotProvider
+      serviceId="your-service-id"
+      apiKey="your-api-key"
+      apiSecret="your-api-secret"
+    >
+      <div className="custom-chatbot-container">
+        <ChatBotUI />
+      </div>
+    </ChatBotProvider>
+  );
+}
 ```
 
-#### Notification Utilities
+### Custom Layout with Model Selector
 
 ```tsx
-import { createNotification, getNotificationIcon } from '@bytexbyte/nxtlinq-ai-agent-sdk';
+import { 
+  ChatBotProvider, 
+  useChatBot,
+  ModelSelector,
+  MessageList,
+  MessageInput 
+} from '@bytexbyte/nxtlinq-ai-agent-sdk';
+
+function CustomLayout() {
+  const { isOpen, setIsOpen } = useChatBot();
+
+  if (!isOpen) {
+    return (
+      <button onClick={() => setIsOpen(true)}>
+        Open AI Agent
+      </button>
+    );
+  }
 
-// Create notification
-const notification = createNotification('success', 'Operation successful');
+  return (
+    <div className="custom-layout">
+      <header>
+        <h3>AI Assistant</h3>
+        <ModelSelector />
+        <button onClick={() => setIsOpen(false)}>Close</button>
+      </header>
+      <MessageList />
+      <MessageInput />
+    </div>
+  );
+}
 
-// Get notification icon
-const icon = getNotificationIcon('success'); // '✅'
+function App() {
+  return (
+    <ChatBotProvider
+      serviceId="your-service-id"
+      apiKey="your-api-key"
+      apiSecret="your-api-secret"
+    >
+      <CustomLayout />
+    </ChatBotProvider>
+  );
+}
 ```
 
-## 🔒 Permission Management
+## Style Customization
 
-The SDK supports fine-grained permission management:
+### CSS Classes
 
-1. **Connect Wallet**: Users first need to connect their MetaKeep wallet
-2. **Signature Verification**: Users need to sign to verify their identity
-3. **AIT Configuration**: Users can select required permissions
-4. **Permission Validation**: Each tool call validates permissions
-
-## 🎨 Custom Styling
+```css
+/* Main container */
+.nxtlinq-chatbot-container {
+  /* Custom styles */
+}
 
-You can add custom styles through the `className` property:
+/* Message list */
+.nxtlinq-message-list {
+  /* Custom styles */
+}
 
-```css
-.nxtlinq-chatbot {
+/* User message */
+.nxtlinq-user-message {
   /* Custom styles */
-  border-radius: 15px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
-```
 
-## 🐛 Troubleshooting
+/* AI message */
+.nxtlinq-ai-message {
+  /* Custom styles */
+}
 
-### Common Issues
+/* Model selector */
+.nxtlinq-model-selector {
+  /* Custom styles */
+}
 
-1. **Wallet Connection Failed**
-   - Ensure MetaKeep extension is installed
-   - Check network connection
+/* Model badge */
+.nxtlinq-model-badge {
+  /* Custom styles */
+}
+```
 
-2. **Permission Validation Failed**
-   - Ensure AIT permissions are correctly configured
-   - Check service ID and API keys
+### Inline Style Override
 
-3. **Message Sending Failed**
-   - Check network connection
-   - Verify API key and secret
+```tsx
+<ChatBot
+  serviceId="your-service-id"
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  className="my-custom-chatbot"
+  style={{
+    '--primary-color': '#007bff',
+    '--secondary-color': '#6c757d',
+    '--border-radius': '10px',
+    '--model-badge-bg': '#e3f2fd',
+    '--model-badge-color': '#1976d2'
+  }}
+/>
+```
 
-### Debug Mode
+## Event Handling
 
-Enable debug mode to get more information:
+### Model Change Events
 
 ```tsx
 <ChatBot
-  // ... other props
-  onError={(error) => {
-    console.error('ChatBot Error:', error);
+  serviceId="your-service-id"
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  onModelChange={(model) => {
+    console.log('Model changed to:', model.label);
+    // Add analytics tracking
+    analytics.track('model_changed', {
+      model: model.value,
+      label: model.label,
+      timestamp: new Date().toISOString()
+    });
   }}
 />
 ```
 
-## 📄 License
+### Message Events with Model Information
 
-MIT License
-
-## 🤝 Contributing
+```tsx
+<ChatBot
+  serviceId="your-service-id"
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  onMessage={(message) => {
+    console.log('New message:', message);
+    // Track message with model info
+    if (message.role === 'user') {
+      analytics.track('user_message', {
+        content: message.content,
+        model: message.metadata?.model,
+        timestamp: message.timestamp
+      });
+    } else if (message.role === 'assistant') {
+      analytics.track('ai_response', {
+        model: message.metadata?.model,
+        hasToolUse: !!message.metadata?.toolUse,
+        timestamp: message.timestamp
+      });
+    }
+  }}
+/>
+```
 
-Issues and Pull Requests are welcome!
+## Error Handling
 
-## 📞 Support
+```tsx
+<ChatBot
+  serviceId="your-service-id"
+  apiKey="your-api-key"
+  apiSecret="your-api-secret"
+  onError={(error) => {
+    console.error('ChatBot error:', error);
+    // Add error reporting
+    errorReporting.captureException(error);
+    
+    // Track error with context
+    analytics.track('chatbot_error', {
+      error: error.message,
+      stack: error.stack,
+      timestamp: new Date().toISOString()
+    });
+  }}
+/>
+```
 
-For questions, please contact:
-- Email: support@nxtlinq.ai
-- Documentation: https://docs.nxtlinq.ai 
+## Best Practices
+
+### 1. Model Selection
+- Choose appropriate AI models based on use cases
+- Consider user preferences and requirements
+- Monitor model performance and usage
+
+### 2. Error Handling
+- Always provide `onError` callback to handle errors
+- Implement proper error reporting and monitoring
+- Provide fallback mechanisms for failed requests
+
+### 3. User Experience
+- Use preset messages to guide users
+- Provide clear model switching feedback
+- Maintain conversation context across model switches
+
+### 4. Performance Optimization
+- Set reasonable retry counts and delays
+- Implement proper loading states
+- Optimize for different network conditions
+
+### 5. Security
+- Keep API keys secure and use environment variables
+- Validate user permissions before tool calls
+- Implement proper wallet verification
+
+## Migration Guide
+
+### From v1.2.3 to v1.2.4
+
+1. **Update package version**:
+   ```bash
+   npm install @bytexbyte/nxtlinq-ai-agent-sdk@1.2.4
+   ```
+
+2. **Add model switching props** (optional):
+   ```tsx
+   <ChatBot
+     // ... existing props
+     showModelSelector={true}
+     onModelChange={(model) => console.log('Model:', model.label)}
+   />
+   ```
+
+3. **Update message handling** (if needed):
+   ```tsx
+   onMessage={(message) => {
+     // Now includes model information
+     console.log('Model used:', message.metadata?.model);
+   }}
+   ```
+
+## Changelog
+
+### v1.2.4 (Latest)
+- ✨ **NEW**: AI model switching functionality
+- ✨ **NEW**: Support for 5 AI models (Nova, Claude, ChatGPT, Llama, Gemini)
+- ✨ **NEW**: ModelSelector dropdown component
+- ✨ **NEW**: Model badges in messages
+- ✨ **NEW**: Persistent model preferences
+- 🔧 **IMPROVED**: Enhanced API client with dynamic endpoints
+- 🔧 **IMPROVED**: Better TypeScript types and interfaces
+- 📚 **UPDATED**: Comprehensive documentation and examples
+
+### v1.2.3
+- Initial release with basic functionality
+
+## Support
+
+For questions, issues, or feature requests:
+- 📧 Email: support@nxtlinq.ai
+- 📖 Documentation: https://docs.nxtlinq.ai
+- 🐛 Issues: https://github.com/bytexbyte/nxtlinq-ai-agent-sdk/issues
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details. 

package/dist/api/nxtlinq-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nxtlinq-api.d.ts","sourceRoot":"","sources":["../../src/api/nxtlinq-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAiL1C,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,KAAG,MASpE,CAAC"}
+{"version":3,"file":"nxtlinq-api.d.ts","sourceRoot":"","sources":["../../src/api/nxtlinq-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AA6L1C,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,KAAG,MASpE,CAAC"}

package/dist/api/nxtlinq-api.js

@@ -71,12 +71,18 @@ const createAuthApi = (apiKey, apiSecret) => ({
 const createAgentApi = () => ({
     sendMessage: async (params) => {
         try {
-            const response = await fetch(`${AI_AGENT_API_HOST}/api/nova`, {
+            const model = params.model || 'nova';
+            const response = await fetch(`${AI_AGENT_API_HOST}/api/${model}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify(params),
+                body: JSON.stringify({
+                    apiKey: params.apiKey,
+                    apiSecret: params.apiSecret,
+                    message: params.message,
+                    context: params.context || []
+                }),
             });
             if (!response.ok) {
                 throw new Error('Failed to send message');