Skip to content

Commit b6ad704

Browse files
Roopan-MicrosoftPrashant-MicrosoftKiran-Siluveru-MicrosoftMohan-Microsoft
authored
fix: Merging hotfix changes to main branch (microsoft#25)
* fix: ui changes (microsoft#1) * fix: in progress status color after fetch task details (microsoft#5) * cancel notification message updated (microsoft#7) * Update task.js (microsoft#9) * Stages overflow issue fix (microsoft#10) * fix: added space to the agent (microsoft#13) * Approve reject buttons titles disabling buttons and (microsoft#15) * Fix: UX becomes damaged when chat outputs sample code for a task (microsoft#14) * task page UI updates * UI updated code for task * Task page UI updated code * status section UI update in task page --------- Co-authored-by: Prashant-Microsoft <[email protected]> Co-authored-by: Kiran-Siluveru-Microsoft <[email protected]> Co-authored-by: Mohan-Microsoft <[email protected]>
1 parent 2708c74 commit b6ad704

File tree

8 files changed

+1611
-1215
lines changed

8 files changed

+1611
-1215
lines changed

src/backend/agents/group_chat_manager.py

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import logging
44
from datetime import datetime
5+
import re
56
from typing import Dict, List
67

78
from autogen_core.base import AgentId, MessageContext
@@ -239,14 +240,22 @@ async def _execute_step(self, session_id: str, step: Step):
239240
action=action_with_history,
240241
agent=step.agent,
241242
)
242-
logging.info(f"Sending ActionRequest to {step.agent.value.title()}")
243+
logging.info(f"Sending ActionRequest to {step.agent.value}")
244+
245+
if step.agent != "":
246+
agent_name = step.agent.value
247+
formatted_agent = re.sub(
248+
r"([a-z])([A-Z])", r"\1 \2", agent_name
249+
)
250+
else:
251+
raise ValueError(f"Check {step.agent} is missing")
243252

244253
await self._memory.add_item(
245254
AgentMessage(
246255
session_id=session_id,
247256
user_id=self._user_id,
248257
plan_id=step.plan_id,
249-
content=f"Requesting {step.agent.value.title()} to perform action: {step.action}",
258+
content=f"Requesting {formatted_agent} to perform action: {step.action}",
250259
source="GroupChatManager",
251260
step_id=step.id,
252261
)

src/frontend/wwwroot/app.css

Lines changed: 135 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -4,191 +4,239 @@
44

55
/* App global */
66

7-
html {
8-
overflow-y: auto;
7+
html,
8+
body {
9+
overflow-x: hidden;
10+
overflow-y: auto;
11+
height: 100%;
912
}
1013

1114
body {
12-
position: relative;
13-
background: rgb(247, 249, 251);
14-
min-height: 100vh;
15+
position: relative;
16+
background: rgb(247, 249, 251);
17+
min-height: 100vh;
1518
}
1619

1720
.border-right {
18-
border-right: 1px solid hsl(221, 14%, calc(86% + 0%));
21+
border-right: 1px solid hsl(221, 14%, calc(86% + 0%));
1922
}
2023

2124
/* App template */
2225

2326
#app .columns {
24-
min-height: 100vh;
27+
min-height: 100vh;
28+
height: 100%;
29+
}
30+
#app .modal,
31+
#app .menu {
32+
overflow: hidden; /* Prevent scrolling within modals and menus */
2533
}
26-
2734
#app .asside {
28-
background: rgba(231, 236, 243, 0.7);
35+
background: rgba(231, 236, 243, 0.7);
36+
}
37+
ul#tasksStats.menu-list {
38+
min-height: 100px;
2939
}
30-
3140
@media (min-width: 1800px) {
32-
#app .asside {
33-
max-width: 400px;
34-
}
41+
#app .asside {
42+
max-width: 400px;
43+
}
3544
}
3645

3746
#app .menu-logo {
38-
font-size: 1.25rem;
39-
font-weight: 700;
40-
cursor: pointer;
47+
font-size: 1.25rem;
48+
font-weight: 700;
49+
cursor: pointer;
4150
}
4251

4352
#app .menu-logo img {
44-
width: 30px;
53+
width: 30px;
4554
}
4655

4756
#app .asside .menu-list a {
48-
background-color: transparent;
57+
background-color: transparent;
4958
}
5059

