Canned Replies Plugin Update

Dev
1

Hello everyone! :wave:

Some of you are probably already familiar with @adrapereira 's canned replies plugin. For those who are not, canned replies are quick replies that can be inserted into the editor. The current plugin has some limitations and I am planning on solving some of those. This thread is a small update report.

Any feedback is appreciated. :star:

One of the things I am trying to improve is the user interface. I am going to follow the “make the common case fast” principle. In this case, the common case here is inserting replies. There are two improvements I planned:

  1. improve the user interface (basically, decrease number of clicks needed and remove the modal) and use the preview pane to quickly list all canned replies
  2. use variables in templates so the user does not have to manually edit the replies every time they want to send a new one.

Mockup

First improvement is to add a keyboard shortcut. I thought Ctrl+Space is a good key combination since it is usually used for autocompletion.

step_1.png1464×395 20.8 KB

Second improvement uses the preview pane to list all available canned replies. You can click on them to add or click on the little arrow by the title to show the content of the reply and other controls (this is an accordion of canned replies).

Those replies will be sorted by their usage, so the most used reply is going to be on top. More over, I was thinking of adding a couple of shortcuts for the first 3 or so replies (i.e. Ctrl+Shift+1 inserts first canned reply, Ctrl+Shift+2 inserts second canned reply, Ctrl+Shift+3 inserts third canned reply, etc.)

I discussed with @sam and he suggested two approaches for implementation:

  1. move “preview” into a preview component, then amend the layout for the preview component via plugin. Sam warned me that this may get messy soon.
  2. add a plugin outlet and allow plugins hide the cooked preview HTML. I like this approach more because it makes Discourse more customizable and other plugins can use the preview pane as well.

@eviltrout your feedback on this matter is greatly appreciated.

step_2.png1464×395 25.5 KB

step_3.png1464×395 40.1 KB

Modals are still going to be used for new and edit forms. For now, the mobile interface will stay the same.

Results

Before my updates if you would want to insert the most used reply you’d have to click on options icon from the toolbar, select canned replies, select the reply, press insert and change any variables like @user by hand (at least 5 clicks); after my update Ctrl+Space and Ctrl+Shift+1 should do the same trick.

TODO

  • Populate the title when creating a new topic PR
  • Add support for variables that are replaced when canned reply is inserted.
    eg.: @user is replaced with current username, @op is the person who posted the thread, @last is last poster, etc.
  • Improve user interface (list canned replies in preview pane and add keyboard shortcuts).
15 Likes
2

I am always a fan of making Discourse more customizable! This approach sounds good to me.

6 Likes
3

Looking good, a few bits of feedback to the UI here:

  • Keep top right section for so you can quickly close the UI and switch back to preview

  • Have + New in the bottom right.

  • Get rid of the text “Canned Replies.” text space is very high value, no need to use it up.

  • Every “canned reply” should have a button to quickly copy it to the left side. [<< copy]

  • Keep it simple and just sort alphabetically, it allows better control, add a Filter [ ] box to quickly filter down the list if needed.

  • With every canned reply show a 2 line excerpt, like in the activity section, and optional expansion if its collapsed. Similar UI to this:

image.png945×330 17.1 KB

7 Likes
4

Old UI

1 icon.png1920×1080 134 KB
2 select reply.png1920×1080 117 KB
4 new.png1920×1080 104 KB
3 selected.png1920×1080 122 KB
5 edit.png1920×1080 139 KB
6 inserted.png1920×1080 158 KB

New UI

I tried to keep the old design as much as possible, because I did not want to confuse users that got accustomed to current design. However, the part that is used to select canned replies have been moved in the preview pane. Basically, this is the most used part of this plugin (canned reply selection) and I tried to make this one fast (as I said, make the common case fast).

Screenshot from 2017-06-27 14-58-56.png1920×1080 151 KB

I think it is better to have it on top because you do not have to scroll just to add a new canned reply.

That is the primary clipboard button.

