@vibe-forge/tsconfigs 0.7.2 → 0.8.0

package/dist/apps/client/src/components/chat/sender/Sender.js

@@ -0,0 +1,454 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Sender.scss';
+import { App, Button, Cascader, Input, Select, Tooltip } from 'antd';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+import { isShortcutMatch } from '../../../utils/shortcutUtils';
+import { CompletionMenu } from './CompletionMenu';
+import { ThinkingStatus } from './ThinkingStatus';
+const { TextArea } = Input;
+const formatToolLabel = (tool) => {
+    const parts = tool.split('__');
+    return parts[parts.length - 1] || tool;
+};
+const getToolGroupIcon = (groupKey) => {
+    return groupKey === 'chrome-devtools' ? 'web_traffic' : 'memory';
+};
+export function Sender({ onSend, onSendContent, adapterLocked = false, sessionStatus, onInterrupt, onClear, sessionInfo, connectionError, onRetryConnection, interactionRequest, onInteractionResponse, placeholder, modelOptions, selectedModel, onModelChange, permissionMode, permissionModeOptions, onPermissionModeChange, selectedAdapter, adapterOptions, onAdapterChange, modelUnavailable }) {
+    const { t } = useTranslation();
+    const { message } = App.useApp();
+    const [input, setInput] = useState('');
+    const [showCompletion, setShowCompletion] = useState(false);
+    const [completionItems, setCompletionItems] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [triggerChar, setTriggerChar] = useState(null);
+    const [showToolsList, setShowToolsList] = useState(false);
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const isMac = navigator.platform.includes('Mac');
+    const [pendingImages, setPendingImages] = useState([]);
+    const { data: configRes } = useSWR('/api/config');
+    const sendShortcut = configRes?.sources?.merged?.shortcuts?.sendMessage;
+    const clearInputShortcut = configRes?.sources?.merged?.shortcuts?.clearInput;
+    const resolvedSendShortcut = sendShortcut != null && sendShortcut.trim() !== ''
+        ? sendShortcut
+        : 'mod+enter';
+    const isThinking = sessionStatus === 'running';
+    const groupedTools = sessionInfo != null && sessionInfo.type === 'init'
+        ? [
+            {
+                key: 'chrome-devtools',
+                label: t('chat.toolGroupChromeDevtools'),
+                tools: sessionInfo.tools.filter((tool) => tool.startsWith('mcp__ChromeDevtools__'))
+            },
+            {
+                key: 'system',
+                label: t('chat.toolGroupSystem'),
+                tools: sessionInfo.tools.filter((tool) => !tool.startsWith('mcp__ChromeDevtools__'))
+            }
+        ].filter((group) => group.tools.length > 0)
+        : [];
+    const assetWarnings = sessionInfo != null && sessionInfo.type === 'init'
+        ? (sessionInfo.assetDiagnostics ?? []).filter((diagnostic) => diagnostic.status === 'skipped')
+        : [];
+    const selectionWarnings = sessionInfo != null && sessionInfo.type === 'init'
+        ? (sessionInfo.selectionWarnings ?? [])
+        : [];
+    const toolCascaderOptions = groupedTools.map(group => ({
+        value: group.key,
+        label: (_jsxs("span", { className: 'sender-tool-group-option', children: [_jsx("span", { className: 'sender-tool-group-option__icon material-symbols-rounded', children: getToolGroupIcon(group.key) }), _jsx("span", { className: 'sender-tool-group-option__text', children: group.label }), _jsx("span", { className: 'sender-tool-group-option__count', children: group.tools.length })] })),
+        children: group.tools.map(tool => ({
+            value: tool,
+            label: (_jsxs("span", { className: 'sender-tool-option', children: [_jsx("span", { className: 'sender-tool-option__dot' }), _jsx("span", { className: 'sender-tool-option__text', children: formatToolLabel(tool) })] }))
+        }))
+    }));
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const [draft, setDraft] = useState('');
+    const formatSelectionWarning = (warning) => {
+        const reason = warning.reason === 'excluded'
+            ? t('chat.selectionWarningReasonExcluded')
+            : t('chat.selectionWarningReasonNotIncluded');
+        return t('chat.selectionWarningFallback', {
+            adapter: warning.adapter,
+            requestedModel: warning.requestedModel,
+            resolvedModel: warning.resolvedModel,
+            reason
+        });
+    };
+    const readFileAsDataUrl = (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(typeof reader.result === 'string' ? reader.result : '');
+            };
+            reader.onerror = () => {
+                reject(new Error('read_failed'));
+            };
+            reader.readAsDataURL(file);
+        });
+    };
+    const addImageFiles = async (files) => {
+        const maxSize = 5 * 1024 * 1024;
+        for (const file of files) {
+            if (!file.type.startsWith('image/'))
+                continue;
+            if (file.size > maxSize) {
+                void message.error(t('chat.imageTooLarge'));
+                continue;
+            }
+            try {
+                const url = await readFileAsDataUrl(file);
+                if (url === '') {
+                    void message.error(t('chat.imageReadFailed'));
+                    continue;
+                }
+                setPendingImages(prev => [
+                    ...prev,
+                    {
+                        id: globalThis.crypto?.randomUUID
+                            ? globalThis.crypto.randomUUID()
+                            : `img-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+                        url,
+                        name: file.name,
+                        size: file.size,
+                        mimeType: file.type
+                    }
+                ]);
+            }
+            catch (err) {
+                void message.error(t('chat.imageReadFailed'));
+            }
+        }
+    };
+    const handleSend = () => {
+        if (isThinking)
+            return;
+        if (input.trim() === '' && pendingImages.length === 0)
+            return;
+        if (modelUnavailable) {
+            void message.warning(t('chat.modelConfigRequired'));
+            return;
+        }
+        if (interactionRequest != null && onInteractionResponse != null) {
+            if (pendingImages.length > 0) {
+                void message.warning(t('chat.imageNotSupportedInInteraction'));
+                return;
+            }
+            onInteractionResponse(interactionRequest.id, input.trim());
+            setInput('');
+            return;
+        }
+        if (pendingImages.length > 0) {
+            const content = [];
+            if (input.trim() !== '') {
+                content.push({ type: 'text', text: input.trim() });
+            }
+            content.push(...pendingImages.map((img) => ({
+                type: 'image',
+                url: img.url,
+                name: img.name,
+                size: img.size,
+                mimeType: img.mimeType
+            })));
+            onSendContent(content);
+        }
+        else {
+            onSend(input);
+        }
+        // Save to local storage history
+        try {
+            const history = JSON.parse(localStorage.getItem('vf_chat_history') ?? '[]');
+            const newHistory = [input, ...history.filter((h) => h !== input)].slice(0, 50);
+            localStorage.setItem('vf_chat_history', JSON.stringify(newHistory));
+        }
+        catch (e) {
+            console.error('Failed to save chat history', e);
+        }
+        setInput('');
+        setPendingImages([]);
+        setDraft('');
+        setShowCompletion(false);
+        setHistoryIndex(-1);
+    };
+    const handleImageUpload = () => {
+        if (isThinking)
+            return;
+        if (modelUnavailable) {
+            void message.warning(t('chat.modelConfigRequired'));
+            return;
+        }
+        if (interactionRequest != null) {
+            void message.warning(t('chat.imageNotSupportedInInteraction'));
+            return;
+        }
+        fileInputRef.current?.click();
+    };
+    const handleImageFileChange = async (event) => {
+        const fileList = Array.from(event.target.files ?? []);
+        if (fileList.length === 0)
+            return;
+        await addImageFiles(fileList);
+        event.target.value = '';
+    };
+    const handleRemovePendingImage = (id) => {
+        setPendingImages(prev => prev.filter(img => img.id !== id));
+    };
+    const handlePaste = async (event) => {
+        const items = Array.from(event.clipboardData?.items ?? []);
+        const files = items
+            .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
+            .map(item => item.getAsFile())
+            .filter((file) => file != null);
+        if (files.length > 0) {
+            event.preventDefault();
+            await addImageFiles(files);
+        }
+    };
+    const clearInputValue = () => {
+        if (input === '')
+            return;
+        setInput('');
+        setHistoryIndex(-1);
+    };
+    const handleHistoryNavigation = (direction) => {
+        try {
+            const history = JSON.parse(localStorage.getItem('vf_chat_history') ?? '[]');
+            if (history.length === 0)
+                return;
+            let nextIndex = historyIndex;
+            if (direction === 'up') {
+                nextIndex = Math.min(historyIndex + 1, history.length - 1);
+            }
+            else {
+                nextIndex = Math.max(historyIndex - 1, -1);
+            }
+            if (nextIndex !== historyIndex) {
+                // Save draft when leaving -1
+                if (historyIndex === -1) {
+                    setDraft(input);
+                }
+                setHistoryIndex(nextIndex);
+                const nextValue = nextIndex === -1 ? draft : history[nextIndex];
+                setInput(nextValue);
+                // Set cursor to the end of the text
+                setTimeout(() => {
+                    if (textareaRef.current?.resizableTextArea?.textArea != null) {
+                        const textArea = textareaRef.current.resizableTextArea.textArea;
+                        const length = nextValue.length;
+                        textArea.setSelectionRange(length, length);
+                        textArea.focus();
+                    }
+                }, 0);
+            }
+        }
+        catch (e) {
+            console.error('Failed to navigate chat history', e);
+        }
+    };
+    const handleSelectCompletion = (item) => {
+        if (triggerChar == null || textareaRef.current?.resizableTextArea?.textArea == null)
+            return;
+        const textArea = textareaRef.current.resizableTextArea.textArea;
+        const cursorFallback = textArea.selectionStart;
+        const textBeforeTrigger = input.slice(0, input.lastIndexOf(triggerChar, cursorFallback - 1));
+        const textAfterCursor = input.slice(cursorFallback);
+        const newValue = `${textBeforeTrigger}${triggerChar}${item.value} ${textAfterCursor}`;
+        setInput(newValue);
+        setShowCompletion(false);
+        // Focus back and set cursor
+        setTimeout(() => {
+            if (textareaRef.current?.resizableTextArea?.textArea != null) {
+                const textArea = textareaRef.current.resizableTextArea.textArea;
+                const newCursorPos = textBeforeTrigger.length + triggerChar.length + item.value.length + 1;
+                textArea.focus();
+                textArea.setSelectionRange(newCursorPos, newCursorPos);
+            }
+        }, 0);
+    };
+    const handleTriggerClick = (char) => {
+        if (textareaRef.current?.resizableTextArea?.textArea == null)
+            return;
+        const textArea = textareaRef.current.resizableTextArea.textArea;
+        const cursor = textArea.selectionStart;
+        const textBefore = input.slice(0, cursor);
+        const textAfter = input.slice(cursor);
+        // Check if we need to add a space before the trigger char
+        const needsSpaceBefore = textBefore.length > 0 && !textBefore.endsWith(' ');
+        const trigger = needsSpaceBefore ? ` ${char}` : char;
+        const newValue = textBefore + trigger + textAfter;
+        setInput(newValue);
+        setTimeout(() => {
+            if (textareaRef.current?.resizableTextArea?.textArea != null) {
+                const textArea = textareaRef.current.resizableTextArea.textArea;
+                const newPos = cursor + trigger.length;
+                textArea.focus();
+                textArea.setSelectionRange(newPos, newPos);
+                // Trigger handleInputChange logic manually
+                const event = { target: textArea };
+                handleInputChange(event);
+            }
+        }, 0);
+    };
+    const handleKeyDown = (e) => {
+        if (isShortcutMatch(e, resolvedSendShortcut, isMac)) {
+            e.preventDefault();
+            handleSend();
+            return;
+        }
+        if (clearInputShortcut != null && clearInputShortcut.trim() !== '' && isShortcutMatch(e, clearInputShortcut, isMac)) {
+            e.preventDefault();
+            clearInputValue();
+            return;
+        }
+        if (showCompletion) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setSelectedIndex(prev => (prev + 1) % completionItems.length);
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setSelectedIndex(prev => (prev - 1 + completionItems.length) % completionItems.length);
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                const selectedItem = completionItems[selectedIndex];
+                if (selectedItem != null) {
+                    handleSelectCompletion(selectedItem);
+                }
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setShowCompletion(false);
+                return;
+            }
+        }
+        // History navigation logic
+        if (e.key === 'ArrowUp') {
+            const textarea = e.target;
+            const cursorPosition = textarea.selectionStart;
+            const textBeforeCursor = textarea.value.substring(0, cursorPosition);
+            // Only navigate if cursor is at the first line
+            if (!textBeforeCursor.includes('\n')) {
+                const historyJson = localStorage.getItem('vf_chat_history');
+                const history = (historyJson != null ? JSON.parse(historyJson) : []);
+                const currentHistoryValue = historyIndex === -1 ? null : history[historyIndex];
+                // If content is empty OR content matches the current history entry, allow navigation
+                if (input.trim() === '' || input === currentHistoryValue) {
+                    e.preventDefault();
+                    handleHistoryNavigation('up');
+                    return;
+                }
+            }
+        }
+        if (e.key === 'ArrowDown') {
+            const textarea = e.target;
+            const cursorPosition = textarea.selectionEnd;
+            const textAfterCursor = textarea.value.substring(cursorPosition);
+            // Only navigate if cursor is at the last line
+            if (!textAfterCursor.includes('\n')) {
+                const historyJson = localStorage.getItem('vf_chat_history');
+                const history = (historyJson != null ? JSON.parse(historyJson) : []);
+                const currentHistoryValue = historyIndex === -1 ? null : history[historyIndex];
+                // If history navigation has started (index >= 0) OR content matches current history entry
+                if (historyIndex !== -1 || input === currentHistoryValue) {
+                    e.preventDefault();
+                    handleHistoryNavigation('down');
+                    return;
+                }
+            }
+        }
+        // More shortcuts
+        if (e.key === 'Escape') {
+            if (input !== '') {
+                e.preventDefault();
+                clearInputValue();
+            }
+            return;
+        }
+        // Cmd/Ctrl + L to clear screen
+        if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            setInput('');
+            setHistoryIndex(-1);
+            if (onClear != null) {
+                onClear();
+            }
+            else {
+                void message.info('Clear screen is not supported in this context');
+            }
+            return;
+        }
+        // Cmd/Ctrl + Enter to send
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setInput(value);
+        const cursor = e.target.selectionStart;
+        const charBeforeCursor = value[cursor - 1];
+        if (['/', '@', '#'].includes(charBeforeCursor)) {
+            setTriggerChar(charBeforeCursor);
+            let items = [];
+            if (sessionInfo?.type === 'init') {
+                const info = sessionInfo;
+                if (charBeforeCursor === '/') {
+                    items = (info.slashCommands != null ? info.slashCommands : []).map((cmd) => ({
+                        label: `/${cmd}`,
+                        value: cmd,
+                        icon: 'terminal'
+                    }));
+                }
+                else if (charBeforeCursor === '@') {
+                    items = (info.agents != null ? info.agents : []).map((agent) => ({
+                        label: `@${agent}`,
+                        value: agent,
+                        icon: 'smart_toy'
+                    }));
+                }
+                else if (charBeforeCursor === '#') {
+                    items = (info.tools != null ? info.tools : []).map((tool) => ({
+                        label: `#${tool}`,
+                        value: tool,
+                        icon: 'check_box'
+                    }));
+                }
+            }
+            if (items.length > 0) {
+                setCompletionItems(items);
+                setSelectedIndex(0);
+                setShowCompletion(true);
+            }
+            else {
+                setShowCompletion(false);
+            }
+        }
+        else if (showCompletion) {
+            // Filter logic could go here if needed
+            if (!value.includes(triggerChar ?? '')) {
+                setShowCompletion(false);
+            }
+        }
+    };
+    return (_jsxs("div", { className: 'chat-input-wrapper', children: [isThinking && _jsx(ThinkingStatus, {}), interactionRequest != null && (_jsxs("div", { className: 'interaction-panel', style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: '200px',
+                    overflowY: 'auto',
+                    marginBottom: '10px',
+                    gap: '8px',
+                    padding: '8px',
+                    border: '1px solid var(--border-color)',
+                    borderRadius: '8px',
+                    backgroundColor: 'var(--bg-color)'
+                }, children: [_jsx("div", { className: 'interaction-question', style: { fontWeight: 'bold' }, children: interactionRequest.payload.question }), interactionRequest.payload.options?.map((option) => (_jsxs(Button, { block: true, style: { height: 'auto', textAlign: 'left', display: 'block', padding: '8px 12px' }, onClick: () => onInteractionResponse?.(interactionRequest.id, option.label), children: [_jsx("div", { style: { fontWeight: 500 }, children: option.label }), option.description && (_jsx("div", { style: { fontSize: '12px', color: 'var(--sub-text-color)', marginTop: '4px' }, children: option.description }))] }, option.label)))] })), _jsxs("div", { className: 'chat-input-container', children: [connectionError && connectionError.trim() !== '' && (_jsxs("div", { className: 'connection-error-banner', children: [_jsxs("div", { className: 'connection-error-content', children: [_jsx("span", { className: 'material-symbols-rounded', children: "error" }), _jsxs("div", { className: 'connection-error-copy', children: [_jsx("div", { className: 'connection-error-title', children: t('chat.connectionErrorTitle') }), _jsx("div", { className: 'connection-error-message', children: connectionError })] })] }), _jsx(Button, { size: 'small', onClick: onRetryConnection, children: t('chat.retryConnection') })] })), modelUnavailable && (_jsx("div", { className: 'model-unavailable', children: t('chat.modelConfigRequired') })), pendingImages.length > 0 && (_jsx("div", { className: 'pending-images', children: pendingImages.map(img => (_jsxs("div", { className: 'pending-image', children: [_jsx("img", { src: img.url, alt: img.name ?? 'image' }), _jsx("div", { className: 'pending-image-remove', onClick: () => handleRemovePendingImage(img.id), children: _jsx("span", { className: 'material-symbols-rounded', children: "close" }) })] }, img.id))) })), showCompletion && (_jsx(CompletionMenu, { items: completionItems, selectedIndex: selectedIndex, onSelect: handleSelectCompletion, onClose: () => setShowCompletion(false) })), _jsx(TextArea, { ref: textareaRef, className: 'chat-input-textarea', placeholder: placeholder ?? interactionRequest?.payload.question ?? t('chat.inputPlaceholder'), value: input, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, autoSize: { minRows: 1, maxRows: 10 }, variant: 'borderless', disabled: modelUnavailable }), _jsxs("div", { className: 'chat-input-toolbar', children: [_jsx("input", { ref: fileInputRef, type: 'file', accept: 'image/*', multiple: true, onChange: handleImageFileChange, className: 'file-input-hidden' }), _jsxs("div", { className: 'toolbar-left', children: [_jsx(Tooltip, { title: '\u5FEB\u6377\u6307\u4EE4', children: _jsx("span", { children: _jsx("div", { className: 'toolbar-btn', onClick: () => handleTriggerClick('/'), children: _jsx("span", { className: 'material-symbols-rounded', children: "terminal" }) }) }) }), _jsx(Tooltip, { title: '\u63D0\u53CA\u4EE3\u7406', children: _jsx("span", { children: _jsx("div", { className: 'toolbar-btn', onClick: () => handleTriggerClick('@'), children: _jsx("span", { className: 'material-symbols-rounded', children: "smart_toy" }) }) }) }), _jsx(Tooltip, { title: '\u6CE8\u5165\u4E0A\u4E0B\u6587', children: _jsx("span", { children: _jsx("div", { className: 'toolbar-btn', onClick: () => handleTriggerClick('#'), children: _jsx("span", { className: 'material-symbols-rounded', children: "description" }) }) }) }), _jsx(Tooltip, { title: '\u4E0A\u4F20\u56FE\u7247', children: _jsx("span", { children: _jsx("div", { className: 'toolbar-btn', onClick: handleImageUpload, children: _jsx("span", { className: 'material-symbols-rounded', children: "image" }) }) }) }), sessionInfo != null && sessionInfo.type === 'init' && (_jsxs("div", { className: 'session-info-toolbar', children: [selectionWarnings.length > 0 && (_jsx(Tooltip, { placement: 'topLeft', title: _jsxs("div", { className: 'asset-warning-tooltip', children: [_jsx("div", { className: 'asset-warning-tooltip__title', children: t('chat.selectionWarningsTitle') }), selectionWarnings.slice(0, 5).map((warning, index) => (_jsx("div", { className: 'asset-warning-tooltip__item', children: _jsx("span", { children: formatSelectionWarning(warning) }) }, `${warning.adapter}:${warning.requestedModel}:${index}`))), selectionWarnings.length > 5 && (_jsx("div", { className: 'asset-warning-tooltip__more', children: t('chat.assetWarningsMore', { count: selectionWarnings.length - 5 }) }))] }), children: _jsxs("div", { className: 'info-item asset-warning-item', children: [_jsx("span", { className: 'info-item-leading', children: _jsx("span", { className: 'material-symbols-rounded', children: "warning" }) }), _jsx("span", { className: 'info-text', children: t('chat.selectionWarningsCount', { count: selectionWarnings.length }) })] }) })), assetWarnings.length > 0 && (_jsx(Tooltip, { placement: 'topLeft', title: _jsxs("div", { className: 'asset-warning-tooltip', children: [_jsx("div", { className: 'asset-warning-tooltip__title', children: t('chat.assetWarningsTitle') }), assetWarnings.slice(0, 5).map((warning) => (_jsxs("div", { className: 'asset-warning-tooltip__item', children: [_jsx("code", { children: warning.assetId }), _jsx("span", { children: warning.reason })] }, warning.assetId))), assetWarnings.length > 5 && (_jsx("div", { className: 'asset-warning-tooltip__more', children: t('chat.assetWarningsMore', { count: assetWarnings.length - 5 }) }))] }), children: _jsxs("div", { className: 'info-item asset-warning-item', children: [_jsx("span", { className: 'info-item-leading', children: _jsx("span", { className: 'material-symbols-rounded', children: "warning" }) }), _jsx("span", { className: 'info-text', children: t('chat.assetWarningsCount', { count: assetWarnings.length }) })] }) })), _jsx(Cascader, { open: showToolsList, options: toolCascaderOptions, expandTrigger: 'hover', placement: 'topLeft', allowClear: false, popupClassName: 'sender-tools-cascader-popup', onOpenChange: setShowToolsList, onChange: () => setShowToolsList(false), children: _jsxs("div", { className: `info-item ${showToolsList ? 'active' : ''}`, children: [_jsx("span", { className: 'info-item-leading', children: _jsx("span", { className: 'material-symbols-rounded', children: "build" }) }), _jsx("span", { className: 'info-text', children: t('chat.toolsCount', { count: sessionInfo.tools.length }) }), _jsx("span", { className: 'material-symbols-rounded arrow-icon', children: "keyboard_arrow_up" })] }) })] }))] }), _jsxs("div", { className: 'toolbar-right', children: [adapterOptions && adapterOptions.length > 1 && (_jsx(Select, { className: 'adapter-select', classNames: { popup: { root: 'adapter-select-popup' } }, value: selectedAdapter, options: adapterOptions, showSearch: false, allowClear: false, disabled: adapterLocked || modelUnavailable || isThinking, onChange: (value) => onAdapterChange?.(value), placeholder: t('chat.adapterSelectPlaceholder', { defaultValue: 'Adapter' }), optionLabelProp: 'label', popupMatchSelectWidth: false })), _jsx(Select, { className: 'model-select', classNames: { popup: { root: 'model-select-popup' } }, value: selectedModel, options: modelOptions ?? [], showSearch: true, allowClear: false, disabled: modelUnavailable || isThinking, onChange: (value) => onModelChange?.(value), placeholder: modelUnavailable ? t('chat.modelUnavailable') : t('chat.modelSelectPlaceholder'), optionLabelProp: 'displayLabel', filterOption: (input, option) => {
+                                            const searchText = String(option?.searchText ?? '');
+                                            return searchText.toLowerCase().includes(input.toLowerCase());
+                                        }, popupMatchSelectWidth: false }), _jsx(Select, { className: 'permission-mode-select', classNames: { popup: { root: 'permission-mode-select-popup' } }, value: permissionMode, options: permissionModeOptions, showSearch: false, allowClear: false, disabled: modelUnavailable || isThinking, onChange: (value) => onPermissionModeChange(value), placeholder: '\u6743\u9650\u6A21\u5F0F', optionLabelProp: 'label', popupMatchSelectWidth: false }), _jsx("div", { className: `chat-send-btn ${input.trim() !== '' && !modelUnavailable ? 'active' : ''} ${isThinking ? 'thinking' : ''} ${modelUnavailable ? 'disabled' : ''}`, onClick: modelUnavailable ? undefined : (isThinking ? onInterrupt : handleSend), children: _jsx("span", { className: 'material-symbols-rounded', children: isThinking ? 'stop_circle' : 'send' }) })] })] })] }), _jsx("div", { className: 'chat-input-hint', children: t('chat.hint') })] }));
+}

