import { html, TemplateResult } from 'lit';
import '@shoelace-style/shoelace/dist/components/badge/badge.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
export interface AIModelVerdict {
decision:
| 'duplicate'
| 'overlapping'
| 'undecided'
| 'checking'
| 'unrelated';
reason?: string;
suggestion?: string;
resolution?: string;
}
export function renderVerdict(
verdict: AIModelVerdict | undefined
): TemplateResult {
if (verdict?.resolution) {
return html`
<sl-badge
variant="success"
style="--sl-color-success-text: var(--sl-color-green-50); --sl-color-success-600: var(--sl-color-green-600);"
pill
>
<sl-icon
name="check-all"
style="margin-right: var(--sl-spacing-2x-small);"
></sl-icon>
${verdict.resolution.charAt(0).toUpperCase() +
verdict.resolution.slice(1)}
</sl-badge>
`;
}
if (!verdict || verdict.decision === 'checking') {
return html`
<sl-badge variant="neutral" pill>
<sl-spinner style="font-size: 0.8em; margin-right: 4px;"></sl-spinner>
Checking...
</sl-badge>
`;
}
switch (verdict.decision) {
case 'duplicate':
return html`
<sl-badge
variant="success"
style="--sl-color-success-text: var(--sl-color-pink-50); --sl-color-success-600: var(--sl-color-pink-600);"
pill
>
<sl-icon
name="check-circle"
style="margin-right: var(--sl-spacing-2x-small);"
></sl-icon>
Duplicate
</sl-badge>
`;
case 'overlapping':
return html`
<sl-badge
variant="primary"
style="--sl-color-primary-text: var(--sl-color-orange-50); --sl-color-primary-600: var(--sl-color-orange-600);"
pill
>
<sl-icon
name="intersect"
style="margin-right: var(--sl-spacing-2x-small);"
></sl-icon>
Overlapping
</sl-badge>
`;
case 'unrelated':
return html`
<sl-badge
variant="danger"
style="--sl-color-danger-text: var(--sl-color-cyan-50); --sl-color-danger-600: var(--sl-color-cyan-600);"
pill
>
<sl-icon
name="x-circle"
style="margin-right: var(--sl-spacing-2x-small);"
></sl-icon>
Unrelated
</sl-badge>
`;
default:
return html`
<sl-badge variant="neutral" pill>
<sl-icon name="question-circle"></sl-icon>
Undecided
</sl-badge>
`;
}
}
export function getStatusVariant(
status: string
): 'primary' | 'success' | 'neutral' | 'warning' | 'danger' {
const lowerCaseStatus = status.toLowerCase();
if (['closed', 'done', 'resolved'].includes(lowerCaseStatus)) {
return 'success';
}
if (['open', 'opened', 'to do', 'in progress'].includes(lowerCaseStatus)) {
return 'primary';
}
return 'neutral';
}
export function getComplianceVariant(factor: number) {
if (factor > 0.8) return 'success';
if (factor > 0.5) return 'warning';
return 'danger';
}
