dharness / react-chat-window Goto Github PK
View Code? Open in Web Editor NEWIntercom-style live chat window written in react
License: The Unlicense
Intercom-style live chat window written in react
License: The Unlicense
There is no backend, and no communication system baked in.
What did file services/messageBroker.js
do?
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.
Would be nice for Launcher to take an array of multiple chats and make tabs for each chat with each unique user
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 ?
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
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.
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...]
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?
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
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 !
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==">
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.
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
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?
Is there any media(images) upload option as like the emojis and text?
This should work in the component, but should not work in the demo site because it's ugly.
it would be nice for ppl to be able to send pictures, pdfs, screenshots. especially if they need to get helped
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.
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
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
I thought we had fixed this but:
Sample text:
"https://images2.onionstatic.com/clickhole/3456/8/original/600.jpg"
Reproduce:
This seems like it would be an improvement.
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?
Currently the tarballs on NPM only contain README.md
and package.json
and no actual code.
Is there a way to override the styles? If not, would you be open to taking a PR?
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" }}
https://puu.sh/wuou2/1aa22884f6.png
This will send as poopdoop
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 :)
DELETED ISSUE
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.