nerdagent-chat-widget 1.0.0

package/README.md

@@ -0,0 +1,257 @@
+# NerdAgent Chat Widget 💬
+
+A universal, customizable chat widget built with Stencil that works seamlessly across Angular, React, Vue, and vanilla JavaScript applications.
+
+[![npm version](https://badge.fury.io/js/nerdagent-chat-widget.svg)](https://badge.fury.io/js/nerdagent-chat-widget)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🌐 **Universal**: Works with Angular, React, Vue, and vanilla JS
+- 🎨 **Customizable**: Full theming and configuration options
+- 📱 **Responsive**: Mobile-friendly design
+- ⚡ **Lightweight**: Optimized bundle sizes
+- 🔧 **TypeScript**: Full TypeScript support
+- 🎯 **Framework-Specific**: Dedicated packages for each framework
+- 🚀 **Modern**: Built with Web Components using Stencil
+
+## 🚀 Quick Start
+
+### Vanilla JavaScript / HTML
+
+```html
+<script src="https://unpkg.com/nerdagent-chat-widget/dist/nerdagent-chat-widget/nerdagent-chat-widget.esm.js" type="module"></script>
+
+<nerd-chat-widget
+  agent-name="Support Agent"
+  primary-color="#2d3e50"
+  accent-color="#4e8cff">
+</nerd-chat-widget>
+```
+
+### Angular
+
+```bash
+npm install @nerdagent/chat-widget-angular
+```
+
+```typescript
+import { NerdChatWidgetModule } from '@nerdagent/chat-widget-angular';
+
+@NgModule({
+  imports: [NerdChatWidgetModule],
+})
+export class AppModule {}
+```
+
+```html
+<nerd-chat-widget
+  agentName="Support Agent"
+  primaryColor="#2d3e50"
+  (messageSent)="onMessageSent($event)">
+</nerd-chat-widget>
+```
+
+### React
+
+```bash
+npm install @nerdagent/chat-widget-react
+```
+
+```jsx
+import { NerdChatWidget } from '@nerdagent/chat-widget-react';
+
+function App() {
+  return (
+    <NerdChatWidget
+      agentName="Support Agent"
+      primaryColor="#2d3e50"
+      onMessageSent={(event) => console.log(event)}
+    />
+  );
+}
+```
+
+### Vue
+
+```bash
+npm install @nerdagent/chat-widget-vue
+```
+
+```vue
+<template>
+  <NerdChatWidget
+    agent-name="Support Agent"
+    primary-color="#2d3e50"
+    @messageSent="onMessageSent"
+  />
+</template>
+
+<script setup>
+import { NerdChatWidget } from '@nerdagent/chat-widget-vue';
+</script>
+```
+
+## 📦 Packages
+
+| Package | Description | Size |
+|---------|-------------|------|
+| [`nerdagent-chat-widget`](https://www.npmjs.com/package/nerdagent-chat-widget) | Core Stencil component | ~50KB |
+| [`@nerdagent/chat-widget-angular`](https://www.npmjs.com/package/@nerdagent/chat-widget-angular) | Angular wrapper | ~5KB |
+| [`@nerdagent/chat-widget-react`](https://www.npmjs.com/package/@nerdagent/chat-widget-react) | React wrapper | ~3KB |
+| [`@nerdagent/chat-widget-vue`](https://www.npmjs.com/package/@nerdagent/chat-widget-vue) | Vue wrapper | ~4KB |
+
+## 🎨 Configuration
+
+### Props
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `agentName` | `string` | `'Support Agent'` | Name of the chat agent |
+| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
+| `primaryColor` | `string` | `'#2d3e50'` | Primary theme color |
+| `accentColor` | `string` | `'#4e8cff'` | Accent color for buttons |
+| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial message from agent |
+| `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
+| `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
+| `width` | `string` | `'350'` | Widget width in pixels |
+| `height` | `string` | `'500'` | Widget height in pixels |
+| `showMinimizeButton` | `boolean` | `true` | Show/hide minimize button |
+| `showTimestamps` | `boolean` | `true` | Show/hide message timestamps |
+| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
+| `enableSpeech` | `boolean` | `false` | Enable speech input |
+| `showPoweredBy` | `boolean` | `true` | Show/hide "Powered by" footer |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `messageSent` | `{ message: string; timestamp: Date }` | Emitted when a message is sent |
+| `widgetOpened` | `void` | Emitted when the widget is opened |
+| `widgetClosed` | `void` | Emitted when the widget is closed |
+
+### Types
+
+```typescript
+type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+```
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 16+
+- npm or yarn
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/nerdagent/chat-widget.git
+cd chat-widget
+
+# Install dependencies
+npm install
+
+# Build the core component
+npm run build
+
+# Start development server
+npm start
+```
+
+### Building Framework Packages
+
+```bash
+# Build all packages
+npm run build:packages
+
+# Build individual packages
+cd packages/angular && npm run build
+cd packages/react && npm run build
+cd packages/vue && npm run build
+```
+
+### Testing
+
+```bash
+# Run tests
+npm test
+
+# Test with examples
+cd examples/angular-chat-widget-test && npm start
+cd examples/react-chat-widget-test && npm start
+cd examples/vue-chat-widget-test && npm start
+```
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────┐
+│                Core Stencil                 │
+│            (Web Component)                  │
+├─────────────────────────────────────────────┤
+│  Angular    │   React    │    Vue    │ JS   │
+│  Wrapper    │  Wrapper   │  Wrapper  │      │
+└─────────────────────────────────────────────┘
+```
+
+The architecture consists of:
+
+1. **Core Stencil Component**: Universal Web Component
+2. **Framework Wrappers**: Native integrations for each framework
+3. **Build System**: Automated builds and publishing
+4. **Type Definitions**: Full TypeScript support
+
+## 📚 Examples
+
+Check out the `examples/` directory for complete implementation examples:
+
+- [Angular Example](./examples/angular-chat-widget-test/)
+- [React Example](./examples/react-chat-widget-test/)
+- [Vue Example](./examples/vue-chat-widget-test/)
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Follow TypeScript best practices
+- Add tests for new features
+- Update documentation
+- Ensure all examples work
+- Test across all supported frameworks
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🆘 Support
+
+- 📧 **Email**: support@nerdagent.ai
+- 🐛 **Issues**: [GitHub Issues](https://github.com/nerdagent/chat-widget/issues)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/nerdagent/chat-widget/discussions)
+- 📖 **Documentation**: [Full Documentation](https://docs.nerdagent.ai/chat-widget)
+
+## 🗺️ Roadmap
+
+- [ ] **v1.1**: Voice messaging support
+- [ ] **v1.2**: File upload functionality
+- [ ] **v1.3**: Multi-language support
+- [ ] **v1.4**: Custom themes marketplace
+- [ ] **v2.0**: Real-time backend integration
+
+## ⭐ Show Your Support
+
+Give a ⭐️ if this project helped you!
+
+---
+
+<p align="center">
+  Made with ❤️ by the <a href="https://nerdagent.ai">NerdAgent</a> team
+</p>

package/dist/angular/index.d.ts

@@ -0,0 +1,38 @@
+/* NerdagentChatWidget custom elements */
+export { ChatWidget as NerdChatWidget } from '../types/components/chat-widget/chat-widget';
+export { defineCustomElement as defineCustomElementNerdChatWidget } from './nerd-chat-widget';
+
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/angular/index.js

@@ -0,0 +1,5 @@
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { C as ChatWidget, NerdChatWidget, d as defineCustomElement, defineCustomElement as defineCustomElementNerdChatWidget } from './nerd-chat-widget.js';
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/angular/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/angular/nerd-chat-widget.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NerdChatWidget extends Components.NerdChatWidget, HTMLElement {}
+export const NerdChatWidget: {
+    prototype: NerdChatWidget;
+    new (): NerdChatWidget;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/angular/nerd-chat-widget.js

@@ -0,0 +1,289 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const chatWidgetScss = ":host {\n  --primary-color: #2d3e50;\n  --accent-color: #4e8cff;\n  --widget-width: 350px;\n  --widget-height: 500px;\n  --font-family: 'Segoe UI', Arial, sans-serif;\n  \n  position: fixed;\n  z-index: 10000;\n  font-family: var(--font-family);\n}\n\n.chat-widget {\n  position: fixed !important;\n  width: var(--widget-width);\n  height: var(--widget-height);\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n  overflow: hidden;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n\n  &.position-bottom-right {\n    bottom: 20px !important;\n    right: 20px !important;\n    top: auto !important;\n    left: auto !important;\n  }\n\n  &.position-bottom-left {\n    bottom: 20px !important;\n    left: 20px !important;\n    top: auto !important;\n    right: auto !important;\n  }\n\n  &.position-top-right {\n    top: 20px !important;\n    right: 20px !important;\n    bottom: auto !important;\n    left: auto !important;\n  }\n\n  &.position-top-left {\n    top: 20px !important;\n    left: 20px !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n\n  &.minimized {\n    width: 60px !important;\n    height: 60px !important;\n    border-radius: 50% !important;\n    cursor: pointer;\n\n    .chat-header,\n    .messages-container,\n    .input-container,\n    .tabs,\n    .powered-by {\n      display: none;\n    }\n\n    .minimize-icon {\n      display: flex !important;\n    }\n  }\n\n  &.hidden {\n    display: none !important;\n  }\n}\n\n.chat-header {\n  background: var(--primary-color);\n  color: white;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  .agent-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    .agent-avatar {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      object-fit: cover;\n    }\n\n    .agent-details {\n      h4 {\n        margin: 0;\n        font-size: 1.1em;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.95em;\n        opacity: 0.8;\n      }\n    }\n  }\n\n  .controls {\n    display: flex;\n    gap: 6px;\n\n    .control-btn {\n      background: rgba(0, 0, 0, 0.1);\n      border: none;\n      color: #fff;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.1em;\n      transition: background 0.2s;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.2);\n      }\n\n      &.close-btn {\n        &:hover {\n          background: rgba(255, 0, 0, 0.3);\n        }\n      }\n    }\n  }\n}\n\n.messages-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 18px 16px 12px 16px;\n  background: #f7f7f7;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  .message {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n\n    &.user {\n      flex-direction: row-reverse;\n    }\n\n    .message-avatar {\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      object-fit: cover;\n      border: 1px solid #eee;\n    }\n\n    .message-content {\n      max-width: 70%;\n\n      .message-text {\n        padding: 10px 14px;\n        border-radius: 10px;\n        font-size: 1em;\n        line-height: 1.4;\n      }\n\n      .message-time {\n        font-size: 11px;\n        opacity: 0.6;\n        margin-top: 4px;\n      }\n    }\n\n    &.agent .message-content .message-text {\n      background: #eafbe7;\n      color: #222;\n      border-radius: 10px 10px 10px 0;\n    }\n\n    &.user .message-content .message-text {\n      background: #e6f4ff;\n      color: #222;\n      border-radius: 10px 10px 0 10px;\n    }\n  }\n\n  .typing-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    font-size: 12px;\n    color: #666;\n    font-style: italic;\n\n    .typing-dots {\n      display: flex;\n      gap: 2px;\n\n      .dot {\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        background: #666;\n        animation: typing 1.4s infinite;\n\n        &:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        &:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n      }\n    }\n  }\n}\n\n.input-container {\n  background: #fff;\n  border-top: 1px solid #eee;\n  padding: 10px 12px 8px 12px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n\n  .message-input {\n    flex: 1;\n    border: 1px solid #e0e0e0;\n    border-radius: 20px;\n    padding: 8px 14px;\n    font-size: 1em;\n    outline: none;\n    background: #fafbfc;\n    font-family: var(--font-family);\n\n    &:focus {\n      border-color: var(--accent-color);\n    }\n  }\n\n  .send-btn {\n    background: var(--primary-color);\n    color: #fff;\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);\n    transition: opacity 0.2s;\n    position: relative;\n\n    &:hover {\n      opacity: 0.9;\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n\n  .feature-btn {\n    background: var(--primary-color);\n    color: var(--accent-color);\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    position: relative;\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n}\n\n.tabs {\n  background: #f8f8f8;\n  border-top: 1.5px solid #e0e7ff;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  height: 48px;\n  flex-shrink: 0;\n\n  .tab {\n    flex: 1;\n    text-align: center;\n    padding: 7px 0;\n    color: var(--primary-color);\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.2s;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 2px;\n\n    &:hover {\n      background: rgba(0, 0, 0, 0.05);\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1.1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1.1em;\n      display: block;\n    }\n\n    span:not(.fallback-icon) {\n      font-size: 0.91em;\n    }\n  }\n}\n\n.powered-by {\n  text-align: center;\n  font-size: 0.95em;\n  color: #aaa;\n  padding: 7px 0 3px 0;\n  background: #fff;\n  border-top: 1px solid #f3f3f3;\n  flex-shrink: 0;\n\n  img {\n    height: 18px;\n    vertical-align: middle;\n    margin-right: 6px;\n    opacity: 0.85;\n    object-fit: contain;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}\n\n.minimize-icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: 24px;\n  color: white;\n  background: var(--primary-color);\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n@keyframes typing {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-10px);\n  }\n}\n\n// Mobile responsiveness\n@media (max-width: 768px) {\n  .chat-widget {\n    width: 100% !important;\n    height: 100% !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    border-radius: 0 !important;\n\n    .messages-container {\n      height: calc(100vh - 200px);\n    }\n  }\n}";
+
+const ChatWidget = /*@__PURE__*/ proxyCustomElement(class ChatWidget extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.messageSent = createEvent(this, "messageSent", 7);
+        this.widgetOpened = createEvent(this, "widgetOpened", 7);
+        this.widgetClosed = createEvent(this, "widgetClosed", 7);
+        // Configuration props
+        this.config = {};
+        this.agentName = 'Support Agent';
+        this.agentRole = 'Customer Support';
+        this.agentAvatar = 'https://ui-avatars.com/api/?name=Agent&background=2d3e50&color=ffffff&size=44';
+        this.primaryColor = '#2d3e50';
+        this.accentColor = '#4e8cff';
+        this.welcomeMessage = 'Hi! How can I help you today?';
+        this.position = 'bottom-right';
+        this.showMinimizeButton = true;
+        this.enableFileUpload = false;
+        this.enableSpeech = false;
+        this.showTimestamps = true;
+        this.apiEndpoint = '';
+        this.apiKey = '';
+        this.placeholderText = 'Type your message...';
+        this.thankYouMessage = 'Thank you for chatting with us!';
+        this.showPoweredBy = true;
+        this.poweredByLogo = 'https://innovationincubator.com/wp-content/uploads/2023/05/Innovation-Incubator-logo.png';
+        this.poweredByText = 'Powered by';
+        this.poweredByBrand = 'NerdAgent';
+        this.poweredByColor = '#4e8cff';
+        this.width = 350;
+        this.height = 500;
+        this.fontFamily = 'Segoe UI, Arial, sans-serif';
+        // State
+        this.messages = [];
+        this.isMinimized = false;
+        this.isTyping = false;
+        this.inputValue = '';
+        this.isChatOpen = true;
+        this.currentPosition = 'bottom-right';
+        this.messageIdCounter = 0;
+    }
+    componentDidLoad() {
+        // Initialize position
+        this.currentPosition = this.position;
+        // Load Font Awesome if not already loaded
+        this.loadFontAwesome();
+        // Add welcome message
+        if (this.getConfig().welcomeMessage) {
+            setTimeout(() => {
+                this.addMessage(this.getConfig().welcomeMessage, false);
+            }, 500);
+        }
+    }
+    configChanged() {
+        // React to config changes - Stencil automatically re-renders when @Prop changes
+        // No need to manually trigger re-render
+    }
+    positionChanged() {
+        // Force re-render when position changes
+        console.log('Position changed to:', this.position);
+        this.currentPosition = this.position;
+        // Debug: Check what styles are applied
+        setTimeout(() => {
+            const widgetEl = this.el.shadowRoot.querySelector('.chat-widget');
+            if (widgetEl) {
+                console.log('Widget classes:', widgetEl.className);
+                console.log('Widget inline styles:', widgetEl.style.cssText);
+                console.log('Widget computed styles:', {
+                    position: window.getComputedStyle(widgetEl).position,
+                    top: window.getComputedStyle(widgetEl).top,
+                    right: window.getComputedStyle(widgetEl).right,
+                    bottom: window.getComputedStyle(widgetEl).bottom,
+                    left: window.getComputedStyle(widgetEl).left
+                });
+            }
+        }, 100);
+    }
+    getConfig() {
+        return Object.assign({ agentName: this.agentName, agentRole: this.agentRole, agentAvatar: this.agentAvatar, primaryColor: this.primaryColor, accentColor: this.accentColor, welcomeMessage: this.welcomeMessage, position: this.position, showMinimizeButton: this.showMinimizeButton, enableFileUpload: this.enableFileUpload, enableSpeech: this.enableSpeech, showTimestamps: this.showTimestamps, apiEndpoint: this.apiEndpoint, apiKey: this.apiKey, placeholderText: this.placeholderText, thankYouMessage: this.thankYouMessage, showPoweredBy: this.showPoweredBy, poweredByLogo: this.poweredByLogo, poweredByText: this.poweredByText, poweredByBrand: this.poweredByBrand, poweredByColor: this.poweredByColor, width: this.width, height: this.height, fontFamily: this.fontFamily }, this.config);
+    }
+    loadFontAwesome() {
+        if (!document.getElementById('fa-cdn-stencil')) {
+            const link = document.createElement('link');
+            link.id = 'fa-cdn-stencil';
+            link.rel = 'stylesheet';
+            link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';
+            link.crossOrigin = 'anonymous';
+            document.head.appendChild(link);
+            console.log('Loading FontAwesome...');
+        }
+        else {
+            console.log('FontAwesome already loaded');
+        }
+    }
+    addMessage(text, isUser = false) {
+        const message = {
+            id: `msg-${++this.messageIdCounter}`,
+            text,
+            isUser,
+            timestamp: new Date()
+        };
+        this.messages = [...this.messages, message];
+    }
+    async sendMessage() {
+        const text = this.inputValue.trim();
+        if (!text)
+            return;
+        this.addMessage(text, true);
+        this.inputValue = '';
+        // Emit event
+        this.messageSent.emit({ message: text, widget: this.el });
+        // Handle API or simulate response
+        const config = this.getConfig();
+        if (config.apiEndpoint) {
+            await this.sendToAPI(text);
+        }
+        else {
+            this.simulateResponse();
+        }
+    }
+    async sendToAPI(message) {
+        const config = this.getConfig();
+        this.isTyping = true;
+        try {
+            const response = await fetch(config.apiEndpoint, {
+                method: 'POST',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, (config.apiKey && { 'Authorization': `Bearer ${config.apiKey}` })),
+                body: JSON.stringify({
+                    message,
+                    timestamp: new Date().toISOString(),
+                    sessionId: this.getSessionId()
+                })
+            });
+            const data = await response.json();
+            this.isTyping = false;
+            if (data.response) {
+                this.addMessage(data.response, false);
+            }
+        }
+        catch (error) {
+            this.isTyping = false;
+            this.addMessage('Sorry, I encountered an error. Please try again.', false);
+        }
+    }
+    simulateResponse() {
+        const responses = [
+            "Thanks for your message! How can I help you further?",
+            "I understand. Let me assist you with that.",
+            "That's a great question! Let me help you.",
+            "I'm here to help! Could you provide more details?"
+        ];
+        this.isTyping = true;
+        setTimeout(() => {
+            this.isTyping = false;
+            const response = responses[Math.floor(Math.random() * responses.length)];
+            this.addMessage(response, false);
+        }, 1500);
+    }
+    toggleMinimize() {
+        this.isMinimized = !this.isMinimized;
+        if (this.isMinimized) {
+            this.widgetClosed.emit({ widget: this.el });
+        }
+        else {
+            this.widgetOpened.emit({ widget: this.el });
+        }
+    }
+    closeWidget() {
+        this.isChatOpen = false;
+        this.widgetClosed.emit({ widget: this.el });
+    }
+    openWidget() {
+        this.isChatOpen = true;
+        this.isMinimized = false;
+        this.widgetOpened.emit({ widget: this.el });
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter') {
+            this.sendMessage();
+        }
+    }
+    handleInputChange(event) {
+        const target = event.target;
+        this.inputValue = target.value;
+    }
+    getSessionId() {
+        let sessionId = localStorage.getItem('nerd-chat-session');
+        if (!sessionId) {
+            sessionId = 'session-' + Math.random().toString(36).substr(2, 9);
+            localStorage.setItem('nerd-chat-session', sessionId);
+        }
+        return sessionId;
+    }
+    formatTime(date) {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    render() {
+        const config = this.getConfig();
+        console.log('Rendering with position:', this.currentPosition);
+        // Get position styles directly
+        const getPositionStyles = () => {
+            switch (this.currentPosition) {
+                case 'bottom-left':
+                    return { bottom: '20px', left: '20px', top: 'auto', right: 'auto' };
+                case 'top-right':
+                    return { top: '20px', right: '20px', bottom: 'auto', left: 'auto' };
+                case 'top-left':
+                    return { top: '20px', left: '20px', bottom: 'auto', right: 'auto' };
+                case 'bottom-right':
+                default:
+                    return { bottom: '20px', right: '20px', top: 'auto', left: 'auto' };
+            }
+        };
+        const widgetClasses = {
+            'chat-widget': true,
+            'minimized': this.isMinimized,
+            'hidden': !this.isChatOpen
+        };
+        return (h(Host, null, h("div", { class: widgetClasses, style: Object.assign({ '--primary-color': config.primaryColor || '#2d3e50', '--accent-color': config.accentColor || '#4e8cff', '--widget-width': `${config.width || 350}px`, '--widget-height': `${config.height || 500}px`, '--font-family': config.fontFamily || 'Segoe UI, Arial, sans-serif' }, getPositionStyles()) }, h("div", { class: "chat-header" }, h("div", { class: "agent-info" }, h("img", { src: config.agentAvatar, alt: "Agent", class: "agent-avatar" }), h("div", { class: "agent-details" }, h("h4", null, config.agentName), h("p", null, config.agentRole))), h("div", { class: "controls" }, config.showMinimizeButton && (h("button", { class: "control-btn minimize-btn", onClick: () => this.toggleMinimize(), title: this.isMinimized ? 'Maximize' : 'Minimize' }, this.isMinimized ? '🔼' : '🔽')), h("button", { class: "control-btn close-btn", onClick: () => this.closeWidget(), title: "Close" }, "\u00D7"))), h("div", { class: "messages-container" }, this.messages.map(message => (h("div", { key: message.id, class: `message ${message.isUser ? 'user' : 'agent'}` }, h("img", { src: message.isUser ? 'https://ui-avatars.com/api/?name=User&background=4e8cff&color=ffffff&size=28' : config.agentAvatar, alt: message.isUser ? 'User' : 'Agent', class: "message-avatar" }), h("div", { class: "message-content" }, h("div", { class: "message-text" }, message.text), config.showTimestamps && (h("div", { class: "message-time" }, this.formatTime(message.timestamp))))))), this.isTyping && (h("div", { class: "typing-indicator" }, h("span", null, config.agentName, " is typing"), h("div", { class: "typing-dots" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))))), h("div", { class: "input-container" }, h("input", { type: "text", class: "message-input", placeholder: config.placeholderText || 'Type your message...', value: this.inputValue, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e) }), h("button", { class: "send-btn", onClick: () => this.sendMessage() }, h("i", { class: "fas fa-paper-plane" }), h("span", { class: "fallback-icon" }, "\u27A4")), config.enableFileUpload && (h("button", { class: "feature-btn file-upload" }, h("i", { class: "fas fa-paperclip" }), h("span", { class: "fallback-icon" }, "\uD83D\uDCCE"))), config.enableSpeech && (h("button", { class: "feature-btn speech" }, h("i", { class: "fas fa-microphone" }), h("span", { class: "fallback-icon" }, "\uD83C\uDFA4")))), h("div", { class: "tabs" }, h("div", { class: "tab active" }, h("i", { class: "fas fa-comment-dots" }), h("span", null, "Chat")), h("div", { class: "tab" }, h("i", { class: "fas fa-microphone" }), h("span", null, "Voice")), h("div", { class: "tab" }, h("i", { class: "fas fa-clock" }), h("span", null, "History"))), config.showPoweredBy && (h("div", { class: "powered-by" }, h("img", { src: config.poweredByLogo, alt: "Powered By Logo" }), config.poweredByText, " ", h("span", { style: { color: config.poweredByColor } }, config.poweredByBrand))), h("div", { class: "minimize-icon", onClick: () => this.isChatOpen ? this.toggleMinimize() : this.openWidget() }, "\uD83D\uDCAC"))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "config": ["configChanged"],
+        "position": ["positionChanged"]
+    }; }
+    static get style() { return chatWidgetScss; }
+}, [257, "nerd-chat-widget", {
+        "config": [16],
+        "agentName": [1, "agent-name"],
+        "agentRole": [1, "agent-role"],
+        "agentAvatar": [1, "agent-avatar"],
+        "primaryColor": [1, "primary-color"],
+        "accentColor": [1, "accent-color"],
+        "welcomeMessage": [1, "welcome-message"],
+        "position": [1],
+        "showMinimizeButton": [4, "show-minimize-button"],
+        "enableFileUpload": [4, "enable-file-upload"],
+        "enableSpeech": [4, "enable-speech"],
+        "showTimestamps": [4, "show-timestamps"],
+        "apiEndpoint": [1, "api-endpoint"],
+        "apiKey": [1, "api-key"],
+        "placeholderText": [1, "placeholder-text"],
+        "thankYouMessage": [1, "thank-you-message"],
+        "showPoweredBy": [4, "show-powered-by"],
+        "poweredByLogo": [1, "powered-by-logo"],
+        "poweredByText": [1, "powered-by-text"],
+        "poweredByBrand": [1, "powered-by-brand"],
+        "poweredByColor": [1, "powered-by-color"],
+        "width": [2],
+        "height": [2],
+        "fontFamily": [1, "font-family"],
+        "messages": [32],
+        "isMinimized": [32],
+        "isTyping": [32],
+        "inputValue": [32],
+        "isChatOpen": [32],
+        "currentPosition": [32]
+    }, undefined, {
+        "config": ["configChanged"],
+        "position": ["positionChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nerd-chat-widget"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nerd-chat-widget":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ChatWidget);
+            }
+            break;
+    } });
+}
+
+const NerdChatWidget = ChatWidget;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChatWidget as C, NerdChatWidget, defineCustomElement$1 as d, defineCustomElement };
+//# sourceMappingURL=nerd-chat-widget.js.map
+
+//# sourceMappingURL=nerd-chat-widget.js.map