Tailwind css實戰，基于Kooboo構建AI對話框頁面（二）

基于上篇內容，添加交互邏輯，實現一個偽聊天功能的對話框效果：?

Tailwind css實戰，基于Kooboo構建AI對話框頁面（一）-CSDN博客

在前期文章中，我們完成了 AI 對話框的靜態頁面搭建。本文將聚焦交互邏輯開發，通過原生 JavaScript 實現消息發送 / 接收動態渲染、“正在輸入” 動畫反饋及關鍵詞觸發的智能回復，最終實現一個具備對話能力的交互界面。以下是核心功能的代碼實現與邏輯解析：

一、技術棧

1. 技術棧說明

Kooboo：快速構建對話界面的靜態結構（如消息容器、輸入框、按鈕的布局）。通過拖拽組件和樣式配置（直接應用 Tailwind 類名），生成基礎 HTML 框架，無需手動編寫重復代碼。
Tailwind CSS：通過類名快速實現對話氣泡樣式（如bg-blue-600用戶消息、bg-whiteAI 回復）
原生 JavaScript：通過監聽用戶操作，動態渲染消息，與 Kooboo 生成的靜態 DOM 無縫協作，確保交互功能的靈活性

二、核心文件結構

1. 初始化與 DOM 元素獲取

document.addEventListener('DOMContentLoaded', function() {const messageContainer = document.getElementById('messageContainer');const messageInput = document.getElementById('messageInput');const sendButton = document.getElementById('sendButton');
});

事件監聽：頁面 DOM 加載完成后執行初始化
元素引用：獲取消息容器、輸入框和發送按鈕的 DOM 節點

2. 時間格式化函數

// 獲取當前時間（格式：HH:MM AM/PM）
function getCurrentTime() {const now = new Date();let hours = now.getHours();let minutes = now.getMinutes();const ampm = hours >= 12 ? 'PM' : 'AM';hours = hours % 12;hours = hours ? hours : 12; // 0點轉為12點minutes = minutes < 10 ? '0'+minutes : minutes;return `${hours}:${minutes} ${ampm}`;
}

時間格式：將 24 小時制轉換為 12 小時制（例如：2:30 PM）
補零處理：分鐘數小于 10 時添加前導零（例如：2:05 PM）

3. 消息發送功能

? ? ?3.1 獲取用戶輸入并校驗

