Chat Component

Chat Component

Axiom01's chat component provides a clean and functional interface for displaying conversational messages. It's designed to be easily integrated into various applications, from customer support widgets to internal communication tools.

Basic Chat Widget

Code Example

<div class="chat-container">
		 <div class="history">
				 <div class="message bot">Hello! How can I help you today?</div>
				 <div class="message user">I need assistance with my order.</div>
				 <div class="message bot">Certainly! Could you please provide your order number?</div>
				 <div class="message user">It's #AXM012345.</div>
				 <div class="message bot">Thank you. Please wait a moment while I retrieve the details.</div>
		 </div>
		 <form>
				 <input type="text" placeholder="Type your message...">
				 <button class="button primary">Send</button>
		 </form>
 </div>

Usage Guidelines

The .chat-container class defines the main wrapper for the chat interface. The .history div holds all chat messages, which are styled with the .message class. Use the .bot and .user modifier classes to differentiate messages from the chatbot and the user, respectively. The input area is a standard <form> containing an <input type="text"> and a .button.

You will need JavaScript to handle sending and receiving messages, scrolling to the latest message, and dynamically adding new messages to the .history.