chatWindowStyle and TailwindCSS

[jleonard99]

I'm crafting a simple example. I have a parent container and I'd like the chatbot to expand to use the entire container. My current example expands to use the container horizontally, but vertically keeps the inputbar just under the text bubbles.

QUESTION: how do I modify the styles to ensure that the the ChatBot expands to fill the entire parent container?

Parent container:

import React from "react";
import MyChatBot from "./MyChatBot";

function App() {
  return (
    <div className="h-screen w-screen bg-gray-200 flex items-center justify-center">
      <div className="bg-white w-[90%] max-w-md aspect-[9/16] rounded-lg shadow-md flex">
        <MyChatBot />
      </div>
    </div>
  );
}
export default App;import React from "react";

My chatbot:

import ChatBot, { useChatWindow } from "react-chatbotify";

const MyChatBot = () => {
    const settings = {
        general: {
            embedded: true,
            showHeader: false,
            showFooter: false,
        },
    }
    const styles = {
        chatWindowStyle: {
            width:"100%",
            height:"100%",
            overflow: "hidden",
        },
    }
    const flow={
        start: {
            message: "Welcome to the playground 🥳! Edit and experiment as you wish!",
            path: "end_loop"
        },
        end_loop: {
            message: (params) => `Received: ${params.userInput}`,
            path: "end_loop"
        }
    }
    return (
        <ChatBot settings={settings} flow={flow} styles={styles} />
    );
};

export default MyChatBot;

Here is what I'm getting:

[tjtanjin]

Hey @jleonard99! Have you tried removing all the tailwind classes from the parent container then re-adding them one by one to observe the default behavior?

[jleonard99]

Here are the particulars of installed software:

  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.119",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "react": "^18.3.1",
    "react-chatbotify": "^2.0.0-beta.24",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"

[tjtanjin]

@jleonard99 Hmmm that is weird, have you checked the height of the parent element and/or tried using 100vh instead of 100%?

[jleonard99]

BINGO! It appears that height:"100%" doesn't work, but height: "100vh" does work. Thank you!

[jleonard99]

I was able to add the prior tailwindcss code and it continued to work OK. issue closed! Thanks again.

[tjtanjin]

I was able to add the prior tailwindcss code and it continued to work OK. issue closed! Thanks again.

Glad to hear! 😊