dharness/react-chat-window

Intercom-style live chat window written in react

react-chat-window's Issues

How can I add quick replies ?

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 ? Or how can we set a custom component/message type in order to achieve this result ?

Custom Styling

Some other library was covering the whole page with z-index : 2, this should come above everything else hence I forced additional styling in the sc-launcher and sc-chat-window classes. It should probably support a custom styling option which would allow passing inline styles to the window as well as the launcher.

Also I wish to thank the author for creating such an awesome library and making it open source, the code is beautifully written and the library is well segmented, finally the flat design is just wonderful. I will definitely try to help you make it better whenever I get time.

Initial emoji-menu loading is slow

1. Refresh page
2. Load emoji menu
3. It's slow
4. Close, and re-open
5. It's fast

NPM release missing files

Currently the tarballs on NPM only contain README.md and package.json and no actual code.

Sending a link doesn't make it clickable

https://puu.sh/wupeK/d4bc564a7c.png

Launcher should be a button

When using Vimium bindings and pressing f, I think the launcher should become an option. I imagine this also impacts accessibility.

Not sure if this is a demo-specific issue or should be baked in to the Launcher icon.

Composer spacing is wrong on FF

Spacing is weird on the bottom bar here:

Specifically on firefox. The spacing is too large.

SVG loading error

I'm trying to use the Launcher but in first run I got this:

ERROR in ./node_modules/react-chat-window/es/assets/chat-icon.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg xmlns="http://www.w3.org/2000/svg"

I need to install anything besides react-chat-window?

Reduxing

Hi Dylan !
First, thank you for your work, I'm happy to have finally found a nice chat view ;)
I used it for a project, and I totally remelted it to be reduxed.
I also implemented Firebase to handle multiple conversations

Are you interested by a boilerplate version of it ?

Thank again and have a nice day !

Add sound on incoming message

Update react version to resolve UNMET PEER DEPENDENCEY warnings upon install

Using react 16.x and react-dom 16.x

running: npm install react-chat-window --save

