AI assistant place

packages/web/src/icons/FontIcon.svelte

@@ -148,6 +148,7 @@
     'icon parent-filter-outline': 'mdi mdi-home-alert-outline',
     'icon download': 'mdi mdi-download',
     'icon text': 'mdi mdi-text',
+    'icon ai': 'mdi mdi-head-lightbulb',
 
     'icon run': 'mdi mdi-play',
     'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/tabs/QueryTab.svelte

@@ -12,6 +12,15 @@
     testEnabled: () => getCurrentEditor()?.isSqlEditor(),
     onClick: () => getCurrentEditor().formatCode(),
   });
+  registerCommand({
+    id: 'query.switchAiAssistant',
+    category: 'Query',
+    name: 'AI Assistant',
+    keyText: 'Shift+Alt+A',
+    icon: 'icon ai',
+    testEnabled: () => isProApp(),
+    onClick: () => getCurrentEditor().toggleAiAssistant(),
+  });
   registerCommand({
     id: 'query.insertSqlJoin',
     category: 'Query',
@@ -89,6 +98,8 @@
   import ToolStripDropDownButton from '../buttons/ToolStripDropDownButton.svelte';
   import { extractQueryParameters, replaceQueryParameters } from 'dbgate-query-splitter';
   import QueryParametersModal from '../modals/QueryParametersModal.svelte';
+  import { isProApp } from '../utility/proTools';
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
 
   export let tabid;
   export let conid;
@@ -137,6 +148,7 @@
   let domEditor;
   let domToolStrip;
   let intervalId;
+  let isAiAssistantVisible = false;
 
   onMount(() => {
     intervalId = setInterval(() => {
@@ -210,6 +222,10 @@
     visibleResultTabs = !visibleResultTabs;
   }
 
+  export function toggleAiAssistant() {
+    isAiAssistantVisible = !isAiAssistantVisible;
+  }
+
   function getParameterSplitterOptions() {
     if (!queryParameterStyle) {
       return null;
@@ -401,6 +417,7 @@
       { command: 'query.replace' },
       { divider: true },
       { command: 'query.toggleVisibleResultTabs' },
+      { command: 'query.switchAiAssistant', hideDisabled: true },
     ];
   }
 
@@ -423,6 +440,8 @@
 </script>
 
 <ToolStripContainer bind:this={domToolStrip}>
+  <HorizontalSplitter isSplitter={isAiAssistantVisible} initialSizeRight={300}>
+    <svelte:fragment slot="1">
       <VerticalSplitter isSplitter={visibleResultTabs}>
         <svelte:fragment slot="1">
           {#if driver?.databaseEngineTypes?.includes('sql')}
@@ -490,6 +509,11 @@
           </ResultTabs>
         </svelte:fragment>
       </VerticalSplitter>
+    </svelte:fragment>
+    <svelte:fragment slot="2">
+      <div>AI Assistant</div>
+    </svelte:fragment>
+  </HorizontalSplitter>
   <svelte:fragment slot="toolstrip">
     <ToolStripCommandSplitButton commands={['query.execute', 'query.executeCurrent']} />
     <ToolStripCommandButton command="query.kill" />
@@ -511,6 +535,7 @@
       icon="icon at"
       title="Query parameter style"
     />
+    <ToolStripCommandButton command="query.switchAiAssistant" hideDisabled />
   </svelte:fragment>
 </ToolStripContainer>