I am currently showing just one line, because I thought two would be too much, but that can be easily changed.

8 Likes
5

The mockup is looking good, I think I would like to merge it in and have a play with it so we can provide a bit more feedback.

6 Likes
6

One question: should I also add a delete button near the paste and edit buttons? It is visible in the edit modal and I did not want to complicate the UI by adding another button. What do you think?

It does work, so it is ready for a merge. You can go on and merge it if you think this as well. The code quality can still be improved (there are some ugly constructs and some duplicated code).

Also, there is one annoying issue with filter field that loses focus after you type a letter. Autofocus does not work. I am looking for a fix now.

7

How will this look/work on mobile?

1 Like
8

For mobiles, I kept the old UI. I am posting a couple of screenshots in a few minutes.

This is how it looks:

127.0.0.1-3000-(iPhone 6 Plus) (1).png414×736 51 KB

127.0.0.1-3000-(iPhone 6 Plus).png414×736 34.7 KB

NOTE: The title really is “My first canned”, there is no bug. I tested the edit function.

6 Likes
9

Delete is a rare action to take, we don’t need to make it super easy. As long as it can be done I am fine.

1 Like
10

I think the original plugin did not support sharing canned replies among users (or, even better, groups). Is this something that might be in the plugin’s future :crystal_ball:?

11

It already shares stuff between users and groups today!

6 Likes
12

@nbianca I just tried this out and am getting:

image.png931×681 14.8 KB

Looks like whatever is meant to be setting display: none on the preview is not working.

Additionally, it looks like I can not scroll through large numbers of canned replies, can you test on local with 50+ canned replies?

3 Likes
14

Hello,

I could not reproduce this at first, but after I rebased on upstream/master, I figured out the problem.

https://github.com/discourse/discourse/commit/a2349b99b69e6c6c9acb12ec12d8e89a2ef5d917#diff-cd7289c7f6f5fd074824251002c3854c

This commit has broke the functionality. I am working on a fix right now.

7 Likes
15

@nbianca this is looking fantastic :heart: :heart_decoration:

Only a few little fixes/features needed and then I can mark this stable!

  • “Find as you type” functionality needs a couple of fixes

    • It should first search through title and prioritize, next fall through to searching body and add that.

    • Every time I type a letter it does a full refresh, it should not re-render header as you type, and since there are only 50 or so canned replies, it can do the searches in memory without needing to involve the server most of the time.

  • After I add a new canned reply it leaves me in the modal, instead of closing it. When I close modal the new canned reply is not in the list until I refresh the page.

  • If preview is hidden, clicking on “canned replies” does nothing

  • Edit canned reply -> close modal -> Add canned reply -> “canned replies” are still rendered below preview area.

5 Likes
16

Huge milestone :rocket: @nbianca we are now running this on meta so the rest of the team can provide feedback.

I am really liking the changes and we are almost there:

  • Can you update Discourse Canned Replies (which is wiki) with some new screenshots and instructions. In particular we need to document all the keyboard shortcuts there?

  • Can we confirm you can enter a canned reply using keyboard alone (without involving the mouse at all)
    You’ll need to:

  • If you click on “canned replies” in the options after it is already open, you should close it (it should act as a toggle)

  • The following sequence (found by @eviltrout) leads to a broken canned replies button, you can no longer trigger it:

  1. new topic
  2. options
  3. canned reply
  4. insert canned reply
  5. cancel
  6. new topic
  7. options
  8. canned reply, doesn’t work

Overall this is looking fantastic and works really well! :+1:

9 Likes
18

The latest changes broke the JavaScript integration tests as well so that needs fixing as well :face_with_head_bandage:

2 Likes
19

Please @nbianca, take a look to this topic, right now canned replies are bugguie :bug:

Screenshot:

2 Likes
20

I am pretty sure you are going to need to be on “latest” for it to work (not beta). If you need something that works now try the “stable” branch.

5 Likes
21

Fixed here:

https://github.com/discourse/discourse-canned-replies/pull/31/files

3 Likes