shopify-chatbot-widget 1.0.9 → 1.0.10

package/src/Chatbot/components/Home/Home.tsx

@@ -0,0 +1,293 @@
+import React, { useEffect, useState } from 'react';
+import {
+  X,
+  MessageCircle,
+  ChevronRight,
+  Ticket as TicketIcon,
+  Plus,
+} from 'lucide-react';
+import config from '../../../hooks/config';
+import { useTranslation } from 'react-i18next';
+import i18nInstance, { setWidgetLang, WIDGET_LANGS } from '../../../i18n';
+import type { WidgetLang } from '../../../i18n';
+import './Home.css';
+
+interface HomeTicket {
+  ticket_id: number;
+  status: string;
+  created_at: string;
+  session_id?: string | null;
+}
+
+interface HomeSession {
+  id: string;
+  agentName: string;
+  agentImage?: string;
+  createdAt: string;
+  ended: boolean;
+  preview: string;
+  unread: number;
+}
+
+interface Props {
+  chatbotLogo: string;
+  chatbotName: string;
+  companyName?: string;
+  colorCode?: string;
+  visitorId: string;
+  merchantPhone?: string;
+  onClose: () => void;
+  onNewSession: () => void;
+  onSessionSelect: (sessionId: string, agentName: string, agentImage: string) => void;
+}
+
+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) });
+};
+
+const WhatsAppGlyph: React.FC<{ size?: number }> = ({ size = 16 }) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden>
+    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+  </svg>
+);
+
+const Home: React.FC<Props> = ({
+  chatbotLogo,
+  chatbotName,
+  companyName,
+  colorCode = '#111111',
+  visitorId,
+  merchantPhone,
+  onClose,
+  onNewSession,
+  onSessionSelect,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [tickets, setTickets] = useState<HomeTicket[]>([]);
+  const [sessions, setSessions] = useState<HomeSession[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+
+  useEffect(() => {
+    if (!visitorId) return;
+    const company = localStorage.getItem('company_username');
+
+    void (async () => {
+      try {
+        const res = await fetch(
+          `${config.apiUrl}get-chatlogs-by-ip/?visitor_id=${visitorId}&company_username=${company}`
+        );
+        const data = await res.json();
+        const mapped: HomeSession[] = (Array.isArray(data) ? data : []).map((item: any) => {
+          const created = new Date(item.date);
+          const days = (Date.now() - created.getTime()) / 86400000;
+          return {
+            id: item.user_session_id,
+            agentName: item.assignee || 'AI Agent',
+            agentImage: item.assignee_picture,
+            createdAt: item.date,
+            ended: !!item.closed || days >= 5,
+            preview: item.preview || '',
+            unread: Number(item.visitor_unread) || 0,
+          };
+        });
+        setSessions(mapped);
+      } catch {
+        /* ignore */
+      } finally {
+        setLoaded(true);
+      }
+    })();
+
+    void (async () => {
+      try {
+        const res = await fetch(
+          `${config.apiUrl}visitor-tickets/?visitor_id=${visitorId}&company_username=${company}`
+        );
+        const data = await res.json();
+        setTickets(data.tickets || []);
+      } catch {
+        /* home stays useful without tickets */
+      }
+    })();
+  }, [visitorId]);
+
+  // Unread replies first, then active, then ended; a handful unless expanded
+  const ordered = [
+    ...sessions.filter((s) => !s.ended && s.unread > 0),
+    ...sessions.filter((s) => !s.ended && s.unread === 0),
+    ...sessions.filter((s) => s.ended),
+  ];
+  const visibleSessions = showAll ? ordered : ordered.slice(0, 3);
+  const hiddenCount = ordered.length - 3;
+
+  return (
+    <div className="jwbH" style={{ '--jwbH-accent': colorCode } as React.CSSProperties}>
+      {/* Hero */}
+      <div className="jwbH-hero">
+        <div className="jwbH-heroGlow" />
+        <div className="jwbH-heroTop">
+          <span className="jwbH-logoWrap">
+            {chatbotLogo ? (
+              <img src={chatbotLogo} alt="" className="jwbH-logo" />
+            ) : (
+              <span className="jwbH-logoFallback">
+                {(companyName || chatbotName || 'J').slice(0, 1).toUpperCase()}
+              </span>
+            )}
+            <span className="jwbH-logoDot" aria-label={t("home.online")} />
+          </span>
+
+          <span className="jwbH-heroCtrls">
+            <span className="jwbH-lang" role="group" aria-label={t('home.language')}>
+              {WIDGET_LANGS.map((lng) => (
+                <button
+                  key={lng}
+                  type="button"
+                  className={`jwbH-langBtn ${i18n.language === lng ? 'jwbH-langBtn--active' : ''}`}
+                  onClick={() => setWidgetLang(lng as WidgetLang)}
+                >
+                  {lng === 'ar' ? 'ع' : lng.toUpperCase()}
+                </button>
+              ))}
+            </span>
+            <button className="jwbH-close" onClick={onClose} aria-label={t("home.closeChat")}>
+              <X size={17} />
+            </button>
+          </span>
+        </div>
+
+        <h2 className="jwbH-greeting">
+          {t('home.greeting')}<span className="jwbH-greetAccent">.</span>
+        </h2>
+        <p className="jwbH-sub">
+          {companyName ? t('home.subCompany', { company: companyName }) : ''}
+          {t('home.sub')}
+        </p>
+
+        {/* Channel choice */}
+        <div className="jwbH-channels">
+          <button className="jwbH-channel jwbH-channel--primary" onClick={onNewSession}>
+            <MessageCircle size={15} />
+            {t('home.startChat')}
+          </button>
+          {merchantPhone && (
+            <a
+              className="jwbH-channel jwbH-channel--whatsapp"
+              href={`https://wa.me/${merchantPhone.replace(/[^\d]/g, '')}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <WhatsAppGlyph size={15} />
+              {t('home.whatsapp')}
+            </a>
+          )}
+        </div>
+      </div>
+
+      <div className="jwbH-body">
+        {/* Conversations */}
+        {loaded && sessions.length > 0 && (
+          <section className="jwbH-section">
+            <div className="jwbH-sectionHead">
+              <h3>{t('home.conversations')}</h3>
+              <button onClick={onNewSession} className="jwbH-newBtn" aria-label={t("home.newChat")}>
+                <Plus size={13} /> {t('home.new')}
+              </button>
+            </div>
+
+            <div className={`jwbH-rows ${showAll ? 'jwbH-rows--expanded' : ''}`}>
+            {visibleSessions.map((s) =>
+              s.ended ? (
+                <div key={s.id} className="jwbH-row jwbH-row--ended">
+                  <span className="jwbH-rowIcon">
+                    <MessageCircle size={14} />
+                  </span>
+                  <span className="jwbH-rowText">
+                    <span className="jwbH-rowTop">
+                      <span className="jwbH-rowTitle">{s.agentName}</span>
+                      <span className="jwbH-rowTime">{timeAgo(s.createdAt)}</span>
+                    </span>
+                    <span className="jwbH-rowSub">{s.preview || t('home.conversationEnded')}</span>
+                  </span>
+                </div>
+              ) : (
+                <button
+                  key={s.id}
+                  className="jwbH-row"
+                  onClick={() => onSessionSelect(s.id, s.agentName, s.agentImage || '')}
+                >
+                  {s.agentImage ? (
+                    <img src={s.agentImage} alt="" className="jwbH-rowAvatar" />
+                  ) : (
+                    <span className="jwbH-rowIcon">
+                      <MessageCircle size={14} />
+                    </span>
+                  )}
+                  <span className="jwbH-rowText">
+                    <span className="jwbH-rowTop">
+                      <span className="jwbH-rowTitle">{s.agentName}</span>
+                      <span className="jwbH-rowTime">{timeAgo(s.createdAt)}</span>
+                    </span>
+                    <span className={`jwbH-rowSub ${s.unread > 0 ? 'jwbH-rowSub--unread' : ''}`}>
+                      {s.unread > 0 ? t('home.newReplies', { count: s.unread }) : s.preview || t('home.tapToContinue')}
+                    </span>
+                  </span>
+                  {s.unread > 0 ? (
+                    <span className="jwbH-unread">{s.unread}</span>
+                  ) : (
+                    <ChevronRight size={14} className="jwbH-rowArrow" />
+                  )}
+                </button>
+              )
+            )}
+            </div>
+
+            {hiddenCount > 0 && (
+              <button className="jwbH-more" onClick={() => setShowAll((v) => !v)}>
+                {showAll ? t('home.showLess') : t('home.showMore', { count: hiddenCount })}
+              </button>
+            )}
+          </section>
+        )}
+
+        {/* Tickets */}
+        {tickets.length > 0 && (
+          <section className="jwbH-section">
+            <div className="jwbH-sectionHead">
+              <h3>{t('home.yourTickets')}</h3>
+            </div>
+            <div className="jwbH-rows jwbH-rows--tickets">
+            {tickets.map((tk) => (
+              <div key={tk.ticket_id} className="jwbH-row jwbH-row--static">
+                <span className="jwbH-rowIcon">
+                  <TicketIcon size={14} />
+                </span>
+                <span className="jwbH-rowText">
+                  <span className="jwbH-rowTitle">{t('home.ticketN', { id: tk.ticket_id })}</span>
+                  <span className="jwbH-rowSub">{timeAgo(tk.created_at)}</span>
+                </span>
+                <span
+                  className={`jwbH-status ${
+                    tk.status === 'Solved' ? 'jwbH-status--solved' : ''
+                  }`}
+                >
+                  {t(`status.${tk.status}`, tk.status)}
+                </span>
+              </div>
+            ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Home;

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

@@ -14,7 +14,7 @@ const AddToCartConfirmation: React.FC<AddToCartConfirmationProps> = ({ message }
             <a
               key={i}
               href={part.trim()}
-              style={{ color: "#00b3bc" }}
+              style={{ color: "#111827" }}
               target="_blank"
               rel="noopener noreferrer"
               className="underline break-words"

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

@@ -1,8 +1,8 @@
 import React, { useState, useMemo, type FC } from 'react';
 import './ProductCard.css';
 import ProductCarousel from './Carousel/CardSwiper';
-import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import OrderCard, { type OrderStatusData } from './OrderCard';
+import { TicketCard, type SupportTicket } from './Support';
 import { useKeenSlider } from 'keen-slider/react';
 import 'keen-slider/keen-slider.min.css';
 
@@ -48,7 +48,7 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
         <a
           key={i}
           href={part.trim()}
-          style={{ color: '#00b3bc' }}
+          style={{ color: '#111827' }}
           target="_blank"
           rel="noopener noreferrer"
           className="underline break-words"
@@ -86,8 +86,42 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
     };
   };
 
+  // Structured blocks render as visual cards; the text fallback that follows
+  // them in the same message is suppressed (it's a duplicate).
+  const { orderCards, ticketCards, messageBody } = useMemo(() => {
+    const cards: OrderStatusData[] = [];
+    const tickets: SupportTicket[] = [];
+    let body = message;
+
+    const orderRe = /\[\[ORDER_STATUS\]\](.*?)\[\[\/ORDER_STATUS\]\]/gs;
+    let match;
+    while ((match = orderRe.exec(message)) !== null) {
+      try {
+        cards.push(JSON.parse(match[1]));
+      } catch {
+        /* malformed block — leave the text fallback visible */
+      }
+    }
+    if (cards.length > 0) {
+      body = body.replace(orderRe, '').trim();
+      if (body.startsWith('📋')) body = '';
+    }
+
+    const ticketRe = /\[\[SUPPORT_TICKET\]\](.*?)\[\[\/SUPPORT_TICKET\]\]/gs;
+    while ((match = ticketRe.exec(message)) !== null) {
+      try {
+        tickets.push(JSON.parse(match[1]));
+      } catch {
+        /* malformed block */
+      }
+    }
+    body = body.replace(ticketRe, '').trim();
+
+    return { orderCards: cards, ticketCards: tickets, messageBody: body };
+  }, [message]);
+
   const parsedSegments = useMemo(() => {
-    const parts = message.split('|||').map(p => p.trim()).filter(Boolean);
+    const parts = messageBody.split('|||').map(p => p.trim()).filter(Boolean);
     const segments: { type: 'text' | 'product'; data: any }[] = [];
     let lastProduct: ProductVariant | null = null;
 
@@ -112,7 +146,7 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
     });
 
     return segments;
-  }, [message]);
+  }, [messageBody]);
 
   const groupedProducts = useMemo(() => {
     const groups: Record<string, ProductVariant[]> = {};
@@ -132,11 +166,12 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
 
 
     const [currentSlide, setCurrentSlide] = useState(0);
-    const totalSlides =Object.keys(groupedProducts).length ;
+    const totalSlides = Object.keys(groupedProducts).length;
     const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
       loop: false,
-      mode: 'free',
-      slides: { perView: 1, spacing: 16 },
+      mode: 'snap',
+      // peek the next card so visitors know there's more to swipe
+      slides: { perView: totalSlides > 1 ? 1.12 : 1, spacing: 10 },
       slideChanged(s) {
         setCurrentSlide(s.track.details.rel);
       },
@@ -153,35 +188,45 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
           </p>
       ))}
 
+      {orderCards.map((card, i) => (
+        <OrderCard key={`order-${i}`} data={card} colorCode={colorCode} />
+      ))}
+
+      {ticketCards.map((ticket, i) => (
+        <TicketCard key={`ticket-${i}`} ticket={ticket} colorCode={colorCode} />
+      ))}
+
    
 
       {Object.keys(groupedProducts).length > 0 && (
         <>
-              {Object.keys(groupedProducts).length > 1 && (
-          <div
-            style={{
-              display: 'flex',
-              margin: 0,
-              marginBottom: '6px',
-              justifyContent: 'space-between',
-              paddingInline: '4px',
-            }}
-          >
-       <Button
-                shape="circle"
-                icon={<ArrowLeftOutlined />}
-                onClick={() => slider.current?.prev()}
-                disabled={currentSlide === 0}
-              />
-              <Button
-                shape="circle"
-                icon={<ArrowRightOutlined />}
-                onClick={() => slider.current?.next()}
-                disabled={currentSlide === totalSlides - 1}
-              />
-          </div>
-        )}
-          <div ref={sliderRef} className="keen-slider">
+          {totalSlides > 1 && (
+            <div className="jwbX-nav">
+              <span className="jwbX-navCount">
+                {currentSlide + 1} / {totalSlides}
+              </span>
+              <div className="jwbX-navBtns">
+                <button
+                  type="button"
+                  className="jwbX-navBtn"
+                  onClick={() => slider.current?.prev()}
+                  disabled={currentSlide === 0}
+                  aria-label="Previous product"
+                >
+                  ‹
+                </button>
+                <button
+                  type="button"
+                  className="jwbX-navBtn"
+                  onClick={() => slider.current?.next()}
+                  disabled={currentSlide === totalSlides - 1}
+                  aria-label="Next product"
+                >
+                  ›
+                </button>
+              </div>
+            </div>
+          )}
         <ProductCarousel
           groupedProducts={groupedProducts}
           selectedVariants={selectedVariants}
@@ -199,11 +244,7 @@ const AssistantMessage: FC<AssistantMessageProps> = ({
           disableCheckout={disableCheckout} 
           onTryOnSelect={onTryOnSelect}
           enableTry={enableTry}
-          // hides the – + controls
-
-
         />
-        </div>
         </>
       )}
     </div>

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

@@ -39,7 +39,7 @@ const ProductCarousel: FC<Props> = ({
   setCounts,
   handleAddToCart,
   handleRemoveFromCart,
-  colorCode = '#7F28F8',
+  colorCode = '#111111',
   shortenName,
   sliderRef,
   totalSlides,