react-chat | A chat interface using react | Frontend Framework library

I am creating a chatbot and using React and Material UI. I am running into a problem with the Grid component. I am trying to align the bot messages to the left side of the screen and the user messages on the right side of the screen, however it is not working.

I have tried using alignItems prop on the Grid component, I have also tried using the CSS property float='right' and float='left'. But both do not seem to work.

I have a code sandbox link below showing a minimum reproducible example. Any help will be appreciated.

https://codesandbox.io/s/react-chat-cuvfm?file=/src/App.js

Current Output:

Intended Output: All the blue bubbles should be at the right end of the screen

I'm currently working on a chat app for school, but I want to make it scroll to the bottom automatically as most chat apps do. I've tried every solution I can find so far, and I have only been getting react errors. I'm new to react so there could be some mistakes I don't realize I'm making. Here is what I have

this is my server folder: https://github.com/Yokubjon-J/react-chat-testSuite/tree/master/server. whenever i run "git push heroku master" i am getting the error below:

I am trying out some stuff using the react-chatbot-kit in the front end and getting data from a REST API. Console.log shows the data inside .then, however I am getting the error "Uncaught TypeError: Cannot read property 'map' of undefined" when trying to output the data on the console inside the calling function. I need help to display the returned data in console.log in the function handleApiList(). Thanks in advance.

PS: I am a newbie of course in React :) since I am not clear on how to handle REST API calls that are done asynchronously. Look forward to getting this resolved. Any help and tips on resolving this will be greatly appreciated

Following is the code:

I want to create line chart with chart.js and it needs data with an array.

And I want to create a chart of post views by date. The range was set based on one week, and counters collection was created in MongoDB.

One week is 7 days so I use for loop to query seven times and get each counter value. The results are fine. And there is no problem with frontEnd side but sometime server send wrong data.

DB Data

I am creating a chat application using nodeJs and socket.io. Front end is made using React. I went through many questions on SO, i was not able to get some of them and some doesn't works.

I have this react app I want to dockerize. But the problem is, even though I tried, it doesn't work. But it works pretty well locally

This is how the current directories look like:

I'm trying to use components from dependencies in a project mostly freshly forked from electron-react-boilerplate. The layout is messed up (see pic below). Tried react-chat-window, react-chat-widget, and react-datepicker, so it's across the board. Sorry if this is vague, but I don't know what else to say, and I'm hopefully missing something really basic. Anyone know?

I've also read the electron-react-boilerplate docs. My deps are in ./package.json as suggested, but I also tried putting them into ./app/package.json, which breaks it entirely. This SO answer about material-ui didn't help this either.

Here's the relevant part of my page component, pretty much the same as in the example for react-chat-window:

So, I'm making a small chat tool using react-chat-elements as UI library for chat components. I'd like to modify certain CSS values to match what I want to build without being tied to that specific library the way it is now (it hasn't been updated since 5 months ago).

So what I tried is fork it to my Github account, created the NPM package from it (react-chat-elements-av) without making any changes first to make sure it worked the same way as with the original. However, when I import a specific component from the NPM package I created, say import { MessageBox, SystemMessage } from "react-chat-elements-av";, I get an error saying Attempted import error: 'MessageBox' is not exported from 'react-chat-elements-av'., being the attempted import location: /node_modules/react-chat-elements-av/index.

Now, if I import those two components from the original NPM package, import { MessageBox, SystemMessage } from "react-chat-elements";, everything works and the import location is a bit different: /node_modules/react-chat-elements/dist/main.

Is there something I'm missing on the creation of that dist directory when doing npm install react-chat-elements-av? I literally forked the original repo, and created the NPM package with it, no changes made to any webpack config or so.

Any idea what could be happening here?

Thanks in advance!