enhanced

2025-03-16 17:15:26 +00:00 · 2025-02-08 02:54:45 +01:00 · 2025-02-08 02:54:45 +01:00 · c3c5e1e2e9
commit c3c5e1e2e9
parent cc5005acee
10 changed files with 271 additions and 272 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 2d6fe6278408da067daacef448253237c17a322b
+Subproject commit 0dfe03fc7b87bc23e2543a9c022f024637217822
--- a/lollms_webui.py
+++ b/lollms_webui.py
@ -516,9 +516,18 @@ class LOLLMSWebUI(LOLLMSElfServer):
            ASCIIColors.warning(
                "An error was encountered while trying to mount personality"
            )
-        ASCIIColors.success(f" ╔══════════════════════════════════════════════════╗ ")
-        ASCIIColors.success(f" ║                      Done                        ║ ")
-        ASCIIColors.success(f" ╚══════════════════════════════════════════════════╝ ")
+        ASCIIColors.multicolor(
+            texts=[
+            f" ╔══════════════════════════════════════════════════╗\n",
+            f" ║","                        Done                      ","║\n",
+            f" ╚══════════════════════════════════════════════════╝\n",
+            ],
+            colors=[
+                ASCIIColors.color_bright_cyan,
+                ASCIIColors.color_bright_cyan,ASCIIColors.color_bright_green,ASCIIColors.color_bright_cyan,
+                ASCIIColors.color_bright_cyan,
+            ]
+        )
        # Sort the indices in descending order to ensure correct removal
        to_remove.sort(reverse=True)

--- a/web/dist/assets/index-C0N8vUoL.css
+++ b/web/dist/assets/index-C0N8vUoL.css
--- a/web/dist/assets/index-TS_PX_VH.js
+++ b/web/dist/assets/index-TS_PX_VH.js
--- a/web/dist/assets/index-lNdQ3FaH.css
+++ b/web/dist/assets/index-lNdQ3FaH.css
--- a/web/dist/index.html
+++ b/web/dist/index.html
@ -6,8 +6,8 @@
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoLLMS WebUI</title>
-    <script type="module" crossorigin src="/assets/index-BDCnYGMB.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C0N8vUoL.css">
+    <script type="module" crossorigin src="/assets/index-TS_PX_VH.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-lNdQ3FaH.css">
  </head>
  <body>
    <div id="app"></div>
--- a/web/src/components/JsonNode.vue
+++ b/web/src/components/JsonNode.vue
@ -1,41 +1,30 @@
+<!-- JsonNode.vue -->
 <template>
    <div class="json-tree">
-      <!-- When data is an object -->
-      <template v-if="isObject">
-        <div v-for="(value, key) in data" :key="key" class="node">
-          <div class="node-header" @click.stop="toggleCollapse(key)">
-            <span class="toggle">
-              <i :class="collapsedItems[key] ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"></i>
-            </span>
-            <span class="key">{{ key }}:</span>
-            <span v-if="debug" class="node-debug"> [key = {{ key }}]</span>
-          </div>
-          <div v-if="!collapsedItems[key]" class="node-children">
-            <JsonNode :data="value" />
+      <!-- Object -->
+      <div v-if="isObject" class="tree-node">
+        <div class="node-label" @click="toggle">
+          <span class="toggle-icon">{{ expanded ? '▼' : '▶' }}</span>
+          <span class="key">{{ label }}</span>
+          <span class="bracket">{{ isArray ? '[' : '{' }}</span>
+        </div>
+        <div v-if="expanded" class="node-content">
+          <div v-for="(value, key) in data" :key="key" class="node-item">
+            <json-node 
+              :data="value"
+              :label="key"
+              :depth="depth + 1"
+            />
          </div>
        </div>
-      </template>
+        <div v-if="expanded" class="bracket-close">{{ isArray ? ']' : '}' }}</div>
+      </div>
  
-      <!-- When data is an array -->
-      <template v-else-if="isArray">
-        <div v-for="(item, index) in data" :key="index" class="node">
-          <div class="node-header" @click.stop="toggleCollapse(index)">
-            <span class="toggle">
-              <i :class="collapsedItems[index] ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"></i>
-            </span>
-            <span class="index">[{{ index }}]:</span>
-            <span v-if="debug" class="node-debug"> [index = {{ index }}]</span>
-          </div>
-          <div v-if="!collapsedItems[index]" class="node-children">
-            <JsonNode :data="item" />
-          </div>
-        </div>
-      </template>
-  
-      <!-- When data is a primitive -->
-      <template v-else>
-        <span class="primitive">{{ formatPrimitive(data) }}</span>
-      </template>
+      <!-- Primitive values -->
+      <div v-else class="tree-leaf">
+        <span class="key" v-if="label">{{ label }}:</span>
+        <span :class="['value', getValueType(data)]">{{ formatValue(data) }}</span>
+      </div>
    </div>
  </template>
  
