The error detail is here:

/Path/To/Project/node_modules/react-chat-widget/lib/index.js:555 return window && document && document.all && !window.atob; ^

ReferenceError: window is not defined at /Path/To/Project/node_modules/react-chat-widget/lib/index.js:555:9 at /Path/To/Project/node_modules/react-chat-widget/lib/index.js:544:46 at module.exports (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:589:46) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13376:36) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13322:1) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13249:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13177:21) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:13079:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object. (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:9460:15) at webpack_require (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:30:30) at Object.defineProperty.value (/Path/To/Project/node_modules/react-chat-widget/lib/index.js:9423:12)

do you have any idea to fix this or some workflow?

I would like to use quick replies in my chat (see the messenger documentation) It would basically be like a bubble, without the agent picture with some propositions, and when the user click on it, it is displayed as a user bubble.

Ideally, the quick replies could have a display value and an internal value (one displayed to the user, and one that can be sent to a backend API)

Do you plan to add this feature ? I think I could make it work with a custom component but it would be nice to have a addQuickReplies() like addLinkSnippet()

Hello,

I have just installed react-chat-widget and set it up correctly.

I can add messages to it using addResponseMessage and everything looks good.

BUT when I enter some text in the chat input and press 'enter' or click on the send button, nothing is happening. Nothing in the console as well, no errors or logs from the handleNewUserMessage callback.

I don't get it as it's the most basic feature.

import React, {useEffect} from "react";
import {addResponseMessage, Widget} from "react-chat-widget";

import "react-chat-widget/lib/styles.css";

function App() {
    useEffect(() => {
        addResponseMessage("Hello");
        addResponseMessage("What would you like to do ?");
    }, []);

    const handleNewUserMessage = (newMessage) => {
        console.log("New message incoming!", newMessage);
        // Now send the message throught the backend API
        addResponseMessage("ok");
    };

    return (
        <div className="App">
            <Widget
                handleNewUserMessage={handleNewUserMessage}>
        </div>
    );
}

any help would be welcome, thanks

This was causing the problem I described in #20. A simple scss class scope fixed the problem. I realize that there might be other places where similar changes might need to be made, but I thought I should keep it to the smallest change possible for this particular fix. I'm open to taking on the more extensive change, but would also need to become much more familiar with your code before I can take that on.

Thanks for this awesome project. It's so elegant, beautiful and easy to use.

I have confused after I trying this awesome component and reading readme.

Is there call backs for clearing input after user inputting message? Or how to get the component of input, so I can clear it manually?

I had searched all issues. Only #12 is talking about input component. But the answer is using css to clear input. Is there any react way to do some thing?

Workaround.

1. Add "paths": { "" : ["src/@custom_types/"] }, to your tsconfig.json

2. Add a folder named @custom_types to your src folder.

3. Add a file named react-chat-widget.d.ts and insert the following content: import { Widget } from 'react-chat-widget';

declare module 'react-chat-widget'{ class Widget extends React.Component<SimpleSelectProps, any> {} function addResponseMessage(input: String): any; function toggleMsgLoader(); function setQuickButtons(input: Array): any; function addUserMessage(input: String): any; function toggleWidget(): any; } 4. Hit save and now all should work.

Hi, as you can see in the following screen shot, in the responsive fullscreen mode, the .widget-container always has height: 100% width: 100% and z-index: 9999, all other elements in my page are beneath this widget-containe layer, so nothing accessible in this mode.

Thanks in advance for your help.

Feature request

Add timestamps to each post. Additionally have the ability to get/set the timestamp of each post.

For example I want to populate the chat from a database of the user's chat history and I need to add the date and time of each message.

Hello,

i dowloaded 'react-chat-widget' via npm ( npm i react-chat-widget ). After I import it in my file.

I want to have a custom launcher.

Can I use customLauncher method or I need to git clone this project ?

Thank you.

If I add this profileAvatar = {logo} on the Widget Component, this will trigger an error.

Full code on App.js

import { Widget, addResponseMessage } from 'react-chat-widget';

import 'react-chat-widget/lib/styles.css';
import logo from './logo-small.png';

class App extends Component {
  componentDidMount() {
    addResponseMessage("Welcome to this awesome chat!");
  }
  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
    // addResponseMessage(newMessage);
  }

  render() {
    return (
      <div className="App">
        <Widget
          handleNewUserMessage={this.handleNewUserMessage}
          profileAvatar = {logo}
          title="Test Title"
          subtitle="Test Sub"
        />
      </div>
    );
  }
}

export default App;

after building and deploying the production bundle, I get this error:

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

anyone else encountered it?

I made handleSubmit originally to provide a boolean response that would allow the message or not. That was not working. I updated it to work and updated the tests to show it in action.

I also updated all the packages to the latest of everything.

I followed the tutorial and after a few tweaks, I managed to get the widget to work more or less as expect. The only problem I'm having right now is that new messages only show up when we reopen the widget.

My project uses React ^18.2.0 (which is probably the source of the problem, considering other issues that are still open)

Bumps loader-utils from 1.4.0 to 1.4.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

My project uses [email protected]"^18.2.0", and I get the following error: npm ERR! Could not resolve dependency: peer [email protected]"^17.0.2" from [email protected] when trying to install this package.

Should I install it by force or maybe a bump in React version is coming in a future update ?

Bumps terser from 5.10.0 to 5.14.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

import { Widget } from "react-chat-widget"; import "react-chat-widget/lib/styles.css";

export default function App() { return (

<Widget />

); }