Enhanced Chat UI - N8N Node

An advanced N8N node for creating interactive chat interfaces with embedded forms and HTML content support.

Features

• Interactive chat interface
• Embedded form support
• HTML content rendering
• Secure content handling
• Real-time interactions
• Mobile-friendly design

Chat Input/Output Types

Input Types

1. User Input

   • Always plain text
   • Submitted through the chat interface
   • Can trigger different responses based on content

2. Node Input

   • From workflow execution
   • Can be triggered by other nodes
   • Supports plain text messages

Output Types (AI/Node Response)

1. Text Messages

   • Plain text responses
   • Markdown-formatted text (if enabled)
   • Emoji support (if enabled)

2. Forms

   • Generated by AI responses
   • Created from node execution results
   • Interactive form elements:
     • Text inputs
     • Select dropdowns
     • Checkboxes
     • Text areas
     • Number inputs

3. HTML Content

   • Generated by AI responses
   • Created from node execution results
   • Can include:
     • Formatted content
     • Interactive elements
     • Custom styling
     • Embedded media (if allowed)

Message Flow

1. User input (text) → Node/AI Processing → Response (text/form/HTML)
2. Form submission → Node Processing → Response (text/form/HTML)
3. Node execution → Direct output → Chat display (text/form/HTML)

Prerequisites

• Node.js (v14 or later)
• NPM (v6 or later)
• N8N (latest version)
• TypeScript

Installation

npm install n8n-nodes-enhanced-chat

Development Setup

1. Clone the repository:

git clone https://github.com/your-repo/n8n-nodes-enhanced-chat.git
cd n8n-nodes-enhanced-chat

2. Install dependencies:

npm install

3. Build the project:

npm run build

4. Link for local development:

npm link

Build Process

1. Prepare Environment

   npm install
   

2. Lint Code

   npm run lint
   

3. Run Tests

   npm run test
   

4. Build Project

   npm run build
   

5. Generate Documentation

   npm run docs
   

Deployment to NPM

1. Prepare for Publishing

1. Update version in package.json:

   npm version [patch|minor|major]
   

2. Build the project:

   npm run build
   

3. Review package contents:

   npm pack --dry-run
   

2. Publishing Process

1. Login to NPM:

   npm login
   

2. Publish package:

   npm publish
   

For scoped packages:

npm publish --access public

3. Post-Publishing

1. Create GitHub release
2. Update documentation if needed
3. Verify package installation

Package Structure

n8n-nodes-enhanced-chat/
├── src/
│   ├── nodes/
│   │   └── EnhancedChat/
│   │       ├── ChatTrigger.node.ts
│   │       └── types.ts
│   └── utils/
├── dist/
├── tests/
└── package.json

Configuration

package.json Settings

{
  "name": "n8n-nodes-enhanced-chat",
  "version": "1.0.0",
  "description": "Enhanced chat node for N8N with form and HTML support",
  "keywords": [
    "n8n",
    "n8n-node",
    "n8n-community-node",
    "chat",
    "forms",
    "html"
  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "format": "prettier --write src/",
    "lint": "eslint src/",
    "prepare": "npm run build",
    "prepublishOnly": "npm test && npm run lint",
    "test": "jest"
  },
  "files": [
    "dist/**/*",
    "README.md",
    "LICENSE"
  ],
  "n8n": {
    "nodes": [
      "dist/nodes/EnhancedChat/ChatTrigger.node.js"
    ]
  }
}

TypeScript Configuration

{
  "compilerOptions": {
    "target": "es2019",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "tests"]
}

Testing

Run all tests:

npm test

Run specific tests:

npm test -- -t "test-name"

Troubleshooting

Common Issues

1. Build Failures

   • Verify TypeScript configuration
   • Check for missing dependencies
   • Validate import statements

2. Publishing Issues

   • Ensure NPM authentication
   • Verify package name availability
   • Check version number

3. Integration Issues

   • Verify N8N version compatibility
   • Check node registration
   • Validate node configuration

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request