botmux 3.2.0 → 3.2.1

package/dist/dashboard/web/sessions-page.js

@@ -9,9 +9,22 @@ import { OPEN_CREATE_SESSION_EVENT, consumePendingCreateSession } from './create
 import { BOARD_COLUMNS, CLI_FILTER_OPTIONS, ICON, SESSION_STATUS_OPTIONS, canRestartSession, cssToken, deriveSessionBoardColumn, fetchPickerBots, formatTokenCount, groupSessionsByTopic, historySenderKey, isUnknownChatSession, lockActionLabel, openWriteLink, repoBasename, restartConfirmMessage, sessionLocationText, sessionLocationTitle, sessionRuntimeCounts, sessionSearchText, sessionTopicKey, sessionStatusText, shouldOpenWritableTerminal, terminalHref, tokenCount, } from './sessions.js';
 import { addMonitorRoomSessionIds, monitorRoomUrl } from './monitor-room-store.js';
 import { CreateActionButton, DropdownMenu, LoadingState } from './dashboard-components.js';
+import { filterMentionBots, findMentionTrigger, insertBotMention, insertImageMarkers, removeAndReindexImageMarkers, } from './create-session-composer.js';
 import { store } from './store.js';
 import { attentionWaitSince, botAvatarHtml, botDisplayName, chatAvatarHtml, chatDisplayTitle, loadNameMaps, relTime, stripMentionPrefix, t, ui, } from './ui.js';
 import { SessionsKanbanView, } from './sessions-kanban.js';
+const CREATE_IMAGE_TYPES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+const CREATE_IMAGE_MAX_COUNT = 8;
+const CREATE_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
+const CREATE_IMAGE_MAX_TOTAL_BYTES = 25 * 1024 * 1024;
+function imageFileDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => typeof reader.result === 'string' ? resolve(reader.result) : reject(new Error('bad_image_data'));
+        reader.onerror = () => reject(reader.error ?? new Error('image_read_failed'));
+        reader.readAsDataURL(file);
+    });
+}
 function idleCleanupHoursLabel(hours) {
     return hours === 168 ? '7d' : `${hours}H`;
 }
@@ -702,6 +715,7 @@ function CreateSessionDialog(props) {
         };
     }, [props]);
     const [content, setContent] = useState('');
+    const [images, setImages] = useState([]);
     const [selectedBots, setSelectedBots] = useState(new Set());
     const [mode, setMode] = useState('lead');
     const [lead, setLead] = useState('');
