@shop-prompter/react 0.1.1

package/package.json

@@ -0,0 +1,25 @@
+{
+    "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"
+    }
+}

package/src/api/session-handler.ts

@@ -0,0 +1,80 @@
+import { v4 as uuidv4 } from 'uuid';
+
+const SESSION_KEY = 'shopprompter_sessionId';
+const USER_KEY = 'shopprompter_userId';
+
+export interface SessionHandler {
+  initialize(userIdentifier?: string): void;
+  regenerate(): void;
+  getSessionId(): string;
+  getUserId(): string;
+}
+
+export class DefaultSessionHandler implements SessionHandler {
+  private sessionId: string = '';
+  private userId: string = '';
+
+  initialize(userIdentifier?: string): void {
+    // Get or create user identifier
+    this.userId = userIdentifier || this.getPersistedUserId() || uuidv4();
+    this.persistUserId(this.userId);
+
+    // Get or create session ID
+    this.sessionId = this.getPersistedSessionId() || this.userId;
+    this.persistSessionId(this.sessionId);
+  }
+
+  regenerate(): void {
+    this.sessionId = uuidv4();
+    this.persistSessionId(this.sessionId);
+  }
+
+  getSessionId(): string {
+    if (!this.sessionId) {
+      this.initialize();
+    }
+    return this.sessionId;
+  }
+
+  getUserId(): string {
+    if (!this.userId) {
+      this.initialize();
+    }
+    return this.userId;
+  }
+
+  private getPersistedSessionId(): string | null {
+    try {
+      return localStorage.getItem(SESSION_KEY);
+    } catch {
+      return null;
+    }
+  }
+
+  private persistSessionId(sessionId: string): void {
+    try {
+      localStorage.setItem(SESSION_KEY, sessionId);
+    } catch {
+      // localStorage not available
+    }
+  }
+
+  private getPersistedUserId(): string | null {
+    try {
+      return localStorage.getItem(USER_KEY);
+    } catch {
+      return null;
+    }
+  }
+
+  private persistUserId(userId: string): void {
+    try {
+      localStorage.setItem(USER_KEY, userId);
+    } catch {
+      // localStorage not available
+    }
+  }
+}
+
+// Singleton instance
+export const sessionHandler = new DefaultSessionHandler();

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

