The default styling of Next.js react-chatbot-kit is not functioning properly

import Chatbot from 'react-chatbot-kit'
import config from './config'
import ActionProvider from './actionProvider'
import MessageParser from './messageParser'

const ChatBotFlight = () => {
return (
 <div>
    <Chatbot
      config={config}
      actionProvider={ActionProvider}
      messageParser={MessageParser}
    />
</div>
)
}

export default ChatBotFlight

In my project, the implementation looks like this: https://i.sstatic.net/niMG8.png

However, upon checking documentation and tutorial videos, I noticed that adding the Chatbot component results in default styling which is not present in my project.

https://i.sstatic.net/nWXee.png

Answer №1

The CSS file was not imported properly.

In the documentation, there is a section that mentions the following:

import 'react-chatbot-kit/build/main.css'

Please give this a try.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selenium struggles to interact with Javascript:void(0) links

Currently attempting to web scrape a website using Selenium, encountering an anchor element that needs to be clicked with an href value of: javascript:void(0) If interested in viewing the website firsthand, the objective is to select the "I accept" button ...

Is there a way to show a pre-set username value to prevent receiving an error message that says it's undefined?

My navigation bar is set up to show the following on the right side of the screen: Welcome, <%= user %> The issue is that I can only access the user data if I render it in the following way: router.get("/", function (req, res, next) { co ...

What is the method for displaying a view created from a dynamic URL in Django?

I'm facing a challenge with a page that displays a table of all clients from a database. My goal is to enable users to click on a specific client in the table and have only that client's data passed to the next page. My initial approach involved ...

javascript: update hidden field if date is past January 15th

Having a bit of trouble with this one after a full day! The form contains a hidden field called 'grant_cycle'. If the form is submitted after January 15th, it should have the value 'Spring, [year]', or if after July 15th, it should be ...

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

Is there a way for me to display a different value outside of the method by setting the variable?

Hello my dear friends. I have a Vue data variable set up like this: var comp= { data() { return{ polygonString:"" } } } The issue I am facing is that when trying to update the 'polygonString' inside the & ...

Obtaining an array from an object with Meteor and MongoDB

I've been struggling for about a week trying to accomplish a simple task with MongoDB. Here is the document I'm working with: { _id: "mkikuQzrYdyQjL7Ry", links:[ 1: "link1" 2: "link2" 3: "link3" 4: "link4" ] } Is there a way to retrieve al ...

Encountering an error while configuring app.js with git bash

I am just starting out and eager to learn from scratch. I am trying to configure app.js in my sp-node-mysql folder to interact with MySQL using JavaScript. However, I seem to be stuck. Here is the code line in question: var mysql = require("mysql"); and ...

Guide to pulling and showcasing information from XML at 30-second intervals using JQUERY AJAX and HTML

Seeking assistance as a beginner. Looking to retrieve and showcase data (HTML / PHP page) from XML every 30 seconds. XML FILE : <MAINData> <LiveData> <Field no="1">ENG ODI</Field> <Field no="2">ENG</Field> ...

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

As I work on creating a registration web page, ensuring security is key. That's why I'm looking for a way to generate captcha images for added protection. Any suggestions on how I can transform text into captcha images? ...

Is it possible to define key strings as immutable variables in JavaScript/Node.js?

Having transitioned from the world of Java to working with Node.js + AngularJS for my current project, I have encountered a dilemma. There are certain "key Strings" that are used frequently in both client and server-side code. In Java, it is common practi ...

The language features of i18next are causing conflicts with the not-found.jsx in NextJS, resulting in all paths returning a status code of

Currently, I am undertaking my initial project using NextJS and the latest addition I have made is internationalization with i18next (refer to documentation). Everything seems to be functioning smoothly except for one issue: the 404 page in NextJs, which I ...

Steps to make a pop-up window for text copying by users

On my website, I have a link that users need to copy for various purposes. I want to provide an easy way for them to see the link and then manually copy it to their clipboard. Instead of using code to copy to the clipboard, I am looking for a solution whe ...

How do I add a new item to an object using Ionic 2?

example item: this.advData = { 'title': this.addAdvS2.value.title , 'breadcrumb': this.suggestData.breadcrumb, 'price': this.addAdvS2.value.price ...

Accessing Nested States in Angular: A How-To Guide

Looking to access a nested state? Here's how it can be done in your routes.js: .state('menu', { url: '/side-menu-ineevent', templateUrl: 'templates/menu.html', abstract:true }) .state('menu.settings.privacy_policy&a ...

AngularJS ng-click incompatibility causing non-functioning popover content

I've gone through all the posts regarding this issue, but unfortunately, none of them proved to be helpful. It seems that the jsfiddle and plunker links provided are no longer functioning as expected. My objective is quite simple - I want to place a ...

Having trouble retrieving a value within the jQuery.ajax success function

I need to implement jQuery Validator in order to validate if a user's desired username is available during the sign-up process. The PHP script untaken.php is responsible for checking this, returning either ok if the username is free or taken if it is ...

Creating a reactive "virtual" getter for a class in VueJS

There are two objects in my code, BlogPost and Comment, with the following structure: class Comment { constructor (blogId, text) { this.blogId = id this.text = text } } class BlogPost { constructor (id, text) { this.id = id this.te ...

Is it possible to set all UI forms to a readonly/disable mode?

We have a specific requirement where, if the user's access level is set to "READ ONLY", all form input elements should be made readonly. Our coding approach involves using a template HTML that contains widgets which are referenced in the correspondin ...

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...