refine markdown and add chat button in conversation page

Author: Jicheng Lu

src/routes/chat/[agentId]/[conversationId]/richContent/rc-markdown.svelte renamed to 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>

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

src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { Button } from '@sveltestrap/sveltestrap';
     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';
@@ -40,7 +41,7 @@
     }
 </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>
             {#if data?.name?.length > 0}
@@ -59,8 +60,12 @@
             <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 ${logDisplayStyle}`} 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)}

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}

src/routes/page/conversation/[conversationId]/+page.svelte

@@ -46,11 +46,11 @@
 
 {#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>

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}