add Twitch chat reply controls
This commit is contained in:
+12
-5
@@ -17,7 +17,8 @@
|
||||
let realtimeState = 'DISCONNECTED';
|
||||
let realtimeSocket: WebSocket | undefined;
|
||||
let activityEvents: Array<{ event_id: string; event_type: string; occurred_at: string }> = [];
|
||||
let chatMessages: Array<{ event_id: string; user_name: string; text: string; sent_at: string }> = [];
|
||||
let chatMessages: Array<{ event_id: string; message_id: string; user_name: string; text: string; sent_at: string; reply_parent_message_id?: string }> = [];
|
||||
let chatReplyParent: { message_id: string; user_name: string } | undefined;
|
||||
let notifications: Array<{ id: string; severity: string; title: string; message: string; seen_at: string | null; created_at: string }> = [];
|
||||
let showNotifications = false;
|
||||
let showStreamEditor = false;
|
||||
@@ -146,6 +147,7 @@
|
||||
showNotifications = false;
|
||||
diagnostics = undefined;
|
||||
chatMessages = [];
|
||||
chatReplyParent = undefined;
|
||||
}
|
||||
|
||||
function connectRealtime() {
|
||||
@@ -162,12 +164,12 @@
|
||||
const event: { event_type?: string } = JSON.parse(message.data);
|
||||
if (event.event_type === 'connection.ready') realtimeState = 'CONNECTED';
|
||||
else if ('event_id' in event && event.event_type) {
|
||||
const activity = event as { event_id: string; event_type: string; occurred_at: string; payload?: { chatter_user_name?: string; message?: { text?: string } } };
|
||||
const activity = event as { event_id: string; event_type: string; occurred_at: string; payload?: { message_id?: string; chatter_user_name?: string; message?: { text?: string } } };
|
||||
if (!activityEvents.some((item) => item.event_id === activity.event_id)) {
|
||||
activityEvents = [activity, ...activityEvents].slice(0, 100);
|
||||
}
|
||||
if (activity.event_type === 'twitch.channel.chat.message' && activity.payload?.message?.text) {
|
||||
chatMessages = [{ event_id: activity.event_id, user_name: activity.payload.chatter_user_name ?? 'unknown', text: activity.payload.message.text, sent_at: activity.occurred_at }, ...chatMessages].slice(0, 100);
|
||||
chatMessages = [{ event_id: activity.event_id, message_id: activity.payload.message_id ?? activity.event_id, user_name: activity.payload.chatter_user_name ?? 'unknown', text: activity.payload.message.text, sent_at: activity.occurred_at }, ...chatMessages].slice(0, 100);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
@@ -299,10 +301,11 @@
|
||||
const response = await fetch(`${serverAddress}/api/v1/twitch/chat/message`, {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json', authorization: `Bearer ${sessionToken}` },
|
||||
body: JSON.stringify({ identity: chatIdentity, message: chatMessage }),
|
||||
body: JSON.stringify({ identity: chatIdentity, message: chatMessage, reply_parent_message_id: chatReplyParent?.message_id }),
|
||||
});
|
||||
if (!response.ok) throw new Error('The selected Twitch identity could not send the message.');
|
||||
chatMessage = '';
|
||||
chatReplyParent = undefined;
|
||||
} catch (error) {
|
||||
chatError = error instanceof Error ? error.message : 'Chat message failed.';
|
||||
} finally {
|
||||
@@ -310,6 +313,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
function replyToChatMessage(message: { message_id: string; user_name: string }) {
|
||||
chatReplyParent = { message_id: message.message_id, user_name: message.user_name };
|
||||
}
|
||||
|
||||
async function applyModeration() {
|
||||
moderationBusy = true;
|
||||
moderationError = '';
|
||||
@@ -457,7 +464,7 @@
|
||||
<div class="dashboard-grid">
|
||||
<section class="panel preview-panel"><div class="panel-header"><span>STREAM PREVIEW</span><span class="panel-menu">⋮</span></div>{#if playerSrc}<iframe class="twitch-player" title={`Twitch player for ${streamerName}`} src={playerSrc} allowfullscreen></iframe>{:else}<div class="preview-stage"><div class="offline-mark">STREAM OFFLINE</div><div class="offline-subtitle">CONNECT TWITCH TO BEGIN</div></div>{/if}<div class="panel-footer"><span class="micro">VIDEO PLAYER</span><span class="badge">{playerSrc ? streamerName : 'OFFLINE'}</span></div></section>
|
||||
<section class="panel activity-panel"><div class="panel-header"><span>ACTIVITY FEED</span><span class="panel-menu">⋮</span></div><div class="panel-tabs"><button class="tab active">ALL ACTIVITY</button><button class="tab">MODERATION</button></div>{#if activityEvents.length}<div class="activity-list">{#each activityEvents as event}<div class="activity-row"><span class="activity-type">{event.event_type}</span><span class="activity-time">{new Date(event.occurred_at).toLocaleTimeString()}</span></div>{/each}</div>{:else}<div class="empty-state"><div class="empty-glyph">◌</div><strong>Nothing here yet</strong><span>Follows, subscriptions, raids, and server events will appear here.</span></div>{/if}</section>
|
||||
<section class="panel chat-panel"><div class="panel-header"><span>MY CHAT</span><span class="panel-menu">⋮</span></div>{#if chatMessages.length}<div class="chat-message-list">{#each chatMessages as message}<div class="chat-message"><span class="chat-user">{message.user_name}</span><span class="chat-text">{message.text}</span></div>{/each}</div>{:else}<div class="chat-empty"><div class="empty-glyph">⌁</div><strong>Chat is waiting</strong><span>Connect a streamer or bot account to begin.</span></div>{/if}<div class="chat-composer"><div class="chat-identity-toggle"><button class:active={chatIdentity === 'streamer'} class="chat-identity" onclick={() => (chatIdentity = 'streamer')}>STREAMER</button><button class:active={chatIdentity === 'bot'} class="chat-identity" onclick={() => (chatIdentity = 'bot')}>BOT</button></div><div class="chat-send-row"><input class="control" bind:value={chatMessage} maxlength="500" placeholder={`Send as ${chatIdentity}`} onkeydown={(event) => event.key === 'Enter' && sendChatMessage()} /><button class="primary" onclick={sendChatMessage} disabled={chatBusy || !chatMessage.trim()}>SEND</button></div>{#if chatError}<div class="auth-error">{chatError}</div>{/if}</div></section>
|
||||
<section class="panel chat-panel"><div class="panel-header"><span>MY CHAT</span><span class="panel-menu">⋮</span></div>{#if chatMessages.length}<div class="chat-message-list">{#each chatMessages as message}<div class="chat-message"><span class="chat-user">{message.user_name}</span><span class="chat-text">{message.text}</span><button class="chat-reply" onclick={() => replyToChatMessage(message)}>REPLY</button></div>{/each}</div>{:else}<div class="chat-empty"><div class="empty-glyph">⌁</div><strong>Chat is waiting</strong><span>Connect a streamer or bot account to begin.</span></div>{/if}<div class="chat-composer">{#if chatReplyParent}<div class="chat-reply-context">REPLYING TO @{chatReplyParent.user_name}<button class="secondary" onclick={() => (chatReplyParent = undefined)}>×</button></div>{/if}<div class="chat-identity-toggle"><button class:active={chatIdentity === 'streamer'} class="chat-identity" onclick={() => (chatIdentity = 'streamer')}>STREAMER</button><button class:active={chatIdentity === 'bot'} class="chat-identity" onclick={() => (chatIdentity = 'bot')}>BOT</button></div><div class="chat-send-row"><input class="control" bind:value={chatMessage} maxlength="500" placeholder={`Send as ${chatIdentity}`} onkeydown={(event) => event.key === 'Enter' && sendChatMessage()} /><button class="primary" onclick={sendChatMessage} disabled={chatBusy || !chatMessage.trim()}>SEND</button></div>{#if chatError}<div class="auth-error">{chatError}</div>{/if}</div></section>
|
||||
<section class="panel quick-panel"><div class="panel-header"><span>QUICK ACTIONS</span><span class="panel-menu">⋮</span></div><div class="quick-grid"><button class="quick-action accent" onclick={() => (showStreamEditor = !showStreamEditor)}>EDIT STREAM INFO</button><button class="quick-action" onclick={() => (showModeration = !showModeration)}>MODERATION</button><button class="quick-action">BOT COMMANDS</button><button class="quick-action">OVERLAYS</button></div>{#if showStreamEditor}<div class="stream-editor"><label class="micro" for="stream-title">TITLE</label><input id="stream-title" class="control" bind:value={streamTitle} maxlength="140" /><label class="micro" for="stream-category">CATEGORY</label><input id="stream-category" class="control" value={categorySearch} oninput={(event) => searchCategories(event.currentTarget.value)} autocomplete="off" placeholder="Search Twitch categories" />{#if categoryOptions.length}<div class="category-options">{#each categoryOptions as category}<button class="category-option" onclick={() => { streamGameId = category.id; categorySearch = category.name; categoryOptions = []; }}><span>{category.name}</span><span class="mono">{category.id}</span></button>{/each}</div>{/if}<label class="micro" for="stream-language">LANGUAGE</label><input id="stream-language" class="control" bind:value={streamLanguage} maxlength="10" /><label class="micro" for="stream-tags">TAGS</label><input id="stream-tags" class="control" bind:value={streamTags} placeholder="comma, separated" /><label class="micro" for="stream-labels">CLASSIFICATION LABELS</label><input id="stream-labels" class="control" bind:value={streamClassificationLabels} placeholder="comma, separated" /><button class="primary control-button" onclick={saveStreamInfo} disabled={streamBusy}>SAVE STREAM INFO</button>{#if streamError}<div class="auth-error">{streamError}</div>{/if}</div>{/if}{#if showModeration}<div class="stream-editor"><label class="micro" for="moderation-action">ACTION</label><select id="moderation-action" class="control" bind:value={moderationAction}><option value="timeout">TIMEOUT</option><option value="ban">BAN</option><option value="unban">UNBAN</option><option value="delete_message">DELETE MESSAGE</option></select><label class="micro" for="moderation-user">USER ID</label><input id="moderation-user" class="control" bind:value={moderationUserId} maxlength="64" /><label class="micro" for="moderation-message">MESSAGE ID (DELETE)</label><input id="moderation-message" class="control" bind:value={moderationMessageId} maxlength="128" /><label class="micro" for="moderation-duration">TIMEOUT SECONDS</label><input id="moderation-duration" class="control" type="number" min="1" max="1209600" bind:value={moderationDuration} /><label class="micro" for="moderation-reason">REASON</label><input id="moderation-reason" class="control" maxlength="500" bind:value={moderationReason} /><button class="primary control-button" onclick={applyModeration} disabled={moderationBusy || !moderationUserId}>APPLY MODERATION</button>{#if moderationError}<div class="auth-error">{moderationError}</div>{/if}</div>{/if}</section>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -261,6 +261,23 @@ button:hover:not(:disabled) {
|
||||
color: var(--ed-fg);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.chat-reply {
|
||||
margin-left: auto;
|
||||
padding: 2px 4px;
|
||||
border-color: transparent;
|
||||
color: var(--ed-dim);
|
||||
font: 9px var(--font-data);
|
||||
}
|
||||
.chat-reply-context {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
padding: 4px 6px;
|
||||
border-left: 2px solid var(--ed-accent);
|
||||
color: var(--ed-accent);
|
||||
font: 10px var(--font-data);
|
||||
}
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 214px 1fr;
|
||||
|
||||
Reference in New Issue
Block a user