Instruction file imported from tusgino/gp-webapp (
.cursor/rules/13-chatbot-and-ai.mdc). Copyright stays with the author.
Chatbot and AI Features
The application includes an AI-powered chatbot system for student support and course assistance.
Chatbot Components
The chatbot system is implemented in components/chatbot/:
- components/chatbot/chatbot-widget.tsx - Main chatbot widget container
- components/chatbot/chatbot-header.tsx - Chatbot header with title and controls
- components/chatbot/chatbot-message-list.tsx - Message history display
- components/chatbot/chatbot-message-item.tsx - Individual message component
- components/chatbot/chatbot-message-input.tsx - Message input interface
- components/chatbot/chatbot-streaming-message.tsx - Real-time message streaming
- components/chatbot/chatbot-welcome.tsx - Welcome message and quick actions
- components/chatbot/chatbot-quick-actions.tsx - Predefined action buttons
- components/chatbot/chatbot-source-metadata.tsx - Source reference display
- components/chatbot/chatbot-provider.tsx - Context provider for chatbot state
Chatbot Hooks
- components/chatbot/use-chatbot-stream.tsx - Custom hook for handling streaming responses
State Management
Chatbot state is managed through Redux:
- lib/redux/chatbot/chatbot.slice.ts - Chatbot state slice
- lib/redux/chatbot/chatbot.saga.ts - Chatbot side effects
- lib/redux/chatbot/chatbot.selectors.ts - State selectors
API Integration
Chatbot API functionality:
- lib/chatbot/api.ts - API client for chatbot services
- lib/chatbot/action.ts - Action creators for chatbot operations
Type Definitions
- interface/chatbot.interface.ts - TypeScript interfaces for chatbot data structures
Features
- Real-time Streaming: Messages are streamed in real-time for better user experience
- Context Awareness: Chatbot understands course context and user progress
- Quick Actions: Predefined actions for common queries
- Source References: Displays sources and references for chatbot responses
- Persistent History: Conversation history is maintained across sessions
- Responsive Design: Works seamlessly on desktop and mobile devices
Usage Guidelines
- The chatbot widget can be embedded in any page
- Use the
ChatbotProviderto wrap components that need chatbot functionality - Implement proper error handling for API failures
- Ensure messages are properly sanitized before display
- Follow accessibility guidelines for chat interfaces