Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bot message implementation (quick replies copy and inspiration) #1211

Merged
merged 17 commits into from May 21, 2019

Conversation

@xcarpentier
Copy link
Collaborator

@xcarpentier xcarpentier commented Apr 30, 2019

Description

Start to provide a solution to add quick replies list component between MessageContainer and Composer.

Image-1 (1)

Limitations

  • In this first implementation, we just provide a single (radio) and multiple (checkbox) selections of option present to the user.

Data definition and example

interface Reply {
  title: string,
  value: string
}

interface QuickReplies {
  type: 'radio' | 'checkbox',
  values: Reply[]
}
{
  _id: 123,
  text: 'This is a quick reply. Do you love Gifted Chat?',
  createdAt: new Date(),
  quickReplies: {
    type: 'radio', // or 'checkbox',
    values: [
      {
        title: '馃構 Yes',
        value: 'yes',
      },
      {
        title: '馃摲 Yes, let me show you with a picture!',
        value: 'yes_picture',
      },
      {
        title: '馃槥 Nope. What?',
        value: 'no',
      },
    ],
  },
}

Inspirations

Pull-requests

Issues

Closes #826

@xcarpentier xcarpentier changed the title Feature/bot message bot message implementation (quick replies copy and inspiration) Apr 30, 2019
@codecov
Copy link

@codecov codecov bot commented Apr 30, 2019

Codecov Report

No coverage uploaded for pull request base (master@e578df2). Click here to learn what that means.
The diff coverage is 13.72%.

Impacted file tree graph

@@            Coverage Diff            @@
##             master    #1211   +/-   ##
=========================================
  Coverage          ?   31.35%           
=========================================
  Files             ?       22           
  Lines             ?      590           
  Branches          ?      198           
=========================================
  Hits              ?      185           
  Misses            ?      396           
  Partials          ?        9
Impacted Files Coverage 螖
src/MessageContainer.tsx 18.46% <酶> (酶)
src/GiftedChat.tsx 12.42% <酶> (酶)
src/Message.tsx 42.5% <100%> (酶)
src/Bubble.tsx 46.98% <42.85%> (酶)
src/QuickReplies.tsx 6.97% <6.97%> (酶)

Continue to review full report at Codecov.

Legend - Click here to learn more
螖 = absolute <relative> (impact), 酶 = not affected, ? = missing data
Powered by Codecov. Last update e578df2...5e42a59. Read the comment docs.

@xcarpentier xcarpentier changed the title bot message implementation (quick replies copy and inspiration) Bot message implementation (quick replies copy and inspiration) Apr 30, 2019
@xcarpentier xcarpentier requested a review from watadarkstar May 1, 2019
@xcarpentier xcarpentier changed the title Bot message implementation (quick replies copy and inspiration) WIP Bot message implementation (quick replies copy and inspiration) May 1, 2019
@xcarpentier xcarpentier self-assigned this May 1, 2019
@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented May 6, 2019

Untitled

@MLK57
Copy link

@MLK57 MLK57 commented May 9, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen it will be functional and available ?

@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented May 9, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen it will be functional and available ?

ASAP
but you already can use it on npm: 0.9.0-beta.0 (next)

@MLK57
Copy link

@MLK57 MLK57 commented May 13, 2019

This feature interests me a lot, do you have an idea of 鈥嬧媤hen it will be functional and available ?

ASAP
but you already can use it on npm: 0.9.0-beta.0 (next)

I have implemented your feature in my project, do you have Skype, Slack or some other way for me to ask you some questions?

@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented May 13, 2019

I have implemented your feature in my project, do you have Skype, Slack or some other way for me to ask you some questions?

Yes you can find me here: https://slack.reactnative.gallery/

@xcarpentier xcarpentier force-pushed the feature/bot_message branch 2 times, most recently from 741c829 to 34d1084 May 13, 2019
@xcarpentier xcarpentier force-pushed the feature/bot_message branch from 6639dd8 to 5215680 May 17, 2019
@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented May 17, 2019

@MLK57 can you please test the next: 0.9.0-beta.4 ?

@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented May 21, 2019

0.9.0-beta.6

@xcarpentier xcarpentier changed the title WIP Bot message implementation (quick replies copy and inspiration) Bot message implementation (quick replies copy and inspiration) May 21, 2019
@xcarpentier xcarpentier merged commit af7758a into master May 21, 2019
2 checks passed
2 checks passed
ci/circleci: test Your tests passed on CircleCI!
Details
@codecov
codecov/project No report found to compare against
Details
@paolospag
Copy link

@paolospag paolospag commented May 23, 2019

@xcarpentier I'm trying this new feature now and I have to say it's a great idea!
But I was wondering if it is possible to add the support of the quick replies also in the system messages, to be used for example as the first message to start the conversation (like Facebook Messenger).

Do you think it is possible?

@avillega
Copy link

@avillega avillega commented Jun 13, 2019

Great functionality so far. How ever it is very difficult to customize the QuickReplies component. Adding a few style props to the component would make it more configurable and customizable

@xcarpentier
Copy link
Collaborator Author

@xcarpentier xcarpentier commented Jun 14, 2019

@paolospag & @avillega your ideas are excellent!
Feel free to create PR to customize more and another one PR with a system kind of quick replies (like facebook messenger)

@moschap
Copy link

@moschap moschap commented Jul 18, 2019

Hi @xcarpentier, really good job you have done here.
Please one question how do i style the quickReply bubbles? I have added this in the GiftedChat component but it doesn't reflect.

               `
                  <GiftedChat
                      showUserAvatar={false}
                      showAvatarForEveryMessage={false}
                      messages={this.props.chatMessages}
                      onSend={messages => this.onSend(messages)}
                      onQuickReply={this.onQuickReplyEvent}
                      quickReplyStyle={{ color: "red", borderColor: "red"}}
                      renderSend={this.renderSend}
                      minInputToolbarHeight={65}                        
                      user={{
                          _id: this.props.userProfile.data.user.personal.phoneNos,
                          name: this.props.userProfile.data.user.personal.phoneNos
                      }}
                />

`

@nzrin
Copy link

@nzrin nzrin commented Dec 27, 2019

How to customize onQuickReply bubble and how to make it flexdirection:row enabled instead of putting the option side by side.

@xcarpentier xcarpentier deleted the feature/bot_message branch May 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

6 participants