From b6c0d93091e15204c9e3b008ebad5cb8a039f645 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <xiaohan.tian@gmail.com>
Date: Thu, 14 May 2026 21:50:02 -0700
Subject: [PATCH] fix: align chatbox hint region style same with KGOne panel

---
 src/components/ChatBox.css | 71 ++++++++++++++++++++++++++++++++++++++
 src/components/ChatBox.tsx | 20 +++++------
 2 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/src/components/ChatBox.css b/src/components/ChatBox.css
index 6f63369..53e5f8c 100644
--- a/src/components/ChatBox.css
+++ b/src/components/ChatBox.css
@@ -85,6 +85,77 @@
   overflow-y: auto;
 }
 
+.chatbox-local-runtime-section {
+  padding: 10px 14px 0 14px;
+}
+
+.chatbox-local-runtime-card {
+  background-color: #252525;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chatbox-local-mode-title {
+  color: #e0e0e0;
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.chatbox-local-runtime-help,
+.chatbox-local-runtime-warning,
+.chatbox-local-runtime-error {
+  font-size: 11px;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.chatbox-local-runtime-help {
+  color: #999;
+}
+
+.chatbox-local-runtime-warning {
+  color: #d0a56b;
+}
+
+.chatbox-local-runtime-error {
+  color: #d45a5a;
+  margin-bottom: 0;
+}
+
+.chatbox-progress-block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chatbox-progress-track {
+  width: 100%;
+  height: 8px;
+  background-color: #1d1d1d;
+  border: 1px solid #3a3a3a;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.chatbox-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #5a9fd4 0%, #7cc2f1 100%);
+  transition: width 0.15s linear;
+}
+
+.chatbox-gen-hint {
+  color: #888;
+  font-size: 10px;
+  text-align: center;
+  margin-top: -4px;
+}
+
 /* Chat Messages */
 .chatbox-messages {
   flex: 1;
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index 7be2842..7a3732b 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -388,37 +388,37 @@ const ChatBox: React.FC<ChatBoxProps> = ({ isVisible }) => {
       </div>
 
       {activeProvider === LOCAL_LLM_PROVIDER_KEY && (
-        <div style={{ padding: '10px 14px 0 14px' }}>
-          <div className="settings-group" style={{ marginBottom: '12px', padding: '14px' }}>
-            <h4 style={{ marginBottom: '10px' }}>{LOCAL_LLM_DISPLAY_NAME} Local Runtime</h4>
+        <div className="chatbox-local-runtime-section">
+          <div className="chatbox-local-runtime-card">
+            <h4 className="chatbox-local-mode-title">{LOCAL_LLM_DISPLAY_NAME} Local Runtime</h4>
             {!localModelState.runtimeSupport.supported && (
-              <div className="settings-help" style={{ fontSize: '12px', color: '#d0a56b', marginBottom: '8px' }}>
+              <div className="chatbox-local-runtime-warning">
                 {localModelState.runtimeSupport.reason}
               </div>
             )}
             {!localModelState.isCached && !localModelState.isDownloading && localModelState.runtimeSupport.supported && (
-              <div className="settings-help" style={{ fontSize: '12px', color: '#b0b0b0', marginBottom: '8px' }}>
+              <div className="chatbox-local-runtime-help">
                 The local language model has not been downloaded yet. It will be downloaded automatically the next time you send a chat request with this provider.
               </div>
             )}
             {(localModelState.isChecking || localModelState.isDownloading || localModelState.progressText) && (
-              <div className="settings-progress-block">
+              <div className="chatbox-progress-block">
                 <div
-                  className="settings-progress-track"
+                  className="chatbox-progress-track"
                   role="progressbar"
                   aria-valuemin={0}
                   aria-valuemax={100}
                   aria-valuenow={Math.max(0, Math.min(100, localModelState.progressPercent))}
                 >
-                  <div className="settings-progress-fill" style={{ width: `${Math.max(0, Math.min(100, localModelState.progressPercent))}%` }} />
+                  <div className="chatbox-progress-fill" style={{ width: `${Math.max(0, Math.min(100, localModelState.progressPercent))}%` }} />
                 </div>
-                <div className="settings-help" style={{ fontSize: '12px', color: '#b0b0b0', marginTop: '6px' }}>
+                <div className="chatbox-gen-hint">
                   {localModelState.isChecking ? 'Checking local model cache...' : localModelState.progressText}
                 </div>
               </div>
             )}
             {localModelState.error && (
-              <div className="settings-help" style={{ fontSize: '12px', color: '#d45a5a' }}>
+              <div className="chatbox-local-runtime-error">
                 {localModelState.error}
               </div>
             )}