shopify-chatbot-widget 1.0.8 → 1.0.10

package/src/Chatbot/components/Messenger/Messenger.tsx

@@ -1,6 +1,7 @@
 import React, { useState,useCallback } from 'react';
 import { Button, Avatar } from 'antd';
 import { CloseOutlined,ArrowLeftOutlined,ShoppingCartOutlined} from '@ant-design/icons';
+import VoiceMode from '../VoiceMode';
 import '../../Chatbot.css';
 import { useChatbotMessage } from '../../../hooks/useSessionMessages';
 import axios from 'axios';
@@ -8,6 +9,7 @@ import ChatInput from '../../components/ChatInput';
 import Powered from '../../components/Powered';
 import ChatMessages from '../../components/Messages/ChatMessages';
 import config from '../../../hooks/config';
+import { useTranslation } from 'react-i18next';
 import { useChatbotAPI } from '../../../hooks/useChatbotAPI';
 import type { ChatMessage } from '../../../types/chatbot';
 import { getCookie } from '../../../utils/cookies';
@@ -18,7 +20,6 @@ import { useCart } from '../../../hooks/useCart';
 
 type MessengerProps = {
   chatbotLogo: string;
-  userType:string;
   agentName:string;
   colorCode: string;
   newSession: boolean;
@@ -27,7 +28,7 @@ type MessengerProps = {
   disableForm: boolean;
   sessionId:string;
   setOpen: (v: boolean) => void;
-  setView: React.Dispatch<React.SetStateAction<'sessions' | 'create' | 'messenger' | 'cartView' | 'tryOn'>>;
+  setView: React.Dispatch<React.SetStateAction<'home' | 'create' | 'messenger' | 'cartView' | 'tryOn'>>;
   setNewSession: (v: boolean) => void;
  Opened: boolean;
  calendly:string;
@@ -52,7 +53,6 @@ const Messenger: React.FC<MessengerProps> = ({
   agentName,
   colorCode,
   newSession,
-  userType,
   setNewSession,
   messagesSuggestions,
   setMessagesSuggestions,
@@ -70,6 +70,8 @@ const Messenger: React.FC<MessengerProps> = ({
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
   const [isSending, setIsSending] = useState(false);
+  const { t } = useTranslation();
+  const [voiceOpen, setVoiceOpen] = useState(false);
 
 
 
@@ -450,18 +452,59 @@ const socket = useChatSocket(sessionId, handleSocketData);
         <Button
             type="text"
             style={{ marginRight: 8 }}
-            onClick={() => setView('sessions')} // or use a callback like `goBack()` if needed
+            onClick={() => setView('home')}
             icon={<ArrowLeftOutlined />}
         />
  
         {/* Avatar + Title */}
-        <Avatar
-            src={
-            chatbotLogo ||
-            'https://t4.ftcdn.net/jpg/08/90/53/75/360_F_890537572_m7EIYLzXgeTYGDNoIr7KEDOElFUTzFy0.jpg'
-            }
-        />
-        <span className="chatbot-title">{agentName || 'Ai Assistant'}</span>
+        <span className="chatbot-avatarWrap">
+          <Avatar
+              src={
+              chatbotLogo ||
+              'https://t4.ftcdn.net/jpg/08/90/53/75/360_F_890537572_m7EIYLzXgeTYGDNoIr7KEDOElFUTzFy0.jpg'
+              }
+          />
+          <span className="chatbot-avatarDot" />
+        </span>
+        <span className="chatbot-title">
+          <span className="chatbot-title-name">{agentName || t('messenger.aiAssistant')}</span>
+          <span className="chatbot-title-status">{t('messenger.onlineNow')}</span>
+        </span>
+
+        {/* Voice mode — filled accent button with equalizer motif */}
+        <button
+          onClick={() => setVoiceOpen(true)}
+          aria-label={t('messenger.voiceMode')}
+          title={t('messenger.talkToUs')}
+          style={{
+            marginLeft: 'auto',
+            marginRight: 10,
+            width: 34,
+            height: 34,
+            borderRadius: '50%',
+            border: 'none',
+            background: colorCode || '#111111',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 2.5,
+            cursor: 'pointer',
+            boxShadow: `0 4px 12px ${colorCode || '#111111'}55`,
+            flexShrink: 0,
+          }}
+        >
+          {[9, 15, 11].map((h, i) => (
+            <span
+              key={i}
+              style={{
+                width: 3,
+                height: h,
+                borderRadius: 2,
+                background: '#ffffff',
+              }}
+            />
+          ))}
+        </button>
 
         {items.length > 0 && (
   <div
@@ -470,7 +513,6 @@ const socket = useChatSocket(sessionId, handleSocketData);
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      marginLeft: "auto",
       marginRight: 12,
     }}
   >
@@ -498,7 +540,7 @@ const socket = useChatSocket(sessionId, handleSocketData);
         position: "absolute",
         top: 2,
         right: 2,
-        backgroundColor: colorCode || "#7F28F8",
+        backgroundColor: colorCode || "#111111",
         color: "white",
         fontSize: 10,
         fontWeight: 600,
@@ -549,7 +591,6 @@ const socket = useChatSocket(sessionId, handleSocketData);
           agentStatus={agentStatus}
           sessionId={sessionId}
           handleRemoveFromCart={handleRemoveFromCart}
-          userType={userType}
           calendly={calendly}
           disableCheckout={disbleCheckout}
           isfetchingMessage={isFetchingMessages}
@@ -580,6 +621,18 @@ const socket = useChatSocket(sessionId, handleSocketData);
 
         <Powered />
       </div>
+
+      {voiceOpen && (
+        <VoiceMode
+          sessionId={sessionId}
+          colorCode={colorCode}
+          agentName={agentName}
+          newSession={newSession}
+          setNewSession={setNewSession}
+          onClose={() => setVoiceOpen(false)}
+          setMessages={setMessages}
+        />
+      )}
     </div>
   );
 };

package/src/Chatbot/components/Powered.css

@@ -1,29 +1,27 @@
 .jawebcss-powered-container {
-    display: inline-flex;
-    margin-top: 10px;
-    align-items: center;
-    gap: 6px;
-    font-family: Arial, sans-serif;
-    font-size: 14px;
-    color: #555;
-    padding: 4px 8px;
-    border-radius: 6px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-  
-  .jawebcss-powered-label {
-    font-weight: 400;
-  }
-  
-  .jawebcss-powered-link {
-    color: #7f28f8;
-    font-weight: 600;
-    text-decoration: none;
-    transition: color 0.2s ease;
-  }
-  
-  .jawebcss-powered-link:hover {
-    color: #5e1dc3;
-    text-decoration: underline;
-  }
-  
+  display: inline-flex;
+  margin-top: 8px;
+  align-items: center;
+  gap: 4px;
+  font-family: 'Inter', -apple-system, sans-serif;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  padding: 2px 8px;
+}
+
+.jawebcss-powered-label {
+  font-weight: 500;
+}
+
+.jawebcss-powered-link {
+  color: #111827;
+  font-weight: 700;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+}
+
+.jawebcss-powered-link:hover {
+  opacity: 0.6;
+}

package/src/Chatbot/components/Powered.tsx

@@ -2,7 +2,7 @@ import './Powered.css';
 
 export default function Powered() {
   return (
-    <div className="jawebcss-powered-container">
+    <div dir="ltr" className="jawebcss-powered-container">
       <span className="jawebcss-powered-label">Powered by</span>
       <a href="https://jaweb.me/" target="_blank" className="jawebcss-powered-link" rel="noopener noreferrer">
         Jaweb

package/src/Chatbot/components/Sessions/CreateSession.tsx

@@ -3,6 +3,7 @@ import { Button, Input, Typography, Spin } from 'antd';
 import { ArrowLeftOutlined, LoadingOutlined } from '@ant-design/icons';
 import { motion } from 'framer-motion';
 import config from '../../../hooks/config';
+import { useTranslation } from 'react-i18next';
 
 const { Title, Text } = Typography;
 
@@ -51,6 +52,7 @@ const CreateSession: React.FC<CreateSessionProps> = ({
   visitorId,
   country,
 }) => {
+  const { t } = useTranslation();
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [phone, setPhone] = useState('');
@@ -109,7 +111,7 @@ const CreateSession: React.FC<CreateSessionProps> = ({
           onClick={onBack}
           style={{ marginBottom: '1rem' }}
         >
-          Back
+          {t('form.back')}
         </Button>
       </motion.div>
 
@@ -121,10 +123,10 @@ const CreateSession: React.FC<CreateSessionProps> = ({
         style={{ textAlign: 'center' }}
       >
         <Title level={3} style={{ marginBottom: '2rem' }}>
-          Welcome 👋  
+          {t('form.welcome')}
         </Title>
         <Text type="secondary">
-          Please share a few details so we can get started.
+          {t('form.shareDetails')}
         </Text>
       </motion.div>
 
@@ -148,23 +150,23 @@ const CreateSession: React.FC<CreateSessionProps> = ({
         }}
       >
         <FormField
-          label="Your Name"
+          label={t("form.yourName")}
           value={name}
           setter={setName}
-          placeholder="Enter your full name"
+          placeholder={t("form.namePh")}
         />
         <FormField
-          label="Email Address"
+          label={t("form.emailAddress")}
           value={email}
           setter={setEmail}
           type="email"
-          placeholder="Enter your email"
+          placeholder={t("form.emailPh")}
         />
         <FormField
-          label="Phone Number"
+          label={t("form.phoneNumber")}
           value={phone}
           setter={setPhone}
-          placeholder="Enter your phone number"
+          placeholder={t("form.phonePh")}
         />
 
         {/* Submit Button */}
@@ -188,7 +190,7 @@ const CreateSession: React.FC<CreateSessionProps> = ({
                 }
               />
             ) : (
-              'Start Chat'
+              t('form.startChat')
             )}
           </Button>
         </motion.div>

package/src/Chatbot/components/TryOn/View.tsx

@@ -69,7 +69,7 @@ const TryOnLayout: React.FC<TryOnProps> = ({
   
   const fileInputRef = useRef<HTMLInputElement>(null);
   
-  const themeColor = colorCode || '#7F28F8';
+  const themeColor = colorCode || '#111111';
 
   const activeProduct = product || {
     variant_id: '0',
@@ -302,7 +302,7 @@ const TryOnLayout: React.FC<TryOnProps> = ({
     </>
   );
 
-  const hideCart = ['zid', 'email', 'salla'].includes(userType);
+  const hideCart = userType === 'email';
   const showCartControls = !addToCart && !hideCart && currentState === 'generated' && !isGenerating;
 
 

package/src/Chatbot/components/VoiceMode.css

@@ -0,0 +1,247 @@
+/* Voice mode — full-widget overlay with premium equalizer bars */
+.jwbV-overlay {
+  --jwbV-accent: #111111;
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  background: rgba(255, 255, 255, 0.97);
+  backdrop-filter: blur(12px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  font-family: 'Inter', -apple-system, sans-serif;
+  overflow-y: auto;
+}
+
+.jwbV-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid #ececec;
+  background: #ffffff;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  z-index: 2;
+}
+
+.jwbV-close:hover {
+  color: #111827;
+  border-color: #d1d5db;
+}
+
+/* ===== Equalizer bars ===== */
+.jwbV-bars {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  height: 130px;
+  padding: 20px 28px;
+  border-radius: 28px;
+  transition: background 0.2s ease;
+  flex-shrink: 0;
+}
+
+.jwbV-bars:hover {
+  background: rgba(17, 24, 39, 0.03);
+}
+
+.jwbV-bar {
+  width: 12px;
+  height: 46px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--jwbV-accent) 65%, #ffffff),
+    var(--jwbV-accent)
+  );
+  box-shadow: 0 8px 22px color-mix(in srgb, var(--jwbV-accent) 25%, transparent);
+  transform-origin: center;
+}
+
+/* Listening: gentle rolling wave */
+.jwbV-bars--listening .jwbV-bar {
+  animation: jwbV-wave 1.5s ease-in-out infinite;
+}
+
+/* Thinking: soft dim pulse, bars settle small */
+.jwbV-bars--thinking .jwbV-bar {
+  animation: jwbV-ponder 1.2s ease-in-out infinite;
+  filter: saturate(0.55);
+}
+
+/* Speaking: energetic dance — varied rhythm per bar */
+.jwbV-bars--speaking .jwbV-bar {
+  animation: jwbV-dance 0.62s ease-in-out infinite;
+}
+.jwbV-bars--speaking .jwbV-bar:nth-child(2n) {
+  animation-duration: 0.48s;
+}
+.jwbV-bars--speaking .jwbV-bar:nth-child(3n) {
+  animation-duration: 0.72s;
+}
+
+/* Error: flat + grey */
+.jwbV-bars--error .jwbV-bar {
+  filter: grayscale(1);
+  opacity: 0.45;
+  transform: scaleY(0.4);
+}
+
+@keyframes jwbV-wave {
+  0%, 100% { transform: scaleY(0.55); }
+  50% { transform: scaleY(1); }
+}
+
+@keyframes jwbV-ponder {
+  0%, 100% { transform: scaleY(0.35); opacity: 0.7; }
+  50% { transform: scaleY(0.5); opacity: 1; }
+}
+
+@keyframes jwbV-dance {
+  0%, 100% { transform: scaleY(0.35); }
+  35% { transform: scaleY(1.25); }
+  70% { transform: scaleY(0.7); }
+}
+
+/* ===== Text ===== */
+.jwbV-status {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #111827;
+}
+
+.jwbV-transcript {
+  margin: 0;
+  font-size: 14px;
+  color: #6b7280;
+  text-align: center;
+  max-width: 300px;
+}
+
+.jwbV-reply {
+  margin: 0;
+  font-size: 13px;
+  color: #374151;
+  text-align: center;
+  max-width: 300px;
+  line-height: 1.5;
+}
+
+.jwbV-hint {
+  margin: 0;
+  font-size: 12px;
+  color: #9ca3af;
+  text-align: center;
+}
+
+/* ===== Cards inside voice mode ===== */
+.jwbV-payload {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.jwbV-products {
+  gap: 10px;
+  overflow-x: auto;
+  justify-content: flex-start;
+  padding: 4px 2px;
+  scrollbar-width: none;
+}
+
+.jwbV-products::-webkit-scrollbar {
+  display: none;
+}
+
+.jwbV-product {
+  flex: 0 0 auto;
+  width: 132px;
+  background: #ffffff;
+  border: 1px solid #ececec;
+  border-radius: 14px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.jwbV-product:hover {
+  border-color: #d1d5db;
+  transform: translateY(-2px);
+}
+
+.jwbV-productLink {
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+
+.jwbV-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: none;
+  background: var(--jwbV-accent);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  height: 30px;
+  border-radius: 9px;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.jwbV-add:hover {
+  opacity: 0.85;
+}
+
+.jwbV-add--done {
+  background: #16a34a;
+  cursor: default;
+}
+
+.jwbV-productImg {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 9px;
+  background: #f6f7f9;
+}
+
+.jwbV-productName {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jwbV-productPrice {
+  font-size: 11.5px;
+  font-weight: 700;
+  color: #111827;
+}