Skip to content

Commit f3fd090

Browse files
Mohan-MicrosoftMohan-Microsoft
authored
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
1 parent 65275c3 commit f3fd090

File tree

3 files changed

+152
-86
lines changed

3 files changed

+152
-86
lines changed

‎src/frontend/wwwroot/app.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ body {
3434
#app .asside {
3535
background: rgba(231, 236, 243, 0.7);
3636
}
37-
37+
ul#tasksStats.menu-list {
38+
min-height: 100px;
39+
}
3840
@media (min-width: 1800px) {
3941
#app .asside {
4042
max-width: 400px;
@@ -83,7 +85,6 @@ body {
8385
#app .iframe {
8486
width: 100%;
8587
background-color: transparent;
86-
/* overflow-y: auto; */
8788
}
8889

8990
#app .context-switch {

‎src/frontend/wwwroot/task/employee.html‎

Lines changed: 118 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,136 @@
11
<!DOCTYPE html>
22
<html lang="en-US" data-theme="light">
3-
4-
<head>
3+
<head>
54
<meta charset="utf-8" />
65
<title>Task</title>
7-
<link rel="stylesheet" href="task.css">
8-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
9-
</head>
6+
<link rel="stylesheet" href="task.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css"
10+
/>
11+
</head>
1012

11-
<body>
13+
<body>
1214
<div id="taskLoader">
13-
<i class="fa-solid fa-circle-notch fa-spin"></i>
14-
<span class="mt-3"></span>
15+
<i class="fa-solid fa-circle-notch fa-spin"></i>
16+
<span class="mt-3"></span>
1517
</div>
1618
<div class="is-flex is-flex is-flex-direction-column is-flex-grow-1">
17-
<div class="columns is-gapless">
18-
<div class="column asside task-asside border-right is-one-quarter">
19-
<!-- Task menu start -->
20-
<aside class="menu task-menu">
21-
<h2 class="title mt-6">Task plan</h2>
22-
<p class="menu-label">Stages</p>
23-
<ul class="menu-list">
24-
<li>
25-
<ul id="taskStagesMenu" class="menu-stages"></ul>
26-
</li>
27-
</ul>
28-
</aside>
29-
<!-- Task menu end -->
19+
<div class="columns is-gapless">
20+
<div class="column asside task-asside border-right is-one-quarter">
21+
<!-- Task menu start -->
22+
<aside class="menu task-menu">
23+
<h2 class="title mt-6">Task plan</h2>
24+
<p class="menu-label">Stages</p>
25+
<ul class="menu-list">
26+
<li>
27+
<ul id="taskStagesMenu" class="menu-stages"></ul>
28+
</li>
29+
</ul>
30+
</aside>
31+
<!-- Task menu end -->
32+
</div>
33+
<div class="column colChatSec">
34+
<section
35+
class="task-details section is-flex is-flex-direction-column"
36+
>
37+
<!-- Task nav start -->
38+
<div class="columns">
39+
<div class="column">
40+
<h1 id="taskName" class="title"></h1>
41+
</div>
42+
<div class="column">
43+
<div class="buttons has-addons is-pulled-right">
44+
<button
45+
class="button"
46+
id="taskPauseButton"
47+
title="Start/Pause"
48+
>
49+
<span class="icon is-small">
50+
<i class="fa-regular fa-circle-pause"></i>
51+
</span>
52+
</button>
53+
<button id="taskCancelButton" class="button" title="Cancel">
54+
Cancel
55+
</button>
56+
</div>
57+
</div>
3058
</div>
31-
<div class="column">
32-
<section class="task-details section is-flex is-flex-direction-column">
59+
<!-- Task nav end -->
3360

34-
<!-- Task nav start -->
35-
<div class="columns">
36-
<div class="column">
37-
<h1 id="taskName" class="title"></h1>
38-
</div>
39-
<div class="column">
40-
<div class="buttons has-addons is-pulled-right">
41-
<button class="button" id="taskPauseButton" title="Start/Pause">
42-
<span class="icon is-small">
43-
<i class="fa-regular fa-circle-pause"></i>
44-
</span>
45-
</button>
46-
<button id="taskCancelButton" class="button" title="Cancel">Cancel</button>
47-
</div>
48-
</div>
49-
</div>
50-
<!-- Task nav end -->
51-
52-
<!-- Task status start -->
53-
<div class="columns">
54-
<div class="column is-two-fifths border-right">
55-
<p class="mb-3"><strong>Status:</strong>
56-
<tag id="taskStatusTag" class="tag is-info">In Progress</tag>
57-
</p>
58-
<div id="taskStatusDetails"></div>
59-
</div>
60-
<div class="column has-text-right">
61-
<div id="taskDetailsAgents" class="is-flex is-justify-content-end task-stats"></div>
62-
<strong id="taskAgentsHumans"></strong>
63-
</div>
64-
<div class="column has-text-right">
65-
<div class="is-size-1 task-stats has-text-info" id="taskProgressPercentage"></div>
66-
<strong id="taskProgress"></strong>
67-
</div>
68-
</div>
69-
<progress id="taskProgressBar" class="progress is-link mb-3" value="0" max="100"></progress>
70-
<!-- Task status end -->
61+
<!-- Task status start -->
62+
<div class="columns">
63+
<div class="column is-two-fifths border-right">
64+
<p class="mb-3">
65+
<strong>Status:</strong>
66+
<tag id="taskStatusTag" class="tag is-info">In Progress</tag>
67+
</p>
68+
<div id="taskStatusDetails"></div>
69+
</div>
70+
<div class="column has-text-right">
71+
<div
72+
id="taskDetailsAgents"
73+
class="is-flex is-justify-content-end task-stats"
74+
></div>
75+
<strong id="taskAgentsHumans"></strong>
76+
</div>
77+
<div class="column has-text-right">
78+
<div
79+
class="is-size-1 task-stats has-text-info"
80+
id="taskProgressPercentage"
81+
></div>
82+
<strong id="taskProgress"></strong>
83+
</div>
84+
</div>
85+
<progress
86+
id="taskProgressBar"
87+
class="progress is-link mb-3"
88+
value="0"
89+
max="100"
90+
></progress>
91+
<!-- Task status end -->
7192

72-
<!-- Task progress start -->
73-
<div id="taskMessages" class="task-progress px-3 py-3"></div>
74-
<div class="text-input-container">
75-
<textarea id="taskMessageTextarea" maxlength="1000" placeholder="Add more info to this task..."></textarea>
76-
<div class="middle-bar">
77-
<span class="char-count"><span id="charCount">0</span>/1000</span>
78-
</div>
79-
<div class="bottom-bar">
80-
<span class="icons">
81-
<img src="../assets/images/stars.svg" alt="stars">
82-
</span>
83-
<button class="send-button" id="taskMessageAddButton">
84-
<img src="../assets/images/air-button.svg" id="startTaskButton">
85-
</button>
86-
</div>
87-
</div>
88-
<!-- Task progress end -->
89-
</section>
93+
<!-- Task progress start -->
94+
<div id="taskMessages" class="task-progress px-3 py-3"></div>
95+
<div class="text-input-container">
96+
<textarea
97+
id="taskMessageTextarea"
98+
maxlength="1000"
99+
placeholder="Add more info to this task..."
100+
></textarea>
101+
<div class="middle-bar">
102+
<span class="char-count"
103+
><span id="charCount">0</span>/1000</span
104+
>
105+
</div>
106+
<div class="bottom-bar">
107+
<span class="icons">
108+
<img src="../assets/images/stars.svg" alt="stars" />
109+
</span>
110+
<button class="send-button" id="taskMessageAddButton">
111+
<img
112+
src="../assets/images/air-button.svg"
113+
id="startTaskButton"
114+
/>
115+
</button>
116+
</div>
90117
</div>
118+
<!-- Task progress end -->
119+
</section>
91120
</div>
121+
</div>
92122
</div>
93-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
94-
<script type="text/javascript" src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
123+
<script
124+
type="text/javascript"
125+
src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"
126+
></script>
127+
<script
128+
type="text/javascript"
129+
src="https://unpkg.com/showdown/dist/showdown.min.js"
130+
></script>
95131
<script src="../utils.js"></script>
96132
<script src="../app.js"></script>
97133
<script type="text/javascript" src="task.js"></script>
98134
<script src="../utils.js"></script>
99-
</body>
135+
</body>
136+
</html>

‎src/frontend/wwwroot/task/task.css‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,32 @@
3434
}
3535

