SciSharp · Oceania2018 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024 · Mar 1, 2024
diff --git a/...rsationId]/richContent/rc-markdown.svelte → src/lib/common/Markdown.svelte b/...rsationId]/richContent/rc-markdown.svelte → src/lib/common/Markdown.svelte
@@ -17,8 +17,6 @@
 	}
 </script>
 
-<div class="ctext-wrap">
-	<div class="flex-shrink-0 align-self-center">
-        <span>{@html displayText}</span>
-    </div>
-</div>
+<span class="markdown-container">
+	{@html displayText}
+</span>
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -265,6 +265,7 @@ IRichContent.prototype.text;
  * @property {string} conversation_id - The conversation id.
  * @property {string} message_id - The message id.
  * @property {string} name - The sender name.
+ * @property {string} agent_id = The agent id.
  * @property {string} role - The sender role.
  * @property {string} source - The log source.
  * @property {string} content - The log content.

diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
@@ -248,4 +248,19 @@ button:focus {
 
 .clickable {
   cursor: pointer;
+}
+
+.markdown-container {
+  pre {
+    -ms-overflow-style: none !important;
+  }
+
+  pre::-webkit-scrollbar {
+    display: none !important;
+  }
+
+  p {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
 }
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -564,11 +564,12 @@
 	/** @param {string} messageId */
 	function highlightChatMessage(messageId) {
 		const targets = document.querySelectorAll('.user-msg');
+		const style = ['bg-primary', 'text-white'];
 		targets.forEach(elm => {
 			if (elm.id === `user-msg-${messageId}`) {
-				elm.classList.add('bg-primary', 'text-white');
+				elm.classList.add(...style);
 			} else {
-				elm.classList.remove('bg-primary', 'text-white');
+				elm.classList.remove(...style);
 			}
 		});
 	}
@@ -590,10 +591,11 @@
 			const contentElm = elm.querySelector('.log-content');
 			if (!contentElm) return;
 
+			const style = ['border', 'border-primary', 'rounded', 'p-1'];
 			if (elm.id === `state-log-${messageId}`) {
-				contentElm.classList.add('border', 'border-primary', 'rounded', 'p-1');
+				contentElm.classList.add(...style);
 			} else {
-				contentElm.classList.remove('border', 'border-primary', 'rounded', 'p-1');
+				contentElm.classList.remove(...style);
 			}
 		});
 	}

diff --git a/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
@@ -1,33 +1,31 @@
 <script>
 	import { Button } from '@sveltestrap/sveltestrap';
-    import moment from 'moment';
+    import Link from 'svelte-link/src/Link.svelte';
+    import Markdown from "$lib/common/Markdown.svelte";
     import { replaceNewLine } from '$lib/helpers/http';
 	import { ContentLogSource } from '$lib/helpers/enums';
 	import { utcToLocal } from '$lib/helpers/datetime';
 
     /** @type {import('$types').ConversationContentLogModel} */
     export let data;
 
-    let logBackground = '';
-    let logText = '';
+    let logDisplayStyle = '';
     let is_collapsed = true;
     const includedSources = [
         ContentLogSource.Prompt
     ];
 
     $: {
         if (data.source === ContentLogSource.AgentResponse) {
-            logBackground = 'bg-info';
+            logDisplayStyle = 'bg-info';
         } else if (data.source === ContentLogSource.FunctionCall) {
-            logBackground = 'bg-secondary';
+            logDisplayStyle = 'bg-secondary';
         } else if (data.source === ContentLogSource.Prompt) {
-            // logBackground = 'bg-danger';
-            logText = 'text-secondary';
+            logDisplayStyle = 'text-secondary';
         } else if (data.source === ContentLogSource.HardRule) {
-            // logBackground = "bg-warning";
-            logText = 'text-warning';
+            logDisplayStyle = 'text-warning';
         } else if (data.source === ContentLogSource.UserInput) {
-            logBackground = "bg-primary";
+            logDisplayStyle = "bg-primary";
         }
     }
 
@@ -36,17 +34,38 @@
         e.preventDefault();
         is_collapsed = !is_collapsed;
     }
+
+    /** @param {string} agentId */
+    function directToAgentDetailPage(agentId) {
+        window.open(`/page/agent/${agentId}`);
+    }
 </script>
 
