Feature: Implement EmptyScreen Component for User Guidance in Chat Application

[Codehagen]

Type of feature

💡 Feature

Current behavior

Overview

This feature request aims to enhance the user experience of our chat application by integrating an EmptyScreen component that guides users on initial interaction and by improving the way chat responses are handled and displayed from OpenAI.

Task 1: Integrate EmptyScreen Component for Initial User Guidance

Current Behavior

• The chat interface immediately presents users with a chat input field and placeholder chat bubbles, potentially leaving new users uncertain about how to interact with the chatbot. You will find the page on http://localhost:3000/dashboard/aimagic

We want to move the component up into the card, and render if there has not been any input

Desired Behavior

• Before any user input: Display the EmptyScreen component, which includes welcoming text and example texts that users can select. (Component is done, just need the rendering)

• Upon selecting an example: The chosen text should be placed into the chat input field, ready for submission.

• 

• After submitting input: Remove the EmptyScreen component and display the chat bubbles with the conversation, including the user's input.

Implementation Details

• The EmptyScreen component should offer a selection of predefined example queries that help demonstrate the chatbot's capabilities.
• Selecting an example should populate the chat input field, allowing the user to modify if desired before submitting.
• Submitting the query (either an example or custom input) transitions the UI from the EmptyScreen to the chat interface, showing the user's query as a chat bubble.

Task 2: Streamline OpenAI Responses into Chat Bubbles

Current Behavior

• Chat responses are statically displayed or not effectively integrated with real-time OpenAI responses.

Desired Behavior

• Stream OpenAI responses: Dynamically receive and display OpenAI-generated responses in chat bubbles on the left side, enhancing the conversational flow. Would love to be able to have some kind of streaming like this: JakobHoeg-ollama-ui

Implementation Details

• Implement an asynchronous request to OpenAI API upon user query submission.
• Display the OpenAI response as a chat bubble in the chat interface, ensuring it's clearly distinguishable as the chatbot's response.

Additional context

These enhancements are critical for improving the initial user experience by providing clear guidance on how to interact with the chatbot and by ensuring a dynamic, engaging conversation flow with real-time AI-generated responses.

[jakobhoeg]

I'd very much want to work on this 👍

.take

[github-actions[bot]]

Thanks for taking this issue! Let us know if you have any questions!

[Codehagen]

Hi @jakobhoeg - You need any help with this? Just ask, im here for you ✨

[piyusharmap]

I have implemented something similar recently. I can work on this issue.

.take

[github-actions[bot]]

The issue you are trying to assign to yourself is already assigned.