Smash AI Chat Widget

The primary interface for conversational AI in LibreApps Desktop.

Overview

The SmashChatWidget is a powerful, pre-built component that allows you to add a conversational AI interface to any page in your dashboard with just a few lines of code.

Key Features

• Streaming Responses: Real-time message delivery for a smooth user experience.
• Context Aware: Automatically includes relevant page context in the AI's prompts.
• Customizable: Easily change the title, initial message, and appearance.
• Secure: Communicates with LibreApps Desktop AI Chat Server, keeping your API keys safe on the backend.
• Responsive: Works perfectly on both desktop and mobile devices.

Usage

import { SmashChatWidget } from '@/components/ai/smash-chat';

export function MyPage() {
  return (
    <div>
      {/* Your page content */}
      <SmashChatWidget 
        title="AI Assistant"
        initialMessage="Hello! How can I help you today?"
      />
    </div>
  );
}

Props

Prop	Type	Description
title	string	The title displayed at the top of the chat window.
initialMessage	string	The first message the AI sends to the user.
model	string	(Optional) The specific AI model to use for this chat.
context	object	(Optional) Additional data to include in the AI's context.
position	'bottom-right' | 'bottom-left'	The position of the floating chat icon.

Best Practices

• ✅ Do this: Use a descriptive title that reflects the AI's purpose on the page.
• ✅ Do this: Provide a helpful initialMessage to guide the user.
• ❌ Don't do this: Overload the context prop with unnecessary data; keep it focused on what the AI needs to know.