shopify-chatbot-widget 1.0.8 → 1.0.10

package/src/Chatbot/components/Messages/Support.tsx

@@ -1,14 +1,117 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Mail } from 'lucide-react';
+import { Ticket as TicketIcon, MailCheck } from 'lucide-react';
 import config from '../../../hooks/config';
+import { useTranslation } from 'react-i18next';
+import i18nInstance from '../../../i18n';
+
+export interface SupportTicket {
+  ticket_id: number;
+  status?: string;
+  created_at?: string;
+}
 
 interface SupportConnectProps {
   sessionId?: string;
   colorCode?: string;
+  ticket?: SupportTicket | null;
 }
 
-type Stage = 'email_sent' | 'connecting' | 'auto';
+const timeAgo = (iso?: string): string => {
+  if (!iso) return '';
+  const mins = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 60000));
+  if (mins < 1) return i18nInstance.t('time.justNow');
+  if (mins < 60) return i18nInstance.t('time.m', { n: mins });
+  const hours = Math.round(mins / 60);
+  if (hours < 24) return i18nInstance.t('time.h', { n: hours });
+  return i18nInstance.t('time.d', { n: Math.round(hours / 24) });
+};
+
+/** "Ticket submitted" divider + ticket card. Used by the live support flow
+ *  and by AssistantMessage when a saved message carries a ticket block. */
+export const TicketCard: React.FC<{ ticket: SupportTicket; colorCode?: string }> = ({
+  ticket,
+  colorCode = '#111111',
+}) => {
+  const { t } = useTranslation();
+  const statusColor = (ticket.status || 'Open') === 'Solved' ? '#16a34a' : colorCode;
+  return (
+    <div style={{ maxWidth: 320, marginBottom: 10, fontFamily: "'Inter', -apple-system, sans-serif" }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          margin: '4px 0 10px',
+          color: '#9ca3af',
+          fontSize: 11,
+          fontWeight: 600,
+          letterSpacing: '0.05em',
+          textTransform: 'uppercase',
+        }}
+      >
+        <span style={{ flex: 1, height: 1, background: '#ececec' }} />
+        <TicketIcon size={12} />
+        {t('support.ticketSubmitted')}
+        <span style={{ flex: 1, height: 1, background: '#ececec' }} />
+      </div>
+
+      <div
+        style={{
+          background: '#ffffff',
+          border: '1px solid #ececec',
+          borderRadius: 16,
+          padding: '12px 14px',
+          boxShadow: '0 1px 2px rgba(17,24,39,0.05)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <span
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 10,
+            background: `color-mix(in srgb, ${colorCode} 10%, #ffffff)`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: colorCode,
+            flexShrink: 0,
+          }}
+        >
+          <TicketIcon size={17} />
+        </span>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#111827' }}>
+            {t('home.ticketN', { id: ticket.ticket_id })}
+          </p>
+          <p style={{ margin: 0, fontSize: 12, fontWeight: 600, color: statusColor }}>
+            {t(`status.${ticket.status || 'Open'}`, ticket.status || 'Open')}
+          </p>
+        </div>
+        <span style={{ fontSize: 11, color: '#9ca3af', flexShrink: 0 }}>
+          {timeAgo(ticket.created_at)}
+        </span>
+        <span
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: 3,
+            background: `linear-gradient(90deg, ${colorCode}, color-mix(in srgb, ${colorCode} 30%, #ffffff))`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+type Stage = 'email_sent' | 'connecting' | 'auto' | 'notified';
 
 interface SupportData {
   userImage?: string;
@@ -17,80 +120,161 @@ interface SupportData {
   agentAvatar?: string;
 }
 
+/** Circle with the agent's initial — used when no real avatar exists. */
+const Initial: React.FC<{ name?: string; src?: string; accent: string }> = ({
+  name,
+  src,
+  accent,
+}) => {
+  const [broken, setBroken] = useState(false);
+  const showImg = src && !broken && src.startsWith('http');
+  if (showImg) {
+    return (
+      <img
+        src={src}
+        alt={name || 'Agent'}
+        onError={() => setBroken(true)}
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: '50%',
+          objectFit: 'cover',
+          border: '1px solid #ececec',
+          flexShrink: 0,
+        }}
+      />
+    );
+  }
+  return (
+    <span
+      style={{
+        width: 36,
+        height: 36,
+        borderRadius: '50%',
+        background: accent,
+        color: '#fff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 14,
+        fontWeight: 700,
+        flexShrink: 0,
+      }}
+    >
+      {(name || 'S').slice(0, 1).toUpperCase()}
+    </span>
+  );
+};
+
+const card: React.CSSProperties = {
+  background: '#ffffff',
+  border: '1px solid #ececec',
+  borderRadius: 16,
+  padding: '12px 14px',
+  boxShadow: '0 1px 2px rgba(17,24,39,0.05)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  maxWidth: 320,
+  fontFamily: "'Inter', -apple-system, sans-serif",
+};
+
 const SupportConnect: React.FC<SupportConnectProps> = ({
   sessionId,
-  colorCode = '#000',
+  colorCode = '#111111',
+  ticket,
 }) => {
-  const [stage, setStage] = useState<Stage | null>(null);
+  const { t } = useTranslation();
+  const [stage, setStage] = useState<Stage>('email_sent');
   const [data, setData] = useState<SupportData>({});
-  const [progress, setProgress] = useState<number>(0);
-  const dots = [0, 1, 2];
+  const stageRef = useRef<Stage>('email_sent');
+  stageRef.current = stage;
 
+  // Live stage updates, with reconnect — the consumer replays the last
+  // cached stage on connect, so late joins and refreshes recover state.
   useEffect(() => {
     if (!sessionId) return;
-    const ws = new WebSocket(
-      `${config.websocketUrl}/support/${sessionId}/`
-    );
+    let closed = false;
+    let attempts = 0;
+    let timer: number | undefined;
+    let ws: WebSocket;
 
-    ws.onmessage = ({ data: text }) => {
-      const msg = JSON.parse(text);
-      setStage(msg.stage as Stage);
-      setData(msg.data || {});
+    const connect = () => {
+      ws = new WebSocket(`${config.websocketUrl}/support/${sessionId}/`);
+      ws.onopen = () => {
+        attempts = 0;
+      };
+      ws.onmessage = ({ data: text }) => {
+        try {
+          const msg = JSON.parse(text);
+          if (!msg.stage) return;
+          // A replayed "in progress" stage older than 2 minutes means nobody
+          // picked up — show the honest offline state, don't re-run the show.
+          const ageSec = msg.ts ? Date.now() / 1000 - msg.ts : 0;
+          if (
+            ageSec > 120 &&
+            (msg.stage === 'email_sent' || msg.stage === 'connecting')
+          ) {
+            setStage('notified');
+            return;
+          }
+          setStage(msg.stage as Stage);
+          setData(msg.data || {});
+        } catch {
+          /* ignore malformed frames */
+        }
+      };
+      ws.onclose = () => {
+        if (closed) return;
+        const delay = Math.min(1000 * 2 ** attempts, 15000);
+        attempts += 1;
+        timer = window.setTimeout(connect, delay);
+      };
     };
-    ws.onclose = () => console.log('Support socket closed');
-    return () => ws.close();
-  }, [sessionId]);
-
-  useEffect(() => {
-    let timerId: number;
-    let start: number;
-
-    if (stage === 'connecting') {
-      start = Date.now();
-      setProgress(100);
-
-      timerId = window.setInterval(() => {
-        const elapsed = (Date.now() - start) / 1000; // seconds
-        const pct = Math.max(100 - (elapsed / 7) * 100, 0);
-        setProgress(pct);
-        if (pct <= 0) window.clearInterval(timerId);
-      }, 100);
-    }
 
+    connect();
     return () => {
-      if (timerId) window.clearInterval(timerId);
+      closed = true;
+      if (timer) window.clearTimeout(timer);
+      ws.close();
     };
-  }, [stage]);
+  }, [sessionId]);
+
+  // Never strand the visitor on an animation: if nobody picks up within
+  // 75s (celery down, empty team, lost events), fall back to "notified".
+  useEffect(() => {
+    const t = window.setTimeout(() => {
+      if (stageRef.current === 'email_sent' || stageRef.current === 'connecting') {
+        setStage('notified');
+      }
+    }, 75000);
+    return () => window.clearTimeout(t);
+  }, []);
 
