Preserve conversation excerpts and deduplicate case evidence
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { canReadModeration } from '$lib/auth.js';
|
||||
import { moderationHref } from '$ui/moderation.js';
|
||||
import { canModerate, canReadModeration } from '$lib/auth.js';
|
||||
import { moderationCaseHref, moderationHref } from '$ui/moderation.js';
|
||||
import type { ChatContext, ContextualChatEntry } from '$lib/game-chat.js';
|
||||
import { formatDuration } from '$ui/duration.js';
|
||||
import { groupChatTimeline, type ChatBoundaryEntry } from '$ui/chat-timeline.js';
|
||||
@@ -10,6 +10,7 @@
|
||||
import { timeFormat } from '$ui/stores/time-zone.js';
|
||||
import Button from './primitives/Button.svelte';
|
||||
import Freshness from './Freshness.svelte';
|
||||
import MatchEvidenceDialog from './moderation/MatchEvidenceDialog.svelte';
|
||||
|
||||
let {
|
||||
server,
|
||||
@@ -40,6 +41,41 @@
|
||||
let follow = $state(true);
|
||||
let paused = $state(false);
|
||||
let controller: AbortController | null = null;
|
||||
const selectableMessages = $derived(
|
||||
history !== undefined &&
|
||||
canModerate($page.data?.user?.role) &&
|
||||
(moderationGame === 't5' || moderationGame === 't6')
|
||||
? entries.filter(
|
||||
(entry) => entry.type === 'message' && entry.messageId && entry.matchId
|
||||
)
|
||||
: []
|
||||
);
|
||||
let selectedMessageIds = $state<string[]>([]);
|
||||
let evidenceOpen = $state(false);
|
||||
let attachedCaseId = $state('');
|
||||
const selectedMatchId = $derived(
|
||||
selectableMessages.find(
|
||||
(entry) => entry.messageId && selectedMessageIds.includes(entry.messageId)
|
||||
)?.matchId
|
||||
);
|
||||
const selectionCandidates = $derived(
|
||||
selectableMessages.filter(
|
||||
(entry) => entry.matchId === (selectedMatchId ?? selectableMessages[0]?.matchId)
|
||||
)
|
||||
);
|
||||
|
||||
$effect(() => {
|
||||
void history;
|
||||
selectedMessageIds = [];
|
||||
evidenceOpen = false;
|
||||
attachedCaseId = '';
|
||||
});
|
||||
|
||||
function toggleEvidence(messageId: string) {
|
||||
selectedMessageIds = selectedMessageIds.includes(messageId)
|
||||
? selectedMessageIds.filter((id) => id !== messageId)
|
||||
: [...selectedMessageIds, messageId];
|
||||
}
|
||||
|
||||
async function refresh(manual = false) {
|
||||
if (!server || hostOffline) return;
|
||||
@@ -175,6 +211,36 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if selectableMessages.length}
|
||||
<div class="evidence-toolbar" aria-label="Chat evidence selection">
|
||||
<span>{selectedMessageIds.length} selected</span>
|
||||
<Button
|
||||
size="sm"
|
||||
onclick={() =>
|
||||
(selectedMessageIds = selectionCandidates
|
||||
.slice(0, 100)
|
||||
.map((entry) => entry.messageId!))}
|
||||
>Select {selectionCandidates.length > 100 ? 'first 100' : 'all'}</Button
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!selectedMessageIds.length}
|
||||
onclick={() => (selectedMessageIds = [])}>Clear selection</Button
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
disabled={!selectedMessageIds.length}
|
||||
onclick={() => (evidenceOpen = true)}>Attach to case</Button
|
||||
>
|
||||
{#if selectedMessageIds.length >= 100}<span
|
||||
>Attach up to 100 selected messages at a time.</span
|
||||
>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if attachedCaseId}<p class="evidence-notice" role="status">
|
||||
Selected evidence saved. <a href={moderationCaseHref(attachedCaseId)}>View case</a>
|
||||
</p>{/if}
|
||||
{#if hostOffline}<p class="outage">
|
||||
Chat resumes when {hostName ?? 'the host agent'} reconnects.{loaded
|
||||
? ' Showing the last loaded messages.'
|
||||
@@ -236,7 +302,11 @@
|
||||
{@render matchBoundary(item.entries[item.entries.length - 1])}
|
||||
</li>
|
||||
{:else}
|
||||
<li class="message">
|
||||
<li
|
||||
class="message"
|
||||
class:selected={!!item.entry.messageId &&
|
||||
selectedMessageIds.includes(item.entry.messageId)}
|
||||
>
|
||||
<span class="message-clock">
|
||||
{#if item.entry.context.realTime}{@render clockTime(
|
||||
item.entry.context.realTime
|
||||
@@ -246,6 +316,27 @@
|
||||
</span>
|
||||
<div class="message-content">
|
||||
<div class="message-head">
|
||||
{#if selectableMessages.length && item.entry.messageId && item.entry.matchId}
|
||||
<label class="evidence-select">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedMessageIds.includes(
|
||||
item.entry.messageId
|
||||
)}
|
||||
disabled={!selectedMessageIds.includes(
|
||||
item.entry.messageId
|
||||
) &&
|
||||
(selectedMessageIds.length >= 100 ||
|
||||
(!!selectedMatchId &&
|
||||
selectedMatchId !==
|
||||
item.entry.matchId))}
|
||||
onchange={() =>
|
||||
toggleEvidence(item.entry.messageId!)}
|
||||
aria-label={`Select message by ${item.entry.message.player} at ${item.entry.message.time}: ${item.entry.message.message}`}
|
||||
/>
|
||||
<span class="sr-only">Select evidence</span>
|
||||
</label>
|
||||
{/if}
|
||||
<strong>{item.entry.message.player}</strong
|
||||
>{@render chatContext(item.entry.context)}
|
||||
{#if canReadModeration($page.data?.user?.role) && (moderationGame === 't5' || moderationGame === 't6')}<a
|
||||
@@ -271,6 +362,20 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if evidenceOpen && selectedMatchId && (moderationGame === 't5' || moderationGame === 't6')}
|
||||
<MatchEvidenceDialog
|
||||
bind:open={evidenceOpen}
|
||||
game={moderationGame}
|
||||
matchId={selectedMatchId}
|
||||
entries={entries.filter((entry) => entry.matchId === selectedMatchId)}
|
||||
{selectedMessageIds}
|
||||
onsubmitted={(id) => {
|
||||
attachedCaseId = id;
|
||||
selectedMessageIds = [];
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
section {
|
||||
container-type: inline-size;
|
||||
@@ -283,6 +388,31 @@
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.evidence-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.evidence-notice {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.evidence-select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.evidence-select input {
|
||||
accent-color: var(--accent-primary);
|
||||
}
|
||||
.message.selected {
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
.chat-head {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -488,5 +618,9 @@
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 4;
|
||||
}
|
||||
.evidence-select {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user