Implementation:FlowiseAI Flowise ChatInputHistory

Knowledge Sources	FlowiseAI Flowise
Domains	Chat Interface, State Management
Last Updated	2026-02-12 07:00 GMT

Overview

ChatInputHistory is a JavaScript class that manages a navigable history of chat input messages, persisted to localStorage, allowing users to cycle through previous inputs using up/down arrow key navigation.

Description

This class maintains an ordered array of recent chat inputs (most recent first) with a configurable maximum history size (default 10). It stores a currentIndex for navigation and a tempInput to preserve the user's in-progress text when browsing history. The addToHistory method prepends new non-empty inputs (avoiding duplicates at the top) and trims older entries beyond the max. Navigation methods getPreviousInput and getNextInput increment and decrement the index respectively, returning the corresponding history entry or restoring the temporary input when the user navigates past the newest entry. History is automatically saved to and loaded from localStorage under the key 'chatInputHistory'.

Usage

Instantiate this class in a chat input component and call addToHistory when a message is sent, getPreviousInput on the up arrow key press, and getNextInput on the down arrow key press to provide command-line-style input history navigation.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/chatmessage/ChatInputHistory.js
• Lines: 1-62

Signature

export class ChatInputHistory {
    constructor(maxHistory = 10)
    addToHistory(input)
    getPreviousInput(currentInput)
    getNextInput()
    saveHistory()
    loadHistory()
}

Import

import { ChatInputHistory } from '@/views/chatmessage/ChatInputHistory'

I/O Contract

Inputs

Name	Type	Required	Description
maxHistory	number	No	Maximum number of history entries to retain (defaults to 10)
input (addToHistory)	string	Yes	The chat input string to add to history
currentInput (getPreviousInput)	string	Yes	The current input text to preserve as temporary input before navigating

Outputs

Name	Type	Description
getPreviousInput return	string	The previous history entry, or the current entry if at the end of history
getNextInput return	string	The next (more recent) history entry, or the temporary input if past the newest entry
localStorage side effect	void	Persists and loads history from localStorage key 'chatInputHistory'

Usage Examples

Basic Usage

import { ChatInputHistory } from '@/views/chatmessage/ChatInputHistory'

const history = new ChatInputHistory(20)

// When user sends a message
history.addToHistory(userInput)

// When user presses Up arrow
const previousInput = history.getPreviousInput(currentInputValue)

// When user presses Down arrow
const nextInput = history.getNextInput()

Related Pages

• Principle:FlowiseAI_Flowise_Chat_History_Management