@micha.bigler/ui-core-micha 3.13.2 → 3.14.3

package/dist/chat/useChatSocket.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CHAT_CLOSE_CODES, defaultChatWsUrl } from './wire';
+const delays = [1000, 2000, 4000];
+export function useChatSocket(chatId, { wsUrl = defaultChatWsUrl, onFrame, onOpen, onClose } = {}) {
+    const socket = useRef(null);
+    const callbacks = useRef({ onFrame, onOpen, onClose });
+    callbacks.current = { onFrame, onOpen, onClose };
+    // The URL builder is read at connect time only: an inline arrow from the caller must not reopen the socket on every render.
+    const urlBuilder = useRef(wsUrl);
+    urlBuilder.current = wsUrl;
+    const [status, setStatus] = useState('idle');
+    const [generation, setGeneration] = useState(0);
+    const reconnect = useCallback(() => setGeneration((n) => n + 1), []);
+    useEffect(() => {
+        if (!chatId || typeof WebSocket === 'undefined') {
+            setStatus('idle');
+            return undefined;
+        }
+        let alive = true;
+        let tries = 0;
+        let timer;
+        let wasOpened = false;
+        const connect = () => {
+            setStatus('connecting');
+            const ws = new WebSocket(typeof urlBuilder.current === 'function' ? urlBuilder.current(chatId) : urlBuilder.current);
+            socket.current = ws;
+            ws.onopen = () => { var _a, _b; if (!alive)
+                return; tries = 0; setStatus('open'); (_b = (_a = callbacks.current).onOpen) === null || _b === void 0 ? void 0 : _b.call(_a, chatId, wasOpened); wasOpened = true; };
+            ws.onmessage = (event) => { var _a, _b; if (!alive)
+                return; try {
+                const frame = JSON.parse(event.data);
+                if (frame && typeof frame === 'object')
+                    (_b = (_a = callbacks.current).onFrame) === null || _b === void 0 ? void 0 : _b.call(_a, frame, chatId);
+            }
+            catch ( /* Ignore malformed frames. */_c) { /* Ignore malformed frames. */ } };
+            ws.onclose = (event) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (!alive || socket.current !== ws)
+                    return;
+                socket.current = null;
+                const reason = CHAT_CLOSE_CODES[event.code];
+                if (reason) {
+                    setStatus('closed');
+                    (_b = (_a = callbacks.current).onClose) === null || _b === void 0 ? void 0 : _b.call(_a, { reason, chatId, retrying: false });
+                    return;
+                }
+                if (tries < delays.length) {
+                    setStatus('connecting');
+                    (_d = (_c = callbacks.current).onClose) === null || _d === void 0 ? void 0 : _d.call(_c, { reason: 'connection_lost', chatId, retrying: true });
+                    timer = setTimeout(connect, delays[tries++]);
+                }
+                else {
+                    setStatus('closed');
+                    (_f = (_e = callbacks.current).onClose) === null || _f === void 0 ? void 0 : _f.call(_e, { reason: 'connection_lost', chatId, retrying: false });
+                }
+            };
+        };
+        connect();
+        return () => { alive = false; clearTimeout(timer); const ws = socket.current; socket.current = null; if (ws) {
+            ws.onopen = ws.onmessage = ws.onclose = null;
+            ws.close();
+        } };
+    }, [chatId, generation]);
+    const send = useCallback((frame) => { const ws = socket.current; if (!ws || ws.readyState !== WebSocket.OPEN)
+        return false; ws.send(JSON.stringify(frame)); return true; }, []);
+    return { status, connected: status === 'open', send, reconnect };
+}
+export default useChatSocket;

package/dist/chat/wire.js

