SYNC: Merge pull request #10 from dbgate/feat-chat-compl-api

packages/web/src/buttons/ToolStripDropDownButton.svelte

@@ -20,7 +20,7 @@
   }
 </script>
 
-<svelte:component this={component} {title} {icon} on:click={handleClick}>
+<svelte:component this={component} {title} {icon} on:click={handleClick} {...$$restProps}>
   {label}
   <FontIcon icon="icon chevron-down" />
 </svelte:component>

packages/web/src/elements/TabControl.svelte

@@ -20,6 +20,7 @@
   export let flex1 = true;
   export let flexColContainer = true;
   export let maxHeight100 = false;
+  export let scrollableContentContainer = false;
   export let contentTestId = undefined;
   export let inlineTabs = false;
   export let onUserChange = null;
@@ -54,7 +55,12 @@
     {/if}
   </div>
 
-  <div class="content-container" style:max-height={containerMaxHeight} data-testid={contentTestId}>
+  <div
+    class="content-container"
+    class:scrollableContentContainer
+    style:max-height={containerMaxHeight}
+    data-testid={contentTestId}
+  >
     {#each _.compact(tabs) as tab, index}
       <div
         class="container"
@@ -129,6 +135,7 @@
   }
 
   .tab-item {
+    white-space: nowrap;
     padding-left: 15px;
     padding-right: 15px;
     display: flex;
@@ -152,6 +159,10 @@
     position: relative;
   }
 
+  .scrollableContentContainer {
+    overflow-y: auto;
+  }
+
   .container.maxHeight100 {
     max-height: 100%;
   }

packages/web/src/forms/SelectField.svelte

@@ -5,7 +5,7 @@
 
   const dispatch = createEventDispatcher();
 
-  export let options = [];
+  export let options: Array<{ label: string; value: any }> = [];
   export let value;
   export let isNative = false;
   export let isMulti = false;

packages/web/src/icons/FontIcon.svelte

@@ -163,6 +163,7 @@
     'icon parent-filter-outline': 'mdi mdi-home-alert-outline',
     'icon download': 'mdi mdi-download',
     'icon text': 'mdi mdi-text',
+    'icon ai-provider': 'mdi mdi-cloud-cog',
     'icon ai': 'mdi mdi-head-lightbulb',
     'icon wait': 'mdi mdi-timer-sand',
     'icon more': 'mdi mdi-more',
@@ -288,6 +289,7 @@
     'img auth': 'mdi mdi-account-key color-icon-blue',
     'img cloud-connection': 'mdi mdi-cloud-lock color-icon-blue',
     'img ai': 'mdi mdi-head-lightbulb color-icon-yellow',
+    'img ai-provider': 'mdi mdi-head-lightbulb color-icon-blue',
     'img run': 'mdi mdi-play color-icon-blue',
 
     'img add': 'mdi mdi-plus-circle color-icon-green',

packages/web/src/modals/ModalBase.svelte

@@ -11,6 +11,7 @@
   export let simple = false;
   export let simplefix = false;
   export let modalId;
+  export let fixedHeight = false;
 
   function handleCloseModal() {
     if (modalId == getActiveModalId()) {
@@ -45,6 +46,7 @@
     class:fullScreen
     class:simple
     class:simplefix
+    class:fixedHeight
     use:clickOutside
     on:clickOutside={handleClickOutside}
     data-testid="ModalBase_window"
@@ -102,6 +104,10 @@
     width: 50%;
   }
 
+  .window:not(.fullScreen):not(.simple):not(.simplefix).fixedHeight {
+    height: 70vh;
+  }
+
   .window.fullScreen {
     position: fixed;
     top: 0;
@@ -183,4 +189,10 @@
     border-top: 1px solid var(--theme-border);
     background-color: var(--theme-bg-modalheader);
   }
+
+  @media (max-width: 1280px) {
+    .window:not(.fullScreen):not(.simple):not(.simplefix) {
+      width: 75%;
+    }
+  }
 </style>

packages/web/src/settings/SettingsModal.svelte

@@ -16,7 +16,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
 
   import ModalBase from '../modals/ModalBase.svelte';
-  import { closeCurrentModal, showModal } from '../modals/modalTools';
+  import { closeCurrentModal } from '../modals/modalTools';
   import { EDITOR_KEYBINDINGS_MODES, EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import {
@@ -41,6 +41,7 @@
   import { derived } from 'svelte/store';
   import { safeFormatDate } from 'dbgate-tools';
   import FormDefaultActionField from './FormDefaultActionField.svelte';
+  import AiSettingsTab from './AiSettingsTab.svelte';
   import { _t } from '../translations';
   import hasPermission from '../utility/hasPermission';
 
@@ -91,13 +92,20 @@ ORDER BY
 </script>
 
 <SettingsFormProvider>
-  <ModalBase {...$$restProps} noPadding>
+  <ModalBase {...$$restProps} noPadding fixedHeight>
     <div slot="header">Settings</div>
 
     <FormValues let:values>
       <TabControl
         bind:value={selectedTab}
         isInline
+        inlineTabs
+        scrollableContentContainer
+        containerMaxWidth="100%"
+        containerMaxHeight="calc(100% - 34px)"
+        maxHeight100
+        flex1
+        flexColContainer
         tabs={[
           hasPermission('settings/change') && { identifier: 'general', label: 'General', slot: 1 },
           isProApp() && electron && { identifier: 'license', label: 'License', slot: 7 },
@@ -107,6 +115,7 @@ ORDER BY
           hasPermission('settings/change') && { identifier: 'behaviour', label: 'Behaviour', slot: 5 },
           hasPermission('settings/change') && { identifier: 'external-tools', label: 'External tools', slot: 8 },
           hasPermission('settings/change') && { identifier: 'other', label: 'Other', slot: 6 },
+          isProApp() && hasPermission('settings/change') && { identifier: 'ai', label: 'AI', slot: 9 },
         ]}
       >
         <svelte:fragment slot="1">
@@ -579,6 +588,10 @@ ORDER BY
           />
           <FormTextField name="externalTools.psql" label="psql (restore PostgreSQL database)" defaultValue="psql" />
         </svelte:fragment>
+
+        <svelte:fragment slot="9">
+          <AiSettingsTab {values} />
+        </svelte:fragment>
       </TabControl>
     </FormValues>
 

packages/web/src/utility/decodeHtmlEntities.ts

@@ -0,0 +1,6 @@
+export function decodeHtmlEntities(text: string): string {
+  if (!text) return text;
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = text;
+  return textarea.value;
+}