diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 4eab82c..db61600 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -150,6 +150,17 @@
"no-pwd-note": " If the database has no password (for example, it was recently changed from having one to none), leave the field empty.",
"password": "Password",
"submit": "Authenticate"
+ },
+ "alerts": {
+ "title": "Chat alerts",
+ "desc": "Send chat messages when your viewers follow, subscribe and other events",
+ "follow-enable": "Enable new follow message",
+ "messages": "Messages",
+ "msg-info": "If multiple messages are present, one will be picked at random",
+ "subscription-enable": "Enable subscription message",
+ "gift_sub-enable": "Enable gifted subscription message",
+ "raid-enable": "Enable raid message",
+ "cheer-enable": "Enable cheering message"
}
},
"form-actions": {
diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
index d28aac3..d106063 100644
--- a/frontend/src/ui/App.tsx
+++ b/frontend/src/ui/App.tsx
@@ -29,6 +29,7 @@ import TwitchSettingsPage from './pages/TwitchSettings';
import TwitchBotCommandsPage from './pages/BotCommands';
import TwitchBotTimersPage from './pages/BotTimers';
import AuthDialog from './pages/AuthDialog';
+import ChatAlertsPage from './pages/ChatAlerts';
const LoadingDiv = styled('div', {
display: 'flex',
@@ -188,6 +189,7 @@ export default function App(): JSX.Element {
path="/twitch/bot/timers"
element={}
/>
+ } />
diff --git a/frontend/src/ui/components/MultiInput.tsx b/frontend/src/ui/components/MultiInput.tsx
index 46f8865..7c1e9e1 100644
--- a/frontend/src/ui/components/MultiInput.tsx
+++ b/frontend/src/ui/components/MultiInput.tsx
@@ -3,19 +3,21 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, FlexRow, Textarea } from '../theme';
-export interface MessageArrayProps {
+export interface MultiInputProps {
placeholder?: string;
value: string[];
required?: boolean;
+ disabled?: boolean;
onChange: (value: string[]) => void;
}
-function MessageArray({
+function MultiInput({
value,
placeholder,
onChange,
required,
-}: MessageArrayProps) {
+ disabled,
+}: MultiInputProps) {
const { t } = useTranslation();
return (
@@ -27,6 +29,7 @@ function MessageArray({
>