✨ style: Update Messages Style to Match ChatGPT (ChatGPT UI)

[techwithanirudh]

Summary

Modernized the message components to match ChatGPT’s style and optimized dark mode support.

Note: ⚠️ This P.R. is one of multiple smaller P.R.s split from a larger one by GPT-4o.

Desktop

Before:

After:

Before:

After:

Mobile

Before:

After:

Before:

After:

Change Type

• New feature (non-breaking change which adds functionality)

Testing

N/A

Test Configuration:

N/A

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• My changes do not introduce new warnings
• Local unit tests pass with my changes

[berry-13]

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

[techwithanirudh]

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

Once this pull request is merged, I will add the conditional check for the parameter in the EditMessages pull request, but other than that everything is done.

Update: I have updated the EditMessages functionality to respect the flag.

[berry-13]

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

Once this pull request is merged, I will add the conditional check for the parameter in the EditMessages pull request, but other than that everything is done.

thanks!

[danny-avila]

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

Once this pull request is merged, I will add the conditional check for the parameter in the EditMessages pull request, but other than that everything is done.

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

Once this pull request is merged, I will add the conditional check for the parameter in the EditMessages pull request, but other than that everything is done.

@techwithanirudh many of my friends don't want to use the new "Chat bubble". Could we create a switch for it? additionally, can we include this "var" in the "edit messages" PR?

Once this pull request is merged, I will add the conditional check for the parameter in the EditMessages pull request, but other than that everything is done.

I won't be merging this PR or any of the other UI updates unless there is a way to select different themes for the new UI updates, with the current theme being the default.

[techwithanirudh]

@danny-avila This has already been implemented in this P.R, if this P.R gets merged I could update the others to do the same.

[danny-avila]

@danny-avila This has already been implemented in this P.R, if this P.R gets merged I could update the others to do the same.

Ok, I didn't realize that. I will try it out.

[danny-avila]

The hover buttons should also hover when the entire message row is being hovered in the new style. currently it does not, and it doesn't feel intuitive to hover over the bubble first.

Recording.2024-06-08.183608.mp4

[techwithanirudh]

The hover buttons should also hover when the entire message row is being hovered in the new style. currently it does not, and it doesn't feel intuitive to hover over the bubble first.

Recording.2024-06-08.183608.mp4

@danny-avila I tried to fix this issue, is this fix okay?

[danny-avila]

This PR was closed due to fundamental changes made to messages to accommodate this PR #3191

I'm still open to the bubble message look as an option but geared for dependency injection from the start, with minimal code edits to the main message components and Hover buttons.

I closed this PR as I don't expect the changes to be reconciled from the current state of the PR which already had some merge conflicts before #3191