@ -44,93 +33,102 @@
    name: 'JsonNode',
    props: {
      data: {
-        type: [Object, Array, String, Number, Boolean, null],
-        required: true,
+        required: true
      },
+      label: {
+        type: String,
+        default: ''
+      },
+      depth: {
+        type: Number,
+        default: 0
+      }
    },
    data() {
      return {
-        // Use a plain object to track which keys/indices are collapsed.
-        collapsedItems: {},
-        debug: true, // Toggle node-level debug logs/output.
-      };
+        expanded: true
+      }
    },
    computed: {
      isObject() {
-        const result =
-          typeof this.data === 'object' &&
-          this.data !== null &&
-          !Array.isArray(this.data);
-        if (this.debug) {
-          console.log('[JsonNode] isObject:', result, 'Data:', this.data);
-        }
-        return result;
+        return this.data !== null && typeof this.data === 'object'
      },
      isArray() {
-        const result = Array.isArray(this.data);
-        if (this.debug) {
-          console.log('[JsonNode] isArray:', result, 'Data:', this.data);
-        }
-        return result;
-      },
-    },
-    methods: {
-      toggleCollapse(key) {
-        console.log('[JsonNode] Toggling collapse for key:', key, 'Current:', this.collapsedItems[key]);
-        // Toggle the collapse state for the given key/index.
-        this.$set(this.collapsedItems, key, !this.collapsedItems[key]);
-        console.log('[JsonNode] New collapse state for key:', key, this.collapsedItems[key]);
-      },
-      formatPrimitive(value) {
-        if (value === null) return 'null';
-        if (typeof value === 'string') return '"' + value + '"';
-        return value.toString();
-      },
-    },
-    mounted() {
-      if (this.debug) {
-        console.log('[JsonNode] Mounted with data:', this.data);
+        return Array.isArray(this.data)
      }
    },
-  };
+    methods: {
+      toggle() {
+        this.expanded = !this.expanded
+      },
+      getValueType(value) {
+        if (value === null) return 'null'
+        return typeof value
+      },
+      formatValue(value) {
+        if (value === null) return 'null'
+        if (typeof value === 'string') return `"${value}"`
+        return value
+      }
+    }
+  }
  </script>
  
  <style scoped>
  .json-tree {
-    margin-left: 16px;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-left: 20px;
  }
