@gymmymac/bob-widget 3.2.18 → 3.2.21

package/CHANGELOG.md

@@ -5,12 +5,44 @@ All notable changes to the `@gymmymac/bob-widget` package will be documented in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v3.2.21] - 2026-04-01
+
+### Changed
+
+- **Product tile visual refinements** — Inverted product tiles to dark navy theme (`#0F172A`) with light text, distinguishing individual parts from white service package cards. Hero image zone uses a white background so product image edges blend seamlessly. Price font increased to 28px bold for prominence. Brand fallback text enlarged to 22px for better readability when no product image is available.
+- **Heart/wishlist button on product tiles** — Added a red heart (♡) icon button alongside the green "Add" button, allowing customers to save individual products to their wishlist, matching the service package tier card pattern.
+- **Green gradient Add button** — Product tile CTA now uses a vibrant green gradient (`#22C55E → #16A34A`) with drop shadow for high visibility on the dark card background.
+
+---
+
+## [v3.2.20] - 2026-03-30
+
+### Fixed
+
+- **Mobile height gap between chat drawer and bottom nav** — Replaced CSS percentage height inheritance (`absolute inset-0`) with explicit pixel heights via a new `useContainerHeight` hook backed by `ResizeObserver`. On mobile Safari, `dvh` recalculations during URL-bar show/hide and virtual keyboard transitions caused the container height to fluctuate, detaching the chat drawer from the bottom of the screen. The widget now observes its parent's actual pixel height and applies it directly, immune to `dvh` drift.
+- **Chat drawer GPU layer stability** — Added `will-change: transform, height` to `ContainedChatDrawer` to prevent compositor layer detachment during height transitions.
+- **AskBob demo page updated** — Reference implementation now uses `visualViewport` listeners to set explicit pixel height on the Bob container, serving as a guide for CARFIX production integration.
+
+---
+
+## [v3.2.19] - 2026-03-26
+
+### Fixed
+
+- **Premature product shelf spinner fixed** — Decoupled `isResearching` from general message sends. The product shelf loading spinner now only appears when parts are actually being fetched (after vehicle identification or when the backend emits a `researching_parts` SSE event). Previously, the spinner showed on every message send, even during conversational REGO lookup. Added `onPartsResearchStart` callback to separate animation state (thinking) from shelf visibility.
+
+---
+
 ## [v3.2.18] - 2026-03-26
 
 ### Fixed
 
 - **iOS TTS now works on ALL iOS browsers (Safari, Chrome, Firefox)** — Replaced the silent-WAV `HTMLAudioElement` unlock with a shared **Web Audio API `AudioContext`** singleton. The context is `.resume()`'d on the first user gesture and stays unlocked for the page lifetime. All TTS playback now routes through `decodeAudioData()` → `AudioBufferSourceNode`, which succeeds even after async `fetch()` calls. This fixes the root cause: iOS WebKit does not transfer an audio "unlock" between different `Audio` elements.
 
+### Removed
+
+- **Canned speech / pre-recorded audio clips fully stripped** — Removed all `audio_hint`, `bob_searching` audio, clip pattern matching, `AudioController` priority system, `getSearchingClip()`, `checkCannedResponse()`, and `fetchAudioClip()`. All responses now go through AI → ElevenLabs TTS exclusively. The `AUDIO DISABLED` rule was also removed from the LLM system prompt (`rules_and_guardrails`).
+
 ---
 
 ## [v3.2.17] - 2026-03-26

package/dist/components/ProductTile.d.ts

@@ -7,13 +7,5 @@ interface ProductTileProps {
     onProductClick?: (product: Product) => void;
     onAddToCart?: (product: Product) => void;
 }
-/**
- * ProductTile - Premium Glassmorphism Product Cards
- *
- * Image fallback chain:
- * 1. product.image_url (product photo)
- * 2. product.brandImageUrl (brand logo)
- * 3. "No Image" placeholder
- */
 export declare const ProductTile: React.FC<ProductTileProps>;
 export {};

package/dist/components/mobile/ContainedMobileBobLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariantCard } from './MobileProductColumn';
+import { VariantCard } from '../shelf';
 import { Message, HighlightedProduct } from '../../types/message';
 import { Product, ServicePackage } from '../../types';
 import { Vehicle } from '../../types/vehicle';

