shopify-chatbot-widget 0.7.9 → 0.8.2

package/src/Chatbot/OLDCHAT.tsx

@@ -0,0 +1,259 @@
+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,
+    calendly,
+    disbleCheckout
+  } = useChatbotData();
+
+  const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
+
+
+  const handleNewSessionClick = () => {
+    // If the form is *not* disabled, always go to create
+    if (!disableForm && !HasInfo) {
+      setViewMode('create');
+      return;
+    }
+  
+    else {
+      const newSessionId = crypto.randomUUID();
+      setActiveSessionId(newSessionId);
+      setActiveAgentImage(chatbotLogo);
+      setActiveAgentName('Ai Agent');
+      setNewSession(true);
+      setViewMode('messenger');
+    }
+  
+    // Otherwise (disableForm true && !HasInfo) we simply bail.
+  };
+  
+  useEffect(() => {
+    const fetchVisitorInfo = async () => {
+      try {
+        let visitorId = localStorage.getItem('visitor_id');
+        let ip = localStorage.getItem('ip_address');
+        let country = localStorage.getItem('country');
+  
+        // ✅ If all cached, safely set and exit
+        // if (visitorId && ip && country) {
+        //   setVisitorData({ visitorId, country });
+
+        //   return;
+        // }
+  
+        // 🔍 Generate fingerprint if needed
+        if (!visitorId) {
+          const fp = await FingerprintJS.load();
+          const result = await fp.get();
+          visitorId = result.visitorId;
+          localStorage.setItem('visitor_id', visitorId);
+        }
+  
+        // 🌍 Fetch IP info if missing
+        if (!ip || !country) {
+          const res = await fetch('https://ipapi.co/json');
+          const data = await res.json();
+          ip = data.ip;
+          country = data.country_name;
+  
+          if (ip) localStorage.setItem('ip_address', ip);
+          if (country) localStorage.setItem('country', country);
+        }
+  
+        // ✅ Ensure values are non-null before use
+        if (visitorId && ip && country) {
+          setVisitorData({ visitorId, country });
+  
+          // 📡 Send to backend
+          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);
+        } else {
+          console.warn('Missing IP or country info after fetch');
+        }
+      } 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');
+  };
+
+
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      const msg = (e.data || {}) as any;
+      if (msg.type !== 'JAWEB_CHAT') return;
+
+      if (msg.action === 'open-ready') {
+        // Parent has expanded iframe → now we can render full UI
+        setOpen(true);
+      } else if (msg.action === 'closed') {
+        // Parent collapsed iframe → hide full UI
+        setOpen(false);
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  const requestOpen = () => {
+    // Ask parent to expand iframe
+    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'open' }, '*');
+  };
+  const requestClose = () => {
+    // Ask parent to collapse iframe
+    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'close' }, '*');
+  };
+
+  
+
+
+  return  (
+    <div>
+      {!isFetchingDetails && subscription ? (
+        <div
+          style={{
+            bottom: windowWidth < 768 ? '20%' : 0,
+            top: windowWidth < 768 ? '0' : '5%',
+            height: windowWidth < 768 ? '100%' : '85%',
+            borderRadius: 10,
+            width: '100%',
+            zIndex: 9999,
+          }}
+        >
+          {open && (
+            <div className="chatbot-box">
+              {viewMode === 'sessions' && (
+                <ChatSessions
+                  chatbotLogo={chatbotLogo}
+                  Phone={merchantPhone || ''}
+                  colorCode={colorCode}
+                  visitorId={visitorData?.visitorId || ''}
+                  Opened={open}
+                  // when a child wants to close, talk to parent
+                  setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                  onNewSession={handleNewSessionClick}
+                  onSessionSelect={handleSessionSelect}
+                />
+              )}
+
+              {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}
+                  calendly={calendly ?? ''}
+                  // children call this to close/open → routed to parent
+                  setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+                  setNewSession={setNewSession}
+                  Opened={open}
+                  setView={() => setViewMode('sessions')}
+                  userType={userType}
+                  disbleCheckout={disbleCheckout}
+                />
+              )}
+            </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' : ''}`}
+            // 🔑 Don’t setOpen directly; request parent resize
+            onClick={() => (open ? requestClose() : requestOpen())}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default Chatbot;
+
+
+
+

package/src/Chatbot/components/ChatInput.css

@@ -0,0 +1,127 @@
+.jawebcss-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;
+  }
+  
+  .jawebcss-chat-icon-button {
+    color: #6b7280;
+    background: none;
+    border: none;
+    margin: 0 0.5rem;
+    cursor: pointer;
+  }
+  
+  .jawebcss-chat-icon-button:hover {
+    color: #374151;
+  }
+  
+  .jawebcss-chat-icon-button.recording {
+    color: #ef4444;
+  }
+  
+  .jawebcss-hidden-input {
+    display: none;
+  }
+  
+  .jawebcss-image-preview-wrapper {
+    position: relative;
+  }
+  
+  .jawebcss-image-preview {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    object-fit: cover;
+  }
+  
+  .jawebcss-remove-image-icon {
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+    font-size: 14px;
+    color: #ef4444;
+    background: white;
+    border-radius: 9999px;
+    cursor: pointer;
+  }
+  
+  .jawebcss-chat-input-wrapper {
+    flex: 1;
+    margin: 0 0.5rem;
+    min-width: 0;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  
+  .jawebcss-text-input {
+    width: 100%;
+    border: none;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #374151;
+  }
+  
+  .jawebcss-text-input:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+
+
+  
+  .jawebcss-audio-preview {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: #f3f4f6;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+  }
+  
+  .jawebcss-audio-play-button {
+    background: none;
+    border: none;
+    margin-right: 0.75rem;
+    color: #7f28f8;
+    cursor: pointer;
+  }
+  
+  .jawebcss-remove-audio-icon {
+    font-size: 18px;
+    color: #ef4444;
+    margin-left: 0.75rem;
+    cursor: pointer;
+  }
+  
+  .jawebcss-waveform {
+    width: 100%;
+    height: 2rem;
+  }
+  
+  .jawebcss-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;
+    }
+  }
+