shopify-chatbot-widget 1.0.9 → 1.0.10

package/package.json

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

package/src/App.tsx

@@ -1,6 +1,15 @@
 import Chatbot from './Chatbot/Chatbot';
 import 'antd/dist/reset.css'; // global AntD styles
 
+// Dev harness only (src/main.tsx) — production mounts via chatbot-widget/index.tsx
+// inside the iframe proxy, which sets company_username itself.
+if (import.meta.env.DEV && !localStorage.getItem('company_username')) {
+  localStorage.setItem(
+    'company_username',
+    import.meta.env.VITE_DEV_COMPANY || 'blackbellex.myshopify.com'
+  );
+}
+
 function App() {
   return (
     <div className='jaweb-reset'>

package/src/Chatbot/Chatbot.css

@@ -1,12 +1,30 @@
+/* ============================================
+   Jaweb widget — design tokens
+   Monochrome structure; the merchant accent
+   color arrives as --jaweb-accent (set from
+   chatbot_color on .chatbot-box).
+   ============================================ */
+.jaweb-chatbot-container,
+.chatbot-box {
+  --jaweb-accent: #111111;
+  --jaweb-ink: #111827;
+  --jaweb-ink-soft: #6b7280;
+  --jaweb-ink-faint: #9ca3af;
+  --jaweb-line: #ececec;
+  --jaweb-line-soft: #f3f4f6;
+  --jaweb-surface: #ffffff;
+  --jaweb-surface-alt: #fafafa;
+  --jaweb-radius: 20px;
+}
+
 .jaweb-chatbot-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 9999;
-    
-  }
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+}
 
-  /* Tailwind global CSS file */
+/* Tailwind global CSS file */
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
@@ -15,50 +33,146 @@
   scrollbar-width: none;
 }
 
-  
-
-    
 .chatbot-box {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 420px;
   max-width: 28%;
-  height: 85vh; /* 85% of viewport height */
-  max-height: 800px; /* Even taller max height */
+  height: 85vh;
+  max-height: 800px;
   z-index: 9999;
-  background: #ffffff;
-  color: #000000;
-  border-radius: 12px;
+  background: var(--jaweb-surface);
+  color: var(--jaweb-ink);
+  border: 1px solid var(--jaweb-line);
+  border-radius: var(--jaweb-radius);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-  font-family: 'Inter', sans-serif;
+  box-shadow: 0 24px 64px rgba(17, 24, 39, 0.16), 0 4px 16px rgba(17, 24, 39, 0.08);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
+/* ===== Header — glass, floats over the messages ===== */
 .chatbot-header {
-  background: #f7f7f7;
-  padding: 16px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(18px) saturate(180%);
+  -webkit-backdrop-filter: blur(18px) saturate(180%);
+  padding: 14px 16px;
+  min-height: 68px;
   display: flex;
   align-items: center;
   gap: 12px;
+  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
+  box-shadow: 0 6px 24px rgba(17, 24, 39, 0.04);
+}
+
+/* messages scroll underneath the glass */
+.chatbot-messages {
+  padding-top: 84px !important;
+}
+
+.chatbot-avatarWrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.chatbot-avatarWrap .ant-avatar {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(17, 24, 39, 0.08);
+  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
+}
+
+.chatbot-avatarDot {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #22c55e;
+  border: 2.5px solid #ffffff;
+}
+
+.chatbot-title {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.chatbot-title-name {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--jaweb-ink);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chatbot-title-status {
+  font-size: 11.5px;
+  color: var(--jaweb-ink-soft);
+  font-weight: 500;
+}
+
+/* ghost-circle header buttons (back / close / cart) */
+.chatbot-header .ant-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--jaweb-ink-soft);
+  transition: all 0.15s ease;
+}
+
+.chatbot-header .ant-btn:hover {
+  background: rgba(17, 24, 39, 0.05) !important;
+  color: var(--jaweb-ink);
+}
+
+.chatbot-header .chatbot-close {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.chatbot-header .chatbot-close:hover {
+  background: rgba(17, 24, 39, 0.05);
+  color: var(--jaweb-ink);
+}
+
+.chatbot-close {
+  cursor: pointer;
   font-size: 16px;
-  font-weight: bold;
-  border-bottom: 1px solid #e0e0e0;
-  flex-shrink: 0; /* Prevent header from shrinking */
+  color: var(--jaweb-ink-faint);
 }
 
+/* ===== Messages area ===== */
 .chatbot-messages {
-  flex: 1; /* Take remaining space */
-  padding: 16px;
+  flex: 1;
+  padding: 16px 14px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  background-color: #fafafa;
-  min-height: 0; /* Important for flex overflow */
-  
+  gap: 10px;
+  background-color: var(--jaweb-surface-alt);
+  min-height: 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
@@ -67,15 +181,43 @@
   display: none;
 }
 
+/* ===== Bubbles ===== */
+.chat-msg {
+  max-width: 85%;
+  padding: 10px 14px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+  letter-spacing: -0.005em;
+}
+
+.chat-msg.assistant {
+  background: var(--jaweb-surface);
+  border: 1px solid var(--jaweb-line);
+  border-radius: 16px 16px 16px 5px;
+  align-self: flex-start;
+  color: var(--jaweb-ink);
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
+}
+
+.chat-msg.user {
+  background: var(--jaweb-accent);
+  border-radius: 16px 16px 5px 16px;
+  align-self: flex-end;
+  color: #ffffff;
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.12);
+}
+
+/* ===== Input area shell ===== */
 .chatbot-input-area {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #ffffff;
-  border-top: 1px solid #e0e0e0;
-  padding: 12px;
-  flex-shrink: 0; /* Prevent input area from shrinking */
+  background: var(--jaweb-surface);
+  border-top: 1px solid var(--jaweb-line-soft);
+  padding: 10px 12px 8px;
+  flex-shrink: 0;
 }
 
 @media (max-width: 768px) {
@@ -90,92 +232,30 @@
     top: 0;
     left: 0;
     border-radius: 0;
+    border: none;
   }
