Button Action response not showing

[sudheerkumarala]

Hey @EranGrin,

Firstly, thank you for the widget and I am still exploring the options. However, is the button action response shown in the chat messages when a user clicks over a button?

For me, it doesn't and when I checked in the node_modules package I can see that the typings directory is not recognisable as you can see from the image.

I have called by adding the isActionRespondVisible in my conversation.

Also, I have set the useLoader to true which technically should use the loader when sending replies, which it doesn't.

And maybe a bit more details regarding the new options might be helpful (for a novice like me) 😀

Let me know if I am clear regarding my doubt

[EranGrin]

Hi There, You can see this working example

On the BE PHP side, be sure you add the additional parameter Button::create('Yes, I need help')->value('yes')->additionalParameters(['isActionRespondVisible' => true]),

UseLoader should function as previously mentioned. Upon receiving a user message, an API call is initiated, and the loader is set to true until the response is received.

You can see this the loader in action in the gif example Hope that helpt you

[sudheerkumarala]

This is my code for the ContactSupportConverstaion

public function run(): void
    {
        $question = Question::create('Do you wish to contact the support')
            ->fallback('Unable to contact')
            ->addButtons([
                Button::create('Yes')->value('yes')->additionalParameters(['isActionRespondVisible' => true]),
                Button::create('No')->value('no')->additionalParameters(['isActionRespondVisible' => true]),
            ]);
        $this->ask($question, function($answer){

            if($answer->isInteractiveMessageReply()){
                $value = $answer->getValue();

                if($value == 'yes'){
                    $this->showContactCategories();
                } else {
                    $this->say('Ok, Thank you');
                }
            } else {
                $this->repeat();
            }
        });
    } 

As you can see the setup is fully functional and I am not able to create the button action response into the chat from the gif, can you help me with this?

[EranGrin]

I would be happy to help, but I would need to try to reproduce the issue. Please provide further details regarding your FE BE implementation, or could you provide a minimal repo of a project that demonstrates the issue?

[sudheerkumarala]

So, I have the controller(BotManController) handle method as follows

 public function handle()
    {
        $this->botman->hears('help', function($bot){
            $this->botman->startConversation(new ContactUserConversation());
        });

        $this->botman->fallback(function ($botman) {
            $message = $botman->getMessage();
            $botman->reply('Sorry I don\'t understand: "'.$message->getText().'"');
            $botman->reply('Please type "help" to start the conversation');
        });

        $this->botman->hears('hi', function ($bot) {
            $this->botman->startConversation(new WebConversation());
        });
    }

and here is my index page

@php
    if (!isset($__theme__)) {
        $bgcolor = '#f38e0a';
    } else {
        $bgcolor = $__theme__->bgcolor;
    }

@endphp

<script>
    var bgColor = '{{ $bgcolor }}';
    var botServer = '{{ route('bot.easybot') }}';
    var userName = '{{ auth()->user()->name }}';
</script>

and here is my typescript declaration which I am compiling and loading at the end of the document.

import BotmanWidget from 'botman-extended-web-widget';

//These three variables are passed from the blade view
declare var bgColor: string;
declare var botServer: string;
declare var userName: string;
export default class BotManLib{
    start(){
        new BotmanWidget({
            introMessage: "✋ Hi,"+ userName +"! what can I do for you ?",
            mainColor: bgColor,
            bubbleBackground: bgColor,
            chatServer: botServer,
            useChatAsIframe: true,
            useInAppCss: true,
            useShadowDom: false,
            autoInit: true,
            useLoader: true,
            displayMessageTime: true,
            aboutText: '',
            bubbleAvatarUrl: '/images/bot.png',
            customStylesInjection:`
                .btn{
                    background-color: bgColor !important;
                }
            `,
        });

    }
}

One more thing is that the customStylesInjection as you see is also not working, I have made the btn element bgColor but from my previous message with the gif, it is still taking the default color.

And I have already provided the Conversation run class.

Will this help or any other resource is required?? Please let me know.

Thanks

[EranGrin]

One question before I try to debug, do you have any indication that the configuration take place, for example does the
introMessage: "✋ Hi,"+ userName +"! what can I do for you ?", work as expected?

[sudheerkumarala]

Yes, it is working as expected.

[EranGrin]

The next trivial step would be to check your package's version in package.json and the lock file.

[sudheerkumarala]

Sure, Package.json package-lock.json

[EranGrin]

Hi found few issues with your configuration,

1. you selected useChatAsIframe: true but you did not define the frameEndpoint( if useChatAsIframe is true you must use the frameEndpoint) I would suggest using the web-component encapsulation.
2. in customStylesInjection don't use !important

if this still doesn't work pls provide a minimal repo

[sudheerkumarala]

Ah, there it is. My bad, now it is working with the changes. although I found a small bug(maybe) Whenever I/chatbot do some action, the console is filling like anything, maybe it is for testing purposes but can be removed in the next version.

Have you already added the support for file attachment??

Thanks

[EranGrin]

Yep, I'm aware of this console.log, and as you mentioned, I'll remove it in the next version. 👍

Regarding, file attachment currently, I didn't test this feature as I don't have use for it in my project, BUT you are very welcome to test it and open an issue if something doesn't work.

[sudheerkumarala]

Hey @EranGrin,

Is there any possibility that we can use a custom class for a button, not a default btn class?

[EranGrin]

Can you explain your use case?, if we use web-component or iframe encapsulation, one should not have any css name conflicts

[sudheerkumarala]

I am using the button for a ContactConversation, however, when I use the button in the conversation it affects the menu buttons that I have and use in many places (which is being affected) for example, the homepage by the btn class of this web widget btn class (default class).

This is also because I have different modules on my site which I compile and load at the beginning of the code.

and the style element refers to the default CSS class i.e. chat-no-frame.css file

[EranGrin]

There are many ways to solve these kinds of issues, I would suggest trying to use the useShadowDom as this should solve exactly this kind of issue

[sudheerkumarala]

It worked great. Do you know why it overlaps the CSS class and how using useShadowDom can help? It will help to understand.

[EranGrin]

Check this out https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

[EranGrin]

The console.log leftover was removed in the latest release

[EranGrin]

Hi There, I would like to close this issue

[sudheerkumarala]

The console.log leftover was removed in the latest release

Great, thanks for the patch.

[sudheerkumarala]

Hi There, I would like to close this issue

Sure, I think we can close this issue.