Chat Mockup

A beautiful Metro-style interactive chat client component for displaying message feeds, user profiles, status conditions, and bidirectional communications. Includes built-in support for WebSockets to synchronize message feeds in real-time.

🤖

FrankUI Bot

Online (Simulation)

FrankUI Bot

Hello! Welcome to the new FrankUI Chat component. Type a message below and hit Send!

07:09

🔌 WebSocket Connection

Connect this chat mockup directly to a running PHP WebSocket server to test real-time message broadcasting.

Disconnected

HTML Markup

<!-- Chat Container -->
<div id="my-chat" class="chat-container" data-role="chat">
    <!-- Chat Header -->
    <div class="chat-header">
        <img src="avatar.png" class="chat-header-avatar" alt="User Avatar">
        <div class="chat-header-info">
            <div class="chat-header-name">Sarah Jenkins</div>
            <div class="chat-header-status">Online</div>
        </div>
    </div>
    
    <!-- Chat Messages Feed -->
    <div class="chat-messages">
        <!-- Incoming Message -->
        <div class="chat-message incoming">
            <div class="chat-avatar-initials">SJ</div>
            <div class="chat-message-bubble">
                <div class="chat-message-sender">Sarah Jenkins</div>
                <div class="chat-message-text">Hey there! Are we still meeting up today?</div>
                <div class="chat-message-time">10:30 AM</div>
            </div>
        </div>
        
        <!-- Outgoing Message -->
        <div class="chat-message outgoing">
            <div class="chat-message-bubble">
                <div class="chat-message-text">Yes, absolutely! See you at 2 PM.</div>
                <div class="chat-message-time">10:32 AM</div>
            </div>
        </div>
    </div>
    
    <!-- Chat Input Footer -->
    <div class="chat-footer">
        <div class="chat-input-wrapper">
            <textarea class="chat-input" placeholder="Type a message..." rows="1"></textarea>
        </div>
        <button class="btn primary chat-send">Send</button>
    </div>
</div>

JavaScript API Usage

// Initialize manually if needed
const chatApi = Chat.initChat(document.querySelector('#my-chat'));

// Or retrieve automatically if auto-initialized via data-role
const chatApi = Chat.get('#my-chat');

// Append a message programmatically
chatApi.appendIncoming("How can I help you?", {
    sender: "Support Agent",
    initials: "SA"
});

// Capture and intercept outbound messages
chatApi.onSend((text, appendCallback) => {
    console.log("User typed:", text);
    // You can call appendCallback(text, options) to append it manually,
    // or let the framework auto-append it.
});

// Easy WebSocket Integration
chatApi.connectWebSocket("ws://127.0.0.1:8080", {
    onOpen: (event, api) => {
        console.log("WebSocket Connected!");
    },
    onMessage: (data, api) => {
        // Automatically appends to feed if structure matches,
        // or customize the append here:
        api.appendIncoming(data.message, {
            sender: data.sender || 'Server',
            initials: data.initials || 'S'
        });
    }
});

CSS Classes & Configuration

Class / Attribute	Description
.chat-container	The main wrapper container. Standard height is 450px with vertical flex column orientation.
.chat-header	Top title and user info profile header styled with the main framework background color.
.chat-messages	Scrollable content area containing conversation bubble streams.
.chat-message.incoming	Incoming chat bubble aligned to the left with secondary color theme background.
.chat-message.outgoing	Outgoing chat bubble aligned to the right with primary brand color background.
.chat-avatar	Circular image profile avatar next to message bubbles.
.chat-avatar-initials	Fallback circular block containing user name initials instead of image.
.chat-footer	Input area footer holding the message input field and the action send button.

How to run the PHP WebSocket Server

This framework includes a native, dependency-free PHP WebSocket server script to facilitate local real-time development. To start the server:

# Navigate to the components directory
cd production/www/components

# Run the WebSocket server in PHP
php websocket-server.php

Once executed, you can connect the WebSocket Control Panel in the preview to ws://127.0.0.1:8080. When you send messages, the PHP server will instantly echo and broadcast them back to the active conversation.