Support custom instructions for workspace connection

package.json

@@ -20,7 +20,7 @@
     "@ai-sdk/openai": "^3.0.8",
     "@ai-sdk/openai-compatible": "^2.0.4",
     "@ai-sdk/vue": "^3.0.28",
-    "@beekeeperstudio/plugin": "^1.6.0",
+    "@beekeeperstudio/plugin": "^1.7.1-beta.2",
     "@beekeeperstudio/ui-kit": "0.3.1",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",

src/App.vue

@@ -6,7 +6,7 @@
     </div>
     <ChatInterface v-if="page === 'chat-interface'" :initialMessages="messages" @manage-models="handleManageModels"
       @open-configuration="handleOpenConfiguration" />
-    <Configuration v-model:visible="showConfiguration" :reactivePage="configurationPage" @close="closeConfiguration" />
+    <Configuration v-model:visible="showConfiguration" :reactivePage="configurationPage" />
     <Dialog modal :visible="showOnboarding" :closable="false" :draggable="false">
       <OnboardingScreen @submit="closeOnboardingScreen" />
     </Dialog>
@@ -24,7 +24,7 @@ import Configuration, {
   PageId as ConfigurationPageId,
 } from "@/components/configuration/Configuration.vue";
 import OnboardingScreen from "./components/OnboardingScreen.vue";
-import { getData, log } from "@beekeeperstudio/plugin";
+import { appStorage, log } from "@beekeeperstudio/plugin";
 import { Dialog } from "primevue";
 
 type Page = "starting" | "chat-interface";
@@ -104,9 +104,6 @@ export default {
       this.configurationPage = "general";
       this.showConfiguration = true;
     },
-    closeConfiguration() {
-      this.showConfiguration = false;
-    },
     // In Beekeeper Studio v5.3.3 and lower, the requests from plugins are
     // sometimes not responded due to a race condition.
     // See https://github.com/beekeeper-studio/beekeeper-studio/pull/3473
@@ -129,10 +126,10 @@ export default {
         window.location.reload();
       }, reloadDelay);
       try {
-        await getData();
+        await appStorage.getItem("test");
       } catch (e) {
       } finally {
-        // Cancel reload if getData() succeeds or fails quickly
+        // Cancel reload if it succeeds or fails quickly
         clearTimeout(reloadTimer);
       }
     },

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

@@ -480,7 +480,7 @@
       border: none;
       border-radius: 0.3rem;
       background-color: transparent;
-      color: var(--text-dark);
+      color: var(--text);
       font-weight: normal;
 
       &:hover {

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

@@ -51,7 +51,7 @@
     font-weight: normal;
     font-size: 0.831rem;
     color: rgb(from var(--theme-base) r g b / 0.77);
-    padding-left: 0.75rem;
+    padding-inline: 0.75rem;
     border-radius: 6px;
 
     &:hover {

src/components/ChatInterface.vue

@@ -368,5 +368,6 @@ export default {
   margin-top: 0.5rem;
   text-align: right;
   color: var(--text);
+  font-size: 0.9rem;
 }
 </style>

src/components/common/BaseInput.vue

@@ -55,6 +55,18 @@
     >
       <slot name="helper"></slot>
     </p>
+    <div class="actions" v-if="showActions">
+      <button class="btn btn-small btn-flat" @click="$emit('discard')">
+        Discard
+      </button>
+      <button class="btn btn-small btn-primary" @click="$emit('save')">
+        Save
+      </button>
+      <span class="unsaved-error" v-if="showUnsavedError">
+        <span class="material-symbols-outlined">info</span>
+        Unsaved changes
+      </span>
+    </div>
   </div>
 </template>
 
@@ -85,9 +97,12 @@ export default {
       type: String as PropType<"before-input" | "after-input">,
       default: "after-input",
     },
+    /** If `showActions`, we'll show save and discard buttons. */
+    showActions: Boolean,
+    showUnsavedError: Boolean,
   },
 
-  emits: ["update:modelValue", "input", "change", "click"],
+  emits: ["update:modelValue", "input", "change", "click", "save", "discard"],
 
   // FIXME: Strip this out for now cause vue-tsc isn't happy
   // See https://github.com/vuejs/language-tools/issues/5069
@@ -117,10 +132,30 @@ export default {
 [data-position="before-input"] {
   margin-bottom: 0.5rem;
 }
+
 .form-group:not(.switch) [data-position="after-input"] {
   margin-top: 0.35rem;
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  padding-top: 0.5rem;
+  gap: 0.5rem;
+  font-size: 0.831rem;
+}
+
+.unsaved-error {
+  color: var(--brand-danger);
+  display: flex;
+  align-items: center;
+
+  .material-symbols-outlined {
+    font-size: 1em;
+    margin-right: 0.5ch;
+  }
+}
+
 label :deep(.material-symbols-outlined) {
   padding-left: 0.25em;
   font-size: 1em;

src/components/configuration/Configuration.vue

@@ -1,36 +1,57 @@
 <template>
-  <Dialog class="configuration" @update:visible="$emit('update:visible', $event)" :visible="visible" dismissable-mask
-    :show-header="false" modal>
+  <Dialog
+    modal
+    dismissable-mask
+    close-on-escape
+    class="configuration"
+    :visible="visible"
+    :show-header="false"
+    @update:visible="updateVisible"
+  >
     <nav>
       <ul>
         <li>
-          <button class="btn btn-flat nav-btn close-btn" @click="$emit('close')">
+          <button
+            class="btn btn-flat nav-btn close-btn"
+            @click="updateVisible(false)"
+          >
             <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">
+          <button
+            class="btn btn-flat nav-btn"
+            :class="{ active: page === id }"
+            @click="page = id"
+          >
             {{ displayName }}
           </button>
         </li>
       </ul>
     </nav>
     <div class="content" :class="page">
-      <GeneralConfiguration v-if="page === 'general'" />
-      <ModelsConfiguration v-if="page === 'models'"/>
-      <ProvidersConfiguration v-if="page === 'providers'"/>
-      <AboutConfiguration v-if="page === 'about'" />
+      <div v-if="storeStatus === 'loading'">Loading...</div>
+      <div v-else-if="storeStatus === 'error'">Error: {{ storeError }}</div>
+      <GeneralConfiguration
+        v-else-if="page === 'general'"
+        @update:dirty="isDirty = $event"
+      />
+      <ModelsConfiguration v-else-if="page === 'models'" />
+      <ProvidersConfiguration v-else-if="page === 'providers'" />
+      <AboutConfiguration v-else-if="page === 'about'" />
     </div>
   </Dialog>
 </template>
 
 <script lang="ts">
+import GeneralConfiguration from "./GeneralConfiguration.vue";
 import ModelsConfiguration from "@/components/configuration/ModelsConfiguration.vue";
 import ProvidersConfiguration from "@/components/configuration/ProvidersConfiguration.vue";
-import GeneralConfiguration from "./GeneralConfiguration.vue";
 import AboutConfiguration from "./AboutConfiguration.vue";
 import { PropType } from "vue";
 import { Dialog } from "primevue";
+import { mapState } from "pinia";
+import { useConfigurationStore } from "@/stores/configuration";
 
 const pages = [
   {
@@ -51,7 +72,7 @@ const pages = [
   },
 ] as const;
 
-export type PageId = typeof pages[number]["id"];
+export type PageId = (typeof pages)[number]["id"];
 
 export default {
   name: "Configuration",
@@ -78,17 +99,29 @@ export default {
   data() {
     return {
       page: this.reactivePage,
+      isDirty: false,
     };
   },
 
   computed: {
     pages: () => pages,
+    ...mapState(useConfigurationStore, ["storeStatus", "storeError"]),
   },
 
   watch: {
     reactivePage() {
       this.page = this.reactivePage;
     },
   },
+
+  methods: {
+    updateVisible(visible: boolean) {
+      if (!visible && this.isDirty) {
+        this.trigger("dialogClosePrevented");
+        return;
+      }
+      this.$emit("update:visible", visible);
+    }
+  }
 };
 </script>