Merge pull request #63 from beekeeper-studio/fix/keyboard-focus-and-onboarding-screen

Fix keyboard focus and onboarding screen UI

Author: azmy60

package.json

@@ -22,6 +22,7 @@
     "@beekeeperstudio/plugin": "^1.4.0",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",
+    "@pdanpdan/vue-keyboard-trap": "^1.2.0",
     "ai": "^4.3.16",
     "highlight.js": "^11.11.1",
     "langchain": "^0.3.19",

src/App.vue

@@ -4,13 +4,20 @@
       <h1>AI Shell</h1>
       <div class="progress-bar"></div>
     </div>
-    <OnboardingScreen v-else-if="page === 'onboarding'" @submit="submitOnboardingScreen" />
-    <ChatInterface v-else-if="page === 'chat-interface'" :initialMessages="messages" :openaiApiKey="openaiApiKey"
+    <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 }">
+    <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>
   </div>
 </template>
 
@@ -27,7 +34,7 @@ import Configuration, {
 import OnboardingScreen from "./components/OnboardingScreen.vue";
 import { getData, notify } from "@beekeeperstudio/plugin";
 
-type Page = "starting" | "onboarding" | "chat-interface";
+type Page = "starting" | "chat-interface";
 
 export default {
   components: {
@@ -39,6 +46,7 @@ export default {
   data() {
     return {
       page: "starting" as Page,
+      showOnboarding: false,
       showConfiguration: false,
       error: "" as unknown,
       showLoading: false,
@@ -59,13 +67,12 @@ export default {
       await this.initialize();
       await this.$nextTick();
 
-      if (this.isFirstTimeUser && this.apiKeyExists) {
-        this.page = "chat-interface";
-      } else if (this.isFirstTimeUser) {
-        this.page = "onboarding";
-      } else {
-        this.page = "chat-interface";
+      if (this.isFirstTimeUser && !this.apiKeyExists) {
+        this.showOnboarding = true;
       }
+
+      this.page = "chat-interface";
+
     } catch (e) {
       this.showConfiguration = true;
       this.error = e;
@@ -94,14 +101,25 @@ export default {
     ...mapActions(useConfigurationStore, ["configure"]),
     ...mapActions(useInternalDataStore, ["setInternal"]),
     ...mapActions(useChatStore, ["initialize"]),
-    submitOnboardingScreen() {
+    closeOnboardingScreen() {
+      this.showOnboarding = false;
       this.page = "chat-interface";
       this.setInternal("isFirstTimeUser", false);
     },
-    handleManageModels() {
+    async closeOnboardingScreenAndOpenProviderConfig() {
+      this.closeOnboardingScreen();
+      this.openModelsConfig();
+      await this.$nextTick();
+      const apiKeys = document.querySelector("#providers-configuration-api-keys");
+      apiKeys?.scrollIntoView();
+    },
+    openModelsConfig() {
       this.configurationPage = "models";
       this.showConfiguration = true;
     },
+    handleManageModels() {
+      this.openModelsConfig();
+    },
     handleOpenConfiguration() {
       this.configurationPage = "general";
       this.showConfiguration = true;

src/assets/styles/_base.scss

@@ -64,5 +64,5 @@ a {
 }
 
 :focus-visible {
-  outline-color: transparent;
+  outline: none;
 }

src/assets/styles/_theme.scss

@@ -13,4 +13,6 @@
   --theme-scrollbar-thumb: color-mix(in srgb, var(--theme-base) 20%, var(--theme-bg) 80%);
   --text-muted: color-mix(in srgb, var(--theme-base) 20%, var(--theme-bg) 80%);
   --text-muted-2: color-mix(in srgb, var(--theme-base) 30%, var(--theme-bg) 70%);
+  --focus-visible-outline-color: color-mix(in srgb, var(--theme-base) 50%, var(--theme-bg));
+  --focus-visible-outline: var(--focus-visible-outline-color) auto 1px;
 }

src/assets/styles/components/_all.scss

@@ -8,3 +8,5 @@
 @use "switch";
 @use "toggle-form-area";
 @use "message";
+@use "external-link";
+@use "prompt-input";

src/assets/styles/components/_api-info.scss

@@ -1,6 +1,16 @@
 .api-info {
   font-size: 0.85rem;
-  color: var(--text-dark);
-  opacity: 0.7;
-  margin-bottom: 0.5rem;
+  color: hsl(from var(--brand-info) h s calc(l + 5));
+  margin-block: 0.5rem;
+  background-color: rgb(from var(--theme-base) r g b / 3.5%);
+  display: flex;
+  text-align: left;
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+
+  .icon {
+    font-size: 1.25rem;
+    display: block;
+    margin-right: 0.75rem;
+  }
 }

src/assets/styles/components/_base-input.scss

@@ -2,7 +2,7 @@
   display: flex;
   gap: 0.5rem;
   flex-direction: column;
-  overflow: auto;
+  // overflow: auto;
   text-align: left;
 
   label {
@@ -32,6 +32,10 @@
       font-size: 0.9rem;
       color: var(--text-dark);
       overflow: hidden;
+
+      &:focus-visible {
+        outline: var(--focus-visible-outline);
+      }
     }
   }
 
@@ -94,6 +98,10 @@
       &[aria-checked="true"] .slider:before {
         transform: translateX(1em);
       }
+
+      &:focus-visible {
+        outline: var(--focus-visible-outline);
+      }
     }
 
     .slider {

src/assets/styles/components/_buttons.scss

@@ -84,6 +84,11 @@ $btn-border-radius: 8px;
   &:hover .title-popup {
     animation: fadeInAfterDelay 0.8s forwards;
   }
+
+  >.material-symbols-outlined {
+    font-size: 1.5em;
+    margin-right: 0.25rem;
+  }
 }
 
 @keyframes fadeInAfterDelay {

src/assets/styles/components/_dropdown.scss

@@ -4,6 +4,10 @@
 
 .dropdown-trigger {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--focus-visible-outline);
+  }
 }
 
 .dropdown-popover {
@@ -42,7 +46,7 @@
     font-size: 0.8rem;
   }
 
-  &:hover:not(.disabled) {
+  &:hover:not(.disabled), &:focus-visible {
     background-color: rgb(from var(--theme-base) r g b / 5%);
   }
 

src/assets/styles/components/_external-link.scss

@@ -0,0 +1,5 @@
+.external-link {
+  &:focus-visible {
+    outline: var(--focus-visible-outline);
+  }
+}