[Feature Request] Loading indicator for /image and /tts

🚀 Feature Request

Description:
Introduce an immediate feedback mechanism in the chatbot to notify users when their request is being processed, specifically for image and TTS generation. This will provide a more interactive and user-friendly experience.

Problem Statement:
Currently, there can be a noticeable delay between when the user sends a request (e.g., /image or /tts) and when the bot responds with the generated image or audio. During this waiting period, users are left without feedback, which might lead them to believe the bot is unresponsive or broken.

Proposed Solution:
Before starting the image or audio generation process, the bot should instantly send a response to inform the user that their request is being processed. This can be achieved by sending a "Processing..." message accompanied by a card that provides more details about the ongoing task. This will keep users informed and set the expectation that a more substantial response will follow shortly.

Benefits:

Enhances user experience by providing immediate feedback.
Reduces perceived waiting time.
Minimizes user uncertainty during processing-intensive tasks.

Additional Context:
Below is a code snippet that demonstrates a possible implementation:

# ... existing code ...

def handle_message(user_id, user_message):
    try:
        # ... existing code ...

        # Check if the user input starts with /image
        elif user_message.strip().lower().startswith('/image'):
            # ... existing code ...

            # Before the actual image generation, immediately respond with a processing message
            return jsonify({
                'text': 'Processing your image request...',
                'cardsV2': [{
                    'cardId': generate_unique_card_id(),
                    'card': {
                        'header': {
                            'title': 'Processing...',
                        },
                        'sections': [
                            {
                                'widgets': [
                                    {
                                        'textParagraph': {
                                            'text': 'Generating the image based on your request. Please wait...'
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                }],
            })

        # Check if the user input starts with /tts
        elif user_message.strip().lower().startswith('/tts'):
            # ... existing code ...

            # Before the actual text-to-speech conversion, immediately respond with a processing message
            return jsonify({
                'text': 'Processing your TTS request...',
                'cardsV2': [{
                    'cardId': generate_unique_card_id(),
                    'card': {
                        'header': {
                            'title': 'Processing...',
                        },
                        'sections': [
                            {
                                'widgets': [
                                    {
                                        'textParagraph': {
                                            'text': 'Generating the speech output based on your request. Please wait...'
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                }],
            })

        # ... rest of the code ...

    except Exception as e:
        # ... existing code ...

Screenshots / Mockups (Optional):
No visual mockups provided.

Here's the PR! https://github.com/RAHB-REALTORS-Association/chat2gpt/pull/61.

⚡ Sweep Free Trial: I used GPT-3.5 to create this ticket. You have 0 GPT-4 tickets left for the month and 0 for the day. For more GPT-4 tickets, visit our payment portal.To get Sweep to recreate this ticket, leave a comment prefixed with "sweep:" or edit the issue.

Step 1: 🔍 Code Search

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/RAHB-REALTORS-Association/chat2gpt/blob/09e87a026b363c52ab991cd4d6b83aa8373c5109/main.py#L131-L412 https://github.com/RAHB-REALTORS-Association/chat2gpt/blob/09e87a026b363c52ab991cd4d6b83aa8373c5109/main.py#L345-L412

Step 2: 🧐 Snippet Analysis

From looking through the relevant snippets, I decided to make the following modifications:

File Path	Proposed Changes
`main.py`	In the `handle_message` function, add code to respond with a processing message and a card when the user input starts with `/image` or `/tts`.

Step 3: 📝 Planning

I have created a plan for writing the pull request. I am now working my plan and coding the required changes to address this issue. Here is the planned pull request:

[Feature Request] Add loading indicator for /image and /tts sweep/loading-indicator

Description

Introduce an immediate feedback mechanism in the chatbot to notify users when their request is being processed, specifically for image and TTS generation. This will provide a more interactive and user-friendly experience.

Summary of Changes

Modified the handle_message function in main.py to add code that responds with a processing message and a card when the user input starts with /image or /tts.

The processing message informs the user that their request is being processed, and the card provides more details about the ongoing task.

This change enhances the user experience by providing immediate feedback, reducing perceived waiting time, and minimizing user uncertainty during processing-intensive tasks.

Screenshots / Mockups

No visual mockups provided.

Step 4: ⌨️ Coding

File	Instructions	Progress
`main.py`	In the `handle_message` function, add code to respond with a processing message and a card when the user input starts with `/image` or `/tts`.	✅ Commit `09e87a0`	I have finished coding the issue. I am now reviewing it for completeness.

Step 5: 🔁 Code Review

Here are my self-reviews of my changes at sweep/loading-indicator.

Here is the 1st review

The changes in main.py require some modifications. Here are the specific areas that need attention:

Lines 271-334: There are potential errors and unimplemented sections in the text-to-speech part. Please ensure that the closing parenthesis for the processing message is added and a newline is added at the end of the file.

Please make the necessary changes to address these issues. Let me know if you need any further assistance.

I finished incorporating these changes.

To recreate the pull request, or edit the issue title or description. ^{Join Our Discord}

RAHB-REALTORS-Association / chat2gpt