@micha.bigler/ui-core-micha 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 4.1.0 - UCM-CHAT-3
+
+Extension points on the `/chat` surface; with none of the new props `ChatWorkspace` renders and behaves as in 4.0.x.
+New `ChatWorkspace` props: `scope` (now also sent on the chat lists and the status request), `unavailableReasonText`
+(object or function mapping the server's `unavailable` reason to the app's text; generic fallback otherwise),
+`sidePanel(chat)` with `sidePanelLabel` (a column next to the thread, a sheet in the narrow and compact layouts),
+`renderAnswerExtra({ turn, chat, appFrames })` (under each answer, with the `app` frames that arrived during that turn),
+`renderComposerExtra({ chat })`, `onAppFrame({ name, payload, chatId, turnId })`, and `layout` (`'viewport'` default,
+`'container'` follows the container width below `compactBelow` px, `'compact'` always narrow). `ModelPicker` takes an
+optional `sheet` boolean. A `history_trimmed` notice shows a quiet chip with the number of left-out messages. New texts
+`Chat.notAvailableHere`, `Chat.historyTrimmed_one/_other` and the fallback `Chat.sidePanel` (de/en/fr/sw). Built
+against the `django-core-micha` DCM-CHAT-10 contract.
+
 ## 4.0.1 - UCM-DEP-3
 
 The `exports` map no longer lists `./package.json`; the public entries are exactly `.`, `./charts`, `./chat` and `./markdown`.

package/dist/chat/ChatThread.js

@@ -5,6 +5,7 @@ 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 };
+export const CHAT_THREAD_TRIMMED_SX = { mb: 1.5 };
 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 }) {
@@ -13,17 +14,18 @@ function SourceChips({ sources }) {
         return null;
     return (_jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.75, role: "list", "aria-label": t('Chat.sources'), children: sources.map((source, index) => (_jsx(Tooltip, { title: source.reference || '', describeChild: true, children: _jsx(Chip, { role: "listitem", size: "small", variant: "outlined", label: source.label }) }, `${source.label}-${index}`))) }));
 }
-function Answer({ turn, tool, onRetry }) {
+function Answer({ turn, tool, onRetry, chat, renderAnswerExtra }) {
+    var _a;
     const { t } = useTranslation();
     const generating = turn.state === 'generating';
     const failed = ['failed', 'cancelled'].includes(turn.state) && turn.error_code;
-    return (_jsxs(Stack, { spacing: 1, "aria-busy": generating, children: [turn.assistant_text ? _jsx(MarkdownReply, { text: turn.assistant_text }) : null, generating && !turn.assistant_text && !tool ? _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Chat.typing') }) : null, generating && tool ? _jsx(Chip, { size: "small", color: "primary", variant: "outlined", label: tool.label, sx: CHAT_THREAD_TOOL_CHIP_SX }) : null, _jsx(SourceChips, { sources: turn.sources }), !generating && selectionLine(turn, t) ? _jsx(Typography, { variant: "caption", color: "text.secondary", children: selectionLine(turn, t) }) : null, turn.state === 'interrupted' ? (_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [_jsx(Chip, { size: "small", color: "warning", label: t('Chat.interrupted') }), onRetry ? _jsx(Button, { size: "small", onClick: () => onRetry(turn), children: t('Chat.retry') }) : null] })) : null, failed ? (_jsx(Alert, { severity: "error", action: onRetry ? _jsx(Button, { color: "inherit", size: "small", onClick: () => onRetry(turn), children: t('Chat.retry') }) : null, children: t('Chat.answerIncomplete') })) : null] }));
+    return (_jsxs(Stack, { spacing: 1, "aria-busy": generating, children: [turn.assistant_text ? _jsx(MarkdownReply, { text: turn.assistant_text }) : null, generating && !turn.assistant_text && !tool ? _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Chat.typing') }) : null, generating && tool ? _jsx(Chip, { size: "small", color: "primary", variant: "outlined", label: tool.label, sx: CHAT_THREAD_TOOL_CHIP_SX }) : null, _jsx(SourceChips, { sources: turn.sources }), !generating && selectionLine(turn, t) ? _jsx(Typography, { variant: "caption", color: "text.secondary", children: selectionLine(turn, t) }) : null, renderAnswerExtra ? _jsx(React.Fragment, { children: renderAnswerExtra({ turn, chat, appFrames: (_a = turn.appFrames) !== null && _a !== void 0 ? _a : [] }) }, chat === null || chat === void 0 ? void 0 : chat.id) : null, turn.state === 'interrupted' ? (_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [_jsx(Chip, { size: "small", color: "warning", label: t('Chat.interrupted') }), onRetry ? _jsx(Button, { size: "small", onClick: () => onRetry(turn), children: t('Chat.retry') }) : null] })) : null, failed ? (_jsx(Alert, { severity: "error", action: onRetry ? _jsx(Button, { color: "inherit", size: "small", onClick: () => onRetry(turn), children: t('Chat.retry') }) : null, children: t('Chat.answerIncomplete') })) : null] }));
 }
 /**
  * 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 }) {
+export function ChatThread({ turns = [], tool = null, notice = null, hasOlder = false, olderBusy = false, onLoadOlder, onRetry, readOnly = false, sx, chat, renderAnswerExtra, trimmedCount }) {
     var _a;
     const { t } = useTranslation();
     const end = useRef(null);
@@ -64,7 +66,7 @@ export function ChatThread({ turns = [], tool = null, notice = null, hasOlder =
         }, role: "log", "aria-live": "polite", "aria-label": t('Chat.thread'), sx: Object.assign({ minHeight: 0, flex: 1, overflowY: 'auto', p: { xs: 1.5, md: 2.5 } }, sx), children: [hasOlder ? (_jsx(Box, { sx: { textAlign: 'center', mb: 2 }, children: _jsx(Button, { size: "small", onClick: loadOlder, disabled: olderBusy, children: t('Chat.loadOlder') }) })) : null, turns.length === 0 ? (_jsx(Typography, { variant: "h6", color: "text.secondary", align: "center", sx: { mt: 6 }, children: t('Chat.emptyTitle') })) : null, turns.map((turn, index) => {
                 var _a;
                 const previous = turns[index - 1];
-                return (_jsxs(Box, { sx: { mb: 3 }, children: [previous && !sameSelection(previous, turn) ? (_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, sx: { mb: 2, color: 'text.secondary' }, role: "separator", children: [_jsx(Box, { sx: { flex: 1, borderTop: 1, borderColor: 'divider' } }), _jsx(Typography, { variant: "caption", children: t('Chat.modelChanged', { model: selectionLine(turn, t) }) }), _jsx(Box, { sx: { flex: 1, borderTop: 1, borderColor: 'divider' } })] })) : null, _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', mb: 1.5 }, children: _jsx(Typography, { sx: { maxWidth: '85%', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', bgcolor: 'action.hover', borderRadius: 2, px: 1.5, py: 1 }, children: turn.user_text }) }), _jsx(Answer, { turn: turn, tool: index === turns.length - 1 ? tool : null, onRetry: readOnly ? undefined : onRetry })] }, (_a = turn.id) !== null && _a !== void 0 ? _a : index));
-            }), notice ? (_jsx(Alert, { severity: notice.severity || 'warning', sx: CHAT_THREAD_NOTICE_SX, action: notice.action ? _jsx(Button, { color: "inherit", size: "small", onClick: notice.action.onClick, children: notice.action.label }) : null, children: notice.text })) : null, _jsx("div", { ref: end })] }));
+                return (_jsxs(Box, { sx: { mb: 3 }, children: [previous && !sameSelection(previous, turn) ? (_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, sx: { mb: 2, color: 'text.secondary' }, role: "separator", children: [_jsx(Box, { sx: { flex: 1, borderTop: 1, borderColor: 'divider' } }), _jsx(Typography, { variant: "caption", children: t('Chat.modelChanged', { model: selectionLine(turn, t) }) }), _jsx(Box, { sx: { flex: 1, borderTop: 1, borderColor: 'divider' } })] })) : null, _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', mb: 1.5 }, children: _jsx(Typography, { sx: { maxWidth: '85%', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', bgcolor: 'action.hover', borderRadius: 2, px: 1.5, py: 1 }, children: turn.user_text }) }), _jsx(Answer, { turn: turn, tool: index === turns.length - 1 ? tool : null, onRetry: readOnly ? undefined : onRetry, chat: chat, renderAnswerExtra: renderAnswerExtra })] }, (_a = turn.id) !== null && _a !== void 0 ? _a : index));
+            }), trimmedCount ? _jsx(Chip, { size: "small", variant: "outlined", label: t(trimmedCount === 1 ? 'Chat.historyTrimmed_one' : 'Chat.historyTrimmed_other', { count: trimmedCount }), sx: CHAT_THREAD_TRIMMED_SX }) : null, notice ? (_jsx(Alert, { severity: notice.severity || 'warning', sx: CHAT_THREAD_NOTICE_SX, action: notice.action ? _jsx(Button, { color: "inherit", size: "small", onClick: notice.action.onClick, children: notice.action.label }) : null, children: notice.text })) : null, _jsx("div", { ref: end })] }));
 }
 export default ChatThread;

package/dist/chat/ChatWorkspace.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, 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';
@@ -21,6 +21,15 @@ const settleTurn = (turns, final) => {
 };
 const failGenerating = (turns, code) => turns.map((turn) => (isGenerating(turn)
     ? Object.assign(Object.assign({}, turn), { state: 'failed', error_code: code === 'quota_exceeded' ? null : code }) : turn));
+/** Stores an app frame on the turn that is generating; frames outside a running turn are dropped. */
+const attachAppFrame = (turns, frame) => {
+    const index = turns.findLastIndex(isGenerating);
+    if (index < 0)
+        return turns;
+    const turn = turns[index];
+    const appFrames = [...(turn.appFrames || []), { name: frame.name, payload: frame.payload }];
+    return turns.map((item, i) => (i === index ? Object.assign(Object.assign({}, turn), { appFrames }) : item));
+};
 const appendDelta = (turns, text) => {
     const index = turns.findLastIndex(isGenerating);
     if (index < 0)
@@ -33,12 +42,29 @@ const appendDelta = (turns, text) => {
  * 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 }) {
+export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, unavailableReasonText, sidePanel, sidePanelLabel, renderAnswerExtra, renderComposerExtra, onAppFrame, layout = 'viewport', compactBelow = 720 }) {
     const { t } = useTranslation();
     const theme = useTheme();
-    const narrow = useMediaQuery(theme.breakpoints.down('md'));
-    const api = useMemo(() => createChatApi(apiOverrides, { apiBase }), [apiOverrides, apiBase]);
+    const viewportNarrow = useMediaQuery(theme.breakpoints.down('md'));
+    const rootRef = useRef(null);
+    const [containerNarrow, setContainerNarrow] = useState(false);
     const [status, setStatus] = useState('loading'); // loading | available | not_configured | error
+    const narrow = layout === 'compact' || (layout === 'container' ? containerNarrow : viewportNarrow);
+    const appFrameCallback = useRef(onAppFrame);
+    useEffect(() => { appFrameCallback.current = onAppFrame; }, [onAppFrame]);
+    useEffect(() => {
+        if (layout !== 'container')
+            return undefined;
+        if (typeof ResizeObserver === 'undefined' || !rootRef.current) {
+            setContainerNarrow(viewportNarrow);
+            return undefined;
+        }
+        const observer = new ResizeObserver((entries) => { var _a, _b; const width = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width; if (width !== undefined)
+            setContainerNarrow(width < compactBelow); });
+        observer.observe(rootRef.current);
+        return () => observer.disconnect();
+    }, [layout, compactBelow, viewportNarrow, status]);
+    const api = useMemo(() => createChatApi(apiOverrides, { apiBase }), [apiOverrides, apiBase]);
     const [catalogue, setCatalogue] = useState({ entries: [], default: null });
     const [chats, setChats] = useState([]);
     const [archived, setArchived] = useState([]);
@@ -49,7 +75,12 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
     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 [problem, setProblem] = useState(null);
+    const [unavailableReason, setUnavailableReason] = useState(null);
+    const [trimmedCount, setTrimmedCount] = useState(null);
+    const [sidePanelOpen, setSidePanelOpen] = useState(false);
+    const turnsRef = useRef(turns);
+    useEffect(() => { turnsRef.current = turns; }, [turns]);
     const [listOpen, setListOpen] = useState(false);
     const [pickerOpen, setPickerOpen] = useState(false);
     const [openedOnce, setOpenedOnce] = useState(false); // distinguishes a reconnect from the first connect
@@ -57,19 +88,31 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
     const isArchived = Boolean(chat === null || chat === void 0 ? void 0 : chat.archived_at);
     const selection = (chat === null || chat === void 0 ? void 0 : chat.selection) || catalogue.default;
     const activeEntry = catalogue.entries.find((entry) => entry.id === (selection === null || selection === void 0 ? void 0 : selection.entry));
+    // Bumped on every scope change so that a list response of the previous scope is dropped.
+    const scopeVersion = useRef(0);
+    useEffect(() => { scopeVersion.current += 1; setChat(null); }, [scope]);
     const loadLists = useCallback(async () => {
-        const [active, old] = await Promise.all([api.listChats(), api.listChats({ archived: true })]);
+        const version = scopeVersion.current;
+        // Without a scope the api is called exactly as before the scope existed.
+        const [active, old] = scope === undefined
+            ? await Promise.all([api.listChats(), api.listChats({ archived: true })])
+            : await Promise.all([api.listChats({ scope }), api.listChats({ scope, archived: true })]);
+        if (version !== scopeVersion.current)
+            return;
         setChats(active.results || []);
         setNextChats(active.next || null);
         setArchived(old.results || []);
-    }, [api]);
+    }, [api, scope]);
     useEffect(() => {
         let live = true;
-        api.getStatus()
+        const request = scope === undefined ? api.getStatus() : api.getStatus({ scope });
+        request
             .then(async (state) => {
             if (state.status !== 'available') {
-                if (live)
+                if (live) {
                     setStatus(state.status);
+                    setUnavailableReason(state.reason || null);
+                }
                 return;
             }
             const [entries] = await Promise.all([api.getCatalogue(), loadLists()]);
@@ -81,12 +124,14 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
             .catch(() => { if (live)
             setStatus('error'); });
         return () => { live = false; };
-    }, [api, loadLists]);
+    }, [api, loadLists, scope]);
     useEffect(() => {
         setTurns([]);
         setOlderCursor(null);
         setTool(null);
         setProblem(null);
+        setTrimmedCount(null);
+        setSidePanelOpen(false);
         setDraft('');
         setOpenedOnce(false);
         if (!(chat === null || chat === void 0 ? void 0 : chat.id))
@@ -94,7 +139,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
         let live = true;
         api.listTurns(chat.id)
             .then((page) => { if (live) {
-            setTurns(chronological(page.results));
+            setTurns(chronological((page.results || []).map((turn) => (Object.assign(Object.assign({}, turn), { appFrames: [] })))));
             setOlderCursor(page.next || null);
         } })
             .catch(() => { if (live)
@@ -102,17 +147,25 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
         return () => { live = false; };
     }, [api, chat === null || chat === void 0 ? void 0 : chat.id]);
     const onFrame = useCallback((frame, chatId) => {
+        var _a;
         if (chatId !== (chat === null || chat === void 0 ? void 0 : chat.id))
             return;
         if (frame.type === 'history')
-            setTurns(chronological(frame.turns));
+            setTurns(chronological((frame.turns || []).map((turn) => (Object.assign(Object.assign({}, turn), { appFrames: [] })))));
         else if (frame.type === 'delta')
             setTurns((current) => appendDelta(current, frame.text || ''));
+        else if (frame.type === 'app') {
+            setTurns((current) => attachAppFrame(current, frame));
+            const running = turnsRef.current.findLast(isGenerating);
+            (_a = appFrameCallback.current) === null || _a === void 0 ? void 0 : _a.call(appFrameCallback, { name: frame.name, payload: frame.payload, chatId, turnId: running === null || running === void 0 ? void 0 : running.id });
+        }
+        else if (frame.type === 'notice' && frame.code === 'history_trimmed')
+            setTrimmedCount(frame.left_out || 0);
         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));
+            setTurns((current) => { const pending = current.findLast(isGenerating); return settleTurn(current, Object.assign(Object.assign({}, frame.turn), { appFrames: (pending === null || pending === void 0 ? void 0 : pending.appFrames) || [] })); });
             if (frame.turn.error_code === 'quota_exceeded')
                 setProblem('quota_exceeded');
         }
@@ -120,6 +173,8 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
             setTool(null);
             setTurns((current) => failGenerating(current, frame.code));
             setProblem(frame.code);
+            if (frame.code === 'unavailable')
+                setUnavailableReason(frame.reason || unavailableReason);
         }
     }, [chat === null || chat === void 0 ? void 0 : chat.id]);
     const onOpen = useCallback(() => { setOpenedOnce(true); setProblem((current) => (current === 'connection_lost' ? null : current)); }, []);
@@ -137,7 +192,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
     };
     const selectChat = (next) => { setChat(next); setListOpen(false); };
     const createChat = guarded(async () => {
-        const created = await api.createChat(scope ? { scope } : {});
+        const created = await api.createChat(scope !== undefined ? { scope } : {});
         setChats((current) => [created, ...current]);
         selectChat(created);
     });
@@ -155,7 +210,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
             setChat(null);
     });
     const loadMoreChats = guarded(async () => {
-        const page = await api.listChats({ cursor: nextChats });
+        const page = await api.listChats(Object.assign(Object.assign({}, (scope !== undefined ? { scope } : {})), { cursor: nextChats }));
         setChats((current) => [...current, ...(page.results || [])]);
         setNextChats(page.next || null);
     });
@@ -205,14 +260,19 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
         return null;
     };
     const list = (_jsx(ChatList, { chats: chats, archivedChats: archived, activeId: chat === null || chat === void 0 ? void 0 : 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';
+    const notConfigured = status === 'not_configured' || problem === 'not_configured';
+    const unavailable = status === 'unavailable' || problem === 'unavailable';
+    const unavailableText = typeof unavailableReasonText === 'function' ? unavailableReasonText(unavailableReason) : unavailableReasonText === null || unavailableReasonText === void 0 ? void 0 : unavailableReasonText[unavailableReason];
     if (status === 'loading')
         return _jsx(Box, { sx: sx, "aria-busy": "true" });
     if (status === 'error')
         return _jsx(Box, { sx: sx, children: _jsx(Alert, { severity: "error", children: t('Chat.loadError') }) });
-    if (unavailable) {
+    if (notConfigured) {
         return (_jsxs(Stack, { alignItems: "center", justifyContent: "center", spacing: 1, sx: Object.assign({ minHeight: 320, p: 3, textAlign: 'center' }, sx), children: [_jsx(Typography, { variant: "h6", children: t('Chat.unavailable') }), _jsx(Typography, { color: "text.secondary", children: t('Chat.noModel') })] }));
     }
-    return (_jsxs(Box, { sx: Object.assign({ 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), children: [narrow ? null : _jsx(Box, { sx: { borderRight: 1, borderColor: 'divider', minHeight: 0 }, children: list }), _jsxs(Stack, { sx: { minWidth: 0, minHeight: 0 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: 1.5, py: 0.5, borderBottom: 1, borderColor: 'divider', minHeight: 56 }, children: [narrow ? _jsx(Button, { color: "inherit", onClick: () => setListOpen(true), children: t('Chat.chats') }) : null, _jsx(Typography, { noWrap: true, sx: { flex: 1, fontWeight: 600 }, children: chat ? (chat.title || t('Chat.untitled')) : '' }), socket.status === 'connecting' && openedOnce ? _jsx(Chip, { size: "small", color: "warning", variant: "outlined", label: t('Chat.reconnecting') }) : null, isArchived ? _jsx(Chip, { size: "small", label: t('Chat.archived') }) : null, isArchived ? _jsx(Button, { size: "small", onClick: () => updateChat(chat, { archived: false }), children: t('Chat.restore') }) : null, chat ? (_jsx(ModelPicker, { entries: catalogue.entries, selection: selection, disabled: isArchived || running, open: pickerOpen, onOpenChange: setPickerOpen, onChange: (next) => updateChat(chat, { selection: next }) })) : null] }), chat ? (_jsxs(_Fragment, { children: [_jsx(ChatThread, { turns: turns, tool: tool, notice: noticeFor(), hasOlder: Boolean(olderCursor), olderBusy: olderBusy, onLoadOlder: loadOlder, onRetry: retry, readOnly: isArchived }), isArchived ? _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { px: 2, pb: 1 }, children: t('Chat.archivedReadOnly') }) : null, _jsx(ChatComposer, { value: draft, onChange: setDraft, onSend: send, onStop: () => socket.send({ type: 'stop' }), running: running, archived: isArchived, connected: socket.connected })] })) : (_jsxs(Stack, { alignItems: "center", justifyContent: "center", spacing: 2, sx: { flex: 1, p: 3 }, children: [_jsx(Typography, { color: "text.secondary", align: "center", children: t('Chat.selectChat') }), _jsx(Button, { variant: "contained", onClick: createChat, children: t('Chat.newChat') })] }))] }), narrow ? _jsx(Drawer, { open: listOpen, onClose: () => setListOpen(false), slotProps: { paper: { sx: { width: 'min(320px, 86vw)' } } }, children: list }) : null] }));
+    if (unavailable) {
+        return (_jsx(Stack, { alignItems: "center", justifyContent: "center", spacing: 1, sx: Object.assign({ minHeight: 320, p: 3, textAlign: 'center' }, sx), children: _jsx(Typography, { color: "text.secondary", children: unavailableText || t('Chat.notAvailableHere') }) }));
+    }
+    return (_jsxs(Box, { ref: rootRef, sx: Object.assign({ display: 'grid', gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : `minmax(240px, 320px) minmax(0, 1fr)${chat && sidePanel ? ' minmax(240px, 320px)' : ''}`, height: '100%', minHeight: 480, border: 1, borderColor: 'divider', borderRadius: 1, overflow: 'hidden', bgcolor: 'background.paper' }, sx), children: [narrow ? null : _jsx(Box, { sx: { borderRight: 1, borderColor: 'divider', minHeight: 0 }, children: list }), _jsxs(Stack, { sx: { minWidth: 0, minHeight: 0 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: 1.5, py: 0.5, borderBottom: 1, borderColor: 'divider', minHeight: 56 }, children: [narrow ? _jsx(Button, { color: "inherit", onClick: () => setListOpen(true), children: t('Chat.chats') }) : null, _jsx(Typography, { noWrap: true, sx: { flex: 1, fontWeight: 600 }, children: chat ? (chat.title || t('Chat.untitled')) : '' }), socket.status === 'connecting' && openedOnce ? _jsx(Chip, { size: "small", color: "warning", variant: "outlined", label: t('Chat.reconnecting') }) : null, isArchived ? _jsx(Chip, { size: "small", label: t('Chat.archived') }) : null, isArchived ? _jsx(Button, { size: "small", onClick: () => updateChat(chat, { archived: false }), children: t('Chat.restore') }) : null, chat ? (_jsx(ModelPicker, { entries: catalogue.entries, selection: selection, disabled: isArchived || running, open: pickerOpen, onOpenChange: setPickerOpen, onChange: (next) => updateChat(chat, { selection: next }), sheet: narrow })) : null, chat && sidePanel && narrow ? _jsx(Button, { color: "inherit", onClick: () => setSidePanelOpen(true), children: sidePanelLabel || t('Chat.sidePanel') }) : null] }), chat ? (_jsxs(_Fragment, { children: [_jsx(ChatThread, { turns: turns, chat: chat, renderAnswerExtra: renderAnswerExtra, trimmedCount: trimmedCount, tool: tool, notice: noticeFor(), hasOlder: Boolean(olderCursor), olderBusy: olderBusy, onLoadOlder: loadOlder, onRetry: retry, readOnly: isArchived }), isArchived ? _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { px: 2, pb: 1 }, children: t('Chat.archivedReadOnly') }) : null, renderComposerExtra ? _jsx(Box, { children: renderComposerExtra({ chat }) }, chat.id) : null, _jsx(ChatComposer, { value: draft, onChange: setDraft, onSend: send, onStop: () => socket.send({ type: 'stop' }), running: running, archived: isArchived, connected: socket.connected })] })) : (_jsxs(Stack, { alignItems: "center", justifyContent: "center", spacing: 2, sx: { flex: 1, p: 3 }, children: [_jsx(Typography, { color: "text.secondary", align: "center", children: t('Chat.selectChat') }), _jsx(Button, { variant: "contained", onClick: createChat, children: t('Chat.newChat') })] }))] }), chat && sidePanel && !narrow ? _jsx(Box, { sx: { borderLeft: 1, borderColor: 'divider', minHeight: 0, overflow: 'auto' }, children: sidePanel(chat) }, chat.id) : null, narrow && chat && sidePanel ? _jsx(Drawer, { anchor: "right", open: sidePanelOpen, onClose: () => setSidePanelOpen(false), slotProps: { paper: { 'aria-label': sidePanelLabel || t('Chat.sidePanel') } }, children: _jsx(Box, { children: sidePanel(chat) }, chat.id) }) : null, narrow ? _jsx(Drawer, { open: listOpen, onClose: () => setListOpen(false), slotProps: { paper: { sx: { width: 'min(320px, 86vw)' } } }, children: list }) : null] }));
 }
 export default ChatWorkspace;

package/dist/chat/ModelPicker.js

@@ -12,10 +12,11 @@ const groupByDriver = (entries) => entries.reduce((groups, entry) => {
  * 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 }) {
+export function ModelPicker({ entries = [], selection, onChange, disabled = false, open, onOpenChange, sheet }) {
     const { t } = useTranslation();
     const theme = useTheme();
-    const narrow = useMediaQuery(theme.breakpoints.down('md'));
+    const viewportNarrow = useMediaQuery(theme.breakpoints.down('md'));
+    const narrow = sheet !== null && sheet !== void 0 ? sheet : viewportNarrow;
     const anchor = useRef(null);
     const [innerOpen, setInnerOpen] = useState(false);
     const isOpen = open !== null && open !== void 0 ? open : innerOpen;

package/dist/chat/api.js

@@ -5,12 +5,12 @@ export function createChatApi(overrides = {}, { apiBase = '/api/assistant/' } =
     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: Object.assign({ archived }, (cursor ? { cursor } : {})) })),
+        listChats: ({ archived = false, cursor, scope } = {}) => data(apiClient.get(urls.chats, { params: Object.assign(Object.assign({ archived }, (cursor ? { cursor } : {})), (scope !== undefined ? { scope } : {})) })),
         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)),
+        getStatus: ({ scope } = {}) => data(scope !== undefined ? apiClient.get(urls.status, { params: { scope } }) : apiClient.get(urls.status)),
     };
     return Object.assign(Object.assign({}, defaults), overrides);
 }

package/dist/chat/kitSxRegistry.js

@@ -1,9 +1,10 @@
 import { createKitSxEntry } from '../theme/kitSxEntry';
 import { CHAT_LIST_ARCHIVED_ACTION_SX, CHAT_LIST_ROW_ACTION_SX } from './ChatList';
-import { CHAT_THREAD_NOTICE_SX, CHAT_THREAD_TOOL_CHIP_SX } from './ChatThread';
+import { CHAT_THREAD_NOTICE_SX, CHAT_THREAD_TOOL_CHIP_SX, CHAT_THREAD_TRIMMED_SX } from './ChatThread';
 export const CHAT_KIT_SX_REGISTRY = [
     createKitSxEntry('ChatList.rowAction', 'MuiIconButton', CHAT_LIST_ROW_ACTION_SX, 'CHAT_LIST_ROW_ACTION_SX'),
     createKitSxEntry('ChatList.archivedAction', 'MuiButton', CHAT_LIST_ARCHIVED_ACTION_SX, 'CHAT_LIST_ARCHIVED_ACTION_SX'),
     createKitSxEntry('ChatThread.toolChip', 'MuiChip', CHAT_THREAD_TOOL_CHIP_SX, 'CHAT_THREAD_TOOL_CHIP_SX'),
+    createKitSxEntry('ChatThread.trimmed', 'MuiChip', CHAT_THREAD_TRIMMED_SX, 'CHAT_THREAD_TRIMMED_SX'),
     createKitSxEntry('ChatThread.notice', 'MuiAlert', CHAT_THREAD_NOTICE_SX, 'CHAT_THREAD_NOTICE_SX'),
 ];

