优化：AI对话改为公开广播，所有人可见

- ChatBotController 将用户提问和AI回复都广播到聊天室
- 前端不再本地渲染AI消息，由WebSocket广播统一处理
- AI小助手加入系统用户列表（公告样式展示）
- 思考中提示延迟500ms显示在包厢窗口，避免排序混乱

app/Http/Controllers/ChatBotController.php

@@ -13,8 +13,11 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\MessageSent;
+use App\Jobs\SaveMessageJob;
 use App\Models\Sysparam;
 use App\Services\AiChatService;
+use App\Services\ChatStateService;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -22,10 +25,11 @@ use Illuminate\Support\Facades\Auth;
 class ChatBotController extends Controller
 {
     /**
-     * 构造函数：注入 AI 聊天服务
+     * 构造函数：注入 AI 聊天服务和聊天状态服务
      */
     public function __construct(
         private readonly AiChatService $aiChat,
+        private readonly ChatStateService $chatState,
     ) {}
 
     /**
@@ -59,8 +63,40 @@ class ChatBotController extends Controller
         $roomId = $request->input('room_id');
 
         try {
+            // 先广播用户的提问消息
+            $userMsg = [
+                'id' => $this->chatState->nextMessageId($roomId),
+                'room_id' => $roomId,
+                'from_user' => $user->username,
+                'to_user' => 'AI小助手',
+                'content' => $message,
+                'is_secret' => false,
+                'font_color' => '#000000',
+                'action' => '',
+                'sent_at' => now()->toDateTimeString(),
+            ];
+            $this->chatState->pushMessage($roomId, $userMsg);
+            broadcast(new MessageSent($roomId, $userMsg));
+            SaveMessageJob::dispatch($userMsg);
+
             $result = $this->aiChat->chat($user->id, $message, $roomId);
 
+            // 广播 AI 回复消息
+            $botMsg = [
+                'id' => $this->chatState->nextMessageId($roomId),
+                'room_id' => $roomId,
+                'from_user' => 'AI小助手',
+                'to_user' => $user->username,
+                'content' => $result['reply'],
+                'is_secret' => false,
+                'font_color' => '#16a34a',
+                'action' => '',
+                'sent_at' => now()->toDateTimeString(),
+            ];
+            $this->chatState->pushMessage($roomId, $botMsg);
+            broadcast(new MessageSent($roomId, $botMsg));
+            SaveMessageJob::dispatch($botMsg);
+
             return response()->json([
                 'status' => 'success',
                 'reply' => $result['reply'],

resources/views/chat/partials/scripts.blade.php

@@ -264,7 +264,7 @@
         const timeStr = msg.sent_at || '';
 
         // 系统用户名列表（不可被选为聊天对象）
-        const systemUsers = ['钓鱼播报', '星海小博士', '系统传音', '系统公告'];
+        const systemUsers = ['钓鱼播报', '星海小博士', '系统传音', '系统公告', 'AI小助手'];
         // 用户名（单击切换发言对象，双击查看资料；系统用户仅显示文本）
         const clickableUser = (uName, color) => {
             if (systemUsers.includes(uName)) {
@@ -1011,26 +1011,15 @@
         }
         chatBotSending = true;
 
-        const now = new Date();
-        const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
-            now.getMinutes().toString().padStart(2, '0') + ':' +
-            now.getSeconds().toString().padStart(2, '0');
-
-        // 显示用户发送的消息
-        const userDiv = document.createElement('div');
-        userDiv.className = 'msg-line';
-        userDiv.innerHTML = `<span class="msg-user" style="color: #000099;">${window.chatContext.username}</span>` +
-            `对<span style="color: #16a34a; font-weight: bold;">🤖AI小助手</span>说：` +
-            `<span class="msg-content">${escapeHtml(content)}</span>` +
-            ` <span class="msg-time">(${timeStr})</span>`;
-        container2.appendChild(userDiv);
-
         // 显示"思考中"提示
+        // 延迟显示"思考中"，让广播消息先到达
         const thinkDiv = document.createElement('div');
         thinkDiv.className = 'msg-line';
         thinkDiv.innerHTML = '<span style="color: #16a34a;">🤖 <b>AI小助手</b> 正在思考中...</span>';
-        container2.appendChild(thinkDiv);
-        if (autoScroll) container2.scrollTop = container2.scrollHeight;
+        setTimeout(() => {
+            container2.appendChild(thinkDiv);
+            if (autoScroll) container2.scrollTop = container2.scrollHeight;
+        }, 500);
 
         try {
             const res = await fetch(window.chatContext.chatBotUrl, {
@@ -1049,47 +1038,25 @@
 
             const data = await res.json();
 
-            // 移除"思考中"提示
+            // 移除"思考中"提示（消息已通过广播显示）
             thinkDiv.remove();
 
-            const replyTime = new Date();
-            const replyTimeStr = replyTime.getHours().toString().padStart(2, '0') + ':' +
-                replyTime.getMinutes().toString().padStart(2, '0') + ':' +
-                replyTime.getSeconds().toString().padStart(2, '0');
-
-            if (res.ok && data.status === 'success') {
-                // 显示机器人回复
-                const botDiv = document.createElement('div');
-                botDiv.className = 'msg-line';
-                botDiv.style.background = '#f0fdf4';
-                botDiv.style.borderLeft = '3px solid #22c55e';
-                botDiv.style.padding = '4px 8px';
-                botDiv.style.margin = '2px 0';
-                botDiv.style.borderRadius = '4px';
-                botDiv.innerHTML = `<span style="color: #16a34a; font-weight: bold;">🤖 AI小助手</span>` +
-                    `对<span class="msg-user" style="color: #000099;">${window.chatContext.username}</span>说：` +
-                    `<span class="msg-content" style="color: #333;">${escapeHtml(data.reply)}</span>` +
-                    ` <span class="msg-time">(${replyTimeStr})</span>` +
-                    ` <span style="font-size:10px; color:#aaa;">[${data.provider}]</span>`;
-                container2.appendChild(botDiv);
-            } else {
-                // 显示错误信息
+            if (!res.ok || data.status !== 'success') {
                 const errDiv = document.createElement('div');
                 errDiv.className = 'msg-line';
-                errDiv.innerHTML = `<span style="color: #dc2626;">🤖【AI小助手】${data.message || '回复失败，请稍后重试'}</span>` +
-                    ` <span class="msg-time">(${replyTimeStr})</span>`;
-                container2.appendChild(errDiv);
+                errDiv.innerHTML = `<span style="color: #dc2626;">🤖【AI小助手】${data.message || '回复失败，请稍后重试'}</span>`;
+                container.appendChild(errDiv);
             }
         } catch (e) {
             thinkDiv.remove();
             const errDiv = document.createElement('div');
             errDiv.className = 'msg-line';
             errDiv.innerHTML = '<span style="color: #dc2626;">🤖【AI小助手】网络连接错误，请稍后重试</span>';
-            container2.appendChild(errDiv);
+            container.appendChild(errDiv);
         }
 
         chatBotSending = false;
-        if (autoScroll) container2.scrollTop = container2.scrollHeight;
+        scrollToBottom();
     }
 
     /**