@@ -0,0 +1,389 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  ShopPrompterApiConfiguration,
+  ShopPrompterResponse,
+  ShopPrompterStreamEvent,
+  ShopPrompterStreamTextEvent,
+  ShopPrompterStreamProductSkusEvent,
+  ShopPrompterStreamNavigationEvent,
+  ShopPrompterStreamCartEvent,
+  ShopPrompterNavigationOperation,
+  ShopPrompterCartOperation,
+  AgentExperience,
+} from './shop-prompter.types'
+
+export interface ShopPrompterApi {
+  setApiConfig(config: ShopPrompterApiConfiguration): void
+  execute(
+    prompt: string,
+    userId: string,
+    sessionId: string,
+  ): Promise<ShopPrompterResponse>
+  executeStream(
+    prompt: string,
+    userId: string,
+    sessionId: string,
+    onEvent: (event: ShopPrompterStreamEvent) => void,
+  ): Promise<void>
+  getAgentExperience(): Promise<AgentExperience | null>
+}
+
+export class DefaultShopPrompterApi implements ShopPrompterApi {
+  private config: ShopPrompterApiConfiguration | null = null
+
+  setApiConfig(config: ShopPrompterApiConfiguration): void {
+    this.config = config
+  }
+
+  async execute(
+    prompt: string,
+    userId: string,
+    sessionId: string,
+  ): Promise<ShopPrompterResponse> {
+    if (!this.config) {
+      throw new Error('API configuration not set. Call setApiConfig first.')
+    }
+
+    const response = await fetch(`${this.config.baseUrl}/interaction`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Api-Key': this.config.apiKey,
+      },
+      body: JSON.stringify({
+        prompt,
+        userId,
+        sessionId,
+      }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`)
+    }
+
+    return response.json()
+  }
+
+  async executeStream(
+    prompt: string,
+    userId: string,
+    sessionId: string,
+    onEvent: (event: ShopPrompterStreamEvent) => void,
+    cartContext?: { sku: string; quantity: number }[],
+  ): Promise<void> {
+    if (!this.config) {
+      throw new Error('API configuration not set. Call setApiConfig first.')
+    }
+
+    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,
+          Accept: 'text/event-stream',
+          'Cache-Control': 'no-cache',
+        },
+        body: JSON.stringify({
+          prompt,
+          userId,
+          sessionId,
+          cart: cartContext,
+        }),
+      })
+    } catch (fetchError) {
+      console.error('ShopPrompter Fetch Error:', fetchError)
+      onEvent({
+        type: 'error',
+        reason: `Failed to fetch: ${fetchError instanceof Error ? fetchError.message : 'Network error'}`,
+      })
+      return
+    }
+
+    console.log('ShopPrompter Response:', response.status)
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => '')
+      console.error('ShopPrompter API Error:', response.status, errorText)
+      onEvent({
+        type: 'error',
+        reason: `API error: ${response.status} - ${errorText}`,
+      })
+      return
+    }
+
+    const reader = response.body?.getReader()
+    if (!reader) {
+      onEvent({ type: 'error', reason: 'No response body' })
+      return
+    }
+
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    try {
+      while (true) {
+        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') {
+              onEvent({
+                type: 'error',
+                reason:
+                  'Server returned an error event. Check backend configuration.',
+              })
+            }
+          } 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') {
+                try {
+                  const errorData = JSON.parse(data)
+                  onEvent({
+                    type: 'error',
+                    reason:
+                      errorData.message ||
+                      errorData.error ||
+                      'Unknown server error',
+                  })
+                } catch {
+                  onEvent({
+                    type: 'error',
+                    reason: data || 'Unknown server error',
+                  })
+                }
+              } else {
+                const event = this.parseEvent(data)
+                console.log('ShopPrompter Parsed event:', event)
+                if (event) {
+                  onEvent(event)
+                }
+              }
+            }
+            currentEventType = '' // Reset after processing data
+          }
+        }
+      }
+    } catch (error) {
+      console.error('ShopPrompter Stream error:', error)
+      onEvent({
+        type: 'error',
+        reason: error instanceof Error ? error.message : 'Unknown error',
+      })
+    }
+  }
+
+  async getAgentExperience(): Promise<AgentExperience | null> {
+    // todo: Return cached version if available
+
+    if (!this.config) {
+      console.warn('API configuration not set. Call setApiConfig first.')
+      return null
+    }
+
+    try {
+      const response = await fetch(`${this.config.baseUrl}/agent-experience`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Api-Key': this.config.apiKey,
+        },
+      })
+
+      if (!response.ok) {
+        console.error(`Failed to fetch agent experience: ${response.status}`)
+        return null
+      }
+
+      const data: AgentExperience = await response.json()
+
+      console.log(
+        '## ~ DefaultShopPrompterApi ~ getAgentExperience ~ data:',
+        data,
+      )
+
+      return data
+    } catch (error) {
+      console.error('Error fetching agent experience:', error)
+      return null
+    }
+  }
+
+  private parseEvent(data: string): ShopPrompterStreamEvent | null {
+    try {
+      const json = JSON.parse(data)
+
+      // Parse based on event type
+      // Handle both "token" and "text" fields for text events
+      if (json.token !== undefined) {
+        // Skip "close" token - it's a signal to end the stream
+        if (json.token === 'close') {
+          return { type: 'close' }
+        }
+        return {
+          type: 'text',
+          text: json.token,
+        } as ShopPrompterStreamTextEvent
+      }
+
+      if (json.text !== undefined) {
+        return {
+          type: 'text',
+          text: json.text,
+        } as ShopPrompterStreamTextEvent
+      }
+
+      if (json.skus !== undefined) {
+        return {
+          type: 'productSkus',
+          skus: json.skus,
+        } as ShopPrompterStreamProductSkusEvent
+      }
+
+      // Also check for products array with SKUs
+      if (json.products !== undefined && Array.isArray(json.products)) {
+        const skus = json.products.map((p: any) => p.sku).filter(Boolean)
+        if (skus.length > 0) {
+          return {
+            type: 'productSkus',
+            skus: skus,
+          } as ShopPrompterStreamProductSkusEvent
+        }
+      }
+
+      // Check for productSkus field directly
+      if (json.productSkus !== undefined) {
+        return {
+          type: 'productSkus',
+          skus: json.productSkus,
+        } as ShopPrompterStreamProductSkusEvent
+      }
+
+      // Handle output array format: {"output": [{"type": "product", "data": [...]}]}
+      if (json.output !== undefined && Array.isArray(json.output)) {
+        for (const item of json.output) {
+          if (
+            item.type === 'product' &&
+            item.data &&
+            Array.isArray(item.data)
+          ) {
+            // Extract SKUs from product data - handle both sku field and direct string SKUs
+            const skus = item.data
+              .filter((p: any) => p !== null)
+              .map((p: any) => (typeof p === 'string' ? p : p?.sku))
+              .filter(Boolean)
+            if (skus.length > 0) {
+              return {
+                type: 'productSkus',
+                skus: skus,
+              } as ShopPrompterStreamProductSkusEvent
+            }
+          }
+          // Also check for skus directly in output item
+          if (
+            item.type === 'product' &&
+            item.skus &&
+            Array.isArray(item.skus)
+          ) {
+            return {
+              type: 'productSkus',
+              skus: item.skus,
+            } as ShopPrompterStreamProductSkusEvent
+          }
+        }
+      }
+
+      if (json.navigation !== undefined) {
+        return {
+          type: 'navigation',
+          navigationOperations: json.navigation.map((nav: any) => ({
+            name: nav.name,
+            route: nav.path || nav.route,
+            description: nav.description,
+          })) as ShopPrompterNavigationOperation[],
+        } as ShopPrompterStreamNavigationEvent
+      }
+
+      if (json.cart !== undefined) {
+        return {
+          type: 'cart',
+          operations: json.cart.map((op: any) => ({
+            sku: op.sku,
+            action: op.action,
+            quantity: op.quantity || 1,
+          })) as ShopPrompterCartOperation[],
+        } as ShopPrompterStreamCartEvent
+      }
+
+      // Also check for cart in output array format
+      if (json.output !== undefined && Array.isArray(json.output)) {
+        for (const item of json.output) {
+          if (item.type === 'cart' && item.data) {
+            return {
+              type: 'cart',
+              operations: (Array.isArray(item.data)
+                ? item.data
+                : [item.data]
+              ).map((op: any) => ({
+                sku: op.sku,
+                action: op.action || 'add',
+                quantity: op.quantity || 1,
+              })) as ShopPrompterCartOperation[],
+            } as ShopPrompterStreamCartEvent
+          }
+        }
+      }
+
+      if (json.close !== undefined || json.type === 'close') {
+        return { type: 'close' }
+      }
+
+      return null
+    } catch {
+      // If it's plain text, treat it as a text event
+      if (data && typeof data === 'string') {
+        return {
+          type: 'text',
+          text: data,
+        } as ShopPrompterStreamTextEvent
+      }
+      return null
+    }
+  }
+}
+
+// Singleton instance
+export const shopPrompterApi = new DefaultShopPrompterApi()

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

@@ -0,0 +1,87 @@
+// ShopPrompter API Types
+
+export interface ShopPrompterApiConfiguration {
+  baseUrl: string
+  apiKey: string
+}
+
+export interface ShopPrompterResponse {
+  text?: string
+  products?: ShopPrompterProduct[]
+  skus?: string[]
+  navigation?: ShopPrompterNavigationOperation[]
+  cart?: ShopPrompterCartOperation[]
+}
+
+export interface ShopPrompterProduct {
+  sku: string
+  name: string
+  price: number
+  currency: string
+  images: string[]
+}
+
+// Stream Events
+export type ShopPrompterStreamEvent =
+  | ShopPrompterStreamTextEvent
+  | ShopPrompterStreamProductSkusEvent
+  | ShopPrompterStreamNavigationEvent
+  | ShopPrompterStreamCartEvent
+  | ShopPrompterStreamCloseEvent
+  | ShopPrompterErrorEvent
+
+export interface ShopPrompterStreamTextEvent {
+  type: 'text'
+  text: string
+}
+
+export interface ShopPrompterStreamProductSkusEvent {
+  type: 'productSkus'
+  skus: string[]
+}
+
+export interface ShopPrompterStreamNavigationEvent {
+  type: 'navigation'
+  navigationOperations: ShopPrompterNavigationOperation[]
+}
+
+export interface ShopPrompterNavigationOperation {
+  name: string
+  route: string
+  description: string
+}
+
+export interface ShopPrompterStreamCartEvent {
+  type: 'cart'
+  operations: ShopPrompterCartOperation[]
+}
+
+export interface ShopPrompterCartOperation {
+  sku: string
+  action: 'add' | 'remove'
+  quantity: number
+}
+
+export interface ShopPrompterStreamCloseEvent {
+  type: 'close'
+}
+
+export interface ShopPrompterErrorEvent {
+  type: 'error'
+  reason: string
+}
+
+// Agent Experience Types
+export interface AgentExperience {
+  agentName: string
+  agentLogoUrl: string
+  loadingIndicatorUrl: string
+  greeting: {
+    title: string
+    message: string
+  }
+  hintText: string
+  predefinedPrompts: Array<{
+    prompt: string
+  }>
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as ShopPrompter } from './shop-prompter.component';

package/src/product.types.ts

@@ -0,0 +1,32 @@
+export interface ProductCategory {
+  id: number;
+  name: string;
+}
+
+export interface Product {
+  name: string;
+  sku: string;
+  images: string[];
+  category: ProductCategory | null;
+  price: number;
+  currency: string;
+  description?: string;
+  extras: Record<string, unknown>;
+}
+
+export interface Pagination {
+  last: number;
+  current: number;
+  numItemsPerPage: number;
+  pageCount: number;
+  totalCount: number;
+}
+
+export interface ProductSearchResponse {
+  products: Product[];
+  pagination: Pagination;
+}
+
+export interface ProductSkuResponse {
+  products: Product[];
+}