WIP Quick Replies

[watadarkstar]

Closes #826

This is a work in progress. The documentation for this feature can be found here: #881 by @pdoggi

This will be a collaboration between myself and @pdoggi and the maintainers of this repo.

TODO:

• Initial Docs
• Initial Concept / Work
• Click event @watadarkstar
• QuickReplies in Composer.js @pdoggi
• System message edge case @pdoggi
• Styles
• Final code
• Finalize Docs
• Fix any lint issues
• Write Tests
• Fix any test issues

[watadarkstar]

@xcarpentier @pdoggi We need to decide on whether we want these quick replies to be in Bubble.js like I have them or we want to put them in the Composer.js, etc. Maybe @xcarpentier you can provide some advice here.

Keep in mind that we may want to hide these quick replies if its not the latest message so they don't clutter the chat. We also need to consider if a system message is the last message and whether it should hide the quick replies.

Generally we need to keep track of the last message (that is not a system message) so we know when to display quick replies. OR we just keep track of the last message and forget about the system message issues. OR fix that in another PR. I know for my use case system messages pose a problem when you want to display quick replies but a system message is the last message.

[codecov]

Codecov Report

Merging #886 into master will increase coverage by 0.17%.
The diff coverage is 50%.

@@            Coverage Diff             @@
##           master     #886      +/-   ##
==========================================
+ Coverage   42.73%   42.91%   +0.17%     
==========================================
  Files          20       21       +1     
  Lines         482      494      +12     
  Branches      105      107       +2     
==========================================
+ Hits          206      212       +6     
- Misses        208      213       +5     
- Partials       68       69       +1

Impacted Files	Coverage Δ
src/Bubble.js	45.76% <42.85%> (-0.4%)	⬇️
src/QuickReplies.js	60% <60%> (ø)

---

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 c143b5f...254fda7. Read the comment docs.

[pdoggi]

@watadarkstar I got your branch up and running on my machine. I think you're right that we can do both in Bubble.js and Composer.js. For my use case, I'm hoping to achieve something that looks like this:

My initial thoughts would be to put this over the TextInput in Composer.js., but could be totally wrong. Open to thoughts!

Also, I think that if we do both, we'll need some sort of toggle to specify what version of quick reply you'd want.

I agree that we would need to hide quick replies for message bubbles that are not the last one. Probably a good idea to track the last message that's not a system message.

I'm happy to start working on this, but would love to chat about how we'll implement this! @watadarkstar @xcarpentier I've created a gitter chatroom to facilitate.

Thanks a bunch! Looking forward to working together!

[pdoggi]

I just thought about another thing. I think that each quick reply JSON should contain a payload that can be passed to the backend. At least in my use case, I would like to have that ability.

[watadarkstar]

Yes for that use case you would put it in the composer. Maybe try doing that and I can help you along the way. @pdoggi

[watadarkstar]

@pdoggi :

RE: My initial thoughts would be to put this over the TextInput in Composer.js., but could be totally wrong. Open to thoughts!

I like that approach. Let's work on the Composer.js option first, I think it makes the most sense and then we can build out the Bubble.js option and have a prop that toggles which one to use. But in this PR lets focus on the Composer.js version.

RE: I just thought about another thing. I think that each quick reply JSON should contain a payload that can be passed to the backend. At least in my use case, I would like to have that ability.

Once I implement the click event we won't need this payload and it will make sense on how you can do this. I'll try to work on this next.

RE: I agree that we would need to hide quick replies for message bubbles that are not the last one. Probably a good idea to track the last message that's not a system message.

Do you want to try tackling this @pdoggi and moving the code to the Composer.js instead of Bubble.js?

[watadarkstar]

@xcarpentier @FaridSafi I keep getting this error when I run npm run sync inside the ./example folder. Any ideas what I'm doing wrong?

$ npm run sync                                                                                                                                                                                                           

> [email protected] sync /Users/adriancaroll/workspace/github/react-native-gifted-chat/example
> rm -rf ./node_modules/react-native-gifted-chat; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude __tests__ --exclude node_modules ../ ./node_modules/react-native-gifted-chat/' .. --glob='{**/*.json,**/*.js}'

2018-06-16 20:07 node[65784] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-06-16 20:07 node[65784] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-06-16 20:07 node[65784] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-06-16 20:07 node[65784] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at _errnoException (util.js:1022:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1359:9)

I just need a way to watch files for changes so I can develop this feature faster.

[watadarkstar]

@pdoggi do you have write access to my branch I think I gave it to you?

[xcarpentier]

Sorry I’m not sure what it is.
But it will be cool if you provide a snack link with your branch, since expo sdk 28 it should be possible...

[pdoggi]

@watadarkstar Yes, I saw that you gave me write access to your branch. I will tackle moving the code from Bubble.js to Composer.js.

I have a newbie question on npm run sync, do I make code changes to ./src and then run npm run sync to apply the changes to ./example/node_modules/react-native-gifted-chat/src?

[watadarkstar]

@pdoggi npm run sync runs a watchman that watches "react-native-gifted-chat": "file:..", for changes.

file:... is expecting that you have the following directory structure:

/react-native-gifted-chat/example/`

So it watches for changes inside ./react-native-gifted-chat which is one directory below ./example and ya so you make changes in ./react-native-gifted-chat/src

[pdoggi]

@watadarkstar Oh I see, that makes sense. Should I be using the wml library like the README.md suggests?

[watadarkstar]

@pdoggi I think that would be a good idea. The example .md seems to say otherwise but I imagine the README is more updated.

[pdoggi]

@watadarkstar Ah, now I see the npm run sync in the example/README.md. I tried the wml library and the documented steps are helpful, but missing some information. I burned a few hours trying to get wml start to work. I keep getting this error:

Bundling `index.ios.js`  70.1% (67/80), failed.
error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `./example/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."

So instead, I tried npm run sync and got the same error you did:

2018-06-18 18:48 node[10698] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-06-18 18:48 node[10698] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-06-18 18:48 node[10698] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: Error watching file for changes: EMFILE
    at _errnoException (util.js:1022:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1359:9)

I'll probably for now just rm -rf example/node_modules/ and then run yarn install to sync the files manually. I found a couple issues (#10028 and #9309) that might explain the FSEvents error, but haven't been able to fix it myself.

[watadarkstar]

@pdoggi ya i saw those issues and i tried re-installing watchman using brew but no luck. I think this might fix it though i just didnt have enough time to kill.

[Faolain]

@watadarkstar any updates on this since you last checked in?

[xcarpentier]

I think I will continue soon on this PR, because I will need something like this and it's a good idea to integrate it here.

[watadarkstar]

We have something in our app that does this but I haven't had time to integrate it here. It's similar to this PR but probably not ready for general purpose use, so happy if anyone wants to continue this work :)