Skip to content

Commit 9ca448f

Browse files
vipinnair22vipinnair22
authored
Changes to update UI components to make it consistent with Mirai (#144)
* Changes to update UI components to make it consistent with Mirai * Addressed review comments
1 parent 5c3c5ab commit 9ca448f

File tree

10 files changed

+821
-72
lines changed

10 files changed

+821
-72
lines changed

‎src/api/routes.py

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -391,4 +391,38 @@ async def run_evaluation():
391391
logger.error(f"Error creating agent evaluation: {e}")
392392

393393
# Create a new task to run the evaluation asynchronously
394-
asyncio.create_task(run_evaluation())
394+
asyncio.create_task(run_evaluation())
395+
396+
397+
@router.get("/config/azure")
398+
async def get_azure_config(_ = auth_dependency):
399+
"""Get Azure configuration for frontend use"""
400+
try:
401+
subscription_id = os.environ.get("AZURE_SUBSCRIPTION_ID", "")
402+
tenant_id = os.environ.get("AZURE_TENANT_ID", "")
403+
resource_group = os.environ.get("AZURE_RESOURCE_GROUP", "")
404+
ai_project_resource_id = os.environ.get("AZURE_EXISTING_AIPROJECT_RESOURCE_ID", "")
405+
406+
# Extract resource name and project name from the resource ID
407+
# Format: /subscriptions/{sub}/resourceGroups/{rg}/providers/Microsoft.CognitiveServices/accounts/{resource}/projects/{project}
408+
resource_name = ""
409+
project_name = ""
410+
411+
if ai_project_resource_id:
412+
parts = ai_project_resource_id.split("/")
413+
if len(parts) >= 8:
414+
resource_name = parts[8] # accounts/{resource_name}
415+
if len(parts) >= 10:
416+
project_name = parts[10] # projects/{project_name}
417+
418+
return JSONResponse({
419+
"subscriptionId": subscription_id,
420+
"tenantId": tenant_id,
421+
"resourceGroup": resource_group,
422+
"resourceName": resource_name,
423+
"projectName": project_name,
424+
"wsid": ai_project_resource_id
425+
})
426+
except Exception as e:
427+
logger.error(f"Error getting Azure config: {e}")
428+
raise HTTPException(status_code=500, detail="Failed to get Azure configuration")

‎src/frontend/src/components/agents/AgentPreview.module.css

Lines changed: 171 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,207 @@
11
.container {
2+
position: relative;
3+
4+
overflow: hidden;
25
display: flex;
36
flex-direction: column;
4-
height: 100vh;
7+
58
width: 100%;
6-
background-color: var(--colorNeutralBackground1);
9+
max-width: 100%;
10+
height: 100vh;
711
}
812

913
.topBar {
1014
display: flex;
15+
flex-shrink: 0;
16+
align-items: center;
1117
justify-content: space-between;
18+
19+
box-sizing: border-box;
20+
width: 100%;
21+
max-width: 100%;
22+
padding: 16px 24px;
23+
}
24+
25+
.leftSection {
26+
overflow: hidden;
27+
display: flex;
28+
flex: 1;
29+
gap: 16px;
1230
align-items: center;
13-
padding: 8px 16px;
14-
border-bottom: 1px solid var(--colorNeutralStroke1);
15-
background-color: var(--colorNeutralBackground2);
31+
32+
min-width: 0;
1633
}
1734

18-
.leftSection, .rightSection {
35+
.rightSection {
1936
display: flex;
37+
flex-shrink: 0;
38+
gap: 8px;
2039
align-items: center;
40+
}
41+
42+
.agentIconContainer {
43+
display: flex;
2144
gap: 8px;
45+
align-items: center;
2246
}
2347

2448
.agentIcon {
25-
width: 24px;
26-
height: 24px;
27-
border-radius: 4px;
49+
flex-shrink: 0;
50+
width: 32px;
51+
height: 32px;
2852
}
2953

30-
.emptyStateAgentIcon {
31-
width: 64px;
32-
height: 64px;
33-
border-radius: 8px;
54+
.agentIcon.newAgent {
55+
background-color: var(--colorNeutralForegroundDisabled);
56+
border-radius: 50%;
3457
}
3558

3659
.agentName {
60+
overflow: hidden;
3761
font-weight: 600;
62+
text-overflow: ellipsis;
63+
white-space: nowrap;
64+
}
65+
66+
.agentName.newAgent {
67+
color: var(--colorNeutralForegroundDisabled);
3868
}
3969

4070
.content {
71+
position: relative;
72+
73+
overflow: hidden;
74+
display: grid;
75+
grid-template-columns: 1fr minmax(min(500px, 100%), 50%) 1fr;
76+
flex-direction: column;
77+
align-items: center;
78+
justify-content: center;
79+
80+
box-sizing: border-box;
81+
width: 100%;
82+
height: 100%;
83+
padding-bottom: 12px;
84+
}
85+
86+
.builtWithBadge {
87+
position: absolute;
88+
bottom: 24px;
89+
left: 24px;
90+
z-index: 10;
91+
92+
/* No design yet for how to handle the badge on smaller screens, hide it for now */
93+
@media (width <= 768px) {
94+
display: none;
95+
}
96+
}
97+
98+
.chatbot {
99+
overflow: hidden;
41100
display: flex;
101+
grid-column: 2;
42102
flex: 1;
43103
flex-direction: column;
104+
}
105+
106+
.chatbot:not(:has(.emptyChatContainer)) {
107+
height: 100%;
108+
}
109+
110+
.emptyChatContainer {
111+
display: flex;
112+
flex-direction: column;
44113
align-items: center;
45-
justify-content: center;
114+
}
115+
116+
.wavesContainer {
117+
pointer-events: none;
118+
119+
position: absolute;
120+
z-index: 0;
121+
bottom: 0;
122+
left: 0;
123+
46124
overflow: hidden;
47125

48-
box-sizing: border-box;
49-
width: 50%;
50-
margin: 5px auto;
126+
width: 100%;
127+
height: 300px;
128+
max-height: 100%;
129+
130+
animation: waves-fade-in 1s ease-in-out;
131+
}
132+
133+
.wavesContainer > canvas {
134+
width: 100%;
135+
height: 100%;
136+
}
137+
138+
@keyframes waves-fade-in {
139+
from {
140+
opacity: 0;
141+
}
142+
143+
to {
144+
opacity: 1;
145+
}
146+
}
147+
148+
/* Legacy styles kept for compatibility */
149+
.emptyStateAgentIcon {
150+
width: 64px;
151+
height: 64px;
152+
border-radius: 8px;
153+
margin-bottom: 16px;
154+
}
155+
156+
.content > .agentName {
157+
margin-bottom: 8px;
158+
}
159+
160+
.menuButtonContainer {
161+
position: relative;
162+
display: inline-block;
163+
}
164+
165+
.menuButton {
166+
position: relative;
167+
}
168+
169+
.menu {
170+
position: absolute;
171+
top: 100%;
172+
right: 0;
173+
background-color: var(--colorNeutralBackground1);
174+
border: 1px solid var(--colorNeutralStroke1);
175+
border-radius: 4px;
176+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
177+
z-index: 1000;
178+
min-width: 200px;
179+
display: none;
180+
}
181+
182+
.menuButtonContainer:hover .menu,
183+
.menuButton:focus-within .menu {
184+
display: block;
185+
}
186+
187+
.menuItem {
188+
display: flex;
189+
align-items: center;
190+
padding: 8px 16px;
191+
cursor: pointer;
192+
gap: 8px;
193+
}
194+
195+
.menuItem:hover {
196+
background-color: var(--colorNeutralBackground2);
197+
}
198+
199+
.externalLink {
200+
text-decoration: none;
201+
color: inherit;
202+
display: flex;
203+
align-items: center;
204+
width: 100%;
51205
}
52206

53207
.menuButtonContainer {

0 commit comments

Comments
 (0)