3636
.task-details {
37-
max-width: 1280px;
37+
width: 100%;
3838
}
39+
.colChatSec {
40+
width: 55%;
41+
}
42+
/*Notification message styles start*/
43+
/* Ensures block-level elements (like <p>, <pre>, etc.) wrap inside the message */
44+
.notification p,
45+
.notification pre {
46+
margin: 0;
47+
word-wrap: break-word;
48+
white-space: pre-wrap; /* Allow preformatted text to wrap */
49+
}
50+
.message-content {
51+
max-width: 100%;
52+
overflow: hidden;
53+
word-break: break-word;
54+
line-height: 1.4;
55+
}
56+
/* Optional: Add word-breaking for URLs */
57+
.notification a {
58+
word-wrap: break-word;
59+
word-break: break-word;
60+
text-decoration: underline;
61+
}
62+
/*Notification message styles end*/
3963

4064
.task-progress {
4165
height: 40vh;
@@ -57,8 +81,12 @@
5781
}
5882

5983
.task-progress .notification {
60-
display: inline-block;
6184
padding: 0.5rem 1rem;
85+
display: block;
86+
max-width: 100%;
87+
word-wrap: break-word;
88+
box-sizing: border-box;
89+
overflow-wrap: break-word;
6290
}
6391

6492
.menu-list .menu-item,
@@ -94,7 +122,7 @@
94122

95123
.menu-list a.menu-stage span {
96124
flex: 1;
97-
word-break: break-word;
125+
word-break: break-word; /*this for stages span alignment*/
98126
}
99127

100128
.menu-list a.menu-stage.rejected span {

0 commit comments

Comments
 (0)