@headwai/chat-bubble 2.0.9 → 3.0.2

package/README.dev.md

@@ -39,7 +39,7 @@ npm run dev
  http://localhost:5174/
 ```
 
-7. Alternatively, build and test deployed veersion:
+7. Alternatively, build and test deployed version:
 [Build and Deploy](#build-and-deploy) and open `./test-widget.html` in a browser.
 
 ## Configuration

package/README.md

@@ -29,11 +29,14 @@ Add the Headwai Chat Bubble to the respective .html file.
             placeholderText: 'Ask your question here!', // optional - default: 'Enter your questions here'
             faviconPath: 'https://cdn.company.at/icons/favicon.svg', // optional - default: '/icons/favicon.svg'
             initialMessage: 'Hey! My name is Supporty, how can I help you?', // optional - default: 'Hey, how can I help you?'
+            chatTitle: 'Customer Support', // optional - default: 'Headwai Chat Bubble'
             userMessageBackgroundColor: '#007bff', // optional - default: '#007bff'
             aiMessageBackgroundColor: '#f1f3f4', // optional - default: '#f1f3f4'
             userMessageTextColor: '#000000', // optional - default: '#000000'
             aiMessageTextColor: '#000000', // optional - default: '#000000'
-            faviconBackgroundColor: '#667eea' // optional - default: '#667eea'
+            faviconBackgroundColor: '#667eea', // optional - default: '#667eea'
+            fontFamily: '"Inter", system-ui, sans-serif', // optional - default: 'inherit'
+            fontSize: '16px' // optional - default: 'inherit'
         };
     </script>
 </head>
@@ -80,11 +83,14 @@ For multiple instances use data attributes of the `<div>` tag for configuration
      data-chat-bubble-placeholder-text="Ask your question here!"
      data-chat-bubble-favicon-path="https://cdn.company.at/icons/favicon.svg"
      data-chat-bubble-initial-message="Hey! My name is Supporty, how can I help you?"
+     data-chat-bubble-chat-title="Customer Support"
      data-chat-bubble-user-message-background-color="#007bff"
      data-chat-bubble-ai-message-background-color="#f1f3f4"
      data-chat-bubble-user-message-text-color="#000000"
      data-chat-bubble-ai-message-text-color="#000000"
-     data-chat-bubble-favicon-background-color="#667eea">
+     data-chat-bubble-favicon-background-color="#667eea"
+     data-chat-bubble-font-family='"Inter", system-ui, sans-serif'
+     data-chat-bubble-font-size="16px">
      </div>
 
 <!-- Another chat bubble with different config -->
@@ -96,11 +102,14 @@ For multiple instances use data attributes of the `<div>` tag for configuration
      data-chat-bubble-placeholder-text="Ask about our FAQ..."
      data-chat-bubble-favicon-path="https://cdn.company.at/icons/faq-icon.svg"
      data-chat-bubble-initial-message="Hello! I can help you with frequently asked questions."
+     data-chat-bubble-chat-title="FAQ Assistant"
      data-chat-bubble-user-message-background-color="#28a745"
      data-chat-bubble-ai-message-background-color="#e9ecef"
      data-chat-bubble-user-message-text-color="#ffffff"
      data-chat-bubble-ai-message-text-color="#495057"
-     data-chat-bubble-favicon-background-color="#28a745">
+     data-chat-bubble-favicon-background-color="#28a745"
+     data-chat-bubble-font-family='"Roboto", sans-serif'
+     data-chat-bubble-font-size="14px">
      </div>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@headwai/chat-bubble@latest/dist-widget/chat-bubble.css">
@@ -189,6 +198,13 @@ An optional welcome message that appears when the chat is first opened. If not s
 initialMessage: 'Hey! My name is Supporty, how can I help you?'
 ```
 
+#### `chatTitle`
+**Type:** `string` | **Default:** `'Headwai Chat Bubble'`  
+The title displayed in the chat window header at the top of the chat interface.
+```javascript
+chatTitle: 'Customer Support'
+```
+
 ### Styling Configuration
 
 #### `userMessageBackgroundColor`
@@ -200,7 +216,7 @@ userMessageBackgroundColor: '#007bff'
 
 #### `aiMessageBackgroundColor`
 **Type:** `string` | **Default:** `'#f1f3f4'`  
-Background color for messages sent by the AI assistant. Accepts any valid CSS color value.
+Background color for messages sent by the Headwai Chat Bubble. Accepts any valid CSS color value.
 ```javascript
 aiMessageBackgroundColor: '#f1f3f4'
 ```
@@ -214,23 +230,60 @@ userMessageTextColor: '#ffffff'
 
 #### `aiMessageTextColor`
 **Type:** `string` | **Default:** `'#000000'`  
-Text color for AI assistant messages. Accepts any valid CSS color value.
+Text color for Headwai Chat Bubble messages. Accepts any valid CSS color value.
 ```javascript
 aiMessageTextColor: '#333333'
 ```
 
 #### `faviconBackgroundColor`
 **Type:** `string` | **Default:** `'#667eea'`  
-Base color used for the assistant icon gradient. This color influences the overall appearance of the AI assistant's avatar.
+Base color used for the assistant icon gradient. This color influences the overall appearance of the Headwai Chat Bubble's avatar.
 ```javascript
 faviconBackgroundColor: '#667eea'
 ```
 