├── UNMET PEER DEPENDENCY [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected]
  │ └── [email protected]
  ├── [email protected]
  ├── UNMET PEER DEPENDENCY react@^0.14.0 || ^15.0.0
  ├── UNMET PEER DEPENDENCY react-dom@^0.14.0 || ^15.0.0
  ├─┬ [email protected]
  │ └── [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ ├── [email protected]
    │ ├── [email protected]
    │ ├─┬ [email protected]
    │ │ ├── [email protected]
    │ │ ├── [email protected]
    │ │ └── [email protected]
    │ ├─┬ [email protected]
    │ │ ├── [email protected]
    │ │ └── [email protected]
    │ ├── [email protected]
    │ └── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ └─┬ [email protected]
    │   └── [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ ├── [email protected]
    │ ├─┬ [email protected]
    │ │ └── [email protected]
    │ └── [email protected]
    └── [email protected]

npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 but none was installed.

Files are not downloaded on FF

Clicking a file in the conversation on firefox opens it in the same window, navigating away from the host page.

It should instead download the file if possible

Problem with webpack + css

Hi, I have a problem when i run react with the css

node_modules/react-chat-window/lib/styles/emojiPicker.css:1
[2] (function (exports, require, module, __filename, __dirname) { .sc-emoji-picker {
[2]                                                               ^
[2]
[2] SyntaxError: Unexpected token .

Any clue why is this happening?

I am using Webpack v1.13.1

Add icon on unread message

https://puu.sh/xz7KR/2b5abcbaa4.png

connecting with dialogflow API.AI

Hello,
I am unable to connect this app with my existing Jquery based dialogflow CHATBOT ,

I tried ti change messagelist . State ,
Please help me connect with API.AI

Add on-load prompt

I think it should appear when the page loads/launcher loads and have configurable text/fields
[Uploading Screen Shot 2016-07-12 at 09.32.10.png...]

Pressing the send button doesn't send a message

https://puu.sh/wuoIp/dd302aeaf9.png

Cant resolve css or assets v1.0.7

It appears the project build is broken. Webpack 3.9.1, node v6.11.3, yarn 1.1.0. Digging deeper, none of the css or image assets are in the package.

A few colours are wrong

https://puu.sh/xdJXQ/629fce0620.png

ChatWindow error

I'm trying to use ChatWindow, as I'm only interested in the chatBox. I'm getting this error:

_Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

import {  ChatWindow  } from 'react-chat-window';

...
<ChatWindow
    messageList={this.state.messageList}
    onUserInputSubmit={this._onMessageWasSent.bind(this)}
    agentProfile={{
        teamName: this.props.user.firstname,
         imageUrl: this.props.user.profileImg.url
     }}
     isOpen={this.state.isOpen}
     onClose={this._handleClick.bind(this)}
/>

Do you see anything unusual?

Remove console.log

https://puu.sh/wuoFr/669021e2cd.png

After messing with it for a bit the cursor ended up in the middle of the textarea

https://puu.sh/wuoUq/e8cf86ff79.png

break on long words

https://puu.sh/xdJPw/68abedaec1.png

Remove vestigial socket files

There is no backend, and no communication system baked in.

What did file services/messageBroker.js do?

on safari, emoji and send icons are crooked

https://puu.sh/wuoNa/9b1b3f6a8b.png

Composer does not return to clean state when empty

The file icon should reappear when all text has been removed from the chat input

Check intercom for example

Unable to display svg image for chat icon

Unable to render the svg image for chat icon. When I changed the image to a png image it worked properly, unfortunately I will not be able ship it with my changes.

Another suggestion here, just like how there is a slack image option for props, can we have something like that for this as well ?

Any help will be appreciated. Thanks.

How image tag looks like with svg -
<img class="sc-closed-icon" src="/58a15de4005b6706fd064d5778a80c4e.svg">

How image tag looks like with png -
<img class="sc-open-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAMAAACxiD++AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUxpcf///////////////////////////////////////////////////////3EAnbYAAAAOdFJOUwADZ66SoQjEhnS7/gsNGQL7+wAAAKtJREFUKM+F01sOhCAQRNESFV/I/pc70Og0YJfyJbmHhBAbGGYHstw8IPV4EOGOmERYIhGpxyUAJxHSz/xlC+1FxE64qB1yj1ZID7oXsel+63ovnj2JXUXue+hvrcLugL+EdG+9XBG8X+Kl34J3YM1g/egvIvdx5EK691RIz78YEXdnQrst6m6JqemXmNo+D/WJNAyVePZWWL0WdlfB+l+UAQQReaAc65DB/wGsZgzLN0IQWAAAAABJRU5ErkJggg==">

The blue of the chinow should match the blue of the slackchat logo

https://puu.sh/wuocP/c5f02a42cf.png

Emojis appear too small

https://puu.sh/wuocg/65888e7364.png

Image/Media upload

Is there any media(images) upload option as like the emojis and text?

Emoji picker is not aligned

Emoji picker is not aligned, especially on FF:

It should be aligned, make sure to test on every browser

Multiple chat windows tab

Would be nice for Launcher to take an array of multiple chats and make tabs for each chat with each unique user

on firefox, emoji and send icons have no hover effect

https://puu.sh/wuoKi/fa43d7f892.png

Focus should return to text input after emoji input

Reproduce:

• type in chat input
• clicking the emoji picker icon to open it
• click an emoji
• emoji picker auto closes
• continue typing
• no dice because the focus didn't return to the input after closing the picker

This seems like it would be an improvement.

Cannot toggle chat window from outside Launcher

I'd like to be able to toggle the chat window by passing a function handler or some sort of prop to trigger Launcher's handleClick function. Perhaps bind Launcher's handle click in the constructor instead of render?

Overriding styles

Is there a way to override the styles? If not, would you be open to taking a PR?

Can't attach files

it would be nice for ppl to be able to send pictures, pdfs, screenshots. especially if they need to get helped

When I click on an emoji it automatically sends it

I don't like this behaviour since it's unexpected and I can't make sentences like 'how u doin ;) '

It should put the emoji in the input box

Demo website is ugly

Text doesn't wrap

I thought we had fixed this but:

Sample text:
"https://images2.onionstatic.com/clickhole/3456/8/original/600.jpg"

Make emjoi on toolbar optional

The endpoint I use to send messages, does not allow emoji icons to be displayed. I do want the users to get confused when trying to use the emoji. Is there a way where we can have a settings and can maybe pass a props from launcher to hide/show the emoticon feature ?
Thanks

Don't send empty messages

This should work in the component, but should not work in the demo site because it's ugly.

Update README

Yarn v npm

Hi,
I notice the examples of use/contributing tend to say npm but the repo has a yarn.lock committed. Should one be preferred for contributing in this repo?

JS code published to NPM is not bundled

DELETED ISSUE

v1.0.6 packaged incorrectly

When installing 1.0.6 from npm, the package is missing lib/ es/ etc. If I downgrade to 1.0.5 they re-appear.

I haven't cloned your repo to test for why this is the case, but something in your build/publish phase may be off.

Add date below the message

Hi I want to know the date when the text is sent, its more of a feature request.
Example) {type: 'text', author: "them", data: { text: "You've got to have a story.", date: "Tue, 25 Jul 2017 22:53:41 GMT" }}

Dont send empty message

https://puu.sh/xdJRh/5b4007f67a.png

Multiline chat message

Hi, great work I really like the chat window.

One issue I have is i'm unsure how to create a chat message which contains line breaks.

For example I have list data that looks like this

Data1 ) x
Data2 ) y
Data3 ) z

Is it possible to create newlines to break this data, rather than displaying all on one line?

Thanks :)

sending multiline message doesn't work

https://puu.sh/wuou2/1aa22884f6.png

This will send as poopdoop