shopify-chatbot-widget 1.0.8 → 1.0.10

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

@@ -1,519 +0,0 @@
-import React, { useEffect, useState } from 'react';
-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;
-
-type ChatSession = {
-  id: string;
-  agentName?: string;
-  createdAt: string;
-  isBlurred?: boolean;
-  agentImage?: string;
-};
-
-type ChatSessionsProps = {
-  setOpen: (v: boolean) => void;
-  Opened: boolean;
-  Phone: string;
-  chatbotLogo: string;
-  colorCode?: string;
-  onNewSession: () => 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 [sessions, setSessions] = useState<ChatSession[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [mounted, setMounted] = useState(false);
-
-  const fetchSessions = async () => {
-    try {
-      setLoading(true);
-      const res = await fetch(
-        `${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 isOlderThan5Days = diffDays >= 5;
-
-        return {
-          id: item.user_session_id,
-          agentName: item.assignee || 'AI Agent',
-          createdAt: item.date,
-          isBlurred: item.closed || isOlderThan5Days,
-          agentImage: item.assignee_picture,
-        };
-      });
-
-      setSessions(mapped);
-
-    } catch (err) {
-      console.error('Failed to load sessions:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-
-  useEffect(() => {
-    if (visitorId) {
-      fetchSessions();
-    }
-    setMounted(true);
-  }, [visitorId]);
-
-  const loadingIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode || '#7F28F8' }} spin />;
-  const primaryColor = colorCode || '#7F28F8';
-
-  return (
-    <>
-      <style>
-        {`
-          @keyframes slideInUp {
-            from {
-              opacity: 0;
-              transform: translateY(30px);
-            }
-            to {
-              opacity: 1;
-              transform: translateY(0);
-            }
-          }
-
-          @keyframes fadeIn {
-            from {
-              opacity: 0;
-            }
-            to {
-              opacity: 1;
-            }
-          }
-
-          @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);
-            }
-          }
-
-          @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>
-
-        <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>
-
-        <div
-          className="action-buttons-container"
-          style={{
-            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%)',
-          }}
-        >
-          <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>
-    </>
-  );
-};
-
-export default ChatSessions;