@@ -713,10 +727,15 @@ function CreateSessionDialog(props) {
     const [botQuery, setBotQuery] = useState('');
     const [keepOpen, setKeepOpen] = useState(() => readStoredCreateKeepOpen(windowStorage()));
     const [keptSuccess, setKeptSuccess] = useState(null);
+    const [mentionTrigger, setMentionTrigger] = useState(null);
+    const [mentionIndex, setMentionIndex] = useState(0);
+    const contentRef = useRef(null);
+    const nextImageOrdinalRef = useRef(1);
     useEffect(() => {
         if (!state)
             return;
         setContent('');
+        setImages([]);
         setSelectedBots(new Set());
         setMode('lead');
         setLead('');
@@ -727,6 +746,9 @@ function CreateSessionDialog(props) {
         setSubmitting(false);
         setBotQuery('');
         setKeptSuccess(null);
+        setMentionTrigger(null);
+        setMentionIndex(0);
+        nextImageOrdinalRef.current = 1;
     }, [state]);
     if (!state)
         return null;
@@ -749,6 +771,107 @@ function CreateSessionDialog(props) {
     const visibleBots = botQueryNorm
         ? bots.filter(bot => bot.botName.toLowerCase().includes(botQueryNorm) || bot.larkAppId.toLowerCase().includes(botQueryNorm))
         : bots;
+    const mentionBots = mentionTrigger
+        ? filterMentionBots(bots, mentionTrigger.query).slice(0, 8)
+        : [];
+    const chooseMentionBot = (bot) => {
+        if (!mentionTrigger)
+            return;
+        const inserted = insertBotMention(content, mentionTrigger, bot.botName);
+        setContent(inserted.text);
+        setMentionTrigger(null);
+        setMentionIndex(0);
+        setSelectedBots(prev => new Set(prev).add(bot.larkAppId));
+        setLead(prev => prev || bot.larkAppId);
+        requestAnimationFrame(() => {
+            const textarea = contentRef.current;
+            if (!textarea)
+                return;
+            textarea.focus();
+            textarea.setSelectionRange(inserted.caret, inserted.caret);
+        });
+    };
+    const handleContentKeyDown = (event) => {
+        if (!mentionTrigger || mentionBots.length === 0)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const delta = event.key === 'ArrowDown' ? 1 : -1;
+            setMentionIndex(index => (index + delta + mentionBots.length) % mentionBots.length);
+            return;
+        }
+        if (event.key === 'Enter' || event.key === 'Tab') {
+            event.preventDefault();
+            chooseMentionBot(mentionBots[Math.min(mentionIndex, mentionBots.length - 1)]);
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setMentionTrigger(null);
+        }
+    };
+    const handleContentPaste = async (event) => {
+        const pasted = [...event.clipboardData.files].filter(file => file.type.startsWith('image/'));
+        if (pasted.length === 0)
+            return;
+        event.preventDefault();
+        const pasteStart = event.currentTarget.selectionStart ?? content.length;
+        const pasteEnd = event.currentTarget.selectionEnd ?? pasteStart;
+        const supported = pasted.filter(file => CREATE_IMAGE_TYPES.has(file.type.toLowerCase()));
+        if (supported.length !== pasted.length) {
+            alert(t('sessions.create.imageUnsupported'));
+            return;
+        }
+        if (images.length + supported.length > CREATE_IMAGE_MAX_COUNT) {
+            alert(t('sessions.create.imageCountLimit', { n: String(CREATE_IMAGE_MAX_COUNT) }));
+            return;
+        }
+        if (supported.some(file => file.size > CREATE_IMAGE_MAX_BYTES)) {
+            alert(t('sessions.create.imageSizeLimit'));
+            return;
+        }
+        const nextTotal = images.reduce((sum, image) => sum + image.size, 0)
+            + supported.reduce((sum, file) => sum + file.size, 0);
+        if (nextTotal > CREATE_IMAGE_MAX_TOTAL_BYTES) {
+            alert(t('sessions.create.imageTotalLimit'));
+            return;
+        }
+        try {
+            const firstOrdinal = nextImageOrdinalRef.current;
+            const added = await Promise.all(supported.map(async (file, index) => {
+                const previewUrl = await imageFileDataUrl(file);
+                const comma = previewUrl.indexOf(',');
+                if (comma < 0)
+                    throw new Error('bad_image_data');
+                const ordinal = firstOrdinal + index;
+                return {
+                    id: `${Date.now()}-${index}-${Math.random().toString(36).slice(2)}`,
+                    ordinal,
+                    marker: `[${t('sessions.create.imageMarker', { n: String(ordinal) })}]`,
+                    name: file.name || `pasted-image-${images.length + index + 1}`,
+                    mimeType: file.type.toLowerCase(),
+                    size: file.size,
+                    dataBase64: previewUrl.slice(comma + 1),
+                    previewUrl,
+                };
+            }));
+            nextImageOrdinalRef.current += added.length;
+            const inserted = insertImageMarkers(content, pasteStart, pasteEnd, added.map(image => image.marker));
+            setContent(inserted.text);
+            setImages(prev => [...prev, ...added]);
+            setMentionTrigger(null);
+            requestAnimationFrame(() => {
+                const textarea = contentRef.current;
+                if (!textarea)
+                    return;
+                textarea.focus();
+                textarea.setSelectionRange(inserted.caret, inserted.caret);
+            });
+        }
+        catch {
+            alert(t('sessions.create.imageReadFailed'));
+        }
+    };
     const submit = async (event) => {
         event.preventDefault();
         const text = content.trim();
@@ -779,6 +902,11 @@ function CreateSessionDialog(props) {
                     leadLarkAppId: mode === 'lead' ? leadLarkAppId : undefined,
                     name: name.trim() || undefined,
                     bindWorkingDir: bindWorkingDir.trim() || undefined,
+                    images: images.map(image => ({
+                        name: image.name,
+                        mimeType: image.mimeType,
+                        dataBase64: image.dataBase64,
+                    })),
                 }),
             });
             const body = await r.json().catch(() => null);
@@ -787,6 +915,8 @@ function CreateSessionDialog(props) {
                     // 连续创建：不切成功页、不关弹窗，保留机器人勾选等配置，清空内容/群名继续下一条
                     setKeptSuccess(body);
                     setContent('');
+                    setImages([]);
+                    nextImageOrdinalRef.current = 1;
                     setName('');
                 }
                 else {
@@ -803,7 +933,23 @@ function CreateSessionDialog(props) {
             setSubmitting(false);
         }
     };
-    return (_jsxs("article", { className: "cs-card", children: [_jsx("header", { className: "cs-header", children: _jsx("h3", { children: t('sessions.create.title') }) }), _jsxs("form", { id: "cs-form", onSubmit: submit, children: [_jsxs("fieldset", { className: "cs-content", children: [_jsx("legend", { children: t('sessions.create.content') }), _jsx("textarea", { name: "content", rows: 5, placeholder: t('sessions.create.contentPlaceholder'), required: true, value: content, onChange: event => setContent(event.currentTarget.value) })] }), _jsxs("fieldset", { className: "cs-bots", children: [_jsx("legend", { children: t('sessions.create.bots') }), bots.length ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "cs-bot-search", type: "search", name: "botSearch", placeholder: t('sessions.create.botSearchPlaceholder'), "aria-label": t('sessions.create.botSearchPlaceholder'), value: botQuery, onChange: event => setBotQuery(event.currentTarget.value) }), visibleBots.length ? (_jsx("div", { className: "cs-bot-list", children: visibleBots.map(bot => (_jsxs("label", { className: "cs-bot", children: [_jsx("input", { type: "checkbox", name: "bot", value: bot.larkAppId, checked: selectedBots.has(bot.larkAppId), onChange: event => {
+    return (_jsxs("article", { className: "cs-card", children: [_jsx("header", { className: "cs-header", children: _jsx("h3", { children: t('sessions.create.title') }) }), _jsxs("form", { id: "cs-form", onSubmit: submit, children: [_jsxs("fieldset", { className: "cs-content", children: [_jsx("legend", { children: t('sessions.create.content') }), _jsxs("div", { className: "cs-composer", children: [_jsx("textarea", { ref: contentRef, name: "content", rows: 5, placeholder: t('sessions.create.contentPlaceholder'), "aria-describedby": "cs-content-help", required: true, value: content, onChange: event => {
+                                            const textarea = event.currentTarget;
+                                            const next = textarea.value;
+                                            setContent(next);
+                                            setMentionTrigger(findMentionTrigger(next, textarea.selectionStart ?? next.length));
+                                            setMentionIndex(0);
+                                        }, onClick: event => setMentionTrigger(findMentionTrigger(content, event.currentTarget.selectionStart ?? content.length)), onKeyDown: handleContentKeyDown, onPaste: event => { void handleContentPaste(event); }, onBlur: () => setTimeout(() => setMentionTrigger(null), 0) }), mentionTrigger ? (_jsx("div", { className: "cs-mention-menu", role: "listbox", "aria-label": t('sessions.create.mentionBots'), children: mentionBots.length ? mentionBots.map((bot, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === mentionIndex, className: index === mentionIndex ? 'active' : undefined, onMouseDown: event => event.preventDefault(), onClick: () => chooseMentionBot(bot), children: [_jsxs("strong", { children: ["@", bot.botName] }), _jsx("small", { children: bot.larkAppId })] }, bot.larkAppId))) : _jsx("p", { children: t('sessions.create.noBotMatch') }) })) : null] }), _jsx("small", { id: "cs-content-help", children: t('sessions.create.contentHelp') }), images.length ? (_jsx("div", { className: "cs-image-list", "aria-label": t('sessions.create.pastedImages'), children: images.map(image => (_jsxs("figure", { className: "cs-image-item", children: [_jsx("img", { src: image.previewUrl, alt: image.name }), _jsxs("figcaption", { title: `${image.marker} ${image.name}`, children: [_jsx("strong", { children: image.marker }), _jsx("span", { children: image.name })] }), _jsx("button", { type: "button", className: "cs-image-remove", "aria-label": t('sessions.create.removeImage', { name: `${image.marker} ${image.name}` }), title: t('sessions.create.removeImage', { name: `${image.marker} ${image.name}` }), onClick: () => {
+                                                const remaining = images.filter(item => item.id !== image.id);
+                                                const reconciled = removeAndReindexImageMarkers(content, image.marker, remaining.map(item => item.marker), index => `[${t('sessions.create.imageMarker', { n: String(index + 1) })}]`);
+                                                setContent(reconciled.text);
+                                                setImages(remaining.map((item, index) => ({
+                                                    ...item,
+                                                    ordinal: index + 1,
+                                                    marker: reconciled.markers[index],
+                                                })));
+                                                nextImageOrdinalRef.current = remaining.length + 1;
+                                            }, children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: _jsx("path", { d: "M7 7l10 10M17 7 7 17" }) }) })] }, image.id))) })) : null] }), _jsxs("fieldset", { className: "cs-bots", children: [_jsx("legend", { children: t('sessions.create.bots') }), bots.length ? (_jsxs(_Fragment, { children: [_jsx("input", { className: "cs-bot-search", type: "search", name: "botSearch", placeholder: t('sessions.create.botSearchPlaceholder'), "aria-label": t('sessions.create.botSearchPlaceholder'), value: botQuery, onChange: event => setBotQuery(event.currentTarget.value) }), visibleBots.length ? (_jsx("div", { className: "cs-bot-list", children: visibleBots.map(bot => (_jsxs("label", { className: "cs-bot", children: [_jsx("input", { type: "checkbox", name: "bot", value: bot.larkAppId, checked: selectedBots.has(bot.larkAppId), onChange: event => {
                                                         const checked = event.currentTarget.checked;
                                                         setSelectedBots(prev => {
                                                             const next = new Set(prev);