[Bug] Enhance Error Message Clarity in Playground

[mmabrouk]

Description

Current State:
In the playground, error messages are displayed in a manner similar to normal output, which can be confusing. The current error message format is verbose and does not distinctly separate errors from standard outputs. Here is a screenshot illustrating the current state:

Issues Identified:

1. Verbosity of Error Messages: The current format provides excessive information which can overwhelm users.
2. Error Presentation: Errors are displayed as if they are part of normal output, leading to potential misunderstandings.

Proposed Solution

1. Simplify Error Messages:

   • Modify the display format to focus solely on the critical error information.
   • Current Format: Displays a verbose message with a detailed description.
   • Proposed Format:

     ❌ Error code: 429 - {'error': {'message': 'Request too large for gpt-3.5-turbo in organization org-Jnpah7zGvNYUqsr5TazHFJa4 on tokens_usage_based per min: Limit 80000, Requested 393294. Visit https://platform.openai.com/account/rate-limits to learn more.', 'type': 'tokens_usage_based', 'param': None, 'code': 'rate_limit_exceeded'}}
     

2. Enhance Error Visibility:

   • Implement a distinct visual design for error messages to clearly differentiate them from normal output.
   • Suggestion: Use a red background for the text area with white text for the error message, ensuring high visibility and clear distinction.

[mmabrouk]

@bekossy forgot to add that the same issue happens in chat and single prompt