Lightspeed Chatbot Reference UI

A reference implementation of a chatbot interface built with React, TypeScript, and PatternFly. This project demonstrates how to integrate AI-powered conversational interfaces with modern web applications using the PatternFly design system.

✨ Features

• 🤖 AI-Powered Chat: Interactive chatbot with streaming responses
• 🔧 Tool Execution: Visual feedback for AI tool usage and execution
• 📱 Multiple Display Modes: Overlay, docked, and fullscreen modes
• 🔄 Model Selection: Choose from available AI models
• 📚 Conversation History: Persistent chat sessions with search
• ♿ Accessibility: Full screen reader support and keyboard navigation
• 🎨 PatternFly Design: Modern, consistent UI components
• 📱 Responsive: Works on desktop and mobile devices

🚀 Quick Start

Prerequisites: Ensure the lightspeed-stack is running to provide the backend API services.

If you need help getting lightspeed-stack running follow this guide.

git clone https://github.com/your-org/lightspeed-reference-ui
cd lightspeed-reference-ui
npm install && npm run start:dev

The application will be available at http://localhost:9000

📋 Development Scripts

# Install development/build dependencies
npm install
# Start the development server
npm run start:dev
# Run a production build (outputs to "dist" dir)
npm run build
# Run the test suite
npm run test# Run the test suite with coverage
npm run test:coverage
# Run the linter
npm run lint
# Run the code formatter
npm run format
# Launch a tool to inspect the bundle size
npm run bundle-profile:analyze
# Start the express server (run a production build first)
npm run start

🏗️ Project Structure

src/
├── app/
│ ├── LightspeedChatbot/ # Main chatbot module
│ │ ├── LightspeedChatbot.tsx # Main chatbot component
│ │ ├── components/ # Reusable components
│ │ │ └── ToolExecutionCards.tsx
│ │ ├── hooks/ # Custom React hooks
│ │ │ └── useChatbot.ts
│ │ ├── services/ # API service layer
│ │ │ └── api.ts
│ │ ├── utils/ # Helper functions
│ │ │ └── helpers.ts
│ │ ├── types.ts # TypeScript definitions
│ │ └── constants.ts # Configuration constants
│ └── utils/ # Shared utilities
│ └── useDocumentTitle.ts
├── index.html # HTML template
└── index.tsx # Application entry point

🔧 Configuration

API Integration

The chatbot connects to a backend API that should provide:

• GET /v1/models - Available AI models
• POST /v1/query - Send chat messages
• POST /v1/streaming_query - Streaming chat responses

Customization

Update src/app/LightspeedChatbot/constants.ts to configure:

• API_BASE_URL: Backend API endpoint (default: http://localhost:8080)
• DEFAULT_SYSTEM_PROMPT: AI behavior instructions
• USER_AVATAR, BOT_AVATAR: Avatar URLs for chat participants
• FOOTNOTE_PROPS: Footer disclaimer configuration

🎯 Key Components

LightspeedChatbot

The main chatbot interface that provides:

• Chat message display with streaming
• Model selection dropdown
• Display mode switching (overlay/docked/fullscreen)
• Conversation history with search
• Tool execution visualization

ToolExecutionCards

Displays active tool executions during AI processing:

• Shows tool names and status
• Provides visual feedback for long-running operations
• Automatically updates as tools complete

useChatbot Hook

Custom React hook that manages:

• Chat state and message history
• API communication and streaming
• UI state (visibility, display modes)
• Model selection and loading

🔌 API Integration

The chatbot expects a backend API with these endpoints:

// Get available modelsGET/v1/models
Response: {models: Array<{identifier: string;metadata: Record<string,any>;api_model_type: string;provider_id: string;provider_resource_id: string;type: string;model_type: string;}>}// Send query (non-streaming)POST/v1/query
Body: {
query: string;
conversation_id?: string;
provider?: string;
model?: string;
system_prompt?: string;
attachments?: Array<{attachment_type: string;content_type: string;content: string;}>;}// Send streaming queryPOST/v1/streaming_query
Body: {
query: string;
conversation_id?: string;
provider?: string;
model?: string;
system_prompt?: string;
attachments?: Array<{attachment_type: string;content_type: string;content: string;}>;}
Response: Server-SentEventsstreamwithevents:
-start: {conversation_id: string}-token: {id: number,role: string,token: string}-tool_call: {id: number,role: string,token: string|Record<string,any>}-end: {referenced_documents: any[],truncated: any,input_tokens: number,output_tokens: number}

📱 Usage Examples

Basic Integration

import{LightspeedChatbot}from'./app/LightspeedChatbot';functionApp(){return(<divclassName="app"><main>{/* Your app content */}</main><LightspeedChatbot/></div>);}

🧪 Testing

The project includes comprehensive tests:

# Run all tests
npm run test# Run tests with coverage
npm run test:coverage
# Run tests in watch mode
npm run test:watch

📦 Building

# Production build
npm run build
# Analyze bundle size
npm run bundle-profile:analyze

🔧 Development Tools

• TypeScript: Type safety and better development experience
• ESLint: Code linting and style enforcement
• Prettier: Code formatting
• Jest: Unit testing framework
• React Testing Library: Component testing utilities
• Webpack: Module bundling and development server

🌐 Browser Support

This application supports modern browsers with ES6+ features:

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

• Check the Issues page
• Review the component documentation in src/app/LightspeedChatbot/README.md
• Refer to the PatternFly documentation for UI components