shopify-chatbot-widget 0.9.7 → 0.9.8

package/src/Chatbot/components/ChatInput.tsx

@@ -1,17 +1,19 @@
 import { useState, useRef, useEffect } from "react";
 import type { ChangeEvent } from "react";
-import { useTranslation } from "react-i18next";
-import { Input, Tooltip } from "antd";
+// import { useTranslation } from "react-i18next";
+import { message as antMessage } from "antd";
 import {
   PictureOutlined,
-  SendOutlined,
   CloseCircleOutlined,
   AudioOutlined,
   StopOutlined,
   PlayCircleOutlined,
   PauseCircleOutlined,
+  LoadingOutlined,
+  ArrowUpOutlined,
 } from "@ant-design/icons";
 import WaveSurfer from "wavesurfer.js";
+import "./ChatInput.css";
 
 interface ChatInputProps {
   userMessage: string;
@@ -24,6 +26,7 @@ interface ChatInputProps {
   audioBlob: Blob | null;
   setAudioBlob: (blob: Blob | null) => void;
   isSending: boolean;
+  colorCode: string;
 }
 
 const ChatInput: React.FC<ChatInputProps> = ({
@@ -37,35 +40,118 @@ const ChatInput: React.FC<ChatInputProps> = ({
   audioBlob,
   setAudioBlob,
   isSending,
+  colorCode,
 }) => {
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [recordingDuration, setRecordingDuration] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
 
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const audioChunks = useRef<Blob[]>([]);
   const waveformRef = useRef<HTMLDivElement | null>(null);
   const wavesurfer = useRef<WaveSurfer | null>(null);
+  const recordingIntervalRef = useRef<number | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Helper function to adjust color brightness
+  const adjustBrightness = (hex: string, percent: number) => {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = (num >> 16) + amt;
+    const G = ((num >> 8) & 0x00ff) + amt;
+    const B = (num & 0x0000ff) + amt;
+    return (
+      "#" +
+      (
+        0x1000000 +
+        (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+        (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+        (B < 255 ? (B < 1 ? 0 : B) : 255)
+      )
+        .toString(16)
+        .slice(1)
+    );
+  };
+
+  // Format duration as MM:SS
+  const formatDuration = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+
+  // Validate image file
+  const validateImage = (file: File): boolean => {
+    const maxSize = 5 * 1024 * 1024; // 5MB
+    if (file.size > maxSize) {
+      antMessage.warning("Image size should be less than 5MB");
+      return false;
+    }
+    return true;
+  };
 
   const handleImageUpload = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
-    if (file) setSelectedImage(file);
+    if (file && validateImage(file)) {
+      setSelectedImage(file);
+    }
+    event.target.value = "";
   };
 
   const removeSelectedImage = () => {
     setSelectedImage(null);
   };
 
+  // Auto-resize textarea
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setUserMessage(e.target.value);
+  
+    const textarea = e.target;
+    textarea.style.height = "auto";
+    const newHeight = Math.min(textarea.scrollHeight, 67.5); // Changed from 200 to 67.5 (3 lines)
+    textarea.style.height = `${newHeight}px`;
+  };
+
+  // Drag and drop handlers
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file && file.type.startsWith("image/") && validateImage(file)) {
+      setSelectedImage(file);
+    } else if (file && !file.type.startsWith("image/")) {
+      antMessage.warning("Please drop an image file");
+    }
+  };
+
   const handleVoiceRecord = async () => {
     if (!navigator.mediaDevices?.getUserMedia) {
-      alert(t("chatInput.voice.notSupported"));
+      antMessage.error("Voice recording is not supported in your browser");
       return;
     }
 
     if (!isRecording) {
       try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        });
         const mimeType = MediaRecorder.isTypeSupported("audio/webm")
           ? "audio/webm"
           : "audio/mp4";
@@ -73,6 +159,11 @@ const ChatInput: React.FC<ChatInputProps> = ({
         const recorder = new MediaRecorder(stream, { mimeType });
         mediaRecorderRef.current = recorder;
         audioChunks.current = [];
+        setRecordingDuration(0);
+
+        recordingIntervalRef.current = setInterval(() => {
+          setRecordingDuration((prev) => prev + 1);
+        }, 1000);
 
         recorder.ondataavailable = (event) => {
           if (event.data.size > 0) audioChunks.current.push(event.data);
@@ -83,13 +174,16 @@ const ChatInput: React.FC<ChatInputProps> = ({
           setAudioBlob(blob);
           setIsRecording(false);
           stream.getTracks().forEach((track) => track.stop());
+          if (recordingIntervalRef.current) {
+            clearInterval(recordingIntervalRef.current);
+          }
         };
 
         recorder.start();
         setIsRecording(true);
       } catch (err) {
         console.error(err);
-        alert(t("chatInput.voice.permissionError"));
+        antMessage.error("Microphone permission denied");
       }
     } else {
       mediaRecorderRef.current?.stop();
@@ -103,20 +197,22 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
       wavesurfer.current = WaveSurfer.create({
         container: waveformRef.current,
-        waveColor: "#ccc",
-        progressColor: "#7F28F8",
-        cursorWidth: 0,
-        barWidth: 3,
-        barHeight: 1.5,
-        barGap: 2,
-        height: 40,
+        waveColor: "#d1d5db",
+        progressColor: colorCode,
+        cursorWidth: 2,
+        cursorColor: colorCode,
+        barWidth: 2,
+        barHeight: 1,
+        barGap: 3,
+        height: 32,
         interact: true,
+        hideScrollbar: true,
       });
 
       wavesurfer.current.load(url);
       wavesurfer.current.on("finish", () => setIsPlaying(false));
     }
-  }, [audioBlob]);
+  }, [audioBlob, colorCode]);
 
   const togglePlay = () => {
     if (wavesurfer.current) {
@@ -128,232 +224,230 @@ const ChatInput: React.FC<ChatInputProps> = ({
   const handleCancelRecording = () => {
     setIsRecording(false);
     setAudioBlob(null);
+    setRecordingDuration(0);
     wavesurfer.current?.destroy();
+    if (recordingIntervalRef.current) {
+      clearInterval(recordingIntervalRef.current);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (recordingIntervalRef.current) {
+        clearInterval(recordingIntervalRef.current);
+      }
+      wavesurfer.current?.destroy();
+    };
+  }, []);
+
+  const hasContent = userMessage.trim() || selectedImage || audioBlob;
+
+  const hexToRgba = (hex: string, alpha: number) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   };
 
   return (
     <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        backgroundColor: "white",
-        border: "1px solid #d1d5db",
-        borderRadius: "9999px",
-        padding: "0.5rem 0.75rem",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
-        width: "95%",
-        height: "56px",
-      }}
+      className="chat-input-wrapper"
+      style={
+        {
+          "--primary-color": colorCode,
+          "--primary-hover": adjustBrightness(colorCode, -10),
+          "--primary-light": hexToRgba(colorCode, 0.1),
+          "--primary-shadow": hexToRgba(colorCode, 0.3),
+        } as React.CSSProperties
+      }
     >
-      <button
-        style={{
-          color: "#6b7280",
-          background: "none",
-          border: "none",
-          margin: "0 0.5rem",
-          cursor: "pointer",
-          padding: "0"
-        }}
-        onClick={() => fileInputRef.current?.click()}
-      >
-        {selectedImage ? (
-          <div style={{ position: "relative" }}>
+      {/* Image Preview */}
+      {selectedImage && (
+        <div className="image-preview-container">
+          <div className="image-preview-content">
             <img
               src={URL.createObjectURL(selectedImage)}
-              alt={t("chatInput.image.selectedAlt")}
-              style={{
-                width: "2rem",
-                height: "2rem",
-                borderRadius: "9999px",
-                objectFit: "cover",
-                padding: "0"
-              }}
-            />
-            <CloseCircleOutlined
-              style={{
-                position: "absolute",
-                top: "-0.5rem",
-                right: "-0.5rem",
-                fontSize: "14px",
-                color: "#ef4444",
-                background: "white",
-                borderRadius: "9999px",
-                cursor: "pointer",
-              }}
-              onClick={(e) => {
-                e.stopPropagation();
-                removeSelectedImage();
-              }}
+              alt="Selected"
+              className="image-preview"
             />
+            <div className="image-preview-info">
+              <span className="image-preview-name">{selectedImage.name}</span>
+              <span className="image-preview-size">
+                {(selectedImage.size / 1024).toFixed(1)} KB
+              </span>
+            </div>
+            <button
+              className="image-preview-remove"
+              onClick={removeSelectedImage}
+              aria-label="Remove image"
+            >
+              <CloseCircleOutlined />
+            </button>
           </div>
-        ) : (
-          <PictureOutlined style={{ fontSize: "20px" }} />
-        )}
-      </button>
-
-      <input
-        disabled={isSending}
-        type="file"
-        accept="image/*"
-        ref={fileInputRef}
-        onChange={handleImageUpload}
-        style={{ display: "none",padding: "0" }}
-      />
-
-      <Tooltip title={isRecording ? "Stop Recording" : "Send Audio"}>
-        <button
-          onClick={handleVoiceRecord}
-          style={{
-            color: isRecording ? "#ef4444" : "#6b7280",
-            background: "none",
-            border: "none",
-            margin: "0 0.5rem",
-            cursor: "pointer",
-            padding: "0"
-          }}
-        >
-          {isRecording ? (
-            <StopOutlined style={{ fontSize: "20px" }} />
-          ) : (
-            <AudioOutlined style={{ fontSize: "20px" }} />
-          )}
-        </button>
-      </Tooltip>
+        </div>
+      )}
 
+      {/* Main Input Container */}
       <div
-        style={{
-          flex: 1,
-          margin: "0 0.5rem",
-          minWidth: 0,
-          maxWidth: "100%",
-          display: "flex",
-          alignItems: "center",
-        }}
+        className={`chat-input-container ${isSending ? "disabled" : ""} ${
+          isDragging ? "dragging" : ""
+        }`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
       >
-        {audioBlob ? (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              width: "100%",
-              backgroundColor: "#f3f4f6",
-              padding: "0.5rem 1rem",
-              borderRadius: "0.5rem",
-            }}
-          >
-            <button
-              style={{
-                background: "none",
-                border: "none",
-                marginRight: "0.75rem",
-                color: "#7f28f8",
-                cursor: "pointer",
-                padding: "0"
+        {/* Input Content Area */}
+        <div className="input-content">
+          {audioBlob ? (
+            // Audio Playback UI
+            <div className="audio-playback-container">
+              <button
+                className="audio-play-button"
+                onClick={togglePlay}
+                aria-label={isPlaying ? "Pause" : "Play"}
+              >
+                {isPlaying ? (
+                  <PauseCircleOutlined className="play-icon" />
+                ) : (
+                  <PlayCircleOutlined className="play-icon" />
+                )}
+              </button>
+              <div ref={waveformRef} className="waveform" />
+              <button
+                className="audio-cancel-button"
+                onClick={handleCancelRecording}
+                aria-label="Cancel recording"
+              >
+                <CloseCircleOutlined />
+              </button>
+            </div>
+          ) : isRecording ? (
+            // Recording UI
+            <div className="recording-container">
+              <div className="recording-indicator">
+                <span className="recording-dot"></span>
+                <span className="recording-text">Recording</span>
+              </div>
+              <span className="recording-duration">
+                {formatDuration(recordingDuration)}
+              </span>
+            </div>
+          ) : (
+            // Text Input
+            <textarea
+              ref={textareaRef}
+              value={userMessage}
+              onChange={handleTextareaChange}
+              placeholder="Enter Message ..."
+              className="text-input"
+              disabled={isSending}
+              rows={1}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey && !isSending) {
+                  e.preventDefault();
+
+                  const hasImage = !!selectedImage;
+                  const hasText = !!userMessage.trim();
+
+                  if (hasImage) {
+                    handleSendImage(selectedImage, userMessage);
+                    removeSelectedImage();
+                    setUserMessage("");
+                    if (textareaRef.current) {
+                      textareaRef.current.style.height = "auto";
+                    }
+                  } else if (hasText) {
+                    handleSendMessage();
+                    setUserMessage("");
+                    if (textareaRef.current) {
+                      textareaRef.current.style.height = "auto";
+                    }
+                  }
+                }
               }}
-              onClick={togglePlay}
+              maxLength={2000}
+            />
+          )}
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div className="action-bar">
+          {/* Left side icons */}
+          <div className="action-icons-left">
+            <input
+              type="file"
+              accept="image/*"
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+              style={{ display: "none" }}
+            />
+
+            <button
+              className="action-icon-button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={isSending || isRecording}
+              aria-label="Upload image"
             >
-              {isPlaying ? (
-                <PauseCircleOutlined style={{ fontSize: "24px" }} />
-              ) : (
-                <PlayCircleOutlined style={{ fontSize: "24px" }} />
-              )}
+              <PictureOutlined />
+            </button>
+
+            <button
+              onClick={handleVoiceRecord}
+              className={`action-icon-button ${isRecording ? "recording" : ""}`}
+              disabled={isSending}
+              aria-label={isRecording ? "Stop recording" : "Record voice"}
+            >
+              {isRecording ? <StopOutlined /> : <AudioOutlined />}
             </button>
-            <div ref={waveformRef} style={{ width: "100%", height: "2rem" }} />
-            <CloseCircleOutlined
-              style={{
-                fontSize: "18px",
-                color: "#ef4444",
-                marginLeft: "0.75rem",
-                cursor: "pointer",
-              }}
-              onClick={handleCancelRecording}
-            />
-          </div>
-        ) : isRecording ? (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: "#f3f4f6",
-              padding: "0.5rem 1rem",
-              borderRadius: "0.5rem",
-              animation: "pulse 2s infinite",
-            
-            }}
-          >
-            <span>Recording</span>
           </div>