5160
#app .asside .menu-list a.is-active {
52-
background-color: rgb(71, 80, 235);
61+
background-color: rgb(71, 80, 235);
5362
}
5463

5564
#app .asside .menu-list a.is-active i {
56-
color: white !important;
65+
color: white !important;
5766
}
5867

5968
#app .asside .menu-list a.is-active:hover {
60-
background-color: rgb(71, 80, 235);
69+
background-color: rgb(71, 80, 235);
6170
}
6271

6372
#app .asside .menu-list a.menu-task {
64-
display: flex;
65-
align-items: center;
73+
display: flex;
74+
align-items: center;
6675
}
6776

6877
#app .asside .menu-list a.menu-task span {
69-
flex: 1;
78+
flex: 1;
7079
}
7180

7281
#app .asside .menu-list a:hover {
73-
background-color: rgba(0, 0, 0, 0.1);
82+
background-color: rgba(0, 0, 0, 0.1);
7483
}
7584

7685
#app .iframe {
77-
width: 100%;
78-
background-color: transparent;
79-
overflow-y: auto;
86+
width: 100%;
87+
background-color: transparent;
8088
}
8189

8290
#app .context-switch {
83-
position: fixed;
84-
bottom: 50px;
85-
right: calc(50% - 220px);
86-
z-index: 3;
91+
position: fixed;
92+
bottom: 50px;
93+
right: calc(50% - 220px);
94+
z-index: 3;
8795
}
8896

8997
.is-avatar.is-rounded {
90-
border-radius: var(--bulma-radius-rounded);
98+
border-radius: var(--bulma-radius-rounded);
9199
}
92100

93101
.is-avatar.is-agent {
94-
display: flex;
95-
/* background-color: rgba(231, 236, 243, 0.7); */
96-
background-color: rgba(70, 79, 235, 0.25);
102+
display: flex;
103+
/* background-color: rgba(231, 236, 243, 0.7); */
104+
background-color: rgba(70, 79, 235, 0.25);
97105
}
98106

99107
.is-avatar.is-agent img {
100-
width: 75%;
101-
height: 75%;
102-
margin: 13%;
108+
width: 75%;
109+
height: 75%;
110+
margin: 13%;
103111
}
104112

105-
106-
107113
@keyframes moveImage {
108-
0% {
109-
transform: rotate(0deg);
110-
}
114+
0% {
115+
transform: rotate(0deg);
116+
}
111117

112-
50% {
113-
transform: rotate(-3deg);
114-
}
118+
50% {
119+
transform: rotate(-3deg);
120+
}
115121

116-
100% {
117-
transform: rotate(3deg);
118-
}
122+
100% {
123+
transform: rotate(3deg);
124+
}
119125
}
120126

121127
.is-avatar.is-agent img.manager {
122-
background-color: rgba(220, 56, 72, .35);
123-
box-shadow: 0 0 0 4px rgba(220, 56, 72, .35);
124-
animation: moveImage .3s infinite alternate;
128+
background-color: rgba(220, 56, 72, 0.35);
129+
box-shadow: 0 0 0 4px rgba(220, 56, 72, 0.35);
130+
animation: moveImage 0.3s infinite alternate;
125131
}
126132

127133
.is-avatar.is-agent img.hr_agent {
128-
background-color: rgba(0, 209, 178, .35);
129-
box-shadow: 0 0 0 4px rgba(0, 209, 178, .35);
130-
animation: moveImage .5s infinite alternate;
134+
background-color: rgba(0, 209, 178, 0.35);
135+
box-shadow: 0 0 0 4px rgba(0, 209, 178, 0.35);
136+
animation: moveImage 0.5s infinite alternate;
131137
}
132138

133139
.is-avatar.is-agent img.procurement_agent {
134-
background-color: rgba(255, 183, 15, .35);
135-
box-shadow: 0 0 0 4px rgba(255, 183, 15, .35);
136-
animation: moveImage .1s infinite alternate;
140+
background-color: rgba(255, 183, 15, 0.35);
141+
box-shadow: 0 0 0 4px rgba(255, 183, 15, 0.35);
142+
animation: moveImage 0.1s infinite alternate;
137143
}
138144

