shopify-chatbot-widget 0.7.9 → 0.8.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.7.9",
+  "version": "0.8.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx

@@ -0,0 +1,13 @@
+import Chatbot from './Chatbot/Chatbot';
+import 'antd/dist/reset.css'; // global AntD styles
+
+function App() {
+  return (
+    <div className='jaweb-reset'>
+  
+      <Chatbot />
+    </div>
+  );
+}
+
+export default App;

package/src/Chatbot/Chatbot.css

@@ -0,0 +1,270 @@
+.jaweb-chatbot-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    
+  }
+
+  /* Tailwind global CSS file */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+  
+  .chatbot-box {
+      position: fixed;
+      bottom: 5%;
+      right: 10px;
+      width: 28%;
+      top: 2%;
+      z-index: 9999;
+      height: 86%;
+      background: #ffffff;
+      color: #000000;
+      border-radius: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+      font-family: 'Inter', sans-serif;
+    }
+    
+
+  
+  
+  /* Mobile responsiveness */
+  
+  .chatbot-header {
+    background: #f7f7f7;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    gap: 12px;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  
+  .chatbot-title {
+    flex-grow: 1;
+  }
+  
+  .chatbot-close {
+    cursor: pointer;
+    font-size: 16px;
+    color: #888;
+  }
+  
+  .chatbot-messages {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    height: 70%;
+    gap: 12px;
+    background-color: #fafafa;
+    min-height: 70%;
+  
+    /* Hide scrollbar for all browsers */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  }
+  
+  /* Hide scrollbar for WebKit-based browsers (Chrome, Safari) */
+  .chatbot-messages::-webkit-scrollbar {
+    display: none;
+  }
+  
+  
+  .chat-msg {
+    max-width: 85%;
+    padding: 10px 14px;
+    border-radius: 16px;
+    font-size: 14px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
+  
+  .chat-msg.assistant {
+    background: #f0f0f0;
+    align-self: flex-start;
+    color: #000;
+  }
+  
+  .chat-msg.user {
+    background: #7f28f8;
+    align-self: flex-end;
+    color: white;
+  }
+  
+  .chatbot-input-area {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    height:22%;
+    align-items: center;
+    background: #ffffff;
+    border-top: 1px solid #e0e0e0;
+  
+  }
+  
+  .typing-animation span {
+    display: inline-block;
+    animation: blink 1.2s infinite;
+    font-size: 18px;
+    margin: 0 2px;
+  }
+  
+  .typing-animation span:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  .typing-animation span:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+  
+  @keyframes blink {
+    0% { opacity: 0.2; }
+    20% { opacity: 1; }
+    100% { opacity: 0.2; }
+  }
+  
+  /* brand color hook (optional) */
+.jaweb-chatbot-container { --jaweb-color: #7f28f8; }
+
+/* ===== NUDGE BUBBLE ===== */
+.jaweb-nudge-bubble{
+  position:absolute;
+  right:6px;               /* nudge in from the edge */
+  bottom:84px;  
+  width: 100px;           /* sits above the 60px launcher */
+  max-width:210px;
+  background:#ffffff;
+  color:#111;
+  border-radius:18px;
+  padding:12px 14px;
+  box-shadow:
+    0 18px 50px rgba(0,0,0,.18),
+    0 6px 18px rgba(0,0,0,.08);
+  border:1px solid rgba(17,17,17,.06);
+  cursor:pointer;
+  /* entrance */
+  opacity:0;
+  transform:translateY(8px) scale(.98);
+  animation:jb-in .32s cubic-bezier(.22,1,.36,1) forwards,
+           jb-float 6s ease-in-out 1.2s infinite;
+  z-index:10001;
+}
+
+/* “tail” pointing to the launcher */
+.jaweb-nudge-caret{
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%) rotate(45deg);
+  bottom:-8px;
+  width:14px;height:14px;
+  background:#ffffff;
+  border-right:1px solid rgba(17,17,17,.06);
+  border-bottom:1px solid rgba(17,17,17,.06);
+  filter: drop-shadow(0 2px 3px rgba(0,0,0,.08));
+}
+
+/* content: three dots on top + stacked text */
+.jaweb-nudge-text{
+  display:block;
+  word-wrap:normal;
+  word-break:normal;
+  font-size:15.5px;
+  line-height:1.25;
+  font-weight:600;
+  letter-spacing:.2px;
+}
+
+/* typing dots row */
+.jaweb-nudge-text .jaweb-typing-dot{
+  display:inline-block;
+  width:6px;height:6px;
+  margin-right:6px;
+  border-radius:9999px;
+  background:linear-gradient(180deg,#c8c8c8,#bdbdbd);
+  animation:jb-typing 1.2s infinite ease-in-out;
+  vertical-align:middle;
+}
+.jaweb-nudge-text .jaweb-typing-dot:nth-child(1){ animation-delay:0s; }
+.jaweb-nudge-text .jaweb-typing-dot:nth-child(2){ animation-delay:.15s; }
+.jaweb-nudge-text .jaweb-typing-dot:nth-child(3){ animation-delay:.3s; }
+
+/* subtle gradient ring on bubble edges (premium vibe) */
+.jaweb-nudge-bubble::before{
+  content:"";
+  position:absolute; inset:0;
+  border-radius:inherit;
+  pointer-events:none;
+  background:
+    radial-gradient(120% 120% at 50% -10%,
+      color-mix(in oklab, var(--jaweb-color, #7f28f8) 14%, transparent) 0%,
+      transparent 60%);
+}
+
+/* dark mode */
+@media (prefers-color-scheme: dark){
+  .jaweb-nudge-bubble{
+    background: #1f1f21;
+    color:#f5f5f7;
+    border:1px solid rgba(255,255,255,.06);
+    box-shadow:
+      0 22px 60px rgba(0,0,0,.55),
+      0 0 0 1px rgba(255,255,255,.04) inset;
+  }
+  .jaweb-nudge-caret{
+    background:#1f1f21;
+    border-right:1px solid rgba(255,255,255,.06);
+    border-bottom:1px solid rgba(255,255,255,.06);
+  }
+  .jaweb-nudge-text .jaweb-typing-dot{
+    background:linear-gradient(180deg,#bfbfbf,#a8a8a8);
+  }
+}
+
+/* reduced motion */
+@media (prefers-reduced-motion: reduce){
+  .jaweb-nudge-bubble{ animation:none; }
+  .jaweb-nudge-text .jaweb-typing-dot{ animation:none; }
+}
+
+/* keyframes */
+@keyframes jb-in{
+  to{ opacity:1; transform:translateY(0) scale(1); }
+}
+@keyframes jb-typing{
+  0%, 60%, 100%{ transform:translateY(0); opacity:.55; }
+  30%{ transform:translateY(-3px); opacity:1; }
+}
+@keyframes jb-float{
+  0%,100%{ transform:translateY(0); }
+  50%{ transform:translateY(-2px); }
+}
+
+  
+  
+  @media (max-width: 600px) {
+      .chatbot-box {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        right: 0;
+        bottom: 0;
+        top: 0;
+
+
+      }
+      .chat-launcher.chatbot-open {
+          display: none;
+        }
+    }

package/src/Chatbot/Chatbot.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import { useChatbotData } from '../hooks/useChatbotData';
+import ChatSessions from './components/Sessions/RenderList';
+import CreateSession from './components/Sessions/CreateSession';
+import Messenger from './components/Messenger/Messenger';
+import './Chatbot.css';
+import config from '../hooks/config';
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const Chatbot: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [HasInfo, setHasInfo] = useState(false);
+  const [activeAgentName, setActiveAgentName] = useState('');
+  const [activeAgentImage, setActiveAgentImage] = useState('');
+  const [newSession, setNewSession] = useState(false);
+
+
+  const {
+    chatbotLogo,
+    colorCode,
+    messagesSuggestions,
+    disableForm,
+    merchantPhone,
+    userType,
+    isFetchingDetails,
+    calendly,
+    disbleCheckout,
+  } = useChatbotData();
+
+  const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
+  const antIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#7F28F8' }} spin />;
+
+  const handleNewSessionClick = () => {
+    if (!disableForm && !HasInfo) {
+      setViewMode('create');
+      return;
+    } else {
+      const newSessionId = crypto.randomUUID();
+      setActiveSessionId(newSessionId);
+      setActiveAgentImage(chatbotLogo);
+      setActiveAgentName('Ai Agent');
+      setNewSession(true);
+      setViewMode('messenger');
+    }
+  };
+
+  useEffect(() => {
+    const fetchVisitorInfo = async () => {
+      try {
+        let visitorId = localStorage.getItem('visitor_id');
+
+        if (!visitorId) {
+          const fp = await FingerprintJS.load();
+          const result = await fp.get();
+          visitorId = result.visitorId;
+          localStorage.setItem('visitor_id', visitorId);
+        }
+
+        const backendRes = await fetch(`${config.apiUrl}register-ip/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ visitor_id: visitorId }),
+        });
+
+        const result = await backendRes.json();
+
+        if (result.visitor && result.country) {
+          localStorage.setItem('country', result.country);
+          setVisitorData({ visitorId: result.visitor, country: result.country });
+          setHasInfo(result.has_user_info || false);
+        } else {
+          console.warn('Backend did not return country');
+        }
+      } catch (err) {
+        console.error('Failed to fetch or send visitor info', err);
+      }
+    };
+
+    fetchVisitorInfo();
+  }, []);
+
+  const handleSessionSelect = (sessionId: string, agentName: string, agentImage: string) => {
+    setActiveSessionId(sessionId);
+    setActiveAgentName(agentName);
+    setActiveAgentImage(agentImage);
+    setNewSession(false);
+    setViewMode('messenger');
+  };
+
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      const msg = (e.data || {}) as any;
+      if (msg.type !== 'JAWEB_CHAT') return;
+
+      if (msg.action === 'open-ready') {
+        setOpen(true);
+      } else if (msg.action === 'closed') {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  const requestOpen = () => {
+    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'open' }, '*');
+  };
+  const requestClose = () => {
+    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'close' }, '*');
+  };
+
+  useEffect(() => {
+    if (!isFetchingDetails) {
+      window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'ready-confirm' }, '*');
+    }
+  }, [isFetchingDetails]);
+
+  return (
+    <div>
+      {open && (
+        <div className="chatbot-box">
+          {isFetchingDetails ? (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 300 }}>
+              <Spin indicator={antIcon} tip="..." />
+            </div>
+          ) : (
+            <AnimatePresence mode="sync">
+              {viewMode === 'sessions' && (
+                <motion.div
+                  key="sessions"
+                  initial={{ opacity: 0, x: -30 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 30 }}
+                  transition={{ duration: 0.3 }}
+                  style={{height:'100%'}}
+                >
+                  <ChatSessions
+                    chatbotLogo={chatbotLogo}
+                    Phone={merchantPhone || ''}
+                    colorCode={colorCode}
+                    visitorId={visitorData?.visitorId || ''}
+                    Opened={open}
+                    setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                    onNewSession={handleNewSessionClick}
+                    onSessionSelect={handleSessionSelect}
+                  />
+                </motion.div>
+              )}
+
+              {viewMode === 'create' && (
+                <motion.div
+                  key="create"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -30 }}
+                  transition={{ duration: 0.3 }}
+
+                >
+                  <CreateSession
+                    colorCode={colorCode}
+                    visitorId={visitorData?.visitorId || ''}
+                    country={visitorData?.country || ''}
+                    onBack={() => setViewMode('sessions')}
+                    onCreate={(userData) => {
+                      setActiveSessionId(userData.session_id);
+                      setHasInfo(userData.hasInfo);
+                      setViewMode('messenger');
+                    }}
+                  />
+                </motion.div>
+              )}
+
+              {viewMode === 'messenger' && activeSessionId && (
+                <motion.div
+                  key="messenger"
+                  initial={{ scale: 0.95, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.95, opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+
+                >
+                  <Messenger
+                    sessionId={activeSessionId}
+                    chatbotLogo={activeAgentImage || chatbotLogo}
+                    agentName={activeAgentName || 'Ai Assistant'}
+                    colorCode={colorCode}
+                    messagesSuggestions={messagesSuggestions}
+                    newSession={newSession}
+                    disableForm={disableForm}
+                    calendly={calendly ?? ''}
+                    setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                    setNewSession={setNewSession}
+                    Opened={open}
+                    setView={() => setViewMode('sessions')}
+                    userType={userType}
+                    disbleCheckout={disbleCheckout}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chatbot;

package/src/Chatbot/ChatbotTransition.css

@@ -0,0 +1,19 @@
+.fade-slide-enter {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  .fade-slide-enter-active {
+    opacity: 1;
+    transform: translateX(0);
+    transition: all 300ms ease;
+  }
+  .fade-slide-exit {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  .fade-slide-exit-active {
+    opacity: 0;
+    transform: translateX(-40px);
+    transition: all 300ms ease;
+  }
+