Touched up the chatbot (#1115)

SilasMarvin · web-flow · commit 1dc28ea0acc3 · 2023-10-23T13:08:09.000-07:00
diff --git a/pgml-dashboard/src/components/chatbot/chatbot.scss b/pgml-dashboard/src/components/chatbot/chatbot.scss
@@ -23,6 +23,7 @@ div[data-controller="chatbot"] {
         padding-top: 0.85rem;
         margin-bottom: 1rem;
         display: none;
+        white-space: nowrap;
     }
 
     #chatbot-change-the-brain-spacer {
@@ -33,6 +34,11 @@ div[data-controller="chatbot"] {
     .chatbot-knowledge-base-option-label {
         cursor: pointer;
         padding: 0.5rem;
+        transition: all 0.1s;
+    }
+
+    .chatbot-brain-option-label:hover {
+        background-color: #{$gray-800};
     }
 
     .chatbot-brain-provider {
@@ -106,6 +112,7 @@ div[data-controller="chatbot"] {
 
     #chatbot-question-input-button-wrapper {
         background-color: #{$gray-600};
+        cursor: pointer;
     }
 
     #chatbot-question-input-button {
@@ -236,15 +243,19 @@ div[data-controller="chatbot"] {
         }
     }
 
-    #chatbot-alerts-wrapper {
-        position: fixed;
-        top: 105px;
-        right: 15px;
-        max-width: 500px;
-        z-index: 100;
+    #chatbot-expand-contract-image-wrapper {
+        background-color: #444444; 
+        cursor: pointer;    
+        transition: all 0.1s;
+    }
+
+    #chatbot-expand-contract-image-wrapper:hover {
+        background-color: #2b2b2b; 
     }
 }
 
+
+
 div[data-controller="chatbot"].chatbot-expanded {
     position: fixed;
     top: 100px;
diff --git a/pgml-dashboard/src/components/chatbot/template.html b/pgml-dashboard/src/components/chatbot/template.html
@@ -21,7 +21,7 @@ <h5 id="chatbot-change-the-brain-title">Knowledge Base:</h5>
             <% } %>
           />
           <label
-            class="chatbot-brain-option-label rounded-2"
+            class="chatbot-brain-option-label rounded-2 w-100"
             for="chatbot-knowledge-base-option<%= index %>"
             data-action="chatbot#handleKnowledgeBaseChange"
           >
@@ -102,8 +102,8 @@ <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>
-        <div class="p-1 rounded-2" style="background-color: #444444; cursor: pointer;" data-action="click->chatbot#handleExpandClick">
-          <img id="chatbot-expand-contract-image" class="" width="28px" height="28px" src="/dashboard/static/images/icons/arrow_expanded.svg"/>
+        <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>
       </div>
       
@@ -125,7 +125,7 @@ <h3 id="chatbot-chatbot-title">Chatbot</h3>
 
           <div id="chatbot-question-textarea-wrapper" class="d-flex position-relative">
             <textarea id="chatbot-question-input" class="flex-grow-1 text-white rounded-start-2 z-1" rows="1" placeholder="Send a message" data-action="keydown.enter->chatbot#handleEnter"></textarea>
-            <div id="chatbot-question-input-button-wrapper" class="p-2 d-flex align-items-end rounded-end-2 z-1">
+            <div id="chatbot-question-input-button-wrapper" class="p-2 d-flex align-items-end rounded-end-2 z-1" data-action="click->chatbot#handleEnter">
               <div id="chatbot-question-input-button" class=""></div>
             </div>
             <div id="chatbot-question-input-border" class="position-absolute rounded-2"></div>
