shopify-chatbot-widget 0.0.4 → 0.2.2

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/src/App.tsx

@@ -1,13 +0,0 @@
-import Chatbot from './Chatbot/Chatbot';
-import 'antd/dist/reset.css'; // global AntD styles
-
-function App() {
-  return (
-    <div style={{backgroundColor:'black'}}>
-      
-      <Chatbot />
-    </div>
-  );
-}
-
-export default App;

package/src/Chatbot/Chatbot.css

@@ -1,154 +0,0 @@
-.jaweb-chatbot-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 9999;
-    
-  }
-
-  /* Tailwind global CSS file */
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-  
-  .chatbot-box {
-      position: fixed;
-      bottom: 5%;
-      right: 10px;
-      width: 28%;
-      top: 2%;
-      z-index: 9999;
-      height: 86%;
-      background: #ffffff;
-      color: #000000;
-      border-radius: 12px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-      font-family: 'Inter', sans-serif;
-    }
-    
-
-  
-  
-  /* Mobile responsiveness */
-  
-  .chatbot-header {
-    background: #f7f7f7;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    height: 8%;
-    gap: 12px;
-    font-size: 16px;
-    font-weight: bold;
-    border-bottom: 1px solid #e0e0e0;
-  }
-  
-  .chatbot-title {
-    flex-grow: 1;
-  }
-  
-  .chatbot-close {
-    cursor: pointer;
-    font-size: 16px;
-    color: #888;
-  }
-  
-  .chatbot-messages {
-    flex: 1;
-    padding: 16px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    height: 70%;
-    gap: 12px;
-    background-color: #fafafa;
-  
-    /* Hide scrollbar for all browsers */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  }
-  
-  /* Hide scrollbar for WebKit-based browsers (Chrome, Safari) */
-  .chatbot-messages::-webkit-scrollbar {
-    display: none;
-  }
-  
-  
-  .chat-msg {
-    max-width: 85%;
-    padding: 10px 14px;
-    border-radius: 16px;
-    font-size: 14px;
-    line-height: 1.4;
-    word-break: break-word;
-  }
-  
-  .chat-msg.assistant {
-    background: #f0f0f0;
-    align-self: flex-start;
-    color: #000;
-  }
-  
-  .chat-msg.user {
-    background: #7f28f8;
-    align-self: flex-end;
-    color: white;
-  }
-  
-  .chatbot-input-area {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    height:22%;
-    align-items: center;
-    background: #ffffff;
-    border-top: 1px solid #e0e0e0;
-  
-  }
-  
-  .typing-animation span {
-    display: inline-block;
-    animation: blink 1.2s infinite;
-    font-size: 18px;
-    margin: 0 2px;
-  }
-  
-  .typing-animation span:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-  .typing-animation span:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-  
-  @keyframes blink {
-    0% { opacity: 0.2; }
-    20% { opacity: 1; }
-    100% { opacity: 0.2; }
-  }
-  
-  
-  
-  
-  @media (max-width: 600px) {
-      .chatbot-box {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        right: 0;
-        bottom: 0;
-        top: 0;
-
-
-      }
-      .chat-launcher.chatbot-open {
-          display: none;
-        }
-    }

package/src/Chatbot/Chatbot.tsx

