Initial User Interface Improvements

[joshuaiokua]

Description

Enhance the existing basic user interface by incorporating features that improve usability and closely emulate the ChatGPT experience. Improve the styling and responsiveness of the front end, while ensuring better integration with the back end's LangChain and LangGraph chatbot functionality.

Goal

Refine the front end to more closely resemble a polished, user-friendly chat interface with improved usability features. Ensure the interface is responsive and works seamlessly with the back end. This will lay the foundation for future interface improvements and expansions.

Acceptance Criteria

Front End

• [x] Refine the UI using React to provide:
  • [x] A cleaner, more polished layout using Material-UI or a similar library.
  • [x] Enhanced message input box.
  • [x] Scrollable chat display area that dynamically grows with the conversation.
  • [x] Basic animations or transitions for incoming/outgoing messages.
• [x] (Optional) Improve launchpad UI.

Back End

• [x] Ensure the Node.js/Express back end handles:
  • [x] Improved handling of chat requests, including better error messages for invalid input.
  • [x] Smoother integration of LangChain and LangGraph with support for a persistent conversation state across multiple API calls.
  • [x] Ensure that the chat endpoint can handle requests efficiently and responds in real-time, streaming back responses.

General

• [x] Ensure seamless communication between the front end and back end, with:
  • [x] Front-end UI making asynchronous API requests to the back end.
  • [x] Clear error messages displayed to the user if the chat API fails to respond.