👨🏻‍💻 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

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. I Added listing of channels in the sidebar of the TUI, added message sending, switching between channels and loading previous message history.
7. I added realtime sending and receiving of messages in the chat.
8. I added user login screen, added caching of user token, login using cached token and token expiration.
9. I added listing, filtering, sending of slash command and @ mentioning of channel members while sending messages.
10. 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.
11. 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

- ISSUES OPENED

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.

Social	Link
	https://github.com/srrathi
	https://www.linkedin.com/in/sitaram-rathi-519152197/
	srrathi2000@gmail.com
	https://twitter.com/SitaramRathi5