Chat Interface Component
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Chat Interface Component, implemented primarily as ChatbotPage, serves as the central interaction hub for Bridge AI. It provides a real-time, conversational interface where users can query an AI networking assistant to find professionals, summarize expertise, and receive engagement strategies. The component facilitates a seamless flow between user input, backend AI processing via the Groq Llama3 model, and the display of structured professional profiles.
Sources: frontend/front/src/chatbot/chatbot.jsx:136-138, BACKEND/src/controllers/chatbot.controller.js:106-110
Architecture and Data Flow
The system follows a client-server architecture. The React frontend captures user queries and communicates with a Node.js/Express backend. The backend utilizes LangChain to interface with the Groq AI model for natural language processing and profile extraction.
Frontend Logic
The ChatbotPage component manages several states to handle the conversation flow, including message history, loading indicators, and typewriter-style text animation for bot responses.
The diagram above illustrates the sequential steps from user input to the final display of the AI-generated response.
Sources: frontend/front/src/chatbot/chatbot.jsx:153-207
Backend Processing
The backend controller processes the query by formatting a prompt with system instructions that define the AI as a "networking assistant." It extracts professional names from the AI response and generates simulated social media links.
The sequence diagram details the interaction between the frontend, the backend controller, and the external LLM provider.
Sources: BACKEND/src/controllers/chatbot.controller.js:127-160
Component Specifications
Key State Variables (Frontend)
| State Variable | Type | Description |
|---|---|---|
messages | Array | Stores the conversation history objects { text, sender }. |
profiles | Array | List of professional profiles found in the AI response. |
input | String | Current text in the message input field. |
isTyping | Boolean | Tracks if the AI is currently "typing" the response. |
displayedResponse | String | The substring of the bot response currently visible during animation. |
Sources: frontend/front/src/chatbot/chatbot.jsx:139-151
AI Model Configuration
The backend utilizes specific tools and models to generate responses:
| Configuration | Value | Source |
|---|---|---|
| Model | llama3-8b-8192 | chatbot.controller.js:108 |
| Provider | ChatGroq | chatbot.controller.js:106 |
| System Instruction | AI networking assistant... Find professionals... | chatbot.controller.js:113-117 |
Features and Navigation
Interactive Elements
- Typewriter Animation: Bot responses are rendered character-by-character using a
setIntervalwithin auseEffecthook, with an interval of 1ms for rapid display. - Sidebar & Profile Navigation: A toggleable sidebar provides links to the Dashboard, Showcase (Products), and Help pages. A profile dropdown allows users to edit their profile or logout.
- Stop Functionality: Users can interrupt the bot's typing animation using the
handleStopfunction.
Sources: frontend/front/src/chatbot/chatbot.jsx:189-207, frontend/front/src/chatbot/chatbot.jsx:254-262
Routing
The component is integrated into the application via react-router-dom and is accessible via the /chatbotpage path.
// frontend/front/src/App.jsx:21
<Route path="/chatbotpage" element={<ChatbotPage/>}/>
Sources: frontend/front/src/App.jsx:21, frontend/front/src/getstarted/getstarted.jsx:54-56
Data Persistence
The project includes a Chat.model.js defining the schema for chat sessions, linking them to specific users in the MongoDB database.
| Field | Type | Description |
|---|---|---|
user | ObjectId | Reference to the "User" model. |
createdAt | Date | Timestamp of session creation (default: Now). |
Sources: BACKEND/src/models/Chat.model.js:4-7
Conclusion
The Chat Interface Component is the primary engine for user engagement within Bridge AI. By combining a reactive React frontend with a LangChain-powered backend, it transforms simple user queries into structured professional networking data. The inclusion of real-time animations and integrated navigation ensures a fluid user experience while maintaining a robust connection to the underlying AI infrastructure.