-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
Status:
- In Progress
-
-
-
-
-
-
+
+
+ Status:
+ In Progress
+
+
+
+
+
+
-
-
- 0/1000
-
-
-
- 
-
-
-
-
+
+
+
+
+
+ 0/1000
+
+
+
+
+
+
+
+
+
-
-
+
+
-
\ No newline at end of file
+
+
diff --git a/src/frontend/wwwroot/task/task.css b/src/frontend/wwwroot/task/task.css
index 8e5a683c3..9f7dca6a1 100644
--- a/src/frontend/wwwroot/task/task.css
+++ b/src/frontend/wwwroot/task/task.css
@@ -2,241 +2,270 @@
@import "../assets/bulma-switch.css";
.task-stats {
- min-height: 70px;
+ min-height: 70px;
}
.section {
- min-height: 100%;
+ min-height: 100%;
}
.task-asside {
- min-height: 100vh;
- max-width: 500px;
+ min-height: 100vh;
+ max-width: 500px;
}
.task-asside.is-audit {
- max-width: 700px;
+ max-width: 700px;
}
.task-asside .task-menu {
- margin: 3rem 1rem;
+ margin: 3rem 1rem;
}
.task-asside .task-menu .menu-label:first-of-type {
- margin-top: 137px;
+ margin-top: 137px;
}
.task-asside .title {
- font-size: 1.25rem;
- height: 30px;
- display: flex;
- align-items: center;
+ font-size: 1.25rem;
+ height: 30px;
+ display: flex;
+ align-items: center;
}
.task-details {
- max-width: 1280px;
+ width: 100%;
}
+.colChatSec {
+ width: 55%;
+}
+/*Notification message styles start*/
+/* Ensures block-level elements (like
,
, 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;
- overflow-y: auto;
- background-color: white;
- border-radius: var(--bulma-radius);
+ height: 40vh;
+ overflow-y: auto;
+ background-color: white;
+ border-radius: var(--bulma-radius);
}
@media (min-height: 1200px) {
- .task-progress {
- height: 50vh;
- }
+ .task-progress {
+ height: 50vh;
+ }
}
@media (min-height: 1400px) {
- .task-progress {
- height: 60vh;
- }
+ .task-progress {
+ height: 60vh;
+ }
}
.task-progress .notification {
- display: inline-block;
- padding: 0.5rem 1rem;
+ 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,
.menu-list a,
.menu-list button {
- background-color: transparent;
+ background-color: transparent;
}
.menu-list ul.menu-stages {
- border-inline-start: 3px solid var(--bulma-border);
- padding-inline-start: 0;
+ border-inline-start: 3px solid var(--bulma-border);
+ padding-inline-start: 0;
}
.menu-list ul.menu-stages li {
- margin-left: calc(-1.4rem - 5px);
+ margin-left: calc(-1.4rem - 5px);
}
.menu-list a.menu-stage {
- display: flex;
- align-items: center;
- position: relative;
- padding: 0.5em 0 0.5rem 0.75em;
- width: calc(100% + 1.4rem - 5px);
+ display: flex;
+ align-items: center;
+ position: relative;
+ padding: 0.5em 0 0.5rem 0.75em;
+ width: calc(100% + 1.4rem - 5px);
}
-.menu-list a.menu-stage>i {
- font-size: 1.4rem;
- margin-top: 3px;
- border-radius: 50%;
- background-color: rgb(247, 249, 251);
- padding: 5px;
+.menu-list a.menu-stage > i {
+ font-size: 1.4rem;
+ margin-top: 3px;
+ border-radius: 50%;
+ background-color: rgb(247, 249, 251);
+ padding: 5px;
}
.menu-list a.menu-stage span {
- flex: 1;
+ flex: 1;
+ word-break: break-word; /*this for stages span alignment*/
}
.menu-list a.menu-stage.rejected span {
- text-decoration: line-through;
- opacity: 0.5;
+ text-decoration: line-through;
+ opacity: 0.5;
}
.menu-list a.menu-stage.action_requested span {
- font-weight: 500;
+ font-weight: 500;
}
.menu-list a.menu-stage div {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.menu-stage-actions i {
- font-size: 1.4rem;
+ font-size: 1.4rem;
}
.business-animation {
- position: relative;
- border-radius: var(--bulma-radius-large);
+ position: relative;
+ border-radius: var(--bulma-radius-large);
}
#taskLoader {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: absolute;
- inset: 0;
- color: black;
- background-color: rgb(247, 249, 251);
- z-index: 1000;
- font-weight: 500;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ inset: 0;
+ color: black;
+ background-color: rgb(247, 249, 251);
+ z-index: 1000;
+ font-weight: 500;
}
#taskLoader span::before {
- content: "Getting task plan...";
- animation: taskLoaderAnimation infinite 3s linear;
+ content: "Getting task plan...";
+ animation: taskLoaderAnimation infinite 3s linear;
}
#taskLoader.is-hidden {
- display: none;
+ display: none;
}
@keyframes taskLoaderAnimation {
+ 0% {
+ content: "Getting task plan...";
+ }
- 0% {
- content: "Getting task plan...";
- }
-
- 50% {
- content: "Contacting agents...";
- }
+ 50% {
+ content: "Contacting agents...";
+ }
- 75% {
- content: "Loading conversations...";
- }
+ 75% {
+ content: "Loading conversations...";
+ }
}
#taskLoader i {
- font-size: 3rem;
+ font-size: 3rem;
}
.task-stage-divider {
- text-align: center;
- margin: 1rem 0;
- font-size: .85rem;
- font-weight: 500;
- border: 1px solid rgb(71, 80, 235);
- border-left-width: 0;
- border-right-width: 0;
- border-bottom-width: 0;
+ text-align: center;
+ margin: 1rem 0;
+ font-size: 0.85rem;
+ font-weight: 500;
+ border: 1px solid rgb(71, 80, 235);
+ border-left-width: 0;
+ border-right-width: 0;
+ border-bottom-width: 0;
}
.task-stage-divider legend {
- color: rgb(71, 80, 235);
- -webkit-padding-start: 1rem;
- -webkit-padding-end: 1rem;
- background: transparent;
+ color: rgb(71, 80, 235);
+ -webkit-padding-start: 1rem;
+ -webkit-padding-end: 1rem;
+ background: transparent;
}
.text-input-container {
- position: relative;
- border: 1px solid #ccc;
- border-radius: 8px;
- background-color: white;
+ position: relative;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ background-color: white;
}
-
+
textarea {
- width: 98%;
- padding: 0px;
- border: none;
- border-radius: 8px 8px 0 0;
- font-size: 16px;
- line-height: 1.5;
- resize: none;
- outline: none;
- overflow: hidden;
- margin: 0 10px;
- align-items: center;
+ width: 98%;
+ padding: 16px 0px 0px 0px;
+ border: none;
+ border-radius: 8px 8px 0 0;
+ font-size: 16px;
+ line-height: 1.5;
+ resize: none;
+ outline: none;
+ overflow: hidden;
+ margin: 0 10px;
+ align-items: center;
+ background-color: white;
}
.star-icon {
- margin-right: 10px;
- cursor: pointer;
+ margin-right: 10px;
+ cursor: pointer;
}
-
- .char-count {
- font-size: 14px;
- color: #888;
+
+.char-count {
+ font-size: 14px;
+ color: #888;
}
.middle-bar {
- display: flex;
- justify-content: space-between;
- align-items: left;
- padding: 0px 5px;
- background-color: white;
- }
-
- .bottom-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 3px 10px;
- border-top: none;
- border-bottom: 4px solid #0F6CBD;
- background-color: white;
- }
-
- .send-button {
- border: none;
- background: none;
- font-size: 18px;
- cursor: pointer;
- color: #007bff;
- padding: 4px;
- outline: none;
-}
-
- .send-button:hover {
- color: #0056b3;
+ display: flex;
+ justify-content: space-between;
+ align-items: left;
+ padding: 0px 5px;
+ background-color: white;
+}
+
+.bottom-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 3px 10px;
+ border-top: none;
+ border-bottom: 4px solid #0f6cbd;
+ background-color: white;
+}
+
+.send-button {
+ border: none;
+ background: none;
+ font-size: 18px;
+ cursor: pointer;
+ color: #007bff;
+ padding: 4px;
+ outline: none;
+}
+
+.send-button:hover {
+ color: #0056b3;
}
diff --git a/src/frontend/wwwroot/task/task.js b/src/frontend/wwwroot/task/task.js
index 666d6deec..1282d5476 100644
--- a/src/frontend/wwwroot/task/task.js
+++ b/src/frontend/wwwroot/task/task.js
@@ -1,425 +1,469 @@
(() => {
- const markdownConverter = new showdown.Converter();
- const apiEndpoint = sessionStorage.getItem('apiEndpoint');
- const taskStore = JSON.parse(sessionStorage.getItem('task'));
- const taskName = document.getElementById("taskName");
- const taskStatusTag = document.getElementById("taskStatusTag");
- const taskStagesMenu = document.getElementById("taskStagesMenu");
- const taskPauseButton = document.getElementById("taskPauseButton");
- const taskAgentsButton = document.getElementById("taskAgentsButton");
- const taskWokFlowButton = document.getElementById("taskWokFlowButton");
- const taskMessageAddButton = document.getElementById("taskMessageAddButton");
- const taskMessages = document.getElementById("taskMessages");
- const taskDetailsAgents = document.getElementById("taskDetailsAgents");
- const taskProgress = document.getElementById("taskProgress");
- const taskProgressPercentage = document.getElementById("taskProgressPercentage");
- const taskProgressBar = document.getElementById("taskProgressBar");
- const taskLoader = document.getElementById("taskLoader");
- const taskAgentsHumans = document.getElementById("taskAgentsHumans");
- const taskStatusDetails = document.getElementById("taskStatusDetails");
- const taskCancelButton = document.getElementById("taskCancelButton");
-
- const notyf = new Notyf({
- position: { x: 'right', y: 'top' },
- ripple: false,
- duration: 3000,
- types: [
- {
- type: 'info',
- background: 'rgb(71, 80, 235)',
- icon: ''
- }
- ]
- });
-
- let taskSessionId = null;
- let taskLastStageId = null;
- let taskLastAction = null;
- let taskAgents = [];
- let taskAgentsVsHumans = [];
-
- const agentToIcon = (agentName) => {
- let agentIcon = '';
-
- switch (agentName) {
- case 'MarketingAgent':
- agentIcon = 'unknown';
- break;
- case 'HrAgent':
- agentIcon = 'hr_agent';
- break;
- case 'ExpenseBillingAgent':
- agentIcon = 'expense_billing_agent';
- break;
- case 'InvoiceReconciliationAgent':
- agentIcon = 'invoice_reconciliation_agent';
- break;
- case 'TechSupportAgent':
- agentIcon = 'tech_agent';
- break;
- case 'ProcurementAgent':
- agentIcon = 'procurement_agent';
- break;
- case 'ProductAgent':
- agentIcon = 'product_agent';
- break;
- case 'GroupChatManager':
- agentIcon = 'manager';
- break;
- case 'GenericAgent':
- agentIcon = 'manager';
- break;
- case 'HumanAgent':
- let userNumber = sessionStorage.getItem('userNumber');
- if (userNumber == null){
- // Generate a random number between 0 and 6
- userNumber = Math.floor(Math.random() * 6);
- // Create the icon name by concatenating 'user' with the random number
- sessionStorage.setItem('userNumber', userNumber);
- }
- let iconName = 'user' + userNumber;
- agentIcon = iconName;
- break;
- case 'Done':
- agentIcon = 'done';
- break;
- default:
- agentIcon = 'marketing_agent';
+ const markdownConverter = new showdown.Converter();
+ const apiEndpoint = sessionStorage.getItem("apiEndpoint");
+ const taskStore = JSON.parse(sessionStorage.getItem("task"));
+ const taskName = document.getElementById("taskName");
+ const taskStatusTag = document.getElementById("taskStatusTag");
+ const taskStagesMenu = document.getElementById("taskStagesMenu");
+ const taskPauseButton = document.getElementById("taskPauseButton");
+ const taskAgentsButton = document.getElementById("taskAgentsButton");
+ const taskWokFlowButton = document.getElementById("taskWokFlowButton");
+ const taskMessageAddButton = document.getElementById("taskMessageAddButton");
+ const taskMessages = document.getElementById("taskMessages");
+ const taskDetailsAgents = document.getElementById("taskDetailsAgents");
+ const taskProgress = document.getElementById("taskProgress");
+ const taskProgressPercentage = document.getElementById(
+ "taskProgressPercentage"
+ );
+ const taskProgressBar = document.getElementById("taskProgressBar");
+ const taskLoader = document.getElementById("taskLoader");
+ const taskAgentsHumans = document.getElementById("taskAgentsHumans");
+ const taskStatusDetails = document.getElementById("taskStatusDetails");
+ const taskCancelButton = document.getElementById("taskCancelButton");
+ const startTaskButtonContainer = document.querySelector(".send-button");
+ const startTaskButtonImg = startTaskButtonContainer
+ ? startTaskButtonContainer.querySelector("img")
+ : null;
+
+ const notyf = new Notyf({
+ position: { x: "right", y: "top" },
+ ripple: false,
+ duration: 3000,
+ types: [
+ {
+ type: "info",
+ background: "rgb(71, 80, 235)",
+ icon: '',
+ },
+ ],
+ });
+
+ const updateButtonImage = () => {
+ if (startTaskButtonImg) {
+ const newTaskPrompt = document.getElementById("taskMessageTextarea");
+ if (newTaskPrompt && newTaskPrompt.value.trim() === "") {
+ startTaskButtonImg.src = "../assets/images/air-button.svg";
+ startTaskButton.disabled = true;
+ } else {
+ startTaskButtonImg.src = "/assets/Send.svg";
+ startTaskButtonImg.style.width = "16px";
+ startTaskButtonImg.style.height = "16px";
+ startTaskButton.disabled = false;
+ }
+ }
+ };
+
+ let taskSessionId = null;
+ let taskLastStageId = null;
+ let taskLastAction = null;
+ let taskAgents = [];
+ let taskAgentsVsHumans = [];
+
+ const agentToIcon = (agentName) => {
+ let agentIcon = "";
+
+ switch (agentName) {
+ case "MarketingAgent":
+ agentIcon = "unknown";
+ break;
+ case "HrAgent":
+ agentIcon = "hr_agent";
+ break;
+ case "ExpenseBillingAgent":
+ agentIcon = "expense_billing_agent";
+ break;
+ case "InvoiceReconciliationAgent":
+ agentIcon = "invoice_reconciliation_agent";
+ break;
+ case "TechSupportAgent":
+ agentIcon = "tech_agent";
+ break;
+ case "ProcurementAgent":
+ agentIcon = "procurement_agent";
+ break;
+ case "ProductAgent":
+ agentIcon = "product_agent";
+ break;
+ case "GroupChatManager":
+ agentIcon = "manager";
+ break;
+ case "GenericAgent":
+ agentIcon = "manager";
+ break;
+ case "HumanAgent":
+ let userNumber = sessionStorage.getItem("userNumber");
+ if (userNumber == null) {
+ // Generate a random number between 0 and 6
+ userNumber = Math.floor(Math.random() * 6);
+ // Create the icon name by concatenating 'user' with the random number
+ sessionStorage.setItem("userNumber", userNumber);
}
-
- return `
`;
+ let iconName = "user" + userNumber;
+ agentIcon = iconName;
+ break;
+ case "Done":
+ agentIcon = "done";
+ break;
+ default:
+ agentIcon = "marketing_agent";
}
-
- const toDateTime = (timestamp) => {
- const date = new Date(timestamp * 1000);
- const options = { month: 'short', day: 'numeric' };
- const timeOptions = { hour: 'numeric', minute: 'numeric', hour12: true };
- return `${date.toLocaleDateString('en-US', options)} at ${date.toLocaleTimeString('en-US', timeOptions)}`;
- };
-
- const removeClassesExcept = (element, classToKeep) => {
- element.className = classToKeep;
+ return ``;
+ };
+
+ const toDateTime = (timestamp) => {
+ const date = new Date(timestamp * 1000);
+ const options = { month: "short", day: "numeric" };
+ const timeOptions = { hour: "numeric", minute: "numeric", hour12: true };
+ return `${date.toLocaleDateString(
+ "en-US",
+ options
+ )} at ${date.toLocaleTimeString("en-US", timeOptions)}`;
+ };
+
+ const removeClassesExcept = (element, classToKeep) => {
+ element.className = classToKeep;
+ };
+
+ const handleDisableOfActions = (status) => {
+ if(status === "completed"){
+ taskPauseButton.disabled=true;
+ taskCancelButton.disabled=true;
+ } else {
+ taskPauseButton.disabled=false;
+ taskCancelButton.disabled=false;
}
-
- const taskHeaderActions = () => {
-
- if (taskPauseButton) {
- taskPauseButton.addEventListener('click', (event) => {
- const iconElement = taskPauseButton.querySelector('i');
- if (iconElement) {
- iconElement.classList.toggle('fa-circle-pause');
- iconElement.classList.toggle('fa-circle-play');
- if (iconElement.classList.contains('fa-circle-play')) {
- taskPauseButton.classList.add('has-text-success');
- removeClassesExcept(taskStatusTag, 'tag');
- taskStatusTag.classList.add('is-warning');
- taskStatusTag.textContent = 'Paused';
- } else {
- taskPauseButton.classList.remove('has-text-success');
- removeClassesExcept(taskStatusTag, 'tag');
- taskStatusTag.classList.add('is-info');
- taskStatusTag.textContent = 'Restarting';
- taskDetails();
- }
- }
- });
+ }
+
+ const taskHeaderActions = () => {
+ if (taskPauseButton) {
+ taskPauseButton.addEventListener("click", (event) => {
+ const iconElement = taskPauseButton.querySelector("i");
+ if (iconElement) {
+ iconElement.classList.toggle("fa-circle-pause");
+ iconElement.classList.toggle("fa-circle-play");
+ if (iconElement.classList.contains("fa-circle-play")) {
+ taskPauseButton.classList.add("has-text-success");
+ removeClassesExcept(taskStatusTag, "tag");
+ taskStatusTag.classList.add("is-warning");
+ taskStatusTag.textContent = "Paused";
+ } else {
+ taskPauseButton.classList.remove("has-text-success");
+ removeClassesExcept(taskStatusTag, "tag");
+ taskStatusTag.classList.add("is-info");
+ taskStatusTag.textContent = "Restarting";
+ taskDetails();
+ }
}
-
- if (taskCancelButton) {
- taskCancelButton.addEventListener('click', (event) => {
-
- const apiTaskStore = JSON.parse(sessionStorage.getItem('apiTask'));
- actionStages(apiTaskStore, false);
-
- });
- }
-
+ });
}
- const updateTaskDetailsAgents = (agents) => {
-
- taskDetailsAgents.innerHTML = '';
- taskAgentsVsHumans = [];
+ if (taskCancelButton) {
+ taskCancelButton.addEventListener("click", (event) => {
+ const apiTaskStore = JSON.parse(sessionStorage.getItem("apiTask"));
+ handleDisableOfActions("completed")
+ actionStages(apiTaskStore, false);
+ });
+ }
+ };
- agents.forEach(agent => {
+ const updateTaskDetailsAgents = (agents) => {
+ taskDetailsAgents.innerHTML = "";
+ taskAgentsVsHumans = [];
- const isAvatar = (agent === 'HumanAgent') ? 'is-human' : 'is-avatar'
+ agents.forEach((agent) => {
+ const isAvatar = agent === "HumanAgent" ? "is-human" : "is-avatar";
- taskDetailsAgents.innerHTML += `
+ taskDetailsAgents.innerHTML += `
${agentToIcon(agent)}
`;
- (agent === 'HumanAgent') ? taskAgentsVsHumans.push('Human') : taskAgentsVsHumans.push('Agent');
-
- })
-
- const humansInv = taskAgentsVsHumans.filter(agent => agent === 'Human');
- const humanInvText = humansInv.length > 1 ? 'humans' : 'human';
+ agent === "HumanAgent"
+ ? taskAgentsVsHumans.push("Human")
+ : taskAgentsVsHumans.push("Agent");
+ });
- const agentsInv = taskAgentsVsHumans.filter(agent => agent === 'Agent');
- const agentsInvText = agentsInv.length > 1 ? 'agents' : 'agent';
+ const humansInv = taskAgentsVsHumans.filter((agent) => agent === "Human");
+ const humanInvText = humansInv.length > 1 ? "humans" : "human";
+ const agentsInv = taskAgentsVsHumans.filter((agent) => agent === "Agent");
+ const agentsInvText = agentsInv.length > 1 ? "agents" : "agent";
- taskAgentsHumans.innerHTML = `Team selected: ${humansInv.length} ${humanInvText}, ${agentsInv.length} ${agentsInvText}`;
- }
+ taskAgentsHumans.innerHTML = `Team selected: ${humansInv.length} ${humanInvText}, ${agentsInv.length} ${agentsInvText}`;
+ };
- const updateTaskStatusDetails = (task) => {
+ const updateTaskStatusDetails = (task) => {
+ taskStatusDetails.innerHTML = "";
- taskStatusDetails.innerHTML = '';
-
- taskStatusDetails.innerHTML = `
+ taskStatusDetails.innerHTML = `
Summary: ${task.summary}
Created: ${toDateTime(task.ts)}
`;
+ };
+
+ const fetchPlanDetails = async (session_id) => {
+ console.log("/plans?session_id:", window.headers);
+
+ const headers = await window.headers;
+
+ return fetch(apiEndpoint + "/plans?session_id=" + session_id, {
+ method: "GET",
+ headers: headers,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("fetchPlanDetails", data[0]);
+
+ updateTaskStatusDetails(data[0]);
+ updateTaskProgress(data[0]);
+ fetchTaskStages(data[0]);
+
+ sessionStorage.setItem("apiTask", JSON.stringify(data[0]));
+ })
+ .catch((error) => {
+ console.error("Error:", error);
+ });
+ };
+
+ const fetchTaskStages = (task) => {
+ window.headers.then((headers) => {
+ fetch(apiEndpoint + "/steps/" + task.id, {
+ method: "GET",
+ headers: headers,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("fetchTaskStages", data);
+
+ if (taskStagesMenu) taskStagesMenu.innerHTML = "";
+ let taskStageCount = 0;
+ let taskStageApprovalStatus = 0;
+
+ if (data && data.length > 0) {
+ taskAgents = [];
+
+ data.forEach((stage) => {
+ const stageItem = document.createElement("li");
+ const stageBase64 = btoa(
+ encodeURIComponent(JSON.stringify(stage))
+ );
+
+ let stageStatusIcon = "";
+ let stageActions = "";
+ let stageRejected = "";
+
+ switch (stage.status) {
+ case "planned":
+ stageStatusIcon = ``;
+ break;
+ case "awaiting_feedback":
+ stageStatusIcon = ``;
+ break;
+ case "approved":
+ stageStatusIcon = ``;
+ break;
+ case "rejected":
+ stageStatusIcon = ``;
+ break;
+ case "action_requested":
+ stageStatusIcon = ``;
+ break;
+ case "completed":
+ stageStatusIcon = ``;
+ break;
+ case "failed":
+ stageStatusIcon = ``;
+ break;
+ default:
+ stageStatusIcon = ``;
+ }
+
+ if (stage.human_approval_status === "rejected") {
+ stageRejected = "rejected";
+ stageStatusIcon = ``;
+ }
+
+ if (stage.human_approval_status === "requested")
+ stageActions = `
+
+ `;
- }
+ stageItem.innerHTML = `
+
+ `;
- const fetchPlanDetails = async (session_id) => {
+ if (taskStagesMenu) taskStagesMenu.appendChild(stageItem);
- console.log("/plans?session_id:", window.headers);
+ taskSessionId = stage.session_id;
+ taskLastStageId = stage.id;
+ taskLastAction = stage.action;
+ taskAgents.push(stage.agent);
- const headers = await window.headers
+ stageItem
+ .querySelectorAll(".menu-stage-action")
+ .forEach((action) => {
+ action.addEventListener("click", (event) => {
+ actionStage(
+ event.target.dataset.action,
+ event.target.dataset.stage
+ );
- return fetch(apiEndpoint + '/plans?session_id=' + session_id, {
- method: 'GET',
- headers: headers,
- })
- .then(response => response.json())
- .then(data => {
+ action.parentElement.style.display = "none";
+ });
+ });
- console.log('fetchPlanDetails', data[0]);
+ if (stage.human_approval_status === "requested")
+ taskStageApprovalStatus++;
- updateTaskStatusDetails(data[0]);
- updateTaskProgress(data[0]);
- fetchTaskStages(data[0]);
+ taskStageCount++;
+ });
- sessionStorage.setItem('apiTask', JSON.stringify(data[0]));
+ updateTaskDetailsAgents([...new Set(taskAgents)]);
- })
- .catch(error => {
- console.error('Error:', error);
- })
- }
+ sessionStorage.setItem("showApproveAll", false);
- const fetchTaskStages = (task) => {
-
- window.headers
- .then(headers => {
- fetch(apiEndpoint + '/steps/' + task.id, {
- method: 'GET',
- headers: headers,
- })
- .then(response => response.json())
- .then(data => {
-
- console.log('fetchTaskStages', data);
-
- if (taskStagesMenu) taskStagesMenu.innerHTML = '';
- let taskStageCount = 0;
- let taskStageApprovalStatus = 0;
-
- if (data && data.length > 0) {
-
- taskAgents = [];
-
- data.forEach(stage => {
- const stageItem = document.createElement('li');
- const stageBase64 = btoa(encodeURIComponent(JSON.stringify(stage)));
-
- let stageStatusIcon = '';
- let stageActions = '';
- let stageRejected = '';
-
- switch (stage.status) {
- case 'planned':
- stageStatusIcon = ``;
- break;
- case 'awaiting_feedback':
- stageStatusIcon = ``;
- break;
- case 'approved':
- stageStatusIcon = ``;
- break;
- case 'rejected':
- stageStatusIcon = ``;
- break;
- case 'action_requested':
- stageStatusIcon = ``;
- break;
- case 'completed':
- stageStatusIcon = ``;
- break;
- case 'failed':
- stageStatusIcon = ``;
- break;
- default:
- stageStatusIcon = ``;
- }
-
- if (stage.human_approval_status === 'rejected') {
- stageRejected = 'rejected';
- stageStatusIcon = ``;
- }
-
- if (stage.human_approval_status === 'requested') stageActions = `
-
- `;
-
- stageItem.innerHTML = `
-
- `;
-
- if (taskStagesMenu) taskStagesMenu.appendChild(stageItem);
-
- taskSessionId = stage.session_id;
- taskLastStageId = stage.id;
- taskLastAction = stage.action;
- taskAgents.push(stage.agent);
-
- stageItem.querySelectorAll('.menu-stage-action').forEach(action => {
- action.addEventListener('click', (event) => {
-
- actionStage(event.target.dataset.action, event.target.dataset.stage);
-
- action.parentElement.style.display = 'none';
-
- });
- });
-
- if (stage.human_approval_status === 'requested') taskStageApprovalStatus++;
-
- taskStageCount++;
-
- })
-
- updateTaskDetailsAgents([...new Set(taskAgents)]);
-
- sessionStorage.setItem('showApproveAll', false);
-
- // Feature approve all removed for this version
- // if (isHumanFeedbackPending()) {
- // sessionStorage.setItem('showApproveAll', false);
- // console.log('showApproveAll status', "showApproveAll is false");
-
- // } else {
- // sessionStorage.setItem('showApproveAll', taskStageApprovalStatus === taskStageCount);
- // console.log('showApproveAll status', taskStageApprovalStatus === taskStageCount);
-
- // }
- }
-
- fetchTaskMessages(task);
-
- window.parent.postMessage({
- action: 'taskStarted',
- }, '*');
-
- })
- .catch(error => {
- console.error('Error:', error);
- })
- })
- }
+ // Feature approve all removed for this version
+ // if (isHumanFeedbackPending()) {
+ // sessionStorage.setItem('showApproveAll', false);
+ // console.log('showApproveAll status', "showApproveAll is false");
+
+ // } else {
+ // sessionStorage.setItem('showApproveAll', taskStageApprovalStatus === taskStageCount);
+ // console.log('showApproveAll status', taskStageApprovalStatus === taskStageCount);
- const fetchTaskMessages = (task) => {
- window.headers
- .then(headers => {
- fetch(apiEndpoint + '/agent_messages/' + task.session_id, {
- method: 'GET',
- headers: headers,
- })
- .then(response => response.json())
- .then(data => {
-
- console.log('fetchTaskMessages', data);
-
- const toAgentName = (str) => {
- return str.replace(/([a-z])([A-Z])/g, '$1 $2');
- };
-
- const groupByStepId = (messages) => {
- const groupedMessages = {};
-
- messages.forEach(message => {
- const stepId = message.step_id || 'planner';
- if (!groupedMessages[stepId]) {
- groupedMessages[stepId] = [];
- }
- groupedMessages[stepId].push(message);
- });
-
- return groupedMessages;
- }
-
- const contextFilter = (messages) => {
- const filteredMessages = [];
-
- messages.forEach(message => {
- if (message.source !== 'PlannerAgent' && message.source !== 'GroupChatManager') {
- filteredMessages.push(message);
- }
- });
-
- return filteredMessages;
- }
-
- taskMessages.innerHTML = '';
-
- // console.log(groupByStepId(data));
-
- if (sessionStorage.getItem('context') && sessionStorage.getItem('context') === 'customer') {
-
- console.log('contextFilter', contextFilter(data));
-
- data = contextFilter(data);
-
- }
-
- if (data) {
-
- let stageCount = 0;
- let messageCount = 1;
- const groupedData = groupByStepId(data);
-
- Object.keys(groupedData).forEach(stage => {
-
- const messages = groupedData[stage];
- const messageGroupItem = document.createElement('fieldset');
-
- messageGroupItem.classList.add('task-stage-divider');
- messageGroupItem.classList.add('has-text-info');
-
- messageGroupItem.innerHTML = (stageCount === 0) ? '' : ``;
- taskMessages.appendChild(messageGroupItem);
-
- messages.forEach(message => {
- const messageItem = document.createElement('div');
- const showApproveAll = sessionStorage.getItem('showApproveAll') === 'true' && data.length === messageCount;
-
- let approveAllStagesButton = '';
-
- messageItem.classList.add('media');
- const isAvatar = (message.source === 'HumanAgent') ? 'is-human' : 'is-avatar'
- const isActive = (message.source === 'PlannerAgent') ? 'has-status-busy' : 'has-status-active'
-
- if (sessionStorage.getItem('context') && sessionStorage.getItem('context') !== 'customer') {
- if (showApproveAll) {
- console.log('Creating approveAllStagesButton');
- approveAllStagesButton = `If you are happy with the plan, you can approve all stages.
`;
-
- }
- }
- const messageLeft = `
+ // }
+ }
+
+ fetchTaskMessages(task);
+
+ window.parent.postMessage(
+ {
+ action: "taskStarted",
+ },
+ "*"
+ );
+ })
+ .catch((error) => {
+ console.error("Error:", error);
+ });
+ });
+ };
+
+ const fetchTaskMessages = (task) => {
+ window.headers.then((headers) => {
+ fetch(apiEndpoint + "/agent_messages/" + task.session_id, {
+ method: "GET",
+ headers: headers,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("fetchTaskMessages", data);
+
+ const toAgentName = (str) => {
+ return str.replace(/([a-z])([A-Z])/g, "$1 $2");
+ };
+
+ const groupByStepId = (messages) => {
+ const groupedMessages = {};
+
+ messages.forEach((message) => {
+ const stepId = message.step_id || "planner";
+ if (!groupedMessages[stepId]) {
+ groupedMessages[stepId] = [];
+ }
+ groupedMessages[stepId].push(message);
+ });
+
+ return groupedMessages;
+ };
+
+ const contextFilter = (messages) => {
+ const filteredMessages = [];
+
+ messages.forEach((message) => {
+ if (
+ message.source !== "PlannerAgent" &&
+ message.source !== "GroupChatManager"
+ ) {
+ filteredMessages.push(message);
+ }
+ });
+
+ return filteredMessages;
+ };
+
+ taskMessages.innerHTML = "";
+
+ // console.log(groupByStepId(data));
+
+ if (
+ sessionStorage.getItem("context") &&
+ sessionStorage.getItem("context") === "customer"
+ ) {
+ console.log("contextFilter", contextFilter(data));
+
+ data = contextFilter(data);
+ }
+
+ if (data) {
+ let stageCount = 0;
+ let messageCount = 1;
+ const groupedData = groupByStepId(data);
+
+ Object.keys(groupedData).forEach((stage) => {
+ const messages = groupedData[stage];
+ const messageGroupItem = document.createElement("fieldset");
+
+ messageGroupItem.classList.add("task-stage-divider");
+ messageGroupItem.classList.add("has-text-info");
+
+ messageGroupItem.innerHTML =
+ stageCount === 0
+ ? ""
+ : ``;
+ taskMessages.appendChild(messageGroupItem);
+
+ messages.forEach((message) => {
+ const messageItem = document.createElement("div");
+ const showApproveAll =
+ sessionStorage.getItem("showApproveAll") === "true" &&
+ data.length === messageCount;
+
+ let approveAllStagesButton = "";
+
+ messageItem.classList.add("media");
+ const isAvatar =
+ message.source === "HumanAgent" ? "is-human" : "is-avatar";
+ const isActive =
+ message.source === "PlannerAgent"
+ ? "has-status-busy"
+ : "has-status-active";
+
+ if (
+ sessionStorage.getItem("context") &&
+ sessionStorage.getItem("context") !== "customer"
+ ) {
+ if (showApproveAll) {
+ console.log("Creating approveAllStagesButton");
+ approveAllStagesButton = `If you are happy with the plan, you can approve all stages.
`;
+ }
+ }
+ const messageLeft = `
- `
-
- const messageTemplate = (message.source === 'HumanAgent') ? messageRight : messageLeft;
- messageItem.innerHTML = messageTemplate;
- taskMessages.appendChild(messageItem);
-
- if (sessionStorage.getItem('context') && sessionStorage.getItem('context') !== 'customer') {
- if (showApproveAll) {
-
- document.getElementById("approveAllStagesButton").addEventListener('click', (event) => actionStages(task, true));
-
- };
- };
-
- messageCount++;
-
- });
-
- stageCount++;
-
- });
-
- const mediaContents = document.querySelectorAll('.media-content');
- if (mediaContents.length > 0) {
- mediaContents[mediaContents.length - 1].scrollIntoView({ behavior: 'smooth' });
- }
-
- if (sessionStorage.getItem('context') && sessionStorage.getItem('context') === 'customer' && !sessionStorage.getItem('actionStagesRun').includes(task.session_id)) {
-
-
- actionStages(task, true);
-
- let actionStagesRun = JSON.parse(sessionStorage.getItem('actionStagesRun') || '[]');
-
- actionStagesRun.push(task.session_id);
- sessionStorage.setItem('actionStagesRun', JSON.stringify(actionStagesRun));
- }
-
- setTimeout(() => { taskLoader.classList.add('is-hidden'); }, 500);
-
- }
-
- })
- .catch(error => {
- console.error('Error:', error);
- })
+ `;
+
+ const messageTemplate =
+ message.source === "HumanAgent" ? messageRight : messageLeft;
+ messageItem.innerHTML = messageTemplate;
+ taskMessages.appendChild(messageItem);
+
+ if (
+ sessionStorage.getItem("context") &&
+ sessionStorage.getItem("context") !== "customer"
+ ) {
+ if (showApproveAll) {
+ document
+ .getElementById("approveAllStagesButton")
+ .addEventListener("click", (event) =>
+ actionStages(task, true)
+ );
+ }
+ }
+
+ messageCount++;
+ });
+
+ stageCount++;
});
-
- }
+ const mediaContents = document.querySelectorAll(".media-content");
+ if (mediaContents.length > 0) {
+ mediaContents[mediaContents.length - 1].scrollIntoView({
+ behavior: "smooth",
+ });
+ }
- const updateTaskProgress = (task) => {
+ if (
+ sessionStorage.getItem("context") &&
+ sessionStorage.getItem("context") === "customer" &&
+ !sessionStorage
+ .getItem("actionStagesRun")
+ .includes(task.session_id)
+ ) {
+ actionStages(task, true);
+
+ let actionStagesRun = JSON.parse(
+ sessionStorage.getItem("actionStagesRun") || "[]"
+ );
+
+ actionStagesRun.push(task.session_id);
+ sessionStorage.setItem(
+ "actionStagesRun",
+ JSON.stringify(actionStagesRun)
+ );
+ }
- const taskStatusToLabel = (str) => {
- return str.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
- };
+ setTimeout(() => {
+ taskLoader.classList.add("is-hidden");
+ }, 500);
+ }
+ })
+ .catch((error) => {
+ console.error("Error:", error);
+ });
+ });
+ };
+
+ const updateTaskProgress = (task) => {
+ const taskStatusToLabel = (str) => {
+ return str
+ .split("_")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+ };
- const totalSteps = task.total_steps;
- const completedSteps = task.completed;
- const approvalRequired = task.steps_requiring_approval;
+ const totalSteps = task.total_steps;
+ const completedSteps = task.completed;
+ const approvalRequired = task.steps_requiring_approval;
- const percentage = (completedSteps / totalSteps) * 100;
- const progressString = `Progress ${completedSteps}/${totalSteps}`;
- const percentageString = `${percentage.toFixed(0)}%`;
+ const percentage = (completedSteps / totalSteps) * 100;
+ const progressString = `Progress ${completedSteps}/${totalSteps}`;
+ const percentageString = `${percentage.toFixed(0)}%`;
- taskProgress.textContent = progressString;
- taskProgressPercentage.textContent = percentageString;
- taskProgressBar.value = parseFloat(percentageString);
+ taskProgress.textContent = progressString;
+ taskProgressPercentage.textContent = percentageString;
+ taskProgressBar.value = parseFloat(percentageString);
- taskStatusTag.textContent = taskStatusToLabel(task.overall_status);
+ taskStatusTag.textContent = taskStatusToLabel(task.overall_status);
- if (task.overall_status === 'completed') {
- removeClassesExcept(taskStatusTag, 'tag');
- taskStatusTag.classList.add('is-success');
- }
+ if (task.overall_status === "completed") {
+ removeClassesExcept(taskStatusTag, "tag");
+ taskStatusTag.classList.add("is-success");
+ } else if (task.overall_status === "in_progress") {
+ removeClassesExcept(taskStatusTag, "tag");
+ taskStatusTag.classList.add("is-info");
+ }
+ handleDisableOfActions(task.overall_status)
+ };
+
+ const isHumanFeedbackPending = () => {
+ const storedData = sessionStorage.getItem("apiTask");
+ const planDetails = JSON.parse(storedData);
+ return (
+ planDetails.human_clarification_request !== null &&
+ planDetails.human_clarification_response === null
+ );
+ };
+
+ const actionStage = (action, stage) => {
+ if (isHumanFeedbackPending()) {
+ notyf.error("You must first provide feedback to the planner.");
+ return;
}
- const isHumanFeedbackPending = () => {
- const storedData = sessionStorage.getItem('apiTask');
- const planDetails = JSON.parse(storedData);
- return planDetails.human_clarification_request !== null && planDetails.human_clarification_response === null;
- };
-
- const actionStage = (action, stage) => {
-
- if (isHumanFeedbackPending()) {
- notyf.error('You must first provide feedback to the planner.');
- return;
- }
+ const stageObj = JSON.parse(decodeURIComponent(atob(stage)));
- const stageObj = JSON.parse(decodeURIComponent(atob(stage)));
+ console.log("actionStage", {
+ step_id: stageObj.id,
+ plan_id: stageObj.plan_id,
+ session_id: stageObj.session_id,
+ approved: action === "approved" ? true : false,
+ });
- console.log('actionStage', {
- step_id: stageObj.id,
- plan_id: stageObj.plan_id,
- session_id: stageObj.session_id,
- approved: action === 'approved' ? true : false,
- });
+ notyf.open({
+ type: "info",
+ message: `Request sent for "${stageObj.action}"`,
+ });
- notyf.open({
- type: 'info',
- message: `Request sent for "${stageObj.action}"`
+ window.headers.then((headers) => {
+ fetch(apiEndpoint + "/approve_step_or_steps", {
+ method: "POST",
+ headers: headers,
+ body: JSON.stringify({
+ step_id: stageObj.id,
+ plan_id: stageObj.plan_id,
+ session_id: stageObj.session_id,
+ approved: action === "approved" ? true : false,
+ }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("actionStage", data);
+ action === "approved"
+ ? notyf.success(`Stage "${stageObj.action}" approved.`)
+ : notyf.error(`Stage "${stageObj.action}" rejected.`);
+
+ taskDetails();
+ })
+ .catch((error) => {
+ console.error("Error:", error);
});
+ });
+ };
- window.headers
- .then(headers =>{
- fetch(apiEndpoint + '/approve_step_or_steps', {
- method: 'POST',
- headers: headers,
- body: JSON.stringify({
- step_id: stageObj.id,
- plan_id: stageObj.plan_id,
- session_id: stageObj.session_id,
- approved: action === 'approved' ? true : false,
- })
- })
- .then(response => response.json())
- .then(data => {
-
- console.log('actionStage', data);
- action === 'approved' ? notyf.success(`Stage "${stageObj.action}" approved.`) : notyf.error(`Stage "${stageObj.action}" rejected.`);
-
- taskDetails();
-
- })
- .catch(error => {
- console.error('Error:', error);
- })
- })
- }
-
- const actionStages = (task, approve) => {
+ const actionStages = (task, approve) => {
+ console.log("approveStages", {
+ plan_id: task.id,
+ session_id: task.session_id,
+ approved: approve,
+ });
- console.log('approveStages', {
- plan_id: task.id,
- session_id: task.session_id,
- approved: approve,
- });
+ notyf.open({
+ type: "info",
+ message: `Request sent to action on all stages.`,
+ });
- notyf.open({
- type: 'info',
- message: `Request sent to action on all stages.`
+ // document.querySelectorAll('.menu-stage-actions').forEach(element => {
+ // element.style.display = 'none';
+ // });
+
+ window.headers.then((headers) => {
+ fetch(apiEndpoint + "/approve_step_or_steps", {
+ method: "POST",
+ headers: headers,
+ body: JSON.stringify({
+ plan_id: task.id,
+ session_id: task.session_id,
+ approved: approve,
+ }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("approveStages", data);
+ approve
+ ? notyf.success(`All stages approved.`)
+ : notyf.error(`All stages cancelled.`);
+ taskDetails();
+ })
+ .catch((error) => {
+ console.error("Error:", error);
});
-
- // document.querySelectorAll('.menu-stage-actions').forEach(element => {
- // element.style.display = 'none';
- // });
-
- window.headers
- .then(headers =>{
- fetch(apiEndpoint + '/approve_step_or_steps', {
- method: 'POST',
- headers: headers,
- body: JSON.stringify({
- plan_id: task.id,
- session_id: task.session_id,
- approved: approve,
- })
- })
- .then(response => response.json())
- .then(data => {
-
- console.log('approveStages', data);
- approve ? notyf.success(`All stages approved.`) : notyf.error(`All stages rejected.`);
- taskDetails();
-
- })
- .catch(error => {
- console.error('Error:', error);
- })
- })
+ });
+ };
+
+ const taskDetailsActions = () => {
+ if (taskAgentsButton) {
+ taskAgentsButton.addEventListener("click", (event) => {
+ window.parent.postMessage(
+ {
+ button: "taskAgentsButton",
+ id: taskStore.id,
+ name: taskStore.name,
+ },
+ "*"
+ );
+ });
}
- const taskDetailsActions = () => {
-
- if (taskAgentsButton) {
- taskAgentsButton.addEventListener('click', (event) => {
- window.parent.postMessage({
- button: 'taskAgentsButton',
- id: taskStore.id,
- name: taskStore.name
- }, '*');
- });
- }
-
- if (taskWokFlowButton) {
- taskWokFlowButton.addEventListener('click', (event) => {
- window.parent.postMessage({
- button: 'taskWokFlowButton',
- id: taskStore.id,
- name: taskStore.name
- }, '*');
- });
+ if (taskWokFlowButton) {
+ taskWokFlowButton.addEventListener("click", (event) => {
+ window.parent.postMessage(
+ {
+ button: "taskWokFlowButton",
+ id: taskStore.id,
+ name: taskStore.name,
+ },
+ "*"
+ );
+ });
+ }
+ };
+
+ let lastDataHash = null;
+ //Refresh timer
+ const taskDetails = () => {
+ if (taskStore) {
+ taskName.innerHTML = taskStore.name;
+
+ const fetchLoop = async (id) => {
+ try {
+ // Fetch the new data from the server
+ const newData = await fetchPlanDetails(id);
+
+ // Generate a hash of the new data
+ const newDataHash = await GenerateHash(newData);
+
+ // Check if the new data's hash is different from the last fetched data's hash
+ if (newDataHash === lastDataHash) {
+ console.log("Data hasn't changed. Skipping next poll.");
+ return; // Skip polling if no changes
+ }
+
+ // Update the lastDataHash to the new hash
+ lastDataHash = newDataHash;
+
+ // Continue polling by calling fetchLoop again
+ setTimeout(
+ () => fetchLoop(id),
+ Number(sessionStorage.getItem("apiRefreshRate"))
+ );
+ } catch (error) {
+ console.error("Error in fetchLoop:", error);
}
+ };
+ fetchLoop(taskStore.id); // Start the fetch loop
}
+ };
+ const taskMessage = () => {
+ const taskMessageTextarea = document.getElementById("taskMessageTextarea");
- let lastDataHash = null;
- //Refresh timer
- const taskDetails = () => {
- if (taskStore) {
- taskName.innerHTML = taskStore.name;
-
- const fetchLoop = async (id) => {
- try {
- // Fetch the new data from the server
- const newData = await fetchPlanDetails(id);
-
- // Generate a hash of the new data
- const newDataHash = await GenerateHash(newData);
-
- // Check if the new data's hash is different from the last fetched data's hash
- if (newDataHash === lastDataHash) {
- console.log("Data hasn't changed. Skipping next poll.");
- return; // Skip polling if no changes
- }
-
- // Update the lastDataHash to the new hash
- lastDataHash = newDataHash;
-
- // Continue polling by calling fetchLoop again
- setTimeout(() => fetchLoop(id), Number(sessionStorage.getItem('apiRefreshRate')));
- } catch (error) {
- console.error('Error in fetchLoop:', error);
- }
- };
-
- fetchLoop(taskStore.id); // Start the fetch loop
+ if (taskMessageAddButton) {
+ taskMessageAddButton.addEventListener("click", (event) => {
+ const messageContent = taskMessageTextarea.value;
+
+ if (!messageContent) {
+ notyf.error("Please enter a message.");
+ return;
}
- };
+ taskMessageTextarea.disabled = true;
+ taskMessageAddButton.disabled = true;
+ taskMessageAddButton.classList.add("is-loading");
- const taskMessage = () => {
- const taskMessageTextarea = document.getElementById('taskMessageTextarea');
+ console.log({
+ plan_id: taskStore.id,
+ session_id: taskSessionId,
+ human_clarification: taskMessageTextarea.value,
+ });
-
- if (taskMessageAddButton) {
- taskMessageAddButton.addEventListener('click', (event) => {
- const messageContent = taskMessageTextarea.value;
-
- if (!messageContent) {
- notyf.error('Please enter a message.');
- return;
- }
-
- taskMessageTextarea.disabled = true;
- taskMessageAddButton.disabled = true;
- taskMessageAddButton.classList.add('is-loading');
-
- console.log({
- plan_id: taskStore.id,
- session_id: taskSessionId,
- human_clarification: taskMessageTextarea.value,
- })
-
- window.headers
- .then(headers =>{
- fetch(apiEndpoint + '/human_clarification_on_plan', {
- method: 'POST',
- headers: headers,
- body: JSON.stringify({
- plan_id: taskStore.id,
- session_id: taskSessionId,
- human_clarification: taskMessageTextarea.value,
- })
- })
- .then(response => response.json())
- .then(data => {
-
- console.log('taskMessage', data);
-
- taskMessageTextarea.disabled = false;
- taskMessageAddButton.disabled = false;
- taskMessageAddButton.classList.remove('is-loading');
-
- taskMessageTextarea.value = '';
-
- notyf.success('Additional details registered in plan.');
-
- fetchPlanDetails(taskStore.id);
-
- })
- .catch(error => {
- console.error('Error:', error);
- })
- })
+ window.headers.then((headers) => {
+ fetch(apiEndpoint + "/human_clarification_on_plan", {
+ method: "POST",
+ headers: headers,
+ body: JSON.stringify({
+ plan_id: taskStore.id,
+ session_id: taskSessionId,
+ human_clarification: taskMessageTextarea.value,
+ }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log("taskMessage", data);
+
+ taskMessageTextarea.disabled = false;
+ taskMessageAddButton.disabled = false;
+ taskMessageAddButton.classList.remove("is-loading");
+
+ taskMessageTextarea.value = "";
+ fetchPlanDetails(taskStore.id);
+
+ // Reset character count to 0
+ const charCount = document.getElementById("charCount");
+ if (charCount) {
+ charCount.textContent = "0";
+ }
+ updateButtonImage();
+
+ notyf.success("Additional details registered in plan.");
+ })
+ .catch((error) => {
+ console.error("Error:", error);
});
- }
-
- }
-
- const handleTextAreaTyping = () => {
- const newTaskPrompt = document.getElementById('taskMessageTextarea');
- newTaskPrompt.addEventListener('input', () => {
- // whenever text is sent to the text area, we want to update the character count and dynamically resize the text area
- const textInput = document.getElementById('taskMessageTextarea');
- const charCount = document.getElementById('charCount');
-
- // Update character count
- charCount.textContent = textInput.value.length;
-
- // Dynamically adjust height
- textInput.style.height = 'auto';
- textInput.style.height = textInput.scrollHeight + 'px';
});
+ });
}
-
- taskHeaderActions();
- taskDetailsActions();
- taskDetails();
- taskMessage();
- handleTextAreaTyping();
-
-})();
\ No newline at end of file
+ };
+
+ const handleTextAreaTyping = () => {
+ const newTaskPrompt = document.getElementById("taskMessageTextarea");
+ newTaskPrompt.addEventListener("input", () => {
+ // whenever text is sent to the text area, we want to update the character count and dynamically resize the text area
+ const textInput = document.getElementById("taskMessageTextarea");
+ const charCount = document.getElementById("charCount");
+
+ // Update character count
+ charCount.textContent = textInput.value.length;
+
+ // Dynamically adjust height
+ textInput.style.height = "auto";
+ textInput.style.height = textInput.scrollHeight + "px";
+ updateButtonImage();
+ });
+ newTaskPrompt.addEventListener("keydown", (event) => {
+ const textValue = newTaskPrompt.value.trim();
+ if (event.key === "Enter" && !event.shiftKey) {
+ if (textValue === "") {
+ event.preventDefault();
+ } else {
+ startTaskButton.click();
+ }
+ } else if (event.key === "Enter" && event.shiftKey) {
+ return;
+ }
+ });
+ };
+ updateButtonImage();
+ taskHeaderActions();
+ taskDetailsActions();
+ taskDetails();
+ taskMessage();
+ handleTextAreaTyping();
+})();