function sendMessage() {const message = messageInput.value.trim();if (message === '') return; // 忽略空消息

去除空格：獲取輸入框中的內容并去除前后空格。
空消息過濾：如果輸入內容為空，直接返回，不執行后續操作，避免發送空消息。

? ? ? 3.2?生成用戶消息的 HTML 結構：

// 添加用戶消息const userMessageHtml = `<div class="flex items-start space-x-2 justify-end"><div class="max-w-[70%]"><div class="bg-blue-600 text-white p-4 rounded-lg rounded-tr-none shadow-sm"><p>${message}</p><span class="text-xs text-blue-200 mt-1 block">${getCurrentTime()}</span></div></div><div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"><span class="text-white">我</span></div></div>

外層容器：flex items-start space-x-2 justify-end：使用彈性布局，子元素從頂部開始排列，水平間距為 2 單位，用戶消息右對齊（justify-end）。
消息內容區域：max-w-[70%]：消息內容最大寬度為父容器的 70%，避免消息過寬。
消息氣泡：bg-blue-600 text-white p-4 rounded-lg rounded-tr-none shadow-sm：藍色背景，白色文字，內邊距 4 單位，圓角（右上角為直角，rounded-tr-none），添加陰影。
消息內容：<p>${message}</p>：顯示用戶輸入的消息內容。
時間戳：<span class="text-xs text-blue-200 mt-1 block">${getCurrentTime()}</span>：小字體，淺藍色，距離頂部 1 單位，塊級元素，顯示當前時間（通過getCurrentTime函數獲取）。
用戶頭像：w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center：8x8 單位的圓形，藍色背景，內部文字 “我” 居中顯示。

????????3.3 插入用戶消息到容器：

messageContainer.insertAdjacentHTML('beforeend', userMessageHtml);

將生成的用戶消息 HTML 插入到messageContainer的末尾，更新界面顯示用戶消息。

? ? ? ? 3.4 清空輸入框并聚焦：

messageInput.value = '';
messageInput.focus();

清空輸入框內容，準備接收下一條消息，并將焦點保持在輸入框，方便用戶繼續輸入。

? ? ? ? 3.5 滾動到底部：

scrollToBottom();

調用scrollToBottom函數，確保消息容器滾動到最底部，顯示最新的用戶消息。

4. "正在輸入" 動畫效果

// 顯示加載指示器
const typingIndicator = `<div id="typingIndicator" class="flex items-start space-x-2"><div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">🤖</div><div class="max-w-[70%]"><div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm"><div class="flex space-x-1"><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse" style="animation-delay: 0.4s"></div></div></div></div></div>
`;
messageContainer.insertAdjacentHTML('beforeend', typingIndicator);
scrollToBottom();

動畫實現：使用三個小圓點的脈沖動畫（animate-pulse）
交錯延遲：通過 CSS 動畫延遲（0.2s 和 0.4s）創造波浪效果
AI 標識：使用🤖圖標區分 AI 回復

5. 模擬 AI 回復邏輯

// 模擬AI回復setTimeout(() => {// 移除"正在輸入"指示器const typing = document.getElementById('typingIndicator');if (typing) typing.remove();// 根據用戶消息生成不同的回復let aiResponse = "";if (message.toLowerCase().includes('python')) {aiResponse = `這是一個簡單的Python函數示例：def calculate_sum(a, b):"""計算兩個數字的和"""return a + b# 調用函數result = calculate_sum(5, 3)print(f"結果是: {result}") \n這個函數接受兩個參數并返回它們的和。`;} else if (message.toLowerCase().includes('hello') || message.toLowerCase().includes('hi')) {aiResponse = "您好！很高興見到您。有什么我可以幫助您的嗎？";} else if (message.includes('你是誰')) {aiResponse = "我是AI小助手，您的智能聊天伙伴！";} else {aiResponse = "感謝您的提問。我正在學習更多知識，以便更好地回答您的問題。";}// 添加AI回復const aiMessageHtml = `<div class="flex items-start space-x-2"><div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">🤖</div><div class="max-w-[70%]"><div class="bg-white p-4 rounded-lg rounded-tl-none shadow-sm"><pre class="text-sm bg-gray-50 p-3 rounded-md"><code>${aiResponse}</code></pre><span class="text-xs text-gray-500 mt-2 block">${getCurrentTime()}</span></div></div></div>`;messageContainer.insertAdjacentHTML('beforeend', aiMessageHtml);scrollToBottom();}, 1000 + Math.random() * 1000); // 隨機延遲1-2秒}

關鍵詞匹配：根據用戶輸入內容生成不同回復
代碼格式化：使用<pre><code>標簽保持 Python 代碼格式
隨機延遲：模擬 AI 思考時間，增強真實感

6. 滾動控制函數

function scrollToBottom() {messageContainer.scrollTop = messageContainer.scrollHeight;
}

自動滾動：確保最新消息始終可見
調用時機：發送消息后、顯示 / 隱藏加載指示器后

7. 事件綁定

// 按鈕點擊觸發發送
sendButton.addEventListener('click', sendMessage);// 回車鍵觸發發送
messageInput.addEventListener('keypress', function(e) {if (e.key === 'Enter') {sendMessage();}
});// 頁面加載后自動聚焦輸入框
messageInput.focus();

雙觸發機制：支持鼠標點擊和鍵盤回車發送消息
自動聚焦：用戶無需手動點擊輸入框

8. 消息 UI 設計

元素	用戶消息	AI 回復
氣泡顏色	藍色 (`bg-blue-600`)	白色 (`bg-white`)
對齊方式	右對齊 (`justify-end`)	左對齊（默認）
頭像	藍色圓形 + 文字 "我"	灰色圓形 +🤖圖標
時間戳	淺藍色小字 (`text-blue-200`)	淺灰色小字 (`text-gray-500`)
最大寬度	70% (`max-w-[70%]`)	70% (`max-w-[70%]`)

三、總結

整個交互邏輯的流程就是：當頁面加載完成后，通過ID綁定獲取輸入框、發送按鈕和消息容器元素，監聽按鈕點擊和回車事件觸發消息發送——用戶輸入經非空驗證后，以右側藍色氣泡形式顯示并附帶時間戳，隨后展示左側的"正在輸入"動畫，經過1-2秒模擬延遲后，根據消息關鍵詞（如Python/問候語/身份詢問）動態生成對應回復，以代碼塊或文本形式在左側灰色氣泡中呈現，整個過程通過DOM操作實時更新界面并保持自動滾動，形成完整的偽實時對話交互閉環。
?