Hey Chris, awesome work getting your basic chatbot up and running! I totally get why you're stuck on adding those conversation bubbles—UI stuff can feel overwhelming when you're used to the backend logic. The good news is you don't need to pre-build hidden bubbles and show them later. A dynamic approach (creating bubbles on the fly as messages are sent) is way more scalable and easier to maintain. Let's walk through exactly how to do this.

Step 1: Set Up Your Basic HTML Structure #

First, you'll need a container for your chat log, plus an input area for users to send messages. Here's a simple, clean setup:

<!-- Chat Log Container -->
<div id="chat-log"></div>

<!-- User Input Area -->
<div class="input-area">
  <input type="text" id="user-input" placeholder="Type your message...">
  <button onclick="sendMessage()">Send</button>
</div>

Step 2: Style the Bubbles with CSS #

Next, use CSS to give user and bot messages distinct bubble styles. We'll use unique classes to separate them—this lets us position them on opposite sides, use different colors, and add that classic bubble shape.

/* Chat log container */
#chat-log {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  height: 400px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

/* Base style for all messages */
.chat-message {
  padding: 10px 15px;
  margin: 8px 0;
  border-radius: 20px;
  max-width: 70%;
  word-wrap: break-word;
  font-size: 14px;
}

/* User message styling (right-aligned, blue) */
.user-message {
  background-color: #007bff;
  color: white;
  margin-left: auto;
}

/* Bot message styling (left-aligned, gray) */
.bot-message {
  background-color: #e9ecef;
  color: #333;
  margin-right: auto;
}

/* Input area styling (optional but polished) */
.input-area {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}

#user-input {
  flex: 1;
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  outline: none;
}

.input-area button {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.input-area button:hover {
  background-color: #0056b3;
}

Step 3: Dynamically Create Bubbles with JavaScript #

Instead of pre-building hidden bubbles, we'll create a new HTML element for each message the moment it's sent. We'll add the right class (user or bot) and append it directly to the chat log. Here's a working sendMessage function example:

function sendMessage() {
  const userInput = document.getElementById('user-input');
  const chatLog = document.getElementById('chat-log');
  
  // Get and validate user input
  const userMessageText = userInput.value.trim();
  if (!userMessageText) return; // Don't send empty messages
  
  // Create user message element and add to chat log
  const userMessage = document.createElement('div');
  userMessage.classList.add('chat-message', 'user-message');
  userMessage.textContent = userMessageText;
  chatLog.appendChild(userMessage);
  
  // Clear input field
  userInput.value = '';
  
  // Auto-scroll to bottom so users see the new message
  chatLog.scrollTop = chatLog.scrollHeight;
  
  // Replace this setTimeout with your actual chatbot logic
  setTimeout(() => {
    // Example bot response (swap this with your bot's real output)
    const botMessageText = "Hey there! I'm your chatbot. Thanks for reaching out—how can I help you today?";
    const botMessage = document.createElement('div');
    botMessage.classList.add('chat-message', 'bot-message');
    botMessage.textContent = botMessageText;
    chatLog.appendChild(botMessage);
    
    // Scroll again after bot sends its reply
    chatLog.scrollTop = chatLog.scrollHeight;
  }, 1000); // Simulate a 1-second delay for realism
}

Why This Approach Beats Pre-Hiding Bubbles #

• Scalability: You don't have to guess how many messages will be sent—each new message gets its own element dynamically.
• Cleaner Code: No messy visibility toggles or unused hidden elements cluttering your HTML.
• Flexibility: It's easy to add extra features later (like timestamps, avatars, or message statuses) by modifying the element creation logic.

Just swap the simulated bot response in the setTimeout with your actual chatbot's reply logic, and you'll have a fully functional chat log with conversation bubbles in no time!

内容的提问来源于stack exchange，提问作者ChrisPerry