vdb-ai-chat 1.0.77 → 1.0.78

package/src/components/FloatingChatButton.tsx

@@ -1,204 +0,0 @@
-import React, { memo, useEffect } from "react";
-import { Platform, StyleSheet, View, Text } from "react-native";
-import styled, { useTheme } from "styled-components/native";
-import { DefaultTheme } from "styled-components/native";
-import { useTranslation } from "react-i18next";
-
-const isWeb = Platform.OS === "web";
-const BUTTON_HEIGHT = 48;
-const BUTTON_WIDTH = isWeb ? 181 : 167;
-const BORDER_WIDTH = 3;
-
-type AISearchButtonVisualProps = {
-  typography: any;
-  height?: number;
-};
-
-export const AISearchButtonVisual = memo(
-  ({ typography, height = BUTTON_HEIGHT }: AISearchButtonVisualProps) => {
-    const theme = useTheme();
-    const { t } = useTranslation();
-    const COLOR_1 = theme["diam-01"] || "#804195";
-    const COLOR_2 = theme["jewelry-01"] || "#58B8A5";
-    const SHADOW_COLOR_1 = theme["diam-01"] || "#804195";
-    const SHADOW_COLOR_2 = theme["jewelry-01"] || "#58B8A5";
-    const SHADOW_COLOR_3 = "#6C7AC8";
-
-    useEffect(() => {
-      if (isWeb && typeof document !== "undefined") {
-        const styleId = "ai-search-button-animations";
-        if (!document.getElementById(styleId)) {
-          const style = document.createElement("style");
-          style.id = styleId;
-          style.textContent = `
-            @keyframes rotateGradient {
-              from { transform: rotate(0deg); }
-              to { transform: rotate(360deg); }
-            }
-            @keyframes rotateShadow {
-              0% { box-shadow: 0 0 20px 4px ${SHADOW_COLOR_1}; }
-              33% { box-shadow: 0 0 25px 6px ${SHADOW_COLOR_2}; }
-              66% { box-shadow: 0 0 22px 5px ${SHADOW_COLOR_3}; }
-              100% { box-shadow: 0 0 20px 4px ${SHADOW_COLOR_1}; }
-            }
-            .ai-search-glow-container {
-              animation: rotateShadow 3s ease-in-out infinite;
-            }
-            .ai-search-gradient-border {
-              animation: rotateGradient 2.5s linear infinite;
-            }
-          `;
-          document.head.appendChild(style);
-        }
-      }
-    }, [SHADOW_COLOR_1, SHADOW_COLOR_2, SHADOW_COLOR_3]);
-
-    if (isWeb) {
-      return (
-        <div
-          className="ai-search-glow-container"
-          style={{
-            width: BUTTON_WIDTH,
-            height: height,
-            borderRadius: height / 2,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            position: "relative",
-          }}
-        >
-          {/* Gradient border wrapper */}
-          <div
-            style={{
-              position: "absolute",
-              width: BUTTON_WIDTH,
-              height: height,
-              borderRadius: height / 2,
-              overflow: "hidden",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            {/* Rotating gradient */}
-            <div
-              className="ai-search-gradient-border"
-              style={{
-                width: BUTTON_WIDTH * 2.5,
-                height: BUTTON_WIDTH * 2.5,
-                borderRadius: BUTTON_WIDTH * 1.25,
-                background: `linear-gradient(135deg, ${COLOR_1}, ${COLOR_2}, ${COLOR_1}, ${COLOR_2})`,
-              }}
-            />
-          </div>
-
-          {/* Button content */}
-          <div
-            style={{
-              width: BUTTON_WIDTH - BORDER_WIDTH * 2,
-              height: height - BORDER_WIDTH * 2,
-              borderRadius: (height - BORDER_WIDTH * 2) / 2,
-              backgroundColor: theme["main-01"] || "#292735",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "row",
-              gap: 2,
-              zIndex: 1,
-            }}
-          >
-            <img
-              src="https://cdn.vdbapp.com/ai/chat-widget/assets/img/VDB_LOGO_WHITE.svg"
-              alt="VDB"
-              style={{ width: 84, height: 24 }}
-            />
-            <span
-              style={{
-                color: theme["diam-05"] || "#ffffff",
-                fontWeight: 500,
-                letterSpacing: 0.3,
-                fontSize: 14,
-                fontFamily: "Roboto, sans-serif",
-              }}
-            >
-              {t("AI Search")}
-            </span>
-          </div>
-        </div>
-      );
-    }
-
-    // Native implementation (simplified without reanimated)
-    return (
-      <View style={[styles.glowContainer, { width: BUTTON_WIDTH, height }]}>
-        <GradientWrapper width={BUTTON_WIDTH} height={height}>
-          <View
-            style={[
-              styles.gradientBorder,
-              {
-                backgroundColor: COLOR_1,
-              },
-            ]}
-          />
-        </GradientWrapper>
-        <ButtonContainer height={height}>
-          <Text style={[styles.text, { color: theme["diam-05"] || "#ffffff" }]}>
-            {t("AI Search")}
-          </Text>
-        </ButtonContainer>
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  glowContainer: {
-    borderRadius: BUTTON_HEIGHT / 2,
-    alignItems: "center",
-    justifyContent: "center",
-    shadowColor: "#6C7AC8",
-    shadowOffset: { width: 3, height: 3 },
-    shadowOpacity: 1,
-    shadowRadius: 14,
-    elevation: 10,
-  },
-  gradientBorder: {
-    width: BUTTON_WIDTH * 2.5,
-    height: BUTTON_WIDTH * 2.5,
-    borderRadius: BUTTON_WIDTH * 1.25,
-  },
-  text: {
-    fontWeight: "500",
-    letterSpacing: 0.3,
-    fontSize: 14,
-  },
-});
-
-const GradientWrapper = styled.View<{
-  width: number;
-  height: number;
-}>`
-  position: absolute;
-  width: ${({ width }: { width: number }) => width}px;
-  height: ${({ height }: { height: number }) => height}px;
-  border-radius: ${({ height }: { height: number }) => height / 2}px;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ButtonContainer = styled.View<{
-  theme: DefaultTheme;
-  height: number;
-}>`
-  width: ${BUTTON_WIDTH - BORDER_WIDTH * 2}px;
-  height: ${({ height }: { height: number }) => height - BORDER_WIDTH * 2}px;
-  border-radius: ${({ height }: { height: number }) =>
-    (height - BORDER_WIDTH * 2) / 2}px;
-  background-color: ${({ theme }: { theme: DefaultTheme }) => theme["main-01"]};
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  gap: 2px;
-  z-index: 1;
-`;

package/src/config/storeConfigLoader.ts

@@ -1,175 +0,0 @@
-/**
- * Store Configuration Loader
- *
- * Handles loading store-specific configuration from CDN,
- * with caching and fallback support.
- */
-
-import type { StoreConfig } from "./types";
-
-const CONFIG_CDN_BASE_URL = "https://cdn.vdbapp.com/config/shopify-ai";
-const CONFIG_CACHE_KEY = "vdb_store_config";
-const CACHE_TTL_MS = 30 * 60 * 1000; // 30 minutes
-
-interface CachedConfig {
-  config: StoreConfig;
-  timestamp: number;
-  storeName: string;
-}
-
-/**
- * Extracts the store name from the current URL hostname.
- * Examples:
- *   - "test-before-live-vdb-app.myshopify.com" → "test-before-live-vdb-app"
- *   - "shopify.vdbapp.com" → "shopify-vdbapp"
- */
-export function getStoreNameFromUrl(): string | null {
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  try {
-    const hostname = window.location.hostname;
-
-    // Handle myshopify.com domains
-    if (hostname.endsWith(".myshopify.com")) {
-      return hostname.replace(".myshopify.com", "");
-    }
-
-    // Handle other domains - use hostname with dots replaced by dashes
-    return hostname.replace(/\./g, "-");
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Gets cached config from localStorage if valid.
- */
-function getCachedConfig(storeName: string): StoreConfig | null {
-  try {
-    const raw = localStorage.getItem(CONFIG_CACHE_KEY);
-    if (!raw) return null;
-
-    const cached: CachedConfig = JSON.parse(raw);
-
-    // Check if cache is for the same store
-    if (cached.storeName !== storeName) {
-      localStorage.removeItem(CONFIG_CACHE_KEY);
-      return null;
-    }
-
-    // Check if cache has expired
-    if (Date.now() - cached.timestamp > CACHE_TTL_MS) {
-      localStorage.removeItem(CONFIG_CACHE_KEY);
-      return null;
-    }
-
-    return cached.config;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Saves config to localStorage cache.
- */
-function cacheConfig(storeName: string, config: StoreConfig): void {
-  try {
-    const cached: CachedConfig = {
-      config,
-      timestamp: Date.now(),
-      storeName,
-    };
-    localStorage.setItem(CONFIG_CACHE_KEY, JSON.stringify(cached));
-  } catch {
-    // Storage unavailable, continue without caching
-  }
-}
-
-/**
- * Fetches store configuration from CDN.
- * Returns null if fetch fails.
- */
-async function fetchConfigFromCdn(
-  storeName: string,
-  timeoutMs: number = 5000
-): Promise<StoreConfig | null> {
-  const url = `${CONFIG_CDN_BASE_URL}/${storeName}.json`;
-
-  try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
-
-    const response = await fetch(url, {
-      method: "GET",
-      signal: controller.signal,
-      headers: {
-        Accept: "application/json",
-      },
-    });
-
-    clearTimeout(timeoutId);
-
-    if (!response.ok) {
-      if (response.status === 404) {
-        console.warn(`[StoreConfig] Config not found for store: ${storeName}`);
-      } else {
-        console.warn(
-          `[StoreConfig] Failed to fetch config: HTTP ${response.status}`
-        );
-      }
-      return null;
-    }
-
-    const config: StoreConfig = await response.json();
-    return config;
-  } catch (error) {
-    if ((error as Error).name === "AbortError") {
-      console.warn(`[StoreConfig] Config fetch timed out for store: ${storeName}`);
-    } else {
-      console.warn(`[StoreConfig] Failed to fetch config:`, error);
-    }
-    return null;
-  }
-}
-
-/**
- * Loads store configuration.
- * Checks cache first, then fetches from CDN if needed.
- * Returns null if no config available (will use hardcoded defaults).
- */
-export async function loadStoreConfig(): Promise<StoreConfig | null> {
-  const storeName = getStoreNameFromUrl();
-  if (!storeName) {
-    console.warn("[StoreConfig] Could not determine store name from URL");
-    return null;
-  }
-
-  // Check cache first
-  const cached = getCachedConfig(storeName);
-  if (cached) {
-    return cached;
-  }
-
-  // Fetch from CDN
-  const config = await fetchConfigFromCdn(storeName);
-
-  if (config) {
-    // Cache successful fetch
-    cacheConfig(storeName, config);
-  }
-
-  return config;
-}
-
-/**
- * Clears the cached store configuration.
- */
-export function clearConfigCache(): void {
-  try {
-    localStorage.removeItem(CONFIG_CACHE_KEY);
-  } catch {
-    // Ignore
-  }
-}

package/src/config/types.ts

@@ -1,51 +0,0 @@
-/**
- * Store Configuration Types
- *
- * Defines the structure of store-specific configuration files
- * loaded from S3 when useAsPlugin is true.
- */
-
-export interface UrlDefaults {
-  carat_min?: string;
-  carat_max?: string;
-  budget_min?: string;
-  budget_max?: string;
-  depth_min?: string;
-  depth_max?: string;
-  table_min?: string;
-  table_max?: string;
-  ratio_min?: string;
-  ratio_max?: string;
-  structure?: string;
-}
-
-export interface SearchApiDefaults {
-  type?: string;
-  cut_from?: string;
-  cut_to?: string;
-  polish_from?: string;
-  polish_to?: string;
-  symmetry_from?: string;
-  symmetry_to?: string;
-  depth_percent_from?: string;
-  depth_percent_to?: string;
-  table_percent_from?: string;
-  table_percent_to?: string;
-  fluorescence_intensities?: string[];
-  labs?: string[];
-  size_from?: string;
-  size_to?: string;
-  price_total_from?: string;
-  price_total_to?: string;
-  page_number?: number;
-  page_size?: number;
-  with_images?: boolean;
-  with_videos?: boolean;
-}
-
-export interface StoreConfig {
-  userToken?: string;
-  searchApiDefaults?: SearchApiDefaults;
-  urlDefaults?: UrlDefaults;
-  pdpLinkTemplate?: string;
-}