package/dist/components/mobile/MobileBobLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariantCard } from './MobileProductColumn';
+import { VariantCard } from '../shelf';
 import { Message, HighlightedProduct } from '../../types/message';
 import { Product, ServicePackage } from '../../types';
 import { Vehicle } from '../../types/vehicle';

package/dist/components/mobile/MobileBobLayoutCore.d.ts

@@ -1,23 +1,11 @@
 import { default as React } from 'react';
 import { BobPosition } from './MobileBobCharacter';
+import { VariantCard } from '../shelf';
 import { Product, ServicePackage } from '../../types';
 import { HighlightedProduct } from '../../types/message';
 import { Vehicle } from '../../types/vehicle';
 
-export interface VariantCard {
-    vehicle_id: number;
-    optionNumber: number;
-    displayTitle: string;
-    displaySubtitle: string;
-    characterization: string;
-    kw?: number | null;
-    cc?: number | null;
-    ccDisplay?: string | null;
-    fuelType?: string | null;
-    engineCode?: string | null;
-    make: string;
-    model: string;
-}
+export type { VariantCard };
 interface MobileBobLayoutCoreProps {
     currentImage: string;
     animationState: string;
@@ -54,4 +42,3 @@ interface MobileBobLayoutCoreProps {
  * - hidden: User swiped, full product view
  */
 export declare const MobileBobLayoutCore: React.FC<MobileBobLayoutCoreProps>;
-export {};

package/dist/components/mobile/MobileProductColumn.d.ts

@@ -1,41 +1,5 @@
-import { default as React } from 'react';
-import { Product, ServicePackage } from '../../types';
-import { HighlightedProduct } from '../../types/message';
-
-export interface VariantCard {
-    vehicle_id: number;
-    optionNumber: number;
-    displayTitle: string;
-    displaySubtitle: string;
-    characterization: string;
-    kw?: number | null;
-    cc?: number | null;
-    ccDisplay?: string | null;
-    fuelType?: string | null;
-    engineCode?: string | null;
-    make: string;
-    model: string;
-}
-interface MobileProductColumnProps {
-    products: Product[];
-    servicePackages: ServicePackage[];
-    highlightedPartType?: string | null;
-    highlightedProduct?: HighlightedProduct | null;
-    scrollToCategory?: string | null;
-    onScrollToCategoryComplete?: () => void;
-    onProductClick?: (product: Product) => void;
-    onPackageSelect?: (pkg: ServicePackage) => void;
-    isResearching?: boolean;
-    visible?: boolean;
-    counterHeightPercent?: number;
-    hasVehicle?: boolean;
-    onAddToCart?: (product: Product | Product[]) => void;
-    /** Vehicle make and model for header display */
-    vehicleMakeModel?: string;
-    pendingVariants?: VariantCard[];
-    pendingVariantMake?: string;
-    pendingVariantModel?: string;
-    onVariantSelect?: (variant: VariantCard) => void;
-}
-export declare const MobileProductColumn: React.FC<MobileProductColumnProps>;
-export {};
+/**
+ * Legacy re-export — MobileProductColumn is now ShelfColumn.
+ * Kept for backward-compatible imports.
+ */
+export { ShelfColumn as MobileProductColumn } from '../shelf/ShelfColumn';

package/dist/components/mobile/index.d.ts

@@ -1,7 +1,8 @@
 export { MobileBobCharacter } from './MobileBobCharacter';
 export { MobileBobLayoutCore } from './MobileBobLayoutCore';
 export { MobileChatDrawer } from './MobileChatDrawer';
-export { MobileProductColumn } from './MobileProductColumn';
+export { ShelfColumn as MobileProductColumn } from '../shelf';
+export type { VariantCard } from '../shelf';
 export { MobileBobLayout } from './MobileBobLayout';
 export { ContainedMobileBobLayout } from './ContainedMobileBobLayout';
 export { ContainedChatDrawer } from './ContainedChatDrawer';

package/dist/components/shelf/HorizontalRow.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface HorizontalRowProps {
+    children: React.ReactNode;
+    viewportSize: ViewportSize;
+    /** Extra className for the scroll track */
+    className?: string;
+    /** Extra style for the scroll track */
+    style?: React.CSSProperties;
+}
+/**
+ * HorizontalRow — The single scroll primitive for all horizontal rows.
+ *
+ * Mobile/Tablet: snap-x mandatory, touch-action: pan-x, overscroll-behavior: contain, hidden scrollbar
+ * Desktop: no snap, orange arrow buttons, thin scrollbar, fade masks
+ */
+export declare const HorizontalRow: React.FC<HorizontalRowProps>;
+export {};

package/dist/components/shelf/PartslotSection.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Product } from '../../types';
+import { HighlightedProduct } from '../../types/message';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface PartslotSectionProps {
+    name: string;
+    products: Product[];
+    viewportSize: ViewportSize;
+    isHighlighted: boolean;
+    highlightedProduct?: HighlightedProduct | null;
+    onProductClick?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+}
+export declare const PartslotSection: React.FC<PartslotSectionProps>;
+export {};

package/dist/components/shelf/ServicePackageCard.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ServicePackage, Product } from '../../types';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface ServicePackageCardProps {
+    pkg: ServicePackage;
+    viewportSize: ViewportSize;
+    onAddToCart?: (products: Product | Product[]) => void;
+}
+export declare const ServicePackageCard: React.FC<ServicePackageCardProps>;
+export {};

package/dist/components/shelf/ShelfColumn.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Product, ServicePackage } from '../../types';
+import { HighlightedProduct } from '../../types/message';
+
+export interface VariantCard {
+    vehicle_id: number;
+    optionNumber: number;
+    displayTitle: string;
+    displaySubtitle: string;
+    characterization: string;
+    kw?: number | null;
+    cc?: number | null;
+    ccDisplay?: string | null;
+    fuelType?: string | null;
+    engineCode?: string | null;
+    make: string;
+    model: string;
+}
+interface ShelfColumnProps {
+    products: Product[];
+    servicePackages: ServicePackage[];
+    highlightedPartType?: string | null;
+    highlightedProduct?: HighlightedProduct | null;
+    scrollToCategory?: string | null;
+    onScrollToCategoryComplete?: () => void;
+    onProductClick?: (product: Product) => void;
+    onPackageSelect?: (pkg: ServicePackage) => void;
+    isResearching?: boolean;
+    visible?: boolean;
+    counterHeightPercent?: number;
+    hasVehicle?: boolean;
+    onAddToCart?: (product: Product | Product[]) => void;
+    vehicleMakeModel?: string;
+    pendingVariants?: VariantCard[];
+    pendingVariantMake?: string;
+    pendingVariantModel?: string;
+    onVariantSelect?: (variant: VariantCard) => void;
+}
+export declare const ShelfColumn: React.FC<ShelfColumnProps>;
+export {};

package/dist/components/shelf/ShelfHeader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface ShelfHeaderProps {
+    vehicleDisplayName: string;
+    itemCount: number;
+    isUpdating: boolean;
+}
+export declare const ShelfHeader: React.FC<ShelfHeaderProps>;
+export {};

package/dist/components/shelf/ShelfLoadingState.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export declare const ShelfLoading: React.FC;
+export declare const ShelfEmpty: React.FC<{
+    productCount: number;
+    packageCount: number;
+}>;

package/dist/components/shelf/TierCard.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { PreparedTier, Product } from '../../types';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface TierCardProps {
+    tier: PreparedTier;
+    isSelected: boolean;
+    viewportSize: ViewportSize;
+    packageTitle: string;
+    packageId: string;
+    onSelect: () => void;
+    onAddToCart?: (products: Product[]) => void;
+}
+export declare const TierCard: React.FC<TierCardProps>;
+export {};

package/dist/components/shelf/TierProductList.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { PreparedTier } from '../../types';
+
+interface TierProductListProps {
+    tier: PreparedTier;
+}
+export declare const TierProductList: React.FC<TierProductListProps>;
+export {};

package/dist/components/shelf/VariantSelector.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { VariantCard } from './ShelfColumn';
+
+interface VariantSelectorProps {
+    variants: VariantCard[];
+    make?: string;
+    model?: string;
+    onSelect: (variant: VariantCard) => void;
+}
+export declare const VariantSelector: React.FC<VariantSelectorProps>;
+export {};

package/dist/components/shelf/index.d.ts

@@ -0,0 +1,10 @@
+export { ShelfColumn } from './ShelfColumn';
+export type { VariantCard } from './ShelfColumn';
+export { HorizontalRow } from './HorizontalRow';
+export { ShelfHeader } from './ShelfHeader';
+export { ShelfLoading, ShelfEmpty } from './ShelfLoadingState';
+export { VariantSelector } from './VariantSelector';
+export { ServicePackageCard } from './ServicePackageCard';
+export { TierCard } from './TierCard';
+export { TierProductList } from './TierProductList';
+export { PartslotSection } from './PartslotSection';

package/dist/hooks/useBobChat.d.ts

@@ -1,5 +1,5 @@
 import { Vehicle } from '../types/vehicle';
-import { VariantCard } from '../components/mobile/MobileProductColumn';
+import { VariantCard } from '../components/shelf';
 import { Message, HighlightedProduct } from '../types/message';
 
 export type AnimationState = string;
@@ -15,6 +15,8 @@ interface UseBobChatProps {
     onStreamComplete?: () => void;
     onShowingProduct?: () => void;
     onResearchStart?: () => void;
+    /** v3.2.18: Fires only when parts/packages are actually being fetched (not on every message) */
+    onPartsResearchStart?: () => void;
     onReadyToSpeak?: () => void;
     onHighlightPart?: (partType: string) => void;
     onHighlightProduct?: (product: HighlightedProduct) => void;
@@ -23,7 +25,7 @@ interface UseBobChatProps {
     /** When backend requires user to pick a vehicle variant, provide UI-ready cards for the shelf */
     onVariantSelectionRequired?: (variants: VariantCard[], make: string, model: string) => void;
     /** Ref containing current shelf category names for post-stream scroll matching */
-    shelfCategoriesRef?: React.RefObject<Set<string>>;
+    shelfCategoriesRef?: React.RefObject<Map<string, 'package' | 'partslot'>>;
     /** Optional pre-identified vehicle — skips REGO lookup when no session exists */
     initialVehicle?: {
         vehicle_id: string | number;
@@ -33,7 +35,7 @@ interface UseBobChatProps {
         [key: string]: unknown;
     };
 }
-export declare const useBobChat: ({ setAnimationState, manualMode, talkingState, thinkingState, completeState, idleState, listenState, onStreamStart, onStreamComplete, onShowingProduct, onResearchStart, onReadyToSpeak, onHighlightPart, onHighlightProduct, onNoPartsFound, onAutoFetchComplete, onVariantSelectionRequired, shelfCategoriesRef, initialVehicle }: UseBobChatProps) => {
+export declare const useBobChat: ({ setAnimationState, manualMode, talkingState, thinkingState, completeState, idleState, listenState, onStreamStart, onStreamComplete, onShowingProduct, onResearchStart, onPartsResearchStart, onReadyToSpeak, onHighlightPart, onHighlightProduct, onNoPartsFound, onAutoFetchComplete, onVariantSelectionRequired, shelfCategoriesRef, initialVehicle }: UseBobChatProps) => {
     messages: Message[];
     input: string;
     setInput: import('react').Dispatch<import('react').SetStateAction<string>>;
@@ -51,5 +53,6 @@ export declare const useBobChat: ({ setAnimationState, manualMode, talkingState,
     clearVehicle: () => void;
     sendDirectMessage: (content: string) => void;
     stopAllAudio: () => void;
+    refetchPartsForVehicle: () => Promise<void>;
 };
 export {};

package/dist/hooks/useContainerHeight.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+
+/**
+ * useContainerHeight — ResizeObserver-based hook that returns the actual
+ * pixel height of the referenced element.  Falls back to `null` when
+ * ResizeObserver is unavailable (the caller should use `height: 100%`).
+ *
+ * Why: On mobile Safari, `100dvh` / percentage heights fluctuate during
+ * URL-bar show/hide and virtual-keyboard transitions.  An explicit pixel
+ * height keeps the widget layout stable and prevents the "gap" between
+ * the chat drawer and the host's bottom navigation.
+ */
+export declare function useContainerHeight(ref: RefObject<HTMLElement | null>): number | null;