-<div class={`log-element p-2 rounded`} id={`content-log-${data.message_id}`}>
+<div class="log-element rounded" style="padding: 3px;" id={`content-log-${data.message_id}`}>
     <div class="log-meta text-secondary">
         <div>
-            <span class="text-white h4">{`${data?.name?.length > 0 ? data?.name + ' ' : ''}`}</span> 
+            {#if data?.name?.length > 0}
+            <span class="h4">
+                {#if data?.agent_id?.length > 0}
+                <Link class="text-white" on:click={() => directToAgentDetailPage(data.agent_id)}>
+                    {data.name}
+                </Link>
+                {:else}
+                <span class="text-white">
+                    {`${data?.name}`}
+                </span>
+                {/if}
+            </span>
+            {/if}
             <span class="ms-2">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
         </div>        
     </div>
-    <div class={`p-2 rounded log-content ${logBackground} ${logText}`} class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}>
-        {@html replaceNewLine(data?.content)}
+    <div
+        class={`rounded log-content ${logDisplayStyle}`}
+        style="padding: 5px 8px;"
+        class:log-collapse={includedSources.includes(data.source) && !!is_collapsed}
+    >
+        <Markdown text={data?.content} />
     </div>
 
     {#if includedSources.includes(data.source)}
@@ -56,6 +75,8 @@
     {/if}
 
     {#if data.message_id && data.source === ContentLogSource.UserInput}
-    <div>{`MessageId: ${data.message_id}`}</div>
+    <div style="margin-top: 10px;">
+        {`MessageId: ${data.message_id}`}
+    </div>
     {/if}         
 </div>
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { RichType } from "$lib/helpers/enums";
-	import RcMarkdown from "./rc-markdown.svelte";
+	import Markdown from "$lib/common/Markdown.svelte";
 	import RcOptions from "./rc-options.svelte";
 
     /** @type {any} */
@@ -23,7 +23,11 @@
     }
 </script>
 
-<RcMarkdown text={message?.rich_content?.message?.text || message?.text} />
+<div class="ctext-wrap">
+	<div class="flex-shrink-0 align-self-center">
+        <Markdown text={message?.rich_content?.message?.text || message?.text} />
+    </div>
+</div>
 
 {#if displayExtraElements}
     {#if message?.rich_content?.message?.rich_type === RichType.QuickReply}

diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -46,17 +46,17 @@
 
 {#if conversation}
 <Row>
-    <Col class="col-4">
+    <Col style="flex: 40%;">
         <Overview conversation={conversation} />
         <States conversation={conversation} />
     </Col>
-    <Col class="col-8">
+    <Col style="flex: 60%;">
         <Dialog conversation={conversation} />        
     </Col>
 </Row>
 {/if}
 <Row>
     <div class="mb-4">
-        <Button class="btn btn-soft-primary btn-hover rounded" on:click={() => handleConversationDeletion()}><i class="mdi mdi-delete"></i>{$_('Delete Conversation')}</Button>
+        <Button class="btn btn-danger btn-hover rounded" on:click={() => handleConversationDeletion()}><i class="mdi mdi-delete"></i>{$_('Delete Conversation')}</Button>
     </div>
 </Row>
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -1,9 +1,9 @@
 <script>
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
+    import Link from 'svelte-link/src/Link.svelte';
     import { GetDialogs } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
     import { onMount } from 'svelte';
-	import { UserRole } from '$lib/helpers/enums';
     import { _ } from 'svelte-i18n'  
 	import { USER_SENDERS } from '$lib/helpers/constants';
 
@@ -24,11 +24,24 @@
     function showInRight(dialog) {
         return USER_SENDERS.includes(dialog?.sender?.role || '');
     }
+
+    function directToChat() {
+        window.open(`/chat/${conversation.agent_id}/${conversation.id}`);
+    }
 </script>
 
 <Card>
     <CardBody>
-        <CardTitle class="mb-5 h4">{$_('Dialogs')}</CardTitle>
+        <div style="display: flex; justify-content: space-between;">
+            <div>
+                <CardTitle class="mb-5 h4">{$_('Dialogs')}</CardTitle>
+            </div>
+            <div>
+                <Link class="btn btn-soft-info btn-sm btn-rounded" on:click={() => directToChat()}>
+                    <i class="mdi mdi-chat" />
+                </Link>
+            </div>
+        </div>
         <div class="">
             <ul class="verti-timeline list-unstyled">
                 {#each dialogs as dialog}