AI assistant

packages/api/src/controllers/databaseConnections.js

@@ -34,6 +34,8 @@ const pipeForkLogs = require('../utility/pipeForkLogs');
 const crypto = require('crypto');
 const loadModelTransform = require('../utility/loadModelTransform');
 const exportDbModelSql = require('../utility/exportDbModelSql');
+const axios = require('axios');
+const { getAuthProxyUrl } = require('../utility/authProxy');
 
 const logger = getLogger('databaseConnections');
 
@@ -562,4 +564,35 @@ module.exports = {
 
     return true;
   },
+
+  textToSql_meta: true,
+  async textToSql({ conid, database, text, dialect }) {
+    const existing = this.opened.find(x => x.conid == conid && x.database == database);
+    const { structure } = existing || {};
+    if (!structure) return { errorMessage: 'No database structure' };
+    const model = {
+      tables: structure.tables.map(table => ({
+        name: table.pureName,
+        columns: table.columns.map(column => column.columnName),
+        primaryKey: table.primaryKey?.columns?.map(column => column.columnName),
+        foreignKeys: table.foreignKeys.map(fk => ({
+          refTable: fk.refTableName,
+          column: fk.columns[0]?.columnName,
+          refColumn: fk.columns[0]?.refColumnName,
+        })),
+      })),
+    };
+
+    const resp = await axios.default.post(`${getAuthProxyUrl()}/text-to-sql`, {
+      text,
+      model,
+      dialect,
+    });
+
+    if (!resp.data.sql) {
+      return { errorMessage: 'No SQL generated' };
+    }
+
+    return resp.data;
+  },
 };

packages/web/src/tabs/QueryTab.svelte

@@ -512,7 +512,14 @@
       </VerticalSplitter>
     </svelte:fragment>
     <svelte:fragment slot="2">
-      <QueryAiAssistant />
+      <QueryAiAssistant
+        {conid}
+        {database}
+        {driver}
+        onClose={() => {
+          isAiAssistantVisible = false;
+        }}
+      />
     </svelte:fragment>
   </HorizontalSplitter>
   <svelte:fragment slot="toolstrip">

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -16,6 +16,7 @@
   export let collapsed = null;
 
   export let storageName = null;
+  export let onClose = null;
 
   let size = 0;
 
@@ -70,7 +71,8 @@
   <WidgetTitle
     clickable={collapsible}
     on:click={collapsible ? () => (visible = !visible) : null}
-    data-testid={$$props['data-testid']}>{title}</WidgetTitle
+    data-testid={$$props['data-testid']}
+    {onClose}>{title}</WidgetTitle
   >
 
   {#if visible}

packages/web/src/widgets/WidgetTitle.svelte

@@ -1,18 +1,35 @@
 <script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
   export let clickable = false;
+  export let onClose = null;
 </script>
 
-<div on:click class:clickable {...$$restProps}>
+<div on:click class:clickable {...$$restProps} class="wrapper">
   <slot />
+  {#if onClose}
+    <div class="close" on:click={onClose}>
+      <FontIcon icon="icon close" />
+    </div>
+  {/if}
 </div>
 
 <style>
-  div {
+  .wrapper {
     padding: 5px;
     font-weight: bold;
     text-transform: uppercase;
     background-color: var(--theme-bg-1);
     border: 2px solid var(--theme-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .close {
+    cursor: pointer;
+  }
+  .close:hover {
+    color: var(--theme-font-hover);
   }
   div.clickable:hover {
     background-color: var(--theme-bg-2);