@@ -0,0 +1,7 @@
+export const CHAT_CLOSE_CODES = { 4401: 'session_ended', 4403: 'access_lost', 4429: 'rate_limited' };
+export const CHAT_ERROR_CODES = ['quota_exceeded', 'provider_error', 'timeout', 'prompt_too_long', 'invalid_output', 'security_violation', 'not_configured', 'rate_limited', 'invalid_selection', 'archived', 'turn_active', 'invalid_frame'];
+export const chatApiUrls = (base = '/api/assistant/') => {
+    const root = base.replace(/\/$/, '') + '/';
+    return { catalogue: root + 'catalogue/', chats: root + 'chats/', chat: (id) => root + 'chats/' + encodeURIComponent(id) + '/', turns: (id) => root + 'chats/' + encodeURIComponent(id) + '/turns/', status: root + 'status/' };
+};
+export const defaultChatWsUrl = (chatId) => (window.location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + window.location.host + '/ws/assistant/chats/' + encodeURIComponent(chatId) + '/';

package/dist/i18n/chatTranslations.js

@@ -0,0 +1,55 @@
+export const chatTranslations = {
+    'Chat.newChat': { de: 'Neuer Chat', en: 'New chat', fr: 'Nouveau chat', sw: 'Mazungumzo mapya' },
+    'Chat.chats': { de: 'Chats', en: 'Chats', fr: 'Discussions', sw: 'Mazungumzo' },
+    'Chat.archived': { de: 'Archiviert', en: 'Archived', fr: 'Archivé', sw: 'Imewekwa kwenye kumbukumbu' },
+    'Chat.restore': { de: 'Wiederherstellen', en: 'Restore', fr: 'Restaurer', sw: 'Rejesha' },
+    'Chat.rename': { de: 'Umbenennen', en: 'Rename', fr: 'Renommer', sw: 'Badilisha jina' },
+    'Chat.archive': { de: 'Archivieren', en: 'Archive', fr: 'Archiver', sw: 'Weka kwenye kumbukumbu' },
+    'Chat.delete': { de: 'Löschen', en: 'Delete', fr: 'Supprimer', sw: 'Futa' },
+    'Chat.deleteConfirm': { de: 'Möchten Sie diesen Chat wirklich löschen?', en: 'Delete this chat?', fr: 'Supprimer cette discussion ?', sw: 'Futa mazungumzo haya?' },
+    'Chat.cancel': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler', sw: 'Ghairi' },
+    'Chat.save': { de: 'Speichern', en: 'Save', fr: 'Enregistrer', sw: 'Hifadhi' },
+    'Chat.actions': { de: 'Chat-Aktionen', en: 'Chat actions', fr: 'Actions de discussion', sw: 'Vitendo vya mazungumzo' },
+    'Chat.loadMore': { de: 'Mehr laden', en: 'Load more', fr: 'Charger plus', sw: 'Pakia zaidi' },
+    'Chat.loadOlder': { de: 'Ältere laden', en: 'Load older', fr: 'Charger les plus anciens', sw: 'Pakia za zamani' },
+    'Chat.send': { de: 'Senden', en: 'Send', fr: 'Envoyer', sw: 'Tuma' },
+    'Chat.stop': { de: 'Stoppen', en: 'Stop', fr: 'Arrêter', sw: 'Simamisha' },
+    'Chat.message': { de: 'Nachricht', en: 'Message', fr: 'Message', sw: 'Ujumbe' },
+    'Chat.typing': { de: 'Antwort wird erstellt …', en: 'Thinking…', fr: 'Réflexion…', sw: 'Inafikiria…' },
+    'Chat.retry': { de: 'Erneut versuchen', en: 'Retry', fr: 'Réessayer', sw: 'Jaribu tena' },
+    'Chat.interrupted': { de: 'Unterbrochen', en: 'Interrupted', fr: 'Interrompue', sw: 'Imekatizwa' },
+    'Chat.reconnecting': { de: 'Verbindung wird wiederhergestellt', en: 'Reconnecting', fr: 'Reconnexion', sw: 'Inaunganisha tena' },
+    'Chat.payPerUse': { de: 'Nutzungsabhängig', en: 'pay per use', fr: 'à l’usage', sw: 'lipa kwa matumizi' },
+    'Chat.chooseModel': { de: 'Modell wählen', en: 'Choose model', fr: 'Choisir un modèle', sw: 'Chagua modeli' },
+    'Chat.effort.low': { de: 'Niedrig', en: 'Low', fr: 'Faible', sw: 'Chini' },
+    'Chat.effort.medium': { de: 'Mittel', en: 'Medium', fr: 'Moyen', sw: 'Wastani' },
+    'Chat.effort.high': { de: 'Hoch', en: 'High', fr: 'Élevé', sw: 'Juu' },
+    'Chat.effort.max': { de: 'Maximum', en: 'Max', fr: 'Maximal', sw: 'Juu zaidi' },
+    'Chat.driver.claude_cli': { de: 'Claude Code (Abo)', en: 'Claude Code subscription', fr: 'Claude Code (abonnement)', sw: 'Claude Code (usajili)' },
+    'Chat.driver.anthropic_api': { de: 'Anthropic API', en: 'Anthropic API', fr: 'API Anthropic', sw: 'API ya Anthropic' },
+    'Chat.driver.openai_api': { de: 'OpenAI API', en: 'OpenAI API', fr: 'API OpenAI', sw: 'API ya OpenAI' },
+    'Chat.markdownTable': { de: 'Tabelleninhalt', en: 'Table content', fr: 'Contenu du tableau', sw: 'Yaliyomo kwenye jedwali' },
+    'Chat.markdownCode': { de: 'Codeblock', en: 'Code block', fr: 'Bloc de code', sw: 'Kizuizi cha msimbo' },
+    'Chat.changeModel': { de: 'Modell ändern', en: 'Change model', fr: 'Changer de modèle', sw: 'Badilisha modeli' },
+    'Chat.usageLimit': { de: 'Nutzungslimit für {{model}} erreicht. Wählen Sie ein anderes Modell oder versuchen Sie es später erneut.', en: 'Usage limit reached for {{model}}. Choose another model or try again later.', fr: 'Limite d’utilisation atteinte pour {{model}}. Choisissez un autre modèle ou réessayez plus tard.', sw: 'Kikomo cha matumizi kimefikiwa kwa {{model}}. Chagua modeli nyingine au jaribu tena baadaye.' },
+    'Chat.answerIncomplete': { de: 'Die Antwort konnte nicht abgeschlossen werden.', en: 'The answer could not be completed.', fr: 'La réponse n’a pas pu être terminée.', sw: 'Jibu halikuweza kukamilishwa.' },
+    'Chat.unavailable': { de: 'Chat ist nicht verfügbar', en: 'Chat is not available', fr: 'Le chat n’est pas disponible', sw: 'Mazungumzo hayapatikani' },
+    'Chat.noModel': { de: 'Auf diesem Server ist kein Sprachmodell konfiguriert.', en: 'No language model is configured on this server.', fr: 'Aucun modèle de langage n’est configuré sur ce serveur.', sw: 'Hakuna modeli ya lugha iliyosanidiwa kwenye seva hii.' },
+    'Chat.modelChanged': { de: 'Modell gewechselt: {{model}}', en: 'Model changed: {{model}}', fr: 'Modèle changé : {{model}}', sw: 'Modeli imebadilishwa: {{model}}' },
+    'Chat.connectionLost': { de: 'Verbindung verloren', en: 'Connection lost', fr: 'Connexion perdue', sw: 'Muunganisho umepotea' },
+    'Chat.reconnect': { de: 'Erneut verbinden', en: 'Reconnect', fr: 'Se reconnecter', sw: 'Unganisha tena' },
+    'Chat.sessionEnded': { de: 'Ihre Sitzung ist beendet. Bitte melden Sie sich erneut an.', en: 'Your session has ended. Please sign in again.', fr: 'Votre session a pris fin. Veuillez vous reconnecter.', sw: 'Kipindi chako kimeisha. Tafadhali ingia tena.' },
+    'Chat.accessLost': { de: 'Sie haben keinen Zugriff mehr auf diesen Chat.', en: 'You no longer have access to this chat.', fr: 'Vous n’avez plus accès à cette discussion.', sw: 'Huna tena ufikiaji wa mazungumzo haya.' },
+    'Chat.rateLimited': { de: 'Zu viele Anfragen. Bitte einen Moment warten.', en: 'Too many requests. Please wait a moment.', fr: 'Trop de requêtes. Veuillez patienter un instant.', sw: 'Maombi mengi mno. Tafadhali subiri kidogo.' },
+    'Chat.untitled': { de: 'Neuer Chat', en: 'New chat', fr: 'Nouvelle discussion', sw: 'Mazungumzo mapya' },
+    'Chat.emptyTitle': { de: 'Wie kann ich helfen?', en: 'How can I help?', fr: 'Comment puis-je aider ?', sw: 'Naweza kusaidiaje?' },
+    'Chat.selectChat': { de: 'Wählen Sie einen Chat oder starten Sie einen neuen.', en: 'Select a chat or start a new one.', fr: 'Sélectionnez une discussion ou commencez-en une nouvelle.', sw: 'Chagua mazungumzo au anza mapya.' },
+    'Chat.archivedReadOnly': { de: 'Archivierter Chat. Stellen Sie ihn wieder her, um weiterzuschreiben.', en: 'Archived chat. Restore it to continue.', fr: 'Discussion archivée. Restaurez-la pour continuer.', sw: 'Mazungumzo yaliyowekwa kwenye kumbukumbu. Yarejeshe ili kuendelea.' },
+    'Chat.loadError': { de: 'Chats konnten nicht geladen werden.', en: 'Chats could not be loaded.', fr: 'Impossible de charger les discussions.', sw: 'Mazungumzo hayakuweza kupakiwa.' },
+    'Chat.actionError': { de: 'Aktion fehlgeschlagen.', en: 'Action failed.', fr: 'Action impossible.', sw: 'Kitendo kimeshindwa.' },
+    'Chat.sources': { de: 'Quellen', en: 'Sources', fr: 'Sources', sw: 'Vyanzo' },
+    'Chat.model': { de: 'Modell', en: 'Model', fr: 'Modèle', sw: 'Modeli' },
+    'Chat.effortLabel': { de: 'Aufwand', en: 'Effort', fr: 'Effort', sw: 'Juhudi' },
+    'Chat.renameLabel': { de: 'Chat-Titel', en: 'Chat title', fr: 'Titre de la discussion', sw: 'Kichwa cha mazungumzo' },
+    'Chat.thread': { de: 'Unterhaltung', en: 'Conversation', fr: 'Conversation', sw: 'Mazungumzo' },
+};

package/dist/i18n/uiCoreTranslations.js

@@ -11,12 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { authTranslations } from './authTranslations';
 import { chartsTranslations } from './chartsTranslations';
+import { chatTranslations } from './chatTranslations';
 import { messagingTranslations } from './messagingTranslations';
 import { notificationsTranslations } from './notificationsTranslations';
 import { onboardingTranslations } from './onboardingTranslations';
 import { sectionNavTranslations } from './sectionNavTranslations';
 import { userMenuTranslations } from './userMenuTranslations';
-export const uiCoreTranslations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, authTranslations), chartsTranslations), messagingTranslations), notificationsTranslations), onboardingTranslations), sectionNavTranslations), userMenuTranslations);
+export const uiCoreTranslations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, authTranslations), chartsTranslations), chatTranslations), messagingTranslations), notificationsTranslations), onboardingTranslations), sectionNavTranslations), userMenuTranslations);
 export function createUiCoreTranslations({ germanVariant = 'formal' } = {}) {
     return Object.fromEntries(Object.entries(uiCoreTranslations).map(([key, value]) => {
         const { de_informal } = value, rest = __rest(value, ["de_informal"]);

package/dist/index.js

@@ -78,6 +78,15 @@ export { AttachmentList } from './messaging/AttachmentList';
 export { ReactionBar } from './messaging/ReactionBar';
 export { PollCard } from './messaging/PollCard';
 export { MessagingScopeConfig } from './messaging/MessagingScopeConfig';
+// --- Shared AI chat ---
+export { ChatWorkspace } from './chat/ChatWorkspace';
+export { ChatList } from './chat/ChatList';
+export { ChatThread } from './chat/ChatThread';
+export { ChatComposer } from './chat/ChatComposer';
+export { ModelPicker } from './chat/ModelPicker';
+export { default as MarkdownReply } from './chat/MarkdownReply';
+export { useChatSocket } from './chat/useChatSocket';
+export { createChatApi, defaultChatApi } from './chat/api';
 // --- 9. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';
@@ -92,4 +101,5 @@ export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
 export { messagingTranslations } from './i18n/messagingTranslations';
+export { chatTranslations } from './i18n/chatTranslations';
 export { createUiCoreTranslations, uiCoreTranslations } from './i18n/uiCoreTranslations';

package/dist/theme/kitSxRegistry.js

@@ -33,6 +33,8 @@ import { LOGIN_PAGE_ALERT_SX } from '../pages/LoginPage';
 import { SIGN_UP_PAGE_ALERT_SX } from '../pages/SignUpPage';
 import { SIGNUP_CONFIRM_PAGE_ALERT_SX } from '../pages/SignupConfirmPage';
 import { REAUTH_MODAL_ALERT_SX, REAUTH_MODAL_TEXT_FIELD_SX } from '../auth/ReauthModal';
+import { CHAT_LIST_ARCHIVED_ACTION_SX, CHAT_LIST_ROW_ACTION_SX } from '../chat/ChatList';
+import { CHAT_THREAD_NOTICE_SX, CHAT_THREAD_TOOL_CHIP_SX } from '../chat/ChatThread';
 const SX_EXPORTS = {
     ACCESS_CODE_ACTION_SX,
     ACCESS_CODE_ALERT_SX,
@@ -103,6 +105,10 @@ const SX_EXPORTS = {
     SUPPORT_RECOVERY_AGENT_PAPER_SX,
     SUPPORT_RECOVERY_ALERT_SX,
     THREAD_DAY_SEPARATOR_SX,
+    CHAT_LIST_ARCHIVED_ACTION_SX,
+    CHAT_LIST_ROW_ACTION_SX,
+    CHAT_THREAD_NOTICE_SX,
+    CHAT_THREAD_TOOL_CHIP_SX,
     USER_INVITE_ACTION_SX,
     USER_INVITE_ALERT_SX,
     USER_LIST_ACTION_SX,
@@ -202,4 +208,8 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('SignupConfirmPage.alert', 'MuiAlert', SIGNUP_CONFIRM_PAGE_ALERT_SX),
     entry('ReauthModal.alert', 'MuiAlert', REAUTH_MODAL_ALERT_SX),
     entry('ReauthModal.field', 'MuiTextField', REAUTH_MODAL_TEXT_FIELD_SX),
+    entry('ChatList.rowAction', 'MuiIconButton', CHAT_LIST_ROW_ACTION_SX),
+    entry('ChatList.archivedAction', 'MuiButton', CHAT_LIST_ARCHIVED_ACTION_SX),
+    entry('ChatThread.toolChip', 'MuiChip', CHAT_THREAD_TOOL_CHIP_SX),
+    entry('ChatThread.notice', 'MuiAlert', CHAT_THREAD_NOTICE_SX),
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.13.2",
+  "version": "3.14.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [
@@ -21,7 +21,9 @@
   },
   "private": false,
   "dependencies": {
-    "@fontsource/dm-sans": "^5.2.8"
+    "@fontsource/dm-sans": "^5.2.8",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",

package/src/chat/ChatComposer.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Stack, TextField } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Message input. Send is disabled while a turn runs, for an archived chat and while the connection is down;
+ * Stop replaces it during a turn. Enter sends, Shift+Enter inserts a line break.
+ */
+export function ChatComposer({ value = '', onChange, onSend, onStop, running = false, archived = false, connected = true, sx }) {
+  const { t } = useTranslation();
+  const blocked = archived || !connected;
+  const canSend = !running && !blocked && value.trim().length > 0;
+  const submit = () => { if (canSend) onSend?.(); };
+  return (
+    <Stack direction="row" alignItems="flex-end" gap={1} sx={{ p: { xs: 1, md: 2 }, borderTop: 1, borderColor: 'divider', ...sx }}>
+      <TextField
+        multiline
+        maxRows={6}
+        fullWidth
+        size="small"
+        value={value}
+        disabled={blocked}
+        placeholder={t('Chat.message')}
+        slotProps={{ htmlInput: { 'aria-label': t('Chat.message') } }}
+        onChange={(event) => onChange?.(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent?.isComposing) { event.preventDefault(); submit(); }
+        }}
+      />
+      {running ? <Button variant="outlined" onClick={onStop}>{t('Chat.stop')}</Button> : null}
+      <Button variant="contained" onClick={submit} disabled={!canSend}>{t('Chat.send')}</Button>
+    </Stack>
+  );
+}
+
+export default ChatComposer;

package/src/chat/ChatList.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Badge, Box, Button, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Stack, TextField } from '@mui/material';
+import { MoreVert } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+export const CHAT_LIST_ROW_ACTION_SX = { width: 40, height: 40 };
+export const CHAT_LIST_ARCHIVED_ACTION_SX = { justifyContent: 'space-between', px: 2 };
+
+/**
+ * The chat list: active chats, then an "Archived" entry that expands the archived ones (read-only, restorable).
+ * Rename, Archive/Restore and Delete sit in each row's overflow menu; Delete asks for confirmation first.
+ */
+export function ChatList({ chats = [], archivedChats = [], activeId, hasMore = false, onSelect, onNew, onRename, onArchive, onRestore, onDelete, onLoadMore, sx }) {
+  const { t } = useTranslation();
+  const [menu, setMenu] = useState(null); // { anchor, chat, archived }
+  const [dialog, setDialog] = useState(null); // { kind: 'rename' | 'delete', chat }
+  const [title, setTitle] = useState('');
+  const [showArchived, setShowArchived] = useState(false);
+
+  const openMenu = (event, chat, archived) => { event.stopPropagation(); setMenu({ anchor: event.currentTarget, chat, archived }); };
+  const closeMenu = () => setMenu(null);
+  const startRename = () => { setTitle(menu.chat.title || ''); setDialog({ kind: 'rename', chat: menu.chat }); closeMenu(); };
+  const startDelete = () => { setDialog({ kind: 'delete', chat: menu.chat }); closeMenu(); };
+  const toggleArchive = () => { (menu.archived ? onRestore : onArchive)?.(menu.chat); closeMenu(); };
+  const closeDialog = () => setDialog(null);
+  const confirmRename = () => { onRename?.(dialog.chat, title.trim()); closeDialog(); };
+  const confirmDelete = () => { onDelete?.(dialog.chat); closeDialog(); };
+
+  const row = (chat, archived) => (
+    <ListItem
+      key={chat.id}
+      disablePadding
+      secondaryAction={<IconButton edge="end" aria-label={t('Chat.actions')} onClick={(event) => openMenu(event, chat, archived)} sx={CHAT_LIST_ROW_ACTION_SX}><MoreVert fontSize="small" /></IconButton>}
+    >
+      <ListItemButton selected={chat.id === activeId} onClick={() => onSelect?.(chat)} sx={{ minHeight: 48, pr: 6 }}>
+        <ListItemText primary={chat.title || t('Chat.untitled')} slotProps={{ primary: { noWrap: true } }} />
+      </ListItemButton>
+    </ListItem>
+  );
+
+  return (
+    <Stack sx={{ minWidth: 0, height: '100%', overflowY: 'auto', ...sx }} component="nav" aria-label={t('Chat.chats')}>
+      <Box sx={{ p: 1.5 }}>
+        <Button fullWidth variant="contained" onClick={onNew}>{t('Chat.newChat')}</Button>
+      </Box>
+      <List disablePadding>{chats.map((chat) => row(chat, false))}</List>
+      {hasMore ? <Button onClick={onLoadMore}>{t('Chat.loadMore')}</Button> : null}
+      {archivedChats.length > 0 ? (
+        <>
+          <Button color="inherit" onClick={() => setShowArchived((value) => !value)} aria-expanded={showArchived} sx={CHAT_LIST_ARCHIVED_ACTION_SX}>
+            {t('Chat.archived')}
+            <Badge color="default" badgeContent={archivedChats.length} sx={{ mr: 1.5 }} />
+          </Button>
+          <Collapse in={showArchived} unmountOnExit><List disablePadding>{archivedChats.map((chat) => row(chat, true))}</List></Collapse>
+        </>
+      ) : null}
+
+      <Menu anchorEl={menu?.anchor} open={Boolean(menu)} onClose={closeMenu}>
+        <MenuItem onClick={startRename}>{t('Chat.rename')}</MenuItem>
+        <MenuItem onClick={toggleArchive}>{menu?.archived ? t('Chat.restore') : t('Chat.archive')}</MenuItem>
+        <MenuItem onClick={startDelete}>{t('Chat.delete')}</MenuItem>
+      </Menu>
+
+      <Dialog open={dialog?.kind === 'rename'} onClose={closeDialog} fullWidth maxWidth="xs">
+        <DialogTitle>{t('Chat.rename')}</DialogTitle>
+        <DialogContent>
+          <TextField autoFocus fullWidth margin="dense" value={title} onChange={(event) => setTitle(event.target.value)} slotProps={{ htmlInput: { 'aria-label': t('Chat.renameLabel'), maxLength: 120 } }} onKeyDown={(event) => { if (event.key === 'Enter' && title.trim()) confirmRename(); }} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDialog}>{t('Chat.cancel')}</Button>
+          <Button variant="contained" disabled={!title.trim()} onClick={confirmRename}>{t('Chat.save')}</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={dialog?.kind === 'delete'} onClose={closeDialog} fullWidth maxWidth="xs">
+        <DialogTitle>{t('Chat.delete')}</DialogTitle>
+        <DialogContent><DialogContentText>{t('Chat.deleteConfirm')}</DialogContentText></DialogContent>
+        <DialogActions>
+          <Button onClick={closeDialog}>{t('Chat.cancel')}</Button>
+          <Button color="error" variant="contained" onClick={confirmDelete}>{t('Chat.delete')}</Button>
+        </DialogActions>
+      </Dialog>
+    </Stack>
+  );
+}
+
+export default ChatList;

package/src/chat/ChatThread.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import { Alert, Box, Button, Chip, Stack, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import MarkdownReply from './MarkdownReply';
+
+export const CHAT_THREAD_TOOL_CHIP_SX = { alignSelf: 'flex-start' };
+export const CHAT_THREAD_NOTICE_SX = { mb: 2 };
+
+const selectionLine = (turn, t) => [turn.model, turn.effort && t(`Chat.effort.${turn.effort}`)].filter(Boolean).join(' · ');
+const sameSelection = (a, b) => a.driver === b.driver && a.model === b.model && a.effort === b.effort;
+
+function SourceChips({ sources }) {
+  const { t } = useTranslation();
+  if (!sources?.length) return null;
+  return (
+    <Stack direction="row" flexWrap="wrap" gap={0.75} role="list" aria-label={t('Chat.sources')}>
+      {sources.map((source, index) => (
+        <Tooltip key={`${source.label}-${index}`} title={source.reference || ''} describeChild>
+          <Chip role="listitem" size="small" variant="outlined" label={source.label} />
+        </Tooltip>
+      ))}
+    </Stack>
+  );
+}
+
+function Answer({ turn, tool, onRetry }) {
+  const { t } = useTranslation();
+  const generating = turn.state === 'generating';
+  const failed = ['failed', 'cancelled'].includes(turn.state) && turn.error_code;
+  return (
+    <Stack spacing={1} aria-busy={generating}>
+      {turn.assistant_text ? <MarkdownReply text={turn.assistant_text} /> : null}
+      {generating && !turn.assistant_text && !tool ? <Typography variant="body2" color="text.secondary">{t('Chat.typing')}</Typography> : null}
+      {generating && tool ? <Chip size="small" color="primary" variant="outlined" label={tool.label} sx={CHAT_THREAD_TOOL_CHIP_SX} /> : null}
+      <SourceChips sources={turn.sources} />
+      {!generating && selectionLine(turn, t) ? <Typography variant="caption" color="text.secondary">{selectionLine(turn, t)}</Typography> : null}
+      {turn.state === 'interrupted' ? (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <Chip size="small" color="warning" label={t('Chat.interrupted')} />
+          {onRetry ? <Button size="small" onClick={() => onRetry(turn)}>{t('Chat.retry')}</Button> : null}
+        </Stack>
+      ) : null}
+      {failed ? (
+        <Alert severity="error" action={onRetry ? <Button color="inherit" size="small" onClick={() => onRetry(turn)}>{t('Chat.retry')}</Button> : null}>
+          {t('Chat.answerIncomplete')}
+        </Alert>
+      ) : null}
+    </Stack>
+  );
+}
+
+/**
+ * The turns of one chat. The streaming answer is simply the last turn in state `generating`; the caller keeps its text
+ * up to date. `notice` is a connection or limit message shown under the last turn. `readOnly` (an archived chat) hides Retry.
+ */
+export function ChatThread({ turns = [], tool = null, notice = null, hasOlder = false, olderBusy = false, onLoadOlder, onRetry, readOnly = false, sx }) {
+  const { t } = useTranslation();
+  const end = useRef(null);
+  const scroller = useRef(null);
+  const heightBeforeOlder = useRef(null);
+  const pinned = useRef(true); // follow the stream only while the reader is at the bottom
+  const last = turns[turns.length - 1];
+  // Follow the stream, but only when new content arrives at the end (not when older turns are prepended).
+  useEffect(() => { if (pinned.current) end.current?.scrollIntoView?.({ block: 'end' }); }, [last?.id, last?.assistant_text, last?.state]);
+
+  // Keep the reader's position when older turns are prepended.
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (el && heightBeforeOlder.current !== null) el.scrollTop += el.scrollHeight - heightBeforeOlder.current;
+    heightBeforeOlder.current = null;
+  }, [turns[0]?.id]);
+  const loadingOlder = useRef(false); // one request at a time, also across rapid scroll events
+  const loadOlder = async () => {
+    if (loadingOlder.current) return;
+    loadingOlder.current = true;
+    heightBeforeOlder.current = scroller.current?.scrollHeight ?? null;
+    try { await onLoadOlder?.(); } finally { loadingOlder.current = false; }
+  };
+
+  return (
+    <Box ref={scroller} onScroll={(event) => {
+      const el = event.currentTarget;
+      pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+      if (hasOlder && !olderBusy && el.scrollTop <= 40) loadOlder();
+    }} role="log" aria-live="polite" aria-label={t('Chat.thread')} sx={{ minHeight: 0, flex: 1, overflowY: 'auto', p: { xs: 1.5, md: 2.5 }, ...sx }}>
+      {hasOlder ? (
+        <Box sx={{ textAlign: 'center', mb: 2 }}>
+          <Button size="small" onClick={loadOlder} disabled={olderBusy}>{t('Chat.loadOlder')}</Button>
+        </Box>
+      ) : null}
+      {turns.length === 0 ? (
+        <Typography variant="h6" color="text.secondary" align="center" sx={{ mt: 6 }}>{t('Chat.emptyTitle')}</Typography>
+      ) : null}
+      {turns.map((turn, index) => {
+        const previous = turns[index - 1];
+        return (
+          <Box key={turn.id ?? index} sx={{ mb: 3 }}>
+            {previous && !sameSelection(previous, turn) ? (
+              <Stack direction="row" alignItems="center" gap={1} sx={{ mb: 2, color: 'text.secondary' }} role="separator">
+                <Box sx={{ flex: 1, borderTop: 1, borderColor: 'divider' }} />
+                <Typography variant="caption">{t('Chat.modelChanged', { model: selectionLine(turn, t) })}</Typography>
+                <Box sx={{ flex: 1, borderTop: 1, borderColor: 'divider' }} />
+              </Stack>
+            ) : null}
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1.5 }}>
+              <Typography sx={{ maxWidth: '85%', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', bgcolor: 'action.hover', borderRadius: 2, px: 1.5, py: 1 }}>
+                {turn.user_text}
+              </Typography>
+            </Box>
+            <Answer turn={turn} tool={index === turns.length - 1 ? tool : null} onRetry={readOnly ? undefined : onRetry} />
+          </Box>
+        );
+      })}
+      {notice ? (
+        <Alert
+          severity={notice.severity || 'warning'}
+          sx={CHAT_THREAD_NOTICE_SX}
+          action={notice.action ? <Button color="inherit" size="small" onClick={notice.action.onClick}>{notice.action.label}</Button> : null}
+        >
+          {notice.text}
+        </Alert>
+      ) : null}
+      <div ref={end} />
+    </Box>
+  );
+}
+
+export default ChatThread;