npm package: @navis-dgtl/n8n-chat-ui
Description: Customized n8n chat UI component with enhanced features
Author: Nick Prince
Latest version: 1.0.0

# @navis-dgtl/n8n-chat-ui

A customized n8n chat UI component built with Vue 3 and TypeScript. This package provides a flexible, embeddable chat widget that connects to n8n AI workflows via webhooks.

## Features

- 🎨 **Fully Customizable** - CSS variables and component props for complete theming control
- 📱 **Responsive Design** - Works seamlessly on desktop and mobile devices
- 🔧 **Flexible Modes** - Window overlay or fullscreen chat interface
- 💾 **Session Management** - Persistent chat sessions with localStorage
- 📁 **File Uploads** - Optional file upload support
- ⚡ **TypeScript Support** - Full type safety and IntelliSense
- 🌐 **Framework Agnostic** - Can be used with any frontend framework

## Installation

```bash
npm install @navis-dgtl/n8n-chat-ui
```

## Quick Start

```typescript
import { createChat } from '@navis-dgtl/n8n-chat-ui'
import '@navis-dgtl/n8n-chat-ui/style.css'

// Initialize the chat widget
createChat({
  webhookUrl: 'https://your-n8n-instance.com/webhook/your-webhook-id',
  target: '#chat-container',
  mode: 'window',
  showWelcomeScreen: true,
  initialMessages: ['Hello! How can I help you today?']
})
```

## Configuration Options

```typescript
interface ChatOptions {
  webhookUrl: string                    // Required: Your n8n webhook URL
  target?: string | Element             // DOM target for mounting
  mode?: 'window' | 'fullscreen'        // Chat display mode
  showWindowCloseButton?: boolean       // Show close button in window mode
  showWelcomeScreen?: boolean           // Show welcome screen initially
  loadPreviousSession?: boolean         // Persist chat across sessions
  chatInputKey?: string                 // Webhook payload key for messages
  chatSessionKey?: string               // Webhook payload key for session ID
  initialMessages?: string[]            // Initial bot messages
  metadata?: Record<string, unknown>    // Additional webhook payload data
  disabled?: boolean                    // Disable chat input
  allowFileUploads?: boolean            // Enable file upload support
  allowedFilesMimeTypes?: string        // Accepted file types
  enableStreaming?: boolean             // Enable streaming responses
  webhookConfig?: {                     // Custom webhook configuration
    method?: 'GET' | 'POST'
    headers?: Record<string, string>
  }
  i18n?: Record<string, any>            // Internationalization strings
}
```

## Customization

### CSS Variables

```css
:root {
  --chat-primary-color: #007bff;
  --chat-secondary-color: #6c757d;
  --chat-background: #ffffff;
  --chat-border: #e9ecef;
  --chat-text: #212529;
  --chat-radius: 12px;
}
```

### Dark Theme

```css
.n8n-chat-wrapper.theme-dark {
  --chat-primary-color: #0d6efd;
  --chat-background: #212529;
  --chat-text: #ffffff;
  --chat-border: #495057;
}
```

## Usage with Vue 3

```vue
<template>
  <ChatWidget :options="chatOptions" />
</template>

<script setup lang="ts">
import { ChatWidget } from '@navis-dgtl/n8n-chat-ui'
import { ref } from 'vue'

const chatOptions = ref({
  webhookUrl: 'your-webhook-url',
  mode: 'window',
  showWelcomeScreen: true
})
</script>
```

## Usage with React

```jsx
import { useEffect, useRef } from 'react'
import { createChat } from '@navis-dgtl/n8n-chat-ui'

function ChatComponent() {
  const chatRef = useRef(null)

  useEffect(() => {
    if (chatRef.current) {
      createChat({
        webhookUrl: 'your-webhook-url',
        target: chatRef.current,
        mode: 'window'
      })
    }
  }, [])

  return <div ref={chatRef} />
}
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT © Nick Prince