Enhancement Image Background

[fred-bowker]

I can't find a current way to set an image background to be the background of the message view, pretty sure this would be simple enough to implement and I think it would be part of the .chatTheme( ChatTheme(

I'm happy to have a go at making the change and putting up a pull request but want to check to see if there is already a way of doing this and I'm just missing something.

[btoms20]

Hey @fred-bowker, you could set the ChatThemes mainBG to .clear and place an Image in the ChatViews .background() modifier.

ChatView( ... )
    .chatTheme(colors: .init(mainBG: .clear))
    .background { AsyncImage(url: URL(string: "https://...")) }

Let me know if that lets you achieve the effect you're after.

[fred-bowker]

Hi @btoms20, this is working, the only issue is that when the keyboard appears, it squashes the background up. The chat looks pretty good with a background included, I'll put up a pull request with the backgrounds included on one of the examples, I think this would be useful to other people.

[btoms20]

Hey @fred-bowker, I'm not by my computer at the moment, so I don't know the correct syntax but you could prevent the squishing of the Image by either placing the AsyncImage behind the ChatView in its own element or by applying an .ignoresSafeArea(.keyboard) modifier to the AsyncImage? Hope that helps 👍

[fred-bowker]

Hi @btoms20 that works great thanks, I'll maybe put a pull request up for including this as an option in .chatTheme(, and add it to an example. I have a fairly large pull request up for adding giphy functionality, so I'll wait till that get's reviewed and merged first

[btoms20]

@fred-bowker, congrats on merging this in #157.

I noticed a couple small things that you might want to fix:

• The reply view uses the themes background color so setting it to .clear makes the reply pretty difficult to read, especially in dark mode.
• The background images don't extend beyond the safe area like the ChatView does, this results in an awkward space at the bottom of the screen while in portrait mode and along the edges when in landscape mode.

• Also, in landscape mode, the image is distorted pretty bad, you should consider extending the image structure to accept landscape versions of images as well as the current portrait ones then apply them appropriately for the user depending on device orientation.

Otherwise it looks great 👍

[fred-bowker]

Hi @btoms20 thanks for this feedback,

The reply view background and adding images for landscape should be easy changes.

Can you show me an example of with and without for "The background images don't extend beyond the safe area like the ChatView does", as I can't see what you are meaning here.

Thanks Fred

[f3dm76]

Hey @fred-bowker, I think @btoms20 means this part.

[fred-bowker]

Thanks @f3dm76, I'll see what i can do for getting this fixed

[fred-bowker]

@btoms20 Hi, I've made the changes in pull request https://github.com/exyte/Chat/pull/183

[fred-bowker]

@btoms20 @f3dm76 I think this issue can be closed now