fix #61 and add config background on mouse hover

Author: azmy60

src/assets/styles/components/_message.scss

@@ -182,6 +182,11 @@
   &.user .message-actions {
     margin-top: 0.5rem;
     justify-content: flex-end;
+
+    // This fixes https://github.com/beekeeper-studio/bks-ai-shell/issues/61
+    .btn:last-child .title-popup {
+      right: 0;
+    }
   }
 
   .message-content .code-block .actions .btn {

src/assets/styles/pages/configuration/_general.scss

@@ -2,8 +2,4 @@
   .base-input textarea {
     resize: vertical;
   }
-
-  .switch {
-    margin-top: 1.5rem;
-  }
 }

src/assets/styles/pages/configuration/_main.scss

@@ -15,6 +15,7 @@
 }
 
 .configuration {
+  --config-bg-hover: color-mix(in srgb, var(--theme-base) 3.5%, var(--query-editor-bg));
   position: fixed;
   top: 0;
   left: 0;
@@ -49,7 +50,7 @@
     background-color: transparent;
 
     &:not(.back-btn):hover {
-      background-color: rgb(from var(--theme-base) r g b / 3.5%);
+      background-color: var(--config-bg-hover);
     }
 
     &.active {
@@ -62,7 +63,7 @@
   }
 
   .content {
-    padding: 1rem;
+    padding-bottom: 1rem;
     padding-top: 1.26rem;
     flex-grow: 1;
     min-width: 0;
@@ -75,5 +76,18 @@
     > :last-child {
       padding-bottom: 2rem;
     }
+
+    h1, h2, h3, h4, p, li, .base-input {
+      padding-inline: 1rem;
+    }
+
+    .base-input {
+      padding-block: 0.75rem;
+      border-radius: 8px;
+
+      &:hover {
+        background-color: var(--config-bg-hover);
+      }
+    }
   }
 }

src/assets/styles/pages/configuration/_models.scss

@@ -6,21 +6,32 @@
 
     h3 {
       margin: 0;
-      width: 7rem;
+      width: 6rem;
+      padding-right: 0;
+      padding-top: 0.35rem;
     }
 
     .model-list {
       flex-grow: 1;
     }
 
     .model {
-      height: 2rem;
+      border-radius: 8px;
+
+      &.available label {
+        cursor: pointer;
+      }
 
       label {
+        height: 2rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
       }
+
+      &:hover {
+        background-color: var(--config-bg-hover);
+      }
     }
 
     .switch {
@@ -59,6 +70,11 @@
     .api-info {
       margin-bottom: 1rem;
     }
+
+    .api-key-form {
+      gap: 0;
+    }
+
     .description {
       margin-top: 0;
       margin-bottom: 1rem;
@@ -68,7 +84,7 @@
     }
 
     >.base-input {
-      margin-top: 1rem;
+      // margin-top: 1rem;
 
       label {
         width: 7rem;
@@ -110,7 +126,8 @@
     }
   }
 
-  .api-key-form .base-input, .config-form .base-input {
+  .api-key-form .base-input,
+  .config-form .base-input {
     display: grid;
     grid-template-columns: 1fr 3fr;
 

src/components/common/BaseInput.vue

@@ -63,7 +63,7 @@ export default {
       if (this.$refs.focusable) {
         (this.$refs.focusable as HTMLElement).focus();
       }
-    }
+    },
   },
 };
 </script>

src/components/configuration/ModelsConfiguration.vue

@@ -3,8 +3,8 @@
   <div v-for="provider in modelsByProvider" class="provider">
     <h3>{{ provider.providerDisplayName }}</h3>
     <ul class="model-list">
-      <li v-for="model in provider.models" :key="model.id" class="model">
-        <label class="switch-label" :title="!model.available ? 'Enter the API key to enable this model' : model.id
+      <li v-for="model in provider.models" :key="model.id" class="model" :class="{ available: model.available }">
+        <label class="switch-label" :title="!model.available ? `${provider.providerDisplayName} API key is required to enable this model` : model.id
           ">
           {{ model.displayName }}
           <Switch :model-value="model.enabled" @change="toggle(model, $event)" :disabled="!model.available" />