Benjamin Sutter
30e840489d
Wires the existing "AI Assistent" button in the TopBar and adds a 420px slide-in drawer with context-aware suggestions, message thread, loading animation, and action cards requiring manual confirmation. Template-based mock service returns German-language answers keyed by route + question keywords — no real LLM calls, no invented facts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { Box, Chip, Typography } from '@mui/material'
|
|
import type { SuggestedQuestion } from '../../domain/assistant'
|
|
|
|
interface Props {
|
|
suggestions: SuggestedQuestion[]
|
|
onSelect: (question: string) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
const CATEGORY_COLORS: Record<string, string> = {
|
|
Match: '#4f46e5',
|
|
Datenqualität: '#d97706',
|
|
Priorisierung: '#1e3a5f',
|
|
Empfehlung: '#1a7a4a',
|
|
Risiko: '#c0392b',
|
|
Tradeoffs: '#ea580c',
|
|
Strategie: '#0891b2',
|
|
Analyse: '#7c3aed',
|
|
Erklärung: '#0891b2',
|
|
Evidenz: '#64748b',
|
|
Review: '#7c3aed',
|
|
Konfidenz: '#d97706',
|
|
Fehler: '#c0392b',
|
|
Fehleranalyse: '#ea580c',
|
|
Eskalation: '#ea580c',
|
|
Prozess: '#64748b',
|
|
Kosten: '#1a7a4a',
|
|
Impact: '#d97706',
|
|
Optimierung: '#1a7a4a',
|
|
Aktion: '#1e3a5f',
|
|
Überblick: '#64748b',
|
|
Ranking: '#4f46e5',
|
|
}
|
|
|
|
export function AssistantPromptSuggestions({ suggestions, onSelect, disabled }: Props) {
|
|
if (suggestions.length === 0) return null
|
|
|
|
return (
|
|
<Box sx={{ px: 2, py: 1.25 }}>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: '#94a3b8', display: 'block', mb: 0.75, fontSize: '0.65rem' }}>
|
|
Vorschläge
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
|
|
{suggestions.map(s => {
|
|
const catColor = CATEGORY_COLORS[s.category] ?? '#64748b'
|
|
return (
|
|
<Box
|
|
key={s.id}
|
|
onClick={() => !disabled && onSelect(s.question)}
|
|
sx={{
|
|
px: 1.25,
|
|
py: 0.875,
|
|
borderRadius: 1.5,
|
|
border: '1px solid #e2e8f0',
|
|
cursor: disabled ? 'default' : 'pointer',
|
|
bgcolor: 'white',
|
|
opacity: disabled ? 0.5 : 1,
|
|
'&:hover': disabled ? {} : { bgcolor: '#f8fafc', borderColor: '#cbd5e1' },
|
|
transition: 'all 0.1s ease',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 3,
|
|
height: 28,
|
|
borderRadius: 2,
|
|
bgcolor: catColor,
|
|
flexShrink: 0,
|
|
opacity: 0.7,
|
|
}}
|
|
/>
|
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
|
<Typography variant="caption" sx={{ fontSize: '0.8rem', color: '#334155', lineHeight: 1.4 }}>
|
|
{s.question}
|
|
</Typography>
|
|
<Chip
|
|
label={s.category}
|
|
size="small"
|
|
sx={{ height: 16, fontSize: '0.6rem', bgcolor: `${catColor}14`, color: catColor, fontWeight: 600, ml: 0.5, verticalAlign: 'middle' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|