add conv states

package.json

@@ -57,6 +57,7 @@
 		"svelte-file-dropzone": "^2.0.2",
 		"svelte-flatpickr": "^3.3.3",
 		"svelte-i18n": "^4.0.0",
+		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^0.21.1",
 		"svelte-link": "^1.4.0",
 		"svelte-select": "^5.7.0",

src/lib/common/Loader.svelte

@@ -1,6 +1,6 @@
 <script>
     import { Circle } from 'svelte-loading-spinners';
-    export let size=100
+    export let size = 100;
 </script>
 
 <div class="loader">

src/lib/helpers/types.js

@@ -221,6 +221,13 @@ IRichContent.prototype.text;
  * @property {boolean} is_collapsed - For UI display.
  */
 
+/**
+ * @typedef {Object} ConversationStateLogModel
+ * @property {string} conversation_id - The conversation id.
+ * @property {string} states - The states content.
+ * @property {Date} created_at - The states sent time.
+ */
+
 /**
  * Invoked when a new conersation is created.
  * This callback type is called `requestCallback` and is displayed as a global symbol.
@@ -251,6 +258,13 @@ IRichContent.prototype.text;
  * @param {ContentLogModel} log
  */
 
+/** 
+ * Conversation states
+ * 
+ * @callback OnConversationStatesGenerated
+ * @param {ConversationStateLogModel} data
+ */
+
 // having to export an empty object here is annoying, 
 // but required for vscode to pass on your types. 
 export default {};

src/lib/scss/_variables.scss

@@ -1807,3 +1807,5 @@ $kbd-bg:                            var(--#{$prefix}body-color);
 $nested-kbd-font-weight:            null; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null;
+
+$faded-color: #BCBCBC;

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

@@ -93,9 +93,11 @@
             box-shadow: $box-shadow;
             border: 1px solid var(--#{$prefix}border-color);
 
-            li:first-child {
-                @media (max-width: 1024px) {
-                    display: none;
+            li {
+                &:nth-child(-n+2) {
+                    @media (max-width: 1024px) {
+                        display: none;
+                    }
                 }
             }
         }
@@ -275,8 +277,8 @@
         .log-list {
             height: 90vh;
             .log-element {
-                margin-top: 15px;
-                margin-bottom: 15px;
+                margin-top: 25px;
+                margin-bottom: 30px;
 
                 .log-meta {
                     font-size: 15px;
@@ -286,6 +288,19 @@
                 .log-content {
                     font-size: 15px;
                     color: white;
+
+                    li {
+                        margin-top: 5px;
+                        margin-bottom: 5px;
+                        .property {
+                            padding-left: 10px;
+                        }
+                    }
+
+                    span {
+                        color: white;
+                        font-size: 18px;
+                    }
                 }
 
                 .log-collapse {
@@ -312,11 +327,29 @@
                     font-size: 15px;
                     padding-left: 0px;
                 }
+
+                &:nth-child(even) {
+                    .log-meta {
+                        color: $faded-color !important;
+                    }
+
+                    .log-content {
+                        color: $faded-color !important;
+                        span {
+                            color: $faded-color !important;
+                        }
+                    }
+
+                    button {
+                        color: $faded-color !important;
+                    }
+                }
             }
         }
     }
 }
 
+
 .chat-iframe {
     @media (max-width: 1024px) {
         position: fixed;

src/lib/services/signalr-service.js

@@ -24,6 +24,9 @@ export const signalr = {
   /** @type {import('$types').OnContentLogReceived} */
   onContentLogGenerated: () => {},
 
+  /** @type {import('$types').OnConversationStatesGenerated} */
+  onConversationStatesGenerated: () => {},
+
   // start the connection
   /** @param {string} conversationId */
   async start(conversationId) {
@@ -84,6 +87,13 @@ export const signalr = {
         this.onContentLogGenerated(jsonLog);
       }
     });
+
+    connection.on('onConversateStatesGenerated', (data) => {
+      const jsonData = JSON.parse(data);
+      if (conversationId === jsonData?.conversation_id) {
+        this.onConversationStatesGenerated(jsonData);
+      }
+    });
   },
 
   // stop the connection