Relevant source files

The following files were used as context for generating this wiki page: - [BACKEND/src/controllers/chatbot.controller.js](https://github.com/Steve-Wayne/EICHackathon/blob/main/BACKEND/src/controllers/chatbot.controller.js) - [BACKEND/src/app.js](https://github.com/Steve-Wayne/EICHackathon/blob/main/BACKEND/src/app.js) - [frontend/front/src/chatbot/chatbot.jsx](https://github.com/Steve-Wayne/EICHackathon/blob/main/frontend/front/src/chatbot/chatbot.jsx) - [BACKEND/src/models/Chat.model.js](https://github.com/Steve-Wayne/EICHackathon/blob/main/BACKEND/src/models/Chat.model.js) - [frontend/front/src/App.jsx](https://github.com/Steve-Wayne/EICHackathon/blob/main/frontend/front/src/App.jsx) - [BACKEND/package.json](https://github.com/Steve-Wayne/EICHackathon/blob/main/BACKEND/package.json)

# AI Chatbot System The AI Chatbot System, referred to as "Bridge AI," is a specialized networking assistant designed to facilitate professional interactions. It enables users to find professionals, summarize expertise, generate outreach messages, and suggest engagement strategies through a conversational interface. The system utilizes a modern full-stack architecture with a React-based frontend and a Node.js/Express backend. It leverages the Groq Cloud platform and LangChain framework to process natural language queries using the `llama3-8b-8192` model. Beyond standard chat capabilities, the system programmatically extracts professional names from AI responses to generate direct links to social media profiles such as LinkedIn and Twitter. Sources: [BACKEND/src/controllers/chatbot.controller.js:98-101](), [frontend/front/src/chatbot/chatbot.jsx:194](), [BACKEND/package.json:28-32]() ## System Architecture The AI Chatbot follows a request-response cycle where the frontend communicates with a dedicated API endpoint. The backend acts as an orchestration layer, transforming user input into formatted prompts for the Large Language Model (LLM). ### High-Level Data Flow The following diagram illustrates the flow of a message from the user interface through the AI processing logic and back to the display. ```mermaid flowchart TD User[User Interface] -->|POST /api/v1/chatbot/query| API[Express Backend] API -->|Prompt Construction| LangChain[LangChain Wrapper] LangChain -->|Invoke| Groq[Groq Llama-3 Model] Groq -->|Text Content| LangChain LangChain -->|Content + Extracted Names| API API -->|JSON Response| User User -->|Typewriter Effect| Display[Chat UI] ``` This diagram shows the end-to-end communication path between the React frontend and the LLM-powered backend. Sources: [frontend/front/src/chatbot/chatbot.jsx:136-150](), [BACKEND/src/controllers/chatbot.controller.js:125-155]() ## Backend Implementation The backend is built using Express and utilizes `ChatGroq` from the `@langchain/groq` package to interface with the AI model. ### AI Processing Logic The core logic resides in `processQuery`, which handles the following steps: 1. **Validation**: Ensures the `userQuery` is present in the request body. 2. **Prompt Engineering**: Uses `ChatPromptTemplate` to combine a `systemInstruction` with the human query. The system instruction defines the persona as an "AI networking assistant." 3. **Model Invocation**: Sends the formatted messages to the Groq API. 4. **Post-Processing**: Uses regex to extract professional names from the AI's response and generates social media profile links using a helper function. Sources: [BACKEND/src/controllers/chatbot.controller.js:108-112](), [BACKEND/src/controllers/chatbot.controller.js:145-152]() ### API Endpoints The system exposes a primary endpoint for interaction: | Method | Endpoint | Description | Payload | | :--- | :--- | :--- | :--- | | POST | `/api/v1/chatbot/query` | Processes a user message and returns AI text and profile links. | `{ "userQuery": "string" }` | Sources: [BACKEND/src/app.js:41](), [frontend/front/src/chatbot/chatbot.jsx:144]() ### Data Models While the current interaction is primarily ephemeral, the system includes a Mongoose schema for chat persistence. | Field | Type | Description | | :--- | :--- | :--- | | `user` | ObjectId | Reference to the `User` model. | | `createdAt` | Date | Timestamp of message creation (default: `Date.now`). | Sources: [BACKEND/src/models/Chat.model.js:4-7]() ## Frontend Implementation The frontend is a React functional component (`ChatbotPage`) that manages chat history, loading states, and a typewriter-style response display. ### Component Logic and State The component uses several React hooks to manage the interactive experience: - **Typing Effect**: A `useEffect` hook triggers when a `botResponse` is received, iterating through characters with a `setInterval` to simulate real-time typing. - **Profile Discovery**: If the backend returns a list of `profiles`, these are rendered as interactive cards with LinkedIn and Twitter links. - **Navigation**: The interface includes a sidebar for navigating to "Showcase" or "Help" and a profile dropdown for account settings. ```mermaid sequenceDiagram participant U as User participant C as Chatbot Component participant B as Backend API U->>C: Types query and hits Enter C->>C: Set loading = true, isTyping = true C->>B: POST /query (userQuery) B-->>C: JSON (content, profiles) C->>C: Start typing interval (1ms) loop Every 1ms C->>C: Append char to displayedResponse end C->>C: Set showProfiles = true, isTyping = false ``` The sequence diagram demonstrates the asynchronous handling of the user query and the subsequent simulation of the bot's response. Sources: [frontend/front/src/chatbot/chatbot.jsx:136-180](), [frontend/front/src/chatbot/chatbot.jsx:251-267]() ### Navigation and Routing The application uses `react-router-dom` to integrate the chatbot into the broader platform. ```javascript // From frontend/front/src/App.jsx }/> }/> }/> ``` Sources: [frontend/front/src/App.jsx:21-31]() ## Technical Configuration The system requires specific environment variables and dependencies to function. ### Key Dependencies - **@langchain/groq**: Integration with Groq's high-speed inference engine. - **@langchain/core**: Foundational structures for prompts and message formatting. - **express**: Web framework for the backend. - **react-router-dom**: Client-side routing for the frontend. Sources: [BACKEND/package.json:23-32](), [frontend/front/package.json:18-21]() ### AI Model Details - **Provider**: Groq Cloud - **Model ID**: `llama3-8b-8192` - **System Role**: Networking Assistant - **Output Format**: Text with regex-based entity extraction for social profiles. Sources: [BACKEND/src/controllers/chatbot.controller.js:93-104]() ## Summary The AI Chatbot System provides a specialized networking tool within the Bridge AI platform. By combining the Llama-3 model with programmatic link generation, it moves beyond simple conversation to offer actionable professional networking data. The architecture ensures a responsive user experience through typewriter-effect rendering and structured API responses.