@shop-prompter/react 0.1.1

package/src/shop-prompter.component.jsx

@@ -0,0 +1,728 @@
+"use client";
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { ShopPrompterService } from "./shop-prompter.service";
+const styles = {
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px",
+  },
+  subHeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  headerButton: {
+    fontSize: "0.75rem",
+    color: "#71717a",
+    padding: "0.25rem 0.5rem",
+    borderRadius: "0.25rem",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s, color 0.2s",
+    onHover: {
+      backgroundColor: "hsl(220 14% 96%)",
+      color: "hsl(220 13% 13%)",
+    },
+  },
+  headerText: {
+    color: "hsl(220 13% 13%)",
+    fontWeight: 600,
+  },
+  button: {
+    padding: "0.625rem 1rem",
+    border: "1px solid #e5e7eb",
+    borderRadius: "0.75rem",
+    backgroundColor: "transparent",
+    transition: "background-color 0.2s, color 0.2s",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    color: "#09090b",
+  },
+  ButtonSheetButton: {
+    color: "#6b7280",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    padding: "0.25rem",
+    fontSize: "1.25rem",
+    transition: "color 0.2s",
+  },
+  chatContainer: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "1rem",
+    backgroundColor: "white",
+  },
+  welcomeContainer: {
+    textAlign: "center",
+    paddingTop: "3rem",
+    paddingBottom: "3rem",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  welcomeTitle: {
+    color: "#111827",
+    marginBottom: "0.5rem",
+    fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
+    fontWeight: 500,
+    fontStyle: "Medium",
+    fontSize: "32px",
+    leadingTrim: "NONE",
+    lineHeight: "100%",
+    letterSpacing: "0%",
+    textAlign: "center",
+  },
+  welcomeDescription: {
+    color: "#4b5563",
+    maxWidth: "20rem",
+    fontFamily: 'var(--font-space-grotesk), "Space Grotesk", sans-serif',
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: "16px",
+    leadingTrim: "NONE",
+    lineHeight: "100%",
+    letterSpacing: "0%",
+    textAlign: "center",
+  },
+  buttonContainer: {
+    marginTop: "2rem",
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: "0.5rem",
+  },
+  messageContainerUser: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+  },
+  messageContainerAssistant: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+  },
+  messageBubbleUser: {
+    backgroundColor: "#111827",
+    color: "white",
+    borderRadius: "1rem",
+    borderTopRightRadius: "0",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    maxWidth: "85%",
+  },
+  messageBubbleAssistant: {
+    backgroundColor: "#f3f4f6",
+    color: "#1f2937",
+    borderRadius: "1rem",
+    borderTopLeftRadius: "0",
+    padding: "0.5rem 1rem",
+    fontSize: "0.875rem",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    maxWidth: "85%",
+  },
+  thinkingIndicator: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    fontStyle: "italic",
+    color: "#6b7280",
+  },
+  productCardsContainer: {
+    marginTop: "1rem",
+    display: "flex",
+    gap: "0.75rem",
+    overflowX: "auto",
+    width: "100%",
+    paddingBottom: "0.5rem",
+  },
+  productCard: {
+    minWidth: "8rem",
+    backgroundColor: "white",
+    border: "1px solid #e5e7eb",
+    borderRadius: "0.75rem",
+    overflow: "hidden",
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    display: "flex",
+    flexDirection: "column",
+  },
+  productImageContainer: {
+    height: "6rem",
+    backgroundColor: "#f9fafb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0.5rem",
+  },
+  productInfo: {
+    padding: "0.5rem",
+  },
+  productSku: {
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "#111827",
+  },
+  productLink: {
+    fontSize: "0.625rem",
+    color: "#2563eb",
+    fontWeight: "bold",
+    textDecoration: "none",
+  },
+  errorContainer: {
+    padding: "0.75rem",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem",
+  },
+  inputSection: {
+    padding: "1rem",
+    borderTop: "1px solid #e5e7eb",
+    backgroundColor: "#f9fafb",
+  },
+  inputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    backgroundColor: "white",
+    border: "1px solid #d1d5db",
+    borderRadius: "0.75rem",
+    padding: "0.5rem 1rem",
+    transition: "all 0.2s",
+  },
+  input: {
+    flex: 1,
+    backgroundColor: "transparent",
+    border: "none",
+    outline: "none",
+    fontSize: "0.875rem",
+    color: "#111827",
+    padding: "0.25rem 0",
+  },
+  formButton: {
+    backgroundColor: "transparent",
+    color: "white",
+    width: "32px",
+    height: "32px",
+    borderRadius: "0.5rem",
+    padding: 0,
+    fontSize: "0.75rem",
+    fontWeight: "bold",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s",
+  },
+  sendButton: {
+    backgroundColor: "#AD59FF1A",
+  },
+  disclaimer: {
+    fontSize: "0.625rem",
+    color: "#9ca3af",
+    textAlign: "center",
+    marginTop: "0.75rem",
+  },
+};
+const TRANSLATIONS = {
+  newChat: "New Chat",
+  welcomeToShopPrompter: "Welcome to ShopPrompter",
+  welcomeDescription:
+    "I am your personal AI shopping assistant. Ask me anything about our products!",
+  askMeAnything: "Ask me anything...",
+  thinking: "Thinking...",
+  showPopularItems: "Show popular items",
+  compareProducts: "Compare products",
+  findByBudget: "Find by budget",
+};
+const ICONS = {
+  chat: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/message-square.svg",
+  shopprompter:
+    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/bot.svg",
+  popularitems:
+    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/fire.svg",
+  compareproducts:
+    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/box.svg",
+  findbybudget:
+    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/foto.svg",
+  sendHorizontal:
+    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg",
+};
+
+function ShopPrompter(props) {
+  const [input, setInput] = useState(() => "");
+
+  const [isLoading, setIsLoading] = useState(() => false);
+
+  const [error, setError] = useState(() => null);
+
+  const [chatMessages, setChatMessages] = useState(() => []);
+
+  const [showChat, setShowChat] = useState(
+    () =>
+      props.chatPosition === "right-panel" || props.chatPosition === "full-page"
+  );
+
+  const [service, setService] = useState(() => null);
+
+  const [isHeaderButtonHovered, setIsHeaderButtonHovered] = useState(
+    () => false
+  );
+
+  const [agentExperience, setAgentExperience] = useState(() => null);
+
+  function containerStyle() {
+    const pos = props.chatPosition || "classic-chatbot";
+    const isFull = pos === "full-page";
+    const isBottom = pos === "bottom-sheet";
+    const isClassic = pos === "classic-chatbot";
+    const isRight = pos === "right-panel";
+    return {
+      position: isFull ? "relative" : "fixed",
+      bottom: isClassic ? "1rem" : isBottom ? "2rem" : "0",
+      right: isClassic || isRight ? "1rem" : "0",
+      width: isFull ? "100%" : isBottom ? "90%" : "24rem",
+      height: isClassic ? "550px" : isBottom ? "700px" : "100%",
+      maxWidth: isBottom ? "900px" : "none",
+      left: isBottom ? "50%" : "auto",
+      transform: isBottom ? "translateX(-50%)" : "none",
+      zIndex: 50,
+      backgroundColor: "white",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      borderRadius: isFull ? "0" : "0.5rem",
+      border: isFull ? "none" : "1px solid #e5e7eb",
+      boxShadow: isFull ? "none" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    };
+  }
+
+  function containerClass() {
+    const pos = props.chatPosition || "classic-chatbot";
+    if (pos === "classic-chatbot") return "sh-classic";
+    if (pos === "right-panel") return "sh-right";
+    if (pos === "bottom-sheet") return "sh-bottom";
+    return "sh-full";
+  }
+
+  function messages() {
+    return chatMessages.map((msg) => ({
+      ...msg,
+      safeProductSkus: msg.productSkus || [],
+    }));
+  }
+
+  function showWelcome() {
+    return chatMessages.length === 0;
+  }
+
+  function getProductImageUrl(sku) {
+    return "https://placehold.co/100x100?text=" + sku;
+  }
+
+  function getProductLink(sku) {
+    return "/product/" + sku;
+  }
+
+  function handleSend() {
+    if (!input.trim() || isLoading) return;
+    const userQuery = input;
+    setInput("");
+    const userMsg = {
+      id: Date.now().toString() + "-user",
+      role: "user",
+      content: userQuery,
+      productSkus: [],
+    };
+    setChatMessages([...chatMessages, userMsg]);
+    const assistantMsg = {
+      id: Date.now().toString() + "-assistant",
+      role: "assistant",
+      content: "",
+      productSkus: [],
+    };
+    setChatMessages([...chatMessages, assistantMsg]);
+    service?.sendMessage(
+      userQuery,
+      {
+        onTextUpdate: (text) => {
+          const updatedMessages = [...chatMessages];
+          const lastMsg = updatedMessages[updatedMessages.length - 1];
+          if (lastMsg) {
+            lastMsg.content = text;
+            setChatMessages(updatedMessages);
+          }
+        },
+        onProductSkus: (skus) => {
+          const updatedMessages = [...chatMessages];
+          const lastMsg = updatedMessages[updatedMessages.length - 1];
+          if (lastMsg) {
+            lastMsg.productSkus = skus;
+            setChatMessages(updatedMessages);
+          }
+        },
+        onLoadingChange: (loading) => {
+          setIsLoading(loading);
+        },
+        onError: (err) => {
+          setError(err);
+        },
+        onCartOperation: (ops) => {
+          if (props.onCartOperation) {
+            props.onCartOperation(ops);
+          }
+        },
+      },
+      props.cart || []
+    );
+  }
+
+  function toggleChat() {
+    setShowChat(!showChat);
+    if (!showChat && props.onClose) {
+      props.onClose();
+    }
+  }
+
+  function handleNewChat() {
+    setChatMessages([]);
+    service?.resetSession();
+  }
+
+  function onPopularItemsClick() {
+    setInput(TRANSLATIONS.showPopularItems);
+    handleSend();
+  }
+
+  function onCompareProductsClick() {
+    setInput(TRANSLATIONS.compareProducts);
+    handleSend();
+  }
+
+  function onInputChange(event) {
+    setInput(event.target.value);
+  }
+
+  function onInputKeyDown(event) {
+    if (event.key === "Enter") {
+      handleSend();
+    }
+  }
+
+  function onHeaderButtonMouseEnter() {
+    setIsHeaderButtonHovered(true);
+  }
+
+  function onHeaderButtonMouseLeave() {
+    setIsHeaderButtonHovered(false);
+  }
+
+  function doSomethingAsync() {
+    void (async function () {
+      console.log("## ~ ShopPrompter ~ state.service:", service);
+      if (!service) {
+        console.warn("Service not initialized yet");
+        return;
+      }
+      const response = await service?.getAgentExperience();
+      console.log("## ~ ShopPrompter ~ response:", response);
+      setAgentExperience(response);
+    })();
+  }
+
+  useEffect(() => {
+    const shopPrompterService = new ShopPrompterService();
+    setService(shopPrompterService);
+  }, []);
+  useEffect(() => {
+    if (service && !agentExperience) {
+      doSomethingAsync();
+    }
+    if (agentExperience) {
+      console.log("## ~ ShopPrompter ~ agentExperience updated:", {
+        greeting: agentExperience.greeting,
+        agentLogoUrl: agentExperience.agentLogoUrl,
+      });
+    }
+  }, [service, agentExperience]);
+
+  return (
+    <div className="shopprompter-sdk">
+      {props.chatPosition === "classic-chatbot" ? (
+        <>
+          {!showChat ? (
+            <button
+              className="fixed bottom-6 right-6 w-16 h-16 bg-blue-600 hover:bg-blue-700 rounded-full shadow-lg z-50 flex items-center justify-center transition-colors border-none cursor-pointer"
+              onClick={(e) => toggleChat()}
+              style={{
+                boxShadow: "0 0 0 8px rgba(37, 99, 235, 0.2)",
+              }}
+            >
+              <img
+                alt="Chat"
+                src={ICONS.chat}
+                style={{
+                  width: "28px",
+                  height: "28px",
+                }}
+              />
+            </button>
+          ) : null}
+        </>
+      ) : null}
+      {showChat ? (
+        <div style={containerStyle()} className={containerClass()}>
+          <div style={styles.header}>
+            <div style={styles.subHeaderContainer}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 46 47"
+                width="24"
+                height="24"
+                fill="none"
+              >
+                <path
+                  fill="url(#a)"
+                  d="M16.452 32.747c-1.587 0-2.874-1.3-2.874-2.903V14.25h5.259V0H5.747C2.576 0 0 2.6 0 5.806v21.139c0 3.208 2.575 5.805 5.748 5.805h10.704v-.003Z"
+                />
+                <path
+                  fill="url(#b)"
+                  d="M19.326 0c-3.173 0-5.748 2.6-5.748 5.806v8.444h15.438c1.586 0 2.874 1.3 2.874 2.902v3.924H46V0H19.326Z"
+                />
+                <path
+                  fill="url(#c)"
+                  d="M40.252 14.25H29.016c1.586 0 2.874 1.3 2.874 2.902v15.595h-6.751V47h15.117c3.173 0 5.748-2.6 5.748-5.806V20.055c0-3.205-2.575-5.806-5.748-5.806h-.004Z"
+                />
+                <path
+                  fill="url(#d)"
+                  d="M8.669 32.75H5.751c-3.173 0-5.747-2.6-5.747-5.805V47h26.142c3.172 0 5.747-2.6 5.747-5.806V32.75H8.67Z"
+                />
+                <defs>
+                  <linearGradient
+                    id="a"
+                    x1="14.3"
+                    x2="3.322"
+                    y1="22.494"
+                    y2="4.382"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="#B0145C" />
+                    <stop offset=".37" stopColor="#AE2E9A" />
+                    <stop offset="1" stopColor="#AD59FF" />
+                  </linearGradient>
+                  <linearGradient
+                    id="b"
+                    x1="21.156"
+                    x2="40.431"
+                    y1="21.216"
+                    y2="1.624"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop offset=".08" stopColor="#E7A2FF" />
+                    <stop offset=".37" stopColor="#E983CD" />
+                    <stop offset=".99" stopColor="#F03A58" />
+                  </linearGradient>
+                  <linearGradient
+                    id="c"
+                    x1="30.464"
+                    x2="46.567"
+                    y1="27.405"
+                    y2="42.472"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="#B0145C" />
+                    <stop offset=".02" stopColor="#B11861" />
+                    <stop offset=".27" stopColor="#C44999" />
+                    <stop offset=".5" stopColor="#D36FC5" />
+                    <stop offset=".71" stopColor="#DE8BE4" />
+                    <stop offset=".88" stopColor="#E49BF8" />
+                    <stop offset="1" stopColor="#E7A2FF" />
+                  </linearGradient>
+                  <linearGradient
+                    id="d"
+                    x1="23.356"
+                    x2="-.618"
+                    y1="44.082"
+                    y2="30.739"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stopColor="#AD59FF" />
+                    <stop offset=".1" stopColor="#B455EB" />
+                    <stop offset=".54" stopColor="#D4469C" />
+                    <stop offset=".85" stopColor="#E83D6B" />
+                    <stop offset="1" stopColor="#F03A58" />
+                  </linearGradient>
+                </defs>
+              </svg>
+              <span style={styles.headerText}>ShopPrompter&reg;</span>
+            </div>
+            <div style={styles.subHeaderContainer}>
+              <button
+                onClick={(e) => handleNewChat()}
+                onMouseEnter={(e) => onHeaderButtonMouseEnter()}
+                onMouseLeave={(e) => onHeaderButtonMouseLeave()}
+                style={{
+                  ...styles.headerButton,
+                  ...(isHeaderButtonHovered ? styles.headerButton.onHover : {}),
+                }}
+              >
+                {TRANSLATIONS.newChat}
+              </button>
+              {props.chatPosition === "classic-chatbot" ||
+              props.chatPosition === "right-panel" ||
+              props.chatPosition === "bottom-sheet" ? (
+                <button
+                  onClick={(e) => toggleChat()}
+                  style={styles.ButtonSheetButton}
+                >
+                  &times;
+                </button>
+              ) : null}
+            </div>
+          </div>
+          <div style={styles.chatContainer}>
+            {showWelcome() ? (
+              <div style={styles.welcomeContainer}>
+                <img
+                  alt="ShopPrompter"
+                  src={
+                    agentExperience?.agentLogoUrl
+                      ? agentExperience.agentLogoUrl
+                      : ICONS.shopprompter
+                  }
+                  style={{
+                    width: "64px",
+                    height: "64px",
+                    marginBottom: "24px",
+                  }}
+                />
+                <h3 style={styles.welcomeTitle}>
+                  {agentExperience?.greeting?.title ||
+                    TRANSLATIONS.welcomeToShopPrompter}
+                </h3>
+                <p style={styles.welcomeDescription}>
+                  {agentExperience?.greeting?.description ||
+                    TRANSLATIONS.welcomeDescription}
+                </p>
+                <div style={styles.buttonContainer}>
+                  <button
+                    style={styles.button}
+                    onClick={(e) => onPopularItemsClick()}
+                  >
+                    {TRANSLATIONS.showPopularItems}
+                  </button>
+                  <button
+                    style={styles.button}
+                    onClick={(e) => onCompareProductsClick()}
+                  >
+                    {TRANSLATIONS.compareProducts}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <>
+                {messages()?.map((message) => (
+                  <div
+                    key={message.id}
+                    style={
+                      message.role === "user"
+                        ? styles.messageContainerUser
+                        : styles.messageContainerAssistant
+                    }
+                  >
+                    <div
+                      style={
+                        message.role === "user"
+                          ? styles.messageBubbleUser
+                          : styles.messageBubbleAssistant
+                      }
+                    >
+                      {message.content}
+                      {!message.content ? (
+                        <>
+                          {message.role === "assistant" ? (
+                            <>
+                              {isLoading ? (
+                                <div style={styles.thinkingIndicator}>
+                                  {TRANSLATIONS.thinking}
+                                </div>
+                              ) : null}
+                            </>
+                          ) : null}
+                        </>
+                      ) : null}
+                    </div>
+                    {message.role === "assistant" ? (
+                      <div style={styles.productCardsContainer}>
+                        {message.safeProductSkus?.map((sku) => (
+                          <div key={sku} style={styles.productCard}>
+                            <div style={styles.productImageContainer}>
+                              <img
+                                src={getProductImageUrl(sku)}
+                                alt={sku}
+                                style={{
+                                  maxHeight: "100%",
+                                  maxWidth: "100%",
+                                }}
+                              />
+                            </div>
+                            <div style={styles.productInfo}>
+                              <p style={styles.productSku}>{sku}</p>
+                              <a
+                                href={getProductLink(sku)}
+                                style={styles.productLink}
+                              >
+                                VIEW DETAILS
+                              </a>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                ))}
+              </>
+            )}
+            {error ? (
+              <div style={styles.errorContainer}>Error: {error}</div>
+            ) : null}
+          </div>
+          <div style={styles.inputSection}>
+            <div style={styles.inputWrapper}>
+              <input
+                type="text"
+                style={styles.input}
+                placeholder={TRANSLATIONS.askMeAnything}
+                value={input}
+                onInput={(e) => onInputChange(e)}
+                onKeyDown={(e) => onInputKeyDown(e)}
+              />
+              <button
+                onClick={(e) => handleSend()}
+                style={{
+                  ...styles.formButton,
+                  ...styles.sendButton,
+                }}
+              >
+                <img alt="Send" src={ICONS.sendHorizontal} />
+              </button>
+            </div>
+            <p style={styles.disclaimer}>AI content may be inaccurate.</p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default ShopPrompter;