Add structured moderation assessments with revision history
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
moderationConcernLabels,
|
||||
moderationFindingLabels,
|
||||
type ModerationCaseAssessment
|
||||
} from '$lib/moderation.js';
|
||||
import Button from '../primitives/Button.svelte';
|
||||
import Badge from '../primitives/Badge.svelte';
|
||||
import RelativeTime from '../RelativeTime.svelte';
|
||||
import CaseAssessmentDialog from './CaseAssessmentDialog.svelte';
|
||||
|
||||
let {
|
||||
caseId,
|
||||
revision,
|
||||
assessment = null,
|
||||
history = [],
|
||||
permitted,
|
||||
onsubmitted
|
||||
}: {
|
||||
caseId: string;
|
||||
revision: number;
|
||||
assessment?: ModerationCaseAssessment | null;
|
||||
history?: ModerationCaseAssessment[];
|
||||
permitted: boolean;
|
||||
onsubmitted: () => void;
|
||||
} = $props();
|
||||
let open = $state(false);
|
||||
const previous = $derived(history.filter((item) => item.revision !== assessment?.revision));
|
||||
$effect(() => {
|
||||
void caseId;
|
||||
open = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#snippet assessmentContent(value: ModerationCaseAssessment)}
|
||||
<p class="assessment-summary">{value.summary}</p>
|
||||
<div>
|
||||
<h3>Applicable rules</h3>
|
||||
{#if value.rules.length}<ul class="rules">
|
||||
{#each value.rules as rule}<li>{rule}</li>{/each}
|
||||
</ul>{:else}<p class="hint">No rule references recorded.</p>{/if}
|
||||
</div>
|
||||
<ol class="findings" aria-label="Structured findings">
|
||||
{#each value.findings as finding}<li>
|
||||
<div class="heading">
|
||||
<strong>{moderationConcernLabels[finding.category]}</strong><Badge
|
||||
variant={finding.finding === 'substantiated'
|
||||
? 'danger'
|
||||
: finding.finding === 'inconclusive'
|
||||
? 'warning'
|
||||
: 'neutral'}>{moderationFindingLabels[finding.finding]}</Badge
|
||||
>
|
||||
</div>
|
||||
<p>{finding.detail}</p>
|
||||
</li>{/each}
|
||||
</ol>
|
||||
<p class="hint">
|
||||
Revision {value.revision} · {value.actor} · <RelativeTime value={value.createdAt} />
|
||||
</p>
|
||||
{/snippet}
|
||||
|
||||
<section class="assessment" aria-label="Case assessment">
|
||||
<div class="heading">
|
||||
<h2>Case assessment</h2>
|
||||
{#if permitted}<Button size="sm" onclick={() => (open = true)}
|
||||
>{assessment ? 'Edit assessment' : 'Assess case'}</Button
|
||||
>{/if}
|
||||
</div>
|
||||
{#if assessment}{@render assessmentContent(assessment)}{:else}<p class="hint">
|
||||
Not assessed. Record concerns, applicable rules, and what the evidence supports.
|
||||
</p>{/if}
|
||||
{#if previous.length}<details>
|
||||
<summary>Previous assessments ({previous.length})</summary>
|
||||
<ol class="history">
|
||||
{#each previous as earlier (earlier.revision)}<li>
|
||||
{@render assessmentContent(earlier)}
|
||||
</li>{/each}
|
||||
</ol>
|
||||
</details>{/if}
|
||||
</section>
|
||||
|
||||
{#if permitted && open}<CaseAssessmentDialog
|
||||
bind:open
|
||||
{caseId}
|
||||
{revision}
|
||||
{assessment}
|
||||
{onsubmitted}
|
||||
/>{/if}
|
||||
|
||||
<style>
|
||||
.assessment {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
min-width: 0;
|
||||
}
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
p,
|
||||
.rules {
|
||||
line-height: var(--leading-body);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.assessment-summary,
|
||||
.findings p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.rules {
|
||||
padding-left: var(--space-5);
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
.findings,
|
||||
.history {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.findings > li {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.hint {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
details {
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.history {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.history > li {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,260 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import {
|
||||
moderationConcernCategories,
|
||||
moderationConcernLabels,
|
||||
moderationFindingOutcomes,
|
||||
moderationFindingLabels,
|
||||
type ModerationCaseAssessment,
|
||||
type ModerationConcernCategory,
|
||||
type ModerationFindingOutcome
|
||||
} from '$lib/moderation.js';
|
||||
import Dialog from '../primitives/Dialog.svelte';
|
||||
import Field from '../primitives/Field.svelte';
|
||||
import Select from '../primitives/Select.svelte';
|
||||
import Textarea from '../primitives/Textarea.svelte';
|
||||
import Button from '../primitives/Button.svelte';
|
||||
|
||||
interface DraftFinding {
|
||||
category: ModerationConcernCategory | '';
|
||||
finding: ModerationFindingOutcome | '';
|
||||
detail: string;
|
||||
key: number;
|
||||
}
|
||||
let {
|
||||
open = $bindable(false),
|
||||
caseId,
|
||||
revision,
|
||||
assessment,
|
||||
onsubmitted
|
||||
}: {
|
||||
open?: boolean;
|
||||
caseId: string;
|
||||
revision: number;
|
||||
assessment: ModerationCaseAssessment | null;
|
||||
onsubmitted: () => void;
|
||||
} = $props();
|
||||
const openedRevision = untrack(() => revision);
|
||||
let summary = $state(untrack(() => assessment?.summary ?? ''));
|
||||
let rulesText = $state(untrack(() => assessment?.rules.join('\n') ?? ''));
|
||||
let nextKey = 0;
|
||||
let findings = $state<DraftFinding[]>(
|
||||
untrack(
|
||||
() =>
|
||||
assessment?.findings.map((finding) => ({ ...finding, key: nextKey++ })) ?? [
|
||||
{ category: '', finding: '', detail: '', key: nextKey++ }
|
||||
]
|
||||
)
|
||||
);
|
||||
let busy = $state(false);
|
||||
let uncertain = $state(false);
|
||||
let error = $state('');
|
||||
let pending: Record<string, unknown> | null = null;
|
||||
|
||||
async function submit(event: SubmitEvent) {
|
||||
event.preventDefault();
|
||||
if (busy) return;
|
||||
if (!pending) {
|
||||
const rules = rulesText
|
||||
.split('\n')
|
||||
.map((rule) => rule.trim())
|
||||
.filter(Boolean);
|
||||
if (
|
||||
!summary.trim() ||
|
||||
!findings.length ||
|
||||
findings.some((item) => !item.category || !item.finding || !item.detail.trim())
|
||||
) {
|
||||
error = 'Add a summary and complete each concern, finding, and explanation.';
|
||||
return;
|
||||
}
|
||||
if (rules.length > 20 || rules.some((rule) => rule.length > 160)) {
|
||||
error = 'Use up to 20 applicable rules, with no more than 160 characters per line.';
|
||||
return;
|
||||
}
|
||||
pending = {
|
||||
op: 'assess-case',
|
||||
id: caseId,
|
||||
revision: openedRevision,
|
||||
summary: summary.trim(),
|
||||
rules,
|
||||
findings: findings.map(({ category, finding, detail }) => ({
|
||||
category,
|
||||
finding,
|
||||
detail: detail.trim()
|
||||
})),
|
||||
idempotencyKey: crypto.randomUUID()
|
||||
};
|
||||
}
|
||||
busy = true;
|
||||
error = '';
|
||||
try {
|
||||
const response = await fetch('/api/moderation', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(pending)
|
||||
});
|
||||
const result = await response.json().catch(() => null);
|
||||
if (!response.ok || !result?.ok) {
|
||||
uncertain = response.status >= 500 || response.ok;
|
||||
if (!uncertain) pending = null;
|
||||
throw new Error(result?.error || 'Could not save the assessment.');
|
||||
}
|
||||
open = false;
|
||||
onsubmitted();
|
||||
} catch (cause) {
|
||||
if (pending) uncertain = true;
|
||||
error = cause instanceof Error ? cause.message : 'Could not save the assessment.';
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
bind:open
|
||||
title={assessment ? 'Edit case assessment' : 'Assess case'}
|
||||
description="Record the current evidence assessment. Each saved revision is preserved in the case history."
|
||||
{busy}
|
||||
wide
|
||||
>
|
||||
<form onsubmit={submit}>
|
||||
<fieldset disabled={busy || uncertain}>
|
||||
<Field label="Current summary" required
|
||||
><Textarea bind:value={summary} required rows={3} maxlength={2000} /></Field
|
||||
>
|
||||
<Field
|
||||
label="Applicable rules"
|
||||
hint="One rule or policy reference per line. Up to 20 lines, 160 characters each."
|
||||
><Textarea bind:value={rulesText} rows={3} maxlength={3220} /></Field
|
||||
>
|
||||
<div class="findings">
|
||||
{#each findings as item, index (item.key)}
|
||||
<section class="finding" aria-label={`Finding ${index + 1}`}>
|
||||
<div class="finding-heading">
|
||||
<h3>Finding {index + 1}</h3>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={findings.length === 1}
|
||||
ariaLabel={`Remove finding ${index + 1}`}
|
||||
onclick={() =>
|
||||
(findings = findings.filter(
|
||||
(finding) => finding.key !== item.key
|
||||
))}>Remove</Button
|
||||
>
|
||||
</div>
|
||||
<div class="paired">
|
||||
<Field label={`Concern ${index + 1}`} required
|
||||
><Select
|
||||
bind:value={item.category}
|
||||
required
|
||||
options={[
|
||||
{ value: '', label: 'Select a concern' },
|
||||
...moderationConcernCategories.map((category) => ({
|
||||
value: category,
|
||||
label: moderationConcernLabels[category],
|
||||
disabled: findings.some(
|
||||
(other) =>
|
||||
other.key !== item.key &&
|
||||
other.category === category
|
||||
)
|
||||
}))
|
||||
]}
|
||||
/></Field
|
||||
>
|
||||
<Field label={`Finding ${index + 1}`} required
|
||||
><Select
|
||||
bind:value={item.finding}
|
||||
required
|
||||
options={[
|
||||
{ value: '', label: 'Select a finding' },
|
||||
...moderationFindingOutcomes.map((finding) => ({
|
||||
value: finding,
|
||||
label: moderationFindingLabels[finding]
|
||||
}))
|
||||
]}
|
||||
/></Field
|
||||
>
|
||||
</div>
|
||||
<Field
|
||||
label={`Explanation ${index + 1}`}
|
||||
required
|
||||
hint="Explain how the evidence supports this finding, including uncertainty."
|
||||
><Textarea
|
||||
bind:value={item.detail}
|
||||
required
|
||||
rows={3}
|
||||
maxlength={1000}
|
||||
/></Field
|
||||
>
|
||||
</section>
|
||||
{/each}
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={findings.length >= moderationConcernCategories.length}
|
||||
onclick={() =>
|
||||
(findings = [
|
||||
...findings,
|
||||
{ category: '', finding: '', detail: '', key: nextKey++ }
|
||||
])}>Add finding</Button
|
||||
>
|
||||
</div>
|
||||
</fieldset>
|
||||
{#if error}<p class="ui-error" role="alert">{error}</p>{/if}
|
||||
{#if uncertain}<p class="hint">
|
||||
The result is uncertain. Retry sends the same assessment safely.
|
||||
</p>{/if}
|
||||
<div class="actions">
|
||||
<Button disabled={busy} onclick={() => (open = false)}>Cancel</Button><Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
loading={busy}>{uncertain ? 'Retry same request' : 'Save assessment'}</Button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
||||
<style>
|
||||
form,
|
||||
fieldset,
|
||||
.findings,
|
||||
.finding {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
}
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.finding {
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.finding-heading,
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
.paired {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.hint {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-body);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user