3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align chatbox hint region style same with KGOne panel

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-14 21:50:02 -07:00
parent 2bd6925f27
commit b6c0d93091
2 changed files with 81 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChatBox.css
+71
View File
@@ -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;
src/components/ChatBox.tsx
+10 -10
View File
@@ -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>
)}