[Help] Problem installing React Chatbotify

[miguelisidoro]

Hello,

I am having some trouble testing one of your demos. The error is the following:

The Css file is in the folder.

I tried using npm and pnpm and both give error. The commands I ran were:

npm install react-chatbotify pnpm install react-chatbotify

In our React app, the import is:

import ChatBot from 'react-chatbotify';

Thanks

[tjtanjin]

From what I can gather, the error you're facing seems to occur during the SSR process where Vite does not know how to handle the CSS file. That said, adding the following to your vite config should resolve the issue:

ssr: {noExternal: [ /\.css$/, /^react-chatbotify/ ]},

Note that once the above issue is resolved, you'll likely need this FAQ since you're using Remix: https://react-chatbotify.tjtanjin.com/docs/introduction/faq#q8-i-am-using-nextjs-and-running-into-referenceerror-window-is-not-defined-errors-how-can-i-fix-this

I'll update the documentation FAQ to include Remix as well. Thanks!

[miguelisidoro]

Hello @tjtanjin ,

Thanks for reply, I already configured ssr in my vite.config.ts. Now, I am getting:

Our components are SSR and probably, you are expecting this to be client side rendered. What change can I make here to ensure that the component is client side rendered?

Thanks

[tjtanjin]

Hello @tjtanjin ,

Thanks for reply, I already configured ssr in my vite.config.ts. Now, I am getting:

Our components are SSR and probably, you are expecting this to be client side rendered. What change can I make here to ensure that the component is client side rendered?

Thanks

Read the second part of my previous reply again 😛

[miguelisidoro]

Hello @tjtanjin,

Thanks, it solved the problem, I can't see the chat bot yet but that is in my end now. Please keep this open until I get this to work.

Thanks

[tjtanjin]

Hello @tjtanjin,

Thanks, it solved the problem, I can't see the chat bot yet but that is in my end now. Please keep this open until I get this to work.

Thanks

No problem, let me know if you still need help!

[miguelisidoro]

Hello @tjtanjin,

I was able to incorporate React Chatbotify in our solution.

I have a few questions regaring customization:

1. Is it possible to remove the "Talk to me" part? If yes, how?
2. Is it possible to remove the message count part (the red zero at the begging of the chat)? If yes, how?
3. How can we change this image?

4. Is it possible for the chat when maximized to occupy the whole screen in mobile devices?
5. How can we change the chat title from "Tan Jin" to another title?
6. How can we change the icon of the chat?

7. How can we remove the "Powered by..." when the chatbot is maximized?
8. I am using Remix, how can I call a Remix action (server-side code in node,js) to get the response? In the example you have, you call a public API client side. If calling a server-side action is not the way to go, how can we call server-side code from our React component?

My component code so far:

'use client';
import { lazy, Suspense, useEffect, useState } from 'react';

const ChatBot = lazy(() => import('react-chatbotify'));

export default function AIAssistant() {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    setIsLoaded(true);
  }, []);

  async function getResponse() {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
            const data = await response.json();
            return data.title;
        } catch (error) {
            return 'Oh no I dont know what to say!';
        }
    }

    const flow = {
        start: {
            message: 'Hello! How can I help you today?',
            path: 'loop'
        },
        loop: {
            message: async () => {
                const result = await getResponse();
                return result;
            },
            path: 'loop',
        }
    };

  return (
    <>
    {isLoaded && (
      <Suspense fallback={<div>Loading...</div>}>
       <ChatBot options={{theme: {embedded: false}, chatHistory: {storageKey: 'example_smart_conversation'}}} flow={flow}/>
      </Suspense>
    )}
    </>
  );
}

9. How can I change the code in the getResponse function to get the user message (text user is putting in the chatbot before hitting the get response button)?

Thanks

[tjtanjin]

Hey @miguelisidoro, most of the answers can be found on the documentation website here. For ease of your reference, here are the links to each of your bullet points:

1) Refer to tooltip 2) Refer to notification 3) Refer to chatbutton and chatbuttonstyle 4) Currently, the default behavior already maximizes the chatbot when opened on mobile 5) Refer to header 6) Refer to header 7) Refer to footer 8) I'm not familiar with Remix, but action/loader seems to be what you should look at 9) To get the user input within getResponse, you'll need to use params.userInput which is documented here and used repeatedly in this example

