ai disclaimer

src/lib/commandCenter/panels/ai.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
+    import { Alert, AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
+    import { preferences } from '$lib/stores/preferences';
+    import { sdk } from '$lib/stores/sdk';
     import { VARS } from '$lib/system';
 
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
@@ -119,7 +121,21 @@
         <i class="icon-question-mark-circle" />
         <span>{option.label}</span>
     </div>
-    <p>cool</p>
+
+    {#if !$preferences.hideAiDisclaimer}
+        <div style="padding: 1rem; padding-block-end: 0;">
+            <Alert
+                type="default"
+                dismissible
+                on:dismiss={() => {
+                    $preferences.hideAiDisclaimer = true;
+                }}>
+                <span slot="title">
+                    We collect user responses to refine our experimental AI feature.
+                </span>
+            </Alert>
+        </div>
+    {/if}
 
     {#if $isLoading || answer}
         <div class="content">

src/lib/components/alert.svelte

@@ -3,7 +3,7 @@
     import type { Buttons } from '../stores/notifications';
 
     export let dismissible = false;
-    export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
+    export let type: 'info' | 'success' | 'warning' | 'error' | 'default' = 'info';
     export let buttons: Buttons[] = [];
     export let isAction = false;
     export let isStandalone = false;
@@ -31,7 +31,7 @@
             </button>
         {/if}
         <span
-            class:icon-info={type === 'info'}
+            class:icon-info={type === 'info' || type === 'default'}
             class:icon-check-circle={type === 'success'}
             class:icon-exclamation={type === 'warning'}
             class:icon-exclamation-circle={type === 'error'}
@@ -42,7 +42,9 @@
                     <slot name="title" />
                 </h6>
             {/if}
-            <p class="alert-message"><slot /></p>
+            {#if $$slots.default}
+                <p class="alert-message"><slot /></p>
+            {/if}
             {#if ($$slots.buttons || buttons?.length) && !isAction}
                 <div class="alert-buttons u-flex">
                     <slot name="buttons">

src/lib/stores/preferences.ts

@@ -6,6 +6,7 @@ import { get, writable } from 'svelte/store';
 import { sdk } from './sdk';
 import type { Models } from '@appwrite.io/console';
 import { organization } from './organization';
+import { onDestroy } from 'svelte';
 
 type Preferences = {
     limit?: number;
@@ -27,31 +28,39 @@ type PreferencesStore = {
             [key: string]: TeamPreferences['names'];
         };
     };
-};
+} & { hideAiDisclaimer?: boolean };
 
 function createPreferences() {
     const { subscribe, set, update } = writable<PreferencesStore>({});
+    let preferences: PreferencesStore = {};
+
     if (browser) {
         set(JSON.parse(globalThis.localStorage.getItem('preferences') ?? '{}'));
     }
+
+    subscribe((v) => {
+        preferences = v;
+        if (browser) {
+            globalThis.localStorage.setItem('preferences', JSON.stringify(v));
+        }
+    });
+
     return {
         subscribe,
-        get: (route: Page['route']): Preferences => {
-            let preferences: PreferencesStore;
-            subscribe((n) => (preferences = n))();
-
+        set,
+        update,
+        get: (route?: Page['route']): Preferences => {
+            const parsedRoute = route ?? get(page).route;
             return (
-                preferences[sdk.forProject.client.config.project]?.[route.id] ?? {
+                preferences[sdk.forProject.client.config.project]?.[parsedRoute.id] ?? {
                     limit: null,
                     view: null,
                     columns: null
                 }
             );
         },
-        getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
-            let preferences: PreferencesStore;
-            subscribe((n) => (preferences = n))();
 
+        getCustomCollectionColumns: (collectionId: string): Preferences['columns'] => {
             return (
                 preferences[sdk.forProject.client.config.project]?.collections?.[collectionId] ??
                 null
@@ -122,9 +131,7 @@ function createPreferences() {
         getDisplayNames: () => {
             const id = get(organization)?.$id;
             if (!id) return {};
-            let preferences: PreferencesStore;
 
-            subscribe((n) => (preferences = n))();
             return preferences?.[id]?.displayNames ?? {};
         },
         setDisplayNames: async (collectionId: string, names: TeamPreferences['names']) => {
@@ -147,7 +154,3 @@ function createPreferences() {
 }
 
 export const preferences = createPreferences();
-
-if (browser) {
-    preferences.subscribe((n) => globalThis.localStorage.setItem('preferences', JSON.stringify(n)));
-}