From 33fed6fa9fcae311d62aae1626d4998d60c1949f Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:47:45 +0900
Subject: [PATCH] chore: add model switch notice and move sponsor button to
 about page (#52)

- Remove sponsor iframe from chat panel header
- Add notice about switching from Opus 4.5 to Haiku 4.5 due to high traffic
- Add sponsor button next to Support & Contact section title
- Update all i18n about pages (EN, CN, JA)
---
 app/about/cn/page.tsx     | 17 +++++++++++++++-
 app/about/ja/page.tsx     | 17 +++++++++++++++-
 app/about/page.tsx        | 17 +++++++++++++++-
 components/chat-panel.tsx | 41 +++++++++++++++++++++++++--------------
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/app/about/cn/page.tsx b/app/about/cn/page.tsx
index 3a6f6d3..3ff30a0 100644
--- a/app/about/cn/page.tsx
+++ b/app/about/cn/page.tsx
@@ -58,6 +58,12 @@ export default function AboutCN() {
                         </div>
                     </div>
 
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            本应用设计运行于 Claude Opus 4.5 以获得最佳性能。但由于流量超出预期，运行顶级模型的成本变得难以承受。为避免服务中断并控制成本，我已将后端切换至 Claude Haiku 4.5。
+                        </p>
+                    </div>
+
                     <p className="text-gray-700">
                         一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
                     </p>
@@ -149,7 +155,16 @@ export default function AboutCN() {
                     </p>
 
                     {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">支持与联系</h2>
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">支持与联系</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
                     <p className="text-gray-700">
                         如果您觉得这个项目有用，请考虑{" "}
                         <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
diff --git a/app/about/ja/page.tsx b/app/about/ja/page.tsx
index 56cc2b9..1fba60d 100644
--- a/app/about/ja/page.tsx
+++ b/app/about/ja/page.tsx
@@ -58,6 +58,12 @@ export default function AboutJA() {
                         </div>
                     </div>
 
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            本アプリは最高のパフォーマンスを発揮するため、Claude Opus 4.5 で動作するよう設計されています。しかし、予想以上のトラフィックにより、最上位モデルの運用コストが負担となっています。サービスの中断を避け、コストを管理するため、バックエンドを Claude Haiku 4.5 に切り替えました。
+                        </p>
+                    </div>
+
                     <p className="text-gray-700">
                         AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
                     </p>
@@ -149,7 +155,16 @@ export default function AboutJA() {
                     </p>
 
                     {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">サポート＆お問い合わせ</h2>
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">サポート＆お問い合わせ</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
                     <p className="text-gray-700">
                         このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
                         <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 98ce7fa..7060f7e 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -58,6 +58,12 @@ export default function About() {
                         </div>
                     </div>
 
+                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
+                        <p className="text-amber-800">
+                            This app is designed to run on Claude Opus 4.5 for best performance. However, due to higher-than-expected traffic, running the top-tier model has become cost-prohibitive. To avoid service interruptions and manage costs, I have switched the backend to Claude Haiku 4.5.
+                        </p>
+                    </div>
+
                     <p className="text-gray-700">
                         A Next.js web application that integrates AI capabilities with draw.io diagrams.
                         Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
@@ -150,7 +156,16 @@ export default function About() {
                     </p>
 
                     {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">Support &amp; Contact</h2>
+                    <div className="flex items-center gap-4 mt-10 mb-4">
+                        <h2 className="text-2xl font-semibold text-gray-900">Support &amp; Contact</h2>
+                        <iframe
+                            src="https://github.com/sponsors/DayuanJiang/button"
+                            title="Sponsor DayuanJiang"
+                            height="32"
+                            width="114"
+                            style={{ border: 0, borderRadius: 6 }}
+                        />
+                    </div>
                     <p className="text-gray-700">
                         If you find this project useful, please consider{" "}
                         <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 3170cec..6f72067 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -26,7 +26,10 @@ interface ChatPanelProps {
     onToggleVisibility: () => void;
 }
 
-export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelProps) {
+export default function ChatPanel({
+    isVisible,
+    onToggleVisibility,
+}: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
         handleExport: onExport,
@@ -44,8 +47,14 @@ export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelPr
                 onExport();
             }),
             new Promise<string>((_, reject) =>
-                setTimeout(() => reject(new Error("Chart export timed out after 10 seconds")), 10000)
-            )
+                setTimeout(
+                    () =>
+                        reject(
+                            new Error("Chart export timed out after 10 seconds")
+                        ),
+                    10000
+                )
+            ),
         ]);
     };
     // Add a step counter to track updates
@@ -96,7 +105,7 @@ export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelPr
                         edits: Array<{ search: string; replace: string }>;
                     };
 
-                    let currentXml = '';
+                    let currentXml = "";
                     try {
                         // Fetch current chart XML
                         currentXml = await onFetchChart();
@@ -116,7 +125,10 @@ export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelPr
                     } catch (error) {
                         console.error("Edit diagram failed:", error);
 
-                        const errorMessage = error instanceof Error ? error.message : String(error);
+                        const errorMessage =
+                            error instanceof Error
+                                ? error.message
+                                : String(error);
 
                         // Provide detailed error with current diagram XML
                         addToolResult({
@@ -148,7 +160,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
 
     // Debug: Log status changes
     useEffect(() => {
-        console.log('[ChatPanel] Status changed to:', status);
+        console.log("[ChatPanel] Status changed to:", status);
     }, [status]);
 
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -227,7 +239,10 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 </ButtonWithTooltip>
                 <div
                     className="text-sm text-gray-500 mt-8"
-                    style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
+                    style={{
+                        writingMode: "vertical-rl",
+                        transform: "rotate(180deg)",
+                    }}
                 >
                     Chat
                 </div>
@@ -241,18 +256,14 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             <CardHeader className="p-4 flex flex-row justify-between items-center">
                 <div className="flex items-center gap-3">
                     <CardTitle>Next-AI-Drawio</CardTitle>
-                    <Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
+                    <Link
+                        href="/about"
+                        className="text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
                         About
                     </Link>
                 </div>
                 <div className="flex items-center gap-2">
-                    <iframe
-                        src="https://github.com/sponsors/DayuanJiang/button"
-                        title="Sponsor DayuanJiang"
-                        height="32"
-                        width="114"
-                        style={{ border: 0, borderRadius: 6 }}
-                    />
                     <a
                         href="https://github.com/DayuanJiang/next-ai-draw-io"
                         target="_blank"