admesh-ui-sdk 0.5.0 → 0.6.1

package/README.md

@@ -95,6 +95,20 @@ Customizable header with search, title, and collapse functionality.
 #### AdMeshSidebarContent
 Content area with tabs, filtering, and multiple display modes.
 
+### 💬 Chat Components
+
+#### AdMeshFloatingChat
+Floating chat widget that can be embedded on any website for AI-powered recommendations.
+
+#### AdMeshChatInterface
+Embeddable chat interface for integrating conversational AI into web applications.
+
+#### AdMeshChatMessage
+Individual chat message component with recommendation support.
+
+#### AdMeshChatInput
+Chat input component with suggestions and auto-resize functionality.
+
 ## 🎨 Theming
 
 ```tsx
@@ -371,6 +385,173 @@ function AppWithSidebar() {
 />
 ```
 
+## 💬 Chat Components
+
+Perfect for websites and applications that want to provide AI-powered recommendations through chat interfaces.
+
+### Quick Start - Floating Chat Widget
+
+```tsx
+import React, { useState } from 'react';
+import { AdMeshFloatingChat } from 'admesh-ui-sdk';
+
+function WebsiteWithChat() {
+  const [chatOpen, setChatOpen] = useState(false);
+
+  const handleSendMessage = async (message) => {
+    // Call your AI API to get response with recommendations
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      body: JSON.stringify({ message })
+    });
+
+    const data = await response.json();
+
+    return {
+      id: `assistant-${Date.now()}`,
+      role: 'assistant',
+      content: data.response,
+      timestamp: new Date(),
+      recommendations: data.recommendations
+    };
+  };
+
+  return (
+    <div>
+      {/* Your website content */}
+      <main>
+        <h1>Your Website</h1>
+        <p>The chat widget appears in the corner</p>
+      </main>
+
+      {/* AdMesh Floating Chat */}
+      <AdMeshFloatingChat
+        config={{
+          position: 'bottom-right',    // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+          size: 'md',                 // 'sm' | 'md' | 'lg' | 'xl'
+          autoOpen: false,            // Auto-open on page load
+          showWelcomeMessage: true,
+          welcomeMessage: "Hi! How can I help you find the perfect products?",
+          enableSuggestions: true,
+          suggestions: [
+            "I need software recommendations",
+            "What tools do you recommend?",
+            "Help me find the right solution"
+          ]
+        }}
+        theme={{ mode: 'light' }}
+        title="AI Assistant"
+        subtitle="Get personalized recommendations"
+        isOpen={chatOpen}
+        onToggle={() => setChatOpen(!chatOpen)}
+        onSendMessage={handleSendMessage}
+        onRecommendationClick={(adId, admeshLink) => {
+          window.open(admeshLink, '_blank');
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Embedded Chat Interface
+
+```tsx
+import React, { useState } from 'react';
+import { AdMeshChatInterface } from 'admesh-ui-sdk';
+
+function ChatPage() {
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSendMessage = async (messageContent) => {
+    // Add user message
+    const userMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: messageContent,
+      timestamp: new Date(),
+    };
+    setMessages(prev => [...prev, userMessage]);
+    setIsLoading(true);
+
+    // Get AI response
+    const response = await getAIResponse(messageContent);
+    setMessages(prev => [...prev, response]);
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="h-screen">
+      <AdMeshChatInterface
+        messages={messages}
+        config={{
+          placeholder: "Ask me about products...",
+          enableTypingIndicator: true,
+          maxMessages: 50
+        }}
+        theme={{ mode: 'light' }}
+        isLoading={isLoading}
+        onSendMessage={handleSendMessage}
+        onRecommendationClick={(adId, link) => window.open(link)}
+      />
+    </div>
+  );
+}
+```
+
+### Chat Features
+
+- **Floating Widget**: Non-intrusive chat button that expands to full chat
+- **Multiple Positions**: Place in any corner of the screen
+- **Responsive Sizes**: From compact mobile to large desktop
+- **Auto-open**: Proactive engagement with visitors
+- **Welcome Messages**: Customizable greeting messages
+- **Quick Suggestions**: Pre-defined conversation starters
+- **Typing Indicators**: Visual feedback during AI response generation
+- **Message History**: Persistent conversation state
+- **Recommendation Display**: Inline product recommendations with tracking
+- **Theme Support**: Light/dark modes with custom branding
+
+### Configuration Examples
+
+```tsx
+// Compact bottom-left widget
+<AdMeshFloatingChat
+  config={{
+    position: 'bottom-left',
+    size: 'sm',
+    autoOpen: false,
+    showWelcomeMessage: true,
+    welcomeMessage: "Need help finding something?"
+  }}
+/>
+
+// Large auto-opening widget with suggestions
+<AdMeshFloatingChat
+  config={{
+    position: 'bottom-right',
+    size: 'lg',
+    autoOpen: true,
+    enableSuggestions: true,
+    suggestions: [
+      "Show me your best products",
+      "I need business software",
+      "Help me choose the right tool"
+    ]
+  }}
+/>
+
+// Embedded chat with message limit
+<AdMeshChatInterface
+  config={{
+    maxMessages: 20,
+    enableTypingIndicator: true,
+    placeholder: "What can I help you find today?"
+  }}
+/>
+```
+
 ## 📊 Tracking
 
 All components include built-in view and click tracking:

package/dist/index.d.ts

@@ -9,6 +9,52 @@ export declare interface AdMeshBadgeProps {
     className?: string;
 }
 
+export declare interface AdMeshChatConfig {
+    position: ChatPosition;
+    size: ChatSize;
+    displayMode: ChatDisplayMode;
+    autoOpen?: boolean;
+    showWelcomeMessage?: boolean;
+    welcomeMessage?: string;
+    placeholder?: string;
+    maxMessages?: number;
+    enableTypingIndicator?: boolean;
+    enableSuggestions?: boolean;
+    suggestions?: string[];
+}
+
+export declare const AdMeshChatInput: default_2.FC<AdMeshChatInputProps>;
+
+export declare interface AdMeshChatInputProps {
+    placeholder?: string;
+    disabled?: boolean;
+    suggestions?: string[];
+    theme?: AdMeshTheme;
+    onSendMessage?: (message: string) => void;
+    className?: string;
+}
+
+export declare const AdMeshChatInterface: default_2.FC<AdMeshChatInterfaceProps>;
+
+export declare interface AdMeshChatInterfaceProps {
+    messages: ChatMessage[];
+    config: Partial<AdMeshChatConfig>;
+    theme?: AdMeshTheme;
+    isLoading?: boolean;
+    onSendMessage?: (message: string) => void;
+    onRecommendationClick?: (adId: string, admeshLink: string) => void;
+    className?: string;
+}
+
+export declare const AdMeshChatMessage: default_2.FC<AdMeshChatMessageProps>;
+
+export declare interface AdMeshChatMessageProps {
+    message: ChatMessage;
+    theme?: AdMeshTheme;
+    onRecommendationClick?: (adId: string, admeshLink: string) => void;
+    className?: string;
+}
+
 export declare const AdMeshCompareTable: default_2.FC<AdMeshCompareTableProps>;
 
 export declare interface AdMeshCompareTableProps {
@@ -54,6 +100,20 @@ export declare interface AdMeshConversationSummaryProps {
     className?: string;
 }
 
+export declare const AdMeshFloatingChat: default_2.FC<AdMeshFloatingChatProps>;
+
+export declare interface AdMeshFloatingChatProps {
+    config: AdMeshChatConfig;
+    theme?: AdMeshTheme;
+    title?: string;
+    subtitle?: string;
+    isOpen?: boolean;
+    onToggle?: () => void;
+    onSendMessage?: (message: string) => Promise<ChatMessage>;
+    onRecommendationClick?: (adId: string, admeshLink: string) => void;
+    className?: string;
+}
+
 export declare const AdMeshInlineRecommendation: default_2.FC<AdMeshInlineRecommendationProps>;
 
 export declare interface AdMeshInlineRecommendationProps {
@@ -231,6 +291,23 @@ export declare type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warnin
 
 export declare const buildAdMeshLink: (baseLink: string, adId: string, additionalParams?: Record<string, string>) => string;
 
+export declare type ChatDisplayMode = 'widget' | 'fullscreen' | 'embedded';
+
+export declare interface ChatMessage {
+    id: string;
+    role: ChatMessageRole;
+    content: string;
+    timestamp: Date;
+    recommendations?: AdMeshRecommendation[];
+    isTyping?: boolean;
+}
+
+export declare type ChatMessageRole = 'user' | 'assistant' | 'system';
+
+export declare type ChatPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+export declare type ChatSize = 'sm' | 'md' | 'lg' | 'xl';
+
 export declare interface ConversationalAdConfig {
     displayMode: ConversationalDisplayMode;
     context: ConversationContext;