Add TaskId in conversation.

Author: Oceania2018

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.

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;
 }
 

src/routes/page/conversation/+page.svelte

@@ -174,33 +174,38 @@
 			</CardBody>
 			<CardBody class="border-bottom">
 				<Row class="g-3">
-					<Col xxl="4" lg="6">
+					<Col lg="4">
 						<Input
 							type="search"
 							class="form-control"
 							id="searchTableList"
 							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>
 							<option value="phone">Phone</option>
                             <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>

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);