feat(overlay): add multi-instance chat overlay

[Drilmo]

Summary

Add a new customizable chat overlay that can display messages and events from Twitch, YouTube, TikTok and Kick streams.

Features

• Multiple overlay instances with independent configurations
• 7 visual styles: default, twitch, bubbles, gradient, neon, minimal, glass (liquid glass effect)
• All event types supported: follows, subs, raids, cheers, bans, rewards, donations (Ko-fi, Streamlabs, StreamElements, Tipeee, Tiltify, Patreon), etc.
• Multi-channel support: source indicator when connected to multiple channels, connect/disconnect messages with channel avatar
• Configurable: message duration, delay, max messages, entrance animations (6 types), size presets (6 sizes)
• Filters: by platform, message type, users, and commands
• Full i18n support (EN/FR) for all event labels
• CSS customization documentation for streamers

Files changed

• OverlayChat.vue: Main overlay component
• OverlayParamsChat.vue: Configuration panel
• storeChat.ts: Data persistence and event handling
• TwitchatDataTypes.ts: ChatOverlayParams and ChatOverlayLabels types
• i18n/en/overlay.json & i18n/fr/overlay.json: Translations

Test plan

• Create a new chat overlay instance
• Test each visual style (default, twitch, bubbles, gradient, neon, minimal, glass)
• Verify messages and events display correctly
• Test filters (platform, message types, users)
• Test entrance animations
• Verify i18n works in both EN and FR
• Test multi-channel source indicator
• Verify CSS customization works via OBS browser source

🤖 Generated with Claude Code

[Drilmo]

Quelques screens :

Voici les styles que j'ai prédéfini, sachant que l'on peut toujours customiser avec le CSS

[Durss]

Here are few feedbacks on UI/UX.

Generally speaking UI isn't optimal. Nested Blocks are not ideal visually.

Here the "Overlay title" field shouldn't exist.
We should be able to edit the title from the collapsable header :

Yours	Expected

CSS customization selectors should use IDs instead of class names to avoid having to add !important after every rule we want to override. But I'm not entirely sure I want to provide them as there will be quite many message types

This display isn't consistent with how other multi instance overlay do :

Yours	Expected

Delete button doesn't have the right styling

Yours	Expected

Kick Facebook and Instagram aren't officially supported by Twitchat so the related filters here will have to be dropped

Conceptually it may make sense to make all the other filters children of their corresponding platform. The main platform toggle would hide/disable all filters related to that platform. YouTube and TikTok would then need an additional "Chat message" filter.
Also, they don't seem to work.

Private moderation messages , automoded messages, deleted messages, unbans, unban requests, twitchat tips & tricks and whispers shouldn't be selectable here:





They might be useful if that overlay was usable for Elgato Prompter but I'm not sure yet how I want to handle that. It definitely won't be an "overlay" that we have to drag&drop to the prompter though. If something ever exists it will most probably be a button on the chat column options showed on hover ("filters" and "add/del/move col") that'll sorta create a dynamic overlay instance on a popout using the same filters as the column. But the more I think about it the more I think it will have to be something else than that overlay if I want to make it possible to interact with it as close as possible to what chat column offers.

Join/leave filters shouldn't exist, I don't want it to be possible to expose lurkers publicly:

