@varity-labs/ui-kit 2.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,31 @@
+MIT License
+
+Copyright (c) 2026 Varity Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+Varity SDK - Web3 Operating System
+
+Build and deploy apps on Varity L3 with 70-85% cost savings vs traditional cloud.
+
+For more information, visit https://varity.so
+
+"Powered by Varity" attribution is required when using this SDK.

package/README.md

@@ -0,0 +1,248 @@
+# @varity/ui-kit v2.0.0
+
+**Public Frontend SDK for Varity - Industry-Specific AI Dashboard Deployment**
+
+Complete toolkit for deploying industry-specific AI dashboards to Varity L3 blockchain with template deployment, storage layers, and compliance features.
+
+**Status:** ✅ **ALL BLOCKERS RESOLVED** - Ready for End-to-End Testing (Jan 24, 2026)
+
+## What's Working (Varity L3 - Chain ID 33529)
+
+- ✅ **PrivyStack** - Zero-config auth with email/social/wallet login
+- ✅ **SmartWalletProvider** - Gasless transactions (ERC-4337) - FULLY IMPLEMENTED
+- ✅ **WalletSyncProvider** - Seamless Privy ↔ thirdweb wallet sync
+- ✅ **OnrampWidget** - Credit card to USDC conversion
+- ✅ **All smart contracts deployed** - Revenue split, App Store, Paymaster, Wallet Factory
+
+## Installation
+
+```bash
+npm install @varity/ui-kit
+# or
+pnpm add @varity/ui-kit
+# or
+yarn add @varity/ui-kit
+```
+
+## 🎯 Which Provider Should I Use?
+
+**90% of apps**: Use `PrivyStack` (zero-config auth + wallet + blockchain)
+
+```tsx
+import { PrivyStack } from '@varity/ui-kit';
+
+<PrivyStack>
+  <YourApp />
+</PrivyStack>
+```
+
+**Need gasless transactions?** Add `SmartWalletProvider`
+
+```tsx
+import { PrivyStack, SmartWalletProvider } from '@varity/ui-kit';
+import { createThirdwebClient } from 'thirdweb';
+import { varityL3Testnet } from '@varity/sdk';
+
+const client = createThirdwebClient({
+  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!
+});
+
+<PrivyStack>
+  <SmartWalletProvider
+    config={{
+      client,
+      chain: varityL3Testnet,
+      gasless: { enabled: true }
+    }}
+  >
+    <YourApp />
+  </SmartWalletProvider>
+</PrivyStack>
+```
+
+**Building dashboards?** Use `VarityDashboardProvider` (includes Wagmi + React Query)
+
+```tsx
+import { VarityDashboardProvider } from '@varity/ui-kit';
+
+<VarityDashboardProvider
+  privyAppId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
+  thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
+>
+  <Dashboard />
+</VarityDashboardProvider>
+```
+
+📚 See [Provider Guide](./docs/PROVIDERS.md) for complete decision tree and migration paths.
+
+## Quick Start
+
+```typescript
+import { VarityClient } from '@varity/ui-kit'
+
+// Initialize client
+const client = new VarityClient({
+  apiEndpoint: 'https://api.varity.io',  // or staging/development
+  apiKey: 'your-api-key'
+})
+
+// Deploy industry-specific dashboard
+const deployment = await client.templates.deployTemplate({
+  industry: 'finance',
+  templateId: 'finance-basic',
+  customization: {
+    branding: {
+      companyName: 'Acme Finance',
+      primaryColor: '#1E40AF',
+      darkMode: true
+    }
+  },
+  storageLayer: 'layer3',
+  deploymentType: 'production'
+})
+
+// Use any module
+const kpis = await client.analytics.getKPIs({ period: 'current_month' })
+const aiResponse = await client.compute.query('Analyze my financial data')
+```
+
+## Features
+
+### 🔌 Web3 Provider Stack (NEW in v2.0)
+Zero-config React providers for Web3 apps:
+
+- **PrivyStack** - Auth (email/social/wallet) + thirdweb integration
+- **SmartWalletProvider** - Gasless transactions (ERC-4337)
+- **VarityDashboardProvider** - Full-featured dashboards (Wagmi + React Query)
+- **WalletSyncProvider** - Seamless Privy ↔ thirdweb wallet sync
+
+### 🎯 Template Deployment System
+Deploy pre-configured industry-specific dashboards to Varity L3:
+
+- **Finance** - Banking, compliance, transactions, risk management
+- **Healthcare** - HIPAA compliance, patient data, medical operations
+- **Retail** - E-commerce, inventory, supply chain
+- **ISO Merchant** - Payment processing, PCI compliance
+
+### 🔐 3-Layer Encrypted Storage Architecture
+- **Layer 1** - Varity internal documentation (Varity admins only)
+- **Layer 2** - Industry RAG knowledge base (shared across industry)
+- **Layer 3** - Customer-specific data (private, customer-only access)
+- **ALL layers encrypted with Lit Protocol**
+
+### 🔌 13 Module Clients
+All operations via secure REST API:
+
+- **auth** - SIWE authentication
+- **storage** - Filecoin/IPFS file storage
+- **compute** - AI/LLM on Akash Network
+- **zk** - Zero-knowledge ML proofs
+- **analytics** - Business analytics
+- **notifications** - Email/SMS/push notifications
+- **export** - CSV/JSON/PDF data export
+- **cache** - Redis caching
+- **monitoring** - System health & metrics
+- **forecasting** - Predictive analytics
+- **webhooks** - Webhook management
+- **oracle** - Oracle data feeds
+- **templates** - Industry dashboard deployment (NEW)
+
+### 🎨 React Industry Templates
+- `<FinanceDashboard />` - Financial services dashboard
+- `<HealthcareDashboard />` - Healthcare operations dashboard
+- `<RetailDashboard />` - Retail & e-commerce dashboard
+- `<ISODashboard />` - ISO merchant services dashboard
+
+## API Reference
+
+### Authentication
+
+```typescript
+// Login with SIWE
+const { token } = await client.auth.login(message, signature)
+
+// Get user profile
+const user = await client.auth.me()
+```
+
+### Storage
+
+```typescript
+// Upload file
+const { cid } = await client.storage.uploadFile(file)
+
+// Pin content
+await client.storage.pinCID(cid)
+```
+
+### AI Compute
+
+```typescript
+// Simple query
+const response = await client.compute.query('What are the trends?')
+
+// RAG query
+const response = await client.compute.queryRAG({
+  query: 'Analyze customer behavior',
+  knowledgeBase: 'my-knowledge-base'
+})
+```
+
+### Analytics
+
+```typescript
+// Get KPIs
+const kpis = await client.analytics.getKPIs({
+  period: 'current_month'
+})
+
+// Get trends
+const trends = await client.analytics.getTrends({
+  startDate: '2025-01-01',
+  endDate: '2025-01-31'
+})
+```
+
+## Documentation
+
+### Provider Guides
+- **[Provider Decision Tree](./docs/PROVIDERS.md)** - Which provider should you use? (COMPREHENSIVE)
+- **[Provider Hierarchy](./docs/PROVIDER_HIERARCHY.md)** - Visual architecture diagrams
+- **[Credentials Guide](./docs/CREDENTIALS_GUIDE.md)** - Get Privy App ID & thirdweb Client ID
+
+### Integration Guides
+- **[Privy Integration](./docs/PRIVY_INTEGRATION.md)** - Email/social/wallet authentication
+- **[thirdweb Quickstart](./docs/THIRDWEB_QUICKSTART.md)** - Blockchain operations
+- **[Installation Guide](./docs/INSTALLATION_GUIDE.md)** - Setup and configuration
+
+### Component Reference
+- **[API Reference](./docs/API_REFERENCE.md)** - Complete API documentation
+- **[Web3 Components](./docs/WEB3_COMPONENTS_REPORT.md)** - Wallet, balance, address components
+
+## Security
+
+This SDK is PUBLIC and safe to distribute. It contains:
+
+- ✅ React components
+- ✅ API client (HTTP only)
+- ✅ TypeScript types
+- ❌ NO smart contract logic
+- ❌ NO DePIN orchestration
+- ❌ NO encryption keys
+- ❌ NO business logic
+
+All sensitive operations are handled by the Varity API Server.
+
+## License
+
+MIT License - Safe for commercial use and redistribution
+
+## Support
+
+- Documentation: https://docs.varity.com
+- Discord: https://discord.gg/varity
+- Email: support@varity.com
+
+---
+
+**Powered by Varity** 🚀

