npm package: @sshaik26/ezra-webchat
Description: Ezra WebChat component for customer support - CDN ready
Latest version: 1.0.0

# Ezra WebChat Component - CDN Ready

[![npm version](https://badge.fury.io/js/%40mml%2Fezra-webchat.svg)](https://badge.fury.io/js/%40mml%2Fezra-webchat)

A Stencil-built web component for customer support chat integration, now available via CDN for easy integration into any HTML application without requiring a JavaScript framework.

## 🚀 Quick Start

### Via CDN (Recommended for HTML Applications)

```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Dependencies -->
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>

    <!-- Ezra WebChat Component -->
    <script type="module" src="https://unpkg.com/@mml/ezra-webchat/dist/cdn/mml-web-components/mml-web-components.esm.js"></script>
    <script nomodule src="https://unpkg.com/@mml/ezra-webchat/dist/cdn/mml-web-components/mml-web-components.js"></script>
  </head>
  <body>
    <ezra-webchat show-close-button="true" topic="Support" environment="production" bot-avatar-image-path="https://your-domain.com/bot-icon.svg"> </ezra-webchat>

    <script>
      // Event handling
      const ezraChat = document.querySelector('ezra-webchat');

      ezraChat.addEventListener('webchatClosed', event => {
        console.log('Chat closed:', event.detail);
      });
    </script>
  </body>
</html>
```

### Via NPM

```bash
npm install @mml/ezra-webchat
```

## 📋 Features

- ✅ **CDN Ready**: Load directly from CDN without build tools
- ✅ **Framework Agnostic**: Works with vanilla HTML, React, Angular, Vue
- ✅ **Event System**: Rich event system for integration
- ✅ **Responsive Design**: Mobile-friendly interface
- ✅ **Customizable**: Theme and configure to match your brand
- ✅ **Fallback Support**: Graceful degradation for external applications
- ✅ **TypeScript**: Full TypeScript support with type definitions

## 🎯 CDN Options

### unpkg

```html
<!-- Latest version -->
<script type="module" src="https://unpkg.com/@mml/ezra-webchat/dist/cdn/mml-web-components/mml-web-components.esm.js"></script>

<!-- Specific version -->
<script type="module" src="https://unpkg.com/@mml/ezra-webchat@1.0.0/dist/cdn/mml-web-components/mml-web-components.esm.js"></script>
```

### jsDelivr

```html
<!-- Latest version -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@mml/ezra-webchat/dist/cdn/mml-web-components/mml-web-components.esm.js"></script>

<!-- Specific version -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@mml/ezra-webchat@1.0.0/dist/cdn/mml-web-components/mml-web-components.esm.js"></script>
```

## ⚙️ Configuration

### Component Properties

| Property                | Type      | Default  | Description                    |
| ----------------------- | --------- | -------- | ------------------------------ |
| `show-close-button`     | `boolean` | `false`  | Show/hide the close button     |
| `topic`                 | `string`  | `'AskM'` | Chat topic identifier          |
| `environment`           | `string`  | `''`     | Environment setting (dev/prod) |
| `bot-avatar-image-path` | `string`  | `''`     | URL to custom bot avatar image |

### Global Configuration

For external applications, configure via `window.EzraWebChatConfig`:

```javascript
window.EzraWebChatConfig = {
  directLineWalterURL: 'https://your-api.com/directline/token',
  userContextUrl: 'https://your-api.com/user/context',
  fallbackMode: true, // Enable fallback mode for external applications
};
```

## 🎪 Events

### webchatClosed

Fires when the chat is closed with detailed information:

```javascript
ezraChat.addEventListener('webchatClosed', event => {
  console.log('Source:', event.detail.source);
  console.log('Timestamp:', event.detail.timestamp);
});
```

### close

Standard Stencil component close event:

```javascript
ezraChat.addEventListener('close', event => {
  console.log('Component closed');
});
```

## 🔧 Methods

### closeChat()

Programmatically close the chat:

```javascript
const ezraChat = document.querySelector('ezra-webchat');
await ezraChat.closeChat();
```

## 🎨 Integration Patterns

### 1. Basic Integration

```html
<ezra-webchat show-close-button="true" topic="Support"></ezra-webchat>
```

### 2. Flyout/Modal Integration

```html
<button onclick="openChatFlyout()">Open Chat</button>

<div id="chat-flyout" style="display: none;">
  <ezra-webchat id="flyout-chat" show-close-button="false"></ezra-webchat>
</div>

<script>
  function openChatFlyout() {
    document.getElementById('chat-flyout').style.display = 'block';
  }

  // Auto-close flyout when chat closes
  document.getElementById('flyout-chat').addEventListener('webchatClosed', () => {
    document.getElementById('chat-flyout').style.display = 'none';
  });
</script>
```

### 3. React Integration

```jsx
import React, { useRef, useEffect } from 'react';

function ChatComponent() {
  const chatRef = useRef();

  useEffect(() => {
    const chatElement = chatRef.current;

    const handleChatClosed = event => {
      console.log('Chat closed:', event.detail);
    };

    chatElement.addEventListener('webchatClosed', handleChatClosed);

    return () => {
      chatElement.removeEventListener('webchatClosed', handleChatClosed);
    };
  }, []);

  return <ezra-webchat ref={chatRef} show-close-button="true" topic="Support" />;
}
```

### 4. Angular Integration

```typescript
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-chat',
  template: ` <ezra-webchat #ezraChat [show-close-button]="true" topic="Support"> </ezra-webchat> `,
})
export class ChatComponent implements AfterViewInit {
  @ViewChild('ezraChat') ezraChatRef!: ElementRef;

