shopify-chatbot-widget 1.0.8 → 1.0.10

package/src/Chatbot/components/VoiceMode.tsx

@@ -0,0 +1,613 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { X, Check, Plus } from 'lucide-react';
+import axios from 'axios';
+import config from '../../hooks/config';
+import { useCart } from '../../hooks/useCart';
+import OrderCard, { type OrderStatusData } from './Messages/OrderCard';
+import './VoiceMode.css';
+
+type VoiceStage = 'listening' | 'thinking' | 'speaking' | 'error';
+
+interface UploadAudioResponse {
+  audio_url: string;
+  transcription_text: string;
+}
+
+interface MiniProduct {
+  name: string;
+  price?: string;
+  link?: string;
+  img?: string;
+  variantId?: string;
+}
+
+interface Props {
+  sessionId: string;
+  colorCode?: string;
+  agentName?: string;
+  newSession?: boolean;
+  setNewSession?: (v: boolean) => void;
+  onClose: () => void;
+  setMessages: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+/** Pull lightweight product info out of a reply's card blocks. */
+const parseProducts = (raw: string): MiniProduct[] => {
+  const items: MiniProduct[] = [];
+  let cur: MiniProduct | null = null;
+  for (const part of raw.split('|||')) {
+    if (part.includes('VariantId')) {
+      const name = part.match(/Name\s*[:\-]\s*(.+)/i)?.[1]?.trim();
+      if (!name) continue;
+      cur = {
+        name,
+        price: part.match(/Price\s*[:\-]\s*(.+)/i)?.[1]?.trim(),
+        link: part.match(/Link\s*[:\-]\s*(https?:\/\/\S+)/i)?.[1],
+        variantId: part.match(/VariantId\s*[:\-]\s*(.+)/i)?.[1]?.trim(),
+      };
+      items.push(cur);
+    } else if (part.trim().startsWith('img') && cur) {
+      cur.img = part.replace(/^\s*img\s*[-:]\s*/, '').trim();
+    }
+  }
+  const seen = new Set<string>();
+  return items.filter((i) => !seen.has(i.name) && !!seen.add(i.name));
+};
+
+const parseOrder = (raw: string): OrderStatusData | null => {
+  const m = raw.match(/\[\[ORDER_STATUS\]\]([\s\S]*?)\[\[\/ORDER_STATUS\]\]/);
+  if (!m) return null;
+  try {
+    return JSON.parse(m[1]);
+  } catch {
+    return null;
+  }
+};
+
+const stripForSpeech = (raw: string) =>
+  raw
+    .replace(/\[\[ORDER_STATUS\]\][\s\S]*?\[\[\/ORDER_STATUS\]\]/g, '')
+    .replace(/\[\[SUPPORT_TICKET\]\][\s\S]*?\[\[\/SUPPORT_TICKET\]\]/g, '')
+    .split('|||')
+    .filter((s) => !s.includes('VariantId') && !s.trim().startsWith('img'))
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const BAR_COUNT = 5;
+const SPEECH_RMS = 0.022; // voice detection threshold
+const SILENCE_MS = 1300; // stop this long after the last speech
+const MIN_SPEECH_MS = 350; // ignore coughs/taps
+const MAX_TURN_MS = 30000;
+
+const VoiceMode: React.FC<Props> = ({
+  sessionId,
+  colorCode = '#111111',
+  agentName = 'Assistant',
+  newSession = false,
+  setNewSession,
+  onClose,
+  setMessages,
+}) => {
+  const { t } = useTranslation();
+  const [stage, setStage] = useState<VoiceStage>('listening');
+  const [transcript, setTranscript] = useState('');
+  const [reply, setReply] = useState('');
+  const [products, setProducts] = useState<MiniProduct[]>([]);
+  const [order, setOrder] = useState<OrderStatusData | null>(null);
+  const [hint, setHint] = useState('');
+  const [added, setAdded] = useState<Record<string, boolean>>({});
+
+  const { addToCart } = useCart(sessionId);
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const streamRef = useRef<MediaStream | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const closedRef = useRef(false);
+  const stageRef = useRef<VoiceStage>('listening');
+  stageRef.current = stage;
+  const needsChatlogRef = useRef(newSession);
+
+  // Web Audio graph (shared for mic + playback visualization)
+  const audioCtxRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const micSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
+  const rafRef = useRef<number>(0);
+  const barsRef = useRef<HTMLButtonElement | null>(null);
+
+  // TTS sentence pipeline
+  const ttsQueueRef = useRef<Promise<Blob | null>[]>([]);
+  const playingRef = useRef(false);
+  const generationRef = useRef(0); // bumps to cancel stale pipelines
+
+  const ensureAudioCtx = () => {
+    if (!audioCtxRef.current) {
+      audioCtxRef.current = new (window.AudioContext ||
+        (window as any).webkitAudioContext)();
+    }
+    if (audioCtxRef.current.state === 'suspended') void audioCtxRef.current.resume();
+    return audioCtxRef.current;
+  };
+
+  /* ---------- Bars: driven by real audio levels ---------- */
+  const driveBars = useCallback(() => {
+    const analyser = analyserRef.current;
+    const bars = barsRef.current?.children;
+    if (analyser && bars) {
+      const freq = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(freq);
+      const bands = BAR_COUNT;
+      const usable = Math.floor(freq.length * 0.6); // speech range
+      for (let i = 0; i < bands; i++) {
+        const start = Math.floor((usable / bands) * i);
+        const end = Math.floor((usable / bands) * (i + 1));
+        let sum = 0;
+        for (let j = start; j < end; j++) sum += freq[j];
+        const level = sum / (end - start) / 255;
+        const el = bars[i] as HTMLElement;
+        if (el) {
+          el.style.animation = 'none'; // JS drives; CSS is the fallback
+          el.style.transform = `scaleY(${(0.25 + level * 1.15).toFixed(3)})`;
+        }
+      }
+    }
+    rafRef.current = requestAnimationFrame(driveBars);
+  }, []);
+
+  const resetBars = () => {
+    const bars = barsRef.current?.children;
+    if (!bars) return;
+    for (let i = 0; i < bars.length; i++) {
+      const el = bars[i] as HTMLElement;
+      el.style.transform = '';
+      el.style.animation = '';
+    }
+  };
+
+  /* ---------- Listening with voice-activity detection ---------- */
+  const stopStream = () => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    micSourceRef.current?.disconnect();
+    micSourceRef.current = null;
+  };
+
+  const startListening = useCallback(async () => {
+    if (closedRef.current) return;
+    setTranscript('');
+    setReply('');
+    setHint('');
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true },
+      });
+      streamRef.current = stream;
+
+      // analyser for VAD + bar visualization
+      const ctx = ensureAudioCtx();
+      const source = ctx.createMediaStreamSource(stream);
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 512;
+      analyser.smoothingTimeConstant = 0.72;
+      source.connect(analyser);
+      micSourceRef.current = source;
+      analyserRef.current = analyser;
+
+      const mimeType = MediaRecorder.isTypeSupported('audio/webm')
+        ? 'audio/webm'
+        : 'audio/mp4';
+      const recorder = new MediaRecorder(stream, { mimeType });
+      chunksRef.current = [];
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunksRef.current.push(e.data);
+      };
+      recorder.onstop = () => {
+        stopStream();
+        const blob = new Blob(chunksRef.current, { type: mimeType });
+        if (!closedRef.current) void handleTurn(blob);
+      };
+      mediaRecorderRef.current = recorder;
+      recorder.start();
+      setStage('listening');
+
+      // --- VAD loop: auto-send after a natural pause ---
+      const data = new Uint8Array(analyser.fftSize);
+      const startedAt = Date.now();
+      let speechMs = 0;
+      let lastVoice = 0;
+      let lastTick = Date.now();
+      const tick = () => {
+        if (closedRef.current || mediaRecorderRef.current !== recorder) return;
+        if (recorder.state !== 'recording') return;
+        analyser.getByteTimeDomainData(data);
+        let sum = 0;
+        for (let i = 0; i < data.length; i++) {
+          const v = (data[i] - 128) / 128;
+          sum += v * v;
+        }
+        const rms = Math.sqrt(sum / data.length);
+        const now = Date.now();
+        const dt = now - lastTick;
+        lastTick = now;
+        if (rms > SPEECH_RMS) {
+          speechMs += dt;
+          lastVoice = now;
+        }
+        const spoke = speechMs > MIN_SPEECH_MS;
+        if (
+          (spoke && lastVoice && now - lastVoice > SILENCE_MS) ||
+          now - startedAt > MAX_TURN_MS
+        ) {
+          if (spoke) recorder.stop();
+          else {
+            // 30s of nothing — go idle instead of uploading silence
+            recorder.onstop = null;
+            recorder.stop();
+            stopStream();
+            setHint(t('voice.tapToTalk'));
+            setStage('error');
+          }
+          return;
+        }
+        window.setTimeout(tick, 55);
+      };
+      tick();
+    } catch {
+      setStage('error');
+      setHint(t('voice.micNeeded'));
+    }
+  }, []);
+
+  const finishListening = () => {
+    if (mediaRecorderRef.current?.state === 'recording') {
+      mediaRecorderRef.current.stop();
+    }
+  };
+
+  /* ---------- TTS: sentence-streamed playback ---------- */
+  const fetchTTS = async (text: string): Promise<Blob | null> => {
+    try {
+      const res = await fetch(`${config.apiUrl}tts-reply/`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          text,
+          company_username: localStorage.getItem('company_username'),
+        }),
+      });
+      if (!res.ok) return null;
+      return await res.blob();
+    } catch {
+      return null;
+    }
+  };
+
+  const playQueue = async (generation: number) => {
+    if (playingRef.current) return;
+    playingRef.current = true;
+    try {
+      while (ttsQueueRef.current.length > 0) {
+        if (closedRef.current || generationRef.current !== generation) return;
+        const next = ttsQueueRef.current.shift()!;
+        const blob = await next;
+        if (!blob) continue;
+        if (closedRef.current || generationRef.current !== generation) return;
+        setStage('speaking');
+        await new Promise<void>((resolve) => {
+          const audio = new Audio(URL.createObjectURL(blob));
+          audioRef.current = audio;
+          // visualize the spoken audio on the bars
+          try {
+            const ctx = ensureAudioCtx();
+            const src = ctx.createMediaElementSource(audio);
+            const analyser = ctx.createAnalyser();
+            analyser.fftSize = 512;
+            analyser.smoothingTimeConstant = 0.7;
+            src.connect(analyser);
+            analyser.connect(ctx.destination);
+            analyserRef.current = analyser;
+          } catch {
+            /* visualization is best-effort */
+          }
+          audio.onended = () => resolve();
+          audio.onerror = () => resolve();
+          void audio.play().catch(() => resolve());
+        });
+      }
+    } finally {
+      playingRef.current = false;
+    }
+  };
+
+  /* ---------- One conversation turn ---------- */
+  const handleTurn = async (blob: Blob) => {
+    setStage('thinking');
+    const generation = ++generationRef.current;
+    ttsQueueRef.current = [];
+    try {
+      // 1) Speech -> text
+      const form = new FormData();
+      form.append('audio', blob);
+      const stt = await axios.post<UploadAudioResponse>(
+        `${config.apiUrl}upload-audio/`,
+        form
+      );
+      const text = (stt.data?.transcription_text || '').trim();
+      if (!text) {
+        setHint(t('voice.didntCatch'));
+        void startListening();
+        return;
+      }
+      setTranscript(text);
+      setMessages((prev) => [...prev, { role: 'user', content: text }]);
+
+      // Brand-new session: the chatlog must exist before message-create,
+      // same as the typed path — otherwise the backend 404s.
+      if (needsChatlogRef.current) {
+        await fetch(`${config.apiUrl}chatlog-create/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            visitor_id: localStorage.getItem('visitor_id'),
+            company_username: localStorage.getItem('company_username'),
+            session_id: sessionId,
+          }),
+        });
+        needsChatlogRef.current = false;
+        setNewSession?.(false);
+      }
+
+      const body = JSON.stringify({
+        message: text,
+        isBusiness: true,
+        session_id: sessionId,
+        organization: localStorage.getItem('company_username'),
+        isImage: false,
+        is_voice: true,
+      });
+
+      // 2) Stream the reply; speak sentence-by-sentence as it arrives
+      let answer = '';
+      let finalData: any = null;
+      let spokenSoFar = 0;
+      let streamed = false;
+
+      const enqueueSpeech = (upTo: number) => {
+        const chunk = answer.slice(spokenSoFar, upTo).trim();
+        if (!chunk) return;
+        spokenSoFar = upTo;
+        const speakable = stripForSpeech(chunk);
+        if (speakable) {
+          ttsQueueRef.current.push(fetchTTS(speakable));
+          void playQueue(generation);
+        }
+      };
+
+      try {
+        const streamRes = await fetch(`${config.apiUrl}message-create-stream/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        });
+        if (
+          streamRes.ok &&
+          streamRes.body &&
+          (streamRes.headers.get('content-type') || '').includes('text/event-stream')
+        ) {
+          streamed = true;
+          const reader = streamRes.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = '';
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const events = buffer.split('\n\n');
+            buffer = events.pop() || '';
+            for (const evt of events) {
+              const line = evt.split('\n').find((l) => l.startsWith('data: '));
+              if (!line) continue;
+              const payload = JSON.parse(line.slice(6));
+              if (payload.delta) {
+                answer += payload.delta;
+                setReply(stripForSpeech(answer).slice(0, 200));
+                const tail = answer.slice(spokenSoFar);
+                if (spokenSoFar === 0) {
+                  // First audio ASAP: speak the opening clause the moment a
+                  // comma/colon/sentence break lands past ~40 chars
+                  const c = tail.match(/[\s\S]*?[.!?…,:;](?=\s|$)/);
+                  if (c && c[0].trim().length > 40) {
+                    enqueueSpeech(c[0].length);
+                    continue;
+                  }
+                }
+                // then speak whole sentences as they finish
+                const m = tail.match(/[\s\S]*?[.!?…](?=\s|$)/);
+                if (m && m[0].trim().length > 20) {
+                  enqueueSpeech(spokenSoFar + m[0].length);
+                }
+              } else if (payload.done) {
+                finalData = payload.response;
+              } else if (payload.error) {
+                throw new Error(payload.error);
+              }
+            }
+          }
+        }
+      } catch {
+        streamed = false;
+      }
+
+      // Fallback to the blocking endpoint if streaming failed
+      if (!streamed || (!answer && !finalData)) {
+        const res = await fetch(`${config.apiUrl}message-create/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body,
+        });
+        if (!res.ok) throw new Error('reply failed');
+        finalData = await res.json();
+      }
+
+      const fullAnswer: string = finalData?.message || answer || '';
+      // speak whatever's left (covers tool replies that never streamed)
+      answer = fullAnswer;
+      enqueueSpeech(fullAnswer.length);
+
+      setReply(stripForSpeech(fullAnswer).slice(0, 200));
+      setProducts(parseProducts(fullAnswer));
+      setOrder(parseOrder(fullAnswer));
+      setMessages((prev) => [
+        ...prev.filter((m) => !m.typing),
+        {
+          role: 'assistant',
+          content: fullAnswer,
+          sender: 'Ai Agent',
+          isBusiness: false,
+          isConnect: !!finalData?.isConnect,
+        },
+      ]);
+
+      // wait for speech to finish, then listen again
+      while (
+        (playingRef.current || ttsQueueRef.current.length > 0) &&
+        !closedRef.current &&
+        generationRef.current === generation
+      ) {
+        await new Promise((r) => setTimeout(r, 120));
+      }
+      if (!closedRef.current && generationRef.current === generation) {
+        void startListening();
+      }
+    } catch {
+      if (closedRef.current) return;
+      setStage('error');
+      setHint(t('voice.wentWrong'));
+    }
+  };
+
+  /* ---------- Interactions ---------- */
+  const handleBarsTap = () => {
+    if (stage === 'listening') finishListening();
+    else if (stage === 'speaking') {
+      // barge-in: skip the rest and listen
+      generationRef.current += 1;
+      ttsQueueRef.current = [];
+      audioRef.current?.pause();
+      audioRef.current = null;
+      void startListening();
+    } else if (stage === 'error') void startListening();
+  };
+
+  const handleAdd = async (p: MiniProduct) => {
+    if (!p.variantId || added[p.variantId]) return;
+    try {
+      await addToCart(p.variantId, p.name, 1, p.img || '', p.price || '');
+      setAdded((prev) => ({ ...prev, [p.variantId!]: true }));
+    } catch {
+      /* cart hiccup — leave the button tappable */
+    }
+  };
+
+  /* ---------- Lifecycle ---------- */
+  useEffect(() => {
+    closedRef.current = false;
+    rafRef.current = requestAnimationFrame(driveBars);
+    void startListening();
+    return () => {
+      closedRef.current = true;
+      generationRef.current += 1;
+      cancelAnimationFrame(rafRef.current);
+      audioRef.current?.pause();
+      if (mediaRecorderRef.current?.state === 'recording') {
+        mediaRecorderRef.current.onstop = null;
+        mediaRecorderRef.current.stop();
+      }
+      stopStream();
+      void audioCtxRef.current?.close();
+      audioCtxRef.current = null;
+    };
+  }, [startListening, driveBars]);
+
+  useEffect(() => {
+    if (stage === 'thinking' || stage === 'error') {
+      analyserRef.current = null; // let the CSS animation take over
+      resetBars();
+    }
+  }, [stage]);
+
+  const label =
+    stage === 'listening'
+      ? t('voice.listening')
+      : stage === 'thinking'
+      ? t('voice.thinking')
+      : stage === 'speaking'
+      ? t('voice.speaking', { name: agentName })
+      : t('voice.title');
+
+  return (
+    <div className="jwbV-overlay" style={{ '--jwbV-accent': colorCode } as React.CSSProperties}>
+      <button className="jwbV-close" onClick={onClose} aria-label={t('voice.exit')}>
+        <X size={18} />
+      </button>
+
+      <button
+        ref={barsRef}
+        className={`jwbV-bars jwbV-bars--${stage}`}
+        onClick={handleBarsTap}
+        aria-label={label}
+      >
+        {Array.from({ length: BAR_COUNT }).map((_, i) => (
+          <span key={i} className="jwbV-bar" style={{ animationDelay: `${i * 0.12}s` }} />
+        ))}
+      </button>
+
+      <p className="jwbV-status">{label}</p>
+
+      {transcript && <p className="jwbV-transcript">“{transcript}”</p>}
+      {(stage === 'speaking' || stage === 'thinking') && reply && (
+        <p className="jwbV-reply">{reply}</p>
+      )}
+      {hint && <p className="jwbV-hint">{hint}</p>}
+
+      {order && (
+        <div className="jwbV-payload">
+          <OrderCard data={order} colorCode={colorCode} />
+        </div>
+      )}
+
+      {products.length > 0 && (
+        <div className="jwbV-payload jwbV-products">
+          {products.map((p) => (
+            <div key={p.name} className="jwbV-product">
+              <a
+                href={p.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="jwbV-productLink"
+              >
+                {p.img && <img src={p.img} alt={p.name} className="jwbV-productImg" />}
+                <span className="jwbV-productName">{p.name}</span>
+                {p.price && <span className="jwbV-productPrice">{p.price}</span>}
+              </a>
+              {p.variantId && (
+                <button
+                  className={`jwbV-add ${added[p.variantId] ? 'jwbV-add--done' : ''}`}
+                  onClick={() => void handleAdd(p)}
+                  aria-label={added[p.variantId] ? t('product.addedToCart') : t('product.addToCart')}
+                >
+                  {added[p.variantId] ? <Check size={13} /> : <Plus size={13} />}
+                  {added[p.variantId] ? t('product.added') : t('product.addToCart')}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VoiceMode;

package/src/hooks/config.tsx

@@ -1,13 +1,12 @@
-
+// Backend host is resolved at BUILD time:
+//  - `npm run dev` reads .env.development -> localhost
+//  - `npm run build` (and anything published to npm) falls back to
+//    production, so a forgotten env can never ship localhost to stores.
+const API_BASE = (import.meta.env.VITE_API_URL || 'https://api.jaweb.me').replace(/\/+$/, '');
 
 const config = {
-    apiUrl:'https://jawebcrm.onrender.com/api/',
-    websocketUrl:'wss://jawebcrm.onrender.com/ws' ,
-    
-    // apiUrl:'http://localhost:8000/api/', 
-    // websocketUrl:'ws://localhost:8000/ws',
-
-  };
-  export default config;
-
+  apiUrl: `${API_BASE}/api/`,
+  websocketUrl: `${API_BASE.replace(/^http/, 'ws')}/ws`,
+};
 
+export default config;