👨🏻💻 Introduction
Hello Guys, my summers were full of learning for me and I had a great learning experience in contributing to open source under Google Summer of Code in Rocket.Chat. This blog post contains the report of all the work done by me during my GSoC period for developing a Terminal User Interface Client for Rocket.Chat.
Project link - https://github.com/RocketChat/rocketchat-tui
🔭 Project Abstract
The aim of my project is to develop an attractive, lightweight and easy to use client for Rocket.Chat which is specially made for geeks. It is developed in golang using bubbletea and lipgloss package provided by charm. By using bubbletea we can make attractive terminal user interfaces using it’s different packages.
To communicate with rocketchat apis and database using Rocket chat go SDK for all the rest and real time APIs needed in the TUI. Developing separate api’s in the SDK for TUI specific use cases or adding new versions of some APIs.
🎯 Implementation
- Firstly After discussing with my mentors I started working on designing a basic TUI in terminal with some of the basic functionalities from the Rocket Chat web client. Firstly I designed the main chat TUI. I designed them on Canva. It can be viewed here.
- To understand the working of Rocket.Chat server and Go SDK so that I can use it in the TUI I read its main server code and developer docs. I came to know that some part of the Rocket.Chat server uses Meteorjs so I read about it to know how it works. You can read about meteorjs from here. Reading from rocket chat developer docs about REST and Realtime APIs which I need and trying them in Postman.
- To develop TUI using bubbletea I read about it’s usage from its original github repo. I also read the codebase of different TUIs made using bubbletea to get a better understanding of its usage and understand how I can use it to add my required functionality in the TUI. Reading the codebase of different projects made using it helped me the most to understand it.
- I first developed the Terminal UI as per the design. I made it in golang using bubbletea and lipgloss with some placeholder text. So that after it I can work on the specific APIs required for the TUI from the Go SDK.
- I learned how to use the local Go package in my project so that I can test the local APIs which I developed in Go SDK in the TUI.
- I Added listing of channels in the sidebar of the TUI, added message sending, switching between channels and loading previous message history.
- I added realtime sending and receiving of messages in the chat.
- I added user login screen, added caching of user token, login using cached token and token expiration.
- I added listing, filtering, sending of slash command and @ mentioning of channel members while sending messages.
- I added a flag to give server url value at the time of starting TUI, so that we can chat from any server so that all Requests will be sent to it.
- Removing some of the bugs which I encountered during adding different features, cleaning up code, adding comments and updating readme with instructions of how to run TUI.
⚙️ Demo Video
🛠️ Tools and Technologies used
- Golang
- Bubbletea Go package
- Lipgloss Go package
- Meteorjs
- BoltDb Go package
- Postman
- Canva
⚠️ Challenges
- How to manage the complete flow and state of the TUI - It's the most challenging part to keep everything in sync. I'm new with the framework used so learning more about it, how it's being used in other projects and keeping things simple.
- Adding realtime message sending and receiving - Making some POC applications. Reading developer documentation of bubbletea and Rocket.chat. Understanding the codebase of projects made using bubbletea.
- To show past message history - Searching and trying how it's implemented on other rocket.chat platforms. Examining their endpoints, reading about different endpoints from developer documentation and then adding it in the SDK.
- Adding slash commands and @ user mentioning - Covering edge cases when to show list, when to hide it, when to filter it and when to select it. Debugging some unexpected bugs which arise during its development.
💻 Contributions
- PR's
| Topic | Link |
|---|---|
| [NEW] Complete TUI V1 [MERGED] | https://github.com/RocketChat/rocketchat-tui/pull/5 |
| [NEW] Added rest function to list all slash commands [MERGED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/61 |
| [NEW] Rest function to fetch list of members of a group [MERGED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/66 |
| [NEW] Added function to search users and rooms while mentioning in message [MERGED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/69 |
| Added Name field mapping in User [MERGED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/63 |
| Modified dm, group, channel history functions [MERGED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/65 |
| Changed the format of time so that it get parsed properly [MERGED] |
https://github.com/RocketChat/Rocket.Chat.Go.SDK/pull/67 |
- ISSUES OPENED
| Issue | Link |
|---|---|
| Implement basic services in TUI [CLOSED] | https://github.com/RocketChat/rocketchat-tui/issues/2 |
| To Figure out How to Handle User Navigation in Different Sections and Interaction with different bubbletea elements through keys [CLOSED] | https://github.com/RocketChat/rocketchat-tui/issues/4 |
| Fix: authentication issue [CLOSED] | https://github.com/RocketChat/rocketchat-tui/issues/3 |
| Adding rest function to get list of group members [CLOSED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/issues/64 |
| To get name of user in realtime loadhistory function [CLOSED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/issues/62 |
| To add functions for listing and making slash commands [CLOSED] | https://github.com/RocketChat/Rocket.Chat.Go.SDK/issues/60 |
| Adding caching of past messages in cache | https://github.com/RocketChat/rocketchat-tui/issues/7 |
| Adding users search functions while mentioning users using @ instead of searching them in group members | https://github.com/RocketChat/rocketchat-tui/issues/6 |
| Adding functionality to update message in the messages list | https://github.com/RocketChat/rocketchat-tui/issues/9 |
| Adding a go linter for consistent linting and formatting of code | https://github.com/RocketChat/rocketchat-tui/issues/8 |
TUI COMMITS - https://github.com/RocketChat/rocketchat-tui/commits/main
🙏 Mentors
My superbly amazing mentors for this project are Aaron Ogle(@geekgonecrazy) and Debdut Chakraborty(@debdutdeb). I really want to thank them very very much for supporting, helping and guiding me throughout these weeks, without them this project wouldn't have been possible. They are so kind and understanding. I learned many things from them. I extended my project to add some more features in it but due to some personal circumstances I was not able to work much on them and they supported me in my tough time. I’ll forever cherish the bond I made with them and will never forget the time I spent with them during Gsoc.
🤖 Features to Implement
- Caching of messages
- Editing and updating a message
- Adding formatting of message
- Adding threaded conversations
- Creating public and private channels
- Making TUI responsive
- Adding support for emoji detection and sending.
🔗 Important Links
| Topic | Link |
|---|---|
| Developer Documentation | https://developer.rocket.chat/ |
| Rocket Chat Server Code | https://github.com/RocketChat/Rocket.Chat |
| TUI Code | https://github.com/RocketChat/rocketchat-tui |
| Go SDK Code | https://github.com/RocketChat/Rocket.Chat.Go.SDK |
| Bubbletea by Charm | https://github.com/charmbracelet/bubbletea |
| TUI public communication channel | https://open.rocket.chat/channel/rocket-chat-text-terminal-client-tui |
| Meteorjs | https://www.tutorialspoint.com/meteor/index.htm |
| TUI design | https://bit.ly/3hWR6VE |
| Demo presentation | https://bit.ly/3EN5N6J |
| GSoC Proposal | https://bit.ly/3tLOE7a |
| Demo presentation video |  |
🚀 Open for Contributions
Give it a try and share your feedback with me. I'd love to hear back from you all. Please open bug reports/issues on github for any new features that you'd like to see or problems you might've been facing.
MAY THE SOURCE BE WITH YOU !
Go check it out and if you liked it please star it ⭐
😄 About Me
I’m Sitaram Rathi, a Full-stack Developer focused on back-end development. I'm pursuing my B.Tech in CSE from Nit Hamirpur. I love working on projects and problems which make me push my limits and learn something new. You can connect with me here.
Top comments (2)
Great work on this project Sitaram! This wasn’t an easy one.
A lot of work was needed to understand how to interact with Rocket.Chat as a client. This involved you reverse engineering to learn how our web client worked. Then taking that and adapting to be more like the ideal client.
Of course then filling a lot of gaps in the go sdk.
Look forward to seeing this project keep moving forward, as well as seeing what awesome things you get up to!
Thank you so much. It's been great working with you. Your guidance helped me alot in developing it and I'll cherish those moments forever ❤️
There's many things which I'm planning to add on in the project to make it a product. I'll try to implement them.