Merge pull request #49 from beekeeper-studio/fix/empty-message-when-ai-is-interrupted

filter empty messages from conversation

Author: azmy60

src/assets/styles/_theme.scss

@@ -11,4 +11,5 @@
   --theme-thinking-dot: var(--text);
   --theme-scrollbar-track: transparent;
   --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%);
 }

src/assets/styles/components/_message.scss

@@ -35,4 +35,9 @@
     margin-top: 0.5rem;
     justify-content: flex-end;
   }
+
+  .message-content.literally-empty {
+    font-style: italic;
+    --theme-text-message-system: var(--text-muted);
+  }
 }

src/components/ChatInterface.vue

@@ -24,7 +24,7 @@
         />
         <div
           class="message error"
-          v-if="error && !error.message.includes('User rejected tool call')"
+          v-if="isUnexpectedError"
         >
           <div class="message-content">
             Something went wrong.
@@ -160,6 +160,26 @@ export default {
         (this.status === "submitted" || this.status === "streaming")
       );
     },
+    isUnexpectedError() {
+      if (!this.error) {
+        return false;
+      }
+
+      if (!this.error.message) {
+        return true;
+      }
+
+      if (this.error.message.includes('User rejected tool call')) {
+        return false;
+      }
+
+      // User aborted request before AI got a chance to respond
+      if (this.error.message.includes('aborted without reason')) {
+        return false;
+      }
+
+      return true;
+    },
     isErrorTruncated() {
       return this.error && this.error.toString().length > 300;
     },

src/components/messages/Message.vue

@@ -1,13 +1,16 @@
 <template>
   <div :class="['message', message.role]">
-    <div class="message-content">
+    <div class="message-content" :class="{ 'literally-empty': isEmpty }">
       <template v-if="message.role === 'system'" />
       <template v-else v-for="(part, index) of message.parts" :key="index">
         <markdown v-if="part.type === 'text'" :content="part.text" />
         <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)" />
       </template>
+      <span v-if="isEmpty">
+        Empty response
+      </span>
     </div>
     <div class="message-actions" v-if="status ==='ready'">
       <button class="btn btn-flat-2 copy-btn" :class="{ copied }" @click="handleCopyClick">
@@ -28,6 +31,7 @@ import { UIMessage } from "ai";
 import Markdown from "@/components/messages/Markdown.vue";
 import ToolMessage from "@/components/messages/ToolMessage.vue";
 import { clipboard } from "@beekeeperstudio/plugin";
+import { isEmptyUIMessage } from "@/utils";
 
 export default {
   name: "Message",
@@ -75,6 +79,9 @@ export default {
       }
       return text.trim();
     },
+    isEmpty() {
+      return isEmptyUIMessage(this.message);
+    },
   },
 
   methods: {

src/composables/ai.ts

@@ -1,5 +1,5 @@
 import { useChat } from "@ai-sdk/vue";
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import {
   AvailableProviders,
   AvailableModels,
@@ -11,7 +11,7 @@ import { notify } from "@beekeeperstudio/plugin";
 import { z } from "zod";
 import { createProvider } from "@/providers";
 import { useConfigurationStore } from "@/stores/configuration";
-import { isReadQuery } from "@/utils";
+import { isEmptyUIMessage, isReadQuery } from "@/utils";
 
 type AIOptions = {
   initialMessages: Message[];
@@ -27,6 +27,9 @@ type SendOptions = {
 }
 
 export function useAI(options: AIOptions) {
+  /** FIXME: Only used because we want to retry automatically after an error.
+   *  REMOVE AFTER V5 UPGRADE. */
+  const sendOptions = ref<SendOptions>();
   const pendingToolCallIds = ref<string[]>([]);
   const askingPermission = computed(() => pendingToolCallIds.value.length > 0);
   const followupAfterRejected = ref("");
@@ -90,6 +93,13 @@ export function useAI(options: AIOptions) {
             followupAfterRejected.value = "";
             // fillTitle();
           }
+        } else if (error.message.includes("all messages must have non-empty content")) {
+          // FIXME we dont need this once we upgrade to AI SDK v5 since we use `convertToModelMessages()`
+          // See https://ai-sdk.dev/docs/troubleshooting/use-chat-tools-no-response
+          messages.value = messages.value.filter((m) => !isEmptyUIMessage(m));
+          nextTick().then(() => {
+            retry(sendOptions.value!);
+          })
         }
       },
       onFinish: () => {
@@ -150,6 +160,8 @@ export function useAI(options: AIOptions) {
 
   /** Send a message to the AI */
   async function send(message: string, options: SendOptions) {
+    // FIXME: Remove after v5 upgrade
+    sendOptions.value = options;
     await append(
       {
         role: "user",
@@ -165,6 +177,8 @@ export function useAI(options: AIOptions) {
   }
 
   async function retry(options: SendOptions) {
+    // FIXME: Remove after v5 upgrade
+    sendOptions.value = options;
     await reload({
       body: {
         sendOptions: options,

src/utils.ts

@@ -1,4 +1,6 @@
+import { UIMessage } from "ai";
 import { Model } from "./stores/chat";
+import _ from "lodash";
 import { identify } from "sql-query-identifier";
 
 export function safeJSONStringify(value: any, ...args: any): string {
@@ -85,3 +87,19 @@ export function isReadQuery(query: string) {
     return false;
   }
 }
+
+export function isEmptyUIMessage(message: UIMessage): boolean {
+  const nonEmptyParts = message.parts.filter((part) => {
+    if (part.type === "step-start") {
+      return false;
+    }
+
+    if (part.type === "text" && _.isEmpty(part.text)) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return nonEmptyParts.length === 0;
+}