Frontend - Capture Input and Display Model Response in Chat-like UI

[AjithAkuthota23]

Implement the frontend functionality to capture user input from the "Text Input" field, send it to the backend, and display the response in a persistent, chat-like interface. Each query and response should be stored and shown as separate entries in the "AI Output" area, allowing users to see previous interactions in a chat history format.

Acceptance Criteria

• Input Capture:

  • Capture user input from the "Text Input" field.
  • Trigger the API request when the user clicks the submit button (arrow icon).

• API Request:

  • Send the captured input to the backend API as a POST request with JSON data.

• Response Handling and Display:

  • Append the user’s input as a new entry in the chat history section of the "AI Output" box.
  • Display the model’s response as a corresponding entry below the user’s input.
  • Each query-response pair should be preserved in the "AI Output" box, creating a scrollable chat history.

• Error Handling:

  • Display an error message within the chat history if the backend API request fails.
  • The error message should be clear, e.g., "Failed to get a response. Please try again."

Additional Enhancements:

• Format each entry (e.g., user input on the left, model response on the right, or use different background colors).
• Clear the input field after each submission.
• Enable auto-scrolling to show the latest response in the chat history.