lisichatbot 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lisichatbot",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/index.js

@@ -544,151 +544,24 @@ function injectStyles() {
     const style = document.createElement('style');
     style.id = styleId;
     style.textContent = `
-        .cf-wrapper {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            max-height: 600px;
-            border: 1px solid #e5e5e5;
-            border-radius: 8px;
-            overflow: hidden;
-            background: #f9f9f9;
+        /* Bot message spacing */
+        [data-chat-element="bot-message-wrapper"] {
+            margin-bottom: 16px;
         }
 
-        .cf-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-        }
-
-        .cf-message {
-            margin-bottom: 15px;
-            animation: cfSlideIn 0.3s ease;
-            position: relative;
-        }
-
-        @keyframes cfSlideIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .cf-bot {
-            text-align: left;
-        }
-
-        .cf-user {
-            text-align: right;
-        }
-
-        .cf-edit-icon {
-            position: absolute;
-            right: -30px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-size: 16px;
-            opacity: 0;
-            transition: opacity 0.2s ease;
-            padding: 4px 8px;
-        }
-
-        .cf-message:hover .cf-edit-icon {
-            opacity: 1;
-        }
-
-        .cf-edit-icon:hover {
-            transform: translateY(-50%) scale(1.2);
-        }
-
-        .cf-message-content {
-            display: inline-block;
-            padding: 12px 16px;
-            border-radius: 8px;
-            max-width: 80%;
-        }
-
-        .cf-bot .cf-message-content {
-            background: white;
-            border: 1px solid #e5e5e5;
+        /* User message spacing */
+        [data-chat-element="user-message-wrapper"] {
+            margin-bottom: 16px;
         }
 
-        .cf-user .cf-message-content {
-            background: #667eea;
-            color: white;
+        /* Options wrapper spacing */
+        [data-chat-element="options-wrapper"] {
+            margin-bottom: 20px;
         }
 
-        .cf-options {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            margin-top: 10px;
-        }
-
-        .cf-option {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 14px 16px;
-            background: white;
-            border: 2px solid #e5e5e5;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .cf-option:hover {
-            border-color: #667eea;
-            transform: translateX(4px);
-        }
-
-        .cf-option.cf-checked {
-            border-color: #667eea;
-            color: white;
-        }
-
-        .cf-tick {
-            font-weight: bold;
-            font-size: 18px;
-            min-width: 20px;
-        }
-
-        .cf-option-text {
-            flex: 1;
-        }
-
-        .cf-bottom {
-            padding: 16px;
-            background: white;
-            border-top: 1px solid #e5e5e5;
-        }
-
-        .cf-next-btn {
-            width: 100%;
-            padding: 14px 24px;
-            background: #667eea;
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-
-        .cf-next-btn:not(:disabled):hover {
-            background: #5568d3;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-        }
-
-        .cf-next-btn:disabled {
-            cursor: not-allowed;
+        /* Messages container padding */
+        [data-chat-element="messages-container"] {
+            padding: 20px;
         }
     `;