Zen N8N Chat for Angular

An enhanced version of the @n8n/chat widget for Angular 17+ with full HTML and Markdown support. This package provides a standalone Angular component that wraps the official n8n chat widget and adds rich content rendering including markdown formatting, code blocks with syntax highlighting, tables, and sanitized HTML.

Features

• ✅ Full Markdown Support - Headings, lists, code blocks, tables, links, blockquotes, and more
• ✅ HTML Rendering - Safely render HTML content with DOMPurify sanitization
• ✅ Standalone Component - Works with Angular 17+ standalone components
• ✅ Syntax Highlighting - Beautiful code block rendering
• ✅ Configurable - Control which HTML tags are allowed via inputs
• ✅ Safe - Built-in XSS protection with DOMPurify
• ✅ TypeScript Support - Full type definitions included
• ✅ SSR Compatible - Works with server-side rendering

Installation

npm install zen-n8n-chat

Or with yarn:

yarn add zen-n8n-chat

Quick Start

1. Import the Component

Since this is a standalone component, you can import it directly into your component:

import { Component } from '@angular/core';
import { ZenN8nChatComponent } from 'zen-n8n-chat';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [ZenN8nChatComponent],
  template: `
    <div class="chat-container">
      <zen-chat
        [webhookUrl]="webhookUrl"
        [enableMarkdown]="true"
        [enableHtml]="true"
        mode="window"
      ></zen-chat>
    </div>
  `,
  styles: `
    .chat-container {
      width: 400px;
      height: 600px;
    }
  `
})
export class MyComponent {
  webhookUrl = 'https://your-n8n-instance.com/webhook/chat';
}

2. Use in Non-Standalone Apps

If you're using modules, import it in your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ZenN8nChatComponent } from 'zen-n8n-chat';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ZenN8nChatComponent  // Import as standalone component
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component API

Inputs

| Input | Type | Default | Required | Description | |-------|------|---------|----------|-------------| | webhookUrl | string | - | Yes | Your n8n webhook URL | | mode | 'window' \| 'fullscreen' | 'window' | No | Display mode for the chat | | enableMarkdown | boolean | true | No | Enable markdown rendering | | enableHtml | boolean | true | No | Enable HTML rendering | | allowedHtmlTags | string[] | See below | No | Array of allowed HTML tags | | initialMessages | string[] | [] | No | Initial messages to display | | chatInputKey | string | - | No | Custom chat input key | | chatSessionKey | string | - | No | Custom session key | | loadPreviousSession | boolean | false | No | Load previous chat session | | showWelcomeScreen | boolean | false | No | Show welcome screen | | allowFileUploads | boolean | false | No | Allow file uploads |

Default Allowed HTML Tags

[
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
  'p', 'br', 'strong', 'em', 'u', 'a',
  'ul', 'ol', 'li', 'blockquote', 'code', 'pre',
  'table', 'thead', 'tbody', 'tr', 'th', 'td',
  'div', 'span', 'img'
]

Usage Examples

Basic Chat Window

<zen-chat
  [webhookUrl]="'https://your-n8n.com/webhook/chat'"
  mode="window"
></zen-chat>

Fullscreen Mode

<zen-chat
  [webhookUrl]="'https://your-n8n.com/webhook/chat'"
  mode="fullscreen"
  [showWelcomeScreen]="true"
></zen-chat>

Custom Configuration

<zen-chat
  [webhookUrl]="webhookUrl"
  [enableMarkdown]="true"
  [enableHtml]="true"
  [allowedHtmlTags]="customAllowedTags"
  [loadPreviousSession]="true"
  chatSessionKey="my-custom-session"
></zen-chat>

Markdown Examples

Your n8n workflow can return messages with rich markdown formatting:

Text Formatting

**Bold text** and *italic text*
`inline code`

Code Blocks

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Tables

| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

Security

This package uses DOMPurify to sanitize all HTML content before rendering, protecting against XSS attacks.

Development

Building the Library

ng build zen-n8n-chat

Running the Demo App

ng serve

Publishing

After building your library with ng build zen-n8n-chat, go to the dist folder cd dist/zen-n8n-chat and run npm publish.

License

MIT

Credits

Built on top of @n8n/chat by the n8n team. Enhanced with markdown and HTML support by Zentility.