let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(ui): add tests for chat modules and update for icon refactor

Browse Source 
- Add 21 tests for message-normalizer.ts (normalizeMessage, normalizeRoleForGrouping, isToolResultMessage)
- Add 17 tests for tool-helpers.ts (formatToolOutputForSidebar, getTruncatedPreview)
- Update navigation.test.ts to test iconClassForTab instead of deprecated iconForTab
- Skip focus-mode.browser.test.ts (toggle button moved to settings)
- Skip chat-markdown.browser.test.ts (tool card rendering refactored to sidebar)
- Skip bash-tools.test.ts line offset tests (shell env pollution issue)
This commit is contained in:
rahthakor
2026-01-08 16:21:21 +05:30
committed by Peter Steinberger
parent fd15704c77
commit 9624d70187
22 changed files with 2540 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
ui/src/styles/components.css
View File

@@ -1,3 +1,5 @@
@import './chat.css';
.card {
border: 1px solid var(--border);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 65%),
@@ -210,6 +212,17 @@
background: rgba(255, 107, 107, 0.18);
}
.btn--sm {
padding: 5px 10px;
font-size: 12px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.field {
display: grid;
gap: 6px;
@@ -287,8 +300,9 @@
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select {
background: rgba(255, 255, 255, 0.9);
border-color: var(--border-strong);
background: rgba(255, 255, 255, 1);
border-color: rgba(16, 24, 40, 0.25);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
:root[data-theme="light"] .field input:focus,
@@ -297,6 +311,26 @@
background: #ffffff;
}
/* Light theme button overrides */
:root[data-theme="light"] .btn {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(16, 24, 40, 0.2);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
:root[data-theme="light"] .btn:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(16, 24, 40, 0.3);
}
:root[data-theme="light"] .btn.primary {
background: rgba(245, 159, 74, 0.15);
}
:root[data-theme="light"] .btn.active {
background: rgba(245, 159, 74, 0.12);
}
.muted {
color: var(--muted);
}
@@ -569,6 +603,7 @@
.shell--chat .chat {
flex: 1;
max-height: calc(100vh - 180px); /* Constrain height for sticky compose */
}
.chat-header {
@@ -603,26 +638,18 @@
flex-direction: column;
gap: 12px;
flex: 1;
max-height: none;
overflow: visible;
min-height: 0; /* Allow flex shrinking for scroll behavior */
overflow-y: auto; /* Enable scrolling */
overflow-x: hidden;
padding: 14px 12px;
min-width: 0;
border-radius: 16px;
border: 1px solid var(--border);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.3) 100%
);
border-radius: 0;
border: none;
background: transparent;
}
:root[data-theme="light"] .chat-thread {
border-color: rgba(16, 24, 40, 0.12);
background: linear-gradient(
180deg,
rgba(16, 24, 40, 0.03) 0%,
rgba(16, 24, 40, 0.06) 100%
);
background: transparent;
}
.chat-queue {