139145
.is-avatar.is-agent img.tech_agent {
140-
background-color: rgba(178, 222, 39, .35);
141-
box-shadow: 0 0 0 4px rgba(178, 222, 39, .35);
142-
animation: moveImage .7s infinite alternate;
146+
background-color: rgba(178, 222, 39, 0.35);
147+
box-shadow: 0 0 0 4px rgba(178, 222, 39, 0.35);
148+
animation: moveImage 0.7s infinite alternate;
143149
}
144150

145151
.is-avatar.is-agent img.unknown {
146-
background-color: rgba(39, 57, 222, 0.35);
147-
box-shadow: 0 0 0 4px rgba(39, 57, 222, 0.35);
148-
animation: moveImage .7s infinite alternate;
152+
background-color: rgba(39, 57, 222, 0.35);
153+
box-shadow: 0 0 0 4px rgba(39, 57, 222, 0.35);
154+
animation: moveImage 0.7s infinite alternate;
149155
}
150156

151157
.is-avatar.has-status::after {
152-
content: "";
153-
position: absolute;
154-
bottom: 0;
155-
right: 0;
156-
width: 30%;
157-
height: 30%;
158-
border-radius: 50%;
159-
background-color: rgb(255, 255, 255);
160-
border: 2px solid rgb(255, 255, 255);
158+
content: "";
159+
position: absolute;
160+
bottom: 0;
161+
right: 0;
162+
width: 30%;
163+
height: 30%;
164+
border-radius: 50%;
165+
background-color: rgb(255, 255, 255);
166+
border: 2px solid rgb(255, 255, 255);
161167
}
162168

163169
.is-avatar.has-status.has-status-active::after {
164-
background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
170+
background-color: hsl(
171+
var(--bulma-success-h),
172+
var(--bulma-success-s),
173+
var(--bulma-success-l)
174+
);
165175
}
166176

167177
.is-avatar.has-status.has-status-busy::after {
168-
background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l));
178+
background-color: hsl(
179+
var(--bulma-danger-h),
180+
var(--bulma-danger-s),
181+
var(--bulma-danger-l)
182+
);
169183
}
170184

171185
.is-avatar.has-status.has-status-paused::after {
172-
background-color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
186+
background-color: hsl(
187+
var(--bulma-dark-h),
188+
var(--bulma-dark-s),
189+
var(--bulma-dark-l)
190+
);
173191
}
174192

175193
.button.is-greyed-out {
176-
background-color: #e0e0e0;
177-
color: lightgrey;
178-
cursor: not-allowed;
194+
background-color: #e0e0e0;
195+
color: lightgrey;
196+
cursor: not-allowed;
179197
}
180198

181199
.button.is-selected {
182-
background-color: #d3d3d3;
183-
color: #000;
200+
background-color: #d3d3d3;
201+
color: #000;
184202
}
185203

186-
187204
.notyf__toast {
188-
max-width: 100% !important;
189-
border-radius: var(--bulma-control-radius) !important;
205+
max-width: 100% !important;
206+
border-radius: var(--bulma-control-radius) !important;
190207
}
191208

192209
.notyf__wrapper {
193-
padding: 0.75rem 0.5rem !important;
194-
}
210+
padding: 0.75rem 0.5rem !important;
211+
}
212+
/* Menu list scroll style start*/
213+
#app .asside .menu-list {
214+
max-height: 300px;
215+
overflow-y: scroll;
216+
padding-right: 2px;
217+
transition: all 0.3s ease;
218+
box-sizing: border-box;
219+
}
220+
/* Hide the scrollbar initially (before hover) */
221+
#app .asside .menu-list::-webkit-scrollbar {
222+
width: 8px;
223+
opacity: 0;
224+
visibility: hidden;
225+
transition: opacity 0.3s ease, visibility 0s 0.3s;
226+
}
227+
/* Style the scrollbar thumb (the draggable part) */
228+
#app .asside .menu-list::-webkit-scrollbar-thumb {
229+
border-radius: 10px;
230+
transition: background-color 0.3s ease;
231+
}
232+
/* Show the scrollbar and thumb when hovering */
233+
#app .asside .menu-list:hover::-webkit-scrollbar {
234+
opacity: 1;
235+
visibility: visible;
236+
transition: opacity 0.3s ease, visibility 0s;
237+
}
238+
/* Style the thumb when hovering */
239+
#app .asside .menu-list:hover::-webkit-scrollbar-thumb {
240+
background-color: rgba(0, 0, 0, 0.2);
241+
}
242+
/* Menu list scroll style end*/
Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)