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

package/src/chat/ChatWorkspace.jsx

@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Alert, Box, Button, Chip, Drawer, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { createChatApi } from './api';
+import { useChatSocket } from './useChatSocket';
+import ChatList from './ChatList';
+import ChatThread from './ChatThread';
+import ChatComposer from './ChatComposer';
+import ModelPicker from './ModelPicker';
+
+const PENDING_ID = 'pending';
+const bySeq = (a, b) => (a.seq ?? Number.MAX_SAFE_INTEGER) - (b.seq ?? Number.MAX_SAFE_INTEGER);
+const chronological = (turns) => [...(turns || [])].sort(bySeq);
+const isGenerating = (turn) => turn.state === 'generating';
+
+/** Replaces the turn that was generating (or has the same id) with the final one; appends it when neither exists. */
+const settleTurn = (turns, final) => {
+  const index = turns.findIndex((turn) => turn.id === final.id || isGenerating(turn));
+  if (index < 0) return chronological([...turns, final]);
+  return [...turns.slice(0, index), final, ...turns.slice(index + 1)];
+};
+const failGenerating = (turns, code) => turns.map((turn) => (isGenerating(turn)
+  ? { ...turn, state: 'failed', error_code: code === 'quota_exceeded' ? null : code }
+  : turn));
+const appendDelta = (turns, text) => {
+  const index = turns.findLastIndex(isGenerating);
+  if (index < 0) return turns;
+  return turns.map((turn, i) => (i === index ? { ...turn, assistant_text: `${turn.assistant_text || ''}${text}` } : turn));
+};
+
+/**
+ * The complete chat surface: chat list, thread, composer and model picker for one user.
+ *
+ * Props: `apiBase` and `wsUrl` (where the app mounted the chat routes), `api` (partial overrides of the REST
+ * calls; every function not given keeps its default), `scope` (passed when creating a chat), `sx`.
+ */
+export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
+  const api = useMemo(() => createChatApi(apiOverrides, { apiBase }), [apiOverrides, apiBase]);
+
+  const [status, setStatus] = useState('loading'); // loading | available | not_configured | error
+  const [catalogue, setCatalogue] = useState({ entries: [], default: null });
+  const [chats, setChats] = useState([]);
+  const [archived, setArchived] = useState([]);
+  const [nextChats, setNextChats] = useState(null);
+  const [chat, setChat] = useState(null);
+  const [turns, setTurns] = useState([]);
+  const [olderCursor, setOlderCursor] = useState(null);
+  const [olderBusy, setOlderBusy] = useState(false);
+  const [tool, setTool] = useState(null);
+  const [draft, setDraft] = useState('');
+  const [problem, setProblem] = useState(null); // an error code or close reason, shown as a notice
+  const [listOpen, setListOpen] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [openedOnce, setOpenedOnce] = useState(false); // distinguishes a reconnect from the first connect
+
+  const running = turns.some(isGenerating);
+  const isArchived = Boolean(chat?.archived_at);
+  const selection = chat?.selection || catalogue.default;
+  const activeEntry = catalogue.entries.find((entry) => entry.id === selection?.entry);
+
+  const loadLists = useCallback(async () => {
+    const [active, old] = await Promise.all([api.listChats(), api.listChats({ archived: true })]);
+    setChats(active.results || []);
+    setNextChats(active.next || null);
+    setArchived(old.results || []);
+  }, [api]);
+
+  useEffect(() => {
+    let live = true;
+    api.getStatus()
+      .then(async (state) => {
+        if (state.status !== 'available') { if (live) setStatus(state.status); return; }
+        const [entries] = await Promise.all([api.getCatalogue(), loadLists()]);
+        if (live) { setStatus(state.status); setCatalogue(entries); }
+      })
+      .catch(() => { if (live) setStatus('error'); });
+    return () => { live = false; };
+  }, [api, loadLists]);
+
+  useEffect(() => {
+    setTurns([]); setOlderCursor(null); setTool(null); setProblem(null); setDraft(''); setOpenedOnce(false);
+    if (!chat?.id) return undefined;
+    let live = true;
+    api.listTurns(chat.id)
+      .then((page) => { if (live) { setTurns(chronological(page.results)); setOlderCursor(page.next || null); } })
+      .catch(() => { if (live) setProblem('load_error'); });
+    return () => { live = false; };
+  }, [api, chat?.id]);
+
+  const onFrame = useCallback((frame, chatId) => {
+    if (chatId !== chat?.id) return;
+    if (frame.type === 'history') setTurns(chronological(frame.turns));
+    else if (frame.type === 'delta') setTurns((current) => appendDelta(current, frame.text || ''));
+    else if (frame.type === 'tool') setTool(frame.phase === 'start' ? { label: frame.label, name: frame.name } : null);
+    else if (frame.type === 'turn' && frame.turn) {
+      setTool(null);
+      setTurns((current) => settleTurn(current, frame.turn));
+      if (frame.turn.error_code === 'quota_exceeded') setProblem('quota_exceeded');
+    } else if (frame.type === 'error') {
+      setTool(null);
+      setTurns((current) => failGenerating(current, frame.code));
+      setProblem(frame.code);
+    }
+  }, [chat?.id]);
+  const onOpen = useCallback(() => { setOpenedOnce(true); setProblem((current) => (current === 'connection_lost' ? null : current)); }, []);
+  const onClose = useCallback(({ reason, retrying }) => { if (!retrying) setProblem(reason); }, []);
+  const socket = useChatSocket(chat?.id, { wsUrl, onFrame, onOpen, onClose });
+
+  const guarded = (action) => async (...args) => {
+    try { return await action(...args); } catch { setProblem('action_error'); return null; }
+  };
+
+  const selectChat = (next) => { setChat(next); setListOpen(false); };
+  const createChat = guarded(async () => {
+    const created = await api.createChat(scope ? { scope } : {});
+    setChats((current) => [created, ...current]);
+    selectChat(created);
+  });
+  const updateChat = guarded(async (target, patch) => {
+    const updated = await api.updateChat(target.id, patch);
+    if (chat?.id === target.id) setChat(updated);
+    await loadLists();
+  });
+  const deleteChat = guarded(async (target) => {
+    await api.deleteChat(target.id);
+    setChats((current) => current.filter((item) => item.id !== target.id));
+    setArchived((current) => current.filter((item) => item.id !== target.id));
+    if (chat?.id === target.id) setChat(null);
+  });
+  const loadMoreChats = guarded(async () => {
+    const page = await api.listChats({ cursor: nextChats });
+    setChats((current) => [...current, ...(page.results || [])]);
+    setNextChats(page.next || null);
+  });
+  const loadOlder = guarded(async () => {
+    setOlderBusy(true);
+    try {
+      const page = await api.listTurns(chat.id, { cursor: olderCursor });
+      setTurns((current) => chronological([...(page.results || []), ...current]));
+      setOlderCursor(page.next || null);
+    } finally { setOlderBusy(false); }
+  });
+
+  const startTurn = (message) => {
+    if (!socket.send({ type: 'send', message })) return false;
+    setProblem(null);
+    setTurns((current) => [...current, {
+      id: PENDING_ID, user_text: message, assistant_text: '', state: 'generating', sources: [],
+      driver: activeEntry?.driver, model: activeEntry?.label || activeEntry?.model, effort: selection?.effort,
+    }]);
+    return true;
+  };
+  const send = () => { if (startTurn(draft)) setDraft(''); };
+  const retry = (turn) => {
+    if (!socket.connected) return;
+    setTurns((current) => current.filter((item) => item.id !== turn.id));
+    startTurn(turn.user_text);
+  };
+
+  const noticeFor = () => {
+    const texts = {
+      session_ended: 'Chat.sessionEnded', access_lost: 'Chat.accessLost', rate_limited: 'Chat.rateLimited',
+      load_error: 'Chat.loadError', action_error: 'Chat.actionError',
+    };
+    if (problem === 'quota_exceeded') {
+      return { text: t('Chat.usageLimit', { model: activeEntry?.label || activeEntry?.model || '' }), action: { label: t('Chat.changeModel'), onClick: () => setPickerOpen(true) } };
+    }
+    if (problem === 'connection_lost') return { text: t('Chat.connectionLost'), action: { label: t('Chat.reconnect'), onClick: socket.reconnect } };
+    if (problem === 'not_configured') return null;
+    if (texts[problem]) return { text: t(texts[problem]), severity: 'warning' };
+    return null;
+  };
+
+  const list = (
+    <ChatList
+      chats={chats}
+      archivedChats={archived}
+      activeId={chat?.id}
+      hasMore={Boolean(nextChats)}
+      onSelect={selectChat}
+      onNew={createChat}
+      onRename={(target, title) => updateChat(target, { title })}
+      onArchive={(target) => updateChat(target, { archived: true })}
+      onRestore={(target) => updateChat(target, { archived: false })}
+      onDelete={deleteChat}
+      onLoadMore={loadMoreChats}
+    />
+  );
+
+  const unavailable = status === 'not_configured' || problem === 'not_configured';
+  if (status === 'loading') return <Box sx={sx} aria-busy="true" />;
+  if (status === 'error') return <Box sx={sx}><Alert severity="error">{t('Chat.loadError')}</Alert></Box>;
+  if (unavailable) {
+    return (
+      <Stack alignItems="center" justifyContent="center" spacing={1} sx={{ minHeight: 320, p: 3, textAlign: 'center', ...sx }}>
+        <Typography variant="h6">{t('Chat.unavailable')}</Typography>
+        <Typography color="text.secondary">{t('Chat.noModel')}</Typography>
+      </Stack>
+    );
+  }
+
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : 'minmax(240px, 320px) minmax(0, 1fr)', height: '100%', minHeight: 480, border: 1, borderColor: 'divider', borderRadius: 1, overflow: 'hidden', bgcolor: 'background.paper', ...sx }}>
+      {narrow ? null : <Box sx={{ borderRight: 1, borderColor: 'divider', minHeight: 0 }}>{list}</Box>}
+      <Stack sx={{ minWidth: 0, minHeight: 0 }}>
+        <Stack direction="row" alignItems="center" gap={1} sx={{ px: 1.5, py: 0.5, borderBottom: 1, borderColor: 'divider', minHeight: 56 }}>
+          {narrow ? <Button color="inherit" onClick={() => setListOpen(true)}>{t('Chat.chats')}</Button> : null}
+          <Typography noWrap sx={{ flex: 1, fontWeight: 600 }}>{chat ? (chat.title || t('Chat.untitled')) : ''}</Typography>
+          {socket.status === 'connecting' && openedOnce ? <Chip size="small" color="warning" variant="outlined" label={t('Chat.reconnecting')} /> : null}
+          {isArchived ? <Chip size="small" label={t('Chat.archived')} /> : null}
+          {isArchived ? <Button size="small" onClick={() => updateChat(chat, { archived: false })}>{t('Chat.restore')}</Button> : null}
+          {chat ? (
+            <ModelPicker
+              entries={catalogue.entries}
+              selection={selection}
+              disabled={isArchived || running}
+              open={pickerOpen}
+              onOpenChange={setPickerOpen}
+              onChange={(next) => updateChat(chat, { selection: next })}
+            />
+          ) : null}
+        </Stack>
+        {chat ? (
+          <>
+            <ChatThread turns={turns} tool={tool} notice={noticeFor()} hasOlder={Boolean(olderCursor)} olderBusy={olderBusy} onLoadOlder={loadOlder} onRetry={retry} readOnly={isArchived} />
+            {isArchived ? <Typography variant="caption" color="text.secondary" sx={{ px: 2, pb: 1 }}>{t('Chat.archivedReadOnly')}</Typography> : null}
+            <ChatComposer value={draft} onChange={setDraft} onSend={send} onStop={() => socket.send({ type: 'stop' })} running={running} archived={isArchived} connected={socket.connected} />
+          </>
+        ) : (
+          <Stack alignItems="center" justifyContent="center" spacing={2} sx={{ flex: 1, p: 3 }}>
+            <Typography color="text.secondary" align="center">{t('Chat.selectChat')}</Typography>
+            <Button variant="contained" onClick={createChat}>{t('Chat.newChat')}</Button>
+          </Stack>
+        )}
+      </Stack>
+      {narrow ? <Drawer open={listOpen} onClose={() => setListOpen(false)} slotProps={{ paper: { sx: { width: 'min(320px, 86vw)' } } }}>{list}</Drawer> : null}
+    </Box>
+  );
+}
+
+export default ChatWorkspace;

