@blumessage/react-chat 1.0.12 → 1.1.1

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 +20 -9
  2. package/package.json +20 -18
package/dist/BlumessageChat.js CHANGED
@@ -56,6 +56,8 @@ 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';
60
+ import remarkGfm from 'remark-gfm';
59
61
  import { MessageCircle, AlertTriangle, Loader2, Send, X, Maximize, Minimize2, Bot, MessageSquare, Phone, Mail, Headphones, Users, User, Heart, Star, Zap } from "lucide-react";
60
62
  // Custom CSS animations that don't depend on Tailwind
61
63
  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 +601,13 @@ export var BlumessageChat = function (_a) {
599
601
  return __assign(__assign({}, baseStyles), { bottom: '24px', right: '24px', transformOrigin: 'bottom right' });
600
602
  }
601
603
  };
604
+ var renderMessage = function (message) {
605
+ 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'
606
+ ? 'blumessage-bg-gradient-to-r blumessage-from-blue-500 blumessage-to-purple-600 blumessage-text-white'
607
+ : theme === 'light'
608
+ ? 'blumessage-bg-gray-100'
609
+ : '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, { remarkPlugins: [remarkGfm], 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));
610
+ };
602
611
  // Render chat window component
603
612
  var renderChatWindow = function () {
604
613
  var chatContent = (_jsxs("div", { className: "shadow-2xl flex flex-col overflow-hidden border ".concat(theme === 'dark'
@@ -623,15 +632,17 @@ export var BlumessageChat = function (_a) {
623
632
  ? 'hover:bg-gray-800 text-gray-400 hover:text-gray-200'
624
633
  : '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
634
  ? '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'
635
+ : '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'
636
+ ? 'text-white'
637
+ : theme === 'dark'
638
+ ? 'bg-gray-700 text-gray-100 border border-gray-600 shadow-sm'
639
+ : 'bg-white text-gray-800 border border-gray-200 shadow-sm'), style: message.role === 'user' ? { backgroundImage: primaryColor } : {}, children: [message.role === 'assistant' ? (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: message.content })) : (_jsx("div", { className: "inline-block", children: message.content })), showTimestamps && (_jsx("div", { className: "text-[10px] mt-1 opacity-75 ".concat(message.role === 'user'
640
+ ? 'text-white/75'
641
+ : theme === 'dark'
642
+ ? 'text-gray-400'
643
+ : 'text-gray-500'), style: {
644
+ textAlign: message.role === 'user' ? 'right' : 'left'
645
+ }, 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
646
  ? 'bg-gray-700 text-gray-100 border border-gray-600'
636
647
  : '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
648
  ? '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.12",
3
+ "version": "1.1.1",
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>",
@@ -41,24 +41,26 @@
41
41
  "react-dom": ">=18.0.0"
42
42
  },
43
43
  "dependencies": {
44
- "lucide-react": "^0.469.0"
44
+ "lucide-react": "^0.294.0",
45
+ "react-markdown": "^9.0.1",
46
+ "remark-gfm": "^4.0.1"
45
47
  },
46
48
  "devDependencies": {
47
- "@types/react": "^19.1.8",
48
- "@types/react-dom": "^19.1.6",
49
- "autoprefixer": "^10.4.21",
50
- "css-loader": "^7.1.2",
51
- "html-webpack-plugin": "^5.6.3",
52
- "postcss": "^8.5.6",
53
- "postcss-loader": "^8.1.1",
54
- "react": "^19.1.0",
55
- "react-dom": "^19.1.0",
56
- "style-loader": "^4.0.0",
57
- "tailwindcss": "^4.1.11",
58
- "ts-loader": "^9.5.2",
59
- "typescript": "^5.8.3",
60
- "webpack": "^5.99.9",
61
- "webpack-cli": "^6.0.1",
62
- "webpack-dev-server": "^5.2.2"
49
+ "@types/react": "^18.2.45",
50
+ "@types/react-dom": "^18.2.18",
51
+ "autoprefixer": "^10.4.16",
52
+ "css-loader": "^6.8.1",
53
+ "html-webpack-plugin": "^5.5.4",
54
+ "postcss": "^8.4.32",
55
+ "postcss-loader": "^7.3.3",
56
+ "react": "^18.2.0",
57
+ "react-dom": "^18.2.0",
58
+ "style-loader": "^3.3.3",
59
+ "tailwindcss": "^3.3.6",
60
+ "ts-loader": "^9.5.1",
61
+ "typescript": "^5.3.3",
62
+ "webpack": "^5.89.0",
63
+ "webpack-cli": "^5.1.4",
64
+ "webpack-dev-server": "^4.15.1"
63
65
  }
64
66
  }