  ngAfterViewInit() {
    this.ezraChatRef.nativeElement.addEventListener('webchatClosed', (event: any) => {
      console.log('Chat closed:', event.detail);
    });
  }
}
```

## 🌐 Browser Support

- Modern browsers with ES6 module support
- Internet Explorer 11+ (via UMD fallback)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Progressive Web Apps (PWA)

## 🔒 Security

- CORS-enabled for cross-origin requests
- Secure token handling for DirectLine communication
- No sensitive data stored in component state
- CSP-friendly implementation

## 🚢 Deployment

### Build for CDN

```bash
npm run build
```

### Deploy to NPM

```bash
# Using PowerShell script
.\deploy-cdn.ps1 -Publish

# Manual
npm publish --access public
```

### Azure Static Web Apps (Recommended)

```bash
# Deploy to Azure Static Web Apps
az staticwebapp create \
  --name ezra-webchat-cdn \
  --resource-group your-rg \
  --source ./dist/cdn \
  --location "East US 2"
```

## 🐛 Troubleshooting

### Component Not Loading

1. Ensure dependencies (WebChat, markdown-it) load before the component
2. Check browser console for errors
3. Verify CDN URLs are accessible

### Chat Not Initializing

1. Check `window.EzraWebChatConfig` if using external mode
2. Verify DirectLine token service is accessible
3. Enable fallback mode for external applications

### Events Not Firing

1. Ensure event listeners are attached after component loads
2. Use `DOMContentLoaded` or component lifecycle events
3. Check for proper event names (`webchatClosed`, `close`)

## 📈 Performance

- **Bundle Size**: ~150KB (gzipped)
- **Load Time**: <2s on 3G connection
- **Memory Usage**: <10MB typical
- **CDN Cache**: 1 year cache headers

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

## 📄 License

MIT License - see LICENSE file for details

## 🆘 Support

- Documentation: [CDN-INTEGRATION.md](./CDN-INTEGRATION.md)
- Issues: [GitHub Issues](https://github.com/your-org/ezra-webchat/issues)
- NPM: [@mml/ezra-webchat](https://www.npmjs.com/package/@mml/ezra-webchat)

---

Built with ❤️ using [Stencil](https://stenciljs.com/)