Open camera and giphy directly from attachment menu

[f3dm76]

What are you trying to achieve?

I am using makeLeadingComposerView to make a custom attachments menu. I need to add button for photo, camera and giphy - and open these things directly after pressing corresponding buttons. Currently I can open the photo picker, but can't open camera without going to picker first. And I have to open instantCommands menu first to select giphy. I need to open them directly.

If possible, how can you achieve this currently?

Yes by changing the state binding, but it requires 2 steps
makeLeadingComposerView(state: Binding

What would be the better way?

add .camera and .giphy options to PickerTypeState

GetStream Environment

GetStream Chat version: 4.62.0
GetStream Chat frameworks: StreamChat, StreamChatUI
iOS version: 18.0
Swift version: 6.0
Xcode version: 16.0
Device: sim iPhone 16 pro max

Additional context

[nuno-vieira]

Hi @f3dm76,

I'm not sure I fully understand your problem. You should be able to create your custom view and open any view you want. Here is an example:

public struct CustomComposerLeadingView: View {
    @Injected(\.images) private var images
    @Injected(\.colors) private var colors

    @Binding var pickerTypeState: PickerTypeState
    @State var attachmentPickerShown: Bool = false

    public init(
        pickerTypeState: Binding<PickerTypeState>
    ) {
        _pickerTypeState = pickerTypeState
    }

    public var body: some View {
        HStack(spacing: 16) {
            switch pickerTypeState {
            case .expanded:
                Button {
                    attachmentPickerShown = true
                } label: {
                    Image(uiImage: images.openAttachments)
                        .renderingMode(.template)
                        .aspectRatio(contentMode: .fill)
                        .frame(height: 18)
                        .foregroundColor(Color.gray)
                }
            case .collapsed:
                Button {
                    withAnimation {
                        pickerTypeState = .expanded(.none)
                    }
                } label: {
                    Image(uiImage: images.shrinkInputArrow)
                        .renderingMode(.template)
                        .foregroundColor(Color(colors.highlightedAccentBackground))
                }
            }
        }
        .actionSheet(isPresented: $attachmentPickerShown) {
            ActionSheet(
                title: Text("Select a color"),
                buttons: [
                    .default(Text("Red")) {
                        print("Red")
                    },

                    .default(Text("Green")) {
                        print("Green")
                    },

                    .default(Text("Blue")) {
                        print("Blue")
                    },
                ]
            )
        }
    }
}

[f3dm76]

Hey @nuno-vieira, I'd like to reuse the picker views from inside SC library but use my own menu view.

Currently to open giphy I need to open instant commands menu:
pickerTypeState = .expanded(.instantCommands)
which has giphy and some other options which I don't need:

I need to be able to select the giphy from instant command menu with one tap on my menu's "giphy" button, directly, without showing the black menu from second screenshot. Just what the giphy button would have done if I opened the black menu and tapped the giphy button there, but without opening the black menu. Does this make sense?

Same for the camera, I need to open the camera mode of SC image picker, without opening the image picker itself.

[nuno-vieira]

Hi @f3dm76,

In that case you can't use the pickerState, it should be something like this:

composerViewModel.composerCommand = .init(
                        id: "/giphy",
                        typingSuggestion: .empty,
                        displayInfo: CommandDisplayInfo(
                            displayName: "Giphy",
                            icon: images.commandGiphy,
                            format: "/giphy [text]",
                            isInstant: true
                        )
                    )

You will need to use the view model and set the command like this. At the moment, this is not very friendly, so we are going to discuss internally how we will improve this in the future.

Keep in mind that you will only be able to use the view model on the next SDK release. This PR added access to the view model in this view.

Then in your custom view you can access it by using:
@EnvironmentObject private var composerViewModel: MessageComposerViewModel.

The camera is the same:

composerViewModel.pickerState = .camera

The newest release will allow you to do this. We will let you know once it is released 👍

[f3dm76]

Hey @nuno-vieira, while we are on this subject, I'll also need to be able to start a voice recording from this new menu. And I would also like to reuse SC voice recording view. So is it possible to have a handler like startVoiceRecording in makeLeadingComposerView? Which will do the same as holding the mic button and locking it.

[nuno-vieira]

Hi @f3dm76,

Yes, you just need to provide the voice recording button in the leading view: VoiceRecordingButton(viewModel: viewModel)

[f3dm76]

Hello @nuno-vieira ,VoiceRecordingButton isn't public though, also I need to use my custom button from the menu.

How can I receive the viewModel? If I try environment (inside my LeadingComposerView) - it's empty:
@EnvironmentObject var viewModel: MessageComposerViewModel

SwiftUICore/EnvironmentObject.swift:100: Fatal error: No ObservableObject of type MessageComposerViewModel found. A View.environmentObject(_:) for MessageComposerViewModel may be missing as an ancestor of this view.

[nuno-vieira]

Hi @f3dm76,

We will expose the button on the next version. The view model, I've said in a previous comment as well that will only be available on the next release too.

Thanks,
Nuno

[nuno-vieira]

This is now fixed on the latest release! 🚀