-  if (!stage) return null;
+  const agent = data.agentName || t('support.teamMember');
 
   return (
-    <div className="bg-opacity-50 flex items-center justify-center z-50">
-      <AnimatePresence>
+    <div style={{ marginTop: 8 }}>
+      {ticket && <TicketCard ticket={ticket} colorCode={colorCode} />}
+      <AnimatePresence mode="wait">
         {stage === 'email_sent' && (
           <motion.div
             key="email"
-            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.8, opacity: 0 }}
+            style={card}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
           >
-            <Mail size={32} className="mb-2" style={{ color: colorCode }} />
-            <p className="text-lg font-semibold">
-              Sending your request to support…
-            </p>
-            <div className="flex space-x-2 mt-2">
-              {dots.map((_, i) => (
-                <motion.span
-                  key={i}
-                  className="text-2xl"
-                  style={{ color: colorCode }}
-                  animate={{ scale: [0.7, 1.3, 0.7] }}
-                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
-                >
-                  •
-                </motion.span>
-              ))}
+            <span className="jwbS-bars" style={{ '--jwbS-accent': colorCode } as React.CSSProperties}>
+              <span /><span /><span />
+            </span>
+            <div>
+              <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#111827' }}>
+                {t('support.reaching')}
+              </p>
+              <p style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>
+                {t('support.requestSent')}
+              </p>
             </div>
           </motion.div>
         )}
