Close button and Minimise on Outside click

[atishwarchand]

Hello Everyone

Need help. Is there any way to Place a minimize or close button on the header [rightside]? As in screenshot?

AND a way to minimize the chatbot popover on outside click. [Clicking anywhere outside in the window]

[FredrikOseberg]

Yes. You can create your own custom header and include a button:

// Export a function that returns the config
const getConfig = (onClick) => {
  const config = {
    botName: "myBot",
    initialMessages: [
      createChatBotMessage(`Hi I'm ${botName}`),
    ],
    customComponents: {
       // Replaces the default header
      header: () => <div style={{ backgroundColor: 'red', padding: "5px", borderRadius: "3px" }}>This is the header <button onClick={close}>Close</button></div>
    },
  };
  }
}

export default getConfig

// in App.js

const App = () => {
     const [show, toggleShow] = useState(false)

     useEffect(() => {
          const handleOutsideClick = (e) => {
            // simple implementation, should be made more robust.
            if (!e.currentTarget.classList.includes("react-chatbot-kit") {
                  toggleShow(false)
            }
       }

        window.addEventListener("click", handleOutsideClick)

        return () => {
             window.removeEventListener("click", handleOutsideClick)
        }
     }, [])

     const onClick = () => toggleShow(false)

     return show ? <Chatbot messageParser={messageParser} actionProvider={actionProvider} config={getConfig(onClick)} /> : null;
}

[atishwarchand]

Hi @FredrikOseberg for some reasons I cannot implement the "click outside and close chat" thing. Heres my codes.. If you can see and help.

import React, { useState } from 'react';
import { Row, Col } from 'reactstrap';
import Tooltip from 'react-tooltip-lite';
import Chatbot from 'react-chatbot-kit';
import '../styles/chatbot.scss';
import config from "chatbot/config";
import MessageParser from "chatbot/MessageParser";
import ActionProvider from "chatbot/ActionProvider";
import { Icon } from '@iconify/react';
import robotIcon from '@iconify-icons/mdi/wechat';

const ChatBot = () => {

  const [showBot, toggleBot] = useState(false);

  return (
    <Row>
      <Col xs={10}>
        <div className="app-chatbot-container">
          <div style={{ maxWidth: "500px" }}>
            {showBot && (
              <Chatbot
                config={config}
                botAvator={<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                actionProvider={ActionProvider}
                messageParser={MessageParser}
                headerText={<text>Ask chatbot &nbsp;<a style={{ color: "white", fontWeight: "bold", background: "#0a5e9c", borderRadius: "0px" }} href="#" onClick={() => toggleBot((prev) => !prev)}>x</a></text>}
                placeholderText={"Type something..."}
                close="true"
              />
            )}
            <button className="app-chatbot-button" onClick={() => toggleBot((prev) => !prev)}>
              <Tooltip
                className="app-chatbox"
                content={(
                  <div>
                    <div className="app-chatbox">
                      Chat with Sara <br />
                    </div>
                  </div>
                )}
                direction="left"
                forceDirection
              >
                <div>
                  {<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                </div>
              </Tooltip>
            </button>
          </div>
        </div>
      </Col>
    </Row>
  );
};

export default ChatBot;

[FredrikOseberg]

Hi @FredrikOseberg for some reasons I cannot implement the "click outside and close chat" thing. Heres my codes.. If you can see and help.

import React, { useState } from 'react';
import { Row, Col } from 'reactstrap';
import Tooltip from 'react-tooltip-lite';
import Chatbot from 'react-chatbot-kit';
import '../styles/chatbot.scss';
import config from "chatbot/config";
import MessageParser from "chatbot/MessageParser";
import ActionProvider from "chatbot/ActionProvider";
import { Icon } from '@iconify/react';
import robotIcon from '@iconify-icons/mdi/wechat';

const ChatBot = () => {

  const [showBot, toggleBot] = useState(false);

  return (
    <Row>
      <Col xs={10}>
        <div className="app-chatbot-container">
          <div style={{ maxWidth: "500px" }}>
            {showBot && (
              <Chatbot
                config={config}
                botAvator={<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                actionProvider={ActionProvider}
                messageParser={MessageParser}
                headerText={<text>Ask chatbot &nbsp;<a style={{ color: "white", fontWeight: "bold", background: "#0a5e9c", borderRadius: "0px" }} href="#" onClick={() => toggleBot((prev) => !prev)}>x</a></text>}
                placeholderText={"Type something..."}
                close="true"
              />
            )}
            <button className="app-chatbot-button" onClick={() => toggleBot((prev) => !prev)}>
              <Tooltip
                className="app-chatbox"
                content={(
                  <div>
                    <div className="app-chatbox">
                      Chat with Sara <br />
                    </div>
                  </div>
                )}
                direction="left"
                forceDirection
              >
                <div>
                  {<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                </div>
              </Tooltip>
            </button>
          </div>
        </div>
      </Col>
    </Row>
  );
};

export default ChatBot;

Hey, did you forget to add this part?

     useEffect(() => {
          const handleOutsideClick = (e) => {
            // simple implementation, should be made more robust.
            if (!e.currentTarget.classList.includes("react-chatbot-kit") {
                  toggleShow(false)
            }
       }

        window.addEventListener("click", handleOutsideClick)

        return () => {
             window.removeEventListener("click", handleOutsideClick)
        }
     }, [])

[atishwarchand]

@FredrikOseberg I did that bro, but some sort of error occurred. That's why I sent the codes so that you could help directly in the code...

My site broke literally....

[FredrikOseberg]

@FredrikOseberg I did that bro, but some sort of error occurred. That's why I sent the codes so that you could help directly in the code...

My site broke literally....

I'm sorry to hear that, but it's really hard to debug something like that without more information. And it's most likely a common javascript error, and not related to this package :)

I can't see the section I mentioned in your code, and it was only an example. If you copy pasted it into App.js it won't work. Try removing it and adding this instead:

import React, { useEffect, useState } from 'react';

const ChatBot = () => {
     const [showBot, toggleBot] = useState(false);

     useEffect(() => {
          const handleOutsideClick = (e) => {
            // simple implementation, should be made more robust.
            if (!e.currentTarget.classList.includes("react-chatbot-kit") {
                  toggleBot(false)
            }
       }

        window.addEventListener("click", handleOutsideClick)

        return () => {
             window.removeEventListener("click", handleOutsideClick)
        }
     }, [])

  return (
    <Row>
      <Col xs={10}>
        <div className="app-chatbot-container">
          <div style={{ maxWidth: "500px" }}>
            {showBot && (
              <Chatbot
                config={config}
                botAvator={<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                actionProvider={ActionProvider}
                messageParser={MessageParser}
                headerText={<text>Ask chatbot &nbsp;<a style={{ color: "white", fontWeight: "bold", background: "#0a5e9c", borderRadius: "0px" }} href="#" onClick={() => toggleBot((prev) => !prev)}>x</a></text>}
                placeholderText={"Type something..."}
                close="true"
              />
            )}
            <button className="app-chatbot-button" onClick={() => toggleBot((prev) => !prev)}>
              <Tooltip
                className="app-chatbox"
                content={(
                  <div>
                    <div className="app-chatbox">
                      Chat with Sara <br />
                    </div>
                  </div>
                )}
                direction="left"
                forceDirection
              >
                <div>
                  {<Icon icon={robotIcon} className="app-chatbot-button-icon" style={{ fontSize: '40', color: 'white' }} />}
                </div>
              </Tooltip>
            </button>
          </div>
        </div>
      </Col>
    </Row>
  );
};

export default ChatBot;

[atishwarchand]

@FredrikOseberg tried this and other ways, but im not able to get it working.

errors are below..

Do help if your know whats the issue.

[and sorry for being the d*mb one here]

[FredrikOseberg]

Yes. My bad. Swap out .includes with .contains

Includes only works on strings.

ons. 17. feb. 2021 kl. 23:20 skrev Atishwar Chand <notifications@github.com

:

@FredrikOseberg https://github.com/FredrikOseberg tried this and other ways, but im not able to get it working.

errors are below..

[image: Screenshot 2021-02-18 at 10 18 24 AM] https://user-images.githubusercontent.com/61366632/108275416-cfe69c80-71d2-11eb-9503-baad1b19ab37.png [image: Screenshot 2021-02-18 at 10 18 36 AM] https://user-images.githubusercontent.com/61366632/108275426-d412ba00-71d2-11eb-87d4-5f73b9067843.png

Do help if your know whats the issue.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/25#issuecomment-780892651, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPWNIIIFIPWXKHE2G2TS7Q6KJANCNFSM4XXSDRUA .

[atishwarchand]

@FredrikOseberg I had already tried that but still no luck....

nevertheless the error again..

[FredrikOseberg]

Can you post me the output of the following? Inside the handleOutsideClick function.

console.log(e.currentTarget)
console.log(e)

[atishwarchand]

Attached as asked.

[FredrikOseberg]

Attached as asked.

Do you have your code on github? I need to take a closer look.

[proton029]

@atishwarchand is your issue resolved? if so can you share how .

[proton029]

i was able to solve using useContext and useReducer.

[bagdadstyle]

@atishwarchand is your issue resolved? if so can you share how .

bro, can you show me your code? i can't resolve this problem