fix empty query results, bump maxSteps to 100, error color, muted state

Author: azmy60

src/assets/styles/_theme.scss

@@ -12,4 +12,5 @@
   --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%);
+  --text-muted-2: color-mix(in srgb, var(--theme-base) 30%, var(--theme-bg) 70%);
 }

src/assets/styles/components/_message.scss

@@ -109,16 +109,39 @@
     }
 
     .tool {
-      .tool-name {
-        margin-bottom: 0.25rem;
-      }
-
       .tool-error {
         margin-top: 0.5rem;
+        color: var(--brand-danger);
+      }
+
+      &[data-tool-error=true] {
+        flex-direction: column;
+      }
+
+      &:not([data-tool-name="run_query"]) {
+        .tool-result {
+          margin-left: 0.5rem;
+          display: flex;
+          align-items: center;
+          color: var(--text-muted-2);
+        }
+
+        .tool-result::before {
+          content: "";
+          display: inline-block;
+          width: 0.5rem;
+          height: 1px;
+          background-color: var(--border-color);
+          margin-right: 0.5rem;
+        }
       }
 
       &[data-tool-name="run_query"] {
-        gap: 0;
+        flex-direction: column;
+
+        .tool-name {
+          margin-bottom: 0.25rem;
+        }
 
         .no-rows {
           margin-top: 0.5rem;

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

@@ -318,10 +318,8 @@
 
 .tool {
   display: flex;
-  flex-direction: column;
   padding: 0.5rem 1rem;
   border-left: 2px solid var(--border-color);
-  gap: 0.35rem;
   width: 100%;
   margin: 0.75em 0;
 

src/components/messages/ToolMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tool" :data-tool-name="toolCall.toolName" :data-tool-state="toolCall.state"
-    :data-tool-empty-result="isEmptyResult">
+    :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```'" />
     <div v-if="askingPermission">
@@ -20,24 +20,20 @@
         </button>
       </div>
     </div>
-    <div :class="{ 'error tool-error': error }">
-      <template v-if="error">{{ error }}</template>
-      <template v-else-if="data">
-        <template v-if="toolCall.toolName === 'get_connection_info'">
-          {{ data.connectionType }}
-        </template>
-        <template v-if="toolCall.toolName === 'get_tables'">
-          {{ data.length }}
-          {{ $pluralize("table", data.length) }}
-          (<code v-text="truncateAtWord(data.map((t) => t.name).join(', '))" />)
-        </template>
-        <template v-if="toolCall.toolName === 'get_columns'">
-          {{ data.length }}
-          {{ $pluralize("column", data.length) }}
-          (<code v-if="data.length < 5" v-text="data.map((c) => c.name).join(', ')" />)
-        </template>
-        <run-query-result v-else-if="toolCall.toolName === 'run_query' && data" :data="data" />
+    <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'">
+        {{ data.connectionType }}
       </template>
+      <template v-if="toolCall.toolName === 'get_tables'">
+        {{ data.length }}
+        {{ $pluralize("table", data.length) }}
+      </template>
+      <template v-if="toolCall.toolName === 'get_columns'">
+        {{ data.length }}
+        {{ $pluralize("column", data.length) }}
+      </template>
+      <run-query-result v-else-if="toolCall.toolName === 'run_query' && data" :data="data" />
     </div>
   </div>
 </template>
@@ -105,7 +101,7 @@ export default {
         if (this.toolCall.args.schema) {
           return `Get Columns (schema: ${this.toolCall.args.schema}, table: ${this.toolCall.args.table})`;
         }
-        return `Get Columns (table: ${this.toolCall.args.table})`;
+        return `Get Columns (${this.toolCall.args.table})`;
       }
       return this.toolCall.toolName.split("_").map(_.capitalize).join(" ");
     },

src/components/messages/tool/RunQueryResult.vue

@@ -64,10 +64,10 @@ export default {
   },
   computed: {
     columns() {
-      return this.data.results[0].fields;
+      return this.data.results?.[0].fields || [];
     },
     rows() {
-      return this.data.results[0].rows;
+      return this.data.results?.[0].rows || [];
     },
     limitedRows() {
       return this.rows.slice(0, TABLE_MAX_ROWS);

src/providers/BaseProvider.ts

@@ -31,7 +31,7 @@ export abstract class BaseProvider {
       abortSignal: options.signal,
       system: options.systemPrompt,
       tools: options.tools,
-      maxSteps: 20,
+      maxSteps: 100,
       temperature: options.temperature ?? defaultTemperature,
     });
     return result.toDataStreamResponse({