Strongly recommend to use the search function and live examples on the documentation website as well, but feel free to reach out if you need more assistance 😊

[miguelisidoro]

Hi @tjtanjin,

Thanks a lot, 8) and 9) are already working. About the others, I will take a look next week.

Have a nice weekend!

Thanks

[tjtanjin]

Hi @tjtanjin,

Thanks a lot, 8) and 9) are already working. About the others, I will take a look next week.

Have a nice weekend!

Thanks

No problem, feel free to close this issue once you've got the others sorted out 😊

[miguelisidoro]

Hello @tjtanjin,

How can we write a response to the chat interface?

My code is:

const flow = {
        start: {
            message: 'Hello! How can I help you today?',
            path: 'loop'
        },
        loop: {
            message: async (params: any) => {
                const result = await getResponse(params.userInput);
                return result;
            },
            path: 'loop',
        }
    };

return (
    <>
    {isLoaded && (
      <Suspense fallback={<div>Loading...</div>}>
       <ChatBot options={{theme: {embedded: false}, chatHistory: {storageKey: 'example_smart_conversation'}}} flow={flow}/>
      </Suspense>
    )}
    </>
  );

Thanks

[tjtanjin]

Hey @miguelisidoro! Could you clarify what you're trying to do? Based on your flow the responses should already be appearing in the chat window (you can do a quick test on the playground as well)

[miguelisidoro]

Hello @tjtanjin ,

You are right, I already accomplished to show a response coming from our API that is already being displayed in the chat window.

Thanks

[miguelisidoro]

Hello @tjtanjin,

I am getting the following message from our API.

The hyperlinks are rendered as text, not as HTML. How can I render the response as HTML?

Thanks

[tjtanjin]

Hello @tjtanjin,

I am getting the following message from our API.

The hyperlinks are rendered as text, not as HTML. How can I render the response as HTML?

Thanks

Hey, you can look under botBubble that has dangerouslySetInnerHtml: https://react-chatbotify.tjtanjin.com/docs/api/bot_options#botbubble

[miguelisidoro]

Hello @tjtanjin ,

Thanks that was it!

My chatbot component is declared like this:

<ChatBot options={{theme: {embedded: false}, botBubble: {dangerouslySetInnerHtml: true}, chatHistory: {storageKey: 'ai-assistant-conversation'}}} flow={flow}/>

Is there a way to access chat history (a collection of messages sent by the user and its responses? What is chatHistory property for?

Thanks

[tjtanjin]

Hello @tjtanjin ,

Thanks that was it!

My chatbot component is declared like this:

<ChatBot options={{theme: {embedded: false}, botBubble: {dangerouslySetInnerHtml: true}, chatHistory: {storageKey: 'ai-assistant-conversation'}}} flow={flow}/>

Is there a way to access chat history (a collection of messages sent by the user and its responses? What is chatHistory property for?

Thanks

The storage key can be used to access the stringified chat history in localStorage. If you want to manipulate the chatbot messages directly in your app, you can also use custom messages: https://react-chatbotify.tjtanjin.com/docs/examples/custom_messages

[miguelisidoro]

Hello @tjtanjin ,

Thanks for the reply.

1- How can we change the background color of the call to action image?

2. How can we change the background color of the user message and the response and the font (both font and font-size)?

3. How can we change the background color on the header of the chat window?

4. How can we change the background color of the send message button?

5. How can we hide the options to send a smile and insert an attachment?

6. How can we change the styles of the send button and its base64 image url? I want to change the button to not having the curve corners and have the button as a normal rectangle

Thanks

[tjtanjin]

Hey @miguelisidoro! Those are all available in the bot options page: https://react-chatbotify.tjtanjin.com/docs/api/bot_options

In particular, you can look at the styles section for all the available props to modify the appearance of the chatbot.

[miguelisidoro]

Hello @tjtanjin ,

Thanks for the quick response.

About the user interface, we were thinking in something like this:

Is it possible to add a logo to the bot response, on the left of the response text? If yes, how?

Thanks

[tjtanjin]

Hey @miguelisidoro! It's possible to adjust the avatar for the bot messages within botBubble. You'll find avatar and showAvatar in there.

[miguelisidoro]

Thanks, I will give it a try!