Show image in chatbox

README.md

@@ -50,6 +50,7 @@ You can preview the production build with `npm run preview`.
 To manual deploy as [Azure Static Web Apps](https://learn.microsoft.com/en-us/azure/static-web-apps/) at scale.
 
 ```bash
+npm run build -- --mode production
 npm install -g @azure/static-web-apps-cli
 swa deploy ./build/ --env production --deployment-token {token}
 ```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "botsharp-ui",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"private": true,
 	"engines": {
 		"node": ">=18.0.0"

src/lib/drawflow/drawflow.css

@@ -1,7 +1,7 @@
 .drawflow .drawflow-node {
     background: var(--bs-primary);
     color: white;
-    width: 200px;
+    width: 250px;
     border: 2px solid var(--bs-primary);
 }
 

src/lib/helpers/types.js

@@ -247,6 +247,7 @@ IRichContent.prototype.text;
  * @property {string} message_id - The message id.
  * @property {string} text - The message content.
  * @property {RichContent} rich_content - Rich content
+ * @property {string} data
  * @property {Date} created_at - The message sent time.
  */
 

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -374,6 +374,7 @@
 											{/if}
 										</div>																
 										{/if}
+
 										{#if message.sender.id === currentUser.id}
 										<div class="ctext-wrap float-end">
 											<!--<div class="conversation-name">{message.sender.full_name}</div>-->
@@ -401,6 +402,12 @@
 											</div>
 										</div>
 										{/if}
+
+										{#if message.data && message.data.includes('data:image/png;base64,')}
+										<div style="width: 80%; display: flex; margin-left: 35px; margin-top: 40px;">
+											<img src="{message.data}" width="200px" alt="" class="rounded"/>
+										</div>
+										{/if}
 									</div>
 								</li>
 								{/each}

src/routes/page/task/[taskId]/execution-flow.svelte

@@ -29,7 +29,8 @@
     let mid;    
     let lastPosX = 120;
     let lastPosY = 0;
-    const nodeSpaceX = 30, nodeSpaceY = 50;
+    const nodeSpaceX = 50, nodeSpaceY = 50;
+    let messageCount = 0;
 
     const options = {
 		scrollbars: {
@@ -86,12 +87,16 @@
 		scrollElements.forEach((item) => {
 			const scrollbar = OverlayScrollbars(item, options);
 		});
+
+        messageCount = 0;
+        editor.zoom_reset();
     }
 
     /** @param {import('$types').ConversationModel} conversation */
     function renderConversationNode(conversation) {
-        let posX = lastPosX + 250, posY = lastPosX + 20;
-        let html = "Initialize session";
+        let posX = lastPosX + 250 + nodeSpaceX, posY = lastPosY;
+        let html = "New conversation";
+        html += `<a href= "chat/${conversation.agent_id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
         editor.addNodeOutput(tid);
         cid = editor.addNode('conversation', 1, 0, posX, posY, 'conversation', {}, html, false);
         editor.addConnection(tid, cid, "output_1", "input_1");
@@ -100,17 +105,31 @@
         mid = cid;
     }
 
-    /** @param {string} message */
-    function renderMessageNode(message) {
+    /** @param {string} message 
+     * @param {import('$types').ChatResponseModel} response
+    */
+    function renderMessageNode(message, response) {
         let posX = lastPosX + nodeSpaceX, posY = lastPosY + nodeSpaceY;
         let html = `${message}`;
+        if (response.data) {
+            html += `<img src=${response.data} alt="" width="165px"/>`
+        }
+        html += `<div class="bg-info mt-1 mb-1 p-1 rounded">${response.text}</div>`;
+
         editor.addNodeOutput(mid);
         let new_mid = editor.addNode('message', 1, 0, posX, posY, 'message', {}, html, false);
         editor.addConnection(mid, new_mid, "output_1", "input_1");
 
         lastPosX = posX;
         lastPosY = posY;
         mid = new_mid;
+
+        messageCount++;
+        if (messageCount % 10 == 0) {
+            // editor.zoom_out();
+            lastPosX = lastPosX + nodeSpaceX;
+            lastPosY = 0;
+        }
     }
 
     async function handleRunTaskSequentiallyInServer() {
@@ -123,8 +142,8 @@
         conversationStore.set(conversation);
         renderConversationNode(conversation);
 
-        await sendMessageToHub(task.agent_id, conversation.id, task.content);
-        renderMessageNode(task.content);
+        var response = await sendMessageToHub(task.agent_id, conversation.id, task.content);
+        renderMessageNode(task.content, response);
     }
 
     async function handleRunTaskInteractively() {
@@ -141,17 +160,17 @@
         let steps = task.content.split('\n');
         for (let i = 0; i < steps.length; i++) {
             let step = steps[i];
-            const result = await sendMessageToHub(task.direct_agent_id, conversation.id, step, '', ['hide_context=true']);
-            if (result.text == "Failed") {
+            const response = await sendMessageToHub(task.direct_agent_id, conversation.id, step, '', ['hide_context=true']);
+            if (response.text.includes("failed")) {
                 break;
             }
-            renderMessageNode(step);
+            renderMessageNode(step, response);
         }        
     }
 </script>
 
 <div>
-    <button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute in {task?.agent_name}</button>
+    <button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute Sequentially through Router</button>
     {#if task?.direct_agent_id}
     <button class="btn btn-primary" on:click={handleRunTaskInteractively}><i class="bx bx-rocket"></i> Execute Interactively</button>
     {/if}

svelte.config.js

@@ -60,7 +60,7 @@ const config = {
 	},
 
 	onwarn: (warning, handler) => {
-		if (warning.code.startsWith('a11y-')) {
+		if (warning.code.includes('a11y-')) {
 			return;
 		}
 		handler(warning);