​
ChatWidget Component

The ChatWidget component provides a floating chat button with a popup dialog interface, perfect for customer service, help functionality, or any application where you want to offer AI assistance without dedicating screen space to a full chat interface.

​
Features

🎈 Floating Interface

Non-intrusive floating button that expands into a full chat dialog

🎨 Customizable Button

Custom button icons, positioning, and styling options

📱 Responsive Design

Optimized for both desktop and mobile interactions

🔧 Easy Integration

Works seamlessly with existing ChatInterface configurations

​
Basic Usage

The ChatWidget wraps a ChatInterface component and provides its own header, so you typically don’t need to enable showHeader on the internal ChatInterface. 
import { ChatWidget, ChatInterface } from '@termix-it/react-tool';

function App() {
  return (
    <div className="relative h-screen">
      {/* Your main content */}
      <div>Your application content</div>
      
      {/* Fixed positioned chat widget */}
      <div className="fixed bottom-6 right-6">
        <ChatWidget
          title="AI Assistant"
        >
          <ChatInterface
            projectId="your-project-id"
            aiConfigId="your-ai-config-id"
            authorization="Bearer your-token"
            enableStreamingMode={true}
            className="h-full"
          />
        </ChatWidget>
      </div>
    </div>
  );
}

​
ChatWidget Props

Complete reference for all ChatWidget configuration options:
​
title
string
default:"AI Assistant"
Dialog header title displayed at the top of the chat widget
​
buttonIcon
string
default:"undefined"
Custom button icon URL. When not specified, uses the default chat icon
​
className
string
default:""
CSS classes for the widget container
​
style
React.CSSProperties
default:"undefined"
Inline styles for the widget container
​
buttonClassName
string
default:""
CSS classes for the floating chat button
​
buttonStyle
React.CSSProperties
default:"undefined"
Inline styles for the chat button
​
dialogClassName
string
default:""
CSS classes for the chat dialog container
​
dialogStyle
React.CSSProperties
default:"undefined"
Inline styles for the dialog
​
defaultOpen
boolean
default:"false"
Whether the dialog should be open by default when the component mounts
​
onOpenChange
(open: boolean) => void
default:"undefined"
Callback function called when the dialog open state changes
​
children
React.ReactNode
required
Dialog content, typically a ChatInterface component

​
Advanced Examples

​
Custom Button Icon

Replace the default chat icon with your own branding: 
<ChatWidget
  buttonIcon="/assets/support-icon.png"
  title="Customer Support"
  buttonClassName="shadow-lg border-2 border-blue-500"
>
  <ChatInterface {...chatProps} />
</ChatWidget>

​
Controlled State Management

Control the widget’s open/closed state programmatically: 
import { useState } from 'react';

function ControlledWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const [hasNewMessage, setHasNewMessage] = useState(false);
  
  // Open widget when there's a new message
  const handleNewMessage = () => {
    setHasNewMessage(true);
    setIsOpen(true);
  };
  
  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
    if (open) {
      setHasNewMessage(false); // Clear notification when opened
    }
  };
  
  return (
    <div className="fixed bottom-6 right-6">
      <ChatWidget
        defaultOpen={isOpen}
        onOpenChange={handleOpenChange}
        title={hasNewMessage ? "New message!" : "Support Chat"}
        buttonClassName={hasNewMessage ? "animate-bounce bg-red-500" : ""}
      >
        <ChatInterface
          {...chatProps}
          onResponseReceived={handleNewMessage}
        />
      </ChatWidget>
    </div>
  );
}

​
Multi-language Support

Dynamically change widget text based on user language: 
function MultiLanguageWidget() {
  const [language, setLanguage] = useState<'en' | 'es' | 'fr' | 'zh'>('en');
  
  const translations = {
    en: { title: "AI Assistant", placeholder: "How can we help?" },
    es: { title: "Asistente IA", placeholder: "¿Cómo podemos ayudarte?" },
    fr: { title: "Assistant IA", placeholder: "Comment pouvons-nous vous aider?" },
    zh: { title: "智能助手", placeholder: "我们如何为您提供帮助?" }
  };
  
  return (
    <div className="fixed bottom-6 right-6">
      <ChatWidget
        title={translations[language].title}
      >
        <ChatInterface
          {...chatProps}
          placeholder={translations[language].placeholder}
        />
      </ChatWidget>
    </div>
  );
}

