WinryChat | Open-Source Chat UI for TextChatService

As one of the developers of experiences for The Horizon Ascendancy, I’m pleased to announce that we’re open-sourcing a utility we believe to be of use to developers looking to use TextChatService with support for TextChatCommands and TextChannels. We’ve open-sourced it here. No licenses. No attributions necessary. You don’t even need to comment on this forum post: WinryChat - Open Source (No License)

THA Theme Images




Light-mode Theme Images




The chat itself is StarterGui.PlayerChat.Chat. The ScreenGui is not necessary, and is just there to get it on the screen. It searches through (and listens for new) descendants in TextChatService to get TextChannels and TextChatCommands. Additionally, you can find a list of attributes as settings here:

Settings

AudioFeedbackEnabled:
Whether or not to play audio when the Chat is opened and closed or a button is clicked.

AutocompleteEnabled:
Whether to enable the autocomplete feature to show TextChatCommands. This respects TextChatCommand.AutocompleteVisible.

AutocompleteResultBackground:
The background color that is used for autocomplete result buttons. Transparency is used for the mouse entering and exiting the button.

AutocompleteResultTextColor:
The text color to use for autocomplete result buttons. Transparency is used to show the typing progress.

BackgroundColor:
The background color of the major elements of the Chat UI.

ChannelButtonFont:
The font (and style) to use for text channel buttons on the top row.

ChannelButtonFontSize:
The size of the font used for each text channel button.

ChannelButtonTextColor:
The text color to use for channel buttons. Transparency is used for the mouse entering and exiting the button.

ChannelListHeight:
The height (in pixels) of the list of text channels - the buttons at the top.

InputAreaColor:
The color of the TextBox area.

InputAreaPlaceholderTextColor:
The color of placeholder text in the TextBox.

InputAreaTextColor:
The color of player-typed text in the TextBox.

ScrollbarColor:
The color of all scrollbars in the Text Chat UI.

ScrollbarTransparency:
The transparency of all scrollbars in the Text Chat UI.

SelectedChannelRibbonColor:
The color of the ribbon that highlights the currently selected channel.

SystemMessageSenderName:
The name to display as the sender of system messages.

TextFieldHeight:
The height (in pixels) of the TextBox area - the field at the bottom.

TextMessageFont:
The font (and style) to use for text messages sent in a channel.

TextMessageFontSize:
The size of the font used for each text message.

TextMessageTextColor:
The color of text messages.

UICornersEnabled:
Whether UI Corners are enabled on the CanvasGroup, TextBox and Autocomplete results (if AutocompleteEnabled is true).

UISpacing:
The spacing (in pixels) between each chat channel button, as well as between the list of buttons and chat view.

UIStrokeColor:
The color for the UIStroke around the TextBox and around each Autocomplete result.

UIStrokeTransparency:
The transparency for the UIStroke around the TextBox and around each Autocomplete result.

Lastly, you can also specify which channel is the default by adding a Default tag to it (via Lua or the Properties Panel) and you can specify which order channels appear in from left-to-right by setting a number attribute on the TextChannel called LayoutOrder.

If there are any improvements that can be made, or any bugs. Please leave a comment and it will be updated as soon as we can get to it. We want to make a reliable system that anyone can use, especially while we wait for further updates from ROBLOX’s Engineers following the Chat Channels update.

Context

If you’re wondering why we decided to do this (in the event there are multiple chat UIs like ours), the answer is simply both:

  1. We didn’t know, sometimes multiple people make different variations of the same idea.
  2. We were disheartened by the issues plaguing the default UI and felt like we had to do something.

During the development of Winry 4.1, a server system for clanning, we were hoping for ROBLOX’s Chat Channel support update to be completely functional. However, it was not. Channels you were not a part of would stay and you couldn’t customize everything we wanted to.

In response, after the rest of Outpost Gambit was already complete, we spent the last week just writing, bugfixing and extending Winry Chat so that we could have a reliable chat UI. Our goal was to keep it as vanilla as possible. To make things that we felt comfortable with, and could use for various projects without it being tethered to our own server system.

A week and a bit later, after approval from @TigerValdos, we felt it was at a point where we could open-source it for others to benefit from. And that’s where we are now.

ASSET ATTRIBUTIONS

While we ourselves don’t require any specific accreditation, we cannot be sure of that of the Audio Effects we’ve used in place of our privately used ones. The placeholder UIClick, UIOpen and UIClose sound effects have been uploaded by ROBLOX, Z9R and ProSoundEffects.

If these assets require unique licenses, and you wish to use them, you may need to contact the individual owners.

8 Likes

Super cool! This works flawlessly, I like the work you have contributed.

2 Likes

Thank you!

We’re actively looking for feedback on WinryChat too. Anything that can help the experience feel better for developers and users alike. We really want to prioritize a smooth, easy chat experience for a variety of devices.

1 Like

I really like the way this module is build, if I find any bugs or inconsistencies I’ll let you guys know! :smiley:

1 Like

We’ll release more open-source technologies when we can!

We’re digging into how ROBLOX’s UI/UX works, how common interactions and reactions occur in ROBLOX’s UI/UX and similar happen. We’ve got a few ideas already and we want to make a manual for editing WinryChat exists as soon as we can ensure a high quality of a production-ready PDF/AFPUB file can be released.

We’ve integrated ROBLOX’s new intellisense-like features as a starting point for documentation, and hopefully it will improve over time so that we can push how much we can communicate to developers further.

1 Like