feat: F024 global AI assistant — contextual decision intelligence drawer

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>
2026-05-17 13:27:33 +02:00
parent 71f4b1eeb6
commit 30e840489d
13 changed files with 1222 additions and 0 deletions
@@ -0,0 +1,91 @@
+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>
+  )
+}