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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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.

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/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, useRef, 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';
@@ -42,7 +42,7 @@ 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, unavailableReasonText, sidePanel, sidePanelLabel, renderAnswerExtra, renderComposerExtra, onAppFrame, layout = 'viewport', compactBelow = 720 }) {
+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 viewportNarrow = useMediaQuery(theme.breakpoints.down('md'));
@@ -70,17 +70,29 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     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 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
@@ -90,7 +102,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     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]);
+    useEffect(() => { scopeVersion.current += 1; setChat(null); setListsLoaded(false); appliedId.current = undefined; unloadableIds.current.clear(); }, [scope]);
     const loadLists = useCallback(async () => {
         const version = scopeVersion.current;
         // Without a scope the api is called exactly as before the scope existed.
@@ -98,10 +110,11 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
             ? 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;
+            return undefined;
         setChats(active.results || []);
         setNextChats(active.next || null);
         setArchived(old.results || []);
+        return [...(active.results || []), ...(old.results || [])];
     }, [api, scope]);
     useEffect(() => {
         let live = true;
@@ -119,6 +132,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
             if (live) {
                 setStatus(state.status);
                 setCatalogue(entries);
+                setListsLoaded(true);
             }
         })
             .catch(() => { if (live)
@@ -126,6 +140,52 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
         return () => { live = false; };
     }, [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);
@@ -134,6 +194,8 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
         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;
@@ -181,6 +243,37 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     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);
@@ -235,6 +328,22 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
             }]);
         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) => {
@@ -273,6 +382,6 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     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] }));
+    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/package.json

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