Feat: ai suggestions

.env.example

@@ -3,4 +3,6 @@ PUBLIC_CONSOLE_FEATURE_FLAGS=
 PUBLIC_APPWRITE_MULTI_REGION=false
 PUBLIC_APPWRITE_ENDPOINT=http://localhost/v1
 PUBLIC_STRIPE_KEY=
-PUBLIC_GROWTH_ENDPOINT=
+PUBLIC_GROWTH_ENDPOINT=
+PUBLIC_CONSOLE_EMAIL_VERIFICATION=false
+PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=true

.github/workflows/publish.yml

@@ -41,6 +41,7 @@ jobs:
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_CONSOLE_FEATURE_FLAGS="
                       "PUBLIC_APPWRITE_MULTI_REGION=true"
+                      "PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=false"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY }}"
                       "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}"
@@ -81,6 +82,7 @@ jobs:
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_CONSOLE_FEATURE_FLAGS="
                       "PUBLIC_APPWRITE_MULTI_REGION=true"
+                      "PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=false"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
     publish-self-hosted:
@@ -118,6 +120,7 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=self-hosted"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
+                      "PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=false"
                       "PUBLIC_CONSOLE_FEATURE_FLAGS="
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
 
@@ -156,6 +159,7 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
+                      "PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=false"
                       "PUBLIC_CONSOLE_FEATURE_FLAGS="
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"

Dockerfile

@@ -23,6 +23,7 @@ ADD ./static /app/static
 ARG PUBLIC_CONSOLE_MODE
 ARG PUBLIC_CONSOLE_FEATURE_FLAGS
 ARG PUBLIC_APPWRITE_MULTI_REGION
+ARG PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS
 ARG PUBLIC_APPWRITE_ENDPOINT
 ARG PUBLIC_GROWTH_ENDPOINT
 ARG PUBLIC_STRIPE_KEY
@@ -34,6 +35,7 @@ ENV PUBLIC_GROWTH_ENDPOINT=$PUBLIC_GROWTH_ENDPOINT
 ENV PUBLIC_CONSOLE_MODE=$PUBLIC_CONSOLE_MODE
 ENV PUBLIC_CONSOLE_FEATURE_FLAGS=$PUBLIC_CONSOLE_FEATURE_FLAGS
 ENV PUBLIC_APPWRITE_MULTI_REGION=$PUBLIC_APPWRITE_MULTI_REGION
+ENV PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=$PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS
 ENV PUBLIC_STRIPE_KEY=$PUBLIC_STRIPE_KEY
 ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
 ENV SENTRY_RELEASE=$SENTRY_RELEASE

package.json

@@ -22,11 +22,11 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7747562",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@f08cb74",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f2198f1",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@077179c",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f2198f1",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@077179c",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",

src/lib/actions/analytics.ts

@@ -274,9 +274,12 @@ export enum Submit {
     DatabaseDelete = 'submit_database_delete',
     DatabaseUpdateName = 'submit_database_update_name',
     DatabaseImportCsv = 'submit_database_import_csv',
+
     ColumnCreate = 'submit_column_create',
     ColumnUpdate = 'submit_column_update',
     ColumnDelete = 'submit_column_delete',
+    ColumnSuggestions = 'submit_column_suggestions',
+
     RowCreate = 'submit_row_create',
     RowDelete = 'submit_row_delete',
     RowUpdate = 'submit_row_update',

src/lib/components/alerts/emailVerificationBanner.svelte

@@ -6,14 +6,20 @@
     import SendVerificationEmailModal from '../account/sendVerificationEmailModal.svelte';
     import { page } from '$app/stores';
     import { wizard, isNewWizardStatusOpen } from '$lib/stores/wizard';
-    import { isCloud } from '$lib/system';
+    import { isCloud, VARS } from '$lib/system';
 
     const hasUser = $derived(!!$user);
     const needsEmailVerification = $derived(hasUser && !$user.emailVerification);
     const notOnOnboarding = $derived(!$page.route.id.includes('/onboarding'));
     const notOnWizard = $derived(!$wizard.show && !$isNewWizardStatusOpen);
+    const isEnabledViaEnvConfig = $derived(VARS.EMAIL_VERIFICATION);
     const shouldShowEmailBanner = $derived(
-        isCloud && hasUser && needsEmailVerification && notOnOnboarding && notOnWizard
+        isEnabledViaEnvConfig &&
+            isCloud &&
+            hasUser &&
+            needsEmailVerification &&
+            notOnOnboarding &&
+            notOnWizard
     );
 
     let showSendVerification = $state(false);

src/lib/layout/notifications.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { dismissNotification, notifications } from '../stores/notifications';
     import { flip } from 'svelte/animate';
     import { Layout, Toast } from '@appwrite.io/pink-svelte';
+    import { dismissNotification, notifications } from '../stores/notifications';
 </script>
 
 {#if $notifications}
@@ -28,16 +28,16 @@
 
 <style lang="scss">
     section {
+        right: 3.25px;
+        z-index: 1001;
         position: fixed;
         top: calc(var(--main-header-height) + 12px);
-        right: 12px;
-        z-index: 1001;
     }
 
     @media (min-width: 768px) {
         section {
-            top: calc(var(--main-header-height) + 24px);
             right: 24px;
+            top: calc(var(--main-header-height) + 24px);
         }
     }
 </style>

src/lib/layout/progress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { navigationCancelled } from '$lib/stores/navigation';
     import { afterNavigate, beforeNavigate } from '$app/navigation';
 
     const minimum = 0.08;
@@ -97,6 +98,13 @@
         complete();
     });
 
