@schmitech/chatbot-widget 0.4.8 → 0.4.9
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.
- package/dist/chatbot-widget.bundle.js +16 -18
- package/dist/chatbot-widget.css +1 -1
- package/dist/chatbot-widget.es.js +937 -936
- package/dist/chatbot-widget.umd.js +15 -17
- package/dist/shared/styles.d.ts +2 -2
- package/package.json +1 -1
package/dist/shared/styles.d.ts
CHANGED
|
@@ -51,7 +51,7 @@ export declare let CHAT_CONSTANTS: {
|
|
|
51
51
|
/**
|
|
52
52
|
* Global CSS styles for the ChatWidget component
|
|
53
53
|
*/
|
|
54
|
-
export declare const CHAT_WIDGET_STYLES = "\n
|
|
54
|
+
export declare const CHAT_WIDGET_STYLES = "\n body, button, input, textarea {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n }\n \n /* Complete focus ring removal - covers all browsers and scenarios */\n textarea,\n textarea:focus,\n textarea:focus-visible,\n input,\n input:focus,\n input:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n border-color: inherit !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n -webkit-tap-highlight-color: transparent !important;\n }\n \n /* Alternative: Uncomment for subtle light focus ring instead of complete removal */\n /*\n textarea:focus,\n textarea:focus-visible {\n outline: 2px solid rgba(203, 213, 225, 0.4) !important;\n outline-offset: -1px !important;\n box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.2) !important;\n }\n */\n \n /* Remove webkit/safari specific styling */\n textarea::-webkit-input-placeholder,\n input::-webkit-input-placeholder {\n -webkit-appearance: none;\n }\n \n /* Ensure buttons also don't show focus rings */\n button:focus,\n button:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n }\n\n /* Enhanced animations for modern feel */\n @keyframes slideInUp {\n 0% { \n opacity: 0; \n transform: translateY(20px) scale(0.95); \n }\n 100% { \n opacity: 1; \n transform: translateY(0) scale(1); \n }\n }\n\n @keyframes slideOutDown {\n 0% { \n opacity: 1; \n transform: translateY(0) scale(1); \n }\n 100% { \n opacity: 0; \n transform: translateY(20px) scale(0.95); \n }\n }\n\n .animate-slide-in-up {\n animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n .animate-slide-out-down {\n animation: slideOutDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes pulseGlow {\n 0%, 100% { \n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n }\n 50% { \n box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);\n }\n }\n\n .animate-pulse-glow {\n animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n }\n\n @keyframes messageEntry {\n 0% { \n opacity: 0; \n transform: translateY(10px) scale(0.98);\n }\n 100% { \n opacity: 1; \n transform: translateY(0) scale(1);\n }\n }\n\n .animate-message-entry {\n animation: messageEntry 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n\n @keyframes buttonHover {\n 0% { transform: translateY(0) scale(1); }\n 100% { transform: translateY(-2px) scale(1.05); }\n }\n\n .animate-button-hover:hover {\n animation: buttonHover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n \n @keyframes fadeInOut {\n 0% { opacity: 0; transform: translateY(4px); }\n 20% { opacity: 1; transform: translateY(0); }\n 80% { opacity: 1; transform: translateY(0); }\n 100% { opacity: 0; transform: translateY(-4px); }\n }\n .animate-fade-in-out {\n animation: fadeInOut 2s ease-in-out forwards;\n }\n \n @keyframes bounce-gentle {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-8px); }\n }\n .animate-bounce-gentle {\n animation: bounce-gentle 3s ease-in-out infinite;\n animation-delay: 2s;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 33% { transform: translateY(-3px) rotate(1deg); }\n 66% { transform: translateY(2px) rotate(-1deg); }\n }\n .animate-float {\n animation: float 6s ease-in-out infinite;\n }\n \n @keyframes dotBlink {\n 0%, 50%, 100% { opacity: 0.3; }\n 25%, 75% { opacity: 1; }\n }\n .animate-dots {\n display: inline-flex;\n margin-left: 4px;\n }\n .animate-dots .dot {\n font-size: 1.2em;\n line-height: 0.5;\n opacity: 0.3;\n animation: dotBlink 1.6s infinite;\n color: #6b7280;\n }\n .animate-dots .dot:nth-child(1) {\n animation-delay: 0s;\n }\n .animate-dots .dot:nth-child(2) {\n animation-delay: 0.3s;\n }\n .animate-dots .dot:nth-child(3) {\n animation-delay: 0.6s;\n }\n\n /* Glassmorphism effects */\n .glass-effect {\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n background: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }\n\n .glass-effect-dark {\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n background: rgba(30, 41, 59, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.1);\n }\n\n /* Custom scrollbar */\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-track {\n background: rgba(0, 0, 0, 0.05);\n border-radius: 3px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n transition: background 0.2s ease;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.3);\n }\n\n /* Enhanced shadows */\n .shadow-elegant {\n box-shadow: \n 0 10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 8px 10px -6px rgba(0, 0, 0, 0.1),\n 0 0 0 1px rgba(255, 255, 255, 0.05);\n }\n\n .shadow-soft {\n box-shadow: \n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n\n .shadow-floating {\n box-shadow: \n 0 20px 25px -5px rgba(0, 0, 0, 0.1),\n 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n \n .prose {\n max-width: 100%;\n }\n \n .prose > * {\n margin-top: 0 !important;\n margin-bottom: 0.5em !important;\n }\n \n .prose p {\n margin: 0 0 0.5em 0 !important;\n padding: 0;\n line-height: 1.6;\n }\n \n .prose p:last-child {\n margin-bottom: 0 !important;\n }\n \n .prose ul,\n .prose ol {\n margin-top: 0.5em !important;\n margin-bottom: 0.5em !important;\n padding-left: 1.5em !important;\n }\n \n .prose li {\n margin-bottom: 0.25em !important;\n padding-left: 0.25em !important;\n line-height: 1.5;\n }\n \n .prose li p {\n margin: 0 !important;\n }\n \n .prose li + li {\n margin-top: 0.1em !important;\n }\n \n .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {\n margin-top: 1em !important;\n margin-bottom: 0.5em !important;\n font-weight: 600;\n }\n\n /* Button enhancements */\n .btn-modern {\n position: relative;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .btn-modern::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .btn-modern:hover::before {\n opacity: 1;\n }\n\n /* Input enhancements */\n .input-modern {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .input-modern:focus {\n transform: translateY(-1px);\n }\n ";
|
|
55
55
|
/**
|
|
56
56
|
* Helper functions for responsive window dimensions
|
|
57
57
|
*/
|
|
@@ -60,7 +60,7 @@ export declare const getResponsiveMinWidth: (windowWidth: number) => string;
|
|
|
60
60
|
/**
|
|
61
61
|
* Font family constant for consistent typography
|
|
62
62
|
*/
|
|
63
|
-
export declare const FONT_FAMILY = "
|
|
63
|
+
export declare const FONT_FAMILY = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif";
|
|
64
64
|
/**
|
|
65
65
|
* Character count styling helper
|
|
66
66
|
*/
|