@blumessage/react-chat 1.0.11 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/BlumessageChat.js +19 -9
  2. package/package.json +20 -26
package/dist/BlumessageChat.js CHANGED
@@ -56,6 +56,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
56
56
  };
57
57
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
58
58
  import React, { useState, useEffect, useRef } from "react";
59
+ import ReactMarkdown from 'react-markdown';
59
60
  import { MessageCircle, AlertTriangle, Loader2, Send, X, Maximize, Minimize2, Bot, MessageSquare, Phone, Mail, Headphones, Users, User, Heart, Star, Zap } from "lucide-react";
60
61
  // Custom CSS animations that don't depend on Tailwind
61
62
  var customStyles = "\n @keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-25%);\n }\n }\n \n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n \n .blumessage-animate-bounce {\n animation: bounce 1s infinite;\n }\n \n .blumessage-animate-spin {\n animation: spin 1s linear infinite;\n }\n";
@@ -599,6 +600,13 @@ export var BlumessageChat = function (_a) {
599
600
  return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px', transformOrigin: 'bottom right' });
600
601
  }
601
602
  };
603
+ var renderMessage = function (message) {
604
+ return (_jsx("div", { className: "blumessage-flex blumessage-gap-3 blumessage-mb-4 ".concat(message.role === 'user' ? 'blumessage-flex-row-reverse' : ''), children: _jsxs("div", { className: "blumessage-flex blumessage-flex-col blumessage-gap-1 blumessage-max-w-[80%]", children: [_jsx("div", { className: "blumessage-rounded-lg blumessage-px-4 blumessage-py-2 ".concat(message.role === 'user'
605
+ ? 'blumessage-bg-gradient-to-r blumessage-from-blue-500 blumessage-to-purple-600 blumessage-text-white'
606
+ : theme === 'light'
607
+ ? 'blumessage-bg-gray-100'
608
+ : 'blumessage-bg-gray-700'), children: message.role === 'assistant' ? (_jsx("div", { className: "blumessage-prose ".concat(theme === 'dark' ? 'blumessage-text-white' : 'blumessage-text-gray-900'), children: _jsx(ReactMarkdown, { children: message.content }) })) : (_jsx("p", { className: "blumessage-text-sm blumessage-whitespace-pre-wrap", children: message.content })) }), showTimestamps && (_jsx("span", { className: "blumessage-text-xs blumessage-text-gray-500", children: formatTimestamp(message.timestamp) }))] }) }, message.id));
609
+ };
602
610
  // Render chat window component
603
611
  var renderChatWindow = function () {
604
612
  var chatContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
@@ -623,15 +631,17 @@ export var BlumessageChat = function (_a) {
623
631
  ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
624
632
  : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: isMaximized ? _jsx(Minimize2, { className: "w-4 h-4" }) : _jsx(Maximize, { className: "w-4 h-4" }) })), _jsx("button", { onClick: handleCloseChat, className: "w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-colors ".concat(theme === 'dark'
625
633
  ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
626
- : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { className: "flex-1 px-6 py-4 flex flex-col gap-4 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), children: [messages.map(function (message) { return (_jsx("div", { className: "flex ".concat(message.role === 'user' ? 'justify-end' : 'justify-start'), children: _jsxs("div", { className: "max-w-[80%] ".concat(message.role === 'user' ? 'text-right' : 'text-left'), children: [_jsx("div", { className: "px-4 py-3 rounded-2xl text-sm leading-6 ".concat(message.role === 'user'
627
- ? 'text-white'
628
- : theme === 'dark'
629
- ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
630
- : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: message.content }), showTimestamps && (_jsx("div", { className: "text-xs mt-1 ".concat(theme === 'dark' ? 'text-gray-500' : 'text-gray-400'), style: {
631
- textAlign: message.role === 'user' ? 'right' : 'left',
632
- paddingLeft: message.role === 'assistant' ? '16px' : '0',
633
- paddingRight: message.role === 'user' ? '16px' : '0'
634
- }, children: formatTimestamp(message.timestamp) }))] }) }, message.id)); }), isLoading && (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "px-4 py-3 rounded-2xl max-w-[80%] text-sm leading-6 shadow-sm ".concat(theme === 'dark'
634
+ : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'), children: _jsx(X, { className: "w-4 h-4" }) })] }))] }), _jsxs("div", { className: "flex-1 px-6 py-4 flex flex-col gap-4 overflow-y-auto ".concat(theme === 'dark' ? 'bg-gray-800' : 'bg-gray-50'), children: [messages.map(function (message) { return (_jsx("div", { className: "flex ".concat(message.role === 'user' ? 'justify-end' : 'justify-start'), children: _jsx("div", { className: "max-w-[80%] inline-block ".concat(message.role === 'user' ? '' : 'text-left'), children: _jsxs("div", { className: "inline-block px-4 py-3 rounded-2xl text-sm leading-6 text-left ".concat(message.role === 'user'
635
+ ? 'text-white'
636
+ : theme === 'dark'
637
+ ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
638
+ : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [_jsx("div", { className: "inline-block", children: message.content }), showTimestamps && (_jsx("div", { className: "text-[10px] mt-1 opacity-75 ".concat(message.role === 'user'
639
+ ? 'text-white/75'
640
+ : theme === 'dark'
641
+ ? 'text-gray-400'
642
+ : 'text-gray-500'), style: {
643
+ textAlign: message.role === 'user' ? 'right' : 'left'
644
+ }, children: formatTimestamp(message.timestamp) }))] }) }) }, message.id)); }), isLoading && (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "px-4 py-3 rounded-2xl max-w-[80%] text-sm leading-6 shadow-sm ".concat(theme === 'dark'
635
645
  ? 'bg-gray-700 text-gray-100 border border-gray-600'
636
646
  : 'bg-white text-gray-800 border border-gray-200'), children: _jsx("div", { className: "".concat(theme === 'dark' ? 'text-gray-300' : 'text-gray-600'), style: { fontStyle: 'italic' }, children: typingText }) }) })), messages.length === 0 && !isLoading && (_jsx("div", { className: "text-center text-sm py-8 ".concat(theme === 'dark' ? 'text-gray-400' : 'text-gray-500'), children: emptyStateText })), _jsx("div", { ref: messagesEndRef })] }), _jsx("div", { className: "px-6 py-4 border-t ".concat(theme === 'dark'
637
647
  ? 'bg-gray-900 border-gray-700'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blumessage/react-chat",
3
- "version": "1.0.11",
3
+ "version": "1.1.0",
4
4
  "description": "A React TypeScript chat widget component with floating button, theming, and Blumessage API integration",
5
5
  "license": "UNLICENSED",
6
6
  "author": "Blumessage <contact@blumessage.com>",
@@ -14,14 +14,7 @@
14
14
  "floating",
15
15
  "tailwind"
16
16
  ],
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/MihaiZhaoDev/blumessage-react-chat-component.git"
20
- },
21
- "bugs": {
22
- "url": "https://github.com/MihaiZhaoDev/blumessage-react-chat-component/issues"
23
- },
24
- "homepage": "https://github.com/MihaiZhaoDev/blumessage-react-chat-component#readme",
17
+ "homepage": "https://blumessage.com",
25
18
  "files": [
26
19
  "dist",
27
20
  "README.md",
@@ -48,24 +41,25 @@
48
41
  "react-dom": ">=18.0.0"
49
42
  },
50
43
  "dependencies": {
51
- "lucide-react": "^0.469.0"
44
+ "lucide-react": "^0.294.0",
45
+ "react-markdown": "^9.0.1"
52
46
  },
53
47
  "devDependencies": {
54
- "@types/react": "^19.1.8",
55
- "@types/react-dom": "^19.1.6",
56
- "autoprefixer": "^10.4.21",
57
- "css-loader": "^7.1.2",
58
- "html-webpack-plugin": "^5.6.3",
59
- "postcss": "^8.5.6",
60
- "postcss-loader": "^8.1.1",
61
- "react": "^19.1.0",
62
- "react-dom": "^19.1.0",
63
- "style-loader": "^4.0.0",
64
- "tailwindcss": "^4.1.11",
65
- "ts-loader": "^9.5.2",
66
- "typescript": "^5.8.3",
67
- "webpack": "^5.99.9",
68
- "webpack-cli": "^6.0.1",
69
- "webpack-dev-server": "^5.2.2"
48
+ "@types/react": "^18.2.45",
49
+ "@types/react-dom": "^18.2.18",
50
+ "autoprefixer": "^10.4.16",
51
+ "css-loader": "^6.8.1",
52
+ "html-webpack-plugin": "^5.5.4",
53
+ "postcss": "^8.4.32",
54
+ "postcss-loader": "^7.3.3",
55
+ "react": "^18.2.0",
56
+ "react-dom": "^18.2.0",
57
+ "style-loader": "^3.3.3",
58
+ "tailwindcss": "^3.3.6",
59
+ "ts-loader": "^9.5.1",
60
+ "typescript": "^5.3.3",
61
+ "webpack": "^5.89.0",
62
+ "webpack-cli": "^5.1.4",
63
+ "webpack-dev-server": "^4.15.1"
70
64
  }
71
65
  }