feat & fix chat account stuff

frontend/src/locale/en/translation.json

@@ -71,13 +71,12 @@
       "api-configuration": "API access",
       "eventsub": "Events",
       "chat-settings": "Chat settings",
-      "enable-bot": "Enable chat features",
-      "bot-channel": "Twitch channel",
-      "bot-username": "Twitch account username",
-      "bot-oauth": "Authorization token",
-      "bot-oauth-note": "You can get this by logging in with the bot account and going here: <1>https://twitchapps.com/tmi/</1>",
-      "bot-chat-header": "Chat settings",
-      "bot-chat-history": "How many messages to keep in history (0 to disable)",
+      "chat": {
+        "header": "Chat settings",
+        "cooldown-tip": "Global chat cooldown for commands (in seconds)",
+        "default-user": "Using stream account, use the button below to authenticate with a different account.",
+        "chat-account": "Chat account"
+      },
       "events": {
         "loading-data": "Querying user data from Twitch APIs…",
         "authenticated-as": "Authenticated as",
@@ -101,8 +100,7 @@
       "app-oauth-redirect-url": "OAuth Redirect URLs",
       "test-button": "Test connection",
       "test-failed": "Test failed: \"{{error}}\". Check your app client IDs and secret!",
-      "test-succeeded": "Test succeeded!",
-      "bot-chat-cooldown-tip": "Global chat cooldown for commands (in seconds)"
+      "test-succeeded": "Test succeeded!"
     },
     "botcommands": {
       "title": "Chat commands",

frontend/src/locale/it/translation.json

@@ -169,7 +169,10 @@
       },
       "link-api": "Documentazione API",
       "link-user-guide": "Guida utente",
