after first response from api chatbotify input field becoming disabled

[ajaysingh7623]

import axios from "axios"; import { React } from "react"; import ChatBot from "react-chatbotify";

const ChatBotify = () => { async function run(params) { const authToken = localStorage.getItem("authToken"); const payload = { userinput: params.userInput, history: { quote: "14235436" } }; const url = "urls"; const config = { headers: { "Content-Type": "application/json", Authorization: Bearer ${authToken} } }; try { const response = await axios.post(url, payload, config);

  if (response.data) {
    params.streamMessage(response.data.bot_response);
  } else {
    console.error("Unexpected response structure:", response);
    return "Unexpected response from server.";
  }
} catch (error) {
  console.error("Error during Axios request:", error);
  return "An error occurred while processing your request.";
}

}

const flow = { start: { message: "Hello, I am ChatBot, How Can I Help You!", path: "model_loop" }, model_loop: { message: async (params) => { await run(params); }, // chatDisabled: false, path: "model_loop" } };

const themes = [ // { id: "solid_purple_haze", version: "0.1.0" }, // { id: "minimal_midnight", version: "0.1.0" } ];

return ( <ChatBot // themes={themes} settings={ { audio: { disabled: false },

       voice: { disabled: false },

    }
  }
  flow={flow}
/>

); }; export default ChatBotify;

this is urgent if anyone got the clue plz tell

[ajaysingh7623]

@tjtanjin @team plz help me for this

[tjtanjin]

Hey @ajaysingh7623, I tried the following on the playground (you can copy and paste it there as well):

const MyChatBot = () => {
    async function run(params) {
        const authToken = localStorage.getItem("authToken");
        const payload = {
            userinput: params.userInput,
            history: {
                quote: "14235436"
            }
        };
        const url = "urls";
        const config = {
            headers: {}
        }
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')

            if (response.data) {
                params.streamMessage(response.data.bot_response);
            } else {
                console.error("Unexpected response structure:", response);
                return "Unexpected response from server.";
            }
        } catch (error) {
            console.error("Error during Axios request:", error);
            return "An error occurred while processing your request.";
        }
    }
    let count = 0;
    const flow = {
        start: {
            message: "Hello, I am ChatBot, How Can I Help You!",
            path: "model_loop"
        },
        model_loop: {
            message: async (params) => {
                return await run(params);
            },
            // chatDisabled: false,
            path: "model_loop"
        }
    };
    return ( <
        ChatBot settings = {
            {
                general: {
                    embedded: true
                },
                chatHistory: {
                    storageKey: "example_smart_conversation"
                }
            }
        }
        flow = {
            flow
        }
        themes={[]} 
        />
    );
};

render( < MyChatBot / > )

This quite closely resembles what you have but I cannot reproduce the issue - can you verify your setup (with your urls) on the playground to see if you face it there as well? You can also reach out on discord if it's urgent - easier and faster to communicate there than via github issues.

[ajaysingh7623]

@tjtanjin now also it is not working for me. facing same issue

[tjtanjin]

@ajaysingh7623 Hmm that is very strange, the playground should be consistent for both of us. Could you take a similar video for the playground as you did for the earlier comment so that I can compare the visual discrepancies if any?

In addition, could you share what browser/OS you're trying this on? Do also try updating to the latest beta release that was published earlier to reduce potential causes of this bugs. Thanks!

[ajaysingh7623]

@tjtanjin in playground it is working fine but don't know why it is not working for me. here is a screenshot i am attaching what error i am getting after first response the code is same

[ajaysingh7623]

@tjtanjin i am using "react-chatbotify": "^2.0.0-beta.1", version. and browser google chrome and operating system windows 10. any changes i have to do in react-chatbotify version please let me know

[tjtanjin]

You can bump up to beta.2, but I doubt that'll solve the issue. Issue with .trim() seems to suggest that within message processing, there's a certain piece of logic that expected a string but got something else. Can you check the bot response type and try removing params.streamMessage to return just a normal string to see if that's the issue?

[ajaysingh7623]

@tjtanjin response.data.bot_response is string type only but if i remove params.streamMessage it will through same error and did not return anything in chatbotify screen as i attach in screenshot same error also coming.

[tjtanjin]

@ajaysingh7623 Hmm let's try this incrementally and see where it starts to break: 1) Remove the function inside message and directly return a string instead. 2) If step 1 works, re-add the function but remove all current logic inside the function and just return a string. 3) If step 2 works, re-add the existing logic but mock the api response with a hard-coded string. 4) If step 3 works, run the existing code (this is where it currently breaks).

You can try the above and see at which step it starts to break. Whichever step it breaks on, send me the settings and flow for the chatbot.

