shopify-chatbot-widget 0.9.7 → 1.0.0

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { List, Avatar, Typography, Button, Spin } from 'antd';
-import { UserOutlined, LoadingOutlined,CloseOutlined,WhatsAppOutlined } from '@ant-design/icons';
+import { List, Avatar, Typography, Spin } from 'antd';
+import { UserOutlined, LoadingOutlined, CloseOutlined, WhatsAppOutlined, MessageOutlined } from '@ant-design/icons';
 import config from '../../../hooks/config';
 
 const { Text, Title } = Typography;
@@ -11,25 +11,32 @@ type ChatSession = {
   createdAt: string;
   isBlurred?: boolean;
   agentImage?: string;
-
 };
 
 type ChatSessionsProps = {
   setOpen: (v: boolean) => void;
   Opened: boolean;
-  Phone:string;
+  Phone: string;
   chatbotLogo: string;
   colorCode?: string;
   onNewSession: () => void;
-  visitorId: string; 
-  onSessionSelect: (sessionId: string,agentName:string,agentImage:string) => void;
-
+  visitorId: string;
+  onSessionSelect: (sessionId: string, agentName: string, agentImage: string) => void;
 };
 
-const ChatSessions: React.FC<ChatSessionsProps> = ({ chatbotLogo, colorCode, onNewSession, visitorId ,onSessionSelect,  setOpen,
-  Opened,Phone}) => {
+const ChatSessions: React.FC<ChatSessionsProps> = ({
+  chatbotLogo,
+  colorCode,
+  onNewSession,
+  visitorId,
+  onSessionSelect,
+  setOpen,
+  Opened,
+  Phone,
+}) => {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [loading, setLoading] = useState(true);
+  const [mounted, setMounted] = useState(false);
 
   const fetchSessions = async () => {
     try {
@@ -38,25 +45,23 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({ chatbotLogo, colorCode, onN
         `${config.apiUrl}get-chatlogs-by-ip/?visitor_id=${visitorId}&company_username=${localStorage.getItem('company_username')}`
       );
       const data = await res.json();
-  
+
       const mapped: ChatSession[] = data.map((item: any) => {
         const createdDate = new Date(item.date);
         const now = new Date();
-        const diffDays = Math.floor(
-          (now.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24)
-        );
-  
+        const diffDays = Math.floor((now.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24));
+
         const isOlderThan5Days = diffDays >= 5;
-  
+
         return {
           id: item.user_session_id,
           agentName: item.assignee || 'AI Agent',
           createdAt: item.date,
-          isBlurred: item.closed || isOlderThan5Days, // ✅ auto-close if 3+ days old
+          isBlurred: item.closed || isOlderThan5Days,
           agentImage: item.assignee_picture,
         };
       });
-  
+
       setSessions(mapped);
     } catch (err) {
       console.error('Failed to load sessions:', err);
@@ -64,149 +69,448 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({ chatbotLogo, colorCode, onN
       setLoading(false);
     }
   };
+
   useEffect(() => {
     if (visitorId) {
       fetchSessions();
     }
+    setMounted(true);
   }, [visitorId]);
 
-  const loadingIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#7F28F8' }} spin />;
+  const loadingIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode || '#7F28F8' }} spin />;
+  const primaryColor = colorCode || '#7F28F8';
 
-  // const canCreateNewSession =
-  //   sessions.length === 0 ||
-  //   sessions[sessions.length - 1].isBlurred === true;
+  return (
+    <>
+      <style>
+        {`
+          @keyframes slideInUp {
+            from {
+              opacity: 0;
+              transform: translateY(30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
 
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
+          }
 
-  return (
-    <div
-      style={{
-        maxWidth: '100%',
-        height: '100%',
-        border: '1px solid #f0f0f0',
-        borderRadius: 8,
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        paddingTop: 20,
-      }}
-    >
-      <div style={{ padding: '0 16px 10px', display:'flex' }}>
-        <Title level={4} style={{ margin: 0 }}>
-          Conversations
-        </Title>
-
-
-      <CloseOutlined
-            onClick={() => setOpen(!Opened)}
-            className="chatbot-close"
-            style={{ marginLeft: 'auto' }}
-        />
-      </div>
+          @keyframes slideInRight {
+            from {
+              opacity: 0;
+              transform: translateX(-15px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
 
+          @keyframes scaleIn {
+            from {
+              opacity: 0;
+              transform: scale(0.95);
+            }
+            to {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
 
-      <div style={{ flex: 1, overflowY: 'auto' }}>
-        {loading ? (
-          <div style={{ textAlign: 'center', padding: '2rem' }}>
-            <Spin indicator={loadingIcon} />
-          </div>
-        ) : sessions.length > 0 ? (
-            <List
-            itemLayout="horizontal"
-            dataSource={sessions}
-            split={true}
-            renderItem={(session) => (
-              <List.Item
-                key={session.id}
-                onClick={() => !session.isBlurred && onSessionSelect(session.id,session.agentName||'Ai Agent',session.agentImage||chatbotLogo)} // ✅ Click logic
-                style={{
-                  padding: '12px',
-                  opacity: session.isBlurred ? 0.5 : 1,
-                  cursor: session.isBlurred ? 'not-allowed' : 'pointer',
-                  borderBottom: '1px solid #f0f0f0',
-                }}
-              >
-                <List.Item.Meta
-                  avatar={
-                    <Avatar
-                      size="large"
-                      src={session.agentImage || chatbotLogo}
-                      icon={!session.agentImage && !chatbotLogo ? <UserOutlined /> : undefined}
-                    />
-                  }
-                  title={
-                    <span style={{ fontWeight: 600 }}>
-                      {session.agentName || 'AI Agent'}
-                    </span>
-                  }
-                  description={
-                    <>
-                      <Text type="secondary">
-                        Created: {new Date(session.createdAt).toLocaleDateString()}
-                      </Text>
-                      {session.isBlurred && (
-                        <div style={{ color: 'red', fontSize: '12px', marginTop: 4 }}>
-                          This session is closed and cannot be reopened.
-                        </div>
-                      )}
-                    </>
-                  }
-                />
-              </List.Item>
-            )}
+          @keyframes spinnerPulse {
+            0%, 100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.8;
+              transform: scale(1.05);
+            }
+          }
+
+          .chat-sessions-container {
+            animation: ${mounted ? 'slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)' : 'none'};
+          }
+
+          .session-list-item {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+          }
+
+          .session-list-item::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background: ${primaryColor};
+            transform: scaleY(0);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+
+          .session-list-item:hover:not(.disabled)::before {
+            transform: scaleY(1);
+          }
+
+          .session-list-item:hover:not(.disabled) {
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
+            backdropFilter: blur(10px);
+            transform: translateX(4px);
+          }
+
+          .session-list-item:active:not(.disabled) {
+            transform: translateX(2px) scale(0.99);
+          }
+
+          .session-list-item.stagger-1 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
+          .session-list-item.stagger-2 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
+          .session-list-item.stagger-3 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
+          .session-list-item.stagger-4 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
+          .session-list-item.stagger-5 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
+          .session-list-item.stagger-6 { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
+
+          .avatar-wrapper {
+            position: relative;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+
+          .session-list-item:hover:not(.disabled) .avatar-wrapper {
+            transform: scale(1.08);
+          }
+
+          .avatar-wrapper::after {
+            content: '';
+            position: absolute;
+            inset: -2px;
+            border-radius: 50%;
+            background: ${primaryColor};
+            opacity: 0;
+            filter: blur(8px);
+            transition: opacity 0.3s ease;
+            z-index: -1;
+          }
+
+          .session-list-item:hover:not(.disabled) .avatar-wrapper::after {
+            opacity: 0.2;
+          }
+
+          .session-title {
+            transition: color 0.3s ease;
+          }
+
+          .session-list-item:hover:not(.disabled) .session-title {
+            color: ${primaryColor};
+          }
+
+          .header-section {
+            animation: fadeIn 0.5s ease 0.2s both;
+          }
+
+          .close-icon {
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+          }
+
+          .close-icon:hover {
+            transform: rotate(90deg) scale(1.1);
+            color: ${primaryColor};
+          }
+
+          .close-icon:active {
+            transform: rotate(90deg) scale(0.95);
+          }
+
+          .action-button {
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+
+          .action-button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s ease, height 0.6s ease;
+          }
+
+          .action-button:active::before {
+            width: 300px;
+            height: 300px;
+          }
+
+          .action-button:hover {
+            transform: translateY(-2px);
+          }
+
+          .action-button:active {
+            transform: translateY(0);
+          }
+
+          .new-chat-button {
+            box-shadow: 0 4px 12px rgba(10, 10, 10, 0.25);
+          }
+
+          .new-chat-button:hover {
+            box-shadow: 0 6px 20px rgba(10, 10, 10, 0.35);
+          }
+
+          .whatsapp-button {
+            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
+          }
+
+          .whatsapp-button:hover {
+            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
+            transform: translateY(-2px) scale(1.03);
+          }
+
+          .button-icon {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+
+          .action-button:hover .button-icon {
+            transform: scale(1.1);
+          }
+
+          .loading-container {
+            animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+          }
+
+          .loading-spinner {
+            animation: spinnerPulse 2s ease-in-out infinite;
+          }
+
+          .empty-state {
+            animation: fadeIn 0.5s ease 0.2s both;
+          }
+
+          .action-buttons-container {
+            animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
+          }
+
+          .disabled {
+            pointer-events: none;
+          }
+
+          .closed-badge {
+            animation: fadeIn 0.4s ease 0.1s both;
+          }
+
+          /* Smooth scrollbar */
+          .sessions-scroll::-webkit-scrollbar {
+            width: 6px;
+          }
+
+          .sessions-scroll::-webkit-scrollbar-track {
+            background: transparent;
+          }
+
+          .sessions-scroll::-webkit-scrollbar-thumb {
+            background: ${primaryColor}40;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+          }
+
+          .sessions-scroll::-webkit-scrollbar-thumb:hover {
+            background: ${primaryColor}60;
+          }
+        `}
+      </style>
+
+      <div
+        className="chat-sessions-container"
+        style={{
+          maxWidth: '100%',
+          height: '100%',
+          background: 'rgba(255, 255, 255, 0.7)',
+          backdropFilter: 'blur(20px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+          border: '1px solid rgba(255, 255, 255, 0.18)',
+          borderRadius: 8,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          paddingTop: 20,
+          boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.1)',
+        }}
+      >
+        <div className="header-section" style={{ 
+          padding: '0 16px 10px', 
+          display: 'flex',
+          background: 'rgba(255, 255, 255, 0.4)',
+          backdropFilter: 'blur(10px)',
+          WebkitBackdropFilter: 'blur(10px)',
+          borderBottom: '1px solid rgba(255, 255, 255, 0.18)',
+          marginBottom: '8px',
+        }}>
+          <Title level={4} style={{ margin: 0 }}>
+            Conversations
+          </Title>
+
+          <CloseOutlined
+            onClick={() => setOpen(!Opened)}
+            className="close-icon"
+            style={{ marginLeft: 'auto', fontSize: 16 }}
           />
-          
-        ) : (
-          <div style={{ padding: '1rem', textAlign: 'center', color: '#888' }}>
-            No conversations yet.
-          </div>
-        )}
-      </div>
+        </div>
 
-  
-      <div style={{ padding: '12px', borderTop: '1px solid #f0f0f0',display:'flex',gap:4 }}>
-        <Button
-          type="primary"
-          size="large"
-          block
-          style={{
-            backgroundColor: colorCode,
-            color: '#fff',
-          }}
-          onClick={onNewSession}
-        >
-         Quick Question
-        </Button>
+        <div className="sessions-scroll" style={{ flex: 1, overflowY: 'auto' }}>
+          {loading ? (
+            <div className="loading-container" style={{ 
+              textAlign: 'center', 
+              padding: '2rem',
+              background: 'rgba(255, 255, 255, 0.3)',
+              backdropFilter: 'blur(10px)',
+              WebkitBackdropFilter: 'blur(10px)',
+              borderRadius: '12px',
+              margin: '1rem',
+            }}>
+              <Spin indicator={<div className="loading-spinner">{loadingIcon}</div>} />
+            </div>
+          ) : sessions.length > 0 ? (
+            <List
+              itemLayout="horizontal"
+              dataSource={sessions}
+              split={true}
+              renderItem={(session, index) => (
+                <List.Item
+                  key={session.id}
+                  className={`session-list-item ${session.isBlurred ? 'disabled' : ''} stagger-${Math.min(index + 1, 6)}`}
+                  onClick={() =>
+                    !session.isBlurred &&
+                    onSessionSelect(session.id, session.agentName || 'Ai Agent', session.agentImage || chatbotLogo)
+                  }
+                  style={{
+                    padding: '12px',
+                    opacity: session.isBlurred ? 0.5 : 1,
+                    cursor: session.isBlurred ? 'not-allowed' : 'pointer',
+                    borderBottom: '1px solid #f0f0f0',
+                  }}
+                >
+                  <List.Item.Meta
+                    avatar={
+                      <div className="avatar-wrapper">
+                        <Avatar
+                          size="large"
+                          src={session.agentImage || chatbotLogo}
+                          icon={!session.agentImage && !chatbotLogo ? <UserOutlined /> : undefined}
+                        />
+                      </div>
+                    }
+                    title={
+                      <span className="session-title" style={{ fontWeight: 600 }}>
+                        {session.agentName || 'AI Agent'}
+                      </span>
+                    }
+                    description={
+                      <>
+                        <Text type="secondary">Created: {new Date(session.createdAt).toLocaleDateString()}</Text>
+                        {session.isBlurred && (
+                          <div className="closed-badge" style={{ color: '#ff4d4f', fontSize: '12px', marginTop: 4 }}>
+                            This session is closed and cannot be reopened.
+                          </div>
+                        )}
+                      </>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          ) : (
+            <div className="empty-state" style={{ 
+              padding: '2rem 1rem', 
+              textAlign: 'center', 
+              color: '#666',
+              background: 'rgba(255, 255, 255, 0.3)',
+              backdropFilter: 'blur(10px)',
+              WebkitBackdropFilter: 'blur(10px)',
+              borderRadius: '12px',
+              margin: '1rem',
+            }}>
+              No conversations yet.
+            </div>
+          )}
+        </div>
 
-        {Phone?
-        (
-          <Button
-          type="default"
+        <div
+          className="action-buttons-container"
           style={{
-            backgroundColor: '#25D366',
-            color: 'white',
-          }}
-          className='hover:border-black'
-          size="large"
-          icon={<WhatsAppOutlined style={{color:'white'}}/>}
-          onClick={() => {
-            const waLink = `https://wa.me/${Phone}`;
-            window.open(waLink, '_blank');
+            padding: '16px',
+            borderTop: '1px solid rgba(255, 255, 255, 0.18)',
+            display: 'flex',
+            gap: 12,
+            background: 'rgba(255, 255, 255, 0.5)',
+            backdropFilter: 'blur(20px) saturate(180%)',
+            WebkitBackdropFilter: 'blur(20px) saturate(180%)',
           }}
         >
-          Chat on WhatsApp
-        </Button>
-
-        ):(
-          <></>
-        )  
-      }
-
+          <button
+            onClick={onNewSession}
+            className="action-button new-chat-button"
+            style={{
+              flex: 1,
+              height: '56px',
+              border: 'none',
+              borderRadius: '16px',
+              background: 'linear-gradient(135deg, #0A0A0A, #0A0A0Add)',
+              color: 'white',
+              fontSize: '20px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+            }}
+          >
+            <MessageOutlined className="button-icon" style={{ fontSize: '22px' }} />
+            <span style={{ fontSize: '15px', fontWeight: 600 }}>New Chat</span>
+          </button>
 
+          {Phone && (
+            <button
+              onClick={() => {
+                const waLink = `https://wa.me/${Phone}`;
+                window.open(waLink, '_blank');
+              }}
+              className="action-button whatsapp-button"
+              style={{
+                width: '56px',
+                height: '56px',
+                border: 'none',
+                borderRadius: '16px',
+                background: 'linear-gradient(135deg, #25D366, #20BA5A)',
+                color: 'white',
+                fontSize: '24px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+              }}
+            >
+              <WhatsAppOutlined className="button-icon" />
+            </button>
+          )}
+        </div>
       </div>
-
-
-    </div>
+    </>
   );
 };
 
-export default ChatSessions;
+export default ChatSessions;

package/src/hooks/config.tsx

@@ -1,11 +1,11 @@
 
 
 const config = {
-    apiUrl:'https://jawebcrm.onrender.com/api/',
-    websocketUrl:'wss://jawebcrm.onrender.com/ws' ,
+    // apiUrl:'https://jawebcrm.onrender.com/api/',
+    // websocketUrl:'wss://jawebcrm.onrender.com/ws' ,
     
-    // apiUrl:'http://localhost:8000/api/', 
-    // websocketUrl:'ws://localhost:8000/ws',
+    apiUrl:'http://localhost:8000/api/', 
+    websocketUrl:'ws://localhost:8000/ws',
 
   };
   export default config;