wineater-bot 4.16.1 → 4.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "4.16.1",
+  "version": "4.20.0",
   "description": "",
   "main": "dist/wineater-chatbot.mjs",
   "module": "src/index.js",
@@ -22,15 +22,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@openreplay/tracker": "^14.0.4",
-    "flagsmith": "^7.0.2",
-    "vite": "^5.2.9",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
     "@playwright/test": "^1.55.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/node": "^22",
     "@vitest/browser": "^3.2.4",
     "eslint": "^9.36.0",
@@ -42,9 +40,9 @@
     "prettier-plugin-svelte": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript-eslint": "^8.44.1",
+    "vite": "^5.2.9",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4",
-    "vitest-browser-svelte": "^1.1.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0"
+    "vitest-browser-svelte": "^1.1.0"
   }
 }

package/src/App.svelte

@@ -1,35 +1,46 @@
 <script lang="ts">
-	import { setCookie, setUniqueUserCookie, trackWidgetEvent } from './services/analytics/analytics';
-	import Tracker from '@openreplay/tracker';
+	import { setCookie, trackWidgetEvent } from './services/analytics/analytics';
 	import type { RecommendedWine, Wine, WineId } from './services/api/api';
-	import { wineaterApi, apiVersion } from './services/api/api';
+	import { wineaterApi, apiVersion, cacheScope } from './services/api/api';
+	import { readCache, writeCache } from './services/cache';
 	import { onMount } from 'svelte';
 	import { WIDGET_EVENTS } from './services/analytics/constants';
+	import { trackFeedback } from './services/profile/events';
+	import { newQueryId } from './services/profile/uid';
 	import Header from './components/Header.svelte';
 	import Footer from './components/Footer.svelte';
 	import Search from './components/Search.svelte';
-	import Loader from './components/Loader.svelte';
+	import SkeletonTiles from './components/SkeletonTiles.svelte';
 	import WineTile from './components/WineTile.svelte';
 	import Action from './components/ui/Action.svelte';
+	import CookieConsent from './components/CookieConsent.svelte';
+	import { shouldAskConsent, onConsentChange } from './services/profile/consent.svelte';
 	import { appStore } from './services/store/app-store.svelte';
 	import { getTranslation, translateTexts } from './services/i18n/i18n';
-	import { generateInlineStyle } from './services/ui-config/utils';
+	import { generateInlineStyle, preconnectFontHosts } from './services/ui-config/utils';
 
 	function initCookies() {
+		// chatbotToken — токен магазина, не данные посетителя. uniqueUserID
+		// больше не ставится при загрузке: его создаёт trackWidgetEvent, и только
+		// когда трекинг разрешён (consent.svelte.ts).
 		setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
-		setUniqueUserCookie();
 	}
 
 	const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
-	const tracker = new Tracker({ projectKey: 'PA8j9fAi49i6g2QnvpNs', __DISABLE_SECURE_MODE: true });
-	tracker.start();
 	initCookies();
+	preconnectFontHosts();
+
+	const INSTANT_CACHE_MAX_AGE_MS = 6 * 60 * 60 * 1000;
+	const instantCacheKey = `${cacheScope}:instant`;
 
 	const widgetType = window?.wineaterData?.WIDGET_TYPE || 'store';
 	const countryCode = window?.wineaterData?.COUNTRY_CODE || null;
 	const widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner';
 
 	let initialized = $state(false);
+	let configFailed = $state(false);
+	// Set once the user searches/clicks, so a late instant response never overwrites their results
+	let userActed = false;
 	let isLoading = $state(false);
 	let isLoadingMore = $state(false);
 	let results = $state<RecommendedWine[] | Wine[]>([]);
@@ -47,6 +58,20 @@
 	// Всё, что уже показывали по текущему запросу — «Try again» заменяет выдачу,
 	// и без накопления повторный клик вернул бы те же вина.
 	let seenIds = $state<string[]>([]);
+	// Один id на поиск: уходит в тело search/v2 и в каждое событие обратной
+	// связи (shown/click/...), чтобы бэкенд связал клики с конкретной выдачей.
+	let currentQueryId: string | null = null;
+
+	// Профиль вкуса: что показали и в каком порядке. Пустая выдача не событие.
+	function feedbackShown(wines: (Wine | RecommendedWine)[], text: string) {
+		if (!wines?.length) return;
+		trackFeedback({
+			type: 'shown',
+			query_id: currentQueryId ?? undefined,
+			sku_ids: wines.map((w) => w.id),
+			text: text || undefined
+		});
+	}
 	let appLanguage = $derived(appStore.getAppLanguage());
 	let storeLanguage = $derived(appStore.getStoreLanguage());
 	let apiKey = $derived(appStore.getApiKey());
