Skip to content

Fix: UX becomes damaged when chat outputs sample code for a task #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 31, 2024
Merged

Fix: UX becomes damaged when chat outputs sample code for a task #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c1ae6c
task page UI updates
Mohan-Microsoft Dec 27, 2024
acc385d
UI updated code for task
Mohan-Microsoft Dec 30, 2024
17279a7
Task page UI updated code
Mohan-Microsoft Dec 30, 2024
181d05a
status section UI update in task page
Mohan-Microsoft Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/frontend/wwwroot/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ body {
#app .asside {
background: rgba(231, 236, 243, 0.7);
}

ul#tasksStats.menu-list {
min-height: 100px;
}
@media (min-width: 1800px) {
#app .asside {
max-width: 400px;
Expand Down Expand Up @@ -83,7 +85,6 @@ body {
#app .iframe {
width: 100%;
background-color: transparent;
/* overflow-y: auto; */
}

#app .context-switch {
Expand Down
199 changes: 118 additions & 81 deletions src/frontend/wwwroot/task/employee.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,136 @@
<!DOCTYPE html>
<html lang="en-US" data-theme="light">

<head>
<head>
<meta charset="utf-8" />
<title>Task</title>
<link rel="stylesheet" href="task.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
</head>
<link rel="stylesheet" href="task.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css"
/>
</head>

<body>
<body>
<div id="taskLoader">
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="mt-3"></span>
<i class="fa-solid fa-circle-notch fa-spin"></i>
<span class="mt-3"></span>
</div>
<div class="is-flex is-flex is-flex-direction-column is-flex-grow-1">
<div class="columns is-gapless">
<div class="column asside task-asside border-right is-one-quarter">
<!-- Task menu start -->
<aside class="menu task-menu">
<h2 class="title mt-6">Task plan</h2>
<p class="menu-label">Stages</p>
<ul class="menu-list">
<li>
<ul id="taskStagesMenu" class="menu-stages"></ul>
</li>
</ul>
</aside>
<!-- Task menu end -->
<div class="columns is-gapless">
<div class="column asside task-asside border-right is-one-quarter">
<!-- Task menu start -->
<aside class="menu task-menu">
<h2 class="title mt-6">Task plan</h2>
<p class="menu-label">Stages</p>
<ul class="menu-list">
<li>
<ul id="taskStagesMenu" class="menu-stages"></ul>
</li>
</ul>
</aside>
<!-- Task menu end -->
</div>
<div class="column colChatSec">
<section
class="task-details section is-flex is-flex-direction-column"
>
<!-- Task nav start -->
<div class="columns">
<div class="column">
<h1 id="taskName" class="title"></h1>
</div>
<div class="column">
<div class="buttons has-addons is-pulled-right">
<button
class="button"
id="taskPauseButton"
title="Start/Pause"
>
<span class="icon is-small">
<i class="fa-regular fa-circle-pause"></i>
</span>
</button>
<button id="taskCancelButton" class="button" title="Cancel">
Cancel
</button>
</div>
</div>
</div>
<div class="column">
<section class="task-details section is-flex is-flex-direction-column">
<!-- Task nav end -->

<!-- Task nav start -->
<div class="columns">
<div class="column">
<h1 id="taskName" class="title"></h1>
</div>
<div class="column">
<div class="buttons has-addons is-pulled-right">
<button class="button" id="taskPauseButton" title="Start/Pause">
<span class="icon is-small">
<i class="fa-regular fa-circle-pause"></i>
</span>
</button>
<button id="taskCancelButton" class="button" title="Cancel">Cancel</button>
</div>
</div>
</div>
<!-- Task nav end -->

<!-- Task status start -->
<div class="columns">
<div class="column is-two-fifths border-right">
<p class="mb-3"><strong>Status:</strong>
<tag id="taskStatusTag" class="tag is-info">In Progress</tag>
</p>
<div id="taskStatusDetails"></div>
</div>
<div class="column has-text-right">
<div id="taskDetailsAgents" class="is-flex is-justify-content-end task-stats"></div>
<strong id="taskAgentsHumans"></strong>
</div>
<div class="column has-text-right">
<div class="is-size-1 task-stats has-text-info" id="taskProgressPercentage"></div>
<strong id="taskProgress"></strong>
</div>
</div>
<progress id="taskProgressBar" class="progress is-link mb-3" value="0" max="100"></progress>
<!-- Task status end -->
<!-- Task status start -->
<div class="columns">
<div class="column is-two-fifths border-right">
<p class="mb-3">
<strong>Status:</strong>
<tag id="taskStatusTag" class="tag is-info">In Progress</tag>
</p>
<div id="taskStatusDetails"></div>
</div>
<div class="column has-text-right">
<div
id="taskDetailsAgents"
class="is-flex is-justify-content-end task-stats"
></div>
<strong id="taskAgentsHumans"></strong>
</div>
<div class="column has-text-right">
<div
class="is-size-1 task-stats has-text-info"
id="taskProgressPercentage"
></div>
<strong id="taskProgress"></strong>
</div>
</div>
<progress
id="taskProgressBar"
class="progress is-link mb-3"
value="0"
max="100"
></progress>
<!-- Task status end -->

<!-- Task progress start -->
<div id="taskMessages" class="task-progress px-3 py-3"></div>
<div class="text-input-container">
<textarea id="taskMessageTextarea" maxlength="1000" placeholder="Add more info to this task..."></textarea>
<div class="middle-bar">
<span class="char-count"><span id="charCount">0</span>/1000</span>
</div>
<div class="bottom-bar">
<span class="icons">
<img src="../assets/images/stars.svg" alt="stars">
</span>
<button class="send-button" id="taskMessageAddButton">
<img src="../assets/images/air-button.svg" id="startTaskButton">
</button>
</div>
</div>
<!-- Task progress end -->
</section>
<!-- Task progress start -->
<div id="taskMessages" class="task-progress px-3 py-3"></div>
<div class="text-input-container">
<textarea
id="taskMessageTextarea"
maxlength="1000"
placeholder="Add more info to this task..."
></textarea>
<div class="middle-bar">
<span class="char-count"
><span id="charCount">0</span>/1000</span
>
</div>
<div class="bottom-bar">
<span class="icons">
<img src="../assets/images/stars.svg" alt="stars" />
</span>
<button class="send-button" id="taskMessageAddButton">
<img
src="../assets/images/air-button.svg"
id="startTaskButton"
/>
</button>
</div>
</div>
<!-- Task progress end -->
</section>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"
></script>
<script
type="text/javascript"
src="https://unpkg.com/showdown/dist/showdown.min.js"
></script>
<script src="../utils.js"></script>
<script src="../app.js"></script>
<script type="text/javascript" src="task.js"></script>
<script src="../utils.js"></script>
</body>
</body>
</html>
34 changes: 31 additions & 3 deletions src/frontend/wwwroot/task/task.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,32 @@
}

.task-details {
max-width: 1280px;
width: 100%;
}
.colChatSec {
width: 55%;
}
/*Notification message styles start*/
/* Ensures block-level elements (like <p>, <pre>, etc.) wrap inside the message */
.notification p,
.notification pre {
margin: 0;
word-wrap: break-word;
white-space: pre-wrap; /* Allow preformatted text to wrap */
}
.message-content {
max-width: 100%;
overflow: hidden;
word-break: break-word;
line-height: 1.4;
}
/* Optional: Add word-breaking for URLs */
.notification a {
word-wrap: break-word;
word-break: break-word;
text-decoration: underline;
}
/*Notification message styles end*/

.task-progress {
height: 40vh;
Expand All @@ -57,8 +81,12 @@
}

.task-progress .notification {
display: inline-block;
padding: 0.5rem 1rem;
display: block;
max-width: 100%;
word-wrap: break-word;
box-sizing: border-box;
overflow-wrap: break-word;
}

.menu-list .menu-item,
Expand Down Expand Up @@ -94,7 +122,7 @@

.menu-list a.menu-stage span {
flex: 1;
word-break: break-word;
word-break: break-word; /*this for stages span alignment*/
}

.menu-list a.menu-stage.rejected span {
Expand Down