-      "quick-links": "Link utili"
+      "quick-links": "Link utili",
+      "problems": {
+        "eventsub-scope": "{{APPNAME}} necessita di nuove autorizzazioni nella tua app Twitch per funzionare correttamente.<br/> Fai clic <a>qui</a> per autenticarti nuovamente."
+      }
     },
     "debug": {
       "big-ass-warning": "L'utilizzo di questa pagina può danneggiare gravemente il tuo database. \nSpero tu sappia cosa stai facendo!",
@@ -329,19 +332,17 @@
       "app-category": "Categoria",
       "app-client-secret": "Segreto client",
       "app-oauth-redirect-url": "Reindirizzamento URL OAuth",
-      "bot-channel": "Canale Twitch",
-      "bot-chat-header": "Impostazioni chat",
-      "bot-chat-history": "Quanti messaggi tenere nello storico (0 per disabilitare)",
-      "bot-oauth": "Token di autorizzazione",
-      "bot-oauth-note": "Puoi ottenerlo accedendo con l'account del bot e andando qui: <1>https://twitchapps.com/tmi/</1>",
       "chat-settings": "Impostazioni chat",
-      "bot-settings-copy": "Un bot può interagire con i messaggi in chat e scriverci per avvertimenti ed altre funzionalità ma richiede l'accesso ad un account Twitch. \nPuoi usare il tuo account o crearne uno apposta (se abilitato sul tuo account principale, puoi riutilizzare la stessa email per un secondo account!)",
-      "bot-username": "Nome utente dell'account Twitch",
       "enable": "Abilita integrazione Twitch",
-      "enable-bot": "Abilita bot per Twitch",
       "eventsub": "Eventi",
       "subtitle": "Integrazione con stream su Twitch, incluso chat bot e accesso API. \nSe usi Twitch come piattaforma di streaming, lo vorrai sicuramente.",
       "title": "Configurazione Twitch",
+      "chat": {
+        "cooldown-tip": "Tempo minimo di attesa tra comandi (in secondi)",
+        "chat-account": "Account chat",
+        "header": "Impostazioni chat",
+        "default-user": "Utilizzando l'account principale, usa il pulsante qui sotto per autenticarti con un account diverso per le funzionalità di chat."
+      },
       "events": {
         "auth-button": "Autenticati via Twitch",
         "auth-message": "Fai clic sul pulsante qui sotto per autorizzare {{APPNAME}} ad accedere a notifiche del tuo account Twitch:",
@@ -363,8 +364,7 @@
       },
       "test-button": "Test connessione",
       "test-failed": "Test fallito: \"{{error}}\". \nControlla ID e segreto client dell'app!",
-      "test-succeeded": "Test riuscito!",
-      "bot-chat-cooldown-tip": "Tempo minimo di attesa tra comandi (in secondi)"
+      "test-succeeded": "Test riuscito!"
     },
     "uiconfig": {
       "language": "Lingua",

frontend/src/ui/components/TwitchUserBlock.tsx

@@ -23,7 +23,15 @@ const TwitchPic = styled('img', {
 });
 const TwitchName = styled('p', { fontWeight: 'bold' });
 
-export default function TwitchUserBlock({ authKey }: { authKey: string }) {
+interface TwitchUserBlockProps {
+  authKey: string;
+  noUserMessage: string;
+}
+
+export default function TwitchUserBlock({
+  authKey,
+  noUserMessage,
+}: TwitchUserBlockProps) {
   const { t } = useTranslation();
   const [user, setUser] = useState<helix.User | SyncError>(null);
   const kv = useAppSelector((state) => state.api.client);
@@ -66,7 +74,7 @@ export default function TwitchUserBlock({ authKey }: { authKey: string }) {
         </TwitchUser>
       );
     }
-    return <span>{t('pages.twitch-settings.events.err-no-user')}</span>;
+    return <span>{noUserMessage}</span>;
   }
 
   return <i>{t('pages.twitch-settings.events.loading-data')}</i>;

frontend/src/ui/pages/TwitchSettings/TwitchChatSettings.tsx

@@ -2,8 +2,18 @@ import { useTranslation } from 'react-i18next';
 import { useModule, useStatus } from '~/lib/react';
 import { useAppDispatch } from '~/store';
 import apiReducer, { modules } from '~/store/api/reducer';
+import { startAuthFlow } from '~/lib/twitch';
+import TwitchUserBlock from '~/ui/components/TwitchUserBlock';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import SaveButton from '../../components/forms/SaveButton';
-import { Field, InputBox, Label, SectionHeader } from '../../theme';
+import {
+  Button,
+  Field,
+  InputBox,
+  Label,
+  SectionHeader,
+  TextBlock,
+} from '../../theme';
 
 export default function TwitchChatSettings() {
   const [chatConfig, setChatConfig, loadStatus] = useModule(
@@ -23,12 +33,26 @@ export default function TwitchChatSettings() {
         ev.preventDefault();
       }}
     >
-      <SectionHeader>
-        {t('pages.twitch-settings.bot-chat-header')}
+      <SectionHeader spacing={'none'}>
+        {t('pages.twitch-settings.chat.chat-account')}
       </SectionHeader>
+      <TwitchUserBlock
+        authKey={'twitch/chat/chatter-account'}
+        noUserMessage={t('pages.twitch-settings.chat.default-user')}
+      />
+      <Button
+        variation="primary"
+        css={{ marginTop: '1rem' }}
+        onClick={() => {
+          void startAuthFlow('chat');
+        }}
+      >
+        <ExternalLinkIcon /> {t('pages.twitch-settings.events.auth-button')}
+      </Button>
+      <SectionHeader>{t('pages.twitch-settings.chat.header')}</SectionHeader>
       <Field size="fullWidth">
         <Label htmlFor="bot-chat-history">
-          {t('pages.twitch-settings.bot-chat-cooldown-tip')}
+          {t('pages.twitch-settings.chat.cooldown-tip')}
         </Label>
         <InputBox
           type="number"

frontend/src/ui/pages/TwitchSettings/TwitchEventSubSettings.tsx

@@ -36,7 +36,10 @@ export default function TwitchEventSubSettings() {
       <SectionHeader>
         {t('pages.twitch-settings.events.current-status')}
       </SectionHeader>
-      <TwitchUserBlock authKey={'twitch/auth-keys'} />
+      <TwitchUserBlock
+        authKey={'twitch/auth-keys'}
+        noUserMessage={t('pages.twitch-settings.events.err-no-user')}
+      />
       <SectionHeader>
         {t('pages.twitch-settings.events.sim-events')}
       </SectionHeader>

twitch/chat/module.go

@@ -27,6 +27,7 @@ type Module struct {
 	ctx         context.Context
 	db          database.Database
 	api         *helix.Client
+	streamer    helix.User
 	user        helix.User
 	logger      *slog.Logger
 	templater   template.Engine
@@ -52,6 +53,7 @@ func Setup(ctx context.Context, db database.Database, api *helix.Client, user he
 		ctx:         ctx,
 		db:          db,
 		api:         customUserClient,
+		streamer:    user,
 		user:        customUserInfo,
 		logger:      logger,
 		templater:   templater,
@@ -163,7 +165,7 @@ func (mod *Module) handleWriteMessageRPC(value string) {
 
 	if request.Announce {
 		resp, err := mod.api.SendChatAnnouncement(&helix.SendChatAnnouncementParams{
-			BroadcasterID: mod.user.ID,
+			BroadcasterID: mod.streamer.ID,
 			ModeratorID:   mod.user.ID,
 			Message:       request.Message,
 		})
@@ -192,7 +194,7 @@ func (mod *Module) handleWriteMessageRPC(value string) {
 	}
 
 	resp, err := mod.api.SendChatMessage(&helix.SendChatMessageParams{
-		BroadcasterID:        mod.user.ID,
+		BroadcasterID:        mod.streamer.ID,
 		SenderID:             mod.user.ID,
 		Message:              request.Message,
 		ReplyParentMessageID: request.ReplyTo,