shopify-chatbot-widget 0.0.4

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

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

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

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

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

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

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