[ajaysingh7623]

@tjtanjin thank you that problem is solved by removing async and await from run call. i have one issue audio is not working code is same

[tjtanjin]

@tjtanjin thank you that problem is solved by removing async and await from run call.

i have one issue audio is not working code is same

Hmm double check that audio is not disabled and it's toggled on. Also note that audio can only start playing after the user interacts with the page. There's also a live audio example that you can refer to on the documentation page.

[ajaysingh7623]

@tjtanjin this is possible onlick of url in page it get redirected ?

and there is way to change avatar and text of tan jin ? Quote created D24TGYVF5-01, with transaction ID 40000045151, use this link to open the quote (https://cpq-itg.ext.hp.com/page/q/D24TGYVF5-01)

[tjtanjin]

@tjtanjin this is possible onlick of url in page it get redirected ?

// image removed as requested

Yup that's achievable via the dangerouslySetInnerHtml option under botBubble that allows you to have html within the chat messages. You're responsible for sanitizing the input though!

[ajaysingh7623]

@tjtanjin thank you that problem is solved by removing async and await from run call. i have one issue audio is not working code is same

Hmm double check that audio is not disabled and it's toggled on. Also note that audio can only start playing after the user interacts with the page. There's also a live audio example that you can refer to on the documentation page.

@tjtanjin i have used few attributes with audio then also it is not working plz help me for this

[ajaysingh7623]

@tjtanjin this is possible onlick of url in page it get redirected ? Quote created D24TGYVF5-01, with transaction ID 40000045151, use this link to open the quote (https://cpq-itg.ext.hp.com/page/q/D24TGYVF5-01)

Yup that's achievable via the dangerouslySetInnerHtml option under botBubble that allows you to have html within the chat messages. You're responsible for sanitizing the input though!

@tjtanjin can you please provide the example or page so, i can refer to it.

[tjtanjin]

@ajaysingh7623

The botBubble properties can be found here. There's also no tapToPlay property within audio so you can remove that (you may find the search bar at the top of the documentation useful for navigating around).

Does the audio example work for you?

[ajaysingh7623]

@ajaysingh7623

The botBubble properties can be found here. There's also no tapToPlay property within audio so you can remove that (you may find the search bar at the top of the documentation useful for navigating around).

Does the audio example work for you?

@tjtanjin i removed tapToPlay attribute then also not working

[ajaysingh7623]

@tjtanjin this is possible onlick of url in page it get redirected ? Quote created D24TGYVF5-01, with transaction ID 40000045151, use this link to open the quote (https://cpq-itg.ext.hp.com/page/q/D24TGYVF5-01)

Yup that's achievable via the dangerouslySetInnerHtml option under botBubble that allows you to have html within the chat messages. You're responsible for sanitizing the input though!

@tjtanjin can you please provide the example or page so, i can refer to it.

but this will provide bold ,italic text not like href link so we can click in it and move to that page @tjtanjin

[tjtanjin]

@tjtanjin this is possible onlick of url in page it get redirected ? Quote created D24TGYVF5-01, with transaction ID 40000045151, use this link to open the quote (https://cpq-itg.ext.hp.com/page/q/D24TGYVF5-01)

Yup that's achievable via the dangerouslySetInnerHtml option under botBubble that allows you to have html within the chat messages. You're responsible for sanitizing the input though!

@tjtanjin can you please provide the example or page so, i can refer to it.

but this will provide bold ,italic text not like href link so we can click in it and move to that page @tjtanjin

It also provides the anchor element <a> for you to make the link clickable. By default it's being treated as a string because the chatbot isn't making assumptions about the output desired.

[tjtanjin]

@ajaysingh7623 The botBubble properties can be found here. There's also no tapToPlay property within audio so you can remove that (you may find the search bar at the top of the documentation useful for navigating around). Does the audio example work for you?

@tjtanjin i removed tapToPlay attribute then also not working

Is the audio example working for you on the documentation website?

[ajaysingh7623]

@ajaysingh7623 The botBubble properties can be found here. There's also no tapToPlay property within audio so you can remove that (you may find the search bar at the top of the documentation useful for navigating around). Does the audio example work for you?

@tjtanjin i removed tapToPlay attribute then also not working

Is the audio example working for you on the documentation website?

yes it is working in documentation but same thing i used in my code it is not working @tjtanjin

[tjtanjin]

@ajaysingh7623 As a sanity check have you checked local audio and have you tried a different device or browser? If the documentation website example is working then there's a good chance that it's a local issue.

[ajaysingh7623]

Thank you @tjtanjin for :-after first response from api chatbotify input field becoming disabled