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

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 4.2.0 - UCM-CHAT-4
+
+`ChatWorkspace` takes two optional props so a host can control which chat is shown. `activeChatId` shows that chat
+(`null` shows none, `undefined`, the default, keeps the selection internal); an id that is not in the loaded lists
+triggers one reload of the lists, and an id that still cannot be found leaves the normal no-chat state. It is applied
+only when the prop value changes, so a host that echoes `onActiveChatChange` back causes no extra requests.
+`onActiveChatChange(chatId)` is called when the id of the shown chat changes (selection, creation, deletion as `null`,
+a change driven by `activeChatId`), not for the initial state with no chat and not when the shown chat is only
+archived, renamed or updated.
+`composerPrefill` (`{ id, text }`) puts the text into the composer of the shown chat and focuses it; each new `id` is
+applied (the same text twice, if asked twice), and a request with no chat shown, for an archived chat, or while
+`activeChatId` is `null` is ignored. A prefill sent together with an `activeChatId` switch waits for the requested chat.
+`renderAnswerExtra` additionally receives `send(text)`, which sends the text as the next message exactly like a typed
+send, and `canSend` (false while a turn runs, for an archived chat and while disconnected). `ChatComposer` takes an
+optional `inputRef`. Switching chats now clears the previous chat's content before paint.
+Without the new props nothing changes.
+
+## 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/ChatComposer.js

@@ -6,13 +6,13 @@ 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 }) {
+export function ChatComposer({ value = '', onChange, onSend, onStop, running = false, archived = false, connected = true, inputRef, sx }) {
     const { t } = useTranslation();
     const blocked = archived || !connected;
     const canSend = !running && !blocked && value.trim().length > 0;
     const submit = () => { if (canSend)
         onSend === null || onSend === void 0 ? void 0 : onSend(); };
-    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", gap: 1, sx: Object.assign({ p: { xs: 1, md: 2 }, borderTop: 1, borderColor: 'divider' }, sx), children: [_jsx(TextField, { multiline: true, maxRows: 6, fullWidth: true, size: "small", value: value, disabled: blocked, placeholder: t('Chat.message'), slotProps: { htmlInput: { 'aria-label': t('Chat.message') } }, onChange: (event) => onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value), onKeyDown: (event) => {
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", gap: 1, sx: Object.assign({ p: { xs: 1, md: 2 }, borderTop: 1, borderColor: 'divider' }, sx), children: [_jsx(TextField, { multiline: true, maxRows: 6, fullWidth: true, size: "small", value: value, inputRef: inputRef, disabled: blocked, placeholder: t('Chat.message'), slotProps: { htmlInput: { 'aria-label': t('Chat.message') } }, onChange: (event) => onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value), onKeyDown: (event) => {
                     var _a;
                     if (event.key === 'Enter' && !event.shiftKey && !((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.isComposing)) {
                         event.preventDefault();

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, useLayoutEffect, 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,23 +42,57 @@ 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, activeChatId, onActiveChatChange, composerPrefill, 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([]);
     const [nextChats, setNextChats] = useState(null);
     const [chat, setChat] = useState(null);
+    const [listsLoaded, setListsLoaded] = useState(false);
     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 composerInputRef = useRef(null);
+    const lastPrefillId = useRef(undefined);
+    const [focusRequest, setFocusRequest] = useState(0);
+    const focusPending = useRef(false);
+    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 activeChangeCallback = useRef(onActiveChatChange);
+    activeChangeCallback.current = onActiveChatChange;
+    const lastReportedId = useRef(null);
+    const latestWantedId = useRef(activeChatId);
+    latestWantedId.current = activeChatId;
+    const appliedId = useRef(undefined);
+    const unloadableIds = useRef(new Set()); // ids the host asked for that no list contains
     const [listOpen, setListOpen] = useState(false);
     const [pickerOpen, setPickerOpen] = useState(false);
     const [openedOnce, setOpenedOnce] = useState(false); // distinguishes a reconnect from the first connect
@@ -57,44 +100,108 @@ 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); setListsLoaded(false); appliedId.current = undefined; unloadableIds.current.clear(); }, [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 undefined;
         setChats(active.results || []);
         setNextChats(active.next || null);
         setArchived(old.results || []);
-    }, [api]);
+        return [...(active.results || []), ...(old.results || [])];
+    }, [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()]);
             if (live) {
                 setStatus(state.status);
                 setCatalogue(entries);
+                setListsLoaded(true);
             }
         })
             .catch(() => { if (live)
             setStatus('error'); });
         return () => { live = false; };