-  .node-header {
+  
+  .tree-node {
+    position: relative;
+  }
+  
+  .node-label {
    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 4px 0;
+    padding: 2px 0;
  }
-  .node-header:hover {
-    background-color: #f9f9f9;
+  
+  .node-label:hover {
+    background-color: #f0f0f0;
  }
-  .toggle {
-    width: 16px;
-    margin-right: 4px;
+  
+  .toggle-icon {
+    display: inline-block;
+    width: 20px;
+    color: #666;
  }
+  
+  .node-content {
+    border-left: 1px dotted #ccc;
+    margin-left: 7px;
+    padding-left: 13px;
+  }
+  
  .key {
-    color: #92278f;
-    font-weight: 500;
+    color: #881391;
+    margin-right: 5px;
  }
-  .index {
-    color: #2e6f9a;
+  
+  .value {
+    padding: 2px 4px;
  }
-  .primitive {
-    color: #2a9394;
+  
+  .value.string { color: #22863a; }
+  .value.number { color: #005cc5; }
+  .value.boolean { color: #d73a49; }
+  .value.null { color: #6a737d; }
+  
+  .bracket {
+    color: #444;
+    margin-left: 5px;
  }
-  .node-children {
-    margin-left: 16px;
-    border-left: 1px dashed #ddd;
-    padding-left: 8px;
-  }
-  .node-debug {
-    font-size: 12px;
-    color: #555;
-    margin-left: 4px;
+  
+  .bracket-close {
+    color: #444;
+    margin-left: 7px;
  }
  </style>
  
--- a/web/src/components/JsonViewer.vue
+++ b/web/src/components/JsonViewer.vue
@ -1,95 +1,87 @@
+<!-- JsonViewer.vue -->
 <template>
-  <div v-if="isContentPresent" class="json-viewer">
-    <div class="collapsible-section" @click="toggleCollapsible">
-      <span class="toggle-icon">
-        <i :class="collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"></i>
-      </span>
-      {{ jsonFormText }}
+  <div class="json-viewer">
+    <div class="viewer-header" @click="toggle">
+      <span class="toggle-icon">{{ expanded ? '▼' : '▶' }}</span>
+      <span class="title">{{ title }}</span>
    </div>
-    <div v-show="!collapsed" class="json-content panels-color">
-      <json-tree-view :data="parsedJsonData" :depth="0"></json-tree-view>
+    <div v-if="expanded" class="viewer-content">
+      <json-node :data="parsedData" />
    </div>
  </div>
 </template>

 <script>
-import JsonTreeView from './JsonTreeView.vue';
+import JsonNode from './JsonNode.vue'

 export default {
-  components: {
-    JsonTreeView
-  },
+  name: 'JsonViewer',
+  components: { JsonNode },
  props: {
-    jsonData: {
-      type: [Object, Array, String],
-      default: null,
+    data: {
+      required: true
    },
-    jsonFormText: {
+    title: {
      type: String,
-      default: "JSON Viewer",
-    },
+      default: 'JSON Data'
+    }
  },
  data() {
    return {
-      collapsed: true,
-    };
+      expanded: true
+    }
  },
  computed: {
-    isContentPresent() {
-      return (
-        this.jsonData !== null &&
-        (typeof this.jsonData !== 'string' || this.jsonData.trim() !== '')
-      );
-    },
-    parsedJsonData() {
-      if (typeof this.jsonData === 'string') {
+    parsedData() {
+      if (typeof this.data === 'string') {
        try {
-          return JSON.parse(this.jsonData);
-        } catch (error) {
-          console.error('Error parsing JSON string:', error);
-          return { error: 'Invalid JSON string' };
+          return JSON.parse(this.data)
+        } catch (e) {
+          return { error: 'Invalid JSON' }
        }
      }
-      return this.jsonData;
+      return this.data
    }
  },
  methods: {
-    toggleCollapsible() {
-      this.collapsed = !this.collapsed;
-    },
-  },
-};
+    toggle() {
+      this.expanded = !this.expanded
+    }
+  }
+}
 </script>

 <style scoped>
 .json-viewer {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-}
-
-.collapsible-section {
-  cursor: pointer;
-  padding: 8px;
-  background-color: #f0f0f0;
+  border: 1px solid #ddd;
  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  transition: background-color 0.2s;
+  margin: 10px;
+  background: white;
 }

-.collapsible-section:hover {
-  background-color: #e0e0e0;
+.viewer-header {
+  padding: 8px 12px;
+  background: #f5f5f5;
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+}
+
+.viewer-header:hover {
+  background: #eee;
 }

 .toggle-icon {
-  margin-right: 8px;
-  transition: transform 0.2s;
+  display: inline-block;
+  width: 20px;
+  color: #666;
 }

-.json-content {
-  margin-top: 8px;
-  padding-left: 16px;
+.title {
+  font-weight: bold;
+  color: #333;
 }
-</style>
+
+.viewer-content {
+  padding: 10px;
+}
+</style>
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@ -49,7 +49,7 @@
                    </div>
                    <div  v-if="message.metadata !== null">
                        <div v-for="(metadata, index) in (message.metadata?.filter(metadata => metadata!=null && metadata.hasOwnProperty('title') && metadata.hasOwnProperty('content')) || [])" :key="'json-' + message.id + '-' + index" class="json font-bold">
-                            <JsonViewer :jsonFormText="metadata.title" :jsonData="metadata.content" :key="'msgjson-' + message.id" />
+                            <JsonViewer :title="metadata.title" :data="metadata.content" :key="'msgjson-' + message.id" />
                        </div>
                    </div>
                    <DynamicUIRenderer v-if="message.ui" ref="ui" class="w-full" :ui="message.ui" :key="'msgui-' + message.id" />
--- a/zoos/personalities_zoo
+++ b/zoos/personalities_zoo
@ -1 +1 @@
-Subproject commit 381472d7d9caaea768621a7e896cba0371d0c18e
+Subproject commit 794b0af3ebf83af99575db1f2cfd0215f4b4cd98