-        ) : (
-          <Input
-            type="text"
-            value={userMessage}
-            onChange={(e) => setUserMessage(e.target.value)}
-            placeholder={"Message..."}
-            style={{
-              width: "100%",
-              border: "none",
-              fontSize: "16px",
-              margin:0,
-              lineHeight: 1.5,
-              color: "#374151",
-              padding: "0"
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !isSending) {
-                e.preventDefault();
-            
-                const hasImage = !!selectedImage;
-                const hasText = !!userMessage.trim();
-            
-                if (hasImage) {
-                  handleSendImage(selectedImage, userMessage);
-                  removeSelectedImage();
-                  setUserMessage("");
-                } else if (hasText) {
-                  handleSendMessage();
-                  setUserMessage("");
+
+          {/* Right side send button */}
+          <button
+            disabled={isSending || !hasContent}
+            onClick={() => {
+              const hasImage = !!selectedImage;
+              const hasText = !!userMessage.trim();
+              const hasAudio = !!audioBlob;
+
+              if (hasImage) {
+                handleSendImage(selectedImage, userMessage);
+                removeSelectedImage();
+                setUserMessage("");
+                if (textareaRef.current) {
+                  textareaRef.current.style.height = "auto";
+                }
+              } else if (hasAudio) {
+                handleSendVoice(audioBlob);
+                handleCancelRecording();
+              } else if (hasText) {
+                handleSendMessage();
+                setUserMessage("");
+                if (textareaRef.current) {
+                  textareaRef.current.style.height = "auto";
                 }
               }
             }}
-            
-          />
+            className={`send-button ${hasContent && !isSending ? "active" : ""}`}
+            aria-label="Send message"
+          >
+            {isSending ? (
+              <LoadingOutlined className="send-icon spin" />
+            ) : (
+              <ArrowUpOutlined className="send-icon" />
+            )}
+          </button>
+        </div>
+
+        {/* Drag overlay */}
+        {isDragging && (
+          <div className="drag-overlay">
+            <PictureOutlined className="drag-icon" />
+            <span>Drop image here</span>
+          </div>
         )}
       </div>
-
-      <button
-        disabled={isSending}
-        onClick={() => {
-          const hasImage = !!selectedImage;
-          const hasText = !!userMessage.trim();
-          const hasAudio = !!audioBlob;
-
-          if (hasImage) {
-            handleSendImage(selectedImage, userMessage);
-            removeSelectedImage();
-            setUserMessage("");
-          } else if (hasAudio) {
-            handleSendVoice(audioBlob);
-            handleCancelRecording();
-          } else if (hasText) {
-            handleSendMessage();
-            setUserMessage("");
-          }
-        }}
-        aria-label={t("chatInput.send")}
-        style={{
-          color: "#6b7280",
-          background: "none",
-          border: "none",
-          margin: "0 0.5rem",
-          cursor: "pointer",
-          padding: "0"
-        }}
-      >
-        <SendOutlined style={{ fontSize: "20px" }} />
-      </button>
     </div>
   );
 };
 
-export default ChatInput;
+export default ChatInput;

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

@@ -28,4 +28,20 @@
       opacity: 1;
     }
   }
-  
+  
+
+
+  @keyframes fadeSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(15px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .first-message {
+    animation: fadeSlideIn 0.5s ease-out;
+  }