+#### `fontFamily`
+**Type:** `string` | **Default:** `'inherit'`  
+Font family used for all text in the chat interface, including messages and the input field. Accepts any valid CSS font-family value.
+```javascript
+fontFamily: '"Inter", system-ui, sans-serif'
+fontFamily: '"Roboto", "Helvetica Neue", Arial, sans-serif'
+fontFamily: 'system-ui, -apple-system, sans-serif'
+```
+
+**Note:** When using Google Fonts or other web fonts, make sure to include the appropriate `<link>` tag in your HTML `<head>` section:
+```html
+<head>
+    <!-- For Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Your chat bubble configuration -->
+    <script>
+        window.HEADWAI_CHAT_BUBBLE_CONFIG = {
+            // ... other config
+            fontFamily: '"Inter", system-ui, sans-serif'
+        };
+    </script>
+</head>
+```
+
+#### `fontSize`
+**Type:** `string` | **Default:** `'inherit'`  
+Font size used for all text in the chat interface. Accepts any valid CSS font-size value.
+```javascript
+fontSize: '16px'
+fontSize: '1rem'
+fontSize: '14px'
+```
+
 ### Data Attribute Format
 
 When using data attributes for multiple chat bubbles, convert camelCase property names to kebab-case with the `data-chat-bubble-` prefix:
 
 - `apiUrl` → `data-chat-bubble-api-url`
+- `chatTitle` → `data-chat-bubble-chat-title`
 - `userMessageBackgroundColor` → `data-chat-bubble-user-message-background-color`
 - `initialMessage` → `data-chat-bubble-initial-message`
 

package/dist-widget/chat-bubble.css

@@ -1 +1 @@
-html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}main.svelte-mbs169.svelte-mbs169{font-family:sans-serif;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;overflow:hidden}.ai-assistant-icon.svelte-mbs169.svelte-mbs169{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px #00000026;transition:all .3s ease;z-index:1000}.ai-assistant-icon.svelte-mbs169.svelte-mbs169:hover{transform:scale(1.1);box-shadow:0 6px 25px #0003}.ai-assistant-icon.svelte-mbs169.svelte-mbs169:active{transform:scale(.95)}.ai-assistant-icon.svelte-mbs169 img.svelte-mbs169{width:36px;height:36px;object-fit:contain}.chat-container.svelte-mbs169.svelte-mbs169{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;animation:svelte-mbs169-slideIn .3s ease-out}.chat-container.svelte-mbs169 deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-container.svelte-mbs169 deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}@keyframes svelte-mbs169-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-mbs169.svelte-mbs169{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0}.ai-assistant-icon.svelte-mbs169.svelte-mbs169{bottom:30px;right:30px}}
+.chat-header.svelte-1dl0fot{color:#fff;padding:16px 20px;border-radius:12px 12px 0 0;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.chat-header-content.svelte-1dl0fot{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-header-icon.svelte-1dl0fot{width:24px;height:24px;object-fit:contain;flex-shrink:0}.chat-title.svelte-1dl0fot{margin:0;font-size:16px;font-weight:600;text-align:center;font-family:inherit;flex:1}.chat-header-buttons.svelte-1dl0fot{display:flex;gap:8px;align-items:center;flex-shrink:0}.chat-new-button.svelte-1dl0fot,.chat-download-button.svelte-1dl0fot,.chat-close-button.svelte-1dl0fot{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;width:24px;height:24px}.chat-new-button.svelte-1dl0fot:hover,.chat-download-button.svelte-1dl0fot:hover,.chat-close-button.svelte-1dl0fot:hover{background-color:#ffffff1a;transform:scale(1.05)}.chat-new-button.svelte-1dl0fot:active,.chat-download-button.svelte-1dl0fot:active,.chat-close-button.svelte-1dl0fot:active{background-color:#fff3;transform:scale(.95)}.chat-new-button.svelte-1dl0fot:focus,.chat-download-button.svelte-1dl0fot:focus,.chat-close-button.svelte-1dl0fot:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.chat-download-button.svelte-1dl0fot:disabled{opacity:.5;cursor:not-allowed}.chat-download-button.svelte-1dl0fot:disabled:hover{background-color:transparent;transform:none}.ai-assistant-icon.svelte-1fv6mx9.svelte-1fv6mx9{position:fixed;bottom:20px;right:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.ai-assistant-icon.svelte-1fv6mx9.svelte-1fv6mx9:hover{transform:scale(1.1);box-shadow:0 6px 8px #00000026}.ai-assistant-icon.svelte-1fv6mx9.svelte-1fv6mx9:active{transform:scale(.95);box-shadow:0 2px 4px #0000001a}.ai-assistant-icon.svelte-1fv6mx9 img.svelte-1fv6mx9{width:75%;height:75%;object-fit:contain}.chat-content.svelte-i2r2w9{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-content.svelte-i2r2w9 deep-chat{width:100%!important;height:100%!important;position:relative!important;display:block!important;top:0!important;left:0!important;box-sizing:border-box!important}.chat-content.svelte-i2r2w9 deep-chat>*{width:100%!important;height:100%!important;box-sizing:border-box!important}html,body{margin:0;padding:0;width:100%;height:100%}main.svelte-hopfzj{font-family:sans-serif;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;padding:0;overflow:hidden}.chat-container.svelte-hopfzj{position:fixed;bottom:20px;right:20px;width:400px;height:600px;border-radius:12px;box-shadow:0 8px 32px #00000026;overflow:hidden;z-index:999;background:#fff;animation:svelte-hopfzj-slideIn .3s ease-out;display:flex;flex-direction:column}@keyframes svelte-hopfzj-slideIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.chat-container.svelte-hopfzj{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;border-radius:0}}