Minified Musings

Ze Zulip Zummer! (My Google Summer of Code 2022 Final Submission)

Nehal Sharma's photo
Nehal Sharma
·

8 min read

I spent this summer doing my bit to make the already awesome open source team chat app Zulip even more awesome, as part of Google Summer of Code (GSoC) 2022. As initially proposed, I mostly worked on a couple primary areas of interest (elucidated below). However, thanks to how flexible the folk at Zulip are, I wasn't limited by a proposal made when I was only slightly familiar with Zulip, and got to explore unfamiliar parts of the codebase too!

Code Contributions:

My main areas of focus were the typeahead system (aka the autocomplete suggestions functionality), the composebox (the text field where one writes messages before sending them), the suggestions for the search bar, and the widgets (special interactive messages).

Typeahead System

My work here mostly revolved around bug fixing and small improvements that make the autocomplete experience more seamless:

  • Add format hinting for spoilers: Until now, whenever the typeahead autocompleted the spoiler syntax, there was no indication if and how a visible header to the hidden content could be added. Now when autocompleting, the word "Header" is added as a placeholder and highlighted, hinting at the format.
  • Update characters allowed before @ and stream mentions: Now the following characters are allowed before @-mentions, stream references (starting with #) and emojis (starting with :) - space, (, {, [, ", ', /, <, both for autocompleting and rendered markdown. Earlier only the opening brace type characters and space was allowed.
  • Don't match descriptions for streams and user groups: Uptil now, both names and descriptions of streams and user groups were matched to show the typeahead suggestions. This led to unexpected behaviour, like for a clear mention of a certain stream, the typeahead menu suggested a completely different stream which had a mention of the first stream in it's description. To prevent such bugs and also since description matching is not really useful for streams and user groups, only names will be matched.
  • Fix thin blue line bug when there is space after >: When the user added space/s right after the topic typeahead symbol >, a thin blue line would be selected at the top of the typeahead menu. To avoid this and to make stream and topic typeaheads' behaviour consistent with each other, space/s right after > is not allowed, like it is not allowed right after #.
  • 2 highlighting bugs fixed: Earlier, mid word parts matching with the search query were also highlighted (made bold), but since actual matching for showing search suggestions is based on prefix matching, this highlighting logic is now made to be in sync with the search suggestions matching logic. Also, for user names, only 1 word searches could be highlighted. For example searching for two wo resulted in no highlighting at all in two words. This too has been fixed.
  • Use additional characters as separators for stream filtering: Uptil now, only space was used as a word separating character when searching streams. This meant that searching for "xyz" would not turn up a stream named "stream-xyz" as one would expect. Since -, _ and / are likely to be used as word separators in stream names, these 3 are added as word separators for streams.

Search Suggestions

Composebox

These PRs primarily aim to make the message composing experience in Zulip as natural and intuitive as possible:

  • Allow ctrl + enter to send in preview mode as well: When the user chose to send the composebox message on pressing ctrl + enter instead of just enter, it only worked in writing mode but not the preview mode. This change makes ctrl + enter send the message even in preview mode, when that setting is chosen.
  • Make switching to and from the preview mode more convenient: When switching back to writing mode after preview mode, the composebox would be out of focus and so the the cursor would seemingly get lost. Now on clearing the preview mode, the composebox is focused and so the cursor is seen blinking at it's original position. Also till now, switching back to writing mode after preview mode needed the user to first focus on the Write (unpreview) button by tabbing to it (if using keyboard) and then select it. To make things easier for keyboard users, now the Write button will be automatically focused on entering preview mode, so going back to writing mode only needs one 'Enter` keystroke.
  • Make it easier to work with numbered and bulleted lists: This PR introduces a formatting button below the compose box that bullets or unbullets the selected (partially or completely) lines. The behaviour is modelled closely after how GitHub's bullet list format button works. A button for numbering / unnumbering that works the same way is also added. Additionally, when the user is typing a numbered / bulleted list in the compose box, on pressing Enter the list syntax will be inserted automatically on a new line, and removed if Enter is pressed on an empty line.
  • Add icons before links for common file types: This is an experimental prototype PR. When links (usually in form of list of files) are one after the other in a message, it gets hard to distinguish one from the other, since the beginnings are not well defined. Now every attachment of a common file type will have a file type based icon preceding it, and other external links will have an external link icon. This way it will now be easier to distinguish multiple links / attachments, and as an added benefit, also gauge their type visually.

Widgets

Zulip's todo and poll widgets are definitely my favourite features, so enhancing the widget experience, whether it be while creating them or interacting with them after they are sent, was for me the highlight of the summer!

  • Add button for modal to create polls: Earlier the /poll slash command was the only way to create polls. To increase user friendliness with a UI, a button to launch a modal to create a poll and send it, has been added to the compose box. The modal has a form which on submission frames a message using the /poll syntax and the data input in the form, and sends it directly, without disturbing the composebox.
  • Improve the functionality and customizability of the todo widget: Earlier the tasks in a list were sorted alphabetically and on marking one complete, it was pushed under any incomplete tasks. This behaviour can be unexpected and confusing, so now each task is appended to the bottom of the list on being added, and no shifting takes place on marking it completed. Message readers can also reorder tasks in the widget by dragging and dropping them. The new order is persisted. Users can now also name task lists by providing the task list title in the /todo command on the same line. The author of a task list can later edit / update the task list title in the todo widget. Uptil now, users could add tasks to a todo widget only it had been sent. But now, users can add an initial list of tasks using the /todo command, with each task on a new line in the compose box, where the 1st : would separate a task from its (optional) description. Apart from these functional changes, 2 visual changes have also been made. To make the separator symbol consistent for both the syntax and widget, : is now used in the widget too, replacing -. Also, the add-task-bar has been moved from the top to the bottom of the list, so that when a new task is added, it'll appear right where it was typed. The new task field would then shift lower.
  • Make the todo and poll widgets look consistent / similar: Earlier the todo and poll widgets' UI differed a lot, especially in the font size and weight, and the color and shape of the checkbox and vote count box. Now the font weights and sizes are consistent in both the widgets and the todo widget's checkboxes and poll widget's vote count boxes are styled similarly. This is a cleaned up version of an older PR.
  • Document /poll in ? widget: To make it easier for users to make polls, their syntax is documented using an example along with its (non dynamic) rendered version.

To summarize all my code, these are all my commits merged so far, and these are all my pull requests in Zulip's main repository.

Non Code Contributions:

PRs reviewed:

Issues created:

Discussion Threads

At Zulip, most development related discussions take place at... you guessed it right, Zulip itself, or at chat.zulip.org to be more specific! The following are some threads (or topics as we call them at Zulip) where I contributed to the discussions substantially:

And this is the thread with my biweekly GSoC updates: #GSoC > Nehal Sharma

I sincerely feel Zulip is an ideal example of an open source product done right. The openness to constructive feedback, the super comprehensive developer documentation, coupled with the vibrant, helpful developer community, and the trust reposed in and the flexibility granted to contributors, makes for an incomparable experience. I worked on features that I felt invested in, in a synergistically collaborative environment, had delightfully intellectually stimulating discussions (and some fun casual ones too!) with the community, and of course, learnt lots along the way.

I'll forever be indebted to Zulip for this summer and will remain a regular contributor, while also continuing to dive deeper into the magical world of open sourcery! ✨

gsocOpen Sourcezulip