@shop-prompter/react 0.1.1 → 1.1.0

package/src/shop-prompter.service.ts

@@ -1,13 +1,7 @@
 import { shopPrompterApi } from './api/shop-prompter-api'
+import { productApi } from './api/product-api'
 import { sessionHandler } from './api/session-handler'
-import { ShopPrompterStreamEvent } from './api/shop-prompter.types'
-
-// Configuration - you can move these to environment variables
-const SHOP_PROMPTER_CONFIG = {
-  baseUrl: 'https://demo.dev.shop-prompter.com/touch-points-api',
-  apiKey:
-    '864c87266ef52c079c09b3248d86b4b5ef430bf9e5a4188476124c93ee2f6dda380f337986837b30b60f73e6aceefe7a0e0f778b3d21a7fa7698cf8546afc709',
-}
+import { ShopPrompterApiConfiguration, ShopPrompterCartOperation } from './api/shop-prompter.types'
 
 export interface ChatMessage {
   id: string
@@ -15,6 +9,7 @@ export interface ChatMessage {
   content: string
   productSkus?: string[]
   isStreaming?: boolean
+  feedback?: 'upvote' | 'downvote' | null
 }
 
 export class ShopPrompterService {
@@ -22,8 +17,9 @@ export class ShopPrompterService {
   private error: string | null = null
   private streamingText = ''
 
-  constructor() {
-    shopPrompterApi.setApiConfig(SHOP_PROMPTER_CONFIG)
+  constructor(apiConfig: ShopPrompterApiConfiguration) {
+    shopPrompterApi.setApiConfig(apiConfig)
+    productApi.setApiConfig(apiConfig)
     sessionHandler.initialize()
   }
 
@@ -34,11 +30,7 @@ export class ShopPrompterService {
       onProductSkus?: (skus: string[]) => void
       onComplete?: () => void
       onCartOperation?: (
-        operations: {
-          sku: string
-          action: 'add' | 'remove'
-          quantity: number
-        }[],
+        operations: ShopPrompterCartOperation[],
       ) => void
       onError?: (error: string) => void
       onLoadingChange?: (loading: boolean) => void
@@ -53,7 +45,19 @@ export class ShopPrompterService {
     const userId = sessionHandler.getUserId()
     const sessionId = sessionHandler.getSessionId()
 
+    // Persist the user message immediately.
+    const userMsgId = Date.now().toString() + '-user'
+    sessionHandler.saveUserMessage(sessionId, {
+      id: userMsgId,
+      role: 'user',
+      content: prompt,
+      productSkus: [],
+    })
+
+    // Tracking variables for the assistant reply.
+    const assistantMsgId = Date.now().toString() + '-assistant'
     let accumulatedText = ''
+    let accumulatedSkus: string[] = []
 
     try {
       await shopPrompterApi.executeStream(
@@ -69,6 +73,7 @@ export class ShopPrompterService {
               break
 
             case 'productSkus':
+              accumulatedSkus = event.skus
               callbacks.onProductSkus?.(event.skus)
               break
 
@@ -85,6 +90,13 @@ export class ShopPrompterService {
               this.isLoading = false
               callbacks.onLoadingChange?.(false)
               callbacks.onComplete?.()
+              // Persist the fully-streamed assistant message.
+              sessionHandler.saveAssistantMessage(sessionId, {
+                id: assistantMsgId,
+                role: 'assistant',
+                content: accumulatedText,
+                productSkus: accumulatedSkus,
+              })
               break
 
             case 'error':
@@ -92,6 +104,7 @@ export class ShopPrompterService {
               this.isLoading = false
               callbacks.onLoadingChange?.(false)
               callbacks.onError?.(event.reason)
+              // Do NOT persist a failed assistant message.
               break
           }
         },
@@ -109,9 +122,6 @@ export class ShopPrompterService {
   }
 
   public async getAgentExperience() {
-    console.log(
-      '## ~ ShopPrompterService ~ getAgentExperience ~ getAgentExperience:',
-    )
 
     try {
       return await shopPrompterApi.getAgentExperience()
@@ -121,6 +131,38 @@ export class ShopPrompterService {
     }
   }
 
+  /**
+   * Load persisted chat messages for the current session from localStorage.
+   * Returns an empty array if nothing is stored yet.
+   */
+  public loadMessages(): ChatMessage[] {
+    const sessionId = sessionHandler.getSessionId()
+    const persisted = sessionHandler.loadMessages(sessionId)
+    return persisted.map((msg) => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      productSkus: msg.productSkus ?? [],
+      feedback: msg.feedback ?? null,
+    }))
+  }
+
+  public async sendFeedback(
+    messageId: string,
+    messageContent: string,
+    feedback: 'upvote' | 'downvote' | 'clear',
+  ): Promise<void> {
+    const userId = sessionHandler.getUserId()
+    const sessionId = sessionHandler.getSessionId()
+    const threadId = `${userId}:${sessionId}`
+
+    await shopPrompterApi.sendFeedback(threadId, messageContent, feedback)
+
+    // Persist the feedback locally on success.
+    const storedFeedback = feedback === 'clear' ? null : feedback
+    sessionHandler.updateMessageFeedback(sessionId, messageId, storedFeedback)
+  }
+
   public resetSession(): void {
     sessionHandler.regenerate()
   }

package/src/thumbs-down-icon.component.jsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+function ThumbsDownIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill={props.fill || "none"}
+      stroke={props.stroke || "currentColor"}
+      style={{
+        overflow: "visible",
+      }}
+    >
+      <path d="M17 14V2" />
+      <path d="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" />
+    </svg>
+  );
+}
+
+export default ThumbsDownIcon;

package/src/thumbs-up-icon.component.jsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+function ThumbsUpIcon(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill={props.fill || "none"}
+      stroke={props.stroke || "currentColor"}
+      style={{
+        overflow: "visible",
+      }}
+    >
+      <path d="M7 10v12" />
+      <path d="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" />
+    </svg>
+  );
+}
+
+export default ThumbsUpIcon;