postgresml · SilasMarvin · Oct 26, 2023 · Oct 26, 2023
diff --git a/pgml-dashboard/src/components/accordian/accordian.scss b/pgml-dashboard/src/components/accordian/accordian.scss
@@ -4,13 +4,7 @@ div[data-controller="accordian"] {
     }
 
     .accordian-body {
-        display: none;
-        height: 0px;
-        transition: all 0.5s ease-in-out;
-    }
-
-    .accordian-body.selected {
-        display: block;
-        height: auto;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
     }
 }
diff --git a/pgml-dashboard/src/components/accordian/accordian_controller.js b/pgml-dashboard/src/components/accordian/accordian_controller.js
@@ -1,18 +1,37 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  initialize() {
+    this.bodies = document.getElementsByClassName("accordian-body");
+    this.headers = document.getElementsByClassName("accordian-header");
+
+    this.heights = new Map();
+    for (let i = 0; i < this.bodies.length; i++) {
+      this.heights.set(this.bodies[i], this.bodies[i].offsetHeight);
+      if (i > 0) {
+        this.bodies[i].style.maxHeight = "0px";
+      } else {
+        this.bodies[i].style.maxHeight = this.bodies[i].offsetHeight + "px";
+      }
+    } 
+  }
+
+
   titleClick(e) {
     let target = e.currentTarget.getAttribute("data-value");
-    let elements = document.getElementsByClassName("accordian-body");
-    for (let i = 0; i < elements.length; i++) {
-      elements[i].classList.remove("selected");
-    }
-    elements = document.getElementsByClassName("accordian-header");
-    for (let i = 0; i < elements.length; i++) {
-      elements[i].classList.remove("selected");
-    }
-    let element = document.querySelector(`[data-accordian-target="${target}"]`);
-    element.classList.add("selected");
     e.currentTarget.classList.add("selected");
+
+    let body = document.querySelector(`[data-accordian-target="${target}"]`);
+    body.classList.add("selected");
+    body.style.maxHeight = this.heights.get(body) + "px";
+
+    for (let i = 0; i < this.bodies.length; i++) {
+      if (body != this.bodies[i]) {
+        this.bodies[i].classList.remove("selected");
+        this.bodies[i].style.maxHeight = "0px";
+      }
+      if (e.currentTarget != this.headers[i])
+        this.headers[i].classList.remove("selected");
+    }
   }
 }
diff --git a/pgml-dashboard/src/components/chatbot/chatbot.scss b/pgml-dashboard/src/components/chatbot/chatbot.scss
@@ -59,8 +59,8 @@ div[data-controller="chatbot"] {
     }
 
     .chatbot-brain-option-logo {
-        height: 34px;
-        width: 34px;
+        height: 30px;
+        width: 30px;
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;

diff --git a/pgml-dashboard/src/components/chatbot/chatbot_controller.js b/pgml-dashboard/src/components/chatbot/chatbot_controller.js
@@ -65,7 +65,7 @@ const knowledgeBaseIdToName = (knowledgeBase) => {
 
 const createKnowledgeBaseNotice = (knowledgeBase) => {
   return `
-    <div class="chatbot-knowledge-base-notice text-center p-1">Chatting with Knowledge Base ${knowledgeBaseIdToName(
+    <div class="chatbot-knowledge-base-notice text-center p-3">Chatting with Knowledge Base ${knowledgeBaseIdToName(
       knowledgeBase,
     )}</div>
   `;

diff --git a/pgml-dashboard/src/components/chatbot/template.html b/pgml-dashboard/src/components/chatbot/template.html
@@ -1,6 +1,6 @@
 <div id="chatbot" data-controller="chatbot" class="container">
   <div id="chatbot-inner-wrapper" class="d-flex rounded-3 overflow-hidden">
-    <div id="chatbot-left-column" class="">
+    <div id="chatbot-left-column" class="d-none d-sm-block">
 
       <!-- This is temporary until we have brains -->
       <h5 id="chatbot-change-the-brain-title">Knowledge Base:</h5>
@@ -101,7 +101,7 @@ <h5 id="knowledge-base-title">Knowledge Base:</h5>
 
     <div id="chatbot-right-column" class="flex-grow-1 d-flex flex-column overflow-hidden">
       <div class="d-flex justify-content-between align-items-center pt-3 pb-3 pe-3 m-0">
-        <h3 id="chatbot-chatbot-title">Chatbot</h3>
+        <h3 id="chatbot-chatbot-title" class="mb-0">Chatbot</h3>
         <div id="chatbot-expand-contract-image-wrapper" class="p-1 rounded-2" data-action="click->chatbot#handleExpandClick">
           <img id="chatbot-expand-contract-image" width="28px" height="28px" src="/dashboard/static/images/icons/arrow_expanded.svg"/>
         </div>

diff --git a/pgml-dashboard/src/components/star/mod.rs b/pgml-dashboard/src/components/star/mod.rs
@@ -26,6 +26,10 @@ const SVGS: Lazy<HashMap<&'static str, &'static str>> = Lazy::new(|| {
         "give_it_a_spin",
         include_str!("../../../static/images/icons/stars/give_it_a_spin.svg"),
     );
+    map.insert(
+        "give_it_a_spin_outline",
+        include_str!("../../../static/images/icons/stars/give_it_a_spin_outline.svg"),
+    );
     map
 });
 

diff --git a/pgml-dashboard/static/images/icons/stars/give_it_a_spin_outline.svg b/pgml-dashboard/static/images/icons/stars/give_it_a_spin_outline.svg
diff --git a/pgml-dashboard/static/images/icons/stars/give_it_a_spin_text.svg b/pgml-dashboard/static/images/icons/stars/give_it_a_spin_text.svg