@seekora-ai/ui-sdk-vanilla 1.0.0

package/dist/components/search-bar.js

@@ -0,0 +1,899 @@
+/**
+ * SearchBar Component
+ *
+ * Creates a search bar with autocomplete suggestions
+ */
+import { log } from '@seekora-ai/ui-sdk-core';
+import { SearchProvider } from './search-provider';
+export class SearchBar {
+    constructor(providerOrClient, options) {
+        this.suggestions = [];
+        this.richSuggestionsData = null;
+        this.selectedIndex = -1;
+        this.debounceTimer = null;
+        this.isFocused = false;
+        this.unsubscribeStateManager = null;
+        // Support both SearchProvider (new) and SeekoraClient (backwards compatibility)
+        if (providerOrClient instanceof SearchProvider) {
+            this.provider = providerOrClient;
+            this.client = this.provider.client;
+        }
+        else {
+            // Backwards compatibility: create a provider if client is passed
+            this.provider = new SearchProvider({ client: providerOrClient });
+            this.client = providerOrClient;
+        }
+        const container = typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : options.container;
+        if (!container) {
+            throw new Error('SearchBar: container element not found');
+        }
+        this.container = container;
+        this.options = {
+            placeholder: options.placeholder || 'Search...',
+            showSuggestions: options.showSuggestions !== false,
+            minQueryLength: options.minQueryLength || 1,
+            maxSuggestions: options.maxSuggestions || 10,
+            debounceMs: options.debounceMs || 300,
+            enableRichSuggestions: options.enableRichSuggestions !== false, // Default to true
+            onSearch: options.onSearch,
+            onSuggestionSelect: options.onSuggestionSelect,
+            onProductClick: options.onProductClick,
+            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
+        this.unsubscribeStateManager = this.provider.stateManager.subscribe((state) => {
+            // Only update input if it's different (avoid cursor jumping)
+            if (this.input.value !== state.query) {
+                this.input.value = state.query;
+            }
+            // Update response time display
+            if (state.results) {
+                const res = state.results;
+                const processingTime = res.processingTimeMS
+                    || res.data?.processingTimeMS
+                    || res.data?.data?.processingTimeMS;
+                if (processingTime !== undefined) {
+                    this.responseTimeElement.textContent = `${processingTime}ms`;
+                    this.responseTimeElement.style.display = 'inline';
+                }
+                else {
+                    this.responseTimeElement.style.display = 'none';
+                }
+            }
+            else {
+                this.responseTimeElement.style.display = 'none';
+            }
+            // Call onSearch callback if results are available (for backwards compatibility)
+            if (state.results && this.options.onSearch) {
+                this.options.onSearch(state.query, state.results);
+            }
+        });
+    }
+    render() {
+        this.container.style.position = 'relative';
+        this.container.style.display = 'flex';
+        this.container.style.alignItems = 'center';
+        // Create wrapper for input and response time
+        this.inputWrapper = document.createElement('div');
+        this.inputWrapper.style.cssText = 'position: relative; flex: 1; display: flex; align-items: center;';
+        this.input = document.createElement('input');
+        this.input.type = 'text';
+        this.input.placeholder = this.options.placeholder;
+        this.input.style.cssText = this.getInputStyle();
+        this.injectPlaceholderStyles();
+        this.inputWrapper.appendChild(this.input);
+        // Response time element
+        this.responseTimeElement = document.createElement('span');
+        this.responseTimeElement.style.cssText = this.getResponseTimeStyle();
+        this.responseTimeElement.style.display = 'none';
+        this.inputWrapper.appendChild(this.responseTimeElement);
+        this.container.appendChild(this.inputWrapper);
+        this.suggestionsContainer = document.createElement('div');
+        this.suggestionsContainer.style.cssText = this.getSuggestionsContainerStyle();
+        this.suggestionsContainer.style.display = 'none';
+        this.container.appendChild(this.suggestionsContainer);
+    }
+    injectPlaceholderStyles() {
+        const theme = this.provider.theme;
+        // If input doesn't have an ID, add one
+        if (!this.input.id) {
+            this.input.id = 'seekora-search-input-' + Math.random().toString(36).substr(2, 9);
+        }
+        const styleId = `seekora-searchbar-placeholder-${this.input.id}`;
+        // Remove existing style if it exists
+        const existingStyle = document.getElementById(styleId);
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+        // Create new style element
+        const style = document.createElement('style');
+        style.id = styleId;
+        const placeholderColor = theme.colors.textSecondary || theme.colors.text;
+        style.textContent = `
+      #${this.input.id}::placeholder {
+        color: ${placeholderColor};
+        opacity: 0.6;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    attachEventListeners() {
+        this.input.addEventListener('input', (e) => {
+            const query = e.target.value;
+            this.handleInputChange(query);
+        });
+        this.input.addEventListener('focus', () => {
+            this.isFocused = true;
+            // Fetch suggestions with empty query when input is focused
+            // This will show trending products/brands even when no query is typed
+            if (this.options.showSuggestions && this.options.enableRichSuggestions) {
+                console.log('🔍 SearchBar: Input focused, fetching empty query suggestions');
+                this.handleInputChange(''); // Trigger fetch with empty query
+            }
+            else {
+                this.updateSuggestionsVisibility();
+            }
+        });
+        this.input.addEventListener('blur', (e) => {
+            // Check if the blur is caused by clicking on a suggestion
+            const relatedTarget = e.relatedTarget;
+            if (relatedTarget && this.suggestionsContainer.contains(relatedTarget)) {
+                return; // Don't hide suggestions if clicking on them
+            }
+            setTimeout(() => {
+                // Double-check that we're not clicking on suggestions
+                if (!this.suggestionsContainer.contains(document.activeElement)) {
+                    this.isFocused = false;
+                    this.updateSuggestionsVisibility();
+                    this.selectedIndex = -1;
+                }
+            }, 100);
+        });
+        this.input.addEventListener('keydown', (e) => {
+            this.handleKeyDown(e);
+        });
+    }
+    handleInputChange(query) {
+        this.selectedIndex = -1;
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        // For rich suggestions, allow empty query to show trending products/brands
+        const isRichSuggestions = this.options.enableRichSuggestions;
+        const isEmptyQuery = query.trim().length === 0;
+        const hasMinLength = query.length >= this.options.minQueryLength;
+        if (!this.options.showSuggestions) {
+            this.suggestions = [];
+            this.renderSuggestions();
+            return;
+        }
+        // For basic suggestions, still require minQueryLength
+        // For rich suggestions, allow empty query
+        if (!isRichSuggestions && !hasMinLength) {
+            this.suggestions = [];
+            this.renderSuggestions();
+            return;
+        }
+        this.debounceTimer = setTimeout(async () => {
+            try {
+                if (this.options.enableRichSuggestions) {
+                    // Fetch rich suggestions with dropdown recommendations
+                    // Empty query will return trending products/brands
+                    console.log('🚀 SearchBar: enableRichSuggestions is TRUE, calling fetchRichSuggestions for query:', query || '(empty)');
+                    await this.fetchRichSuggestions(query);
+                }
+                else {
+                    // Fallback to basic suggestions
+                    console.log('⚠️ SearchBar: enableRichSuggestions is FALSE, using basic suggestions');
+                    const response = await this.client.getSuggestions(query, this.options.maxSuggestions);
+                    const rawSuggestions = Array.isArray(response) ? response : [];
+                    this.suggestions = rawSuggestions.map((suggestion) => {
+                        const suggestionQuery = (suggestion.query ?? suggestion.text ?? suggestion);
+                        const count = (suggestion.popularity !== undefined
+                            ? suggestion.popularity
+                            : (suggestion.count !== undefined ? suggestion.count : undefined));
+                        return {
+                            query: typeof suggestionQuery === 'string' ? suggestionQuery : String(suggestionQuery),
+                            count: typeof count === 'number' ? count : undefined,
+                            metadata: suggestion,
+                        };
+                    });
+                    this.richSuggestionsData = null;
+                }
+                this.renderSuggestions();
+            }
+            catch (err) {
+                log.error('Error fetching suggestions:', err);
+                this.suggestions = [];
+                this.richSuggestionsData = null;
+                this.renderSuggestions();
+            }
+        }, this.options.debounceMs);
+    }
+    handleKeyDown(e) {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (this.suggestions.length > 0) {
+                    this.selectedIndex = this.selectedIndex < this.suggestions.length - 1
+                        ? this.selectedIndex + 1
+                        : this.selectedIndex;
+                    this.renderSuggestions();
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (this.suggestions.length > 0) {
+                    this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : -1;
+                    this.renderSuggestions();
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.suggestions.length > 0 && this.selectedIndex >= 0 && this.selectedIndex < this.suggestions.length) {
+                    this.selectSuggestion(this.suggestions[this.selectedIndex].query);
+                }
+                else {
+                    // Search with "*" if query is empty
+                    this.performSearch();
+                }
+                break;
+            case 'Escape':
+                this.isFocused = false;
+                this.selectedIndex = -1;
+                this.updateSuggestionsVisibility();
+                this.input.blur();
+                break;
+        }
+    }
+    selectSuggestion(suggestion) {
+        this.input.value = suggestion;
+        this.selectedIndex = -1;
+        this.isFocused = false;
+        this.updateSuggestionsVisibility();
+        this.input.blur();
+        if (this.options.onSuggestionSelect) {
+            this.options.onSuggestionSelect(suggestion);
+        }
+        this.performSearch();
+    }
+    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),
+            });
+            // 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',
+                },
+            });
+            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');
+            }
+            this.richSuggestionsData = data;
+            // Transform hits to SuggestionItem format
+            this.suggestions = (data.data.hits || []).map((hit) => ({
+                query: hit.query,
+                count: hit.popularity,
+                metadata: hit,
+            }));
+            console.log('✨ 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);
+        }
+    }
+    async fallbackToBasicSuggestions(query) {
+        try {
+            const response = await this.client.getSuggestions(query, this.options.maxSuggestions);
+            const rawSuggestions = Array.isArray(response) ? response : [];
+            this.suggestions = rawSuggestions.map((suggestion) => {
+                const suggestionQuery = (suggestion.query ?? suggestion.text ?? suggestion);
+                const count = (suggestion.popularity !== undefined
+                    ? suggestion.popularity
+                    : (suggestion.count !== undefined ? suggestion.count : undefined));
+                return {
+                    query: typeof suggestionQuery === 'string' ? suggestionQuery : String(suggestionQuery),
+                    count: typeof count === 'number' ? count : undefined,
+                    metadata: suggestion,
+                };
+            });
+            this.richSuggestionsData = null;
+        }
+        catch (fallbackErr) {
+            log.error('SearchBar: Fallback suggestions also failed', fallbackErr);
+            this.suggestions = [];
+            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();
+        log.verbose('SearchBar: Setting query in state manager', { query });
+        // Update state manager - this will automatically trigger search
+        // State manager handles debouncing and search triggering
+        this.provider.stateManager.setQuery(query);
+        // Note: onSearch callback will be called via state manager subscription
+    }
+    renderSuggestions() {
+        this.suggestionsContainer.innerHTML = '';
+        const hasRichData = this.richSuggestionsData?.data?.dropdown_recommendations;
+        const recommendations = hasRichData ? this.richSuggestionsData.data.dropdown_recommendations : null;
+        console.log('🎨 SearchBar: renderSuggestions called', {
+            hasRichData,
+            recommendationsKeys: recommendations ? Object.keys(recommendations) : [],
+            trendingSearchesCount: recommendations?.trending_searches?.length || 0,
+            trendingProductsCount: recommendations?.trending_products?.length || 0,
+            popularBrandsCount: recommendations?.popular_brands?.length || 0,
+            suggestionsCount: this.suggestions.length,
+        });
+        // Render Query Suggestions Section
+        const displayedSuggestions = this.suggestions.slice(0, this.options.maxSuggestions);
+        if (displayedSuggestions.length > 0) {
+            const suggestionsSection = document.createElement('div');
+            suggestionsSection.style.cssText = this.getSectionStyle();
+            const sectionTitle = document.createElement('div');
+            sectionTitle.style.cssText = this.getSectionTitleStyle();
+            sectionTitle.textContent = 'Suggestions';
+            suggestionsSection.appendChild(sectionTitle);
+            const suggestionsList = document.createElement('div');
+            suggestionsList.style.cssText = this.getSuggestionsListStyle();
+            displayedSuggestions.forEach((suggestion, index) => {
+                const item = document.createElement('div');
+                item.style.cssText = this.getSuggestionItemStyle(index === this.selectedIndex);
+                const querySpan = document.createElement('span');
+                querySpan.textContent = suggestion.query;
+                item.appendChild(querySpan);
+                if (suggestion.count !== undefined) {
+                    const countSpan = document.createElement('span');
+                    countSpan.textContent = ` (${suggestion.count})`;
+                    countSpan.style.cssText = this.getCountStyle();
+                    item.appendChild(countSpan);
+                }
+                // Use mousedown instead of click to fire before blur event
+                item.addEventListener('mousedown', (e) => {
+                    e.preventDefault(); // Prevent input blur
+                    this.selectSuggestion(suggestion.query);
+                });
+                // Also handle click for accessibility
+                item.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.selectSuggestion(suggestion.query);
+                });
+                suggestionsList.appendChild(item);
+            });
+            suggestionsSection.appendChild(suggestionsList);
+            this.suggestionsContainer.appendChild(suggestionsSection);
+        }
+        // Render Trending Searches Section
+        if (recommendations?.trending_searches && recommendations.trending_searches.length > 0) {
+            const trendingSection = document.createElement('div');
+            trendingSection.style.cssText = this.getSectionStyle();
+            const sectionTitle = document.createElement('div');
+            sectionTitle.style.cssText = this.getSectionTitleStyle();
+            sectionTitle.textContent = 'Trending Searches';
+            trendingSection.appendChild(sectionTitle);
+            const trendingList = document.createElement('div');
+            trendingList.style.cssText = this.getSuggestionsListStyle();
+            recommendations.trending_searches.forEach((trend) => {
+                const item = document.createElement('div');
+                item.style.cssText = this.getSuggestionItemStyle(false);
+                const querySpan = document.createElement('span');
+                querySpan.textContent = trend.query;
+                item.appendChild(querySpan);
+                if (trend.searches !== undefined) {
+                    const countSpan = document.createElement('span');
+                    countSpan.textContent = ` (${trend.searches})`;
+                    countSpan.style.cssText = this.getCountStyle();
+                    item.appendChild(countSpan);
+                }
+                item.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    this.selectSuggestion(trend.query);
+                });
+                item.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.selectSuggestion(trend.query);
+                });
+                trendingList.appendChild(item);
+            });
+            trendingSection.appendChild(trendingList);
+            this.suggestionsContainer.appendChild(trendingSection);
+        }
+        // Render Trending Products Section
+        if (recommendations?.trending_products && recommendations.trending_products.length > 0) {
+            const productsSection = document.createElement('div');
+            productsSection.style.cssText = this.getSectionStyle();
+            const sectionTitle = document.createElement('div');
+            sectionTitle.style.cssText = this.getSectionTitleStyle();
+            sectionTitle.textContent = 'Trending Products';
+            productsSection.appendChild(sectionTitle);
+            const productsGrid = document.createElement('div');
+            productsGrid.style.cssText = this.getProductsGridStyle();
+            recommendations.trending_products.forEach((product) => {
+                const productCard = document.createElement('div');
+                productCard.style.cssText = this.getProductCardStyle();
+                if (product.image) {
+                    const img = document.createElement('img');
+                    img.src = product.image;
+                    img.alt = product.title;
+                    img.style.cssText = this.getProductImageStyle();
+                    img.onerror = () => {
+                        img.style.display = 'none';
+                    };
+                    productCard.appendChild(img);
+                }
+                const productInfo = document.createElement('div');
+                productInfo.style.cssText = this.getProductInfoStyle();
+                const title = document.createElement('div');
+                title.style.cssText = this.getProductTitleStyle();
+                title.textContent = product.title;
+                productInfo.appendChild(title);
+                if (product.price !== undefined) {
+                    const price = document.createElement('div');
+                    price.style.cssText = this.getProductPriceStyle();
+                    const currency = product.currency || '$';
+                    price.textContent = `${currency}${product.price}`;
+                    productInfo.appendChild(price);
+                }
+                productCard.appendChild(productInfo);
+                productCard.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    if (this.options.onProductClick) {
+                        this.options.onProductClick(product.id, product);
+                    }
+                    else if (product.url) {
+                        window.location.href = product.url;
+                    }
+                });
+                productCard.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    if (this.options.onProductClick) {
+                        this.options.onProductClick(product.id, product);
+                    }
+                    else if (product.url) {
+                        window.location.href = product.url;
+                    }
+                });
+                productsGrid.appendChild(productCard);
+            });
+            productsSection.appendChild(productsGrid);
+            this.suggestionsContainer.appendChild(productsSection);
+        }
+        // Render Popular Brands Section
+        if (recommendations?.popular_brands && recommendations.popular_brands.length > 0) {
+            const brandsSection = document.createElement('div');
+            brandsSection.style.cssText = this.getSectionStyle();
+            const sectionTitle = document.createElement('div');
+            sectionTitle.style.cssText = this.getSectionTitleStyle();
+            sectionTitle.textContent = 'Popular Brands';
+            brandsSection.appendChild(sectionTitle);
+            const brandsList = document.createElement('div');
+            brandsList.style.cssText = this.getBrandsListStyle();
+            recommendations.popular_brands.forEach((brand) => {
+                const brandItem = document.createElement('div');
+                brandItem.style.cssText = this.getBrandItemStyle();
+                if (brand.logo) {
+                    const img = document.createElement('img');
+                    img.src = brand.logo;
+                    img.alt = brand.name;
+                    img.style.cssText = this.getBrandLogoStyle();
+                    img.onerror = () => {
+                        // Fallback to text if image fails
+                        img.style.display = 'none';
+                        const textSpan = document.createElement('span');
+                        textSpan.textContent = brand.name;
+                        textSpan.style.cssText = this.getBrandNameStyle();
+                        brandItem.appendChild(textSpan);
+                    };
+                    brandItem.appendChild(img);
+                }
+                else {
+                    const textSpan = document.createElement('span');
+                    textSpan.textContent = brand.name;
+                    textSpan.style.cssText = this.getBrandNameStyle();
+                    brandItem.appendChild(textSpan);
+                }
+                brandItem.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    if (this.options.onBrandClick) {
+                        this.options.onBrandClick(brand.name, brand);
+                    }
+                    else {
+                        this.selectSuggestion(brand.name);
+                    }
+                });
+                brandItem.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    if (this.options.onBrandClick) {
+                        this.options.onBrandClick(brand.name, brand);
+                    }
+                    else {
+                        this.selectSuggestion(brand.name);
+                    }
+                });
+                brandsList.appendChild(brandItem);
+            });
+            brandsSection.appendChild(brandsList);
+            this.suggestionsContainer.appendChild(brandsSection);
+        }
+        this.updateSuggestionsVisibility();
+    }
+    updateSuggestionsVisibility() {
+        // Show dropdown if there are suggestions OR rich data (trending products/brands)
+        const hasRichData = this.richSuggestionsData?.data?.dropdown_recommendations;
+        const hasTrendingProducts = (hasRichData?.trending_products?.length ?? 0) > 0;
+        const hasTrendingSearches = (hasRichData?.trending_searches?.length ?? 0) > 0;
+        const hasPopularBrands = (hasRichData?.popular_brands?.length ?? 0) > 0;
+        const hasAnyContent = this.suggestions.length > 0 || hasTrendingProducts || hasTrendingSearches || hasPopularBrands;
+        // For rich suggestions, allow showing even with empty query if there's rich data
+        const queryLength = this.input.value.length;
+        const hasMinLength = queryLength >= this.options.minQueryLength;
+        const isEmptyWithRichData = queryLength === 0 && (hasTrendingProducts || hasTrendingSearches || hasPopularBrands);
+        const canShow = hasMinLength || (this.options.enableRichSuggestions && isEmptyWithRichData);
+        const shouldShow = this.isFocused &&
+            this.options.showSuggestions &&
+            canShow &&
+            hasAnyContent;
+        console.log('👁️ updateSuggestionsVisibility', {
+            isFocused: this.isFocused,
+            hasAnyContent,
+            suggestionsCount: this.suggestions.length,
+            hasTrendingProducts,
+            hasPopularBrands,
+            queryLength,
+            isEmptyWithRichData,
+            canShow,
+            shouldShow,
+        });
+        this.suggestionsContainer.style.display = shouldShow ? 'block' : 'none';
+    }
+    getInputStyle() {
+        const theme = this.provider.theme;
+        return `
+      flex: 1;
+      padding: ${theme.spacing.medium};
+      font-size: ${theme.typography.fontSize.medium};
+      font-family: ${theme.typography.fontFamily};
+      background-color: ${theme.colors.background};
+      color: ${theme.colors.text};
+      border: 1px solid ${theme.colors.border};
+      border-radius: ${typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium};
+      outline: none;
+    `;
+    }
+    getResponseTimeStyle() {
+        const theme = this.provider.theme;
+        return `
+      margin-left: ${theme.spacing.small};
+      font-size: ${theme.typography.fontSize.small};
+      color: ${theme.colors.text};
+      opacity: 0.7;
+      white-space: nowrap;
+    `;
+    }
+    getSuggestionsContainerStyle() {
+        const theme = this.provider.theme;
+        return `
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin-top: ${theme.spacing.small};
+      background-color: ${theme.colors.background};
+      border: 1px solid ${theme.colors.border};
+      border-radius: ${typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium};
+      box-shadow: ${theme.shadows.medium};
+      max-height: 600px;
+      overflow-y: auto;
+      z-index: 1000;
+      width: 100%;
+    `;
+    }
+    getSuggestionItemStyle(isSelected) {
+        const theme = this.provider.theme;
+        return `
+      padding: ${theme.spacing.medium};
+      cursor: pointer;
+      background-color: ${isSelected ? theme.colors.hover : 'transparent'};
+      color: ${theme.colors.text};
+      font-family: ${theme.typography.fontFamily};
+      transition: ${theme.transitions?.fast || '150ms ease-in-out'};
+    `;
+    }
+    getSectionStyle() {
+        const theme = this.provider.theme;
+        return `
+      padding: ${theme.spacing.large || '1.5rem'} ${theme.spacing.medium};
+      border-bottom: 1px solid ${theme.colors.border};
+    `;
+    }
+    getSectionTitleStyle() {
+        const theme = this.provider.theme;
+        return `
+      font-size: ${theme.typography.fontSize.small};
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: ${theme.colors.textSecondary || theme.colors.text};
+      opacity: 0.7;
+      margin-bottom: ${theme.spacing.medium};
+    `;
+    }
+    getSuggestionsListStyle() {
+        return `
+      display: flex;
+      flex-direction: column;
+    `;
+    }
+    getCountStyle() {
+        const theme = this.provider.theme;
+        return `
+      opacity: 0.6;
+      margin-left: ${theme.spacing.small};
+      font-size: ${theme.typography.fontSize.small};
+    `;
+    }
+    getProductsGridStyle() {
+        return `
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: ${this.provider.theme.spacing.medium};
+      max-height: 300px;
+      overflow-y: auto;
+    `;
+    }
+    getProductCardStyle() {
+        const theme = this.provider.theme;
+        const borderRadius = typeof theme.borderRadius === 'string'
+            ? theme.borderRadius
+            : theme.borderRadius.medium;
+        return `
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      border: 1px solid ${theme.colors.border};
+      border-radius: ${borderRadius};
+      overflow: hidden;
+      transition: ${theme.transitions?.fast || '150ms ease-in-out'};
+      background-color: ${theme.colors.background};
+    `;
+    }
+    getProductImageStyle() {
+        return `
+      width: 100%;
+      height: 120px;
+      object-fit: cover;
+      background-color: #f0f0f0;
+    `;
+    }
+    getProductInfoStyle() {
+        const theme = this.provider.theme;
+        return `
+      padding: ${theme.spacing.small} ${theme.spacing.medium};
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.spacing.xsmall ?? theme.spacing.small ?? '0.25rem'};
+    `;
+    }
+    getProductTitleStyle() {
+        const theme = this.provider.theme;
+        return `
+      font-size: ${theme.typography.fontSize.small};
+      font-weight: 500;
+      color: ${theme.colors.text};
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    `;
+    }
+    getProductPriceStyle() {
+        const theme = this.provider.theme;
+        return `
+      font-size: ${theme.typography.fontSize.medium};
+      font-weight: 600;
+      color: ${theme.colors.primary || theme.colors.text};
+    `;
+    }
+    getBrandsListStyle() {
+        return `
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${this.provider.theme.spacing.medium};
+      max-height: 200px;
+      overflow-y: auto;
+    `;
+    }
+    getBrandItemStyle() {
+        const theme = this.provider.theme;
+        const borderRadius = typeof theme.borderRadius === 'string'
+            ? theme.borderRadius
+            : theme.borderRadius.medium;
+        return `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      padding: ${theme.spacing.small};
+      border: 1px solid ${theme.colors.border};
+      border-radius: ${borderRadius};
+      transition: ${theme.transitions?.fast || '150ms ease-in-out'};
+      background-color: ${theme.colors.background};
+      min-width: 80px;
+      min-height: 60px;
+    `;
+    }
+    getBrandLogoStyle() {
+        return `
+      max-width: 60px;
+      max-height: 40px;
+      object-fit: contain;
+    `;
+    }
+    getBrandNameStyle() {
+        const theme = this.provider.theme;
+        return `
+      font-size: ${theme.typography.fontSize.small};
+      font-weight: 500;
+      color: ${theme.colors.text};
+      text-align: center;
+    `;
+    }
+    /**
+     * Trigger a search programmatically
+     * @param query - Optional query string. If not provided, uses current input value or "*" for all
+     */
+    async search(query) {
+        if (query !== undefined) {
+            this.input.value = query;
+        }
+        await this.performSearch();
+    }
+    destroy() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+        if (this.unsubscribeStateManager) {
+            this.unsubscribeStateManager();
+            this.unsubscribeStateManager = null;
+        }
+        this.container.innerHTML = '';
+    }
+}