package/dist/components/AI/ChatbotWidget.d.ts

@@ -0,0 +1,53 @@
+/**
+ * ChatbotWidget - AI-powered chatbot interface
+ *
+ * Full-featured chatbot widget for conversational AI interactions.
+ */
+import React from 'react';
+import { Message } from './MessageBubble';
+export interface ChatbotWidgetProps {
+    /** Widget title */
+    title?: string;
+    /** Placeholder text for input */
+    placeholder?: string;
+    /** Welcome message */
+    welcomeMessage?: string;
+    /** Send message callback */
+    onSendMessage: (message: string) => Promise<string>;
+    /** Widget height */
+    height?: number | string;
+    /** Widget width */
+    width?: number | string;
+    /** Initial messages */
+    initialMessages?: Message[];
+    /** Show timestamp on messages */
+    showTimestamp?: boolean;
+    /** Enable markdown rendering */
+    enableMarkdown?: boolean;
+    /** Bot avatar URL */
+    botAvatar?: string;
+    /** User avatar URL */
+    userAvatar?: string;
+    /** Loading message text */
+    loadingMessage?: string;
+    /** Error message text */
+    errorMessage?: string;
+}
+/**
+ * ChatbotWidget Component
+ *
+ * @example
+ * ```tsx
+ * <ChatbotWidget
+ *   title="AI Assistant"
+ *   welcomeMessage="Hello! How can I help you today?"
+ *   onSendMessage={async (msg) => {
+ *     const response = await client.compute.query(msg)
+ *     return response.answer
+ *   }}
+ *   height={500}
+ * />
+ * ```
+ */
+export declare const ChatbotWidget: React.FC<ChatbotWidgetProps>;
+//# sourceMappingURL=ChatbotWidget.d.ts.map