package/dist/apps/client/src/components/chat/sender/ThinkingStatus.d.ts

@@ -0,0 +1,2 @@
+import './ThinkingStatus.scss';
+export declare function ThinkingStatus(): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/sender/ThinkingStatus.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ThinkingStatus.scss';
+import { useTranslation } from 'react-i18next';
+export function ThinkingStatus() {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: 'chat-thinking-status', children: [_jsx("div", { className: 'dot-flashing' }), _jsx("span", { children: t('chat.thinking') })] }));
+}

package/dist/apps/client/src/components/chat/session-timeline-panel/EventList.d.ts

@@ -0,0 +1,5 @@
+import './EventList.scss';
+import type { Task } from './types';
+export declare function SessionTimelineEventList({ task }: {
+    task: Task;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/apps/client/src/components/chat/session-timeline-panel/EventList.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './EventList.scss';
+import { Input, Table } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalizeTime, parseTime } from './utils';
+const collectTimelineEntries = (task, labels) => {
+    const entries = [];
+    let counter = 0;
+    const addEntry = (label, startTime, endTime, depth, payload) => {
+        entries.push({
+            id: `${label}-${startTime}-${endTime}-${counter}`,
+            label,
+            startTime,
+            endTime,
+            depth,
+            payload
+        });
+        counter += 1;
+    };
+    const walkEvents = (events, depth) => {
+        for (const event of events) {
+            if (event.type === 'tool__StartTasks') {
+                addEntry(labels.startTasks, event.startTime, event.endTime, depth, event);
+            }
+            else if (event.type === 'tool__AskUserQuestion') {
+                addEntry(labels.askUserQuestion, event.startTime, event.endTime, depth, event);
+            }
+            else if (event.type === 'tool__Edit') {
+                addEntry(labels.edit, event.startTime, event.endTime, depth, event);
+            }
+            else if (event.type === 'tool__ResumeTask') {
+                addEntry(labels.resumeTask, event.startTime, event.endTime, depth, event);
+            }
+            else if (event.type === 'user__Prompt') {
+                addEntry(labels.userPrompt, event.startTime, event.endTime, depth, event);
+            }
+        }
+    };
+    addEntry(labels.mainStart, task.startTime, task.startTime, 0);
+    walkEvents(task.events ?? [], 0);
+    addEntry(labels.mainEnd, task.endTime, task.endTime, 0);
+    return entries
+        .map((entry, index) => ({ ...entry, index }))
+        .sort((a, b) => {
+        const diff = parseTime(a.startTime) - parseTime(b.startTime);
+        if (diff !== 0)
+            return diff;
+        return a.index - b.index;
+    })
+        .map(({ index: _index, ...entry }) => entry);
+};
+export function SessionTimelineEventList({ task }) {
+    const { t } = useTranslation();
+    const [query, setQuery] = React.useState('');
+    const containerRef = React.useRef(null);
+    const [scrollY, setScrollY] = React.useState(240);
+    const labels = React.useMemo(() => ({
+        mainStart: t('chat.timeline.mainStart'),
+        mainEnd: t('chat.timeline.mainEnd'),
+        startTasks: t('chat.timeline.startTasks'),
+        askUserQuestion: t('chat.timeline.askUserQuestion'),
+        edit: t('chat.timeline.edit'),
+        resumeTask: t('chat.timeline.resumeTask'),
+        userPrompt: t('chat.timeline.userPrompt')
+    }), [t]);
+    const items = React.useMemo(() => collectTimelineEntries(task, labels), [labels, task]);
+    const filteredItems = React.useMemo(() => {
+        const keyword = query.trim().toLowerCase();
+        if (!keyword)
+            return items;
+        return items.filter((item) => {
+            const text = `${item.label} ${item.startTime} ${item.endTime}`.toLowerCase();
+            return text.includes(keyword);
+        });
+    }, [items, query]);
+    const emptyValue = t('chat.timelineEmptyValue');
+    const columns = React.useMemo(() => [
+        {
+            title: t('chat.timelineEventName'),
+            key: 'label',
+            width: 180,
+            render: (_value, item) => (_jsx("span", { className: 'session-timeline-event-table__label', style: { paddingLeft: `${item.depth * 16}px` }, children: item.label }))
+        },
+        {
+            title: t('chat.timelineInput'),
+            key: 'input',
+            width: 180,
+            render: (_value, item) => (_jsx("span", { className: 'session-timeline-event-table__value', children: item.input ?? emptyValue }))
+        },
+        {
+            title: t('chat.timelineOutput'),
+            key: 'output',
+            width: 180,
+            render: (_value, item) => (_jsx("span", { className: 'session-timeline-event-table__value', children: item.output ?? emptyValue }))
+        },
+        {
+            title: t('chat.timelineTiming'),
+            key: 'time',
+            width: 160,
+            render: (_value, item) => {
+                const startTime = normalizeTime(item.startTime);
+                const endTime = normalizeTime(item.endTime);
+                return (_jsx("span", { className: 'session-timeline-event-table__time', children: startTime === endTime ? startTime : `${startTime} → ${endTime}` }));
+            }
+        }
+    ], [emptyValue, t]);
+    React.useEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const update = () => {
+            const header = element.querySelector('.session-timeline-event-table__header');
+            const pagination = element.querySelector('.ant-table-pagination');
+            const headerHeight = header?.offsetHeight ?? 0;
+            const paginationHeight = pagination?.offsetHeight ?? 0;
+            const next = Math.max(160, element.clientHeight - headerHeight - paginationHeight - 16);
+            setScrollY((prev) => (prev === next ? prev : next));
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return (_jsxs("div", { ref: containerRef, className: 'session-timeline-event-table', children: [_jsxs("div", { className: 'session-timeline-event-table__header', children: [_jsx("span", { className: 'session-timeline-event-table__title', children: t('chat.timeline.eventListTitle') }), _jsx(Input, { className: 'session-timeline-event-table__search', allowClear: true, value: query, onChange: (event) => setQuery(event.target.value), placeholder: t('chat.timeline.eventListSearch') })] }), _jsx(Table, { className: 'session-timeline-event-table__table', size: 'small', columns: columns, dataSource: filteredItems, rowKey: 'id', onRow: (record) => ({
+                    onClick: () => {
+                        if (record.payload) {
+                            console.warn(record.payload);
+                        }
+                    }
+                }), pagination: {
+                    pageSize: 20,
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50']
+                }, scroll: { y: scrollY }, locale: { emptyText: t('chat.timelineEmpty') } })] }));
+}

package/dist/apps/client/src/components/chat/session-timeline-panel/gantt.d.ts

@@ -0,0 +1,10 @@
+import type { Task, TimelineDiagram } from './types';
+interface GanttLabels {
+    ganttTitle: string;
+    ganttMainSection: string;
+    ganttTasksSection: string;
+    resumeTask: string;
+    userPrompt: string;
+}
+export declare function buildGantt(task: Task, labels: GanttLabels): TimelineDiagram;
+export {};