package/dist/chat/wire.js

@@ -1,7 +1,9 @@
 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 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', 'unavailable'];
 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) + '/';
+export const CHAT_FRAME_TYPES = { APP: 'app', NOTICE: 'notice' };
+export const CHAT_NOTICE_CODES = { HISTORY_TRIMMED: 'history_trimmed' };

package/dist/i18n/chatTranslations.js

@@ -33,6 +33,10 @@ export const chatTranslations = {
     '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.notAvailableHere': { de: 'Der Assistent ist hier nicht verfügbar.', en: 'The assistant is not available here.', fr: 'L’assistant n’est pas disponible ici.', sw: 'Msaidizi hapatikani hapa.' },
+    'Chat.historyTrimmed_one': { de: '{{count}} frühere Nachricht wurde ausgelassen', en: '{{count}} earlier message left out', fr: '{{count}} message précédent omis', sw: 'Ujumbe {{count}} wa awali umeachwa' },
+    'Chat.historyTrimmed_other': { de: '{{count}} frühere Nachrichten wurden ausgelassen', en: '{{count}} earlier messages left out', fr: '{{count}} messages précédents omis', sw: 'Ujumbe {{count}} wa awali umeachwa' },
+    'Chat.sidePanel': { de: 'Details', en: 'Details', fr: 'Détails', sw: 'Maelezo' },
     '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}}' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {