From 72d287baaeb83e4186f6e998ed21b2c1fb9001b7 Mon Sep 17 00:00:00 2001
From: MarkLo127 <your-email@example.com>
Date: Tue, 10 Mar 2026 17:11:02 +0800
Subject: [PATCH]

---
 frontend/app/history/chat/page.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/app/history/chat/page.tsx b/frontend/app/history/chat/page.tsx
index dcd3b791..28eaa455 100644
--- a/frontend/app/history/chat/page.tsx
+++ b/frontend/app/history/chat/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, Suspense } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -56,7 +56,7 @@ const AVAILABLE_MODELS = [
   { id: "custom", name: "⚙️ 其他 (自訂模型)", provider: "custom" },
 ];
 
-export default function HistoryChatPage() {
+function HistoryChatContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t, locale } = useLanguage();
@@ -508,3 +508,18 @@ export default function HistoryChatPage() {
     </div>
   );
 }
+
+export default function HistoryChatPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-gradient-to-br from-purple-50/30 via-pink-50/20 to-purple-50/30 flex flex-col items-center justify-center">
+          <Loader2 className="h-10 w-10 animate-spin text-purple-600 mb-4" />
+          <p className="text-gray-500">Loading chat...</p>
+        </div>
+      }
+    >
+      <HistoryChatContent />
+    </Suspense>
+  );
+}