Merge pull request #324 from iceljc/features/refine-chat-window

add instrucition log state search

Author: iceljc

package-lock.json

@@ -56,6 +56,7 @@
 		"moment": "^2.30.1",
 		"overlayscrollbars": "^2.4.4",
 		"overlayscrollbars-svelte": "^0.5.2",
+		"qs": "^6.14.0",
 		"svelte-awesome-color-picker": "^2.4.7",
 		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",

package.json

@@ -59,7 +59,7 @@
                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <i
                         class="bx bx-no-entry text-danger clickable"
-                        class:hide={idx === 0}
+                        class:hide={states.length === 1}
                         on:click={() => removeState(idx)}
                     />
                 </div>

src/routes/page/conversation/state-search.svelte renamed to src/lib/common/StateSearch.svelte

@@ -23,6 +23,7 @@
  * @property {string[]?} [providers]
  * @property {string[]?} [models]
  * @property {string[]?} [templateNames]
+ * @property {{key: string, value: string}[]?} [states]
  */
 
 /**
@@ -37,6 +38,7 @@
  * @property {string} user_message
  * @property {string?} [system_instruction]
  * @property {string} completion_text
+ * @property {Object?} [states]
  * @property {Date} created_time
  */
 

src/lib/helpers/types/instructTypes.js

@@ -45,6 +45,7 @@ File: Main Css File
 @import "custom/components/text";
 @import "custom/components/multiselect";
 @import "custom/components/markdown";
+@import "custom/components/state";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";

src/lib/scss/app.scss

@@ -0,0 +1,26 @@
+.state-search-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .state-search-item {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+    }
+}
+
+.state-search-btn-wrapper {
+    .state-search-btn {
+        display: flex;
+        justify-content: center;
+        gap: 3px;
+        flex-wrap: wrap;
+
+        @media (max-width: 800px) {
+            .search-btn-text {
+                display: none;
+            }
+        }
+    }
+}