• Tiktok subs is missing on the filters.
• Ban message shows an empty ban duration "has been banned ( min)
• Power ups with message effects are shown as normal messages
• Gigantified emote powerup do not work
• Celebration powerup do not work
• Combos do not work
• Watch streaks show as 2 different messages which is "normal" as I allow to show them both as standard messages and notification but here we probably want to only show it as "user watched X consecutive streams and earned Y channel points." with their message just bellow in the same message container. And if the related filter isn't selected then only show the standard message.
• Raid messages don't show the viewer count
• Bits message should show the amount of bits as well as the related message if any
• We may want to handle pinned cheers so they remain the most recent messages throughout the pin duration then leave with the flow of messages
• Sub/subgift messages should show the number of months, tier and number of gift, and maybe the N first subgifted usernames like "user 1, user 2, user 3, user 4, user 5 and N others".
• Subgift upgrades show as simple subscription
• Youtube superchats do not show. We'll want to handle them the same as Pinned cheers from twitch
• Youtube super stickers do not work
• Youtub sub do not work
• Twitch reward redeem are broken, they do not show the name of the reward
• Hype train cooldown and summaries only show placeholders
• Poll and prediction results only show placeholders
• Chat poll results do not work
• Bingo and Raffle results only show a placeholder
• Countdown notification only show a placeholder
• Clearing chat is not clearing the overlay. Deleted messages and all the messages from a banned user should also be removed from overlay
• Twitch charity only show a placehodler
• Streamlabs/Streamelements/kofi/tipee/tiltify do not work nor show details like the amount
• Kofi donation event shouldn't show the message if "isPublic" is false
• Patreon notification should show the details
• Restricted users messages shouldn't show up on overlay
• Sent shoutouts show "received a shoutout". It should show something like "Shoutout given to XXX"
• Chat connection/disconnections Do not make sens to display on overlay. It would at best be confusing to everyone
• Generally speaking there should not be any "placeholder" message. All selectable types of messages should display with custom layouts when necessary. That's why I'm not sure we really want to provide css selectors as it would be tons of work to fully customize

There's an exception anytime a user answers to someone.
This is because answer contains a ref to the message it answers to and that message contains refs to all messages answering to it. Look at removeCircularReferences from Database.ts to see how I avoid that during DB storage. You may want to extract that function to Utils.ts and use it in both places:

PublicAPI.ts:74 Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'answers' -> object with constructor 'Object'
| index 0 -> object with constructor 'Object'
--- property 'answersTo' closes the circle
at JSON.stringify ()
at _PublicAPI.broadcast (PublicAPI.ts:74:40)
at Proxy.addMessage (storeChat.ts:2187:25)

Custom user names are displayed instead of the real ones.
I consider custom user names as private information, they shouldn't show up on overlay.

Custom badges are not showing up. An option to show them or not may be nice to have.

Max duration could be limited to 86400 (24*60*60 => 1d). I don't think there's much point in allowing for more time, and limiting it to this value makes the input field a little shorter.

I'd probably simplify these with a simple fake message in which we can toggle corresponding sections:

Platform icon, avatar badges, custom badges and optionally the user name(?) would all be displayed and clicking them would make them them faded. Each section could have a dotted border to make it clear user can interact with them. AS it's done on the "custom train" overlay.

Number of overlays we can create should be limited otherwise I'm guaranteed people will make a giant mess and clog my server disk space with dead stuff. I think something like 10 overlays would be more than enough and force people making reusable configs instead of creating new ones everytime.

It would be nice to have an option to show shared chat messages or not.
Streamers may want to show only their own chat.

[Durss]

Also the overlay should make sure its settings have not been deleted.
When the overlay requests for its parameters, twitchat should answer whether the overlay still exists or not. If the overlay still exists it should send its data as its the case today, but if it doesn't it should still broadcast a CHAT_OVERLAY_PARAMETERS event with empty settings, and the overlay should show an error in this case to let the user know that the overlay's settings couldn't be found.
This way they'll know they have to do some cleanup.

BTW, deleting an overlay should ask for confirmation otherwise miss-clicking it would be quite frustrating 😬

[Durss]

What is "message delay" supposed to do ?
I thought it was the delay before which every message should be displayed on the overlay but it doesn't seem to do anything

[Durss]

While I think about it, ideally the overlay should be populated on load from recent history of messages.
I think it's mostly frustrating to see the overlay being emptied anytime we switch to another OBS scene.

It would be important to have a way to test the overlay as well.
Lazy way would be to trigger a /spam but that would be way too confusing for the end user to realize their columns got spammed with random fake messages so it would be much better ot have a dedicated routine that sends random messages at a more "real" pace.
Additionnaly it would be quite nice to have a button next to each filter types to send the corresponding message type on the overlay so we can see how specific message types look like.