search

tjtanjin / react-chatbotify

A modern React library for creating flexible and extensible chatbots.
https://react-chatbotify.com
MIT License
217 stars 121 forks source link

I couldnt able to get data in object format #241

Closed habibunnish closed 1 month ago

habibunnish commented 1 month ago

Bug Description Provide a clear and concise description of the bug.

Steps To Reproduce Steps to reproduce the bug behavior: "use client"; import { lazy, Suspense, useEffect, useState } from "react"; const ChatBot = lazy(() => import("react-chatbotify"));

const ChatBot = () => { const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => { setIsLoaded(true); }, []);

const flow = { start: { message: "Hey! Welcome to shopping Assistant!", path: "loop", }, loop: { message: async () => { return

hello world

}, path: "loop", // Continue the loop after response }, };

return ( <> {isLoaded && ( <Suspense fallback={

Loading...
}> <ChatBot styles={{ chatIconStyle: { width: "50px", height: "50px", backgroundColor: "#BF40BF", marginBottom: "50px", }, chatMessagePromptStyle: { backgroundColor: "red" }, tooltipStyle: { backgroundColor: "#BF40BF", fontSize: "16px", padding: "10px 20px 10px 20px", right: "90px", bottom: "20px", marginBottom: "53px", }, chatButtonStyle: { marginBottom: "55px", }, }} settings={{ header: { title: ( <div style={{ cursor: "pointer", margin: 0, fontSize: 20, fontWeight: "bold", }}

shopping site

) }, tooltip: { mode: "CLOSE", text: "Your Shopping Assistant.", }, general: { embedded: false, showFooter: false, primaryColor: "#636466", secondaryColor: "#855AA6", }, }, notification: { disabled: true, }, chatHistory: { storageKey: "example_smart_conversation" }, }} flow={flow} /> )} </> ); };

export default ChatBot;

Expected behavior I need data in object manner but its only supporting in string

Desktop (please complete the following information):

Mobile (please complete the following information):

tjtanjin commented 1 month ago

Hey @habibunnish, I'm going to need more information (and ideally improved code formatting above). What data are you referring to? Could you highlight the specific part you're having issues with? Thanks!

habibunnish commented 1 month ago

on here its only accepting string messages

const flow = { start: { message: "Hey! Welcome to shopping Assistant!", path: "loop", }, loop: { message: async () => { return "hello world" }, path: "loop", // Continue the loop after response }, };

but if i try to pass object like this as div element its not showing in ui

const flow = { start: { message: "Hey! Welcome to shopping Assistant!", path: "loop", }, loop: { message: async () => { return

hello world

}, path: "loop", // Continue the loop after response }, };

tjtanjin commented 1 month ago

@habibunnish If you're looking to use a div replace message with component instead.

habibunnish commented 1 month ago

can u show me with an example how to do it

tjtanjin commented 1 month ago

can u show me with an example how to do it

You can take a look at this example: https://react-chatbotify.com/docs/examples/custom_component

habibunnish commented 1 month ago

yeah ok thanks alot @tjtanjin

tjtanjin commented 1 month ago

Feel free to reach out again if you need more clarifications!

habibunnish commented 1 month ago

yeah sure.

habibunnish commented 1 month ago

const flow = { start: { message: "Hey! Welcome to Rufus-Gpt!", path: "loop", }, loop: { component: () => (

Hello world

  ),
  path: "loop",
},

};

return ( <> {isLoaded && ( <Suspense fallback={

Loading...
}> <ChatBot styles={{ chatIconStyle: { width: "50px", height: "50px", backgroundColor: "#BF40BF", marginBottom: "50px", }, chatMessagePromptStyle: { backgroundColor: "red" }, tooltipStyle: { backgroundColor: "#BF40BF", fontSize: "16px", padding: "10px 20px 10px 20px", right: "90px", bottom: "20px", marginBottom: "53px", }, chatButtonStyle: { marginBottom: "55px", }, }} settings={{ header: { title: ( <div style={{ cursor: "pointer", margin: 0, fontSize: 20, fontWeight: "bold", }}

shop new

)

          },
          tooltip: {
            mode: "CLOSE",
            text: "Your Shopping Assistant .",
          },
          general: {
            embedded: false,
            showFooter: false,
            primaryColor: "#636466",
            secondaryColor: "#855AA6",
          }              notification: {
            disabled: true,
          },
          chatHistory: { storageKey: "example_smart_conversation" },
        }}
        flow={flow}
      />
    </Suspense>
  )}
</>

);

I have written my code like this but still its not showing in ui where am i going wrong can you plz telll me

habibunnish commented 1 month ago

const flow = { start: { message: "Hey! Welcome to Gpt!", path: "loop", }, loop: { component: () => (

Hello world

  ),
  path: "loop", // Keep the flow looping
},

};

return ( <> {isLoaded && ( <Suspense fallback={

Loading...
}> <ChatBot styles={{ chatIconStyle: { width: "50px", height: "50px", backgroundColor: "#BF40BF", marginBottom: "50px", }, chatMessagePromptStyle: { backgroundColor: "red" }, tooltipStyle: { backgroundColor: "#BF40BF", fontSize: "16px", padding: "10px 20px 10px 20px", right: "90px", bottom: "20px", marginBottom: "53px", }, chatButtonStyle: { marginBottom: "55px", }, }} settings={{ header: { title: ( <div style={{ cursor: "pointer", margin: 0, fontSize: 20, fontWeight: "bold", }}

Aspire Auras

),

          },
          tooltip: {
            mode: "CLOSE",
            text: "Your Shopping Assistant ",
          },
          general: {
            embedded: false,
            showFooter: false,
            primaryColor: "#636466",
            secondaryColor: "#855AA6",
          },
          chatButton: {
            icon: "/auras-white.png",
          },
          notification: {
            disabled: true,
          },
          chatHistory: { storageKey: "example_smart_conversation" },
        }}
        flow={flow}
      />
    </Suspense>
  )}
</>

);

this is the complete code

tjtanjin commented 1 month ago

You're not passing in an element into component, check the syntax and reference the example 🥹

habibunnish commented 1 month ago

component: () => (

Hello world

  ),

  inside <div/>  element and <p/> element iam passing  hello world
tjtanjin commented 1 month ago

component: () => (

Hello world

),

There's no <div> or <p> seen here :3

habibunnish commented 1 month ago

i dont know why its not showing to you when iam sending comment it erasing the div element from component and going

tjtanjin commented 1 month ago

i dont know why its not showing to you when iam sending comment it erasing the div element from component and going

Wrap your entire code with a codeblock, or perhaps take a screenshot

habibunnish commented 1 month ago
sceenshot1
tjtanjin commented 1 month ago
sceenshot1

What version of the library are you on?

habibunnish commented 1 month ago

"react-chatbotify": "^2.0.0-beta.7"

tjtanjin commented 1 month ago

"react-chatbotify": "^2.0.0-beta.7"

Try moving to beta.20. If that still doesn't work, is the component not appearing for you completely or is there some error or anything else happening?

habibunnish commented 1 month ago

I got the soln now its working as i expected i created separate customMessageComponent and called that component