-  
+
   .chat-launcher.chatbot-open {
     display: none;
   }
 }
 
-  
-  
-  
-  .chatbot-title {
-    flex-grow: 1;
-  }
-  
-  .chatbot-close {
-    cursor: pointer;
-    font-size: 16px;
-    color: #888;
-  }
-
-  
-  .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;
-  }
-  
- 
-  
-  .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; }
-
-
-
-
-
-
-  
-/*   
-  @media (max-width: 600px) {
-      .chatbot-box {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        right: 0;
-        bottom: 0;
-        top: 0;
+.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;
+}
 
-      }
-      .chat-launcher.chatbot-open {
-          display: none;
-        }
-    } */
+@keyframes blink {
+  0% { opacity: 0.2; }
+  20% { opacity: 1; }
+  100% { opacity: 0.2; }
+}

package/src/Chatbot/Chatbot.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useEffect,useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { widgetDir } from '../i18n';
+import '../i18n';
 import { useChatbotData } from '../hooks/useChatbotData';
-import ChatSessions from './components/Sessions/RenderList';
 import CreateSession from './components/Sessions/CreateSession';
+import Home from './components/Home/Home';
 import Messenger from './components/Messenger/Messenger';
 import './Chatbot.css';
 import config from '../hooks/config';
@@ -14,7 +17,7 @@ import TryOnLayout from './components/TryOn/View';
 import { useCart } from '../hooks/useCart';
 const Chatbot: React.FC = () => {
   const [open, setOpen] = useState(true);
-const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | 'cartView' | 'tryOn'>('sessions');
+const [viewMode, setViewMode] = useState<'home' | 'create' | 'messenger' | 'cartView' | 'tryOn'>('home');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);
   const [activeAgentName, setActiveAgentName] = useState('');
@@ -40,7 +43,7 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
   } = useChatbotData();
 
   const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
-  const antIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#7F28F8' }} spin />;
+  const antIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#111111' }} spin />;
 
   const handleNewSessionClick = () => {
     // console.log(disableForm)
@@ -73,7 +76,6 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
         const backendRes = await fetch(`${config.apiUrl}register-ip/`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          credentials: 'include',
           body: JSON.stringify({ visitor_id: visitorId }),
         });
 
