@diffsome/react 1.2.3 → 1.2.5

package/dist/chat.css

@@ -0,0 +1,396 @@
+/* Diffsome Chat - CSS Variables */
+.diffsome-chat-bubble-container {
+  --diffsome-chat-primary: #6366f1;
+  --diffsome-chat-primary-dark: color-mix(in srgb, var(--diffsome-chat-primary) 85%, black);
+  --diffsome-chat-bg: #ffffff;
+  --diffsome-chat-text: #1f2937;
+  --diffsome-chat-text-muted: #6b7280;
+  --diffsome-chat-border: #e5e7eb;
+  --diffsome-chat-visitor-bg: var(--diffsome-chat-primary);
+  --diffsome-chat-visitor-text: #ffffff;
+  --diffsome-chat-agent-bg: #f3f4f6;
+  --diffsome-chat-agent-text: #1f2937;
+  --diffsome-chat-radius: 12px;
+  --diffsome-chat-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+
+  position: fixed;
+  bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.diffsome-chat-bubble-right {
+  right: 20px;
+}
+
+.diffsome-chat-bubble-left {
+  left: 20px;
+  align-items: flex-start;
+}
+
+/* Floating Button */
+.diffsome-chat-bubble-button {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: none;
+  background: var(--diffsome-chat-primary);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--diffsome-chat-shadow);
+  transition: transform 0.2s ease, background-color 0.2s ease;
+  position: relative;
+}
+
+.diffsome-chat-bubble-button:hover {
+  transform: scale(1.05);
+  background: var(--diffsome-chat-primary-dark);
+}
+
+.diffsome-chat-bubble-button:active {
+  transform: scale(0.95);
+}
+
+.diffsome-chat-bubble-button-open {
+  background: #6b7280;
+}
+
+.diffsome-chat-bubble-button-open:hover {
+  background: #4b5563;
+}
+
+.diffsome-chat-bubble-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: #ef4444;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+}
+
+/* Chat Widget */
+.diffsome-chat-widget {
+  width: 380px;
+  max-width: calc(100vw - 40px);
+  height: 500px;
+  max-height: calc(100vh - 120px);
+  background: var(--diffsome-chat-bg);
+  border-radius: var(--diffsome-chat-radius);
+  box-shadow: var(--diffsome-chat-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: diffsome-chat-slide-up 0.3s ease;
+}
+
+@keyframes diffsome-chat-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Header */
+.diffsome-chat-header {
+  background: var(--diffsome-chat-primary);
+  color: white;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.diffsome-chat-header-info {
+  flex: 1;
+}
+
+.diffsome-chat-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.diffsome-chat-header-subtitle {
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+.diffsome-chat-header-close {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.diffsome-chat-header-close:hover {
+  opacity: 1;
+}
+
+/* Messages Container */
+.diffsome-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.diffsome-chat-loading,
+.diffsome-chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--diffsome-chat-text-muted);
+  font-size: 14px;
+  gap: 12px;
+}
+
+.diffsome-chat-loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--diffsome-chat-border);
+  border-top-color: var(--diffsome-chat-primary);
+  border-radius: 50%;
+  animation: diffsome-chat-spin 0.8s linear infinite;
+}
+
+@keyframes diffsome-chat-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Message Bubbles */
+.diffsome-chat-message {
+  display: flex;
+  flex-direction: column;
+  max-width: 80%;
+}
+
+.diffsome-chat-message-visitor {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.diffsome-chat-message-agent {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.diffsome-chat-message-sender {
+  font-size: 12px;
+  color: var(--diffsome-chat-text-muted);
+  margin-bottom: 4px;
+  padding-left: 12px;
+}
+
+.diffsome-chat-message-bubble {
+  padding: 10px 14px;
+  border-radius: 18px;
+  word-wrap: break-word;
+}
+
+.diffsome-chat-message-visitor .diffsome-chat-message-bubble {
+  background: var(--diffsome-chat-visitor-bg);
+  color: var(--diffsome-chat-visitor-text);
+  border-bottom-right-radius: 4px;
+}
+
+.diffsome-chat-message-agent .diffsome-chat-message-bubble {
+  background: var(--diffsome-chat-agent-bg);
+  color: var(--diffsome-chat-agent-text);
+  border-bottom-left-radius: 4px;
+}
+
+.diffsome-chat-message-content {
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+.diffsome-chat-message-time {
+  font-size: 11px;
+  margin-top: 4px;
+  opacity: 0.7;
+}
+
+.diffsome-chat-message-read {
+  color: #10b981;
+}
+
+/* System Message */
+.diffsome-chat-message-system {
+  align-self: center;
+  background: var(--diffsome-chat-border);
+  color: var(--diffsome-chat-text-muted);
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 12px;
+}
+
+/* Typing Indicator */
+.diffsome-chat-typing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--diffsome-chat-text-muted);
+  font-size: 13px;
+}
+
+.diffsome-chat-typing-indicator {
+  display: flex;
+  gap: 4px;
+}
+
+.diffsome-chat-typing-indicator span {
+  width: 8px;
+  height: 8px;
+  background: var(--diffsome-chat-text-muted);
+  border-radius: 50%;
+  animation: diffsome-chat-typing-bounce 1.4s ease-in-out infinite;
+}
+
+.diffsome-chat-typing-indicator span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.diffsome-chat-typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.diffsome-chat-typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes diffsome-chat-typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+/* Input */
+.diffsome-chat-input {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--diffsome-chat-border);
+  background: var(--diffsome-chat-bg);
+}
+
+.diffsome-chat-input-field {
+  flex: 1;
+  border: 1px solid var(--diffsome-chat-border);
+  border-radius: 20px;
+  padding: 10px 16px;
+  font-size: 14px;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+  line-height: 1.4;
+  max-height: 100px;
+  transition: border-color 0.2s ease;
+}
+
+.diffsome-chat-input-field:focus {
+  border-color: var(--diffsome-chat-primary);
+}
+
+.diffsome-chat-input-field::placeholder {
+  color: var(--diffsome-chat-text-muted);
+}
+
+.diffsome-chat-input-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--diffsome-chat-primary);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
+  flex-shrink: 0;
+}
+
+.diffsome-chat-input-button:hover:not(:disabled) {
+  background: var(--diffsome-chat-primary-dark);
+}
+
+.diffsome-chat-input-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Mobile Responsive */
+@media (max-width: 480px) {
+  .diffsome-chat-widget {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    border-radius: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .diffsome-chat-bubble-container {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  .diffsome-chat-bubble-left {
+    left: 16px;
+    right: auto;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .diffsome-chat-bubble-container {
+    --diffsome-chat-bg: #1f2937;
+    --diffsome-chat-text: #f9fafb;
+    --diffsome-chat-text-muted: #9ca3af;
+    --diffsome-chat-border: #374151;
+    --diffsome-chat-agent-bg: #374151;
+    --diffsome-chat-agent-text: #f9fafb;
+  }
+}

package/dist/index.d.mts

@@ -837,54 +837,9 @@ interface RichContentProps {
  */
 declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
 
-interface Message {
-    id: number;
-    content: string;
-    senderType: 'visitor' | 'agent' | 'system';
-    senderName?: string;
-    timestamp?: string;
-    isRead?: boolean;
-}
-interface ChatWidgetProps {
-    messages: Message[];
-    onSend: (message: string) => void;
-    onTyping?: () => void;
-    onClose?: () => void;
-    title?: string;
-    subtitle?: string;
-    placeholder?: string;
-    loading?: boolean;
-    typing?: boolean;
-    className?: string;
-}
-declare const ChatWidget: React__default.FC<ChatWidgetProps>;
-
 interface ChatBubbleProps {
     /** Diffsome SDK client instance */
-    client: {
-        chat: {
-            start: (data?: {
-                visitor_name?: string;
-                visitor_email?: string;
-                initial_message?: string;
-            }) => Promise<{
-                conversation_id: number;
-                visitor_id: string;
-            }>;
-            connect: (conversationId: number) => {
-                send: (content: string) => Promise<unknown>;
-                getMessages: () => Promise<Message[]>;
-                onMessage: (callback: (msg: Message) => void) => () => void;
-                onTyping: (callback: (senderType: string) => void) => () => void;
-                sendTyping: () => void;
-                disconnect: () => void;
-            };
-            checkAvailability: () => Promise<{
-                available: boolean;
-                agents_online: number;
-            }>;
-        };
-    };
+    client: Diffsome;
     /** Chat widget title */
     title?: string;
     /** Chat widget subtitle */
@@ -914,6 +869,28 @@ interface ChatBubbleProps {
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
+interface Message {
+    id: number;
+    content: string;
+    sender_type: 'visitor' | 'agent' | 'system';
+    sender_name?: string;
+    created_at?: string;
+    is_read?: boolean;
+}
+interface ChatWidgetProps {
+    messages: Message[];
+    onSend: (message: string) => void;
+    onTyping?: () => void;
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    loading?: boolean;
+    typing?: boolean;
+    className?: string;
+}
+declare const ChatWidget: React__default.FC<ChatWidgetProps>;
+
 interface ChatMessageProps {
     content: string;
     senderType: 'visitor' | 'agent' | 'system';

package/dist/index.d.ts

@@ -837,54 +837,9 @@ interface RichContentProps {
  */
 declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
 
-interface Message {
-    id: number;
-    content: string;
-    senderType: 'visitor' | 'agent' | 'system';
-    senderName?: string;
-    timestamp?: string;
-    isRead?: boolean;
-}
-interface ChatWidgetProps {
-    messages: Message[];
-    onSend: (message: string) => void;
-    onTyping?: () => void;
-    onClose?: () => void;
-    title?: string;
-    subtitle?: string;
-    placeholder?: string;
-    loading?: boolean;
-    typing?: boolean;
-    className?: string;
-}
-declare const ChatWidget: React__default.FC<ChatWidgetProps>;
-
 interface ChatBubbleProps {
     /** Diffsome SDK client instance */
-    client: {
-        chat: {
-            start: (data?: {
-                visitor_name?: string;
-                visitor_email?: string;
-                initial_message?: string;
-            }) => Promise<{
-                conversation_id: number;
-                visitor_id: string;
-            }>;
-            connect: (conversationId: number) => {
-                send: (content: string) => Promise<unknown>;
-                getMessages: () => Promise<Message[]>;
-                onMessage: (callback: (msg: Message) => void) => () => void;
-                onTyping: (callback: (senderType: string) => void) => () => void;
-                sendTyping: () => void;
-                disconnect: () => void;
-            };
-            checkAvailability: () => Promise<{
-                available: boolean;
-                agents_online: number;
-            }>;
-        };
-    };
+    client: Diffsome;
     /** Chat widget title */
     title?: string;
     /** Chat widget subtitle */
@@ -914,6 +869,28 @@ interface ChatBubbleProps {
 }
 declare const ChatBubble: React__default.FC<ChatBubbleProps>;
 
+interface Message {
+    id: number;
+    content: string;
+    sender_type: 'visitor' | 'agent' | 'system';
+    sender_name?: string;
+    created_at?: string;
+    is_read?: boolean;
+}
+interface ChatWidgetProps {
+    messages: Message[];
+    onSend: (message: string) => void;
+    onTyping?: () => void;
+    onClose?: () => void;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    loading?: boolean;
+    typing?: boolean;
+    className?: string;
+}
+declare const ChatWidget: React__default.FC<ChatWidgetProps>;
+
 interface ChatMessageProps {
     content: string;
     senderType: 'visitor' | 'agent' | 'system';

package/dist/index.js

@@ -2770,10 +2770,10 @@ var ChatWidget = ({
         ChatMessage,
         {
           content: msg.content,
-          senderType: msg.senderType,
-          senderName: msg.senderName,
-          timestamp: formatTime(msg.timestamp),
-          isRead: msg.isRead
+          senderType: msg.sender_type,
+          senderName: msg.sender_name,
+          timestamp: formatTime(msg.created_at),
+          isRead: msg.is_read
         },
         msg.id
       )),
@@ -2840,7 +2840,7 @@ var ChatBubble = ({
       setMessages(existingMessages);
       conn.onMessage((msg) => {
         setMessages((prev) => [...prev, msg]);
-        if (!isOpen && msg.senderType !== "visitor") {
+        if (!isOpen && msg.sender_type !== "visitor") {
           setUnreadCount((c) => c + 1);
         }
       });
@@ -2873,8 +2873,8 @@ var ChatBubble = ({
     const tempMessage = {
       id: Date.now(),
       content,
-      senderType: "visitor",
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      sender_type: "visitor",
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
     };
     setMessages((prev) => [...prev, tempMessage]);
     try {

package/dist/index.mjs

@@ -2678,10 +2678,10 @@ var ChatWidget = ({
         ChatMessage,
         {
           content: msg.content,
-          senderType: msg.senderType,
-          senderName: msg.senderName,
-          timestamp: formatTime(msg.timestamp),
-          isRead: msg.isRead
+          senderType: msg.sender_type,
+          senderName: msg.sender_name,
+          timestamp: formatTime(msg.created_at),
+          isRead: msg.is_read
         },
         msg.id
       )),
@@ -2748,7 +2748,7 @@ var ChatBubble = ({
       setMessages(existingMessages);
       conn.onMessage((msg) => {
         setMessages((prev) => [...prev, msg]);
-        if (!isOpen && msg.senderType !== "visitor") {
+        if (!isOpen && msg.sender_type !== "visitor") {
           setUnreadCount((c) => c + 1);
         }
       });
@@ -2781,8 +2781,8 @@ var ChatBubble = ({
     const tempMessage = {
       id: Date.now(),
       content,
-      senderType: "visitor",
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      sender_type: "visitor",
+      created_at: (/* @__PURE__ */ new Date()).toISOString()
     };
     setMessages((prev) => [...prev, tempMessage]);
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diffsome/react",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "React hooks and providers for Diffsome SDK - Headless e-commerce & CMS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -10,13 +10,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./chat.css": "./dist/chat.css",
+    "./dist/chat.css": "./dist/chat.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react",
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react && cp src/components/chat/styles.css dist/chat.css",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"