+    navigationCancelled.subscribe((cancelled) => {
+        if (cancelled) {
+            complete();
+            navigationCancelled.set(false);
+        }
+    });
+
     $: barStyle = (width && width * 100 && `width: ${width * 100}%;`) || '';
 </script>
 

src/lib/stores/navigation.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const navigationCancelled = writable(false);

src/lib/stores/sdk.ts

@@ -126,7 +126,8 @@ const sdkForProject = {
     proxy: new Proxy(clientProject),
     migrations: new Migrations(clientProject),
     sites: new Sites(clientProject),
-    tablesDB: new TablesDB(clientProject)
+    tablesDB: new TablesDB(clientProject),
+    console: new Console(clientProject) // for suggestions API
 };
 
 export const realtime = {

src/lib/system.ts

@@ -10,7 +10,9 @@ export const VARS = {
     CONSOLE_MODE: (env.PUBLIC_CONSOLE_MODE as Mode) ?? undefined,
     APPWRITE_ENDPOINT: env.PUBLIC_APPWRITE_ENDPOINT ?? undefined,
     GROWTH_ENDPOINT: env.PUBLIC_GROWTH_ENDPOINT ?? undefined,
-    PUBLIC_STRIPE_KEY: env.PUBLIC_STRIPE_KEY ?? undefined
+    PUBLIC_STRIPE_KEY: env.PUBLIC_STRIPE_KEY ?? undefined,
+    EMAIL_VERIFICATION: env.PUBLIC_CONSOLE_EMAIL_VERIFICATION === 'true',
+    MOCK_AI_SUGGESTIONS: (env.PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS ?? 'true') === 'true'
 };
 
 export const ENV = {

src/routes/(console)/project-[region]-[project]/+layout.svelte

@@ -138,8 +138,13 @@
 
     @media (max-width: 768px) {
         .layout-level-progress-bars {
-            position: relative;
+            width: 100%;
             align-items: center;
+            box-sizing: border-box;
+        }
+
+        :global(main:has([data-side-sheet-visible='true']) .layout-level-progress-bars) {
+            visibility: hidden;
         }
     }
 </style>

src/routes/(console)/project-[region]-[project]/databases/+page.svelte

@@ -2,9 +2,9 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
 
     import type { PageData } from './$types';
@@ -14,7 +14,7 @@
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
     import { canWriteDatabases } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import EmptySearch from '$lib/components/emptySearch.svelte';
 
@@ -46,25 +46,18 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector
-                ui="new"
-                {columns}
-                view={data.view}
-                hideColumns={!data.databases.total}
-                hideView={!data.databases.total} />
-            {#if $canWriteDatabases}
-                <Button event="create_database" on:click={() => (showCreate = true)}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create database
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        hasSearch
+        {columns}
+        bind:view={data.view}
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteDatabases}
+            <Button event="create_database" on:click={() => (showCreate = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create database
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.databases.total}
         {#if data.view === 'grid'}