From 7538e2bb042c055e9d887027c60ab7836a3d3f34 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 29 Nov 2025 19:39:12 +0700
Subject: [PATCH 1/5] new onboarding ui

---
 package.json                                  |   1 +
 src/App.vue                                   |  18 +-
 src/assets/styles/_base.scss                  |   4 +
 src/assets/styles/_primevue.scss              | 197 ++++++++++++++++++
 src/assets/styles/components/_all.scss        |   1 -
 src/assets/styles/components/_base-input.scss |   6 +-
 src/assets/styles/components/_dropdown.scss   |  85 --------
 src/assets/styles/main.scss                   |   1 +
 src/assets/styles/pages/_api-key-form.scss    |   1 -
 src/assets/styles/pages/_chat-interface.scss  |  13 +-
 .../styles/pages/_onboarding-screen.scss      |   4 +
 .../styles/pages/configuration/_main.scss     |  53 +++--
 src/components/ApiKeyForm.vue                 | 132 +++++++++---
 src/components/OnboardingScreen.vue           |  26 ++-
 src/components/common/BaseInput.vue           |   4 +-
 src/components/common/PromptInput.vue         |  58 ++++--
 .../configuration/Configuration.vue           |  21 +-
 src/main.ts                                   |   2 +
 yarn.lock                                     |  46 ++++
 19 files changed, 480 insertions(+), 193 deletions(-)
 create mode 100644 src/assets/styles/_primevue.scss
 delete mode 100644 src/assets/styles/components/_dropdown.scss

diff --git a/package.json b/package.json
index 821ded5..a0d8b3e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "ollama-ai-provider": "^1.2.0",
     "pinia": "^3.0.2",
     "pluralize": "^8.0.0",
+    "primevue": "^4.4.1",
     "sql-query-identifier": "^2.8.0",
     "typeface-roboto": "^0.0.75",
     "vue": "^3.4.21",
diff --git a/src/App.vue b/src/App.vue
index be97314..5ca8109 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,17 +7,11 @@
     <ChatInterface v-if="page === 'chat-interface'" :initialMessages="messages" :openaiApiKey="openaiApiKey"
       :anthropicApiKey="anthropicApiKey" :googleApiKey="googleApiKey" @manage-models="handleManageModels"
       @open-configuration="handleOpenConfiguration" />
-    <div id="configuration-popover" :class="{ active: showConfiguration }" v-kbd-trap.autofocus="showConfiguration">
-      <Configuration :reactivePage="configurationPage" @close="closeConfiguration" />
-    </div>
-    <div class="onboarding-screen-popover-container" v-if="showOnboarding">
-      <div class="onboarding-screen-popover" v-kbd-trap="true">
-        <button class="btn close-btn" @click="closeOnboardingScreen">
-          <span class="material-symbols-outlined">close</span>
-        </button>
-        <OnboardingScreen @submit="closeOnboardingScreen" @open-provider-config="closeOnboardingScreenAndOpenProviderConfig" />
-      </div>
-    </div>
+    <Configuration v-model:visible="showConfiguration" :reactivePage="configurationPage" @close="closeConfiguration" />
+    <Dialog :visible="showOnboarding" :closable="false" :draggable="false">
+      <OnboardingScreen @submit="closeOnboardingScreen"
+        @open-provider-config="closeOnboardingScreenAndOpenProviderConfig" />
+    </Dialog>
   </div>
 </template>
 
@@ -33,6 +27,7 @@ import Configuration, {
 } from "@/components/configuration/Configuration.vue";
 import OnboardingScreen from "./components/OnboardingScreen.vue";
 import { getData, notify } from "@beekeeperstudio/plugin";
+import { Dialog } from "primevue";
 
 type Page = "starting" | "chat-interface";
 