package/src/chat/MarkdownReply.jsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export const MARKDOWN_LIMIT = 200000;
+const allowed = ['p','br','hr','h1','h2','h3','h4','h5','h6','strong','em','del','ul','ol','li','blockquote','code','pre','table','thead','tbody','tr','th','td','a','img'];
+const plainText = (children) => (Array.isArray(children) ? children : [children]).map((child) => typeof child === 'string' ? child : '').join('');
+function MarkdownReply({ text = '' }) {
+  const { t } = useTranslation();
+  if (text.length > MARKDOWN_LIMIT) return <Box sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>{text}</Box>;
+  return <Box sx={{ minWidth: 0, overflowWrap: 'anywhere', '& p': { my: 1 }, '& table': { borderCollapse: 'collapse' }, '& th,& td': { border: 1, borderColor: 'divider', p: 1 }, '& pre': { overflowX: 'auto', bgcolor: 'action.hover', p: 1, borderRadius: 1 }, '& blockquote': { borderLeft: 2, borderColor: 'divider', pl: 1, color: 'text.secondary' } }}>
+    <ReactMarkdown remarkPlugins={[remarkGfm]} allowedElements={allowed} unwrapDisallowed components={{
+      a: ({ href, children }) => { const label = plainText(children); return <span>{children}{href && href !== label ? ' (' + href + ')' : ''}</span>; },
+      img: ({ alt, src }) => <span>{alt || src || ''}</span>,
+      table: ({ children }) => <Box role="region" tabIndex={0} aria-label={t('Chat.markdownTable')} sx={{ overflowX: 'auto', maxWidth: '100%' }}><table>{children}</table></Box>,
+      pre: ({ children }) => <pre tabIndex={0} aria-label={t('Chat.markdownCode')}>{children}</pre>,
+    }}>{text}</ReactMarkdown>
+  </Box>;
+}
+export default memo(MarkdownReply);

