Create a React AI Interview Interface for Single Tab Experience

Implement a React-based AI Interview session interface that manages interview state and interaction entirely within a single browser tab for a focused user experience.
**Details and Requirements:**
– State Management:
– Use in-memory state or URL-parameterized routing to store and pass the [interviewId] immediately once the interview starts.
– Pass [interviewId] down through component props or React context.
– Ensure it resets or clears when the interview ends, is left, or canceled.
– UI Behavior:
– Upon clicking the “Start Interview” button:
– Overlay or expand the current tab’s UI to fullscreen.
– Focus the user on the interview session without opening a new tab.
– WebSocket Connection:
– Establish and manage a WebSocket connection to the interview server at:
– `ws` endpoint: ‘http://localhost:8083/ws’ when the interview starts.
– Subscribe to the topic:
– `/topic/interview.[interviewId]` for real-time messages.
– Initial Command:
– Send the initial start command to:
– `/app/interview.start` with payload including [interviewId] and [userId] immediately after connection.
– Bi-Directional Communication Protocol:
– During the interview session:
– Display all AI-generated interview questions or responses in an “AI Transcript” area.
– Use text-to-speech to read AI messages aloud.
– Once TTS finishes, activate the user’s microphone for live speech transcription in a “User Transcript” area.
– After 10 seconds of silence, automatically send the user’s transcribed answer to:
– `/app/interview.answer` via WebSocket, appending it to the “User Transcript”.
– Repeat question-answer cycles until the AI sends an END message.
– Visual Indicators:
– Provide indicators such as displaying “Listening…” during microphone activation.
– UI Separation:
– Ensure the interview session UI clearly separates “AI Transcript” and “User Transcript” areas for easy conversation tracking.
– Interview ID Retrieval:
– The [interviewId] for this session is obtained from the final form submission response, e.g.:
“`json
{ “interviewId”: 7, “status”: “READY”, “role”: “Java Developer”, “experienceLevel”: “MID”, “duration”: 10 }
“`
– WebSocket API Endpoints:
– Include calls to the following endpoints:
– Start interview: `/app/interview.start`
– Send user answers: `/app/interview.answer`
– End interview: `/app/interview.end`
– Tab Exclusivity:
– All WebSocket communication and UI updates must occur exclusively within this single tab and the expanded interview window.
**Steps:**
1. Capture and store [interviewId] immediately at interview start.
2. On “Start Interview” button click, overlay/expand interview UI in the same tab.
3. Initiate WebSocket connection to ‘http://localhost:8083/ws’.
4. Subscribe to ‘/topic/interview.[interviewId]’.
5. Send ‘/app/interview.start’ with [interviewId] and [userId].
6. Display AI Transcript area and User Transcript area.
7. For each AI message:
– Append to AI Transcript.
– Use text-to-speech to speak the message aloud.
– On TTS end, activate the microphone and show “Listening…” in User Transcript.
8. Live transcribe user speech in User Transcript.
9. After 10 seconds of silence, send the answer to ‘/app/interview.answer’ and append to User Transcript.
10. Repeat the conversation cycle until receiving END message.
11. On interview finish or cancel, reset/clear stored [interviewId] and UI.
**Output Format:**
Provide a detailed system prompt for a language model that encapsulates the above instructions and requirements precisely. This should enable the generation of frontend code and WebSocket interaction logic to create the described AI Interview session within a React application. The prompt should be concise yet comprehensive, structured for clarity, and enable stepwise reasoning in the model’s response.