Skip to content

Commit 2790046

Browse files
vipmaxvipmax
committed
style(agent): refine ACP input/message styles and update layout panel constraints
1 parent decf248 commit 2790046

7 files changed

Lines changed: 84 additions & 44 deletions

File tree

‎anycode/components/agent/AcpInput.css‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,35 @@
22
display: flex;
33
flex-direction: column;
44
padding: 8px 12px;
5-
border-top: 1px solid var(--border-color, #333);
5+
border: 1px solid #8f8f8f2e;
66
align-items: stretch;
7-
border-radius: 14px;
8-
transition: padding 0.15s ease-in-out;
9-
position: relative;
7+
border-radius: 24px;
8+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
9+
position: absolute;
10+
bottom: 7px;
11+
left: 12px;
12+
right: 12px;
13+
z-index: 10;
14+
background: rgba(30, 30, 30, 0.75);
15+
background: color-mix(in srgb, var(--theme-background, #242424) 75%, transparent);
16+
backdrop-filter: blur(4px);
17+
-webkit-backdrop-filter: blur(4px);
18+
/*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);*/
19+
transform: translateY(0);
20+
opacity: 1;
21+
visibility: visible;
1022
}
1123

1224
.acp-input-drag-over {
13-
box-shadow: inset 0 0 0 1px var(--focus-border, #007acc);
14-
background: color-mix(in srgb, var(--focus-border, #007acc) 8%, transparent);
25+
box-shadow: inset 0 0 0 1px var(--focus-border, #007acc), 0 4px 20px rgba(0, 0, 0, 0.25);
26+
background: color-mix(in srgb, var(--focus-border, #007acc) 8%, color-mix(in srgb, var(--theme-background, #242424) 75%, transparent));
1527
}
1628

1729
.acp-input-minimized {
18-
padding: 0;
19-
border-top: none;
20-
height: 0;
21-
min-height: 0;
22-
overflow: visible;
30+
transform: translateY(20px);
31+
opacity: 0;
32+
pointer-events: none;
33+
visibility: hidden;
2334
}
2435

2536
.acp-input-preview-container {
@@ -40,17 +51,8 @@
4051
}
4152

4253
.acp-input-full-container {
43-
display: grid;
44-
grid-template-rows: 1fr;
45-
transition: grid-template-rows 0.15s ease-in-out, opacity 0.15s ease-in-out;
46-
opacity: 1;
47-
pointer-events: auto;
48-
}
49-
50-
.acp-input-minimized .acp-input-full-container {
51-
grid-template-rows: 0fr;
52-
opacity: 0;
53-
pointer-events: none;
54+
display: flex;
55+
flex-direction: column;
5456
}
5557

5658
.acp-input-full-content {
@@ -301,6 +303,9 @@
301303
@media (max-width: 768px) {
302304
.acp-input {
303305
gap: 7px;
306+
bottom: 8px;
307+
left: 8px;
308+
right: 8px;
304309
}
305310

306311
.acp-input-floating-expand-btn {

‎anycode/components/agent/AcpInput.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,8 @@ export const AcpInput: React.FC<AcpInputProps> = ({
290290
};
291291

292292
return (
293-
<div
293+
<>
294+
<div
294295
className={`acp-input ${isMinimized ? 'acp-input-minimized' : ''} ${isDragOver ? 'acp-input-drag-over' : ''}`}
295296
onDragOver={(event) => {
296297
event.preventDefault();
@@ -433,6 +434,7 @@ export const AcpInput: React.FC<AcpInputProps> = ({
433434
</div>
434435
</div>
435436
</div>
437+
</div>
436438

437439
{isMinimized && (
438440
<button
@@ -444,6 +446,6 @@ export const AcpInput: React.FC<AcpInputProps> = ({
444446
<AcpIcons.ChevronUp />
445447
</button>
446448
)}
447-
</div>
449+
</>
448450
);
449451
};

‎anycode/components/agent/AcpMessage.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@
286286
}
287287

288288
.acp-message-tool_call .acp-message-content {
289-
background-color: rgba(127, 127, 127, 0.18);
289+
background-color: rgba(127, 127, 127, 0.08);
290290
color: var(--text-color, #ccc);
291291
/* border: 1px solid var(--border-color, #333); */
292292
max-width: 100%;

‎anycode/components/agent/AcpMessages.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
.acp-messages-inner {
9-
padding: 16px;
9+
padding: 16px 16px 160px 16px;
1010
display: flex;
1111
flex-direction: column;
1212
gap: 2px;

‎anycode/components/agent/AcpSession.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
.acp-scroll-to-bottom-btn {
3434
position: absolute;
3535
right: 16px;
36-
bottom: 60px;
36+
bottom: 160px;
3737
width: 36px;
3838
height: 36px;
3939
border: none;
@@ -46,7 +46,7 @@
4646
background: rgba(45, 45, 45, 0.25);
4747
backdrop-filter: blur(2px);
4848
-webkit-backdrop-filter: blur(2px);
49-
z-index: 1;
49+
z-index: 11;
5050
}
5151

5252
.acp-scroll-to-bottom-btn:focus,
@@ -62,6 +62,6 @@
6262
@media (max-width: 768px) {
6363
.acp-scroll-to-bottom-btn {
6464
right: 12px;
65-
bottom: 56px;
65+
bottom: 160px;
6666
}
6767
}

‎anycode/components/layout/Layout.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676

7777
.layout.dockview-theme-dark .dv-groupview > .dv-tabs-and-actions-container {
7878
background-color: var(--background-color, #242424) !important;
79-
border: 1px solid var(--theme-border, #4a4a4a) !important;
79+
/*border: 1px solid var(--theme-border, #4a4a4a) !important;*/
8080
border-bottom: none !important;
8181
border-top-left-radius: 8px !important;
8282
border-top-right-radius: 8px !important;
@@ -225,7 +225,7 @@
225225
min-height: 0;
226226
display: flex;
227227
flex-direction: column;
228-
border: 1px solid var(--theme-border, #4a4a4a);
228+
/*border: 1px solid var(--theme-border, #4a4a4a);*/
229229
border-top: none;
230230
border-radius: 0 0 8px 8px;
231231
box-sizing: border-box;
@@ -236,15 +236,21 @@
236236
.layout-header-actions {
237237
display: inline-flex;
238238
align-items: center;
239+
justify-content: flex-end;
239240
gap: 2px;
240241
height: 100%;
242+
width: 35px;
243+
overflow: hidden;
241244
}
242245

243-
.layout-header-actions:hover {
246+
.layout-header-actions:hover,
247+
.layout-header-actions:focus-within {
244248
background-color: var(--background-color, #242424);
249+
width: max-content;
245250
}
246251

247-
.layout .dv-tabs-and-actions-container .dv-right-actions-container:hover {
252+
.layout .dv-tabs-and-actions-container .dv-right-actions-container:has(.layout-header-actions:hover),
253+
.layout .dv-tabs-and-actions-container .dv-right-actions-container:has(.layout-header-actions:focus-within) {
248254
background-color: var(--background-color, #242424) !important;
249255
border-radius: 8px;
250256
}
@@ -281,8 +287,8 @@
281287
box-shadow: none;
282288
}
283289

284-
.layout .dv-tabs-and-actions-container .dv-right-actions-container:hover .layout-header-action-btn,
285-
.layout .dv-tabs-and-actions-container .dv-right-actions-container:focus-within .layout-header-action-btn,
290+
.layout-header-actions:hover .layout-header-action-btn,
291+
.layout-header-actions:focus-within .layout-header-action-btn,
286292
.layout-header-action-btn:focus-visible {
287293
opacity: 1;
288294
pointer-events: auto;
@@ -439,8 +445,8 @@
439445
width: 100%;
440446
min-width: 0;
441447
overflow: hidden;
442-
border: 1px solid var(--theme-border, #4a4a4a);
443-
border-radius: 8px;
448+
/*border-top: 1px solid var(--theme-border, #4a4a4a);*/
449+
/*border-rad ius: 8px;*/
444450
background: var(--background-color, #242424);
445451
box-sizing: border-box;
446452
}

‎anycode/components/layout/Layout.tsx‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -689,13 +689,22 @@ const addPanel = (
689689
component: 'layoutPanel',
690690
title: definition.title,
691691
params: { panelId, panelKey, content },
692-
minimumWidth: 0,
693-
minimumHeight: 0,
692+
minimumWidth: panelId === 'agent' ? 200 : 0,
693+
minimumHeight: panelId === 'agent' ? 200 : 0,
694694
position: getDefaultPanelPosition(api, panelId),
695695
//@ts-ignore
696696
disableClose: definition.disableClose,
697697
});
698-
panel.group.api.setConstraints(PANEL_CONSTRAINTS);
698+
if (panelId === 'agent') {
699+
panel.group.api.setConstraints({
700+
minimumWidth: 200,
701+
minimumHeight: 200,
702+
});
703+
// @ts-ignore
704+
panel.group._snap = true;
705+
} else {
706+
panel.group.api.setConstraints(PANEL_CONSTRAINTS);
707+
}
699708
return panel;
700709
};
701710

@@ -996,7 +1005,16 @@ export const Layout: React.FC<LayoutProps> = ({
9961005
continue;
9971006
}
9981007

999-
panel.group.api.setConstraints(PANEL_CONSTRAINTS);
1008+
if (panelId === 'agent') {
1009+
panel.group.api.setConstraints({
1010+
minimumWidth: 200,
1011+
minimumHeight: 200,
1012+
});
1013+
// @ts-ignore
1014+
panel.group._snap = true;
1015+
} else {
1016+
panel.group.api.setConstraints(PANEL_CONSTRAINTS);
1017+
}
10001018
panel.api.updateParameters({
10011019
panelId,
10021020
panelKey: panel.id,
@@ -1030,16 +1048,25 @@ export const Layout: React.FC<LayoutProps> = ({
10301048
panelKey: targetPanelKey,
10311049
content: resolvePanelContent(panelId, targetPanelKey),
10321050
},
1033-
minimumWidth: 0,
1034-
minimumHeight: 0,
1051+
minimumWidth: panelId === 'agent' ? 200 : 0,
1052+
minimumHeight: panelId === 'agent' ? 200 : 0,
10351053
position: {
10361054
referenceGroup: pickerPanel.group,
10371055
direction: 'within',
10381056
},
10391057
//@ts-ignore
10401058
disableClose: definition.disableClose,
10411059
});
1042-
targetPanel.group.api.setConstraints(PANEL_CONSTRAINTS);
1060+
if (panelId === 'agent') {
1061+
targetPanel.group.api.setConstraints({
1062+
minimumWidth: 200,
1063+
minimumHeight: 200,
1064+
});
1065+
// @ts-ignore
1066+
targetPanel.group._snap = true;
1067+
} else {
1068+
targetPanel.group.api.setConstraints(PANEL_CONSTRAINTS);
1069+
}
10431070

10441071
if (existingPanel) {
10451072
targetPanel.api.moveTo({

0 commit comments

Comments
 (0)