package/src/chat/ModelPicker.jsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { Box, Button, Chip, Drawer, List, ListItemButton, ListItemText, Popover, Stack, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const EFFORT_LEVELS = ['low', 'medium', 'high', 'max'];
+export const driverName = (t, id) => t(`Chat.driver.${id}`, { defaultValue: id });
+
+const groupByDriver = (entries) => entries.reduce((groups, entry) => {
+  (groups[entry.driver] = groups[entry.driver] || []).push(entry);
+  return groups;
+}, {});
+
+/**
+ * Model and effort of one chat. A popover at wide widths, a bottom sheet at narrow widths. `onChange` receives
+ * `{ entry, effort }`; the caller persists it (the change applies from the next turn). Can be controlled with `open`.
+ */
+export function ModelPicker({ entries = [], selection, onChange, disabled = false, open, onOpenChange }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
+  const anchor = useRef(null);
+  const [innerOpen, setInnerOpen] = useState(false);
+  const isOpen = open ?? innerOpen;
+  const setOpen = (value) => { setInnerOpen(value); onOpenChange?.(value); };
+  const groups = useMemo(() => groupByDriver(entries), [entries]);
+  const active = entries.find((entry) => entry.id === selection?.entry);
+
+  const pickEntry = (entry) => {
+    const effort = entry.efforts?.includes(selection?.effort) ? selection.effort : entry.efforts?.[0];
+    onChange?.({ entry: entry.id, effort });
+  };
+
+  const content = (
+    <Box sx={{ p: 2, minWidth: narrow ? 0 : 320, maxWidth: '100%' }}>
+      <Stack spacing={1.5}>
+        {Object.entries(groups).map(([driver, items]) => (
+          <Box key={driver} role="group" aria-label={driverName(t, driver)}>
+            <Typography variant="overline" color="text.secondary">{driverName(t, driver)}</Typography>
+            <List dense disablePadding>
+              {items.map((entry) => (
+                <ListItemButton key={entry.id} selected={entry.id === selection?.entry} onClick={() => pickEntry(entry)} sx={{ minHeight: 40, borderRadius: 1 }}>
+                  <ListItemText primary={entry.label || entry.model} />
+                  {entry.billing === 'pay_per_use' ? <Chip size="small" variant="outlined" label={t('Chat.payPerUse')} /> : null}
+                </ListItemButton>
+              ))}
+            </List>
+          </Box>
+        ))}
+        <Box>
+          <Typography variant="overline" color="text.secondary">{t('Chat.effortLabel')}</Typography>
+          <ToggleButtonGroup
+            exclusive
+            fullWidth
+            size="small"
+            aria-label={t('Chat.effortLabel')}
+            value={selection?.effort || null}
+            onChange={(_event, effort) => { if (effort && active) onChange?.({ entry: active.id, effort }); }}
+          >
+            {EFFORT_LEVELS.map((effort) => (
+              <ToggleButton key={effort} value={effort} disabled={!active?.efforts?.includes(effort)} sx={{ minHeight: 40 }}>
+                {t(`Chat.effort.${effort}`)}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </Box>
+      </Stack>
+    </Box>
+  );
+
+  const label = active ? [active.label || active.model, selection?.effort && t(`Chat.effort.${selection.effort}`)].filter(Boolean).join(' · ') : t('Chat.chooseModel');
+  return (
+    <>
+      <Button ref={anchor} size="small" color="inherit" disabled={disabled || entries.length === 0} onClick={() => setOpen(true)} aria-haspopup="dialog">
+        {label}
+      </Button>
+      {narrow ? (
+        <Drawer anchor="bottom" open={isOpen} onClose={() => setOpen(false)}>{content}</Drawer>
+      ) : (
+        <Popover open={isOpen} anchorEl={anchor.current} onClose={() => setOpen(false)} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>{content}</Popover>
+      )}
+    </>
+  );
+}
+
+export default ModelPicker;

package/src/chat/api.js

@@ -0,0 +1,18 @@
+import apiClient from '../auth/apiClient';
+import { chatApiUrls } from './wire';
+
+export function createChatApi(overrides = {}, { apiBase = '/api/assistant/' } = {}) {
+  const urls = chatApiUrls(apiBase);
+  const data = (request) => request.then((response) => response.data);
+  const defaults = {
+    getCatalogue: () => data(apiClient.get(urls.catalogue)),
+    listChats: ({ archived = false, cursor } = {}) => data(apiClient.get(urls.chats, { params: { archived, ...(cursor ? { cursor } : {}) } })),
+    createChat: (payload = {}) => data(apiClient.post(urls.chats, payload)),
+    updateChat: (id, patch) => data(apiClient.patch(urls.chat(id), patch)),
+    deleteChat: (id) => data(apiClient.delete(urls.chat(id))),
+    listTurns: (id, { cursor } = {}) => data(apiClient.get(urls.turns(id), { params: cursor ? { cursor } : {} })),
+    getStatus: () => data(apiClient.get(urls.status)),
+  };
+  return { ...defaults, ...overrides };
+}
+export const defaultChatApi = createChatApi();

package/src/chat/useChatSocket.js

@@ -0,0 +1,32 @@
+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 = () => { if (!alive) return; tries = 0; setStatus('open'); callbacks.current.onOpen?.(chatId, wasOpened); wasOpened = true; };
+      ws.onmessage = (event) => { if (!alive) return; try { const frame = JSON.parse(event.data); if (frame && typeof frame === 'object') callbacks.current.onFrame?.(frame, chatId); } catch { /* Ignore malformed frames. */ } };
+      ws.onclose = (event) => {
+        if (!alive || socket.current !== ws) return; socket.current = null;
+        const reason = CHAT_CLOSE_CODES[event.code];
+        if (reason) { setStatus('closed'); callbacks.current.onClose?.({ reason, chatId, retrying: false }); return; }
+        if (tries < delays.length) { setStatus('connecting'); callbacks.current.onClose?.({ reason: 'connection_lost', chatId, retrying: true }); timer = setTimeout(connect, delays[tries++]); }
+        else { setStatus('closed'); callbacks.current.onClose?.({ 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/src/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/src/i18n/chatTranslations.ts

@@ -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/src/i18n/uiCoreTranslations.js

@@ -1,5 +1,6 @@
 import { authTranslations } from './authTranslations';
 import { chartsTranslations } from './chartsTranslations';
+import { chatTranslations } from './chatTranslations';
 import { messagingTranslations } from './messagingTranslations';
 import { notificationsTranslations } from './notificationsTranslations';
 import { onboardingTranslations } from './onboardingTranslations';
@@ -9,6 +10,7 @@ import { userMenuTranslations } from './userMenuTranslations';
 export const uiCoreTranslations = {
   ...authTranslations,
   ...chartsTranslations,
+  ...chatTranslations,
   ...messagingTranslations,
   ...notificationsTranslations,
   ...onboardingTranslations,

package/src/index.js

@@ -124,6 +124,16 @@ 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';
@@ -144,4 +154,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/src/theme/kitSxRegistry.js

@@ -97,6 +97,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,
@@ -168,6 +170,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,
@@ -272,4 +278,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/tests/chatApi.test.js

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../src/auth/apiClient', () => ({
+  default: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), delete: vi.fn() },
+}));
+
+import apiClient from '../src/auth/apiClient';
+import { createChatApi } from '../src/chat/api';
+
+beforeEach(() => {
+  for (const method of ['get', 'post', 'patch', 'delete']) apiClient[method].mockReset().mockResolvedValue({ data: { ok: method } });
+});
+
+describe('chat api client', () => {
+  it('calls the contract endpoints and unwraps the response data', async () => {
+    const api = createChatApi();
+    expect(await api.getCatalogue()).toEqual({ ok: 'get' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/catalogue/');
+    await api.listChats({ archived: true, cursor: 'c1' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/chats/', { params: { archived: true, cursor: 'c1' } });
+    await api.createChat({ scope: 'x' });
+    expect(apiClient.post).toHaveBeenLastCalledWith('/api/assistant/chats/', { scope: 'x' });
+    await api.updateChat(4, { selection: { entry: 'a', effort: 'low' } });
+    expect(apiClient.patch).toHaveBeenLastCalledWith('/api/assistant/chats/4/', { selection: { entry: 'a', effort: 'low' } });
+    await api.deleteChat(4);
+    expect(apiClient.delete).toHaveBeenLastCalledWith('/api/assistant/chats/4/');
+    await api.listTurns(4, { cursor: 'older' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/chats/4/turns/', { params: { cursor: 'older' } });
+    await api.getStatus();
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/status/');
+  });
+
+  it('keeps the defaults of every other function when one is overridden', async () => {
+    const names = ['getCatalogue', 'listChats', 'createChat', 'updateChat', 'deleteChat', 'listTurns', 'getStatus'];
+    const defaults = createChatApi({}, { apiBase: '/v2/chat' });
+    for (const name of names) {
+      const override = vi.fn();
+      const api = createChatApi({ [name]: override }, { apiBase: '/v2/chat' });
+      expect(api[name]).toBe(override);
+      for (const other of names.filter((n) => n !== name)) expect(String(api[other])).toBe(String(defaults[other]));
+    }
+    const api = createChatApi({ getStatus: vi.fn() }, { apiBase: '/v2/chat' });
+    await api.getCatalogue();
+    expect(apiClient.get).toHaveBeenLastCalledWith('/v2/chat/catalogue/');
+    await api.deleteChat(9);
+    expect(apiClient.delete).toHaveBeenLastCalledWith('/v2/chat/chats/9/');
+  });
+});