@@ -1,207 +0,0 @@
-import React, { useState,useEffect } from 'react';
-import { Button } from 'antd';
-
-import { useChatbotData } from '../hooks/useChatbotData';
-import ChatSessions from './components/Sessions/RenderList';
-import CreateSession from './components/Sessions/CreateSession';
-import Messenger from './components/Messenger/Messenger';
-import './Chatbot.css'
-import config from '../hooks/config';
-import FingerprintJS from '@fingerprintjs/fingerprintjs';
-
-const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
-  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
-  const [HasInfo,setHasInfo]=useState(false)
-  const [activeAgentName,setActiveAgentName]=useState('')
-  const [activeAgentImage,setActiveAgentImage]=useState('')
-  const [newSession,setNewSession]=useState(false)
-
-
-  const windowWidth = window.innerWidth;
-
-  const {
-    chatbotLogo,
-    colorCode,
-    subscription,
-    messagesSuggestions,
-    isFetchingDetails,
-    disableForm,
-    merchantPhone,
-    userType
-  } = useChatbotData();
-
-  const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
-
-
-
-  const handleNewSessionClick = () => {
-    if (HasInfo) {
-      const newSessionId = crypto.randomUUID();
-      setActiveSessionId(newSessionId);
-      setActiveAgentImage(chatbotLogo)
-      setActiveAgentName('Ai Agent')
-      console.log(activeSessionId)
-      setNewSession(true)
-      setViewMode('messenger');
-    } else {
-      setViewMode('create');
-    }
-    
-  };
-
-  useEffect(() => {
-    const fetchVisitorInfo = async () => {
-      try {
-        // 1. Check if we already have a visitorId cached
-        let visitorId = localStorage.getItem('visitor_id');
-  
-        if (!visitorId) {
-          // 2. Load FingerprintJS and get the visitorId
-          const fp = await FingerprintJS.load();
-          const result = await fp.get();
-          visitorId = result.visitorId;
-  
-          // 3. Cache it for future use
-          localStorage.setItem('visitor_id', visitorId);
-        }
-  
-        const res = await fetch('https://ipapi.co/json');
-        const data = await res.json();
-        const ip = data.ip;
-        const country = data.country_name;
-
-
-  
-        // 5. Store locally
-        setVisitorData({ visitorId, country });
-  
-        // 6. Send to Django
-        const backendRes = await fetch(`${config.apiUrl}register-ip/`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            ip_address: ip,
-            country,
-            visitor_id: visitorId,
-          }),
-        });
-  
-        const result = await backendRes.json();
-        setHasInfo(result.has_user_info || false);
-  
-      } catch (err) {
-        console.error('Failed to fetch or send visitor info', err);
-      }
-    };
-  
-    fetchVisitorInfo();
-  }, []);
-  
-
-  const handleSessionSelect = (sessionId: string,agentName:string,agentImage:string) => {
-    setActiveSessionId(sessionId);
-    setActiveAgentName(agentName)
-    setActiveAgentImage(agentImage)
-    setNewSession(false)
-    setViewMode('messenger');
-  };
-
-  
-
-
-  return (
-    <div>
-      {!isFetchingDetails && subscription ? (
-        <div 
-        style={{
-          bottom: windowWidth < 768 ? '20%' : 0,
-          top: windowWidth < 768 ? '0' : '5%' ,
-          height: windowWidth < 768 ? '100%' : '85%',
-          borderRadius: 10,
-          width: windowWidth < 768 ? '100%' : '100%',
-          zIndex: 9999,
-        }}
-        >
-          {open && (
-            <div className="chatbot-box">
-      {viewMode === 'sessions' && (
-        <ChatSessions
-          chatbotLogo={chatbotLogo}
-          Phone={merchantPhone||''}
-          colorCode={colorCode}
-          visitorId={visitorData?.visitorId || ''}
-          Opened={open}
-          setOpen={setOpen}
-          onNewSession={handleNewSessionClick}
-          onSessionSelect={handleSessionSelect} // ✅ Pass handler
-        />
-      )}
-
-      {viewMode === 'create' && (
-        <CreateSession
-          colorCode={colorCode}
-          visitorId={visitorData?.visitorId || ''}
-          country={visitorData?.country || ''}
-          onBack={() => setViewMode('sessions')}
-          onCreate={(userData) => {
-            setActiveSessionId(userData.session_id)
-            setHasInfo(userData.hasInfo)
-            setViewMode('messenger');
-          }}
-        />
-      )}
-
-      {viewMode === 'messenger' && activeSessionId && (
-        <Messenger
-          sessionId={activeSessionId}
-          chatbotLogo={activeAgentImage||chatbotLogo}
-          agentName={activeAgentName||'Ai Assistant'}
-          colorCode={colorCode}
-          messagesSuggestions={messagesSuggestions}
-          newSession={newSession}
-          disableForm={disableForm}
-          setOpen={setOpen}
-          setNewSession={setNewSession}
-          Opened={open}
-          setView={() => setViewMode('sessions')}
-          userType={userType}
-          />
-      )}
-            </div>
-          )}
-
-
-        </div>
-      ) : null}
-
-        <div
-        className="jaweb-chatbot-container">
-
-    {!isFetchingDetails && subscription ? (
-        <Button
-            type="primary"
-            shape="circle"
-            icon={
-              <img
-                src="https://jaweb.me/wp-content/uploads/2025/03/download__2_-removebg-preview.png"
-                alt="Chat Icon"
-                style={{ width: 30, height: 30 }}
-              />
-            }
-            size="large"
-            style={{ backgroundColor: colorCode, width: 60, height: 60 }}
-            className={`chat-launcher ${open ? 'chatbot-open' : ''}`}
-            onClick={() => setOpen(!open)}
-          />
-    ):null}
-    </div>
-    </div>
-
-  );
-};
-
-export default Chatbot;

package/src/Chatbot/components/ChatInput.css

@@ -1,127 +0,0 @@
-.chat-input-container {
-    display: flex;
-    align-items: center;
-    background-color: white;
-    border: 1px solid #d1d5db;
-    border-radius: 9999px;
-    padding: 0.5rem 0.75rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    width: 95%;
-    height: 56px;
-  }
-  
-  .chat-icon-button {
-    color: #6b7280;
-    background: none;
-    border: none;
-    margin: 0 0.5rem;
-    cursor: pointer;
-  }
-  
-  .chat-icon-button:hover {
-    color: #374151;
-  }
-  
-  .chat-icon-button.recording {
-    color: #ef4444;
-  }
-  
-  .hidden-input {
-    display: none;
-  }
-  
-  .image-preview-wrapper {
-    position: relative;
-  }
-  
-  .image-preview {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 9999px;
-    object-fit: cover;
-  }
-  
-  .remove-image-icon {
-    position: absolute;
-    top: -0.5rem;
-    right: -0.5rem;
-    font-size: 14px;
-    color: #ef4444;
-    background: white;
-    border-radius: 9999px;
-    cursor: pointer;
-  }
-  
-  .chat-input-wrapper {
-    flex: 1;
-    margin: 0 0.5rem;
-    min-width: 0;
-    max-width: 100%;
-    display: flex;
-    align-items: center;
-  }
-  
-  .text-input {
-    width: 100%;
-    border: none;
-    font-size: 16px;
-    line-height: 1.5;
-    color: #374151;
-  }
-  
-  .text-input:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-
-
-  
-  .audio-preview {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    background-color: #f3f4f6;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-  }
-  
-  .audio-play-button {
-    background: none;
-    border: none;
-    margin-right: 0.75rem;
-    color: #7f28f8;
-    cursor: pointer;
-  }
-  
-  .remove-audio-icon {
-    font-size: 18px;
-    color: #ef4444;
-    margin-left: 0.75rem;
-    cursor: pointer;
-  }
-  
-  .waveform {
-    width: 100%;
-    height: 2rem;
-  }
-  
-  .recording-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #f3f4f6;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    animation: pulse 2s infinite;
-  }
-  
-  @keyframes pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
-  }
-