@@ -103,15 +128,30 @@
 		return translatedResults;
 	}
 
-	async function loadInstantRecommendations() {
-		isLoading = true;
+	// Stale-while-revalidate: cached wines are painted immediately and the fresh
+	// response only refreshes the cache for the next visit, so the grid the
+	// visitor is already looking at never swaps under their cursor.
+	async function loadInstantRecommendations(configReady: Promise<void>) {
+		const cached = readCache<Wine[]>(instantCacheKey, INSTANT_CACHE_MAX_AGE_MS);
+		const hasCached = !!cached?.length;
+		if (hasCached) {
+			results = cached;
+		} else {
+			isLoading = true;
+		}
 		try {
-			results = await wineaterApi.getInstantRecommendations();
+			const fresh = await wineaterApi.getInstantRecommendations();
+			if (fresh.length > 0) writeCache(instantCacheKey, fresh);
+			if (!hasCached && !userActed) results = fresh;
 		} catch (error) {
 			console.error('[wineater] instant recommendations error:', error);
-			setSearchError();
+			if (!hasCached && !userActed) {
+				// the message is translated, which needs the store language
+				await configReady;
+				setSearchError();
+			}
 		} finally {
-			isLoading = false;
+			if (!userActed) isLoading = false;
 		}
 	}
 
@@ -128,12 +168,28 @@
 
 	async function handleSearch(event) {
 		event.preventDefault();
+		userActed = true;
 
 		let query = '';
 		try {
 			isLoading = true;
 			clearError();
 
+			query = searchQuery.trim() + ';';
+			lastSearchedQuery = query;
+			currentQueryId = newQueryId();
+			try {
+				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
+			} catch (error) {
+				console.error('Error tracking search event:', error);
+			}
+
+			// Запрос уходит сразу, карточки уезжают вверх, пока он в полёте.
+			// Пустой catch нужен, чтобы отказ запроса во время анимации не стал
+			// unhandled rejection: ошибку обработает await ниже.
+			const request = wineaterApi.getWineRecommendationsSearch(query, currentQueryId);
+			request.catch(() => {});
+
 			// шаг 1: плавно поднять карточки
 			await animateClearAll(220);
 
@@ -143,15 +199,7 @@
 			hasMore = false;
 			seenIds = [];
 
-			query = searchQuery.trim() + ';';
-			lastSearchedQuery = query;
-			try {
-				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
-			} catch (error) {
-				console.error('Error tracking search event:', error);
-			}
-
-			const searchResults = await wineaterApi.getWineRecommendationsSearch(query);
+			const searchResults = await request;
 
 			if (!searchResults || searchResults.length === 0) {
 				results = [];
@@ -165,6 +213,7 @@
 				// "more"-эндпоинта. Неполная выдача (< 4) означает, что кандидаты и так
 				// кончились: кнопка в этом случае только мигнула бы впустую.
 				hasMore = apiVersion === '2' && searchResults.length >= 4;
+				feedbackShown(searchResults, query);
 				trackWidgetEvent(WIDGET_EVENTS.SEARCH_RESULTS_DISPLAYED, storeId, {
 					results_count: searchResults.length,
 					results: searchResults,
@@ -186,6 +235,7 @@
 
 	async function handleShowMore() {
 		if (isLoadingMore || !hasMore) return;
+		userActed = true;
 		// Выдача заменяется целиком, поэтому держим предыдущую под рукой: если
 		// новых вин не нашлось или запрос упал, покупатель не должен остаться
 		// перед пустой сеткой.
@@ -198,15 +248,21 @@
 			// показанное за сессию — иначе следующий клик вернёт те же вина.
 			seenIds = [...new Set([...seenIds, ...results.map((w) => w.id)])];
 
-			// Тот же жест, что и при поиске: карточки уезжают вверх, дальше лоадер
+			// Тот же жест, что и при поиске: запрос уходит сразу, карточки уезжают
+			// вверх, дальше скелетон
+			const request = wineaterApi.getMoreWineRecommendations(lastSearchedQuery, seenIds);
+			request.catch(() => {});
 			await animateClearAll(220);
 			results = [];
 			isAnimating = false;
 
-			const { recommendations, hasMore: more } = await wineaterApi.getMoreWineRecommendations(
-				lastSearchedQuery,
-				seenIds
-			);
+			const { recommendations, hasMore: more } = await request;
+			trackFeedback({
+				type: 'more',
+				query_id: currentQueryId ?? undefined,
+				text: lastSearchedQuery || undefined
+			});
+			feedbackShown(recommendations, lastSearchedQuery);
 			trackWidgetEvent(WIDGET_EVENTS.SHOW_MORE_CLICKED, storeId, {
 				query: lastSearchedQuery,
 				results_count: recommendations.length
@@ -224,6 +280,7 @@
 	}
 
 	async function handleSimilarClick(wine: Wine | RecommendedWine) {
+		userActed = true;
 		try {
 			isLoading = true;
 			clearError();
@@ -231,14 +288,20 @@
 				wine_id: wine.id,
 				wine_title: wine.title
 			});
+			trackFeedback({ type: 'similar', query_id: currentQueryId ?? undefined, sku_ids: [wine.id] });
+			// «Похожие» — новая выдача без текста запроса: свой id, чтобы shown не
+			// приписались к предыдущему поиску.
+			currentQueryId = newQueryId();
 
+			const request = wineaterApi.getSimilarWines(wine.id);
+			request.catch(() => {});
 			await animateClearAll(220);
 			results = [];
 			isAnimating = false;
 			hasMore = false;
 			selectedWineId = null;
 
-			const similarWines = await wineaterApi.getSimilarWines(wine.id);
+			const similarWines = await request;
 			searchQuery = wine.title;
 			lastSearchedQuery = '';
 
@@ -248,6 +311,7 @@
 				errorMessage = getTranslation({ key: 'noResultsMessage', lang: appLanguage });
 			} else {
 				results = similarWines;
+				feedbackShown(similarWines, '');
 			}
 		} catch (error) {
 			results = [];
@@ -284,6 +348,7 @@
 
 		selectedWineId = wine.id;
 
+		trackFeedback({ type: 'click', query_id: currentQueryId ?? undefined, sku_ids: [wine.id], position: index });
 		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_VIEWED, storeId, {
 			wine_id: wine.id,
 			wine_title: wine.title,
@@ -292,6 +357,9 @@
 	}
 
 	function handleBuyLinkClick(wine: Wine | RecommendedWine, index: number) {
+		// Переход на страницу товара — самый сильный сигнал, который виджет видит
+		// (корзины внутри виджета нет). keepalive-батч доедет и после ухода со страницы.
+		trackFeedback({ type: 'buy_click', query_id: currentQueryId ?? undefined, sku_ids: [wine.id], position: index });
 		trackWidgetEvent(WIDGET_EVENTS.BUY_BUTTON_CLICKED, storeId, {
 			wine_id: wine.id,
 			wine_title: wine.title,
@@ -333,6 +401,12 @@
 			return;
 		}
 
+		trackFeedback({
+			type: 'click',
+			query_id: currentQueryId ?? undefined,
+			sku_ids: [wine.id],
+			position: results.findIndex((w) => w.id === wine.id)
+		});
 		trackWidgetEvent(WIDGET_EVENTS.WINE_CARD_CLICK, storeId, {
 			wine_id: wine.id,
 			wine_title: wine.title
@@ -358,25 +432,39 @@
 		}
 	});
 
-	onMount(async () => {
-		// initialize store first
-		await appStore.initializeStore();
-		if (!isStoreInitialized) return;
+	onMount(() => {
+		// Close popups on outside click
+		document.addEventListener('click', handleClickOutside);
 
-		uiConfig = appStore.getUiConfig();
-		if (uiConfig.customCss) {
-			generateInlineStyle(uiConfig.customCss);
-		}
+		(async () => {
+			// Config and the first wines do not depend on each other (the token is
+			// known up front), so both requests start together.
+			const configReady = appStore.initializeStore();
+			loadInstantRecommendations(configReady);
 
-		await loadInstantRecommendations();
-		trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
-		initialized = true;
+			await configReady;
+			if (!isStoreInitialized) {
+				configFailed = true;
+				return;
+			}
 
-		// Add global click listener for closing popups
-		document.addEventListener('click', handleClickOutside);
+			if (uiConfig.customCss) {
+				generateInlineStyle(uiConfig.customCss);
+			}
+
+			initialized = true;
+			// без согласия (EU-магазин) trackWidgetEvent — no-op; после «Принять»
+			// событие инициализации отправляется один раз, см. onConsentChange ниже
+			trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
+		})();
+
+		const offConsent = onConsentChange((c) => {
+			if (c === 'granted') trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
+		});
 
 		return () => {
 			document.removeEventListener('click', handleClickOutside);
+			offConsent();
 		};
 	});
 </script>
@@ -394,10 +482,6 @@
 
 		<Search bind:searchQuery onSubmit={handleSearch} {initialized} />
 
-		{#if isLoading}
-			<Loader />
-		{/if}
-
 		<div class="wr-App-content">
 			{#if errorMessage}
 				<div class="wr-App-error">
@@ -430,11 +514,23 @@
 						</Action>
 					</div>
 				{/if}
+			{:else if isLoading}
+				<SkeletonTiles />
 			{/if}
 		</div>
 
+		{#if shouldAskConsent()}
+			<CookieConsent lang={appLanguage} />
+		{/if}
+
 		<Footer {countryCode} />
 	</div>
+{:else if !configFailed}
+	<!-- Shell with the same footprint as the widget while the store config loads -->
+	<div class="wr-App wr-App--loading" aria-busy="true">
+		<div class="wr-App-loadingTop"></div>
+		<SkeletonTiles />
+	</div>
 {/if}
 
 <style>
@@ -474,6 +570,11 @@
 		position: relative;
 	}
 
+	.wr-App-loadingTop {
+		/* roughly the height of Header + Search, so tiles do not jump once they render */
+		height: 150px;
+	}
+
 	.wr-App-picture {
 		display: flex;
 		justify-content: center;

package/src/components/CookieConsent.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	// Consent banner for shops with Stores.requires_cookie_consent (EU).
+	// Rendered inside the widget, not over the host page: the shop has its own
+	// site-wide banner, ours covers only what the widget itself stores/sends.
+	import Action from './ui/Action.svelte';
+	import { getTranslation } from '../services/i18n/i18n';
+	import { setConsent } from '../services/profile/consent.svelte';
+
+	let { lang }: { lang: string } = $props();
+
+	// optional link to the shop's privacy policy
+	const privacyUrl: string | undefined = window?.wineaterData?.PRIVACY_URL;
+
+	const t = (key: string) => getTranslation({ key, lang });
+</script>
+
+<div class="wr-Consent" role="region" aria-label="Cookies">
+	<p class="wr-Consent-text">
+		{t('consentText')}
+		{#if privacyUrl}
+			<a class="wr-Consent-link" href={privacyUrl} target="_blank" rel="noopener noreferrer">
+				{t('consentPrivacy')}
+			</a>
+		{/if}
+	</p>
+	<div class="wr-Consent-actions">
+		<Action variant="outlined" handleClick={() => setConsent('denied')}>
+			{t('consentDecline')}
+		</Action>
+		<Action variant="primary" handleClick={() => setConsent('granted')}>
+			{t('consentAccept')}
+		</Action>
+	</div>
+</div>
+
+<style>
+	.wr-Consent {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		margin: 12px 0 0;
+		padding: 12px 16px;
+		border-radius: 12px;
+		background: #f6f4f2;
+		font-size: 13px;
+		line-height: 1.4;
+		color: #333;
+	}
+	.wr-Consent-text {
+		margin: 0;
+		flex: 1;
+	}
+	.wr-Consent-link {
+		color: inherit;
+		text-decoration: underline;
+		margin-left: 4px;
+	}
+	.wr-Consent-actions {
+		display: flex;
+		gap: 8px;
+		flex-shrink: 0;
+	}
+	@media (max-width: 640px) {
+		.wr-Consent {
+			flex-direction: column;
+			align-items: stretch;
+		}
+		.wr-Consent-actions {
+			justify-content: flex-end;
+		}
+	}
+</style>

package/src/components/Footer.svelte

@@ -37,6 +37,8 @@
 					? 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/divino_logo.svg?x=5'
 					: 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/logo_medium_gray.svg'}
 				alt="Wineater Logo"
+				loading="lazy"
+				decoding="async"
 			/>
 			<span class="wr-Footer-text wr-Footer-text--sommelier">
 				{getTranslation({ key: 'ai_sommelier', lang: appLanguage })}

package/src/components/Search.svelte

@@ -138,7 +138,7 @@
 		width: 24px;
 		height: 24px;
 		flex: 0 0 auto;
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//search.svg?x=1');
+		background-image: url("data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2225%22%20viewBox=%220%200%2024%2025%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M11%2019.3884C15.4183%2019.3884%2019%2015.8067%2019%2011.3884C19%206.97015%2015.4183%203.38843%2011%203.38843C6.58172%203.38843%203%206.97015%203%2011.3884C3%2015.8067%206.58172%2019.3884%2011%2019.3884Z%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M21%2021.3884L16.7%2017.0884%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
 		background-repeat: no-repeat;
 		background-size: contain;
 		z-index: 2;

package/src/components/SkeletonTiles.svelte

@@ -0,0 +1,94 @@
+<!-- Placeholder cards that match the WineTile layout so the grid does not jump when real data arrives -->
+<div class="wr-Skeleton" aria-hidden="true">
+	{#each [0, 1, 2, 3] as n (n)}
+		<div class="wr-Skeleton-tile">
+			<div class="wr-Skeleton-block wr-Skeleton-image"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-price"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-title"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-title wr-Skeleton-title--short"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-button"></div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wr-Skeleton {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	.wr-Skeleton-tile {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;
+		padding: 16px 8px;
+		border-right: 2px solid #f6f7fd;
+	}
+
+	.wr-Skeleton-tile:last-child {
+		border-right: none;
+	}
+
+	.wr-Skeleton-block {
+		border-radius: 6px;
+		background: linear-gradient(90deg, #f1f2f8 25%, #f8f9fc 50%, #f1f2f8 75%);
+		background-size: 200% 100%;
+		animation: wr-shimmer 1.2s linear infinite;
+	}
+
+	.wr-Skeleton-image {
+		width: 60%;
+		height: 200px;
+		margin-bottom: 6px;
+	}
+
+	.wr-Skeleton-price {
+		width: 40px;
+		height: 16px;
+	}
+
+	.wr-Skeleton-title {
+		width: 80%;
+		height: 14px;
+	}
+
+	.wr-Skeleton-title--short {
+		width: 55%;
+	}
+
+	.wr-Skeleton-button {
+		width: 96px;
+		height: 36px;
+		margin-top: 14px;
+		border-radius: 10px;
+	}
+
+	@keyframes wr-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wr-Skeleton-block {
+			animation: none;
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.wr-Skeleton {
+			display: flex;
+			gap: 8px;
+			overflow: hidden;
+			padding: 8px 0;
+		}
+
+		.wr-Skeleton-tile {
+			flex: 0 0 240px;
+		}
+	}
+</style>

package/src/components/WineTile.svelte

@@ -6,6 +6,9 @@
 	import { appStore } from '../services/store/app-store.svelte';
 	import Action from './ui/Action.svelte';
 
+	// Desktop grid has 4 columns: the first row is above the fold
+	const FIRST_ROW_SIZE = 4;
+
 	let lang = $derived(appStore.getAppLanguage());
 
 	let {
@@ -95,7 +98,14 @@
 >
 	<header class="wr-WineTile-header">
 		{#if wine.image}
-			<img src={wine.image} alt={wine.title} class="wr-WineTile-image" />
+			<img
+					src={wine.image}
+					alt={wine.title}
+					class="wr-WineTile-image"
+					loading={index < FIRST_ROW_SIZE ? 'eager' : 'lazy'}
+					fetchpriority={index < FIRST_ROW_SIZE ? 'high' : 'auto'}
+					decoding="async"
+				/>
 		{/if}
 		{#if wine.total}
 			<div class="wr-WineTile-price">

package/src/services/analytics/analytics.ts

@@ -1,3 +1,5 @@
+import { trackingAllowed } from '../profile/consent.svelte';
+
 function generateUUID(): string {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         const r = Math.random() * 16 | 0,
@@ -39,6 +41,9 @@ export function setUniqueUserCookie(): string {
 }
 
 export function trackWidgetEvent(event_type: string, store_id, data = {}, meta = {}) {
+    // Аналитика идентифицирует посетителя (uniqueUserID, user agent, экран) —
+    // в магазинах с requires_cookie_consent только после «Принять».
+    if (!trackingAllowed()) return;
     const endpoint = 'https://admin-api.wineater.com/api/widget-events';
 
     // Ensure we have a unique user ID