WeWeb AI Chat Widget

A real-time AI chat widget component for WeWeb that integrates with Make.com webhooks.

Features

• 🤖 Real-time AI chat interface
• 🔄 Make.com webhook integration
• 💾 Message persistence per room
• 🎨 Dark and light themes
• 📱 Responsive design with fullscreen mode
• ⌨️ Keyboard shortcuts
• 🔒 Domain restriction for security

Installation

In your WeWeb project:

1. Go to Components → NPM
2. Search for @wrl04/weweb-ai-chat
3. Install the latest version

Configuration

Required Properties

• Webhook URL: Your Make.com webhook endpoint
• Room ID: Unique identifier for the chat session (can bind to RFP ID)
• User ID: Current user's identifier
• User Name: Display name for the user

Optional Properties

• Placeholder: Input field placeholder text
• Empty State Message: Message shown when chat is empty
• Allow Fullscreen: Enable/disable fullscreen mode
• Theme: Choose between "dark" (default) or "light"

Webhook Integration

Your Make.com webhook should expect the following payload:

{
  "message": "User's message text",
  "roomId": "unique-room-id",
  "rfpId": "same-as-room-id",
  "userId": "user-123",
  "userName": "John Doe",
  "timestamp": "2024-01-15T10:30:00.000Z",
  "messageId": "unique-message-id"
}

Expected response format:

{
  "reply": "AI assistant's response",
  "action": {
    "type": "updateEditor",
    "content": "Optional content to update editor"
  }
}

Keyboard Shortcuts

• Enter: Send message
• Shift + Enter: New line
• Ctrl/Cmd + K: Clear chat
• Escape: Close fullscreen mode

Events

The component emits the following events:

• message: Fired when a message is sent/received
• error: Fired on errors
• ready: Fired when component is initialized

JavaScript API

Access the chat instance programmatically:

// Send a message
window.wwChatApi['your-room-id'].sendMessage('Hello AI!');

// Access specific instance
window.chatInstance_yourRoomId.sendMessage('Hello!');
window.chatInstance_yourRoomId.clearChat();
window.chatInstance_yourRoomId.toggleExpand();

Domain Restriction

The widget is restricted to:

• rfp.effinsystems.com
• *.weweb.io (for development)
• localhost (for testing)

Development

# Install dependencies
npm install

# Run webpack patch
npm run postinstall

# Serve locally
npm run serve

# Build for production
npm run build

License

MIT