add content log source

src/lib/helpers/enums.js

@@ -1,19 +1,18 @@
 const userRole = {
     System: "system",
+    Admin: "admin",
     User: "user",
     Client: "client",
     Function: "function",
     Assistant: "assistant"
 };
-
 export const UserRole = Object.freeze(userRole);
 
 const senderAction = {
     TypingOn: 1,
     TypingOff: 2,
     MarkSeen: 3
 }
-
 export const SenderAction = Object.freeze(senderAction);
 
 const richType = {
@@ -22,5 +21,12 @@ const richType = {
     Button: 'button_template',
     MultiSelect: 'multi-select_template'
 }
+export const RichType = Object.freeze(richType);
 
-export const RichType = Object.freeze(richType);
+const contentLogSource = {
+    UserInput: "user input",
+    Prompt: "prompt",
+    FunctionCall: "function call",
+    AgentResponse: "agent response"
+};
+export const ContentLogSource = Object.freeze(contentLogSource);

src/lib/helpers/types.js

@@ -264,6 +264,7 @@ IRichContent.prototype.text;
  * @property {string} conversation_id - The conversation id.
  * @property {string} name - The sender name.
  * @property {string} role - The sender role.
+ * @property {string} source - The log source.
  * @property {string} content - The log content.
  * @property {Date} created_at - The log sent time.
  */

src/lib/scss/custom/pages/_chat.scss

@@ -277,6 +277,7 @@
 
 .chat-input-section {
     border-top: 1px solid var(--#{$prefix}border-color);
+    padding: 2vmin 2% 2vmin 2%;
 }
 
 .chat-input {

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

@@ -630,7 +630,7 @@
 						</div>
 					</div>
 
-					<div class="chat-input-section" style="height: 8%; padding: 2%">
+					<div class="chat-input-section" style="height: 8%;">
 						<div class="row">
 							<div class="col-auto">
 								<button

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

@@ -2,23 +2,26 @@
 	import { Button } from '@sveltestrap/sveltestrap';
     import moment from 'moment';
     import { replaceNewLine } from '$lib/helpers/http';
-	import { UserRole } from '$lib/helpers/enums';
+	import { ContentLogSource } from '$lib/helpers/enums';
 
     /** @type {import('$types').ConversationContentLogModel} */
     export let data;
 
     let logBackground = '';
     let is_collapsed = true;
-    const excludedRoles = [
-        UserRole.User,
-        UserRole.Assistant
+    const excludedSources = [
+        ContentLogSource.UserInput,
+        ContentLogSource.FunctionCall,
+        ContentLogSource.AgentResponse
     ];
 
     $: {
-        if (data.role == UserRole.Assistant) {
+        if (data.source === ContentLogSource.AgentResponse) {
             logBackground = 'bg-info';
-        } else if (data.role == UserRole.Function) {
+        } else if (data.source === ContentLogSource.FunctionCall) {
             logBackground = 'bg-secondary';
+        } else if (data.source === ContentLogSource.Prompt) {
+            logBackground = 'bg-danger';
         }
     }
 
@@ -34,10 +37,10 @@
         <b>{`[${data?.name?.length > 0 ? data?.name + ' ' : ''}${moment.utc(data?.created_at).local().format('hh:mm:ss.SSS A, MMM DD YYYY')}]`}</b>
     </div>
     <br>
-    <div class="log-content" class:log-collapse={!excludedRoles.includes(data.role) && !!is_collapsed}>
+    <div class="log-content" class:log-collapse={!excludedSources.includes(data.source) && !!is_collapsed}>
         {@html replaceNewLine(data?.content)}
     </div>
-    {#if !excludedRoles.includes(data.role)}
+    {#if !excludedSources.includes(data.source)}
     <Button class='toggle-btn' color="link" on:click={(e) => toggleText(e)}>
         {`${is_collapsed ? 'More +' : 'Less -'}`}
     </Button>

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -1,7 +1,7 @@
 <script>
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
     import { GetDialogs } from '$lib/services/conversation-service.js';
-    import { format } from '$lib/helpers/datetime';
+    import { utcToLocal } from '$lib/helpers/datetime';
     import { onMount } from 'svelte';
 	import { UserRole } from '$lib/helpers/enums';
 
@@ -21,7 +21,7 @@
     */
     function showInRight(dialog) {
         const sender = dialog.sender;
-        return sender.role != UserRole.Client && sender.role != UserRole.User;
+        return sender?.role === UserRole.Admin || sender?.role === UserRole.User || sender?.role === UserRole.Client;
     }
 </script>
 
@@ -47,7 +47,7 @@
                             <div>
                                 <span>{dialog.sender.full_name}</span>
                                 <p class="fw-bold">{dialog.text}</p>
-                                <span class="text-muted">{format(dialog.created_at, 'long-time')}</span>
+                                <span class="text-muted">{utcToLocal(dialog.created_at)}</span>
                             </div>
                         </div>
                     </div>