Chat Window Widget for FlowFuse Dashboard (Node-RED Dashboard 2.0)

This repository contains a third-party, node for the Node-RED Dashboard to provide an interactive chat window widget.

Easily build a chat-based user interface, and seamlessly integrate it with the vast collection of other Node-RED nodes available, including many for well-known AI services and offerings like OpenAI or ollama.

Below is a demonstration of the chat widget in action, integrated with an OpenAI node to provide a chatbot interface, one trained on

Examples

OpenAI Chatbot

Here, an OpenAI agent was prompted that it is an expert in Node-RED, and should assist users with flow-building and answering general questions:

Chat & Worldmap Integration

This agent was provisioned to provide coordinate data alongside it's text-based answers, which are then rendered onto a World Map, also rendered within FlowFuse Dashboard.

Usage

Installation

Install via Node-RED UI

1. Navigate to a Node-RED Editor
2. Click on the "Manage Palette" option int eh Node-RED menu
3. Switch to the "Install" tab
4. Search for "@flowfuse/node-red-dashboard-2-ui-chat"
5. Click on the "Install" button

Install via NPM

npm install @flowfuse/node-red-dashboard-2-ui-chat

Using in a Flow

Anything sent into the node will be considered as a received message. Any messages typed into the chat will be sent out of the node as a sent message.

Predefined Input Types

You can create placeholder items in your chat, like a "Typing" message by using different msg.topic values.

"Typing" Placeholder

By assigning a msg.topic of _typing, then a placeholder "Typing..." message will be shown in the chat. This is automatically removed when the next message is received.

Defining Message Authors

Any other msg.topic values used are assumed to be the name of the "author" of the message.

Development

To get started, clone this repository:

# if using HTTPS:
git clone https://github.com/FlowFuse/node-red-dashboard-2-ui-chat.git

# if using SSH:
git clone [email protected]:FlowFuse/node-red-dashboard-2-ui-chat.git

Install dependencies:

npm install

Install the node to your Node-RED instance for development:

# Change directory to your Node-RED user directory - typically ~/.node-red or c:\Users\<username>\.node-red
cd ~/.node-red
# Install the cloned node package - using the path to where you cloned the repo
npm install /path/to/cloned/repo/node-red-dashboard-2-ui-chat

During development, you can use the following command to build the frontend code:

npm run build:dev

For production builds, use:

npm run build

After running a build for front-end changes, you can simply refresh the Node-RED Dashboard to see your changes.

If changes to the Node-RED backend code or the nodes HTML, then you will need to restart Node-RED itself