@kirosnn/mosaic 0.71.0 → 0.74.0

package/src/web/components/MessageItem.tsx

@@ -4,17 +4,35 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Message } from '../types';
-import { toDataUrl } from '../../utils/images';
-import { parseDiffLine, getDiffLineColors } from '../utils';
-import '../assets/css/global.css'
-
-interface MessageItemProps {
-    message: Message;
-}
-
-function renderDiffLine(line: string, index: number): React.ReactElement {
-    const parsed = parseDiffLine(line);
+import { Message } from '../types';
+import { toDataUrl } from '../../utils/images';
+import { parseDiffLine, getDiffLineColors } from '../utils';
+import '../assets/css/global.css'
+
+interface MessageItemProps {
+    message: Message;
+}
+
+const linkSchemePattern = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+
+function normalizeLinkUri(href: string) {
+    const trimmed = href.trim();
+    if (!trimmed) return trimmed;
+    if (linkSchemePattern.test(trimmed)) return trimmed;
+    if (trimmed.startsWith('//')) return `https:${trimmed}`;
+    if (trimmed.startsWith('/') || trimmed.startsWith('#') || trimmed.startsWith('.') || trimmed.startsWith('?')) return trimmed;
+    return `https://${trimmed}`;
+}
+
+function handleMarkdownLinkClick(event: React.MouseEvent<HTMLAnchorElement>, href?: string | null) {
+    if (!href) return;
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    window.open(href, "_blank", "noopener,noreferrer");
+}
+
+function renderDiffLine(line: string, index: number): React.ReactElement {
+    const parsed = parseDiffLine(line);
 
     if (!parsed.isDiffLine) {
         return (
@@ -57,7 +75,7 @@ function renderToolLine(line: string, index: number): React.ReactElement {
         return (
             <div key={index} className="tool-line plan-line">
                 <span className="plan-indent">{leading || ''}</span>
-                <span className="plan-prefix">></span>
+                <span className="plan-prefix">{'>'}</span>
                 <span> </span>
                 {bracket && <span className={`plan-bracket${isActive ? ' active' : ''}`}>{bracket}</span>}
                 {bracket && <span> </span>}
@@ -126,10 +144,23 @@ export function MessageItem({ message }: MessageItemProps) {
                         </details>
                     )}
                     <div className="markdown-content">
-                        <ReactMarkdown
-                            remarkPlugins={[remarkGfm]}
-                            components={{
-                                code({ node, className, children, ...props }) {
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            transformLinkUri={normalizeLinkUri}
+                            components={{
+                                a({ href, children, ...props }) {
+                                    const normalized = normalizeLinkUri(href || '');
+                                    return (
+                                        <a
+                                            href={normalized}
+                                            onClick={(event) => handleMarkdownLinkClick(event, normalized)}
+                                            {...props}
+                                        >
+                                            {children}
+                                        </a>
+                                    );
+                                },
+                                code({ node, className, children, ...props }) {
                                     const match = /language-(\w+)/.exec(className || '');
                                     const { ref, ...rest } = props as any;
                                     return match ? (
@@ -157,22 +188,22 @@ export function MessageItem({ message }: MessageItemProps) {
         );
     }
 
-    const hasImages = Array.isArray(message.images) && message.images.length > 0;
-
-    return (
-        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
-            <div className="message-content">
-                {hasImages && (
-                    <div className="message-images">
-                        {message.images!.map((img) => (
-                            <img key={img.id} src={toDataUrl(img)} alt={img.name} />
-                        ))}
-                    </div>
-                )}
-                <div className="message-text">
-                    {message.displayContent || message.content}
-                </div>
-            </div>
-        </div>
-    );
-}
+    const hasImages = Array.isArray(message.images) && message.images.length > 0;
+
+    return (
+        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
+            <div className="message-content">
+                {hasImages && (
+                    <div className="message-images">
+                        {message.images!.map((img) => (
+                            <img key={img.id} src={toDataUrl(img)} alt={img.name} />
+                        ))}
+                    </div>
+                )}
+                <div className="message-text">
+                    {message.displayContent || message.content}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/web/components/QuestionPanel.tsx

@@ -10,14 +10,41 @@ interface QuestionPanelProps {
 export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [customText, setCustomText] = useState('');
+    const [remaining, setRemaining] = useState<number | null>(request.timeout ?? null);
+    const [validationError, setValidationError] = useState<string | null>(null);
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
         setSelectedIndex(0);
         setCustomText('');
+        setValidationError(null);
+        setRemaining(request.timeout ?? null);
         if (inputRef.current) inputRef.current.focus();
     }, [request.id]);
 
+    useEffect(() => {
+        if (remaining === null || remaining <= 0) return;
+        const id = setInterval(() => {
+            setRemaining(prev => (prev !== null && prev > 0 ? prev - 1 : prev));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [remaining !== null]);
+
+    const validateCustomText = (text: string): boolean => {
+        if (!request.validation) return true;
+        try {
+            if (!new RegExp(request.validation.pattern).test(text)) {
+                setValidationError(request.validation.message || `Input must match: ${request.validation.pattern}`);
+                return false;
+            }
+        } catch {
+            setValidationError('Invalid validation pattern');
+            return false;
+        }
+        setValidationError(null);
+        return true;
+    };
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === 'ArrowUp') {
             e.preventDefault();
@@ -28,7 +55,9 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
         } else if (e.key === 'Enter') {
             e.preventDefault();
             if (customText.trim()) {
-                onAnswer(0, customText);
+                if (validateCustomText(customText)) {
+                    onAnswer(0, customText);
+                }
             } else {
                 onAnswer(selectedIndex);
             }
@@ -46,15 +75,22 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
 
     const handleSubmitCustom = (e: React.FormEvent) => {
         e.preventDefault();
-        if (customText.trim()) {
+        if (customText.trim() && validateCustomText(customText)) {
             onAnswer(0, customText);
         }
     };
 
+    let lastGroup: string | undefined;
+
     return (
         <div className="panel question-panel">
             <div className="panel-header">
                 <strong>Question</strong>
+                {remaining !== null && (
+                    <span style={{ marginLeft: '1rem', color: remaining <= 5 ? '#ff4444' : 'var(--text-muted)' }}>
+                        Timeout: {remaining}s
+                    </span>
+                )}
             </div>
             <div className="panel-content">
                 <div className="question-prompt">
@@ -63,17 +99,28 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                     ))}
                 </div>
                 <div className="question-options">
-                    {request.options.map((option, index) => (
-                        <div
-                            key={index}
-                            className={`question-option ${index === selectedIndex ? 'selected' : ''}`}
-                            onClick={() => handleOptionClick(index)}
-                        >
-                            <span className="option-key">{index + 1}.</span>
-                            <span className="option-label">{option.label}</span>
-                        </div>
-                    ))}
+                    {request.options.map((option, index) => {
+                        const showGroupHeader = option.group && option.group !== lastGroup;
+                        lastGroup = option.group;
+                        return (
+                            <React.Fragment key={index}>
+                                {showGroupHeader && (
+                                    <div className="option-group-header">{option.group}</div>
+                                )}
+                                <div
+                                    className={`question-option ${index === selectedIndex ? 'selected' : ''}`}
+                                    onClick={() => handleOptionClick(index)}
+                                >
+                                    <span className="option-key">{index + 1}.</span>
+                                    <span className="option-label">{option.label}</span>
+                                </div>
+                            </React.Fragment>
+                        );
+                    })}
                 </div>
+                {validationError && (
+                    <div className="validation-error">{validationError}</div>
+                )}
                 <div className="custom-input-container">
                     <form onSubmit={handleSubmitCustom}>
                         <input
@@ -111,6 +158,13 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                    gap: 0.5rem;
                    margin-bottom: 1rem;
                 }
+                .option-group-header {
+                   font-size: 0.85rem;
+                   color: var(--text-muted);
+                   font-weight: 600;
+                   margin-top: 0.5rem;
+                   padding-left: 0.25rem;
+                }
                 .question-option {
                    padding: 0.5rem;
                    border-radius: 4px;
@@ -130,6 +184,12 @@ export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
                    color: var(--text-muted);
                    width: 1.5rem;
                 }
+                .validation-error {
+                   color: #ff4444;
+                   font-size: 0.85rem;
+                   margin-bottom: 0.5rem;
+                   padding-left: 0.25rem;
+                }
                 .panel-input {
                     width: 100%;
                     padding: 0.75rem;

package/src/web/components/Sidebar.tsx

@@ -12,8 +12,6 @@ interface GroupedConversations {
 
 function getTimePeriod(timestamp: number): TimePeriod {
     const now = new Date();
-    const date = new Date(timestamp);
-
     const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
     const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
     const startOf7DaysAgo = startOfToday - 7 * 24 * 60 * 60 * 1000;

package/src/web/components/ThinkingIndicator.tsx

@@ -19,6 +19,7 @@ const THINKING_WORDS = [
 interface ThinkingIndicatorProps {
     startTime?: number;
     tokens?: number;
+    inProgressStep?: string;
     nextStep?: string;
 }