shopify-chatbot-widget 0.0.4

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "shopify-chatbot-widget",
+  "private": false,
+  "version": "0.0.4",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "antd": "^5.26.4",
+    "axios": "^1.10.0",
+    "framer-motion": "^12.23.6",
+    "js-cookie": "^3.0.5",
+    "lucide-react": "^0.525.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^15.6.0",
+    "wavesurfer.js": "^7.9.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/axios": "^0.9.36",
+    "@types/js-cookie": "^3.0.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}

package/public/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/src/App.css

@@ -0,0 +1,42 @@
+#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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,154 @@
+.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

@@ -0,0 +1,207 @@
+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

@@ -0,0 +1,127 @@
+.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;
+    }
+  }
+