package/dist/components/AI/ChatbotWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotWidget.d.ts","sourceRoot":"","sources":["../../../src/components/AI/ChatbotWidget.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAiB,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAGxD,MAAM,WAAW,kBAAkB;IACjC,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACnD,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,EAAE,CAAA;IAC3B,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgKtD,CAAA"}

package/dist/components/AI/ChatbotWidget.js

@@ -0,0 +1,126 @@
+/**
+ * ChatbotWidget - AI-powered chatbot interface
+ *
+ * Full-featured chatbot widget for conversational AI interactions.
+ */
+import React, { useState, useRef, useEffect } from 'react';
+import { MessageBubble } from './MessageBubble';
+import { InputBar } from './InputBar';
+/**
+ * ChatbotWidget Component
+ *
+ * @example
+ * ```tsx
+ * <ChatbotWidget
+ *   title="AI Assistant"
+ *   welcomeMessage="Hello! How can I help you today?"
+ *   onSendMessage={async (msg) => {
+ *     const response = await client.compute.query(msg)
+ *     return response.answer
+ *   }}
+ *   height={500}
+ * />
+ * ```
+ */
+export const ChatbotWidget = ({ title = 'AI Assistant', placeholder = 'Type your message...', welcomeMessage = 'Hello! How can I help you today?', onSendMessage, height = 600, width = '100%', initialMessages = [], showTimestamp = true, enableMarkdown = false, botAvatar, userAvatar, loadingMessage = 'Thinking...', errorMessage = 'Sorry, something went wrong. Please try again.' }) => {
+    const [messages, setMessages] = useState([
+        {
+            id: '1',
+            content: welcomeMessage,
+            sender: 'bot',
+            timestamp: new Date()
+        },
+        ...initialMessages
+    ]);
+    const [isLoading, setIsLoading] = useState(false);
+    const messagesEndRef = useRef(null);
+    // Auto-scroll to bottom
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+    const handleSendMessage = async (content) => {
+        if (!content.trim() || isLoading)
+            return;
+        // Add user message
+        const userMessage = {
+            id: Date.now().toString(),
+            content,
+            sender: 'user',
+            timestamp: new Date()
+        };
+        setMessages((prev) => [...prev, userMessage]);
+        // Show loading
+        setIsLoading(true);
+        try {
+            // Call API
+            const response = await onSendMessage(content);
+            // Add bot response
+            const botMessage = {
+                id: (Date.now() + 1).toString(),
+                content: response,
+                sender: 'bot',
+                timestamp: new Date()
+            };
+            setMessages((prev) => [...prev, botMessage]);
+        }
+        catch (error) {
+            // Add error message
+            const errorMsg = {
+                id: (Date.now() + 1).toString(),
+                content: errorMessage,
+                sender: 'bot',
+                timestamp: new Date(),
+                error: true
+            };
+            setMessages((prev) => [...prev, errorMsg]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (React.createElement("div", { className: "varity-chatbot-widget", style: {
+            width: typeof width === 'number' ? `${width}px` : width,
+            height: typeof height === 'number' ? `${height}px` : height,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: 'var(--varity-bg-card, #ffffff)',
+            border: '1px solid var(--varity-border-color, #e0e0e0)',
+            borderRadius: '12px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+            overflow: 'hidden'
+        } },
+        React.createElement("div", { style: {
+                padding: '16px 20px',
+                backgroundColor: 'var(--varity-primary-color, #1976d2)',
+                color: 'white',
+                borderBottom: '1px solid rgba(255,255,255,0.1)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px'
+            } },
+            React.createElement("span", { style: { fontSize: '24px' } }, "\uD83E\uDD16"),
+            React.createElement("h3", { style: { margin: 0, fontSize: '16px', fontWeight: 600 } }, title)),
+        React.createElement("div", { style: {
+                flex: 1,
+                overflowY: 'auto',
+                padding: '20px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px',
+                backgroundColor: 'var(--varity-bg-secondary, #f9f9f9)'
+            } },
+            messages.map((message) => (React.createElement(MessageBubble, { key: message.id, message: message, showTimestamp: showTimestamp, enableMarkdown: enableMarkdown, botAvatar: botAvatar, userAvatar: userAvatar }))),
+            isLoading && (React.createElement(MessageBubble, { message: {
+                    id: 'loading',
+                    content: loadingMessage,
+                    sender: 'bot',
+                    timestamp: new Date(),
+                    loading: true
+                }, botAvatar: botAvatar })),
+            React.createElement("div", { ref: messagesEndRef })),
+        React.createElement(InputBar, { placeholder: placeholder, onSend: handleSendMessage, disabled: isLoading })));
+};
+//# sourceMappingURL=ChatbotWidget.js.map

package/dist/components/AI/ChatbotWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatbotWidget.js","sourceRoot":"","sources":["../../../src/components/AI/ChatbotWidget.tsx"],"names":[],"mappings":"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"}

package/dist/components/AI/InputBar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * InputBar - Chat input component
+ *
+ * Input field for sending chat messages with support for keyboard shortcuts.
+ */
+import React from 'react';
+export interface InputBarProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Send callback */
+    onSend: (message: string) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show send button */
+    showSendButton?: boolean;
+    /** Max length */
+    maxLength?: number;
+    /** Support multiline (Enter = newline, Ctrl+Enter = send) */
+    multiline?: boolean;
+}
+/**
+ * InputBar Component
+ */
+export declare const InputBar: React.FC<InputBarProps>;
+//# sourceMappingURL=InputBar.d.ts.map

package/dist/components/AI/InputBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBar.d.ts","sourceRoot":"","sources":["../../../src/components/AI/InputBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAA;AAEtD,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oBAAoB;IACpB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqL5C,CAAA"}

package/dist/components/AI/InputBar.js

@@ -0,0 +1,126 @@
+/**
+ * InputBar - Chat input component
+ *
+ * Input field for sending chat messages with support for keyboard shortcuts.
+ */
+import React, { useState } from 'react';
+/**
+ * InputBar Component
+ */
+export const InputBar = ({ placeholder = 'Type a message...', onSend, disabled = false, showSendButton = true, maxLength = 1000, multiline = false }) => {
+    const [message, setMessage] = useState('');
+    const handleSend = () => {
+        const trimmedMessage = message.trim();
+        if (trimmedMessage && !disabled) {
+            onSend(trimmedMessage);
+            setMessage('');
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (multiline) {
+            // Ctrl/Cmd + Enter to send
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                handleSend();
+            }
+        }
+        else {
+            // Enter to send
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        }
+    };
+    const characterCount = message.length;
+    return (React.createElement("div", { className: "varity-input-bar", style: {
+            padding: '16px 20px',
+            backgroundColor: 'var(--varity-bg-card, #ffffff)',
+            borderTop: '1px solid var(--varity-border-color, #e0e0e0)',
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'flex-end'
+        } },
+        React.createElement("div", { style: { flex: 1, position: 'relative' } },
+            multiline ? (React.createElement("textarea", { value: message, onChange: (e) => setMessage(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, maxLength: maxLength, rows: 3, style: {
+                    width: '100%',
+                    padding: '12px 16px',
+                    border: '1px solid var(--varity-border-color, #e0e0e0)',
+                    borderRadius: '8px',
+                    fontSize: '14px',
+                    fontFamily: 'inherit',
+                    resize: 'none',
+                    outline: 'none',
+                    backgroundColor: disabled ? 'var(--varity-bg-disabled, #f5f5f5)' : 'var(--varity-bg-input, #ffffff)',
+                    color: 'var(--varity-text-primary, #212121)',
+                    transition: 'border-color 0.2s ease'
+                }, onFocus: (e) => {
+                    e.currentTarget.style.borderColor = 'var(--varity-primary-color, #1976d2)';
+                }, onBlur: (e) => {
+                    e.currentTarget.style.borderColor = 'var(--varity-border-color, #e0e0e0)';
+                } })) : (React.createElement("input", { type: "text", value: message, onChange: (e) => setMessage(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, maxLength: maxLength, style: {
+                    width: '100%',
+                    padding: '12px 16px',
+                    border: '1px solid var(--varity-border-color, #e0e0e0)',
+                    borderRadius: '8px',
+                    fontSize: '14px',
+                    fontFamily: 'inherit',
+                    outline: 'none',
+                    backgroundColor: disabled ? 'var(--varity-bg-disabled, #f5f5f5)' : 'var(--varity-bg-input, #ffffff)',
+                    color: 'var(--varity-text-primary, #212121)',
+                    transition: 'border-color 0.2s ease'
+                }, onFocus: (e) => {
+                    e.currentTarget.style.borderColor = 'var(--varity-primary-color, #1976d2)';
+                }, onBlur: (e) => {
+                    e.currentTarget.style.borderColor = 'var(--varity-border-color, #e0e0e0)';
+                } })),
+            maxLength && characterCount > maxLength * 0.8 && (React.createElement("span", { style: {
+                    position: 'absolute',
+                    bottom: '-20px',
+                    right: '0',
+                    fontSize: '11px',
+                    color: characterCount >= maxLength
+                        ? 'var(--varity-error-color, #f44336)'
+                        : 'var(--varity-text-secondary, #757575)'
+                } },
+                characterCount,
+                "/",
+                maxLength))),
+        showSendButton && (React.createElement("button", { onClick: handleSend, disabled: disabled || !message.trim(), style: {
+                padding: '12px 24px',
+                backgroundColor: disabled || !message.trim()
+                    ? 'var(--varity-bg-disabled, #e0e0e0)'
+                    : 'var(--varity-primary-color, #1976d2)',
+                color: 'white',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: 600,
+                cursor: disabled || !message.trim() ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2s ease',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                whiteSpace: 'nowrap'
+            }, onMouseEnter: (e) => {
+                if (!disabled && message.trim()) {
+                    e.currentTarget.style.backgroundColor = 'var(--varity-primary-dark, #1565c0)';
+                }
+            }, onMouseLeave: (e) => {
+                if (!disabled && message.trim()) {
+                    e.currentTarget.style.backgroundColor = 'var(--varity-primary-color, #1976d2)';
+                }
+            } },
+            React.createElement("span", null, "Send"),
+            React.createElement("span", null, "\u25B6"))),
+        multiline && (React.createElement("span", { style: {
+                fontSize: '11px',
+                color: 'var(--varity-text-secondary, #757575)',
+                position: 'absolute',
+                bottom: '-20px',
+                left: '20px'
+            } },
+            navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl',
+            "+Enter to send"))));
+};
+//# sourceMappingURL=InputBar.js.map

package/dist/components/AI/InputBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBar.js","sourceRoot":"","sources":["../../../src/components/AI/InputBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/AI/MessageBubble.d.ts

@@ -0,0 +1,37 @@
+/**
+ * MessageBubble - Chat message bubble component
+ *
+ * Displays a single chat message with avatar, timestamp, and formatting.
+ */
+import React from 'react';
+export interface Message {
+    /** Unique message ID */
+    id: string;
+    /** Message content */
+    content: string;
+    /** Message sender */
+    sender: 'user' | 'bot';
+    /** Message timestamp */
+    timestamp: Date;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: boolean;
+}
+export interface MessageBubbleProps {
+    /** Message data */
+    message: Message;
+    /** Show timestamp */
+    showTimestamp?: boolean;
+    /** Enable markdown rendering */
+    enableMarkdown?: boolean;
+    /** Bot avatar URL */
+    botAvatar?: string;
+    /** User avatar URL */
+    userAvatar?: string;
+}
+/**
+ * MessageBubble Component
+ */
+export declare const MessageBubble: React.FC<MessageBubbleProps>;
+//# sourceMappingURL=MessageBubble.d.ts.map