@@ -148,6 +150,8 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
 
 
   
+  const { i18n: i18nInstance } = useTranslation();
+  const boxDir = widgetDir(i18nInstance.language);
   const { addToCart, removeFromCart } = useCart(activeSessionId ?? "");
   
   const handleToCart = useCallback(
@@ -172,29 +176,33 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
   return (
     <div>
       {open && (
-        <div className="chatbot-box">
+        <div
+          className="chatbot-box"
+          dir={boxDir}
+          style={{ '--jaweb-accent': colorCode || '#111111' } as React.CSSProperties}
+        >
           {isFetchingDetails ? (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 300 }}>
               <Spin indicator={antIcon} tip="..." />
             </div>
           ) : (
             <AnimatePresence mode="sync">
-              {viewMode === 'sessions' && (
+              {viewMode === 'home' && (
                 <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%'}}
+                  key="home"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
+                  transition={{ duration: 0.25 }}
+                  style={{ height: '100%' }}
                 >
-                  <ChatSessions
+                  <Home
                     chatbotLogo={chatbotLogo}
-                    Phone={merchantPhone || ''}
+                    chatbotName={chatbotName}
                     colorCode={colorCode}
                     visitorId={visitorData?.visitorId || ''}
-                    Opened={open}
-                    setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                    merchantPhone={merchantPhone}
+                    onClose={() => requestClose()}
                     onNewSession={handleNewSessionClick}
                     onSessionSelect={handleSessionSelect}
                   />
@@ -214,7 +222,7 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
                     colorCode={colorCode}
                     visitorId={visitorData?.visitorId || ''}
                     country={visitorData?.country || ''}
-                    onBack={() => setViewMode('sessions')}
+                    onBack={() => setViewMode('home')}
                     onCreate={(userData) => {
                       setActiveSessionId(userData.session_id);
                       setHasInfo(userData.hasInfo);
@@ -302,9 +310,8 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
                     onTryOnSelect={(product: any) => {
                     setTryOnProduct(product);
                     setViewMode('tryOn');
-                  
+
                 }}
-                    userType={userType}
                     disbleCheckout={disbleCheckout}
                     setMessagesSuggestions={setMessagesSuggestions}
                     enableTry={enableTryOn}

package/src/Chatbot/components/Cart/Index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from "react";
+import { useTranslation } from 'react-i18next';
 import {
   CloseOutlined,
   ArrowLeftOutlined,
@@ -28,6 +29,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
 }) => {
   const { items, loading, removeFromCart, refresh } = useCart(sessionId || "");
   const { checkOut } = useCartAPI();
+  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
 
   /** ✅ Parse price from strings like "$2,000" or "USD 49.99" */
@@ -64,7 +66,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
     try {
       await checkOut(sessionId);
     } catch (err: any) {
-      message.error("Checkout failed. Please try again.");
+      message.error(t("cart.checkoutFailed"));
       console.error("Checkout error:", err);
     } finally {
       setIsLoading(false);
@@ -73,7 +75,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
 
   const loadingIcon = (
     <LoadingOutlined
-      style={{ fontSize: 24, color: colorCode || "#7F28F8" }}
+      style={{ fontSize: 24, color: colorCode || "#111111" }}
       spin
     />
   );
@@ -130,7 +132,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
             }}
             onMouseEnter={(e) =>
               ((e.currentTarget as HTMLElement).style.color =
-                colorCode || "#7F28F8")
+                colorCode || "#111111")
             }
             onMouseLeave={(e) =>
               ((e.currentTarget as HTMLElement).style.color = "#555")
@@ -150,7 +152,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
       >
         <h3 style={{ fontWeight: 600, marginBottom: 16 }}>
           <ShoppingOutlined style={{ marginRight: 8 }} />
-          Your Cart ({items.length})
+          {t('cart.yourCart', { count: items.length })}
         </h3>
 
         {loading ? (
@@ -159,7 +161,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
           </div>
         ) : items.length === 0 ? (
           <div style={{ textAlign: "center", color: "#888", marginTop: 60 }}>
-            Your cart is empty 🛒
+            {t('cart.empty')}
           </div>
         ) : (
           <div
@@ -215,7 +217,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
                         {item.name}
                       </p>
                       <p style={{ fontSize: 13, color: "#777", margin: 0 }}>
-                        Qty: {item.quantity}
+                        {t('cart.qty', { count: item.quantity })}
                       </p>
                     </div>
                   </div>
@@ -271,7 +273,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
             color: "#222",
           }}
         >
-          <span>Subtotal:</span>
+          <span>{t('cart.subtotal')}</span>
           <span>{subtotal.toLocaleString()}</span>
         </div>
 
@@ -289,7 +291,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
             fontWeight: 600,
           }}
         >
-          <span style={{ color: "white" }}>CHECKOUT</span>
+          <span style={{ color: "white" }}>{t("cart.checkout")}</span>
         </Button>
       </div>
     </div>

package/src/Chatbot/components/ChatInput.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import type { ChangeEvent } from "react";
-// import { useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { message as antMessage } from "antd";
 import {
   PictureOutlined,
@@ -42,7 +42,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
   isSending,
   colorCode,
 }) => {
-  // const { t } = useTranslation();
+  const { t } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [recordingDuration, setRecordingDuration] = useState(0);
@@ -87,7 +87,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
   const validateImage = (file: File): boolean => {
     const maxSize = 5 * 1024 * 1024; // 5MB
     if (file.size > maxSize) {
-      antMessage.warning("Image size should be less than 5MB");
+      antMessage.warning(t("input.imageTooBig"));
       return false;
     }
     return true;
@@ -143,7 +143,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   const handleVoiceRecord = async () => {
     if (!navigator.mediaDevices?.getUserMedia) {
-      antMessage.error("Voice recording is not supported in your browser");
+      antMessage.error(t("input.recordingUnsupported"));
       return;
     }
 
@@ -183,7 +183,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
         setIsRecording(true);
       } catch (err) {
         console.error(err);
-        antMessage.error("Microphone permission denied");
+        antMessage.error(t("input.micDenied"));
       }
     } else {
       mediaRecorderRef.current?.stop();
@@ -316,7 +316,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               <button
                 className="audio-cancel-button"
                 onClick={handleCancelRecording}
-                aria-label="Cancel recording"
+                aria-label={t("input.cancelRecording")}
               >
                 <CloseCircleOutlined />
               </button>
@@ -338,7 +338,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               ref={textareaRef}
               value={userMessage}
               onChange={handleTextareaChange}
-              placeholder="Enter Message ..."
+              placeholder={t("input.placeholder")}
               className="text-input"
               disabled={isSending}
               rows={1}
@@ -386,7 +386,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               className="action-icon-button"
               onClick={() => fileInputRef.current?.click()}
               disabled={isSending || isRecording}
-              aria-label="Upload image"
+              aria-label={t("input.uploadImage")}
             >
               <PictureOutlined />
             </button>
@@ -395,7 +395,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               onClick={handleVoiceRecord}
               className={`action-icon-button ${isRecording ? "recording" : ""}`}
               disabled={isSending}
-              aria-label={isRecording ? "Stop recording" : "Record voice"}
+              aria-label={isRecording ? t("input.stopRecording") : t("input.recordVoice")}
             >
               {isRecording ? <StopOutlined /> : <AudioOutlined />}
             </button>
@@ -428,7 +428,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
               }
             }}
             className={`send-button ${hasContent && !isSending ? "active" : ""}`}
-            aria-label="Send message"
+            aria-label={t("input.sendMessage")}
           >
             {isSending ? (
               <LoadingOutlined className="send-icon spin" />
@@ -442,7 +442,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
         {isDragging && (
           <div className="drag-overlay">
             <PictureOutlined className="drag-icon" />
-            <span>Drop image here</span>
+            <span>{t("input.dropImage")}</span>
           </div>
         )}
       </div>