​
Integration with Analytics

Track widget usage and interactions: 
function AnalyticsWidget() {
  const handleOpenChange = (open: boolean) => {
    // Track widget interactions
    if (open) {
      analytics.track('chat_widget_opened');
    } else {
      analytics.track('chat_widget_closed');
    }
  };
  
  const handleMessageSent = (message: Message) => {
    analytics.track('chat_message_sent', {
      messageLength: message.content.length,
      timestamp: message.timestamp
    });
  };
  
  return (
    <div className="fixed bottom-6 right-6">
      <ChatWidget
        title="Support"
        onOpenChange={handleOpenChange}
      >
        <ChatInterface
          {...chatProps}
          onMessageSent={handleMessageSent}
        />
      </ChatWidget>
    </div>
  );
}

​
Styling and Positioning

​
Custom Positioning

Place the widget in different screen positions: 
<div className="fixed bottom-6 right-6">
  <ChatWidget title="Support">
    <ChatInterface {...props} />
  </ChatWidget>
</div>

​
Custom Button Styling

Style the floating button to match your brand: 
<ChatWidget
  title="Custom Support"
  buttonClassName="
    bg-gradient-to-r from-purple-500 to-pink-500 
    hover:from-purple-600 hover:to-pink-600
    shadow-lg hover:shadow-xl
    transform hover:scale-110 
    transition-all duration-200
    border-4 border-white
  "
  className="z-50"
>
  <ChatInterface {...chatProps} />
</ChatWidget>

​
Dialog Customization

Customize the chat dialog appearance: 
<ChatWidget
  title="Premium Support"
  dialogClassName="
    border-2 border-gold-400 
    shadow-2xl 
    bg-gradient-to-b from-white to-gray-50
  "
>
  <ChatInterface
    {...chatProps}
    className="bg-transparent"
    messagesClassName="bg-white/90"
  />
</ChatWidget>

​
Integration Patterns

​
With Authentication

Show different widget states based on user authentication: 
function AuthenticatedWidget() {
  const { user, isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return (
      <ChatWidget
        title="Guest Support"
      >
        <div className="p-4 text-center">
          <p className="mb-4">Sign in to access full support features</p>
          <button className="bg-blue-500 text-white px-4 py-2 rounded">
            Sign In
          </button>
        </div>
      </ChatWidget>
    );
  }
  
  return (
    <ChatWidget
      title={`Hi ${user.name}!`}
    >
      <ChatInterface
        {...chatProps}
        placeholder={`Hi ${user.name}, ask me anything...`}
      />
    </ChatWidget>
  );
}

​
With Conditional Display

Show the widget only when appropriate: 
function ConditionalWidget() {
  const [shouldShow, setShouldShow] = useState(false);
  const { pathname } = useRouter();
  
  useEffect(() => {
    // Only show widget on certain pages
    const supportPages = ['/dashboard', '/settings', '/billing'];
    setShouldShow(supportPages.includes(pathname));
  }, [pathname]);
  
  if (!shouldShow) return null;
  
  return (
    <div className="fixed bottom-6 right-6">
      <ChatWidget title="Page Help">
        <ChatInterface {...chatProps} />
      </ChatWidget>
    </div>
  );
}

​
Best Practices

Header Integration: The ChatWidget provides its own header, so set showHeader={false} on your internal ChatInterface to avoid duplication.
Mobile Optimization: The widget automatically adjusts for mobile devices, but test your specific implementation on various screen sizes.
Z-Index Management: Ensure your widget has appropriate z-index values to appear above other content, especially modals and dropdowns.
Avoid placing multiple ChatWidgets on the same page as this can confuse users and create overlapping dialogs.

​
Accessibility

The ChatWidget includes built-in accessibility features:
  • Keyboard Navigation: Full keyboard support for opening, closing, and navigating
  • Screen Reader Support: Proper ARIA labels and announcements
  • Focus Management: Automatic focus handling when opening and closing
  • High Contrast Support: Works with high contrast and dark mode themes

​
Common Use Cases

The ChatWidget component provides a seamless way to integrate AI assistance into any application while maintaining a clean, unobtrusive user interface.