From c44158def1a575d6f94e7cb5acdcc59e846323e5 Mon Sep 17 00:00:00 2001
From: Alexander Myasoedov <msoedov@gmail.com>
Date: Tue, 20 Aug 2024 23:08:32 +0300
Subject: [PATCH] feat(Simplify UI):

---
 agentic_security/static/index.html | 56 +++++++++++++++++++++++++++++-
 agentic_security/static/main.js    | 25 ++++++++++++-
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/agentic_security/static/index.html b/agentic_security/static/index.html
index 3a371d4..50ac86d 100644
--- a/agentic_security/static/index.html
+++ b/agentic_security/static/index.html
@@ -86,8 +86,62 @@
           </div>
         </section>
 
-        <!-- LLM Spec Input -->
+        <!-- Collapsible LLM Spec Input -->
         <section class="bg-dark-card rounded-lg p-6 shadow-lg">
+          <div @click="toggleLLMSpec"
+            class="flex justify-between items-center cursor-pointer">
+
+            <h2 class="text-2xl font-bold">LLM API Spec</h2>
+            <span :class="statusDotClass"
+              class="w-3 h-3 rounded-full mr-2"></span>
+            <svg :class="{'rotate-180': showLLMSpec}"
+              class="w-6 h-6 transition-transform duration-200"
+              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </div>
+
+          <div v-show="showLLMSpec" class="mt-4">
+            <label for="llm-spec" class="block text-sm font-medium mb-2">
+              LLM API Spec, PROMPT variable will be replaced with the testing
+              prompt
+            </label>
+            <textarea
+              class="w-full bg-dark-bg text-dark-accent-orange border border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-dark-accent-green"
+              id="llm-spec"
+              v-model="modelSpec"
+              @input="adjustHeight"
+              rows="5"
+              placeholder="Enter LLM API Spec here..."></textarea>
+
+            <!-- Error and Success Messages -->
+            <div v-if="errorMsg"
+              class="bg-dark-accent-red bg-opacity-20 border border-dark-accent-red text-dark-accent-red px-4 py-3 rounded-lg relative"
+              role="alert">
+              <strong class="font-bold">Oops!</strong>
+              <span class="block sm:inline">{{errorMsg}}</span>
+            </div>
+            <div v-if="okMsg"
+              class="bg-dark-accent-green bg-opacity-20 border border-dark-accent-green text-dark-accent-green px-4 py-3 rounded-lg relative"
+              role="alert">
+              <strong class="font-bold">&gt;</strong>
+              <span class="block sm:inline">{{okMsg}}</span>
+            </div>
+
+            <!-- Action Buttons -->
+            <section class="flex justify-center space-x-4 mt-10">
+              <button
+                @click="verifyIntegration"
+                class="bg-dark-accent-orange text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                Verify Integration
+              </button>
+            </section>
+          </div>
+        </section>
+        <!-- LLM Spec Input -->
+        <section class="bg-dark-card rounded-lg p-6 shadow-lg" v-if="false">
           <h2 class="text-2xl font-bold mb-4">LLM API Spec</h2>
           <label for="llm-spec" class="block text-sm font-medium mb-2">
             LLM API Spec, PROMPT variable will be replaced with the testing
diff --git a/agentic_security/static/main.js b/agentic_security/static/main.js
index b18fcbb..2406a1b 100644
--- a/agentic_security/static/main.js
+++ b/agentic_security/static/main.js
@@ -83,6 +83,10 @@ var app = new Vue({
         selectedConfig: 0,
         showModules: false,
         showLogs: false,
+        statusDotClass: 'bg-gray-500', // Default status dot class
+        statusText: 'Verified', // Default status text
+        statusClass: 'bg-green-500 text-dark-bg', // Default status class
+        showLLMSpec: true, // Default to showing the LLM Spec Input
         logs: [], // This will store all the logs
         maxDisplayedLogs: 50, // Maximum number of logs to display
         configs: [
@@ -109,6 +113,22 @@ var app = new Vue({
         }
     },
     methods: {
+        updateStatusDot(ok) {
+            if (ok) {
+                this.statusDotClass = 'bg-green-500'; // Green when expanded
+            } else if (!ok) {
+                this.statusDotClass = 'bg-orange-500'; // Orange if collapsed with content
+            } else {
+                this.statusDotClass = 'bg-gray-500'; // Gray if collapsed without content
+            }
+        },
+        toggleLLMSpec() {
+            this.showLLMSpec = !this.showLLMSpec;
+        },
+        adjustHeight(event) {
+            event.target.style.height = 'auto';
+            event.target.style.height = event.target.scrollHeight + 'px';
+        },
         downloadFailures() {
             window.open('/failures', '_blank');
         },
@@ -132,9 +152,11 @@ var app = new Vue({
             console.log(response);
             let txt = await response.text();
             if (!response.ok) {
+                this.updateStatusDot(false);
                 this.errorMsg = 'Integration verification failed:' + txt;
             } else {
                 this.errorMsg = '';
+                this.updateStatusDot(true);
                 this.okMsg = 'Integration verified';
                 this.integrationVerified = true;
                 // console.log('Integration verified', this.integrationVerified);
@@ -158,8 +180,8 @@ var app = new Vue({
             this.adjustHeight({ target: document.getElementById('llm-spec') });
             // this.adjustHeight({ target: document.getElementById('llm-spec') });
             this.errorMsg = '';
+            this.okMsg = '';
             this.integrationVerified = false;
-
         },
         toggleModules() {
             this.showModules = !this.showModules;
@@ -300,6 +322,7 @@ var app = new Vue({
             this.budget = value;
         },
         startScan: async function () {
+            this.showLLMSpec = false;
             let payload = {
                 maxBudget: this.budget,
                 llmSpec: this.modelSpec,