@seekora-ai/ui-sdk-vanilla 0.2.14 → 0.2.16

package/dist/index.esm.js

@@ -348,7 +348,7 @@ class SearchBar {
         }
         this.container = container;
         this.options = {
-            placeholder: options.placeholder || 'Search...',
+            placeholder: options.placeholder || 'Powered by Seekora',
             showSuggestions: options.showSuggestions !== false,
             minQueryLength: options.minQueryLength || 1,
             maxSuggestions: options.maxSuggestions || 10,
@@ -360,8 +360,6 @@ class SearchBar {
             onBrandClick: options.onBrandClick,
             searchOptions: options.searchOptions,
         };
-        // Cache credentials and environment from client for rich suggestions
-        this.cacheClientCredentials();
         this.render();
         this.attachEventListeners();
         // Subscribe to state manager to sync input with query state
@@ -583,108 +581,58 @@ class SearchBar {
     }
     async fetchRichSuggestions(query) {
         try {
-            // Use cached credentials first, then try to get from client
-            let baseUrl = 'https://api.seekora.com';
-            let storeId = this.cachedStoreId;
-            let readSecret = this.cachedReadSecret;
-            const env = this.cachedEnvironment;
-            // If not cached, try to get from client
-            const clientAny = this.client;
-            if (!storeId || !readSecret) {
-                if (clientAny.config) {
-                    storeId = storeId || clientAny.config.storeId;
-                    readSecret = readSecret || clientAny.config.readSecret;
-                }
-                else if (clientAny.storeId && clientAny.readSecret) {
-                    storeId = storeId || clientAny.storeId;
-                    readSecret = readSecret || clientAny.readSecret;
-                }
-                else if (clientAny._config) {
-                    storeId = storeId || clientAny._config.storeId;
-                    readSecret = readSecret || clientAny._config.readSecret;
-                }
-                else if (clientAny._storeId && clientAny._readSecret) {
-                    storeId = storeId || clientAny._storeId;
-                    readSecret = readSecret || clientAny._readSecret;
-                }
-            }
-            // Determine environment and set baseUrl
-            const environment = env || clientAny.environment || clientAny.config?.environment || clientAny._config?.environment;
-            const isDevelopment = environment === 'development';
-            // ALWAYS use localhost:3000 for development - FORCE IT
-            baseUrl = 'http://localhost:3000'; // Force localhost for all requests in dev
-            console.log('🌐 SearchBar: Setting baseUrl', {
-                environment,
-                isDevelopment,
-                forcedBaseUrl: baseUrl,
-            });
-            if (!storeId || !readSecret) {
-                log.warn('SearchBar: Missing store credentials, falling back to basic suggestions', {
-                    hasConfig: !!clientAny.config,
-                    hasDirectProps: !!(clientAny.storeId && clientAny.readSecret),
-                    hasPrivateConfig: !!clientAny._config,
-                    clientKeys: Object.keys(clientAny),
-                });
-                await this.fallbackToBasicSuggestions(query);
-                return;
-            }
-            log.verbose('SearchBar: Fetching rich suggestions', {
-                baseUrl,
-                storeId: storeId ? storeId.substring(0, 8) + '...' : 'missing',
-                query,
-                environment,
-                isDevelopment,
-                credentialsFromCache: !!(this.cachedStoreId && this.cachedReadSecret),
+            log.verbose('SearchBar: Fetching rich suggestions via client.getSuggestions', { query });
+            const response = await this.client.getSuggestions(query, {
+                include_dropdown_recommendations: true,
+                hitsPerPage: this.options.maxSuggestions,
+                returnFullResponse: true,
             });
-            // Build API URL with rich recommendations
-            // Use 'query' parameter to match API expectations (also accepts 'q')
-            // Empty query is allowed - will return trending products/brands
-            const params = new URLSearchParams({
-                include_dropdown_recommendations: 'true',
-                hitsPerPage: String(this.options.maxSuggestions),
-            });
-            // Only add query parameter if it's not empty
-            if (query && query.trim().length > 0) {
-                params.append('query', query);
-            }
-            const url = `${baseUrl}/api/v1/suggestions/queries?${params.toString()}`;
-            log.verbose('SearchBar: Making rich suggestions request', { url: url.replace(/secret=[^&]+/, 'secret=***') });
-            const response = await fetch(url, {
-                method: 'GET',
-                headers: {
-                    'x-storeid': storeId,
-                    'x-storesecret': readSecret,
-                    'Content-Type': 'application/json',
+            // response is QuerySuggestionsFullResponse when returnFullResponse is true
+            const suggestions = response.suggestions || [];
+            const extensions = response.extensions;
+            // Build RichQuerySuggestionsResponse from SDK response
+            const raw = response.raw || {};
+            const data = {
+                status: 'success',
+                data: {
+                    hits: suggestions,
+                    nbHits: suggestions.length,
+                    page: raw.page || 0,
+                    hitsPerPage: raw.hitsPerPage || this.options.maxSuggestions,
+                    processingTimeMS: raw.processingTimeMS || 0,
+                    query: query,
+                    indexUsed: raw.indexUsed || '',
+                    parsedQuery: raw.parsedQuery || query,
+                    dropdown_recommendations: extensions ? {
+                        trending_searches: extensions.trending_searches,
+                        trending_products: extensions.trending_products,
+                        popular_brands: extensions.popular_brands,
+                        processing_time_ms: extensions.processing_time_ms || 0,
+                        cached_at: extensions.cached_at,
+                    } : undefined,
                 },
-            });
-            if (!response.ok) {
-                throw new Error(`API request failed: ${response.status} ${response.statusText}`);
-            }
-            const data = await response.json();
-            if (data.status === 'error') {
-                throw new Error('API returned error status');
-            }
+                timestamp: raw.timestamp || new Date().toISOString(),
+                version: raw.version || '',
+            };
             this.richSuggestionsData = data;
             // Transform hits to SuggestionItem format
-            this.suggestions = (data.data.hits || []).map((hit) => ({
+            this.suggestions = suggestions.map((hit) => ({
                 query: hit.query,
                 count: hit.popularity,
                 metadata: hit,
             }));
-            console.log('✨ SearchBar: Rich suggestions loaded', {
+            log.verbose('SearchBar: Rich suggestions loaded', {
                 query,
                 suggestionsCount: this.suggestions.length,
                 hasTrendingSearches: !!data.data.dropdown_recommendations?.trending_searches?.length,
                 hasTrendingProducts: !!data.data.dropdown_recommendations?.trending_products?.length,
                 hasPopularBrands: !!data.data.dropdown_recommendations?.popular_brands?.length,
-                rawData: data.data.dropdown_recommendations,
             });
         }
         catch (err) {
             const error = err instanceof Error ? err : new Error(String(err));
             log.error('SearchBar: Failed to fetch rich suggestions, falling back to basic', {
                 error: error.message,
-                stack: error.stack,
                 query,
             });
             await this.fallbackToBasicSuggestions(query);
@@ -713,50 +661,6 @@ class SearchBar {
             this.richSuggestionsData = null;
         }
     }
-    cacheClientCredentials() {
-        const clientAny = this.client;
-        console.log('🔍 SearchBar: Attempting to cache credentials', {
-            hasConfig: !!clientAny.config,
-            hasDirectProps: !!(clientAny.storeId && clientAny.readSecret),
-            hasPrivateConfig: !!clientAny._config,
-            hasPrivateProps: !!(clientAny._storeId && clientAny._readSecret),
-            clientKeys: Object.keys(clientAny).slice(0, 10),
-            // Try to see actual values
-            configStoreId: clientAny.config?.storeId,
-            directStoreId: clientAny.storeId,
-        });
-        // Try multiple ways to extract credentials - check ALL properties
-        if (clientAny.config && clientAny.config.storeId) {
-            this.cachedStoreId = clientAny.config.storeId;
-            this.cachedReadSecret = clientAny.config.readSecret;
-            this.cachedEnvironment = clientAny.config.environment;
-            console.log('📍 Extracted from config');
-        }
-        if (!this.cachedStoreId && clientAny.storeId) {
-            this.cachedStoreId = clientAny.storeId;
-            this.cachedReadSecret = clientAny.readSecret;
-            this.cachedEnvironment = clientAny.environment;
-            console.log('📍 Extracted from direct props');
-        }
-        if (!this.cachedStoreId && clientAny._config) {
-            this.cachedStoreId = clientAny._config.storeId;
-            this.cachedReadSecret = clientAny._config.readSecret;
-            this.cachedEnvironment = clientAny._config.environment;
-            console.log('📍 Extracted from _config');
-        }
-        if (!this.cachedStoreId && clientAny._storeId) {
-            this.cachedStoreId = clientAny._storeId;
-            this.cachedReadSecret = clientAny._readSecret;
-            this.cachedEnvironment = clientAny._environment || clientAny.environment;
-            console.log('📍 Extracted from _private props');
-        }
-        console.log('✅ SearchBar: Cached client credentials', {
-            hasStoreId: !!this.cachedStoreId,
-            storeIdPreview: this.cachedStoreId ? this.cachedStoreId.substring(0, 8) + '...' : 'MISSING',
-            hasReadSecret: !!this.cachedReadSecret,
-            environment: this.cachedEnvironment,
-        });
-    }
     async performSearch() {
         // Use empty string for empty queries
         const query = this.input.value.trim();
@@ -1241,7 +1145,6 @@ class SearchResults {
             onResultClick: options.onResultClick,
             renderResult: options.renderResult,
             renderEmpty: options.renderEmpty,
-            renderLoading: options.renderLoading,
             renderError: options.renderError,
         };
         // Attach event delegation listener to the persistent container for result clicks
@@ -1389,13 +1292,6 @@ class SearchResults {
             loading: this.options.loading,
             hasError: !!this.options.error,
         });
-        if (this.options.loading) {
-            const loadingEl = this.options.renderLoading
-                ? this.options.renderLoading()
-                : this.renderDefaultLoading();
-            this.container.appendChild(loadingEl);
-            return;
-        }
         if (this.options.error) {
             const errorEl = this.options.renderError
                 ? this.options.renderError(this.options.error)
@@ -1490,12 +1386,6 @@ class SearchResults {
             };
         }
     }
-    renderDefaultLoading() {
-        const div = document.createElement('div');
-        div.style.cssText = this.getLoadingStyle();
-        div.textContent = 'Loading results...';
-        return div;
-    }
     renderDefaultError(error) {
         const div = document.createElement('div');
         div.style.cssText = this.getErrorStyle();
@@ -1615,13 +1505,6 @@ class SearchResults {
     get theme() {
         return this.provider.theme;
     }
-    getLoadingStyle() {
-        return `
-      padding: ${this.theme.spacing.large};
-      text-align: center;
-      color: ${this.theme.colors.text};
-    `;
-    }
     getErrorStyle() {
         return `
       padding: ${this.theme.spacing.large};
@@ -1799,9 +1682,6 @@ class Stats {
     }
     render() {
         this.container.innerHTML = '';
-        if (this.options.loading) {
-            return;
-        }
         const totalResults = this.getTotalResults();
         if (totalResults === null) {
             return;
@@ -3386,13 +3266,11 @@ class InfiniteHits {
         this.options = {
             renderHit: options.renderHit,
             renderEmpty: options.renderEmpty,
-            renderLoading: options.renderLoading,
             showMoreButton: options.showMoreButton !== false,
             useInfiniteScroll: options.useInfiniteScroll ?? false,
             scrollThreshold: options.scrollThreshold ?? 0.1,
             fieldMapping: options.fieldMapping,
             showMoreLabel: options.showMoreLabel ?? 'Show more',
-            loadingLabel: options.loadingLabel ?? 'Loading...',
             onHitClick: options.onHitClick,
         };
         // Subscribe to state manager
@@ -3457,10 +3335,6 @@ class InfiniteHits {
         const state = this.provider.stateManager.getState();
         // Initial loading state
         if (state.loading && this.accumulatedHits.length === 0) {
-            const loadingEl = this.options.renderLoading
-                ? this.options.renderLoading()
-                : this.createDefaultLoading();
-            this.container.appendChild(loadingEl);
             return;
         }
         // Empty state
@@ -3485,13 +3359,6 @@ class InfiniteHits {
             const button = this.createShowMoreButton();
             this.container.appendChild(button);
         }
-        // Loading more indicator
-        if (this.isLoadingMore) {
-            const loadingEl = this.options.renderLoading
-                ? this.options.renderLoading()
-                : this.createDefaultLoading();
-            this.container.appendChild(loadingEl);
-        }
         // Infinite scroll sentinel
         if (this.options.useInfiniteScroll && !this.isLastPage) {
             const sentinel = document.createElement('div');
@@ -3584,20 +3451,10 @@ class InfiniteHits {
     `;
         return empty;
     }
-    createDefaultLoading() {
-        const loading = document.createElement('div');
-        loading.textContent = this.options.loadingLabel;
-        loading.style.cssText = `
-      padding: ${this.theme.spacing.medium};
-      text-align: center;
-      color: ${this.theme.colors.textSecondary};
-    `;
-        return loading;
-    }
     createShowMoreButton() {
         const button = document.createElement('button');
         button.type = 'button';
-        button.textContent = this.isLoadingMore ? this.options.loadingLabel : this.options.showMoreLabel;
+        button.textContent = this.options.showMoreLabel;
         button.disabled = this.isLoadingMore;
         button.style.cssText = this.getShowMoreButtonStyle();
         button.addEventListener('click', () => this.handleShowMore());
@@ -3902,7 +3759,6 @@ class QuerySuggestions {
     async loadSuggestions(query) {
         this.loading = true;
         this.error = null;
-        this.render();
         try {
             const response = await this.provider.client.getSuggestions(query, this.options.maxSuggestions);
             const rawSuggestions = Array.isArray(response) ? response : [];
@@ -3941,13 +3797,6 @@ class QuerySuggestions {
         if (!this.options.query || this.options.query.length < this.options.minQueryLength) {
             return;
         }
-        if (this.loading) {
-            const loadingDiv = document.createElement('div');
-            loadingDiv.style.cssText = this.getLoadingStyle();
-            loadingDiv.textContent = 'Loading suggestions...';
-            this.container.appendChild(loadingDiv);
-            return;
-        }
         if (this.error || this.suggestions.length === 0) {
             const emptyDiv = document.createElement('div');
             emptyDiv.style.cssText = this.getEmptyStyle();
@@ -4017,13 +3866,6 @@ class QuerySuggestions {
       color: ${this.theme.colors.text};
     `;
     }
-    getLoadingStyle() {
-        return `
-      padding: ${this.theme.spacing.medium};
-      text-align: center;
-      color: ${this.theme.colors.text};
-    `;
-    }
     getEmptyStyle() {
         return `
       padding: ${this.theme.spacing.medium};