sevenleaps / chat-template Goto Github PK
View Code? Open in Web Editor NEWChat-Template is a React component that enables quick prototyping of bot conversations.
License: MIT License
Chat-Template is a React component that enables quick prototyping of bot conversations.
License: MIT License
I am using chat component
<Chat styles={styles} messages={messagesForConversation}/>
styles object is as follows:
styles = {
chat: {
height: '800px'
}
}
But this just increases the height of chat div, but there is no way to increase the height of Conversation component inside it. Can you please let me know if it can be achieved anyhow?
Chat-Template: 0.0.24
React: 15.4.2
Chrome: 56.0.2924.87
The Avatar component is dependent on the material UI component.
This is not a lot of code to justify the dependency on it.
It was quickly done to get it out at the beginning
I really liked how the messages can be displayed in one full json type.
I'm wondering if, would it be possible to generate <Conversation>
then wait for the user's actual response before proceeding to the next message?
Like for example
const conversationMessage = [
{typing...},
{message (wait for reply before show typing)...},
{typing...},
{message...},
{typing...},
{message...}
]
Any inputs are appreciated, thanks :)
Hello! our company uses this for the chat implementation of our project. One thing that we do not like about (sorry!) is the part where the oldest message is being overlapped by the parent div. Is there a way to fix this issue? Thanks.
I am using chat component and trying to push a typing message for the duration between enter key press and reply comes back. This is the modified addMessage function:
addMessage(value) {
const message = {
message: value,
inbound: false,
backColor: '#dcf8c6',
duration: 800,
};
this.state.messages.push({type: 'typing',
duration: 500,
inbound: true});
this.setState({messages: this.state.messages});
setTimeout(() => {
this.state.messages.push(message);
this.setState({ messages: this.state.messages });
}, 500);
}
This works fine except it pushes the typed message twice. Can you please help me debug this?
Chat-Template: 0.0.24
React: 15.4.2
Chrome: 56.0.2924.87
Folks, not sure how precisely explain -
During initial rendering of message history, render happens pretty well:
<Conversation turnOffLoop messages={msgs}/>;
But when msgs object gets updated (say, new element added to it), rendering does not seems happening - I see only old messages.
Vitaliy
Hi, when using component it works really fine.
But could be possible to do not disappear the messages after some duration?
I have tried with duration:0
and duration:-1
, but still the messages disappear and after some time become visible again.
Is this feature supported?
const messages = [{
message: 'How do I use this messaging app?',
from: 'right',
backColor: '#3d83fa',
textColor: 'white',
avatar: 'https://www.seeklogo.net/wp-content/uploads/2015/09/google-plus-new-icon-logo.png',
duration:0,
inbound: true,
}];
Chat-Template version - 0.0.26
React version - 15.1.0
Browser version - chrome 64.X
$ npm run bundle-js
> [email protected] bundle-js C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> npm run test && npm run bundle-js-dev && npm run bundle-js-prod
> [email protected] test C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> npm run lint && npm run testonly
> [email protected] lint C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> eslint src
> [email protected] testonly C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> mocha --require .scripts/mocha_runner src/**/tests/**/*.js
<Avatar /> shallow
√ renders an Avatar element with one message
<Avatar /> mount
√ renders an Avatar element with one message (41ms)
<Conversation /> shallow
√ renders a Messages element with no messages
Warning: Failed propType: Required prop `messages[0].inbound` was not specified in `Conversation`.
√ renders one Messages element with one message
<Conversation /> mount
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
√ renders a Messages element with no messages
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
√ renders one Messages element with one message
<ImageLoader /> shallow
√ renders a ImageLoader element with no images
√ renders one ImageLoader element with one image
<Message /> shallow
√ renders a Message element with one message
√ renders a Message element with one message with an Avatar
<MessageContent /> shallow
Warning: Failed propType: Required prop `message.inbound` was not specified in `MessageContent`.
√ renders a MessageContent element with no messages
√ renders one MessageContent element with one message
<Messages /> shallow
√ renders a Messages element with no messages
√ renders one Messages element with one message
<Typing /> shalllow
√ renders Typing to have 4 divs
15 passing (271ms)
> [email protected] bundle-js-dev C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> webpack --config ./webpack.dev.config.js
Hash: 182b32d2f531fa8b2036
Version: webpack 1.13.1
Time: 41ms
[0] ./src/bundle/wrapper.js 0 bytes [built] [failed]
ERROR in ./src/bundle/wrapper.js
Module parse failed: C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\src\bundle\wrapper.js Unexpected token (6:18)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:18)
at Parser.pp$4.raise (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseBlock (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2105:24)
at Parser.pp$3.parseArrowExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2087:10)
at Parser.pp$3.parseParenArrowList (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1902:17)
at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1870:21)
at Parser.pp$3.parseExprAtom (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1796:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$1.parseVar (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1034:28)
at Parser.pp$1.parseVarStatement (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:917:10)
> [email protected] bundle-js-prod C:\Users\rajat\projects\knowledge\git\duplicate\chat-template
> webpack -p --config ./webpack.prod.config.js
Hash: a604358a5c60be13ae79
Version: webpack 1.13.1
Time: 53ms
[0] ./src/bundle/wrapper.js 0 bytes [built] [failed]
ERROR in ./src/bundle/wrapper.js
Module parse failed: C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\src\bundle\wrapper.js Unexpected token (6:18)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:18)
at Parser.pp$4.raise (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseBlock (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$3.parseFunctionBody (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2105:24)
at Parser.pp$3.parseArrowExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:2087:10)
at Parser.pp$3.parseParenArrowList (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1902:17)
at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1870:21)
at Parser.pp$3.parseExprAtom (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1796:19)
at Parser.pp$3.parseExprSubscripts (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$1.parseVar (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:1034:28)
at Parser.pp$1.parseVarStatement (C:\Users\rajat\projects\knowledge\git\duplicate\chat-template\node_modules\acorn\dist\acorn.js:917:10)
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.