@@ -41,6 +36,7 @@ export default {
     ChatInterface,
     Configuration,
     OnboardingScreen,
+    Dialog,
   },
 
   data() {
diff --git a/src/assets/styles/_base.scss b/src/assets/styles/_base.scss
index 60e8b3e..ed9d680 100644
--- a/src/assets/styles/_base.scss
+++ b/src/assets/styles/_base.scss
@@ -48,6 +48,10 @@ a {
   font-weight: 700;
 }
 
+p {
+  line-height: 1.5;
+}
+
 /* Make the scrollbar look better */
 ::-webkit-scrollbar {
   width: 12px;
diff --git a/src/assets/styles/_primevue.scss b/src/assets/styles/_primevue.scss
new file mode 100644
index 0000000..2b910d7
--- /dev/null
+++ b/src/assets/styles/_primevue.scss
@@ -0,0 +1,197 @@
+:root {
+  // Button
+  --p-button-primary-focus-ring-color: var(--focus-visible-outline-color);
+
+  --p-button-text-secondary-hover-background: var(--p-togglebutton-background);
+
+  --p-button-icon-only-width: 2rem;
+  --p-icon-size: 0.875rem;
+
+  --p-button-focus-ring-style: var(--focus-visible-outline-style);
+  --p-button-focus-ring-width: var(--focus-visible-outline-width);
+  --p-button-focus-ring-offset: 2px;
+  // -----------------------------------
+
+  // Select Button
+  --p-selectbutton-border-radius: 8px;
+  // -----------------------------------
+
+  // Toggle Button
+  --p-togglebutton-color: color-mix(in srgb, var(--theme-base) 60%, var(--theme-bg));
+  --p-togglebutton-background: color-mix(in srgb, var(--theme-base) 6%, var(--theme-bg));
+  --p-togglebutton-padding: 0.25rem 0.25rem;
+  --p-togglebutton-font-weight: 700;
+  --p-togglebutton-border-radius: 8px;
+  --p-togglebutton-focus-ring-color: var(--focus-visible-outline-color);
+  --p-togglebutton-focus-ring-style: var(--focus-visible-outline-style);
+  --p-togglebutton-focus-ring-width: var(--focus-visible-outline-width);
+  --p-togglebutton-focus-ring-offset: var(--p-button-focus-ring-offset);
+  --p-togglebutton-transition-duration: var(--p-transition-duration);
+
+  --p-togglebutton-hover-background: var(--p-togglebutton-background);
+  --p-togglebutton-hover-color: var(--theme-base);
+  --p-togglebutton-checked-color: var(--theme-base);
+  --p-togglebutton-checked-background: var(--p-togglebutton-background);
+
+  --p-togglebutton-content-padding: 0.1rem 0.75rem;
+  --p-togglebutton-content-border-radius: 8px;
+
+  --p-togglebutton-content-checked-background: color-mix(in srgb,
+      var(--theme-base) 15%,
+      var(--theme-bg));
+  // -----------------------------------
+
+  // Select
+  --p-select-background: color-mix(
+    in srgb,
+    var(--theme-base) 6%,
+    var(--theme-bg));
+  --p-select-color: var(--text-dark);
+  --p-select-border-color: var(--border-color);
+  --p-select-border-radius: 8px;
+  --p-select-padding-x: 0.75rem;
+  --p-select-padding-y: 0.5rem;
+  --p-select-dropdown-width: 1.5rem;
+
+  --p-select-overlay-border-radius: var(--p-menu-border-radius);
+  --p-select-overlay-color: var(--p-menu-color);
+  --p-select-overlay-background: var(--p-menu-background);
+  --p-select-overlay-shadow: var(--p-menu-shadow);
+
+  --p-select-option-color: var(--text-dark);
+  --p-select-option-padding: var(--p-menu-item-padding);
+  --p-select-option-border-radius: var(--p-menu-item-border-radius);
+
+  --p-select-option-selected-color: var(--p-menu-item-focus-color);
+  --p-select-option-selected-background: var(--p-menu-item-focus-background);
+  --p-select-option-selected-focus-color: var(--p-menu-item-focus-color);
+  --p-select-option-selected-focus-background: var(--p-menu-item-focus-background);
+  --p-select-option-focus-background: var(--p-menu-item-focus-background);
+  --p-select-option-focus-color: var(--p-menu-item-focus-color);
+
+  --p-select-placeholder-color: var(--text-light);
+  // -----------------------------------
+
+
+  // Dialog
+  --p-dialog-background: var(--theme-bg);
+  --p-dialog-border-radius: 8px;
+  --p-dialog-shadow: 0 0 0.5rem var(--query-editor-bg);
+  --p-dialog-color: var(--text-dark);
+
+  --p-dialog-header-padding: 1.2rem 1.2rem 0.8rem;
+
+  --p-dialog-title-font-weight: 500;
+  --p-dialog-title-font-size: 1.1rem;
+
+  --p-dialog-content-padding: 0 1.2rem 1.75rem;
+  --p-dialog-footer-padding: 0 1.2rem 1.2rem;
+  --p-dialog-footer-gap: 0.5rem;
+  // -----------------------------------
+
+  // Menu
+  --p-menu-border-radius: 8px;
+  --p-menu-color: var(--text);
+  --p-menu-background: color-mix(in srgb,
+      var(--theme-base) 6%,
+      var(--theme-bg));
+  --p-menu-shadow: 0 0 0.5rem var(--theme-bg);
+
+  --p-menu-submenu-label-font-weight: normal;
+
+  --p-menu-list-padding: 0.3rem 0;
+
+  --p-menu-item-color: var(--text-dark);
+  // --p-menu-item-padding: 0.482rem 0.8rem;
+  --p-menu-item-padding: 0.2855rem 0.8rem;
+  --p-menu-item-focus-background: color-mix(in srgb,
+      var(--theme-base) 11%,
+      var(--theme-bg));
+  --p-menu-item-focus-color: var(--theme-base);
+  --p-menu-item-gap: 0.5rem;
+
+  --p-menu-separator-border-color: color-mix(in srgb,
+      var(--theme-base) 10%,
+      var(--theme-bg));
+  // -----------------------------------
+
+  // Context Menu -- pretty much the same as menu
+  --p-contextmenu-border-radius: var(--p-menu-border-radius);
+  --p-contextmenu-color: var(--p-menu-color);
+  --p-contextmenu-background: var(--p-menu-background);
+  --p-contextmenu-shadow: var(--p-menu-shadow);
+
+  --p-contextmenu-submenu-label-font-weight: var(--p-menu-submenu-label-font-weight);
+
+  --p-contextmenu-item-padding: var(--p-menu-item-padding);
+  --p-contextmenu-item-border-radius: var(--p-menu-item-border-radius);
+  --p-contextmenu-item-focus-background: var(--p-menu-item-focus-background);
+  --p-contextmenu-item-focus-color: var(--p-menu-item-focus-color);
+  // -----------------------------------
+
+  // Overlay
+  --p-mask-background: rgb(from var(--theme-bg) r g b / 0.3);
+  // -----------------------------------
+
+  // Popover
+  --p-popover-gutter: 0.5rem;
+  --p-popover-arrow-offset: 1rem;
+  --p-popover-background: color-mix(in srgb,
+      var(--theme-base) 6%,
+      var(--query-editor-bg));
+  --p-popover-color: var(--text);
+  --p-popover-border-color: transparent;
+  --p-popover-border-radius: 8px;
+  --p-popover-box-shadow: 0 0 0.5rem var(--theme-bg);
+  // -----------------------------------
+
+  // Progress
+  --p-progressspinner-color-one: var(--theme-primary);
+  --p-progressspinner-color-two: var(--theme-primary);
+  --p-progressspinner-color-three: var(--theme-primary);
+  --p-progressspinner-color-four: var(--theme-primary);
+  // -----------------------------------
+
+  // Mask (overlay)
+  --p-mask-transition-duration: 0.2s;
+  // -----------------------------------
+}
+
+.p-menu .p-menu-item,
+.p-contextmenu .p-contextmenu-item,
+.p-select-list, .p-select-option {
+  // FIXME should be 0.9rem. But this should match the app font size for now.
+  font-size: 12.6px;
+
+  .menu-icon {
+    font-size: 1.5em;
+    width: 1em;
+    height: 1em;
+  }
+
+  a {
+    font-weight: normal;
+  }
+}
+
+.p-select .p-select-label {
+  font-size: 0.9rem;
+  text-align: left;
+}
+
+.p-menu {
+  overflow: hidden;
+}
+
+.p-menu-list {
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.p-menu-item.selected {
+  background-color: var(--p-select-option-selected-background);
+}
+
+.p-dialog {
+  max-width: 90vw;
+}
diff --git a/src/assets/styles/components/_all.scss b/src/assets/styles/components/_all.scss
index 908f1ce..e9a6dfc 100644
--- a/src/assets/styles/components/_all.scss
+++ b/src/assets/styles/components/_all.scss
@@ -2,7 +2,6 @@
 @use "base-input";
 @use "buttons";
 @use "spinner";
-@use "dropdown";
 @use "run-query-result";
 @use "progress-bar";
 @use "switch";
diff --git a/src/assets/styles/components/_base-input.scss b/src/assets/styles/components/_base-input.scss
index 4b598b1..c25f16b 100644
--- a/src/assets/styles/components/_base-input.scss
+++ b/src/assets/styles/components/_base-input.scss
@@ -14,6 +14,7 @@
     font-size: 0.75rem;
     color: var(--text-dark);
     opacity: 0.7;
+    margin: 0;
   }
 
   .input-wrapper {
@@ -25,7 +26,10 @@
 
     input,
     textarea {
-      background-color: color-mix(in srgb, var(--theme-base) 5%, var(--query-editor-bg));
+      background-color: color-mix(
+        in srgb,
+        var(--theme-base) 5%,
+        var(--theme-bg));
       border: 1px solid var(--border-color);
       border-radius: 8px;
       padding: 0.5rem 0.75rem;
diff --git a/src/assets/styles/components/_dropdown.scss b/src/assets/styles/components/_dropdown.scss
deleted file mode 100644
index baa98c0..0000000
--- a/src/assets/styles/components/_dropdown.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-.dropdown-container {
-  position: relative;
-}
-
-.dropdown-trigger {
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: var(--focus-visible-outline);
-  }
-}
-
-.dropdown-popover {
-  position: fixed;
-  z-index: 1000;
-  background-color: var(--query-editor-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 0.5rem 0;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  margin: 0;
-  min-width: 200px;
-}
-
-.dropdown-option {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  color: var(--text-dark);
-  font-size: 0.85rem;
-
-  .option-content {
-    flex: 1;
-  }
-
-  .selected-indicator {
-    color: var(--theme-base);
-    font-weight: 600;
-    margin-left: 0.5rem;
-    font-size: 0.8rem;
-  }
-
-  &:hover:not(.disabled), &:focus-visible {
-    background-color: rgb(from var(--theme-base) r g b / 5%);
-  }
-
-  &.selected {
-    background-color: rgb(from var(--theme-base) r g b / 10%);
-    font-weight: 600;
-  }
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.dropdown-separator {
-  height: 1px;
-  background-color: var(--border-color);
-  margin: 0.25rem 0;
-}
-
-.dropdown-action {
-  display: block;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: none;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  color: var(--text-dark);
-  font-size: 0.85rem;
-  font-style: italic;
-
-  &:hover {
-    background-color: rgb(from var(--theme-base) r g b / 5%);
-  }
-}
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 9112149..7b6106a 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -3,6 +3,7 @@
 @use "components/all" as components;
 @use "pages/all" as pages;
 @use "sass:color";
+@use "primevue";
 
 #app {
   height: 100%;
diff --git a/src/assets/styles/pages/_api-key-form.scss b/src/assets/styles/pages/_api-key-form.scss
index f4eba29..971e2e6 100644
--- a/src/assets/styles/pages/_api-key-form.scss
+++ b/src/assets/styles/pages/_api-key-form.scss
@@ -34,7 +34,6 @@
 
     label {
       margin-top: 0.6rem;
-      width: 10rem;
     }
 
     .input-wrapper {
diff --git a/src/assets/styles/pages/_chat-interface.scss b/src/assets/styles/pages/_chat-interface.scss
index ea79250..bbcb9bc 100644
--- a/src/assets/styles/pages/_chat-interface.scss
+++ b/src/assets/styles/pages/_chat-interface.scss
@@ -32,8 +32,8 @@
 
       .settings-btn {
         min-width: 0;
-        width: 1.8rem;
-        height: 1.8rem;
+        width: 2rem;
+        height: 2rem;
         border: none;
         border-radius: 9999px;
         cursor: pointer;
@@ -438,7 +438,10 @@
 }
 
 .chat-input-container {
-  background-color: rgb(from var(--theme-base) r g b / 5%);
+  background-color: color-mix(
+    in srgb,
+    var(--theme-base) 5%,
+    var(--query-editor-bg));
   border: 1px solid var(--border-color);
   border-radius: 8px;
   display: flex;
@@ -453,6 +456,10 @@
     border-radius: 8px;
 
     textarea {
+      background-color: color-mix(
+        in srgb,
+        var(--theme-base) 5%,
+        var(--query-editor-bg));
       border-color: transparent;
 
       &:focus-visible {
diff --git a/src/assets/styles/pages/_onboarding-screen.scss b/src/assets/styles/pages/_onboarding-screen.scss
index 4be9023..86e4d54 100644
--- a/src/assets/styles/pages/_onboarding-screen.scss
+++ b/src/assets/styles/pages/_onboarding-screen.scss
@@ -54,6 +54,10 @@
   max-width: 24rem;
   text-align: center;
 
+  h1 {
+    margin-top: 0;
+  }
+
   .api-info {
     margin-top: 1.5rem;
     margin-bottom: 1rem;
diff --git a/src/assets/styles/pages/configuration/_main.scss b/src/assets/styles/pages/configuration/_main.scss
index 13ac394..4149889 100644
--- a/src/assets/styles/pages/configuration/_main.scss
+++ b/src/assets/styles/pages/configuration/_main.scss
@@ -15,20 +15,21 @@
 }
 
 .configuration {
-  --config-bg-hover: color-mix(in srgb, var(--theme-base) 3.5%, var(--query-editor-bg));
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow-y: scroll;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  background-color: var(--query-editor-bg);
-  justify-content: center;
+  --config-bg-hover: color-mix(in srgb,
+      var(--theme-base) 3.5%,
+      var(--theme-bg));
+
+  .p-dialog-content {
+    padding-top: 1.75rem;
+    display: flex;
+    width: 40rem;
+    max-width: 100%;
+    height: 90vh;
+    max-height: 46rem;
+  }
 
   nav {
     width: 9rem;
-    padding: 1rem;
     flex-shrink: 0;
     position: sticky;
     top: 0;
@@ -49,35 +50,41 @@
     justify-content: flex-start;
     background-color: transparent;
 
-    &:not(.back-btn):hover {
+    &:hover {
       background-color: var(--config-bg-hover);
     }
 
     &.active {
       background-color: rgb(from var(--theme-base) r g b / 10%);
     }
-  }
 
-  .back-btn {
-    padding-left: 0;
+    &.close-btn {
+      padding: 0;
+      width: 2rem;
+      height: 2rem;
+      justify-content: center;
+      min-width: 0;
+      margin-top: -0.25rem;
+    }
   }
 
+
   .content {
-    padding-bottom: 1rem;
-    padding-top: 1.26rem;
     flex-grow: 1;
     min-width: 0;
-    max-width: 39rem;
+    overflow-y: scroll;
 
     > :first-child {
       margin-top: 0;
     }
 
-    > :last-child {
-      padding-bottom: 2rem;
-    }
-
-    h1, h2, h3, h4, p, li, .base-input {
+    h1,
+    h2,
+    h3,
+    h4,
+    p:not(.helper),
+    li,
+    .base-input {
       padding-inline: 1rem;
     }
 
diff --git a/src/components/ApiKeyForm.vue b/src/components/ApiKeyForm.vue
index 4725e35..dba0621 100644
--- a/src/components/ApiKeyForm.vue
+++ b/src/components/ApiKeyForm.vue
@@ -1,50 +1,69 @@
 <template>
-  <div class="api-key-form">
-    <BaseInput
-      type="password"
-      placeholder="sk-proj-..."
-      v-model="openaiApiKey"
-    >
+  <div class="api-key-form" :class="{ 'dropdown-based': dropdownBased }">
+    <div class="input-container" v-if="dropdownBased">
+      <label for="select-provider">Provider</label>
+      <Select for="select-provider" v-model="selectedProvider" :options="dropdownOptions" optionLabel="label"
+        placeholder="Select a provider" />
+    </div>
+    <BaseInput v-if="!dropdownBased || selectedProvider.value === 'openai'" type="password" placeholder="sk-proj-..."
+      v-model="openaiApiKey">
       <template #label>
         {{ providerConfigs["openai"].displayName }}
+        {{ dropdownBased ? "API Key" : '' }}
       </template>
       <template #helper>
         Get your <ExternalLink href="https://platform.openai.com/account/api-keys">API Key here.</ExternalLink>
       </template>
     </BaseInput>
-    <BaseInput
-      type="password"
-      placeholder="sk-ant-..."
-      v-model="anthropicApiKey"
-    >
+    <BaseInput v-if="!dropdownBased || selectedProvider.value === 'anthropic'" type="password" placeholder="sk-ant-..."
+      v-model="anthropicApiKey">
       <template #label>
         {{ providerConfigs["anthropic"].displayName }}
+        {{ dropdownBased ? "API Key" : '' }}
       </template>
       <template #helper>
         Get your <ExternalLink href="https://console.anthropic.com/settings/keys">API Key here.</ExternalLink>
       </template>
     </BaseInput>
-    <BaseInput
-      type="password"
-      placeholder="AIzaSy..."
-      v-model="googleApiKey"
-    >
+    <BaseInput v-if="!dropdownBased || selectedProvider.value === 'google'" type="password" placeholder="AIzaSy..."
+      v-model="googleApiKey">
       <template #label>
         {{ providerConfigs["google"].displayName }}
+        {{ dropdownBased ? "API Key" : '' }}
       </template>
       <template #helper>
         Get your <ExternalLink href="https://aistudio.google.com/app/apikey">API Key here.</ExternalLink>
       </template>
     </BaseInput>
+    <template v-if="selectedProvider.value === 'openaiCompat'">
+      <BaseInput v-model="openaiCompatApiKey">
+        <template #label>OpenAI Compatible API Key</template>
+      </BaseInput>
+      <BaseInput v-model="openaiCompatBaseUrl">
+        <template #label>Base URL</template>
+      </BaseInput>
+      <BaseInput v-model="openaiCompatHeaders" type="textarea">
+        <template #label>Custom Headers</template>
+      </BaseInput>
+    </template>
+    <template v-if="selectedProvider.value === 'ollama'">
+      <BaseInput v-model="ollamaBaseUrl">
+        <template #label>Ollama Base URL</template>
+      </BaseInput>
+      <BaseInput v-model="ollamaHeaders" type="textarea">
+        <template #label>Custom Headers</template>
+      </BaseInput>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { mapState, mapActions } from "pinia";
+import { mapActions } from "pinia";
 import { useConfigurationStore } from "@/stores/configuration";
-import { providerConfigs } from "@/config";
+import { AvailableProviders, providerConfigs } from "@/config";
 import BaseInput from "./common/BaseInput.vue";
 import ExternalLink from "./common/ExternalLink.vue";
+import Select from 'primevue/select';
 
 export default {
   name: "ApiKeyForm",
@@ -52,27 +71,44 @@ export default {
   components: {
     BaseInput,
     ExternalLink,
+    Select,
   },
 
-  emits: ["change"],
+  emits: ["change", "changeProvider"],
+
+  props: {
+    dropdownBased: Boolean,
+  },
 
   data() {
+    const config = useConfigurationStore();
+
     return {
-      openaiApiKey: "",
-      anthropicApiKey: "",
-      googleApiKey: "",
+      selectedProvider: {
+        label: "" as typeof providerConfigs[AvailableProviders]['displayName'],
+        value: "" as AvailableProviders,
+      },
+      openaiApiKey: config['providers.openai.apiKey'],
+      anthropicApiKey: config['providers.anthropic.apiKey'],
+      googleApiKey: config['providers.google.apiKey'],
+      ollamaBaseUrl: config.providers_ollama_baseUrl,
+      ollamaHeaders: config.providers_ollama_headers,
+      openaiCompatBaseUrl: config.providers_openaiCompat_baseUrl,
+      openaiCompatApiKey: config.providers_openaiCompat_apiKey,
+      openaiCompatHeaders: config.providers_openaiCompat_headers,
     };
   },
 
   computed: {
-    ...mapState(useConfigurationStore, [
-      "providers.openai.apiKey",
-      "providers.anthropic.apiKey",
-      "providers.google.apiKey",
-    ]),
     providerConfigs() {
       return providerConfigs;
     },
+    dropdownOptions() {
+      return Object.keys(providerConfigs).map((provider) => ({
+        label: this.providerConfigs[provider].displayName,
+        value: provider,
+      }));
+    },
   },
 
   watch: {
@@ -88,16 +124,46 @@ export default {
       this.configure("providers.google.apiKey", this.googleApiKey);
       this.$emit("change");
     },
+    ollamaBaseUrl() {
+      this.configure("providers_ollama_baseUrl", this.ollamaBaseUrl);
+      this.$emit("change");
+    },
+    ollamaHeaders() {
+      this.configure("providers_ollama_headers", this.ollamaHeaders);
+      this.$emit("change");
+    },
+    openaiCompatBaseUrl() {
+      this.configure("providers_openaiCompat_baseUrl", this.openaiCompatBaseUrl);
+      this.$emit("change");
+    },
+    openaiCompatApiKey() {
+      this.configure("providers_openaiCompat_apiKey", this.openaiCompatApiKey);
+      this.$emit("change");
+    },
+    openaiCompatHeaders() {
+      this.configure("providers_openaiCompat_headers", this.openaiCompatHeaders);
+      this.$emit("change");
+    },
+    selectedProvider() {
+      this.$emit("changeProvider", this.selectedProvider.value);
+    },
   },
 
   methods: {
     ...mapActions(useConfigurationStore, ["configure"]),
   },
-
-  mounted() {
-    this.openaiApiKey = this["providers.openai.apiKey"];
-    this.anthropicApiKey = this["providers.anthropic.apiKey"];
-    this.googleApiKey = this["providers.google.apiKey"];
-  },
 };
 </script>
+
+<style scoped>
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: flex-start;
+
+  label {
+    align-self: flex-start;
+  }
+}
+</style>
diff --git a/src/components/OnboardingScreen.vue b/src/components/OnboardingScreen.vue
index 1045f15..81cf277 100644
--- a/src/components/OnboardingScreen.vue
+++ b/src/components/OnboardingScreen.vue
@@ -1,17 +1,20 @@
 <template>
   <div class="onboarding-screen">
-    <h1>Welcome to AI Shell</h1>
-    <p>Before we start, please enter your API keys below.</p>
-    <ApiInfo />
+    <h1>Welcome to the AI Shell</h1>
+    <p>
+      Your AI agent can explore your database and (with your permission) write code to
+      answer your questions. Enter the API key below for your preffered agent to get started.
+    </p>
+    <p>
+      <ExternalLink href="https://docs.beekeeperstudio.io/user_guide/sql-ai-shell/">Learn more</ExternalLink>
+      -
+      <ExternalLink href="https://www.youtube.com/watch?v=pAhQUFDeiwc">60s Walkthough Video</ExternalLink>
+    </p>
     <form @submit.prevent="$emit('submit')">
-      <ApiKeyForm @change="changed = true" />
+      <ApiKeyForm dropdown-based @change="changed = true" @change-provider="$event === 'ollama' && (changed = true)" />
       <div class="actions">
-        <button class="btn btn-flat" type="button" @click="$emit('open-provider-config')">
-          <span class="material-symbols-outlined">settings</span>
-          <span>View more providers</span>
-        </button>
-        <button class="btn btn-primary continue-btn" type="submit">
-          {{ changed ? "Continue" : "Skip" }}
+        <button class="btn btn-primary continue-btn" type="submit" :disabled="!changed">
+          Get started
         </button>
       </div>
     </form>
@@ -21,12 +24,15 @@
 <script lang="ts">
 import ApiKeyForm from "@/components/ApiKeyForm.vue";
 import ApiInfo from "@/components/configuration/ApiInfo.vue";
+import ExternalLink from "@/components/common/ExternalLink.vue";
+
 export default {
   emits: ["submit", "open-provider-config"],
 
   components: {
     ApiKeyForm,
     ApiInfo,
+    ExternalLink,
   },
 
   data() {
diff --git a/src/components/common/BaseInput.vue b/src/components/common/BaseInput.vue
index ef74ba8..7ca1f8f 100644
--- a/src/components/common/BaseInput.vue
+++ b/src/components/common/BaseInput.vue
@@ -13,9 +13,9 @@
       <input v-else :type="type" v-bind="$attrs" :id="id" :disabled="disabled" :placeholder="placeholder" :value="modelValue" @input="emitInput"
         @change="emitChange" ref="focusable" />
     </div>
-    <div class="helper" v-if="$slots['helper']">
+    <p class="helper" v-if="$slots['helper']">
       <slot name="helper"></slot>
-    </div>
+    </p>
   </div>
 </template>
 
diff --git a/src/components/common/PromptInput.vue b/src/components/common/PromptInput.vue
index 5d8603b..ba19b08 100644
--- a/src/components/common/PromptInput.vue
+++ b/src/components/common/PromptInput.vue
@@ -3,16 +3,16 @@
     <BaseInput type="textarea" ref="input" v-model="input" @keydown.enter="handleEnterKey" @keydown.up="handleUpArrow"
       @keydown.down="handleDownArrow" placeholder="Type your message here" rows="1" />
     <div class="actions">
-      <div class="model-selection" :class="{ 'please-select-a-model': pleaseSelectAModel }" @click="handleModelSelectionClick">
-        <Dropdown :model-value="selectedModel" placeholder="Select Model" aria-label="Model">
-          <DropdownOption v-for="optionModel in filteredModels" :key="optionModel.id" :value="optionModel.id"
-            :text="optionModel.displayName" :selected="matchModel(optionModel, selectedModel)"
-            @select="$emit('select-model', optionModel)" />
-          <div class="dropdown-separator"></div>
-          <button class="dropdown-option dropdown-action" @click="$emit('manage-models')">
-            Manage models
-          </button>
-        </Dropdown>
+      <div class="model-selection" :class="{ 'please-select-a-model': pleaseSelectAModel }"
+        @click="handleModelSelectionClick">
+        <Menu ref="menu" id="overlay_menu" :model="filteredModels" :popup="true">
+          <template #itemicon="{ item }">
+            <span class="material-symbols-outlined menu-icon">{{ item.icon }}</span>
+          </template>
+        </Menu>
+        <button class="dropdown-trigger" @click="$refs.menu.toggle($event)">
+          {{ selectedModel ? selectedModel.displayName : "Select model" }}
+        </button>
         <div class="please-select-a-model-hint">
           Please select a model
         </div>
@@ -35,14 +35,18 @@ import { mapActions, mapState } from "pinia";
 import { matchModel } from "@/utils";
 import { useInternalDataStore } from "@/stores/internalData";
 import _ from "lodash";
+import Menu from "primevue/menu";
+import type { MenuItem } from "primevue/menuitem";
+import { defineComponent } from "vue";
 
 const maxHistorySize = 50;
 
-export default {
+export default defineComponent({
   components: {
     BaseInput,
     Dropdown,
     DropdownOption,
+    Menu,
   },
 
   emits: ["submit", "stop", "manage-models", "select-model"],
@@ -71,8 +75,34 @@ export default {
 
   computed: {
     ...mapState(useChatStore, {
-      filteredModels(store) {
-        return store.models.filter((m) => m.enabled);
+      filteredModels(store): MenuItem[] {
+        const items: MenuItem[] = [];
+        for (const model of store.models) {
+          if (model.enabled) {
+            const selected = model.id === this.selectedModel?.id;
+            items.push({
+              value: model.id,
+              label: model.displayName,
+              icon: selected ? "check" : "",
+              class: selected ? "selected" : "",
+              command: () => this.$emit('select-model', model),
+            });
+          }
+        }
+        if (items.length === 0) {
+          return [{
+            label: "Manage models",
+            command: () => this.$emit('manage-models'),
+          }]
+        }
+        return [
+          ...items,
+          { separator: true },
+          {
+            label: "Manage models",
+            command: () => this.$emit('manage-models'),
+          }
+        ];
       },
     }),
     input: {
@@ -237,5 +267,5 @@ export default {
       return JSON.parse(inputHistoryStr);
     },
   },
-};
+});
 </script>
diff --git a/src/components/configuration/Configuration.vue b/src/components/configuration/Configuration.vue
index a2e3a5a..94ec4f3 100644
--- a/src/components/configuration/Configuration.vue
+++ b/src/components/configuration/Configuration.vue
@@ -1,16 +1,15 @@
 <template>
-  <div class="configuration">
+  <Dialog class="configuration" @update:visible="$emit('update:visible', $event)" :visible="visible" dismissable-mask
+    :show-header="false" modal>
     <nav>
       <ul>
         <li>
-          <button class="btn btn-flat nav-btn back-btn" @click="$emit('close')">
-            <span class="material-symbols-outlined">keyboard_arrow_left</span>
-            Back
+          <button class="btn btn-flat nav-btn close-btn" @click="$emit('close')">
+            <span class="material-symbols-outlined">close</span>
           </button>
         </li>
-        <li v-for="{id, displayName} in pages" :key="id">
-          <button class="btn btn-flat nav-btn" :class="{ active: page === id }"
-            @click="page = id">
+        <li v-for="{ id, displayName } in pages" :key="id">
+          <button class="btn btn-flat nav-btn" :class="{ active: page === id }" @click="page = id">
             {{ displayName }}
           </button>
         </li>
@@ -24,7 +23,7 @@
       <GeneralConfiguration v-if="page === 'general'" />
       <AboutConfiguration v-if="page === 'about'" />
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts">
@@ -38,6 +37,7 @@ import BaseInput from "../common/BaseInput.vue";
 import GeneralConfiguration from "./GeneralConfiguration.vue";
 import AboutConfiguration from "./AboutConfiguration.vue";
 import { PropType } from "vue";
+import { Dialog } from "primevue";
 
 const pages = [
   {
@@ -65,11 +65,14 @@ export default {
     BaseInput,
     GeneralConfiguration,
     AboutConfiguration,
+    Dialog,
   },
 
-  emits: ["close"],
+  emits: ["close", "update:visible"],
 
   props: {
+    closable: Boolean,
+    visible: Boolean,
     reactivePage: {
       type: String as PropType<PageId>,
       default: "general",
diff --git a/src/main.ts b/src/main.ts
index c382605..d58de63 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,6 +28,7 @@ import sql from "highlight.js/lib/languages/sql";
 import "@beekeeperstudio/plugin/dist/eventForwarder";
 import { createAppEvent } from "@/plugins/appEvent";
 import { VueKeyboardTrapDirectivePlugin } from "@pdanpdan/vue-keyboard-trap";
+import PrimeVue from "primevue/config";
 
 setDebugComms(false);
 
@@ -71,6 +72,7 @@ const appEvent = createAppEvent();
 app.use(pinia);
 app.use(appEvent);
 app.use(VueKeyboardTrapDirectivePlugin, {});
+app.use(PrimeVue);
 app.config.globalProperties.$pluralize = pluralize;
 app.config.globalProperties.$openExternal = openExternal;
 app.mount("#app");
diff --git a/yarn.lock b/yarn.lock
index 6b1a4a1..ca9363f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -432,6 +432,41 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
   integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
 
+"@primeuix/styled@^0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@primeuix/styled/-/styled-0.7.4.tgz#d2108a7fad297dea60d549b2c10ed744dc0cbc0e"
+  integrity sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==
+  dependencies:
+    "@primeuix/utils" "^0.6.1"
+
+"@primeuix/styles@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@primeuix/styles/-/styles-2.0.1.tgz#6d7c4e95f5afa9a1c3a78fc3e5d01186f5741371"
+  integrity sha512-/9bhdkZDP6pY2HH5KfxGEDNGESjDCdCA23God7q8PqW3Xz1Gtz/8IMAEbpNe+O3I03qylRtEjL1n98J1mp+pRQ==
+  dependencies:
+    "@primeuix/styled" "^0.7.4"
+
+"@primeuix/utils@^0.6.1", "@primeuix/utils@^0.6.2":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@primeuix/utils/-/utils-0.6.3.tgz#0d31e41c530fb64dd487ce768f8c244ca1d0872e"
+  integrity sha512-/SLNQSKQ73WbBIsflKVqbpVjCfFYvQO3Sf1LMheXyxh8JqxO4M63dzP56wwm9OPGuCQ6MYOd2AHgZXz+g7PZcg==
+
+"@primevue/core@4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@primevue/core/-/core-4.5.0.tgz#4a457c37e64debc9ae0afbc0963cc312ee1d5cd1"
+  integrity sha512-1wEmhoLg8IsgRuER8Ytxtk3C1RQCfcdjAww3sKamQkqTkWvPm/psn54LzQbnn6u2njvQF66pio3EzrLK3IllNw==
+  dependencies:
+    "@primeuix/styled" "^0.7.4"
+    "@primeuix/utils" "^0.6.2"
+
+"@primevue/icons@4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@primevue/icons/-/icons-4.5.0.tgz#5cedde7133f6ee492adebf708c954ad8a5140a00"
+  integrity sha512-KVjtxAiTnyVmXhrjMlnDJqL6p33rnI4O5RSQbg7TwnFVXYaanVmjHZOQ2uq2euImleaRYeePuXBHGMPEGxOxYg==
+  dependencies:
+    "@primeuix/utils" "^0.6.2"
+    "@primevue/core" "4.5.0"
+
 "@rollup/rollup-android-arm-eabi@4.37.0":
   version "4.37.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.37.0.tgz#9bedc746a97fe707154086365f269ced92ff4aa9"
@@ -1913,6 +1948,17 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+primevue@^4.4.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/primevue/-/primevue-4.5.0.tgz#2f7caacc57ecc86dcc2b6c7dd69d686ab227cfba"
+  integrity sha512-6Na39OPTNg03LE5gHxWMXrspbBC+sEKS/270qOg2Q2CzF3gcxZagESWRAA0IDRva/vaycElL9b8NUosFm41zIg==
+  dependencies:
+    "@primeuix/styled" "^0.7.4"
+    "@primeuix/styles" "^2.0.1"
+    "@primeuix/utils" "^0.6.2"
+    "@primevue/core" "4.5.0"
+    "@primevue/icons" "4.5.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"

From be8af7d93548d7d6fc88ef4fface4040e959ee24 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 29 Nov 2025 20:05:59 +0700
Subject: [PATCH 2/5] remove unused components

---
 src/components/ChatInterface.vue         |   4 -
 src/components/common/Dropdown.vue       | 153 -----------------------
 src/components/common/DropdownOption.vue |  45 -------
 src/components/common/PromptInput.vue    |   4 -
 tests/components/PromptInput.spec.ts     |   6 -
 5 files changed, 212 deletions(-)
 delete mode 100644 src/components/common/Dropdown.vue
 delete mode 100644 src/components/common/DropdownOption.vue

diff --git a/src/components/ChatInterface.vue b/src/components/ChatInterface.vue
index 2fea95b..2742284 100644
--- a/src/components/ChatInterface.vue
+++ b/src/components/ChatInterface.vue
@@ -78,8 +78,6 @@
 <script lang="ts">
 import { useAI } from "@/composables/ai";
 import { useChatStore, Model } from "@/stores/chat";
-import Dropdown from "./common/Dropdown.vue";
-import DropdownOption from "./common/DropdownOption.vue";
 import _ from "lodash";
 import ToolMessage from "@/components/messages/ToolMessage.vue";
 import Markdown from "@/components/messages/Markdown.vue";
@@ -96,8 +94,6 @@ export default {
   name: "ChatInterface",
 
   components: {
-    Dropdown,
-    DropdownOption,
     Message,
     ToolMessage,
     Markdown,
diff --git a/src/components/common/Dropdown.vue b/src/components/common/Dropdown.vue
deleted file mode 100644
index 4af7f95..0000000
--- a/src/components/common/Dropdown.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <div class="dropdown-container">
-    <button
-      ref="trigger"
-      class="dropdown-trigger"
-      :aria-label="ariaLabel"
-      @click="toggleDropdown"
-    >
-      <slot name="trigger">{{ displayText }}</slot>
-    </button>
-    <Teleport to="body">
-      <div
-        v-if="isOpen"
-        v-kbd-trap
-        ref="dropdown"
-        class="dropdown-popover"
-        @click="handleDropdownClick"
-      >
-        <slot></slot>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType } from "vue";
-import { Model } from "@/stores/chat";
-
-export default {
-  name: "Dropdown",
-  props: {
-    modelValue: {
-      type: Object as PropType<Model>,
-      default: null,
-    },
-    placeholder: {
-      type: String,
-      default: "Select option",
-    },
-    ariaLabel: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    displayText() {
-      return this.modelValue?.id || this.placeholder;
-    },
-  },
-  data() {
-    return {
-      isOpen: false,
-    };
-  },
-  mounted() {
-    document.addEventListener('click', this.handleOutsideClick);
-    document.addEventListener('keydown', this.handleKeydown);
-  },
-  
-  beforeUnmount() {
-    document.removeEventListener('click', this.handleOutsideClick);
-    document.removeEventListener('keydown', this.handleKeydown);
-  },
-  
-  methods: {
-    toggleDropdown() {
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.$nextTick(() => {
-          this.positionDropdown();
-        });
-      }
-    },
-    
-    close() {
-      this.isOpen = false;
-    },
-    
-    handleDropdownClick(event: Event) {
-      const target = event.target as HTMLElement;
-      // Close dropdown when clicking on options or actions
-      if (target.closest('.dropdown-option') || target.closest('.dropdown-action')) {
-        this.close();
-      }
-    },
-    
-    handleOutsideClick(event: Event) {
-      if (this.isOpen) {
-        const target = event.target as HTMLElement;
-        if (!this.$el.contains(target) && !this.$refs.dropdown?.contains(target)) {
-          this.close();
-        }
-      }
-    },
-    
-    handleKeydown(event: KeyboardEvent) {
-      if (event.key === 'Escape' && this.isOpen) {
-        this.close();
-      }
-    },
-    
-    positionDropdown() {
-      const trigger = this.$refs.trigger as HTMLElement;
-      const dropdown = this.$refs.dropdown as HTMLElement;
-      
-      if (!trigger || !dropdown) return;
-      
-      const triggerRect = trigger.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      
-      let left = triggerRect.left;
-      let top = triggerRect.bottom + 5;
-      
-      // Calculate available space
-      const spaceBelow = viewportHeight - triggerRect.bottom - 20; // 20px margin
-      const spaceAbove = triggerRect.top - 20; // 20px margin
-      
-      // Set max height to prevent overflow
-      const maxHeight = Math.max(spaceBelow, spaceAbove);
-      dropdown.style.maxHeight = `${maxHeight}px`;
-      dropdown.style.overflowY = 'auto';
-      
-      // Get updated dropdown dimensions after setting max-height
-      const dropdownRect = dropdown.getBoundingClientRect();
-      
-      if (dropdownRect.height > spaceBelow && spaceAbove > spaceBelow) {
-        // Position above trigger
-        top = triggerRect.top - dropdownRect.height - 5;
-        dropdown.style.maxHeight = `${spaceAbove}px`;
-      }
-      
-      // Check horizontal positioning
-      if (left + dropdownRect.width > viewportWidth) {
-        left = triggerRect.right - dropdownRect.width;
-      }
-      
-      if (left < 0) {
-        left = 10;
-      }
-      
-      // Final bounds check
-      if (top < 10) {
-        top = 10;
-      }
-      
-      dropdown.style.left = `${left}px`;
-      dropdown.style.top = `${top}px`;
-    },
-  },
-};
-</script>
-
diff --git a/src/components/common/DropdownOption.vue b/src/components/common/DropdownOption.vue
deleted file mode 100644
index c776810..0000000
--- a/src/components/common/DropdownOption.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <button
-    class="dropdown-option"
-    :class="{ selected, disabled }"
-    :disabled="disabled"
-    @click="handleClick"
-  >
-    <span class="option-content">
-      <slot>{{ text }}</slot>
-    </span>
-    <span v-if="selected" class="selected-indicator material-symbols-outlined">check</span>
-  </button>
-</template>
-
-<script lang="ts">
-export default {
-  name: "DropdownOption",
-  props: {
-    value: {
-      type: [String, Number, Object],
-      default: null,
-    },
-    text: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    handleClick() {
-      if (!this.disabled) {
-        this.$emit('select', this.value);
-      }
-    },
-  },
-};
-</script>
-
diff --git a/src/components/common/PromptInput.vue b/src/components/common/PromptInput.vue
index ba19b08..faea374 100644
--- a/src/components/common/PromptInput.vue
+++ b/src/components/common/PromptInput.vue
@@ -28,8 +28,6 @@
 <script lang="ts">
 import { PropType } from "vue";
 import BaseInput from "./BaseInput.vue";
-import Dropdown from "./Dropdown.vue";
-import DropdownOption from "./DropdownOption.vue";
 import { Model, useChatStore } from "@/stores/chat";
 import { mapActions, mapState } from "pinia";
 import { matchModel } from "@/utils";
@@ -44,8 +42,6 @@ const maxHistorySize = 50;
 export default defineComponent({
   components: {
     BaseInput,
-    Dropdown,
-    DropdownOption,
     Menu,
   },
 
diff --git a/tests/components/PromptInput.spec.ts b/tests/components/PromptInput.spec.ts
index 224b3f1..f35b9f3 100644
--- a/tests/components/PromptInput.spec.ts
+++ b/tests/components/PromptInput.spec.ts
@@ -10,12 +10,6 @@ function buildPromptInput() {
         id: "very-good-model",
       },
     },
-    global: {
-      stubs: {
-        Dropdown: true,
-        DropdownOption: true,
-      },
-    },
   });
   const textarea = wrapper.find("textarea");
 

From 686540695a81bed2745f9f38440ce3e5254d2480 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 29 Nov 2025 20:09:48 +0700
Subject: [PATCH 3/5] fix test

---
 tests/components/PromptInput.spec.ts | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/tests/components/PromptInput.spec.ts b/tests/components/PromptInput.spec.ts
index f35b9f3..8675acf 100644
--- a/tests/components/PromptInput.spec.ts
+++ b/tests/components/PromptInput.spec.ts
@@ -1,8 +1,25 @@
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
 import PromptInput from "../../src/components/common/PromptInput.vue";
 
+// Mock the stores before importing the component
+vi.mock("../../src/stores/chat", () => ({
+  useChatStore: vi.fn(() => ({
+    models: [],
+  })),
+}));
+
+vi.mock("../../src/stores/internalData", () => ({
+  useInternalDataStore: vi.fn(() => ({
+    setInternal: vi.fn(),
+  })),
+}));
+
 function buildPromptInput() {
+  const pinia = createPinia();
+  setActivePinia(pinia);
+
   const wrapper = mount(PromptInput, {
     props: {
       storageKey: "test-key",
@@ -10,7 +27,11 @@ function buildPromptInput() {
         id: "very-good-model",
       },
     },
+    global: {
+      plugins: [pinia],
+    },
   });
+
   const textarea = wrapper.find("textarea");
 
   return {

From 02ece5e3fd90dc6b14fab43ca10bcd87d9987f77 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Sat, 29 Nov 2025 21:25:21 +0700
Subject: [PATCH 4/5] add more info

---
 src/assets/styles/pages/_chat-interface.scss |  7 ++++++-
 src/components/ChatInterface.vue             | 21 +++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/pages/_chat-interface.scss b/src/assets/styles/pages/_chat-interface.scss
index bbcb9bc..a4c7b72 100644
--- a/src/assets/styles/pages/_chat-interface.scss
+++ b/src/assets/styles/pages/_chat-interface.scss
@@ -71,7 +71,12 @@
 
     .plugin-title {
       text-align: center;
-      margin-bottom: 2rem;
+      margin-bottom: 1rem;
+      max-width: 32rem;
+
+      p {
+        color: var(--text);
+      }
     }
 
     .chat-messages {
diff --git a/src/components/ChatInterface.vue b/src/components/ChatInterface.vue
index 2742284..3b32d76 100644
--- a/src/components/ChatInterface.vue
+++ b/src/components/ChatInterface.vue
@@ -11,7 +11,14 @@
           <span class="title-popup">Settings</span>
         </button>
       </div>
-      <h1 class="plugin-title">AI Shell</h1>
+      <div class="plugin-title">
+        <h1>AI Shell</h1>
+        <p>
+          The AI Shell can see your table schemas, and (with your permission)
+          run {{ sqlOrCode }} to answer your questions.
+          <ExternalLink href="https://docs.beekeeperstudio.io/user_guide/sql-ai-shell/">Learn more</ExternalLink>.
+        </p>
+      </div>
       <div class="chat-messages">
         <message
           v-for="(message, index) in messages"
@@ -89,6 +96,8 @@ import { RootBinding } from "@/plugins/appEvent";
 import { useInternalDataStore } from "@/stores/internalData";
 import BaseInput from "@/components/common/BaseInput.vue";
 import PromptInput from "@/components/common/PromptInput.vue";
+import { getConnectionInfo } from "@beekeeperstudio/plugin";
+import ExternalLink from "@/components/common/ExternalLink.vue";
 
 export default {
   name: "ChatInterface",
@@ -99,6 +108,7 @@ export default {
     Markdown,
     BaseInput,
     PromptInput,
+    ExternalLink,
   },
 
   emits: ["manage-models", "open-configuration"],
@@ -140,6 +150,7 @@ export default {
       isAtBottom: true,
       showFullError: false,
       noModelError: false,
+      sqlOrCode: "SQL",
     };
   },
 
@@ -221,6 +232,14 @@ export default {
   },
 
   async mounted() {
+    getConnectionInfo().then((connection) => {
+      if (connection.databaseType === "mongodb"
+        || connection.connectionType === "surrealdb"
+        || connection.connectionType === "redis") {
+        this.sqlOrCode = "Code";
+      }
+    });
+
     const scrollContainer = this.$refs.scrollContainerRef as HTMLElement;
     scrollContainer.addEventListener("scroll", () => {
       // Calculate if we're near bottom (within 50px of bottom)

From 534b7eb80bc88348213807fab9fc77889f299418 Mon Sep 17 00:00:00 2001
From: Mohammad Azmi <mohammad.azmi.id@gmail.com>
Date: Mon, 8 Dec 2025 16:38:42 +0700
Subject: [PATCH 5/5] fix duration

---
 src/components/OnboardingScreen.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OnboardingScreen.vue b/src/components/OnboardingScreen.vue
index 81cf277..1d610d8 100644
--- a/src/components/OnboardingScreen.vue
+++ b/src/components/OnboardingScreen.vue
@@ -8,7 +8,7 @@
     <p>
       <ExternalLink href="https://docs.beekeeperstudio.io/user_guide/sql-ai-shell/">Learn more</ExternalLink>
       -
-      <ExternalLink href="https://www.youtube.com/watch?v=pAhQUFDeiwc">60s Walkthough Video</ExternalLink>
+      <ExternalLink href="https://www.youtube.com/watch?v=pAhQUFDeiwc">90s Walkthough Video</ExternalLink>
     </p>
     <form @submit.prevent="$emit('submit')">
       <ApiKeyForm dropdown-based @change="changed = true" @change-provider="$event === 'ollama' && (changed = true)" />