FFS - Chat Interface UI icon

FFS - Chat Interface UI

Serves a customizable React chat interface as static content

FFS - Chat Interface UI

AI-generated

Overview

This node serves a customizable React-based chat interface as static content. It is designed to provide an AI assistant chat UI that can be embedded or served via a specified request path. The node supports configuration of chat backend API URL, chat title, user identification, caching options, theming, welcome messages, footnotes, feedback mechanisms, and streaming responses. It is useful for scenarios where users want to deploy an interactive AI chat interface with customizable appearance and behavior, such as customer support bots, virtual assistants, or interactive FAQ systems.

Use Case Examples

  1. Serving a chat interface at the root path '/' that connects to a specified AI chat API backend.
  2. Customizing the chat UI with a specific title, theme colors, and welcome message for branding purposes.
  3. Enabling IndexedDB caching and persistent user IDs to maintain chat state across sessions.
  4. Adding feedback buttons to collect user reactions to AI responses and sending feedback to specified URLs.

Properties

Name Meaning
Request Path The URL path at which the chat interface static content is served (e.g., '/', '/assets/style.css').
Chat API URL The backend API URL used by the chat interface to send and receive chat messages.
Chat Title The title displayed in the chat interface header.
Webhook URL Full webhook URL used to convert static file references into webhook calls with query parameters for dynamic content loading.
Agent SID Optional user identifier (such as email or username) included in chat API requests to identify the user.
Enable IndexedDB Cache Enables caching of chat messages and state persistence in the browser's IndexedDB.
Enable Persistent User ID Enables a persistent user identifier across browser sessions, requires IndexedDB caching to be enabled.
Custom Favicon Base64 encoded PNG image string to use as a custom favicon in the chat interface.
Welcome Message Optional JSON string representing a welcome message with features like output text, options, input disabling, and footnote display, shown when the chat opens.
Preferred Language Optional language code to send with chat messages to specify the preferred language for responses.
Enable Agent Message Footnote Enables display of a footnote under every agent (AI) message.
Agent Message Footnote Optional markdown-supported footnote text displayed under each agent message, shown only if footnotes are enabled.
Footnote Title Title displayed above the footnote content, shown only if footnotes are enabled.
Footnote Collapsible Allows users to expand or collapse the footnote content, shown only if footnotes are enabled.
Show Footnote Controls when the footnote is displayed in the message timeline: immediately, after response, or based on agent decision.
Enable Feedback Enables thumbs up/down feedback icons for AI responses.
Thumbs Up Feedback URL URL to POST positive feedback data, used only if feedback is enabled.
Thumbs Down Feedback URL URL to POST negative feedback data, used only if feedback is enabled.
Light Theme Colors Collection of HSL color values to customize the light theme appearance of the chat interface.
Dark Theme Colors Collection of HSL color values to customize the dark theme appearance of the chat interface.
Enable Streaming Enables streaming responses for real-time message updates using the same chat API URL.

Output

JSON

  • statusCode - HTTP status code of the served content or error.
  • content - Base64 encoded content of the served static file or error message.
  • contentType - MIME type of the served content.
  • headers - HTTP headers including cache control, ETag, and custom metadata for the response.
  • _cacheBreaker - Cache breaker string combining timestamp and hash to force cache refresh.
  • _configHash - Hash of the configuration used to detect changes.
  • _buildTimestamp - Timestamp when the content was built or served.

Dependencies

  • An API URL for the chat backend is required.
  • Optional webhook URL for static file references.
  • Optional URLs for feedback submission if feedback is enabled.

Troubleshooting

  • If the requested static file path does not exist, the node returns a 404 Not Found response with appropriate headers.
  • Errors during execution are caught and returned as JSON with error message and status code 500 if 'Continue On Fail' is enabled; otherwise, the node throws an error.
  • Ensure the chat API URL is reachable and correctly configured to avoid runtime errors in the chat interface.
  • If enabling persistent user ID, IndexedDB cache must also be enabled; otherwise, persistent user ID will not function properly.

Discussion