Skip to content

Commit fec9e01

Browse files
marktayl1marktayl1
committed
Merge branch 'feature/ui-ux-refresh' of https://github.com/microsoft/Multi-Agent-Custom-Automation-Engine-Solution-Accelerator into feature/ui-ux-refresh
2 parents a0847ae + a8a1fce commit fec9e01

File tree

5 files changed

+99
-108
lines changed

5 files changed

+99
-108
lines changed

‎src/frontend_react/src/api/config.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
// src/config.js
22

3+
import { UserInfo } from "@/models";
4+
35
declare global {
46
interface Window {
57
appConfig?: Record<string, any>;
68
activeUserId?: string;
9+
userInfo?: UserInfo[];
710
}
811
}
912

@@ -38,7 +41,21 @@ export function getConfigData() {
3841

3942
return { ...config };
4043
}
41-
44+
export async function getUserInfo(): Promise<UserInfo[]> {
45+
try {
46+
const response = await fetch("/.auth/me");
47+
if (!response.ok) {
48+
console.log(
49+
"No identity provider found. Access to chat will be blocked."
50+
);
51+
return [];
52+
}
53+
const payload = await response.json();
54+
return payload;
55+
} catch (e) {
56+
return [];
57+
}
58+
}
4259
export function getApiUrl() {
4360
if (!API_URL) {
4461
// Check if window.appConfig exists
@@ -56,7 +73,7 @@ export function getApiUrl() {
5673
}
5774

5875
export function getUserId(): string {
59-
USER_ID = window.activeUserId ?? null;
76+
USER_ID = window.userInfo ? window.userInfo[0].user_id : null;
6077
const userId = USER_ID ?? "00000000-0000-0000-0000-000000000000";
6178
return userId;
6279
}

‎src/frontend_react/src/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import './index.css';
44
import App from './App';
55
import reportWebVitals from './reportWebVitals';
66
import { FluentProvider, teamsLightTheme, teamsDarkTheme } from "@fluentui/react-components";
7-
import { setEnvData, setApiUrl, config as defaultConfig, toBoolean } from './api/config';
7+
import { setEnvData, setApiUrl, config as defaultConfig, toBoolean, getUserInfo } from './api/config';
8+
import { UserInfo } from './models';
89
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
910

1011
const AppWrapper = () => {
1112
// State to store the current theme
1213
const [isConfigLoaded, setIsConfigLoaded] = useState(false);
14+
const [isUserInfoLoaded, setIsUserInfoLoaded] = useState(false);
15+
const [userInfo, setUserInfo] = useState<UserInfo[] | null>(null);
1316
const [isDarkMode, setIsDarkMode] = useState(
1417
window.matchMedia("(prefers-color-scheme: dark)").matches
1518
);
@@ -33,11 +36,15 @@ const AppWrapper = () => {
3336
setEnvData(config);
3437
setApiUrl(config.API_URL);
3538
setConfig(config);
39+
let defaultUserInfo = config.ENABLE_AUTH ? await getUserInfo() : [] as UserInfo[];
40+
window.userInfo = defaultUserInfo;
41+
setUserInfo(defaultUserInfo);
3642

3743
} catch (error) {
3844
console.info("frontend config did not load from python", error);
3945
} finally {
4046
setIsConfigLoaded(true);
47+
setIsUserInfoLoaded(true);
4148
}
4249
};
4350

@@ -58,7 +65,7 @@ const AppWrapper = () => {
5865
mediaQuery.addEventListener("change", handleThemeChange);
5966
return () => mediaQuery.removeEventListener("change", handleThemeChange);
6067
}, []);
61-
if (!isConfigLoaded) return <div>Loading...</div>;
68+
if (!isConfigLoaded || !isUserInfoLoaded) return <div>Loading...</div>;
6269
return (
6370
<StrictMode>
6471
<FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>

‎src/frontend_react/src/models/auth.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type UserInfo = {
2+
access_token: string;
3+
expires_on: string;
4+
id_token: string;
5+
provider_name: string;
6+
user_claims: any[];
7+
user_id: string;
8+
};

‎src/frontend_react/src/models/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ export * from './taskDetails';
1414
export * from './taskList';
1515
export * from './planPanelLeft';
1616
export * from './homeInput';
17+
export * from './auth'
1718

1819
// Add other model exports as needed

‎src/frontend_react/src/styles/TaskDetails.css‎

Lines changed: 62 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11

2-
/* TaskDetails Component Styles */
2+
/* TaskDetails.css */
3+
4+
.status-icon-completed {
5+
color: var(--colorPaletteGreenForeground1);
6+
}
7+
8+
.status-icon-planned {
9+
color: var(--colorBrandForeground1);
10+
}
11+
12+
.status-icon-rejected {
13+
color: var(--colorPaletteRedForeground1);
14+
}
315

416
.task-details-container {
517
display: flex;
@@ -11,24 +23,27 @@
1123
.task-details-section {
1224
display: flex;
1325
flex-direction: column;
14-
gap: 16px;
15-
padding: 16px;
16-
}
17-
18-
.task-details-section-title {
19-
font-size: var(--fontSizeBase500);
20-
font-weight: var(--fontWeightSemibold);
21-
margin-bottom: 8px;
26+
border-bottom: 1px solid var(--colorNeutralStroke2);
27+
padding: 0px 16px 24px 16px;
28+
gap: 24px;
2229
}
2330

2431
.task-details-progress-header {
2532
display: flex;
2633
align-items: center;
2734
justify-content: space-between;
28-
margin-bottom: 16px;
2935
}
3036

31-
.task-details-progress-ring {
37+
.task-details-progress-card {
38+
display: flex;
39+
align-items: center;
40+
padding: 12px;
41+
background-color: var(--colorNeutralBackground4);
42+
border-radius: var(--borderRadiusXLarge);
43+
width: 100%;
44+
}
45+
46+
.task-details-progress-icon {
3247
position: relative;
3348
width: 56px;
3449
height: 56px;
@@ -40,8 +55,7 @@
4055
top: 50%;
4156
left: 50%;
4257
transform: translate(-50%, -50%);
43-
font-size: var(--fontSizeBase200);
44-
font-weight: var(--fontWeightSemibold);
58+
padding-bottom: 2px;
4559
}
4660

4761
.task-details-subtask-list {
@@ -56,13 +70,6 @@
5670
gap: 8px;
5771
}
5872

59-
60-
61-
.task-details-subtask-details {
62-
font-size: var(--fontSizeBase200);
63-
color: var(--colorNeutralForeground3);
64-
}
65-
6673
.task-details-status-icon {
6774
display: flex;
6875
align-items: center;
@@ -71,73 +78,6 @@
7178
height: 24px;
7279
}
7380

74-
.task-details-status-completed {
75-
color: var(--colorPaletteGreenForeground1);
76-
}
77-
78-
.task-details-status-working {
79-
color: var(--colorBrandForeground1);
80-
}
81-
82-
.task-details-status-removed {
83-
color: var(--colorPaletteRedForeground1);
84-
}
85-
86-
.task-details-agent-section {
87-
margin-top: 8px;
88-
}
89-
90-
.task-details-agent-list {
91-
display: flex;
92-
flex-direction: column;
93-
gap: 12px;
94-
}
95-
96-
.task-details-agent-card {
97-
display: flex;
98-
align-items: center;
99-
gap: 12px;
100-
101-
102-
}
103-
104-
.task-details-agent-details {
105-
display: flex;
106-
flex-direction: column;
107-
}
108-
109-
.task-details-agent-name {
110-
font-size: var(--fontSizeBase300);
111-
font-weight: var(--fontWeightSemibold);
112-
}
113-
114-
.task-details-agent-description {
115-
font-size: var(--fontSizeBase200);
116-
color: var(--colorNeutralForeground2);
117-
}
118-
119-
.task-details-add-button {
120-
align-self: flex-start;
121-
margin-top: 8px;
122-
}
123-
124-
.task-details-task-title {
125-
font-weight: var(--fontWeightSemibold);
126-
font-size: var(--fontSizeBase600);
127-
}
128-
129-
.task-details-human-section {
130-
margin-top: 8px;
131-
}
132-
133-
.task-details-human-list {
134-
display: flex;
135-
flex-direction: column;
136-
gap: 12px;
137-
}
138-
139-
/* ...existing styles... */
140-
14181
.task-details-subtask-content {
14282
display: flex;
14383
align-items: center;
@@ -146,44 +86,62 @@
14686
gap: 8px;
14787
}
14888

149-
.task-details-subtask-name {
89+
.task-details-subtask-description {
15090
font-size: var(--fontSizeBase300);
15191
font-weight: var(--fontWeightSemibold);
15292
flex: 1;
15393
}
15494

155-
.task-details-subtask-actions {
95+
.task-details-action-buttons {
15696
display: flex;
15797
align-items: center;
15898
gap: 8px;
15999
}
160100

161-
.task-details-checkbox-icon,
162-
.task-details-dismiss-icon {
101+
.task-details-action-button {
163102
cursor: pointer;
164103
padding: 4px;
165104
border-radius: var(--borderRadiusSmall);
166-
transition: background-color 0.2s ease, color 0.2s ease;
167105
}
168106

169-
.task-details-checkbox-icon:hover {
170-
background-color: var(--colorNeutralBackground2);
171-
color: var(--colorPaletteGreenForeground1);
107+
.task-details-action-button-disabled {
108+
cursor: not-allowed;
109+
padding: 4px;
110+
border-radius: var(--borderRadiusSmall);
172111
}
173112

174-
.task-details-dismiss-icon:hover {
175-
background-color: var(--colorNeutralBackground2);
176-
color: var(--colorPaletteRedForeground1);
113+
.task-details-agents-container {
114+
display: flex;
115+
flex-direction: column;
177116
}
178117

179-
.task-details-checkbox-icon-disabled,
180-
.task-details-dismiss-icon-disabled {
181-
cursor: not-allowed;
182-
padding: 4px;
183-
border-radius: var(--borderRadiusSmall);
184-
transition: background-color 0.2s ease, color 0.2s ease;
118+
.task-details-agents-header {
119+
padding: 18px 16px;
120+
max-height: 56px;
185121
}
186122

123+
.task-details-agents-list {
124+
display: flex;
125+
flex-direction: column;
126+
gap: 16px;
127+
padding: 0 16px 16px 16px;
128+
}
129+
130+
.task-details-agent-card {
131+
display: flex;
132+
align-items: center;
133+
gap: 12px;
134+
}
135+
136+
.task-details-agent-details {
137+
display: flex;
138+
flex-direction: column;
139+
}
140+
141+
.task-details-agent-name {
142+
font-size: var(--fontSizeBase300);
143+
font-weight: var(--fontWeightSemibold);
144+
}
187145
.strikethrough {
188146
text-decoration: line-through;
189147
}

0 commit comments

Comments
 (0)