@@ -98,75 +282,84 @@ const SupportConnect: React.FC<SupportConnectProps> = ({
         {stage === 'connecting' && (
           <motion.div
             key="connecting"
-            className="bg-white rounded-2xl shadow-xl p-6 flex flex-col items-center"
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0.8, opacity: 0 }}
+            style={card}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
           >
-            <div className="flex items-center space-x-4">
-              <img
-                src={data.userImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaC0jamaBcOGTbS86459UezKUs2Wo0lPU_mw&s'}
-                alt="User"
-                className="w-12 h-12 rounded-full border-2"
-                style={{ borderColor: colorCode }}
-              />
-              <p className="text-lg">
-                Connecting you to{' '}
-                <span className="text-indigo-600">
-                  {data.agentName || 'Support Agent'}
-                </span>
+            <Initial name={agent} src={data.userImage} accent={colorCode} />
+            <div style={{ minWidth: 0 }}>
+              <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#111827' }}>
+                {t('support.connectingTo', { name: agent })}
+              </p>
+              <p style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>
+                {t('support.oneMoment')}
               </p>
-              <img
-                src={data.companyImage || 'https://cdn-icons-png.flaticon.com/512/4812/4812244.png'}
-                alt="Company"
-                className="w-12 h-12 rounded-full border"
-              />
-            </div>
-            <div className="flex space-x-2 mt-3">
-              {dots.map((_, i) => (
-                <motion.span
-                  key={i}
-                  className="text-2xl"
-                  style={{ color: colorCode }}
-                  animate={{ scale: [0.7, 1.3, 0.7] }}
-                  transition={{ delay: i * 0.2, repeat: Infinity, duration: 0.8 }}
-                >
-                  •
-                </motion.span>
-              ))}
-            </div>
-            <div className="w-full bg-gray-200 h-1 rounded-full mt-4 overflow-hidden">
-              <motion.div
-                className="h-full"
-                style={{ width: `${progress}%`, backgroundColor: colorCode }}
-                transition={{ ease: 'linear', duration: 1 }}
-              />
             </div>
+            <span
+              className="jwbS-bars"
+              style={{ '--jwbS-accent': colorCode, marginLeft: 'auto' } as React.CSSProperties}
+            >
+              <span /><span /><span />
+            </span>
           </motion.div>
         )}
 
         {stage === 'auto' && (
           <motion.div
-            key="auto"
-            className="bg-white rounded-2xl shadow-xl p-6 flex items-center space-x-4"
-            initial={{ y: 50, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: -50, opacity: 0 }}
+            key="connected"
+            style={card}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
           >
-            <img
-              src={
-                data.agentAvatar ||
-                'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaC0jamaBcOGTbS86459UezKUs2Wo0lPU_mw&s'
-              }
-              alt="Auto Support"
-              className="w-12 h-12 rounded-2xl"
-            />
-            <p className="text-lg">
-              You’re now connected to{' '}
-              <span style={{ color: colorCode }}>
-                {data.agentName || 'Auto-Support'}
-              </span>
-            </p>
+            <Initial name={agent} src={data.agentAvatar} accent={colorCode} />
+            <div style={{ minWidth: 0 }}>
+              <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#111827' }}>
+                {t('support.chattingWith', { name: agent })}
+              </p>
+              <p
+                style={{
+                  margin: 0,
+                  fontSize: 12,
+                  color: '#16a34a',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 5,
+                }}
+              >
+                <span
+                  style={{
+                    width: 6,
+                    height: 6,
+                    borderRadius: '50%',
+                    background: '#16a34a',
+                    display: 'inline-block',
+                  }}
+                />
+                {t('support.liveNow')}
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {stage === 'notified' && (
+          <motion.div
+            key="notified"
+            style={card}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <span style={{ color: '#6b7280', display: 'flex' }}>
+              <MailCheck size={20} />
+            </span>
+            <div style={{ minWidth: 0 }}>
+              <p style={{ margin: 0, fontSize: 13, fontWeight: 700, color: '#111827' }}>
+                {t('support.teamOffline')}
+              </p>
+              <p style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>
+                {t('support.savedSpot')}
+              </p>
+            </div>
           </motion.div>
         )}
       </AnimatePresence>

package/src/Chatbot/components/Messages/Typing.css

@@ -1,55 +1,51 @@
-/* Typing.css */
+/* Typing indicator — mini equalizer bars in a message bubble */
 
 .typing-container {
-  /* Layout */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--typing-gap);
-  
-  /* Appearance */
+
   background-color: var(--typing-bg);
   padding: var(--typing-padding);
-  border-radius: 9999px; /* Pill shape */
-  
-  /* Optional: Add a subtle shadow for depth */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  
-  /* Prevent layout shift */
-  will-change: transform;
-}
+  border: 1px solid #ececec;
+  border-radius: 16px 16px 16px 5px; /* matches assistant bubbles */
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
 
-.typing-dot {
-  width: var(--typing-dot-size);
-  height: var(--typing-dot-size);
-  background-color: var(--typing-dot-color);
-  border-radius: 50%;
-  
-  /* Animation definition */
-  animation: typingBounce 1.4s infinite ease-in-out both;
+  will-change: transform;
 }
 
-/* Stagger the animations */
-.typing-dot:nth-child(1) {
-  animation-delay: -0.32s;
+.typing-bar {
+  width: var(--typing-bar-w);
+  height: var(--typing-bar-h);
+  border-radius: 3px;
+  background: var(--typing-accent);
+  transform-origin: center;
+  animation: typingWave 1.1s ease-in-out infinite;
 }
 
-.typing-dot:nth-child(2) {
-  animation-delay: -0.16s;
+.typing-bar:nth-child(2) {
+  animation-delay: 0.18s;
 }
 
-.typing-dot:nth-child(3) {
-  animation-delay: 0s;
+.typing-bar:nth-child(3) {
+  animation-delay: 0.36s;
 }
 
-/* The Animation Keyframes */
-@keyframes typingBounce {
-  0%, 80%, 100% { 
-    transform: scale(0.8);
-    opacity: 0.5;
+@keyframes typingWave {
+  0%, 100% {
+    transform: scaleY(0.35);
+    opacity: 0.55;
   }
-  40% { 
-    transform: scale(1) translateY(-4px); /* Slight lift */
+  50% {
+    transform: scaleY(1);
     opacity: 1;
   }
-}
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .typing-bar {
+    animation: none;
+    transform: scaleY(0.7);
+  }
+}

package/src/Chatbot/components/Messages/Typing.tsx

@@ -2,43 +2,44 @@ import React from 'react';
 import './Typing.css';
 
 interface TypingProps {
-  /** Color of the moving dots */
+  /** Accent color of the animated bars */
   dotColor?: string;
   /** Color of the bubble background */
   bubbleColor?: string;
-  /** Size of the dots in pixels */
+  /** Base size in pixels (drives bar dimensions) */
   size?: number;
   /** Optional class name for the container */
   className?: string;
 }
 
-const Typing: React.FC<TypingProps> = ({ 
-  dotColor = '#6b7280', // Default dark grey
-  bubbleColor = '#e5e7eb', // Default light grey bubble
-  size = 8,
-  className = ''
+/** Typing indicator — mini equalizer bars, same motif as voice mode. */
+const Typing: React.FC<TypingProps> = ({
+  dotColor = '#111827',
+  bubbleColor = '#ffffff',
+  size = 10,
+  className = '',
 }) => {
-  // We pass dynamic values as CSS variables for better performance
   const style = {
-    '--typing-dot-color': dotColor,
+    '--typing-accent': dotColor,
     '--typing-bg': bubbleColor,
-    '--typing-dot-size': `${size}px`,
-    '--typing-gap': `${size * 0.5}px`, // Gap scales with size
-    '--typing-padding': `${size * 1.25}px ${size * 1.5}px` // Padding scales with size
+    '--typing-bar-w': `${Math.max(3, Math.round(size * 0.4))}px`,
+    '--typing-bar-h': `${Math.round(size * 1.6)}px`,
+    '--typing-gap': `${Math.max(2, Math.round(size * 0.35))}px`,
+    '--typing-padding': `${size}px ${Math.round(size * 1.4)}px`,
   } as React.CSSProperties;
 
   return (
-    <div 
-      className={`typing-container ${className}`} 
+    <div
+      className={`typing-container ${className}`}
       style={style}
       role="status"
       aria-label="Typing..."
     >
-      <span className="typing-dot" />
-      <span className="typing-dot" />
-      <span className="typing-dot" />
+      <span className="typing-bar" />
+      <span className="typing-bar" />
+      <span className="typing-bar" />
     </div>
   );
 };
 
-export default Typing;
+export default Typing;