Multi-turn Chatbot Test Evaluator (Frontend)

This repository contains a frontend-only tool for evaluating chatbot behavior across many continuous chat interactions.

The app runs with mock data and is designed to help users:

• Build and view test trees
• Execute and inspect multi-turn chat flows
• Track pass/fail states across branches
• Visualize mixed outcomes quickly

Scope

• Frontend only
• Uses mock data for test execution and visualization
• No backend service is included in this repository

Key Behaviors

• Each branch in the tree can open a chat flow view.
• New test cases are created by creating a root node.
• If a case fails in the middle of a flow, execution does not continue to child nodes below that failure.
• Flows that pass are colored green.
• Leaf nodes are displayed in the result view.

Result Types

1) All cases pass

When all branches in the tested flow pass successfully.

2) Partial failure

When only part of the flow fails while other parts pass.

3) Mixed case

When the overall test result includes a mix of pass and fail outcomes across the tree.

Flow and Test Case Actions

Open chat flow from a tree branch

Each branch can open its chat flow details.

Chat flow failure behavior

This view shows a failure occurring in the middle of a chat flow. When this happens, the failed node is marked as failed and execution stops for all child nodes below it.

Create a new test case

Create a new root node to define a new test case.

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Install dependencies

npm install

Run in development

npm run dev

Build for production

npm run build

Preview production build

npm run preview

Tech Stack

• React + TypeScript
• Vite
• Tailwind CSS
• React Flow (@xyflow/react)

Notes

• All screenshots used in this README are stored in the image folder.
• When a node fails, downstream child nodes are not executed.