Hey there my fellow AI colleagues, I'm currently trying to impplement Botpress into my Next.js app. I'm facing 2 problems right now. 1. –

window.botpressWebChat.sendEvent({ type: "show" });

on first click takes too long before chat is opened. Why is that and can it be improved? (file

display-chat.tsx

) 2. – in file

ask-q.tsx

is there a way to trigger show event only if chat is not opened? Can I read current open/close state? If so, how can i achieive it? Currently when chat is opened and this button is clicked, there is this animation of opening already opened chat – it looks bad. Thanks in advance, happy coding

components/chatbot.tsx

ts
"use client"
import Script from "next/script"
import React, { useEffect } from "react"

const Chatbot = () => {
  const handleOnLoad = () => {
    console.log("webchat loaded")

    window.botpressWebChat.init({
      ...
    });
  };

  return (
    <>
      <Script
        src="https://cdn.botpress.cloud/webchat/v1/inject.js"
        strategy="afterInteractive"
        onLoad={handleOnLoad}
      />
      <div id="webchat" />
    </>
  );
};
export default Chatbot

components/display-chat.tsx

ts
function DisplayChat({}: Props) {
  return (
    <Button
      size="hero"
      variant="default"
      icon={MessageCircle}
      onClick={() => {
        window.botpressWebChat.sendEvent({ type: "show" });
      }}
    >
      AMA
    </Button>
  );
}
export default DisplayChat

components/ask-q,tsx

ts
"use client"
type Props = {
  question: string
  title: string
};
function AskQuestion({ question, title }: Props) {
  return (
    <Button
      variant="secondary"
      className="justify-self-end text-primary"
      icon={Sparkle}
      onClick={() => {
        window.botpressWebChat.sendEvent({ type: "show" });
        window.botpressWebChat.sendPayload({
          type: "text",
          text: question,
        })
      }}
    >
      ask about {title}
    </Button>
  );
}
export default AskQuestion