Merge branch 'main' into fix/input-history

Author: azmy60

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "bks-ai-shell",
   "name": "AI Shell",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "minAppVersion": "5.4.0",
   "description": "Ask AI to analyze your database and generate SQL queries.",
   "author": {

package.json

@@ -19,7 +19,7 @@
     "@ai-sdk/google": "^1.2.22",
     "@ai-sdk/openai": "^1.3.22",
     "@ai-sdk/vue": "^1.2.12",
-    "@beekeeperstudio/plugin": "^1.4.0-beta.6",
+    "@beekeeperstudio/plugin": "^1.4.0",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",
     "ai": "^4.3.16",

src/assets/styles/components/_buttons.scss

@@ -49,6 +49,34 @@ $btn-border-radius:         8px;
   &:disabled {
     opacity: 0.6;
   }
+
+  .title-popup {
+    position: absolute;
+    width: max-content;
+    top: 1.9rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    line-height: 1;
+    padding: 0.4rem 0.7rem;
+    border-radius: 4px;
+    background-color: var(--btn-hover-bg-color);
+    user-select: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover .title-popup {
+    animation: fadeInAfterDelay 0.8s forwards;
+  }
+}
+
+@keyframes fadeInAfterDelay {
+  0%, 75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .btn-primary {

src/assets/styles/pages/_chat-interface.scss

@@ -27,20 +27,20 @@
       position: sticky;
       top: 0;
       background-color: var(--query-editor-bg);
+      z-index: 1;
 
       .settings-btn {
-        background-color: transparent;
         min-width: 0;
+        width: 1.8rem;
+        height: 1.8rem;
         border: none;
-        border-radius: 4px;
+        border-radius: 9999px;
         cursor: pointer;
-        color: var(--text-dark);
-        transition: all 0.2s ease;
         margin-left: auto;
         margin-right: 0.3rem;
         opacity: 0.7;
         box-shadow: none;
-        padding-inline: 0.35rem;
+        padding: 0;
 
         &:hover {
           opacity: 1;
@@ -83,6 +83,43 @@
       flex-grow: 1;
     }
   }
+
+  .scroll-container>.header .btn, .code-block .actions .btn {
+    --btn-hover-bg-color: color-mix(in srgb, var(--theme-base) 10%, var(--query-editor-bg));
+    color: var(--text-dark);
+    background-color: var(--query-editor-bg);
+
+    &:hover {
+      background-color: var(--btn-hover-bg-color);
+    }
+  }
+
+  .scroll-down-btn {
+    position: absolute;
+    bottom: 7rem;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 0;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 9999px;
+    color: var(--text-dark);
+    background-color: var(--query-editor-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--theme-base) 10%, var(--query-editor-bg));
+    }
+
+    .material-symbols-outlined {
+      margin-top: 0.2rem;
+      font-size: 1.6rem;
+    }
+  }
 }
 
 .chat-messages {
@@ -128,7 +165,7 @@
     display: inline-block;
     background-color: var(--bks-text-editor-bg-color);
     color: var(--bks-text-editor-fg-color);
-    padding: 0.2rem 0.5rem 0.5rem 0.5rem;
+    padding: 0.5rem;
     width: 100%;
     line-height: 1.07rem;
     font-size: 0.765rem;
@@ -164,45 +201,68 @@
     border: 1px solid var(--border-color);
     border-radius: 8px;
     white-space: normal;
+    --header-text-color: var(--text-dark);
+    --header-bg-color: color-mix(in srgb, var(--theme-base) 3%, var(--query-editor-bg));
 
-    .header {
-      padding: 0.2rem 0.5rem 0;
+    .lang {
+      padding-inline: 0.5rem;
+      height: 1.75rem;
       display: flex;
       justify-content: space-between;
+      font-size: 0.75rem;
+      line-height: 1.75rem;
+      color: var(--header-text-color);
+      background-color: var(--header-bg-color);
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
 
-      .lang {
-        font-size: 0.7rem;
-        opacity: 0.5;
-        line-height: 1.25rem;
+    .actions {
+      position: sticky;
+      top: 4.3rem;
+      margin-right: 0.3rem;
+
+      .group {
+        position: absolute;
+        bottom: 0.1rem;
+        right: 0;
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.25rem;
       }
 
       .btn {
+        min-width: 0px;
+        padding: 0 0;
+        width: 1.75rem;
+        height: 1.5rem;
         box-shadow: none;
-      }
+        color: var(--header-text-color);
+        background-color: var(--header-bg-color);
 
-      .copy-btn {
-        font-size: 0.7rem;
-        color: var(--text-dark);
+        &:disabled {
+          opacity: 1;
+          color: color-mix(in srgb, var(--theme-base) 50%, var(--query-editor-bg));
+        }
 
         .material-symbols-outlined {
-          font-size: 0.9rem;
+          font-size: 1rem;
         }
 
         &.copied .copy-label,
-        &:not(.copied) .copied-label {
+        &.copied .copy-icon,
+        &:not(.copied) .copied-label,
+        &:not(.copied) .copied-icon {
           display: none;
         }
+      }
 
-        .label {
-          content: "Copy";
-        }
+      [data-action=open-in-query-editor] .title-popup {
+        max-width: 10rem;
 
-        padding: 0.3rem;
-        background-color: transparent;
-        gap: 0.2rem;
-        line-height: 1;
-        height: auto;
-        min-width: 0px;
+        @media (min-width: 840px) {
+          max-width: unset;
+        }
       }
     }
   }
@@ -527,4 +587,12 @@
   .chat-container .scroll-container>.header {
     background-color: transparent;
   }
+
+  .chat-messages {
+    z-index: 1;
+  }
+
+  .message-content .code-block .actions {
+    top: 1.9rem;
+  }
 }

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

@@ -7,6 +7,7 @@
   inset: 0;
   display: flex;
   flex-direction: column;
+  z-index: 1;
 
   &:not(.active) {
     display: none;

src/components/ChatInterface.vue

@@ -59,6 +59,14 @@
       </div>
       <div ref="bottomMarker"></div>
     </div>
+    <button
+      v-if="!isAtBottom"
+      @click="scrollToBottom({ smooth: true })"
+      class="btn scroll-down-btn"
+      title="Scroll to bottom"
+    >
+      <span class="material-symbols-outlined">keyboard_arrow_down</span>
+    </button>
     <div class="chat-input-container-container">
       <PromptInput storage-key="inputHistory" :processing="processing" :selected-model="model"
        @select-model="selectModel" @manage-models="$emit('manage-models')" @submit="submit" @stop="stop"  />
@@ -242,12 +250,19 @@ export default {
       }
     },
 
-    scrollToBottom() {
+    scrollToBottom(options?: { smooth?: boolean }) {
       if (!this.$refs.scrollContainerRef) {
         return;
       }
-      this.$refs.scrollContainerRef.scrollTop =
-        this.$refs.scrollContainerRef.scrollHeight;
+      if (options?.smooth) {
+        this.$refs.scrollContainerRef.scrollTo({
+          top: this.$refs.scrollContainerRef.scrollHeight,
+          behavior: 'smooth'
+        });
+      } else {
+        this.$refs.scrollContainerRef.scrollTop =
+          this.$refs.scrollContainerRef.scrollHeight;
+      }
     },
 
     selectModel(model: Model) {

src/components/messages/Markdown.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { clipboard } from "@beekeeperstudio/plugin";
+import { clipboard, openTab } from "@beekeeperstudio/plugin";
 import { parseMarkdownToHTML } from "@/markdownParser";
 
 export default {
@@ -59,10 +59,14 @@ export default {
           }
           this.copyTimeout = setTimeout(
             () => target.classList.remove("copied"),
-            3000,
+            1000,
           );
           break;
         }
+        case "open-in-query-editor": {
+          await openTab("query", { query: text });
+          break;
+        }
         case "run": {
           target.classList.add("running");
           // TODO call request("runQuery") here