|
1 | | -# Chatbot Component |
| 1 | +# client/src/components/Chatbot.js |
2 | 2 |
|
3 | | -## Overview |
4 | | - |
5 | | -The ChatBot component provides an AI-powered conversational interface for user support and assistance. It integrates with a RAG (Retrieval-Augmented Generation) backend to provide intelligent responses about the PyTorch Connectomics platform. |
6 | | - |
7 | | -## Functionality |
8 | | - |
9 | | -- **Real-time Chat Interface**: Provides a full-screen chat interface with message history |
10 | | -- **Session Management**: Creates and maintains chat sessions with unique session IDs |
11 | | -- **Message Persistence**: Saves chat history and session data in localStorage |
12 | | -- **AI Integration**: Connects to backend RAG system for intelligent responses |
13 | | -- **User Experience**: Clean, modern UI with message bubbles and typing indicators |
14 | | - |
15 | | -## Key Features |
16 | | - |
17 | | -- **Session-based Conversations**: Each chat session maintains context and memory |
18 | | -- **Message History**: Persistent storage of conversation history |
19 | | -- **Error Handling**: Graceful error handling for network issues |
20 | | -- **Responsive Design**: Full-height layout with proper scrolling |
21 | | -- **Input Validation**: Prevents empty message sending |
| 3 | +AI assistant panel for helping users navigate PyTC Client. Renders a chat UI with message history, Markdown rendering, and server-backed responses. |
22 | 4 |
|
23 | 5 | ## Props |
24 | 6 |
|
25 | | -- `onClose`: Function to close the chat interface |
26 | | - |
27 | | -## State Management |
28 | | - |
29 | | -- `messages`: Array of chat messages with user/bot distinction |
30 | | -- `inputValue`: Current text input value |
31 | | -- `sessionId`: Unique identifier for the chat session |
32 | | -- `isSending`: Boolean indicating if a message is being processed |
33 | | - |
34 | | -## API Integration |
35 | | - |
36 | | -- **createChatSession()**: Creates a new chat session with the backend |
37 | | -- **queryChatBot(sessionId, query)**: Sends user queries to the AI assistant |
38 | | - |
39 | | -## User Interactions |
40 | | - |
41 | | -1. **Opening Chat**: Click the message icon to open the chat interface |
42 | | -2. **Sending Messages**: Type in the text area and press Enter or click Send |
43 | | -3. **Session Persistence**: Chat history is automatically saved and restored |
44 | | -4. **Closing Chat**: Click the X button to close the interface |
| 7 | +- **`onClose`** — Callback when user closes the chat (e.g. drawer) |
45 | 8 |
|
46 | | -## Technical Implementation |
| 9 | +## Features |
47 | 10 |
|
48 | | -- Uses Ant Design components for UI consistency |
49 | | -- Implements proper cleanup with useEffect hooks |
50 | | -- Handles async operations with proper error boundaries |
51 | | -- Manages local storage for data persistence |
| 11 | +- **Message persistence** — Saves messages to `localStorage` under `chatMessages` |
| 12 | +- **Markdown rendering** — Uses `react-markdown` with `remarkGfm` for lists, tables, code blocks |
| 13 | +- **Keyboard shortcut** — Enter (without Shift) sends message |
| 14 | +- **Clear chat** — Popconfirm to clear; calls `clearChat()` API and resets to initial greeting |
52 | 15 |
|
53 | | -## Use Cases |
| 16 | +## API Calls |
54 | 17 |
|
55 | | -- **User Support**: Help users navigate the platform and understand features |
56 | | -- **Troubleshooting**: Assist with common issues and error resolution |
57 | | -- **Feature Guidance**: Provide step-by-step instructions for complex workflows |
58 | | -- **Documentation Access**: Answer questions about platform capabilities |
| 18 | +- `queryChatBot(query)` — Sends user message, displays response |
| 19 | +- `clearChat()` — Clears server-side history and local state |
59 | 20 |
|
60 | | -## Integration Points |
| 21 | +## UI Layout |
61 | 22 |
|
62 | | -- **Global Context**: Accesses shared application state |
63 | | -- **API Layer**: Communicates with backend RAG system |
64 | | -- **Local Storage**: Persists user data across sessions |
65 | | -- **UI Framework**: Integrates with Ant Design component library |
| 23 | +- Header: "AI Assistant" title, Clear button, Close button |
| 24 | +- Scrollable message list (user messages right-aligned, blue; bot messages left-aligned, gray) |
| 25 | +- TextArea + Send button at bottom |
0 commit comments