Issue #17 - [FEATURE] Add Stop Generation Button

[rogelio-cmj]

Current Behavior

When a user sends a message, the application initiates a streaming API request to OpenAI. The response is displayed incrementally as tokens arrive, but there is no mechanism to abort the request once it has started.

Reproduction Steps:

1. Launch the Chatbox application and navigate to any chat session
2. Send a message that will generate a long response (e.g., "Write a detailed essay about the history of computing")
3. Observe the AI starts generating a response with streaming text updates
4. Try to find a way to stop the generation mid-response
5. Observe: There is no stop button or cancel mechanism available

Expected Behavior

While the AI is generating a response, a stop/cancel button should appear that allows users to abort the ongoing generation. When clicked, the streaming should immediately stop, the partial response should be preserved in the chat history, and the user should be able to send a new message.

Acceptance Criteria:

• A stop button appears in the UI when AI generation is in progress
• Clicking the stop button successfully aborts the ongoing API request
• The partial response generated before stopping is preserved in the message history
• After stopping, the message input becomes immediately available for new prompts
• The stop button disappears once generation completes naturally or is stopped
• The implementation uses AbortController to properly cancel the fetch request
• No errors are thrown to the console when a request is aborted

Steps To Test

1. Start the application and create a new chat session
2. Send a message requesting a long response: "Write a 1000 word essay about artificial intelligence"
3. Verify that as the AI begins generating, a stop button appears (near the message or input area)
4. Wait for a few sentences to be generated
5. Click the stop button
6. Verify the generation immediately stops
7. Verify the partial response remains visible in the chat
8. Verify no error messages appear in the UI or console
9. Verify you can immediately type and send a new message
10. Send another long-form request and let it complete naturally without clicking stop
11. Verify the stop button disappears when generation completes

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx