shopify-chatbot-widget 0.0.4 → 0.2.2

package/src/Chatbot/components/Messages/AudioMessage.tsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import WaveSurfer from "wavesurfer.js";
-import {
-  PlayCircleOutlined,
-  PauseCircleOutlined
-} from "@ant-design/icons";
-
-interface AudioVisualizerProps {
-  link: string;
-  colorCode: string;
-  transcription?: string;
-}
-
-const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
-  link,
-  colorCode,
-  transcription,
-}) => {
-  const audioRef = useRef<HTMLDivElement | null>(null);
-  const wavesurferRef = useRef<WaveSurfer | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [showTranscription, setShowTranscription] = useState(false);
-
-  useEffect(() => {
-    if (!audioRef.current) return;
-
-    wavesurferRef.current?.destroy();
-
-    wavesurferRef.current = WaveSurfer.create({
-      container: audioRef.current,
-      waveColor: "white",
-      progressColor: "white",
-      cursorWidth: 0,
-      barWidth: 3,
-      barHeight: 1.5,
-      barGap: 2,
-      height: 40,
-      interact: true,
-    });
-
-    wavesurferRef.current.load(link);
-    wavesurferRef.current.on("finish", () => setIsPlaying(false));
-
-    return () => {
-      wavesurferRef.current?.destroy();
-    };
-  }, [link, colorCode]);
-
-  const togglePlay = () => {
-    if (wavesurferRef.current) {
-      wavesurferRef.current.playPause();
-      setIsPlaying((prev) => !prev);
-    }
-  };
-
-  return (
-    <div
-      style={{
-        backgroundColor:colorCode,
-        padding: "12px",
-        borderRadius: "20px",
-        color: "white",
-        maxWidth: "350px",
-        marginBottom: "16px",
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <button
-          onClick={togglePlay}
-          style={{
-            background: "transparent",
-            border: "none",
-            color: "white",
-            marginRight: "12px",
-            cursor: "pointer",
-          }}
-        >
-          {isPlaying ? (
-            <PauseCircleOutlined style={{ fontSize: "24px" }} />
-          ) : (
-            <PlayCircleOutlined style={{ fontSize: "24px" }} />
-          )}
-        </button>
-
-        <div
-            ref={audioRef}
-            style={{
-                width: "130px",
-                height: "40px",
-                overflow: "hidden",
-                color:'white'
-            }}
-            />
-
-      </div>
-
-      {transcription && (
-        <div style={{ marginTop: "12px", fontSize: "14px", color: "rgba(255,255,255,0.85)" }}>
-          <button
-            onClick={() => setShowTranscription(!showTranscription)}
-            style={{
-              background: "none",
-              border: "none",
-              color: "white",
-              textDecoration: "underline",
-              fontSize: "13px",
-              cursor: "pointer",
-              padding: 0,
-            }}
-          >
-            {showTranscription ? "Hide transcript" : "Show transcript"}
-          </button>
-
-          {showTranscription && (
-            <p style={{ marginTop: "6px", lineHeight: "1.4" }}>{transcription}</p>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AudioVisualizer;

package/src/Chatbot/components/Messages/CartWidget.tsx

@@ -1,116 +0,0 @@
-// src/components/Messages/CartWidget.tsx
-import { useState, useRef, useEffect } from 'react';
-import type { CartItem } from '../../../hooks/useCart';
-import { ShoppingCartOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-
-interface Props {
-  items: CartItem[];
-  colorCode:string;
-  loading: boolean;
-  onRefresh: () => void;
-  onRemove: (variantId: string, qty: number) => void;
-  sendMessage: (message: string) => Promise<void>;
-
-}
-
-export default function CartWidget({
-  items,
-  loading,
-  colorCode,
-  onRefresh,
-  onRemove,
-  sendMessage
-}: Props) {
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const totalCount = items.reduce((sum, i) => sum + i.quantity, 0);
-
-  return (
-    <div className="relative inline-block" ref={containerRef}>
-      <button
-        onClick={() => setOpen(o => !o)}
-        className="flex items-center space-x-1 px-3 py-1 hover:bg-gray-100 rounded-md"
-      >
-        <ShoppingCartOutlined className="text-xl" />
-        <span className="font-semibold">Cart ({totalCount})</span>
-      </button>
-
-      {open && (
-        <div className="absolute right-0 mt-4 w-80 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
-          {/* Header */}
-          <div className="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-            <span className="text-lg font-medium">Your Cart</span>
-            <button
-              onClick={onRefresh}
-              disabled={loading}
-              className="text-sm text-blue-600 hover:underline disabled:opacity-50"
-            >
-              {loading ? 'Refreshing…' : 'Refresh'}
-            </button>
-          </div>
-
-          {/* Concatenated-name summary */}
-       
-          {/* Items list */}
-          {items.length === 0 ? (
-            <div className="p-4 text-center text-gray-500">
-              Your cart is empty.
-            </div>
-          ) : (
-            <ul className="max-h-60 overflow-auto">
-              {items.map(i => (
-                <li
-                  key={i.variantId}
-                  className="flex items-center justify-between px-4 py-2 hover:bg-gray-50"
-                >
-                  {/* Fixed-width, truncated name */}
-                  <span className="inline-block w-40 text-sm font-medium truncate">
-                    {i.name}
-                  </span>
-
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm text-gray-700">×{i.quantity}</span>
-                    <CloseOutlined
-                      onClick={() => onRemove(i.variantId, i.quantity)}
-                      className="text-red-500 hover:text-red-700 cursor-pointer"
-                    />
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          {/* Footer */}
-          {items.length > 0 && (
-            <div className="px-4 py-3 border-t border-gray-100">
-              <Button
-                type="primary"
-                style={{backgroundColor:colorCode}}
-                block
-                disabled={totalCount === 0}
-                onClick={() => sendMessage('I want to Checkout')}
-              >
-                Checkout ({totalCount})
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/Chatbot/components/Messages/ChatImage.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-type MessagePart = {
-  type: string;
-  text?: string;
-  image_url?: {
-    url?: string;
-  };
-};
-
-type ChatImageProps = {
-  message: MessagePart[] & { isBusiness?: boolean };
-
-};
-
-const ChatImage: React.FC<ChatImageProps> = ({ message }) => {
-  const imgPart = message.find(part => part.type === 'image_url')?.image_url?.url;
-  const isBusiness = (message as any)?.isBusiness;
-
-
-  return (
-    <div>
-    <div>
-      {imgPart && (
-        <div className="mb-2 bg-transparent text-white ">
-          <img
-            src={imgPart}
-            alt="Chat image"
-            style={{ width: 200 }}
-            className={`rounded-md bg-transparent mt-2 max-w-xs ${
-              isBusiness ? 'border border-gray-300 shadow-sm' : ''
-            }`}
-          />
-        </div>
-      )}
-
-     
-    </div>
-
-</div>
-
-
-  );
-};
-
-export default ChatImage;

package/src/Chatbot/components/Messages/ChatImageText.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-
-type MessagePart = {
-  type: string;
-  text?: string;
-  image_url?: {
-    url?: string;
-  };
-};
-
-type ChatImageProps = {
-  message: MessagePart[] & { isBusiness?: boolean };
-  colorCode:string;
-};
-
-const ChatImageText: React.FC<ChatImageProps> = ({ message ,colorCode}) => {
-  const textPart = message.find(part => part.type === 'text')?.text;
-
-
-  const formatTextWithLinks = (text: string): React.ReactNode[] => {
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
-    return text.split(urlRegex).map((part, i) =>
-      urlRegex.test(part) ? (
-        <a
-          key={i}
-          href={part.trim()}
-          style={{ color: colorCode }}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline break-words"
-        >
-          {part}
-        </a>
-      ) : (
-        <span key={i}>{part}</span>
-      )
-    );
-  };
-
-  return (
-    <>
-     {textPart && (
-     <div 
-    style={{
-      color:'white',
-      border:1,
-      backgroundColor:colorCode,
-      paddingTop:10,
-      paddingBottom:10,
-      paddingInline:14,
-      maxWidth:'85%',
-      lineHeight:1.4,
-      borderRadius:'16px'
-      ,wordBreak:'break-word'
-      
-    }}
-    >
-   
-          <p >
-          {formatTextWithLinks(textPart)}
-          </p>
-     
-    </div>
-       )}
-    </>
-   
-   
-
-
-
-  );
-};
-
-export default ChatImageText;

package/src/Chatbot/components/Messages/ChatImageTextAssis.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-
-type MessagePart = {
-  type: string;
-  text?: string;
-  image_url?: {
-    url?: string;
-  };
-};
-
-type ChatImageProps = {
-  message: MessagePart[] & { isBusiness?: boolean };
-};
-
-const ChatImageTextAssist: React.FC<ChatImageProps> = ({ message }) => {
-  const textPart = message.find(part => part.type === 'text')?.text;
-
-
-  const formatTextWithLinks = (text: string): React.ReactNode[] => {
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
-    return text.split(urlRegex).map((part, i) =>
-      urlRegex.test(part) ? (
-        <a
-          key={i}
-          href={part.trim()}
-          style={{ color: 'black' }}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline break-words"
-        >
-          {part}
-        </a>
-      ) : (
-        <span key={i}>{part}</span>
-      )
-    );
-  };
-
-  return (
-    <>
-     {textPart && (
-     <div 
-    style={{
-      color:'black',
-      border:1,
-      paddingTop:10,
-      paddingBottom:10,
-      paddingInline:14,
-      maxWidth:'85%',
-      lineHeight:1.4,
-      borderRadius:'16px'
-      ,wordBreak:'break-word',
-      backgroundColor:'#f0f0f0'
-    }}
-    >
-   
-          <p >
-          {formatTextWithLinks(textPart)}
-          </p>
-     
-    </div>
-       )}
-    </>
-   
-   
-
-
-
-  );
-};
-
-export default ChatImageTextAssist;

package/src/Chatbot/components/Messages/ChatMessages.css

@@ -1,5 +0,0 @@
-.chat-image-wrapper {
-    padding: 4px 12px;
-
-  }
-