Question & Answer Management

Relevant source files

The following files were used as context for generating this wiki page:

• backend/api/questions.py
• backend/api/answers.py
• web/src/components/QuestionForm.js
• web/src/components/AnswerForm.js
• backend/database.py
• web/src/components/QuestionCard.js
• backend/schemas.py
• web/src/context/WebSocketContext.js
• backend/services/ai_service.py

The Question & Answer (Q&A) Management system is the core feature of the QA-Dashboard application. It provides a real-time platform for users to post questions and receive answers. The system is built with a FastAPI backend and a Next.js frontend, utilizing WebSockets for live updates.

This system handles the full lifecycle of a question, from creation and real-time duplicate checking to answering, status management (Pending, Escalated, Answered), and AI-powered answer suggestions. It supports different user roles, with administrators having extended privileges to manage content and question statuses.

System Architecture

The Q&A system is composed of a backend API, a database, and frontend components that interact to provide a seamless user experience.

Data Models

The core data is structured around User, Question, and Answer entities in a PostgreSQL database, managed via SQLAlchemy.

The diagram below illustrates the relationships between the main database tables involved in the Q&A system.

Question Table

The questions table stores all user-submitted questions.

Column	Type	Constraints	Description
id	UUID	Primary Key	Unique identifier for the question.
user_id	UUID	Foreign Key (users.id)	The ID of the user who posted the question.
message	Text	Not Null	The content of the question.
status	Enum	Default: 'Pending'	The current status (Pending, Escalated, Answered).
created_at	DateTime	Default: now()	Timestamp of when the question was created.
answered_at	DateTime	Nullable	Timestamp of when the question was marked as answered.
created_by	Text	Not Null	The username of the user who posted the question.

Sources: backend/database.py:48-61

Answer Table

The answers table stores all answers related to a specific question.

Column	Type	Constraints	Description
id	UUID	Primary Key	Unique identifier for the answer.
question_id	UUID	Foreign Key (questions.id)	The ID of the question this answer belongs to.
user_id	UUID	Foreign Key (users.id)	The ID of the user who posted the answer.
message	Text	Not Null	The content of the answer.
created_at	DateTime	Default: now()	Timestamp of when the answer was created.

Sources: backend/database.py:64-73

Backend API

The backend is handled by a FastAPI application, which exposes several endpoints for managing questions and answers.

Question Endpoints

These endpoints manage the lifecycle of questions.
Sources: backend/api/questions.py

Method	Endpoint	Description	Authentication
POST	/questions	Creates a new question.	Required
GET	/questions	Retrieves a list of all questions, sorted by status and timestamp.	None
GET	/questions/{question_id}	Retrieves a specific question and its associated answers.	None
PATCH	/questions/{question_id}	Updates the status of a question. (Admin only)	Admin
GET	/questions/{question_id}/suggest-answer	Generates an AI-powered answer suggestion.	Required
POST	/questions/check-duplicate	Checks if a similar question already exists.	None
WS	/questions/ws	Establishes a WebSocket connection for real-time updates.	None

Answer Endpoints

These endpoints manage the creation and retrieval of answers.
Sources: backend/api/answers.py

Method	Endpoint	Description	Authentication
POST	/answers/{question_id}	Creates a new answer for a specific question.	Required
GET	/answers/{question_id}	Retrieves all answers for a specific question.	None
DELETE	/answers/{answer_id}	Deletes an answer. (Admin only)	Admin

Frontend Components

The user interface is built with React and Next.js, comprising several key components for Q&A functionality.

• QuestionForm.js: A form for users to submit new questions. It includes a debounced input to check for duplicate questions in real-time as the user types.
• AnswerForm.js: A form for submitting an answer to a specific question.
• QuestionList.js: A component that renders a list of QuestionCard components.
• QuestionCard.js: Displays a single question, its status, and creator. It provides controls for admins to change the status and for users to view answers or get AI suggestions.
• AnswerList.js: Renders a list of answers for a question and allows admins to delete them.

Sources: web/src/components/QuestionForm.js, web/src/components/AnswerForm.js, web/src/components/QuestionList.js, web/src/components/QuestionCard.js, web/src/components/AnswerList.js

Core Workflows

Creating a New Question

This sequence diagram shows the flow when a user submits a new question, including the duplicate check and real-time broadcast.

Submitting an Answer

This flow outlines how a user submits an answer to an existing question.

Real-time Updates via WebSocket

The system uses WebSockets to push real-time updates to all connected clients, ensuring the UI is always in sync without needing manual refreshes.

1. Connection: The frontend WebSocketProvider establishes a connection to the /questions/ws endpoint on the backend.
2. Initial State: Upon connection, the backend sends a questions_list message containing all current questions, sorted by status and date.
3. Broadcasting Events:
   • When a new question is created, the backend broadcasts a question_created event with the new question data.
   • When an admin updates a question's status, the backend broadcasts a question_updated event.
4. Client-side Handling: The WebSocketContext on the frontend listens for these events and updates its shared state (questions array), which causes the React components to re-render with the new data.

Sources: web/src/context/WebSocketContext.js:14-60, backend/api/questions.py:66-93, 172-179

AI-Powered Features

The application integrates an AI service for two key features:

1. AI Answer Suggestion: Users can click a button on a QuestionCard to request an AI-generated answer. This triggers a call to GET /questions/{question_id}/suggest-answer, which uses the ai_service to generate a response.
   Sources: web/src/components/QuestionCard.js:63-77, backend/api/questions.py:188-208, backend/services/ai_service.py:43-88

2. Duplicate Question Check: As a user types in the QuestionForm, a debounced request is sent to POST /questions/check-duplicate. The ai_service uses a semantic vector store to find similar existing questions and their answers, which are then displayed as a warning to the user.
   Sources: web/src/components/QuestionForm.js:21-61, backend/api/questions.py:211-214, backend/services/ai_service.py:101-143