Merge pull request #30 from beekeeper-studio/upgrade-ai-sdk-v5

upgrade ai sdk to v5

Author: azmy60

.nvmrc

@@ -0,0 +1 @@
+v22.21.1

package.json

@@ -15,27 +15,29 @@
     "test:run": "vitest run"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^1.2.12",
-    "@ai-sdk/google": "^1.2.22",
-    "@ai-sdk/openai": "^1.3.22",
-    "@ai-sdk/vue": "^1.2.12",
+    "@ai-sdk/amazon-bedrock": "^3.0.33",
+    "@ai-sdk/anthropic": "^2.0.25",
+    "@ai-sdk/google": "^2.0.18",
+    "@ai-sdk/openai": "^2.0.46",
+    "@ai-sdk/openai-compatible": "^1.0.20",
+    "@ai-sdk/vue": "^2.0.62",
     "@beekeeperstudio/plugin": "^1.4.0",
     "@langchain/core": "^0.3.61",
     "@material-symbols/font-400": "^0.31.2",
+    "ai": "^5.0.101",
     "@pdanpdan/vue-keyboard-trap": "^1.2.0",
-    "ai": "^4.3.16",
     "highlight.js": "^11.11.1",
     "langchain": "^0.3.19",
     "lodash": "^4.17.21",
     "marked": "^15.0.12",
     "marked-highlight": "^2.2.1",
-    "ollama-ai-provider": "^1.2.0",
+    "ollama-ai-provider-v2": "^1.3.1",
     "pinia": "^3.0.2",
     "pluralize": "^8.0.0",
     "sql-query-identifier": "^2.8.0",
     "typeface-roboto": "^0.0.75",
     "vue": "^3.4.21",
-    "zod": "^3.25.32"
+    "zod": "^4.1.8"
   },
   "devDependencies": {
     "@beekeeperstudio/vite-plugin": "^1.0.3",

src/assets/styles/components/_message.scss

@@ -200,4 +200,33 @@
     font-style: italic;
     --theme-text-message-system: var(--text-muted);
   }
+
+  [data-tool-state="input-streaming"] {
+    &>.markdown code .hljs-comment::after {
+      content: "";
+      animation: dots 2.5s steps(4, end) infinite;
+    }
+
+    @keyframes dots {
+      0% {
+        content: "";
+      }
+
+      25% {
+        content: ".";
+      }
+
+      50% {
+        content: "..";
+      }
+
+      75% {
+        content: "...";
+      }
+
+      100% {
+        content: "";
+      }
+    }
+  }
 }

src/components/ChatInterface.vue

@@ -81,7 +81,6 @@ 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";
 import Message from "@/components/messages/Message.vue";
 import { Message as MessageType } from "ai";
@@ -99,7 +98,6 @@ export default {
     Dropdown,
     DropdownOption,
     Message,
-    ToolMessage,
     Markdown,
     BaseInput,
     PromptInput,
@@ -118,12 +116,7 @@ export default {
   },
 
   setup(props) {
-    const ai = useAI({
-      initialMessages: props.initialMessages,
-      anthropicApiKey: props.anthropicApiKey,
-      openaiApiKey: props.openaiApiKey,
-      googleApiKey: props.googleApiKey,
-    });
+    const ai = useAI({ initialMessages: props.initialMessages });
 
     return {
       send: ai.send,
@@ -254,10 +247,10 @@ export default {
       this.noModelError = false;
 
       if (this.askingPermission) {
-        this.rejectPermission(input);
-      } else {
-        this.send(input, this.getSendOptions());
+        this.rejectPermission();
       }
+
+      this.send(input, this.getSendOptions());
     },
 
     async reload() {

src/components/messages/Message.vue

@@ -7,9 +7,13 @@
           <template v-if="message.role === 'user'">{{ part.text }}</template>
           <markdown v-else :content="part.text" />
         </template>
-        <tool-message v-else-if="part.type === 'tool-invocation'" :toolCall="part.toolInvocation" :askingPermission="pendingToolCallIds.includes(part.toolInvocation.toolCallId)
-          " @accept="$emit('accept-permission', part.toolInvocation.toolCallId)"
-          @reject="$emit('reject-permission', part.toolInvocation.toolCallId)" />
+        <tool-message
+          v-else-if="isToolUIPart(part)"
+          :toolCall="part"
+          :askingPermission="pendingToolCallIds.includes(part.toolCallId)"
+          @accept="$emit('accept-permission', part.toolCallId)"
+          @reject="$emit('reject-permission', part.toolCallId)"
+        />
       </template>
       <span v-if="isEmpty">
         Empty response
@@ -30,7 +34,7 @@
 
 <script lang="ts">
 import { PropType } from "vue";
-import { UIMessage } from "ai";
+import { isToolUIPart, UIMessage } from "ai";
 import Markdown from "@/components/messages/Markdown.vue";
 import ToolMessage from "@/components/messages/ToolMessage.vue";
 import { clipboard } from "@beekeeperstudio/plugin";
@@ -72,12 +76,11 @@ export default {
       for (const part of parts) {
         if (part.type === "text") {
           text += `${part.text}\n\n`;
-        } else if (
-          part.type === "tool-invocation" &&
-          part.toolInvocation.toolName === "run_query" &&
-          part.toolInvocation.args?.query
-        ) {
-          text += "```sql\n" + part.toolInvocation.args.query + "\n```\n\n";
+        } else if (part.type === "tool-run_query") {
+          const query: string | undefined = part.input?.query;
+          if (query) {
+            text += "```sql\n" + query + "\n```\n\n";
+          }
         }
       }
       return text.trim();
@@ -88,6 +91,7 @@ export default {
   },
 
   methods: {
+    isToolUIPart,
     async handleCopyClick() {
       await clipboard.writeText(this.text);
       this.copied = true;

src/components/messages/ToolMessage.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="tool" :data-tool-name="toolCall.toolName" :data-tool-state="toolCall.state"
+  <div class="tool" :data-tool-name="name" :data-tool-state="toolCall.state"
     :data-tool-empty-result="isEmptyResult" :data-tool-error="!!error">
     <div class="tool-name">{{ displayName }}</div>
-    <markdown v-if="toolCall.toolName === 'run_query'" :content="'```sql\n' + toolCall.args.query + '\n```'" />
+    <markdown v-if="name === 'run_query'" :content="'```sql\n' +
+      (toolCall.input?.query ||
+        (toolCall.state === 'output-available' ? '(empty)' : '-- Generating')) +
+      '\n```'
+      " />
     <div v-if="askingPermission">
       {{
-        toolCall.toolName === "run_query"
+        name === "run_query"
           ? "Do you want to run this query?"
           : "Do you want to proceed?"
       }}
@@ -22,25 +26,25 @@
     </div>
     <div class="tool-error error" v-if="error" v-text="error" />
     <div class="tool-result" v-else-if="data">
-      <template v-if="toolCall.toolName === 'get_connection_info'">
+      <template v-if="name === 'get_connection_info'">
         {{ data.connectionType }}
       </template>
-      <template v-if="toolCall.toolName === 'get_tables'">
+      <template v-if="name === 'get_tables'">
         {{ data.length }}
         {{ $pluralize("table", data.length) }}
       </template>
-      <template v-if="toolCall.toolName === 'get_columns'">
+      <template v-if="name === 'get_columns'">
         {{ data.length }}
         {{ $pluralize("column", data.length) }}
       </template>
-      <run-query-result v-else-if="toolCall.toolName === 'run_query' && data" :data="data" />
+      <run-query-result v-else-if="name === 'run_query' && data" :data="data" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Markdown from "@/components/messages/Markdown.vue";
-import { ToolInvocation } from "ai";
+import { type ToolUIPart } from "ai";
 import { PropType } from "vue";
 import { safeJSONStringify } from "@/utils";
 import RunQueryResult from "@/components/messages/tool/RunQueryResult.vue";
@@ -52,16 +56,20 @@ export default {
   props: {
     askingPermission: Boolean,
     toolCall: {
-      type: Object as PropType<ToolInvocation>,
+      type: Object as PropType<ToolUIPart>,
       required: true,
     },
+    args: null,
   },
   emits: ["accept", "reject"],
   computed: {
+    name() {
+      return this.toolCall.type.replace("tool-", "");
+    },
     isEmptyResult() {
-      if (this.toolCall.state === "result") {
+      if (this.toolCall.state === "output-available") {
         return _.isEmpty(
-          this.toolCall.toolName === "run_query"
+          this.name === "run_query"
             ? this.data.results?.[0]?.rows
             : this.data,
         );
@@ -84,26 +92,35 @@ export default {
       return "";
     },
     data() {
+      if (this.toolCall.state !== "output-available") {
+        return null;
+      }
+
       try {
-        return JSON.parse(this.toolCall.result);
+        return JSON.parse(this.toolCall.output);
       } catch (e) {
         return null;
       }
     },
     error() {
-      if (isErrorContent(this.toolCall.result)) {
-        const err = parseErrorContent(this.toolCall.result);
+      if (
+        this.toolCall.state === "output-available" &&
+        isErrorContent(this.toolCall.output)
+      ) {
+        const err = parseErrorContent(this.toolCall.output);
         return err.message ?? err;
+      } else if (this.toolCall.state === "output-error") {
+        return this.toolCall.errorText;
       }
     },
     displayName() {
-      if (this.toolCall.toolName === "get_columns") {
-        if (this.toolCall.args.schema) {
-          return `Get Columns (schema: ${this.toolCall.args.schema}, table: ${this.toolCall.args.table})`;
+      if (this.name === "get_columns") {
+        if (this.toolCall.input?.schema) {
+          return `Get Columns (schema: ${this.toolCall.input?.schema}, table: ${this.toolCall.input?.table || "..."})`;
         }
-        return `Get Columns (${this.toolCall.args.table})`;
+        return `Get Columns (${this.toolCall.input?.table || "..."})`;
       }
-      return this.toolCall.toolName.split("_").map(_.capitalize).join(" ");
+      return this.name.split("_").map(_.capitalize).join(" ");
     },
   },
   methods: {