sevenleaps / chat-template Goto Github PK

View Code? Open in Web Editor NEW

120.0 120.0 27.0 1.18 MB

Chat-Template is a React component that enables quick prototyping of bot conversations.

License: MIT License

JavaScript 99.84% Shell 0.16%

chat-template's People

Contributors

Stargazers

Watchers

chat-template's Issues

Control height of conversation component inside chat

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

Remove the dependency on material UI

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

Help/Question generating conversation

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 :)

Scrollable Conversation?

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.

Push typing messages in chat component.

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

Some render issue

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

Messages disappear in Conversation (help wanted)

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,
        }];

npm run bundle-js not working for [email protected]

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)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.