-    }, [api, loadLists]);
+    }, [api, loadLists, scope]);
     useEffect(() => {
+        var _a;
+        var _b;
+        const id = (_b = chat === null || chat === void 0 ? void 0 : chat.id) !== null && _b !== void 0 ? _b : null;
+        if (id === lastReportedId.current)
+            return;
+        lastReportedId.current = id;
+        (_a = activeChangeCallback.current) === null || _a === void 0 ? void 0 : _a.call(activeChangeCallback, id);
+    }, [chat === null || chat === void 0 ? void 0 : chat.id]);
+    // A layout effect: a host-driven switch to a known chat is applied before the browser paints.
+    useLayoutEffect(() => {
+        if (activeChatId === undefined || status !== 'available' || !listsLoaded)
+            return undefined;
+        const wantedKey = activeChatId === null ? null : String(activeChatId);
+        if (wantedKey === null) {
+            appliedId.current = null;
+            setChat(null);
+            return;
+        }
+        if (String(chat === null || chat === void 0 ? void 0 : chat.id) === wantedKey)
+            return;
+        const existing = [...chats, ...archived].find((item) => String(item.id) === wantedKey);
+        if (existing) {
+            setChat(existing);
+            return;
+        }
+        if (appliedId.current === wantedKey)
+            return;
+        appliedId.current = wantedKey;
+        let live = true;
+        loadLists().then((loaded) => {
+            if (!live || loaded === undefined || latestWantedId.current === undefined || String(latestWantedId.current) !== wantedKey)
+                return;
+            const found = loaded.find((item) => String(item.id) === wantedKey);
+            if (!found)
+                unloadableIds.current.add(wantedKey);
+            setChat(found || null);
+        }).catch(() => {
+            if (live && latestWantedId.current !== undefined && String(latestWantedId.current) === wantedKey) {
+                unloadableIds.current.add(wantedKey);
+                setChat(null);
+            }
+        });
+        return () => { live = false; };
+    }, [activeChatId, status, listsLoaded]);
+    // Clear the previous chat's content before the browser paints, so a host-driven switch never flashes it under the new title.
+    useLayoutEffect(() => {
         setTurns([]);
         setOlderCursor(null);
         setTool(null);
         setProblem(null);
+        setTrimmedCount(null);
+        setSidePanelOpen(false);
         setDraft('');
         setOpenedOnce(false);
+    }, [chat === null || chat === void 0 ? void 0 : chat.id]);
+    useEffect(() => {
         if (!(chat === null || chat === void 0 ? void 0 : chat.id))
             return undefined;
         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 +209,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,12 +235,45 @@ 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)); }, []);
     const onClose = useCallback(({ reason, retrying }) => { if (!retrying)
         setProblem(reason); }, []);
     const socket = useChatSocket(chat === null || chat === void 0 ? void 0 : chat.id, { wsUrl, onFrame, onOpen, onClose });
+    useEffect(() => {
+        if (composerPrefill == null || composerPrefill.id === lastPrefillId.current)
+            return;
+        // `null` means the host wants no chat shown: nothing to fill, and the chat being left must not receive the text.
+        if (activeChatId === null) {
+            lastPrefillId.current = composerPrefill.id;
+            return;
+        }
+        // The host switches chats and prefills in one go: wait for the requested chat instead of filling the one being left.
+        const wanted = activeChatId == null ? null : String(activeChatId);
+        if (wanted !== null && String(chat === null || chat === void 0 ? void 0 : chat.id) !== wanted && !unloadableIds.current.has(wanted))
+            return;
+        lastPrefillId.current = composerPrefill.id;
+        if (!chat || isArchived)
+            return;
+        setDraft(composerPrefill.text);
+        focusPending.current = true;
+        setFocusRequest((count) => count + 1);
+    }, [composerPrefill, chat, isArchived, activeChatId]);
+    // Runs after the render that carries the prefilled draft; a counter, so the same text requested twice focuses twice.
+    // A disabled input (connection down) cannot take focus, so the request stays pending until it is enabled again.
+    useEffect(() => {
+        var _a;
+        const input = composerInputRef.current;
+        if (!focusPending.current || !input || input.disabled)
+            return;
+        focusPending.current = false;
+        input.focus();
+        const end = input.value.length;
+        (_a = input.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(input, end, end);
+    }, [focusRequest, socket.connected]);
     const guarded = (action) => async (...args) => {
         try {
             return await action(...args);
@@ -137,7 +285,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 +303,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);
     });
@@ -180,6 +328,22 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx })
             }]);
         return true;
     };
+    const canSendFromSlot = Boolean(chat && !isArchived && socket.connected && !running);
+    // A slot may keep an old `send` around: read the latest availability, and close it right away after a send.
+    const canSendRef = useRef(false);
+    canSendRef.current = canSendFromSlot;
+    const sendFromSlot = (text) => {
+        const message = typeof text === 'string' ? text : '';
+        if (!canSendRef.current || !message.trim())
+            return false;
+        const started = startTurn(message);
+        if (started)
+            canSendRef.current = false;
+        return started;
+    };
+    const answerExtra = renderAnswerExtra
+        ? (args) => renderAnswerExtra(Object.assign(Object.assign({}, args), { send: sendFromSlot, canSend: canSendFromSlot }))
+        : undefined;
     const send = () => { if (startTurn(draft))
         setDraft(''); };
     const retry = (turn) => {
@@ -205,14 +369,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: answerExtra, 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, inputRef: composerInputRef })] })) : (_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.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {