@shop-prompter/react 0.1.1 → 1.0.0

package/package.json

@@ -1,25 +1,26 @@
 {
-    "name": "@shop-prompter/react",
-    "version": "0.1.1",
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "publishConfig": {
-        "access": "public"
-    },
-    "peerDependencies": {
-        "react": "^18.0.0"
-    },
-    "scripts": {
-        "build": "tsup src/index.ts --format cjs,esm --dts"
-    },
-    "devDependencies": {
-        "react": "^19.2.7",
-        "@shop-prompter/core": "workspace:*",
-        "tsup": "^8.5.1",
-        "typescript": "^6.0.3"
-    },
-    "dependencies": {
-        "uuid": "^14.0.0"
-    }
+  "name": "@shop-prompter/react",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "@shop-prompter/core": "0.0.0"
+  },
+  "dependencies": {
+    "marked": "^18.0.5",
+    "uuid": "^14.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts"
+  }
 }

package/src/api/icons.ts

@@ -0,0 +1,9 @@
+// SVG Path Constants for Thumbs-Up and Thumbs-Down Icons
+
+export const THUMBS_UP_WRIST = 'M7 10v12';
+export const THUMBS_UP_HAND = 'M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z';
+
+export const THUMBS_DOWN_WRIST = 'M17 14V2';
+export const THUMBS_DOWN_HAND = 'M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z';
+
+export const THINKING_SPINNER = 'M21 12a9 9 0 1 1-6.219-8.56';

package/src/api/product-api.ts

@@ -0,0 +1,120 @@
+import { ShopPrompterApiConfiguration } from './shop-prompter.types'
+
+export interface ProductPricing {
+  taxPercentage: number
+  gross: number
+  currency: string | undefined
+}
+
+export interface ProductAvailability {
+  count: number
+  alwaysAvailable: boolean
+}
+
+export interface ProductCategory {
+  key: string
+  name: Record<string, string>
+}
+
+export interface ProductLocalization {
+  name: string
+  description: string
+}
+
+export interface ProductApiResponse {
+  pricing: ProductPricing
+  availability: ProductAvailability
+  images: string[]
+  categories: ProductCategory[]
+  sku: string
+  localization: Record<string, ProductLocalization>
+}
+
+export interface ProductApi {
+  setApiConfig(config: ShopPrompterApiConfiguration): void
+  getProducts(skus: string[]): Promise<ProductApiResponse[]>
+  isCached(skus: string[]): boolean
+  getCached(skus: string[]): ProductApiResponse[]
+}
+
+export class DefaultProductApi implements ProductApi {
+  private config: ShopPrompterApiConfiguration | null = null
+  private cache = new Map<string, ProductApiResponse | null>()
+
+  setApiConfig(config: ShopPrompterApiConfiguration): void {
+    this.config = config
+  }
+
+  isCached(skus: string[]): boolean {
+    if (!skus || skus.length === 0) return true
+    return skus.every(sku => this.cache.has(sku))
+  }
+
+  getCached(skus: string[]): ProductApiResponse[] {
+    if (!skus || skus.length === 0) return []
+    return skus.map(sku => this.cache.get(sku)).filter(Boolean) as ProductApiResponse[]
+  }
+
+  async getProducts(skus: string[]): Promise<ProductApiResponse[]> {
+    if (!this.config) {
+      throw new Error('API configuration not set. Call setApiConfig first.')
+    }
+
+    const cachedProducts: ProductApiResponse[] = []
+    const missingSkus: string[] = []
+
+    for (const sku of skus) {
+      if (this.cache.has(sku)) {
+        const cachedVal = this.cache.get(sku)
+        if (cachedVal) {
+          cachedProducts.push(cachedVal)
+        }
+      } else {
+        missingSkus.push(sku)
+      }
+    }
+
+    if (missingSkus.length === 0) {
+      // Maintain the order of requested SKUs from cached products
+      return skus.map(sku => this.cache.get(sku)).filter(Boolean) as ProductApiResponse[]
+    }
+
+    const baseUrl = this.config.productsBaseUrl || this.config.baseUrl
+    const url = `${baseUrl}/products?skus=${encodeURIComponent(missingSkus.join(','))}`
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers,
+    })
+
+    if (!response.ok) {
+      throw new Error(`Product API error: ${response.status}`)
+    }
+
+    const newProducts: ProductApiResponse[] = await response.json()
+
+    const returnedSkus = new Set<string>()
+    for (const p of newProducts) {
+      if (p.sku) {
+        this.cache.set(p.sku, p)
+        returnedSkus.add(p.sku)
+      }
+    }
+
+    // Cache missing SKUs as null to prevent repeating API requests
+    for (const sku of missingSkus) {
+      if (!returnedSkus.has(sku)) {
+        this.cache.set(sku, null)
+      }
+    }
+
+    // Return all requested products maintaining the initial skus array order
+    return skus.map(sku => this.cache.get(sku)).filter(Boolean) as ProductApiResponse[]
+  }
+}
+
+export const productApi = new DefaultProductApi()

package/src/api/session-handler.ts

@@ -2,14 +2,54 @@ import { v4 as uuidv4 } from 'uuid';
 
 const SESSION_KEY = 'shopprompter_sessionId';
 const USER_KEY = 'shopprompter_userId';
+const SESSIONS_KEY = 'shopprompter_sessions';
+const MAX_SESSIONS = 3;
+
+// ---------------------------------------------------------------------------
+// Persisted message shape stored in localStorage
+// ---------------------------------------------------------------------------
+
+export interface PersistedMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  productSkus?: string[];
+  /** User feedback on an assistant message. Only relevant when role === 'assistant'. */
+  feedback?: 'upvote' | 'downvote' | null;
+}
+
+interface SessionData {
+  createdAt: number;
+  messages: PersistedMessage[];
+}
+
+interface SessionStore {
+  [sessionId: string]: SessionData;
+}
+
+// ---------------------------------------------------------------------------
+// Interface
+// ---------------------------------------------------------------------------
 
 export interface SessionHandler {
   initialize(userIdentifier?: string): void;
   regenerate(): void;
   getSessionId(): string;
   getUserId(): string;
+  saveUserMessage(sessionId: string, message: PersistedMessage): void;
+  saveAssistantMessage(sessionId: string, message: PersistedMessage): void;
+  loadMessages(sessionId: string): PersistedMessage[];
+  updateMessageFeedback(
+    sessionId: string,
+    messageId: string,
+    feedback: 'upvote' | 'downvote' | null,
+  ): void;
 }
 
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+
 export class DefaultSessionHandler implements SessionHandler {
   private sessionId: string = '';
   private userId: string = '';
@@ -27,6 +67,8 @@ export class DefaultSessionHandler implements SessionHandler {
   regenerate(): void {
     this.sessionId = uuidv4();
     this.persistSessionId(this.sessionId);
+    // The new session's store entry (and eviction) is deferred until the first
+    // message is saved, keeping regenerate() lightweight.
   }
 
   getSessionId(): string {
@@ -43,6 +85,117 @@ export class DefaultSessionHandler implements SessionHandler {
     return this.userId;
   }
 
+  // -------------------------------------------------------------------------
+  // Message persistence
+  // -------------------------------------------------------------------------
+
+  /** Persist a user message immediately when it is sent. */
+  saveUserMessage(sessionId: string, message: PersistedMessage): void {
+    try {
+      const store = this.loadSessionStore();
+      if (!store[sessionId]) {
+        // New session entry — evict the oldest existing session first if needed.
+        this.evictIfNeeded(store);
+        store[sessionId] = { createdAt: Date.now(), messages: [] };
+      }
+      store[sessionId].messages.push(message);
+      this.saveSessionStore(store);
+    } catch {
+      // localStorage not available or quota exceeded — silently ignore.
+    }
+  }
+
+  /**
+   * Persist the fully-streamed assistant message.
+   * If the message ID already exists in the store (shouldn't normally happen)
+   * it is replaced; otherwise it is appended.
+   */
+  saveAssistantMessage(sessionId: string, message: PersistedMessage): void {
+    try {
+      const store = this.loadSessionStore();
+      if (!store[sessionId]) {
+        store[sessionId] = { createdAt: Date.now(), messages: [] };
+      }
+      const msgs = store[sessionId].messages;
+      const existingIdx = msgs.findIndex((m) => m.id === message.id);
+      if (existingIdx !== -1) {
+        msgs[existingIdx] = message;
+      } else {
+        msgs.push(message);
+      }
+      this.saveSessionStore(store);
+    } catch {
+      // localStorage not available or quota exceeded — silently ignore.
+    }
+  }
+
+  /** Return the persisted messages for the given session (newest first order preserved). */
+  loadMessages(sessionId: string): PersistedMessage[] {
+    try {
+      const store = this.loadSessionStore();
+      return store[sessionId]?.messages ?? [];
+    } catch {
+      return [];
+    }
+  }
+
+  /** Update the feedback field of a specific persisted message. */
+  updateMessageFeedback(
+    sessionId: string,
+    messageId: string,
+    feedback: 'upvote' | 'downvote' | null,
+  ): void {
+    try {
+      const store = this.loadSessionStore();
+      const session = store[sessionId];
+      if (!session) return;
+
+      const msg = session.messages.find((m) => m.id === messageId);
+      if (!msg) return;
+
+      msg.feedback = feedback;
+      this.saveSessionStore(store);
+    } catch {
+      // localStorage not available — silently ignore.
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Private helpers
+  // -------------------------------------------------------------------------
+
+  /**
+   * Remove the single oldest session from the store when it already holds
+   * MAX_SESSIONS entries. Mutates the store object in place.
+   */
+  private evictIfNeeded(store: SessionStore): void {
+    const sessionIds = Object.keys(store);
+    if (sessionIds.length < MAX_SESSIONS) return;
+
+    let oldestId = sessionIds[0];
+    let oldestTime = store[oldestId].createdAt;
+    for (const id of sessionIds) {
+      if (store[id].createdAt < oldestTime) {
+        oldestId = id;
+        oldestTime = store[id].createdAt;
+      }
+    }
+    delete store[oldestId];
+  }
+
+  private loadSessionStore(): SessionStore {
+    try {
+      const raw = localStorage.getItem(SESSIONS_KEY);
+      return raw ? (JSON.parse(raw) as SessionStore) : {};
+    } catch {
+      return {};
+    }
+  }
+
+  private saveSessionStore(store: SessionStore): void {
+    localStorage.setItem(SESSIONS_KEY, JSON.stringify(store));
+  }
+
   private getPersistedSessionId(): string | null {
     try {
       return localStorage.getItem(SESSION_KEY);

package/src/api/shop-prompter-api.ts

@@ -27,6 +27,11 @@ export interface ShopPrompterApi {
     onEvent: (event: ShopPrompterStreamEvent) => void,
   ): Promise<void>
   getAgentExperience(): Promise<AgentExperience | null>
+  sendFeedback(
+    threadId: string,
+    message: string,
+    feedback: 'upvote' | 'downvote' | 'clear',
+  ): Promise<void>
 }
 
 export class DefaultShopPrompterApi implements ShopPrompterApi {
@@ -36,6 +41,21 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
     this.config = config
   }
 
+  private getHeaders(): Record<string, string> {
+    if (!this.config) {
+      return { 'Content-Type': 'application/json' }
+    }
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+    if (this.config.shopPrompterToken) {
+      headers['Authorization'] = `Bearer ${this.config.shopPrompterToken}`
+    } else if (this.config.apiKey) {
+      headers['X-Api-Key'] = this.config.apiKey
+    }
+    return headers
+  }
+
   async execute(
     prompt: string,
     userId: string,
@@ -47,10 +67,7 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
 
     const response = await fetch(`${this.config.baseUrl}/interaction`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Api-Key': this.config.apiKey,
-      },
+      headers: this.getHeaders(),
       body: JSON.stringify({
         prompt,
         userId,
@@ -77,21 +94,13 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
     }
 
     const url = `${this.config.baseUrl}/interaction/stream`
-    console.log('ShopPrompter Request:', {
-      url,
-      prompt,
-      userId,
-      sessionId,
-      cartContext,
-    })
 
     let response: Response
     try {
       response = await fetch(url, {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json',
-          'X-Api-Key': this.config.apiKey,
+          ...this.getHeaders(),
           Accept: 'text/event-stream',
           'Cache-Control': 'no-cache',
         },
@@ -111,8 +120,6 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
       return
     }
 
-    console.log('ShopPrompter Response:', response.status)
-
     if (!response.ok) {
       const errorText = await response.text().catch(() => '')
       console.error('ShopPrompter API Error:', response.status, errorText)
@@ -137,24 +144,20 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
         const { done, value } = await reader.read()
 
         if (done) {
-          console.log('ShopPrompter Stream done')
           onEvent({ type: 'close' })
           break
         }
 
         const chunk = decoder.decode(value, { stream: true })
-        console.log('ShopPrompter Raw chunk:', chunk)
         buffer += chunk
         const lines = buffer.split('\n')
         buffer = lines.pop() || ''
 
         let currentEventType = ''
         for (const line of lines) {
-          console.log('ShopPrompter Line:', line)
           if (line.startsWith('event:')) {
             // Capture the event type for the next data line
             currentEventType = line.slice(6).trim()
-            console.log('ShopPrompter Event type:', currentEventType)
 
             // If it's an error event, we need to handle it
             if (currentEventType === 'error') {
@@ -166,7 +169,6 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
             }
           } else if (line.startsWith('data:')) {
             const data = line.slice(5).trim()
-            console.log('ShopPrompter Data:', data)
             if (data) {
               // If we got an error event type, try to parse error details
               if (currentEventType === 'error') {
@@ -187,7 +189,6 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
                 }
               } else {
                 const event = this.parseEvent(data)
-                console.log('ShopPrompter Parsed event:', event)
                 if (event) {
                   onEvent(event)
                 }
@@ -217,10 +218,7 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
     try {
       const response = await fetch(`${this.config.baseUrl}/agent-experience`, {
         method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Api-Key': this.config.apiKey,
-        },
+        headers: this.getHeaders(),
       })
 
       if (!response.ok) {
@@ -230,11 +228,6 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
 
       const data: AgentExperience = await response.json()
 
-      console.log(
-        '## ~ DefaultShopPrompterApi ~ getAgentExperience ~ data:',
-        data,
-      )
-
       return data
     } catch (error) {
       console.error('Error fetching agent experience:', error)
@@ -242,6 +235,41 @@ export class DefaultShopPrompterApi implements ShopPrompterApi {
     }
   }
 
+  async sendFeedback(
+    threadId: string,
+    message: string,
+    feedback: 'upvote' | 'downvote' | 'clear',
+  ): Promise<void> {
+    if (!this.config) {
+      throw new Error('API configuration not set. Call setApiConfig first.')
+    }
+
+    try {
+      const response = await fetch(`${this.config.baseUrl}/feedback`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          threadId,
+          message,
+          feedback,
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error(
+          'We are sorry, but we could not process your feedback. Please try again later.',
+        )
+      }
+    } catch (error) {
+      if (error instanceof Error && error.message.startsWith('We are sorry')) {
+        throw error
+      }
+      throw new Error(
+        'We are sorry, but we could not process your feedback. Please try again later.',
+      )
+    }
+  }
+
   private parseEvent(data: string): ShopPrompterStreamEvent | null {
     try {
       const json = JSON.parse(data)

package/src/api/shop-prompter.types.ts

@@ -2,7 +2,9 @@
 
 export interface ShopPrompterApiConfiguration {
   baseUrl: string
-  apiKey: string
+  apiKey?: string | null
+  productsBaseUrl?: string
+  shopPrompterToken?: string | null
 }
 
 export interface ShopPrompterResponse {