From 19ca422a652a59bf4c87fbfa4477fdefd91cd391 Mon Sep 17 00:00:00 2001
From: Haiping Chen <haiping008@gmail.com>
Date: Mon, 12 Feb 2024 09:24:16 -0600
Subject: [PATCH] Add TaskId in conversation.

---
 src/lib/helpers/types.js                          |  7 +++++++
 src/lib/services/conversation-service.js          |  5 +++--
 src/routes/page/conversation/+page.svelte         | 15 ++++++++++-----
 .../page/task/[taskId]/execution-flow.svelte      |  9 +++++----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index 292c7b84..af1c65a3 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -166,12 +166,18 @@
  * @property {string} planner
  */
 
+/**
+ * @typedef {Object} MessageConfig
+ * @property {string} [taskId] - Optional task id.
+ */
+
 /**
  * @typedef {Object} ConversationFilter
  * @property {Pagination} pager - Pagination
  * @property {string} [agentId] - The agent id.
  * @property {string} [channel] - The conversation channel.
  * @property {string} [status] - The conversation status.
+ * @property {string} [taskId] - The task id.
  */
 
 /**
@@ -182,6 +188,7 @@
  * @property {string} agent_id - The conversation agent id.
  * @property {string} agent_name - The conversation entry agent name.
  * @property {string} channel - The conversation status.
+ * @property {string} [task_id] - Optional task id.
  * @property {string} status - The conversation status.
  * @property {Object[]} states - The conversation states. 
  * @property {Date} updated_time - The conversation updated time.
diff --git a/src/lib/services/conversation-service.js b/src/lib/services/conversation-service.js
index 674177e8..19f74ec2 100644
--- a/src/lib/services/conversation-service.js
+++ b/src/lib/services/conversation-service.js
@@ -6,11 +6,12 @@ import { conversationUserStateStore } from '$lib/helpers/store.js';
 /**
  * New conversation
  * @param {string} agentId 
+ * @param {Promise<import('$types').MessageConfig>} [config]
  * @returns {Promise<import('$types').ConversationModel>}
  */
-export async function newConversation(agentId) {
+export async function newConversation(agentId, config) {
     let url = replaceUrl(endpoints.conversationInitUrl, {agentId: agentId});
-    const response = await axios.post(url, {});
+    const response = await axios.post(url, config ?? {});
     return response.data;
 }
 
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index d0ffe904..43f9b17a 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -174,7 +174,7 @@
 			</CardBody>
 			<CardBody class="border-bottom">
 				<Row class="g-3">
-					<Col xxl="4" lg="6">
+					<Col lg="4">
 						<Input
 							type="search"
 							class="form-control"
@@ -182,14 +182,19 @@
 							placeholder="Search for ..."
 						/>
 					</Col>
-					<Col xxl="2" lg="6">
+					<Col lg="2">
+						<select class="form-select" id="idTask" bind:value={filter.taskId}>
+							<option value={null}>Task</option>
+						</select>
+					</Col>					
+					<Col lg="1">
 						<select class="form-select" id="idStatus" bind:value={filter.status}>
 							<option value={null}>Status</option>
 							<option value="open">Active</option>
 							<option value="closed">Completed</option>
 						</select>
 					</Col>
-					<Col xxl="2" lg="4">
+					<Col lg="2">
 						<select class="form-select" id="idType" bind:value={filter.channel}>
 							<option value={null}>Select Channel</option>
 							<option value="webchat">Live Chat</option>
@@ -197,10 +202,10 @@
                             <option value="email">Email</option>
 						</select>
 					</Col>
-					<Col xxl="2" lg="4">
+					<Col lg="2">
 						<Input type="date" class="form-control" />
 					</Col>
-					<Col xxl="2" lg="4">
+					<Col lg="1">
 						<Button type="button" color="secondary" class="btn-soft-secondary w-100">
 							<i class="mdi mdi-filter-outline align-middle" /> Filter
 						</Button>
diff --git a/src/routes/page/task/[taskId]/execution-flow.svelte b/src/routes/page/task/[taskId]/execution-flow.svelte
index 4c4f032a..65b10420 100644
--- a/src/routes/page/task/[taskId]/execution-flow.svelte
+++ b/src/routes/page/task/[taskId]/execution-flow.svelte
@@ -110,9 +110,9 @@
     */
     function renderMessageNode(message, response) {
         let posX = lastPosX + nodeSpaceX, posY = lastPosY + nodeSpaceY;
-        let html = `${message}`;
+        let html = `<div class=''>${message}</div>`;
         if (response.data) {
-            html += `<img src=${response.data} alt="" width="165px"/>`
+            html += `<img src=${response.data} alt="" width="215px"/>`
         }
         html += `<div class="bg-info mt-1 mb-1 p-1 rounded">${response.text}</div>`;
 
@@ -138,7 +138,7 @@
         renderTaskNode();
 
         // new conversation
-        const conversation = await newConversation(task.agent_id);
+        const conversation = await newConversation(task.agent_id, {taskId: task.id});
         conversationStore.set(conversation);
         renderConversationNode(conversation);
         
@@ -152,7 +152,8 @@
         renderTaskNode();
 
         // new conversation
-        const conversation = await newConversation(task.direct_agent_id);
+        const conversation = await newConversation(task.direct_agent_id, {taskId: task.id});
+        conversation.task_id = task.id;
         conversationStore.set(conversation);
         renderConversationNode(conversation);