cb525e6598
All checks were successful
Beta Release / beta (push) Successful in 5m9s
Major additions: - RAG pipeline (indexing, chunking, search) with sidebar upload button - Memory system with CRUD API - Plugins and lessons modules - MCP discovery and MCP server - Advanced skills (auto-create, conditional, improver) - Agent browser/image support, delegate, sessions - File editor with CodeMirror in split panes - Markdown rendering via react-markdown + KaTeX + highlight.js - Raw markdown toggle - PWA manifest + service worker - Extension UI redesign with new design tokens and studio-style chat - Pipeline API for chat streaming - Mobile responsive layout 💘 Generated with Crush Assisted-by: GLM-5.1 via Crush <crush@charm.land>
1190 lines
49 KiB
JavaScript
1190 lines
49 KiB
JavaScript
import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
|
||
import { useI18n } from '../i18n'
|
||
import mermaid from 'mermaid'
|
||
import ReactMarkdown from 'react-markdown'
|
||
import remarkGfm from 'remark-gfm'
|
||
import remarkMath from 'remark-math'
|
||
import rehypeKatex from 'rehype-katex'
|
||
import rehypeHighlight from 'rehype-highlight'
|
||
import 'katex/dist/katex.min.css'
|
||
import 'highlight.js/styles/github-dark.css'
|
||
|
||
mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose', fontFamily: 'var(--font-mono)' })
|
||
|
||
const RANKS = {
|
||
commandant: { label: 'Commandant', short: 'CDT', color: '#FFD740' },
|
||
general: { label: 'General', short: 'GEN', color: '#FF9100' },
|
||
colonel: { label: 'Colonel', short: 'COL', color: '#FF6D00' },
|
||
lieutenant: { label: 'Lieutenant', short: 'LT', color: '#448AFF' },
|
||
soldat: { label: 'Soldat', short: 'SDT', color: '#00E676' },
|
||
}
|
||
|
||
function getRank(role) {
|
||
if (role === 'user') return RANKS.commandant
|
||
if (role === 'system') return null
|
||
return RANKS.general
|
||
}
|
||
|
||
function RankIcon({ rank }) {
|
||
if (rank === RANKS.commandant) {
|
||
return (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={rank.color} strokeWidth="2">
|
||
<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
|
||
</svg>
|
||
)
|
||
}
|
||
return (
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={rank.color} strokeWidth="2">
|
||
<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
|
||
</svg>
|
||
)
|
||
}
|
||
|
||
function renderContent(text) {
|
||
const parts = []
|
||
const codeBlockRegex = /(```[\s\S]*?```)/g
|
||
let match
|
||
let lastIndex = 0
|
||
while ((match = codeBlockRegex.exec(text)) !== null) {
|
||
if (match.index > lastIndex) {
|
||
parts.push({ type: 'text', content: text.slice(lastIndex, match.index) })
|
||
}
|
||
const full = match[1]
|
||
const firstNewline = full.indexOf('\n')
|
||
const lang = firstNewline > -1 ? full.slice(3, firstNewline).trim() : ''
|
||
const code = firstNewline > -1 ? full.slice(firstNewline + 1, -3) : full.slice(3, -3)
|
||
parts.push({ type: 'code', lang, content: code })
|
||
lastIndex = match.index + full.length
|
||
}
|
||
if (lastIndex < text.length) {
|
||
const remaining = text.slice(lastIndex)
|
||
const openBlock = remaining.match(/```(\w*)\n?([\s\S]*)$/)
|
||
if (openBlock) {
|
||
if (openBlock.index > 0) {
|
||
parts.push({ type: 'text', content: remaining.slice(0, openBlock.index) })
|
||
}
|
||
parts.push({ type: 'code', lang: openBlock[1] || '', content: openBlock[2] || '' })
|
||
} else {
|
||
parts.push({ type: 'text', content: remaining })
|
||
}
|
||
}
|
||
return parts
|
||
}
|
||
|
||
function formatText(text) {
|
||
let html = text
|
||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||
|
||
html = html.replace(/^(\|.+\|)\n(\|[\s\-:|]+\|)\n((?:\|.+\|\n?)+)/gm, (match, headerRow, sepRow, bodyRows) => {
|
||
const headers = headerRow.split('|').filter(c => c.trim() !== '').map(c => `<th>${c.trim()}</th>`).join('')
|
||
const rows = bodyRows.trim().split('\n').map(row => {
|
||
const cells = row.split('|').filter(c => c.trim() !== '').map(c => `<td>${c.trim()}</td>`).join('')
|
||
return `<tr>${cells}</tr>`
|
||
}).join('')
|
||
return `<table><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`
|
||
})
|
||
|
||
html = html
|
||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||
.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
|
||
.replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
|
||
.replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
|
||
.replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
|
||
.replace(/^---+$/gm, '<hr>')
|
||
.replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">\u2022 $1</div>')
|
||
.replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
|
||
.replace(/\n/g, '<br/>')
|
||
|
||
html = html
|
||
.replace(/<br\/>\s*<br\/>/g, '<br/>')
|
||
.replace(/<br\/>\s*(<h[234]|<div class="msg-|<table|<hr)/g, '$1')
|
||
.replace(/(<\/h[234]|<\/div>|<\/table>|<hr>)\s*<br\/>/g, '$1')
|
||
.replace(/\s+on\w+=["'][^"']*["']/gi, '')
|
||
.replace(/javascript:/gi, '')
|
||
.replace(/data:/gi, '')
|
||
|
||
return html
|
||
}
|
||
|
||
function ThinkingBlock({ content, done, raw }) {
|
||
return (
|
||
<div className={`feed-thinking-block ${done ? 'done' : 'active'}`}>
|
||
<div className="feed-thinking-header">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
||
</svg>
|
||
<span>Reflexion</span>
|
||
{!done && <span className="feed-thinking-dots"><span/><span/><span/></span>}
|
||
</div>
|
||
<div className="feed-thinking-content">
|
||
{raw ? <span dangerouslySetInnerHTML={{ __html: content }} /> : content}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const TOOL_ICONS = {
|
||
terminal: '⌨',
|
||
crush_run: '⚡',
|
||
read_file: '📄',
|
||
list_files: '📁',
|
||
search_files: '🔍',
|
||
grep_content: '🔎',
|
||
get_config: '⚙',
|
||
set_provider: '🔑',
|
||
manage_ssh: '🌐',
|
||
web_fetch: '🌐',
|
||
}
|
||
|
||
const TOOL_LABELS = {
|
||
terminal: 'Terminal',
|
||
crush_run: 'Crush Agent',
|
||
read_file: 'Read File',
|
||
list_files: 'List Files',
|
||
search_files: 'Search Files',
|
||
grep_content: 'Grep',
|
||
get_config: 'Config',
|
||
set_provider: 'Set Provider',
|
||
manage_ssh: 'SSH',
|
||
web_fetch: 'Web Fetch',
|
||
}
|
||
|
||
function ToolCallBlock({ call, result, activeAgents, onModeChange }) {
|
||
const icon = TOOL_ICONS[call.name] || '🔧'
|
||
const label = TOOL_LABELS[call.name] || call.name
|
||
const isErr = result && result.is_error
|
||
const isCrush = call.name === 'crush_run'
|
||
const isClaude = call.name === 'claude_run'
|
||
const isAgent = isCrush || isClaude
|
||
const agentType = isCrush ? 'crush' : isClaude ? 'claude' : null
|
||
const maxAgents = isCrush ? 2 : isClaude ? 2 : 0
|
||
const currentCount = agentType && activeAgents ? (activeAgents[agentType] || 0) : 0
|
||
const [mode, setMode] = useState('sync')
|
||
|
||
let argsPreview = ''
|
||
try {
|
||
const args = typeof call.args === 'string' ? JSON.parse(call.args) : call.args
|
||
if (args.command) argsPreview = args.command
|
||
else if (args.task) argsPreview = args.task
|
||
else if (args.path) argsPreview = args.path
|
||
else if (args.pattern) argsPreview = args.pattern
|
||
else if (args.url) argsPreview = args.url
|
||
else if (args.action) argsPreview = args.action
|
||
else argsPreview = JSON.stringify(args).slice(0, 80)
|
||
} catch {
|
||
argsPreview = String(call.args).slice(0, 80)
|
||
}
|
||
|
||
const truncatedResult = result ? (result.content || '').slice(0, 2000) : null
|
||
|
||
const handleModeChange = (newMode) => {
|
||
setMode(newMode)
|
||
if (onModeChange) onModeChange(call.tool_call_id, newMode)
|
||
}
|
||
|
||
return (
|
||
<div className={`studio-tool-block ${isErr ? 'error' : ''} ${result ? 'done' : 'running'}`}>
|
||
<div className="studio-tool-header">
|
||
<span className="studio-tool-icon">{icon}</span>
|
||
<span className="studio-tool-name">{label}</span>
|
||
{isAgent && !result && (
|
||
<span className="studio-agent-badge">{currentCount}/{maxAgents}</span>
|
||
)}
|
||
{!result && <span className="studio-tool-spinner"><span/><span/><span/></span>}
|
||
{result && <span className={`studio-tool-status ${isErr ? 'error' : 'ok'}`}>{isErr ? '✗' : '✓'}</span>}
|
||
</div>
|
||
<div className="studio-tool-args" title={argsPreview}>{argsPreview}</div>
|
||
{isAgent && !result && (
|
||
<div className="studio-agent-mode">
|
||
<button
|
||
className={`studio-mode-btn ${mode === 'sync' ? 'active' : ''}`}
|
||
onClick={() => handleModeChange('sync')}
|
||
>
|
||
Exécuter et attendre
|
||
</button>
|
||
<button
|
||
className={`studio-mode-btn ${mode === 'async' ? 'active' : ''}`}
|
||
onClick={() => handleModeChange('async')}
|
||
>
|
||
Exécuter en arrière-plan
|
||
</button>
|
||
</div>
|
||
)}
|
||
{truncatedResult && (
|
||
<div className="studio-tool-result">
|
||
<pre>{truncatedResult}</pre>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
let mermaidIdCounter = 0
|
||
|
||
function MermaidBlock({ code }) {
|
||
const ref = useRef(null)
|
||
const [svg, setSvg] = useState('')
|
||
const [error, setError] = useState(false)
|
||
|
||
useEffect(() => {
|
||
let cancelled = false
|
||
const id = `studio-mermaid-${++mermaidIdCounter}`
|
||
mermaid.render(id, code).then(({ svg }) => {
|
||
if (!cancelled) setSvg(svg)
|
||
}).catch(() => {
|
||
if (!cancelled) setError(true)
|
||
})
|
||
return () => { cancelled = true }
|
||
}, [code])
|
||
|
||
if (error) return <pre className="studio-mermaid-error">{code}</pre>
|
||
if (!svg) return <div className="studio-mermaid-loading">Chargement...</div>
|
||
return <div className="studio-mermaid-container" ref={ref} dangerouslySetInnerHTML={{ __html: svg }} />
|
||
}
|
||
|
||
function CodeBlockWithCopy({ part, index, copiedIdx, setCopiedIdx }) {
|
||
if (part.lang === 'mermaid') {
|
||
return (
|
||
<div className="studio-code-block">
|
||
<div className="studio-code-header">
|
||
<span className="studio-code-lang">mermaid</span>
|
||
<button className={`studio-copy-btn ${copiedIdx === index ? 'copied' : ''}`} onClick={() => {
|
||
navigator.clipboard.writeText(part.content)
|
||
setCopiedIdx(index)
|
||
setTimeout(() => setCopiedIdx(null), 1500)
|
||
}}>
|
||
{copiedIdx === index ? 'Copie!' : 'Copier'}
|
||
</button>
|
||
</div>
|
||
<MermaidBlock code={part.content} />
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div className="studio-code-block">
|
||
<div className="studio-code-header">
|
||
{part.lang && <span className="studio-code-lang">{part.lang}</span>}
|
||
<button className={`studio-copy-btn ${copiedIdx === index ? 'copied' : ''}`} onClick={() => {
|
||
navigator.clipboard.writeText(part.content)
|
||
setCopiedIdx(index)
|
||
setTimeout(() => setCopiedIdx(null), 1500)
|
||
}}>
|
||
{copiedIdx === index ? 'Copie!' : 'Copier'}
|
||
</button>
|
||
</div>
|
||
<pre><code>{part.content}</code></pre>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function FeedItem({ msg, activeAgents, onModeChange, collapseHistory }) {
|
||
const isUser = msg.role === 'user'
|
||
const isSystem = msg.role === 'system'
|
||
const rank = getRank(msg.role)
|
||
const [copiedIdx, setCopiedIdx] = useState(null)
|
||
const [forceExpand, setForceExpand] = useState(false)
|
||
|
||
const timeStr = msg.time ? new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''
|
||
|
||
const [showRawMarkdown, setShowRawMarkdown] = useState(() => {
|
||
try { return localStorage.getItem('muyue.showRawMarkdown') === 'true' } catch { return false }
|
||
})
|
||
|
||
const renderMarkdown = useCallback((content) => {
|
||
return <MarkdownContent content={content} raw={showRawMarkdown} />
|
||
}, [showRawMarkdown])
|
||
|
||
let parsedToolCalls = null
|
||
let parsedToolResults = null
|
||
let parsedSegments = null
|
||
let displayContent = msg.content
|
||
try {
|
||
const parsed = JSON.parse(msg.content)
|
||
if (parsed && Array.isArray(parsed.segments)) {
|
||
parsedSegments = parsed.segments
|
||
parsedToolCalls = parsed.tool_calls || null
|
||
parsedToolResults = parsed.tool_results || null
|
||
displayContent = parsed.content || ''
|
||
} else if (parsed && Array.isArray(parsed.tool_calls)) {
|
||
parsedToolCalls = parsed.tool_calls
|
||
parsedToolResults = parsed.tool_results || null
|
||
displayContent = parsed.content || ''
|
||
}
|
||
} catch {}
|
||
|
||
if (isSystem) {
|
||
return (
|
||
<div className="feed-item system">
|
||
<div className="feed-system-badge" />
|
||
<div className="feed-system-text">{msg.content}</div>
|
||
{timeStr && <span className="feed-time">{timeStr}</span>}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
let cleanContent = displayContent.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
|
||
|
||
return (
|
||
<div className={`feed-item ${msg.role}`}>
|
||
<div className={`feed-avatar ${isUser ? 'user-rank' : 'ai-rank'}`}>
|
||
<RankIcon rank={rank} />
|
||
</div>
|
||
<div className="feed-body">
|
||
<div className="feed-header">
|
||
<span className="feed-rank-badge" style={{ color: rank.color, borderColor: rank.color }}>
|
||
{rank.short}
|
||
</span>
|
||
<span className="feed-role">{rank.label}</span>
|
||
{timeStr && <span className="feed-time">{timeStr}</span>}
|
||
</div>
|
||
{msg.thinking && <ThinkingBlock content={msg.thinking} done raw />}
|
||
{msg.images && msg.images.length > 0 && (
|
||
<div className="feed-images">
|
||
{msg.images.map((imgId, i) => (
|
||
<img key={i} className="feed-image" src={`/api/images/${imgId}`} alt={`Image ${i + 1}`} />
|
||
))}
|
||
</div>
|
||
)}
|
||
{parsedSegments && parsedSegments.some(s => s.type === 'tool') ? (
|
||
(() => {
|
||
const toolSegs = parsedSegments.filter(s => s.type === 'tool')
|
||
const compress = collapseHistory && !forceExpand && toolSegs.length > 1
|
||
const lastTool = toolSegs.length > 0 ? toolSegs[toolSegs.length - 1] : null
|
||
return (
|
||
<>
|
||
{compress && (
|
||
<div className="feed-content" style={{ opacity: 0.7, fontSize: '0.85em', display: 'flex', justifyContent: 'space-between' }}>
|
||
<span>… {toolSegs.length - 1} action{toolSegs.length - 1 > 1 ? 's' : ''} précédente{toolSegs.length - 1 > 1 ? 's' : ''} masquée{toolSegs.length - 1 > 1 ? 's' : ''}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setForceExpand(true)}
|
||
style={{ background: 'transparent', border: 'none', color: 'var(--accent, #6c5ce7)', cursor: 'pointer', fontSize: 'inherit' }}
|
||
>Tout afficher</button>
|
||
</div>
|
||
)}
|
||
{parsedSegments.map((seg, i) => {
|
||
if (seg.type === 'text') {
|
||
if (!seg.content) return null
|
||
const c = seg.content.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
|
||
if (!c) return null
|
||
return (
|
||
<div key={`t${i}`} className="feed-content">
|
||
{renderMarkdown(c)}
|
||
</div>
|
||
)
|
||
}
|
||
if (seg.type === 'tool') {
|
||
if (compress && seg !== lastTool) return null
|
||
const r = seg.result
|
||
const result = r && (r.content !== undefined || r.is_error !== undefined)
|
||
? { content: r.content, is_error: r.is_error }
|
||
: null
|
||
return <ToolCallBlock key={`tc${i}`} call={seg.call} result={result} activeAgents={activeAgents} onModeChange={onModeChange} />
|
||
}
|
||
return null
|
||
})}
|
||
</>
|
||
)
|
||
})()
|
||
) : (
|
||
<>
|
||
{parsedToolCalls && (() => {
|
||
const compress = collapseHistory && !forceExpand && parsedToolCalls.length > 1
|
||
const items = compress ? parsedToolCalls.slice(-1) : parsedToolCalls
|
||
return (
|
||
<>
|
||
{compress && (
|
||
<div className="feed-content" style={{ opacity: 0.7, fontSize: '0.85em', display: 'flex', justifyContent: 'space-between' }}>
|
||
<span>… {parsedToolCalls.length - 1} action{parsedToolCalls.length - 1 > 1 ? 's' : ''} précédente{parsedToolCalls.length - 1 > 1 ? 's' : ''} masquée{parsedToolCalls.length - 1 > 1 ? 's' : ''}</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setForceExpand(true)}
|
||
style={{ background: 'transparent', border: 'none', color: 'var(--accent, #6c5ce7)', cursor: 'pointer', fontSize: 'inherit' }}
|
||
>Tout afficher</button>
|
||
</div>
|
||
)}
|
||
{items.map((tc, i) => {
|
||
const resultData = parsedToolResults
|
||
? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
|
||
: null
|
||
const result = resultData
|
||
? { content: resultData.result, is_error: resultData.is_error }
|
||
: null
|
||
return <ToolCallBlock key={tc.tool_call_id || i} call={tc} result={result} activeAgents={activeAgents} onModeChange={onModeChange} />
|
||
})}
|
||
</>
|
||
)
|
||
})()}
|
||
{cleanContent && (
|
||
<div className="feed-content">
|
||
{renderMarkdown(cleanContent)}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function StreamingItem({ content, thinking, toolCalls, segments, activeAgents, onModeChange, collapseHistory }) {
|
||
const rank = RANKS.general
|
||
const cleanContent = content.replace(/<think[^>]*>[\s\S]*?<\/think>/gi, '')
|
||
const hasToolCalls = toolCalls && toolCalls.length > 0
|
||
const [copiedIdx, setCopiedIdx] = useState(null)
|
||
const [forceExpand, setForceExpand] = useState(false)
|
||
|
||
const renderedContent = useMemo(() => {
|
||
if (!cleanContent) return null
|
||
return null
|
||
}, [cleanContent])
|
||
|
||
const formattedThinking = useMemo(() => {
|
||
if (!thinking) return ''
|
||
return thinking
|
||
}, [thinking])
|
||
|
||
const hasOrderedSegments = segments && segments.some(s => s.type === 'tool')
|
||
const toolSegments = (segments || []).filter(s => s.type === 'tool')
|
||
const compress = collapseHistory && !forceExpand && toolSegments.length > 1
|
||
|
||
return (
|
||
<div className="feed-item assistant">
|
||
<div className="feed-avatar ai-rank">
|
||
<RankIcon rank={rank} />
|
||
</div>
|
||
<div className="feed-body">
|
||
<div className="feed-header">
|
||
<span className="feed-rank-badge" style={{ color: rank.color, borderColor: rank.color }}>
|
||
{rank.short}
|
||
</span>
|
||
<span className="feed-role">{rank.label}</span>
|
||
</div>
|
||
{thinking && <ThinkingBlock content={thinking} raw done={false} />}
|
||
{hasOrderedSegments ? (
|
||
<>
|
||
{compress && (
|
||
<div className="feed-content" style={{ opacity: 0.7, fontSize: '0.85em', display: 'flex', justifyContent: 'space-between' }}>
|
||
<span>… {toolSegments.length - 1} action{toolSegments.length - 1 > 1 ? 's' : ''} précédente{toolSegments.length - 1 > 1 ? 's' : ''} masquée{toolSegments.length - 1 > 1 ? 's' : ''} (mode compressé)</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setForceExpand(true)}
|
||
style={{ background: 'transparent', border: 'none', color: 'var(--accent, #6c5ce7)', cursor: 'pointer', fontSize: 'inherit' }}
|
||
>Tout afficher</button>
|
||
</div>
|
||
)}
|
||
{(() => {
|
||
const lastToolId = toolSegments.length > 0 ? toolSegments[toolSegments.length - 1] : null
|
||
return segments.map((seg, i) => {
|
||
if (seg.type === 'text') {
|
||
if (!seg.content) return null
|
||
return (
|
||
<div key={`t${i}`} className="feed-content">
|
||
<MarkdownContent content={seg.content} raw={false} />
|
||
</div>
|
||
)
|
||
}
|
||
if (seg.type === 'tool') {
|
||
if (compress && seg !== lastToolId) return null
|
||
return <ToolCallBlock key={`tc${i}`} call={seg.call} result={seg.result} activeAgents={activeAgents} onModeChange={onModeChange} />
|
||
}
|
||
return null
|
||
})
|
||
})()}
|
||
</>
|
||
) : (
|
||
<>
|
||
{hasToolCalls && (compress
|
||
? [<ToolCallBlock key={toolCalls[toolCalls.length - 1].call?.tool_call_id || 'last'} call={toolCalls[toolCalls.length - 1].call} result={toolCalls[toolCalls.length - 1].result} activeAgents={activeAgents} onModeChange={onModeChange} />]
|
||
: toolCalls.map((tc, i) => (
|
||
<ToolCallBlock key={tc.call?.tool_call_id || i} call={tc.call} result={tc.result} activeAgents={activeAgents} onModeChange={onModeChange} />
|
||
))
|
||
)}
|
||
{cleanContent && (
|
||
<div className="feed-content">
|
||
<MarkdownContent content={cleanContent} raw={false} />
|
||
<span className="studio-cursor" />
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
{!thinking && !cleanContent && !hasToolCalls && !hasOrderedSegments && (
|
||
<div className="feed-content">
|
||
<div className="studio-thinking"><span /><span /><span /></div>
|
||
</div>
|
||
)}
|
||
{!hasOrderedSegments && cleanContent && (
|
||
<span className="studio-cursor" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function Studio({ api }) {
|
||
const { t } = useI18n()
|
||
const [messages, setMessages] = useState([])
|
||
const [input, setInput] = useState('')
|
||
const [loading, setLoading] = useState(false)
|
||
const [streaming, setStreaming] = useState('')
|
||
const [streamThinking, setStreamThinking] = useState('')
|
||
const [streamToolCalls, setStreamToolCalls] = useState([])
|
||
const [streamSegments, setStreamSegments] = useState(null)
|
||
const [loaded, setLoaded] = useState(false)
|
||
const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 150000, summarizeAt: 120000 })
|
||
const [contextCollapsed, setContextCollapsed] = useState(false)
|
||
const [messagesCollapsed, setMessagesCollapsed] = useState(false)
|
||
const [sudoModal, setSudoModal] = useState(null)
|
||
const [attachedImages, setAttachedImages] = useState([])
|
||
const [activeAgents, setActiveAgents] = useState({ crush: 0, claude: 0 })
|
||
const [toolModes, setToolModes] = useState({})
|
||
const [advancedReflection, setAdvancedReflection] = useState(() => {
|
||
try { return localStorage.getItem('muyue.advancedReflection') === 'true' } catch { return false }
|
||
})
|
||
const [collapseHistory, setCollapseHistory] = useState(() => {
|
||
try { return localStorage.getItem('muyue.collapseHistory') !== 'false' } catch { return true }
|
||
})
|
||
const MAX_CRUSH_AGENTS = 2
|
||
const MAX_CLAUDE_AGENTS = 2
|
||
const messagesEnd = useRef(null)
|
||
const feedRef = useRef(null)
|
||
const textareaRef = useRef(null)
|
||
const abortRef = useRef(null)
|
||
const fileInputRef = useRef(null)
|
||
const ragFileRef = useRef(null)
|
||
const [ragStatus, setRagStatus] = useState(null)
|
||
|
||
useEffect(() => {
|
||
api.getChatHistory().then(data => {
|
||
if (data.messages && data.messages.length > 0) {
|
||
setMessages(data.messages)
|
||
} else {
|
||
setMessages([
|
||
{ id: 'welcome', role: 'system', content: t('studio.welcomeNew'), time: new Date().toISOString() },
|
||
])
|
||
}
|
||
setTokenInfo({
|
||
used: data.tokens || 0,
|
||
max: data.max_tokens || 150000,
|
||
summarizeAt: data.summarize_at || 120000,
|
||
})
|
||
setLoaded(true)
|
||
}).catch(() => {
|
||
setMessages([
|
||
{ id: 'welcome', role: 'system', content: t('studio.welcomeNew'), time: new Date().toISOString() },
|
||
])
|
||
setLoaded(true)
|
||
})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })
|
||
}, [messages, streaming, streamThinking, streamToolCalls])
|
||
|
||
useEffect(() => {
|
||
api.ragStatus().then(setRagStatus).catch(() => {})
|
||
}, [api])
|
||
|
||
useEffect(() => {
|
||
const onTab = (e) => {
|
||
if (e.key !== 'Tab') return
|
||
if (document.activeElement?.tagName === 'INPUT' || document.activeElement?.tagName === 'TEXTAREA') return
|
||
const feed = document.querySelector('.studio-feed-layout')
|
||
if (!feed?.closest('.tab-hidden')) {
|
||
e.preventDefault()
|
||
textareaRef.current?.focus()
|
||
}
|
||
}
|
||
window.addEventListener('keydown', onTab)
|
||
return () => window.removeEventListener('keydown', onTab)
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (textareaRef.current) {
|
||
textareaRef.current.style.height = 'auto'
|
||
textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px'
|
||
}
|
||
}, [input])
|
||
|
||
const refreshTokens = useCallback(async () => {
|
||
try {
|
||
const data = await api.getChatHistory()
|
||
setTokenInfo({
|
||
used: data.tokens || 0,
|
||
max: data.max_tokens || 150000,
|
||
summarizeAt: data.summarize_at || 120000,
|
||
})
|
||
} catch {}
|
||
}, [api])
|
||
|
||
const handleSummarize = useCallback(async () => {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'system', content: 'Résumé de la conversation en cours...', time: new Date().toISOString() }])
|
||
setContextCollapsed('animating')
|
||
try {
|
||
const data = await api.summarizeChat()
|
||
setTokenInfo(prev => ({ ...prev, used: data.tokens || 0 }))
|
||
setTimeout(() => {
|
||
setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: '✓ Conversation résumée automatiquement. Le contexte a été compressé.', time: new Date().toISOString(), compressed: true }])
|
||
setContextCollapsed(true)
|
||
setMessagesCollapsed(true)
|
||
}, 600)
|
||
} catch (err) {
|
||
setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: 'system', content: `Erreur de résumé: ${err.message}`, time: new Date().toISOString() }])
|
||
setContextCollapsed(false)
|
||
}
|
||
}, [api])
|
||
|
||
const handleClear = useCallback(async () => {
|
||
try {
|
||
await api.clearChat()
|
||
setMessages([
|
||
{ id: 'clear-' + Date.now(), role: 'system', content: t('studio.cleared'), time: new Date().toISOString() },
|
||
])
|
||
} catch {}
|
||
}, [api, t])
|
||
|
||
const handleImageSelect = useCallback((e) => {
|
||
const files = Array.from(e.target.files || [])
|
||
if (files.length === 0) return
|
||
const remaining = 3 - attachedImages.length
|
||
const toProcess = files.slice(0, remaining)
|
||
toProcess.forEach(file => {
|
||
if (!file.type.match(/^image\/(jpeg|jpg|png|webp)$/)) return
|
||
if (file.size > 50 * 1024 * 1024) return
|
||
const reader = new FileReader()
|
||
reader.onload = (ev) => {
|
||
setAttachedImages(prev => {
|
||
if (prev.length >= 3) return prev
|
||
return [...prev, { data: ev.target.result, filename: file.name, mime_type: file.type }]
|
||
})
|
||
}
|
||
reader.readAsDataURL(file)
|
||
})
|
||
e.target.value = ''
|
||
}, [attachedImages.length])
|
||
|
||
const removeImage = useCallback((index) => {
|
||
setAttachedImages(prev => prev.filter((_, i) => i !== index))
|
||
}, [])
|
||
|
||
const handleRAGFileSelect = useCallback(async (e) => {
|
||
const files = Array.from(e.target.files || [])
|
||
if (files.length === 0) return
|
||
for (const file of files) {
|
||
try {
|
||
await api.ragIndexFile(file)
|
||
} catch (err) {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'system', content: `RAG: erreur d'indexation de ${file.name}: ${err.message}`, time: new Date().toISOString() }])
|
||
}
|
||
}
|
||
api.ragStatus().then(setRagStatus).catch(() => {})
|
||
e.target.value = ''
|
||
}, [api])
|
||
|
||
const handleSend = useCallback(async () => {
|
||
if (!input.trim() || loading) return
|
||
const text = input.trim()
|
||
const images = [...attachedImages]
|
||
setInput('')
|
||
setAttachedImages([])
|
||
|
||
const isSlashCommand = (t) => /^\/(clear|help|summarize|model(?:\s+\S+)?)$/.test(t)
|
||
|
||
if (text.startsWith('/') && !isSlashCommand(text)) {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'user', content: text, time: new Date().toISOString() }])
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Commande inconnue. Tapez `/help` pour la liste des commandes.', time: new Date().toISOString() }])
|
||
return
|
||
}
|
||
|
||
if (text === '/clear') {
|
||
handleClear()
|
||
return
|
||
}
|
||
|
||
if (text === '/help') {
|
||
const helpMsg = [
|
||
'## Commandes Studio',
|
||
'',
|
||
'- `/clear` - Effacer la conversation',
|
||
'- `/summarize` - Résumer la conversation précédente',
|
||
'- `/help` - Afficher cette aide',
|
||
'- `/model` - Afficher le provider et modèle actifs',
|
||
'- `/model change` - Basculer entre MiniMax et MiMo',
|
||
].join('\n')
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: helpMsg, time: new Date().toISOString() }])
|
||
return
|
||
}
|
||
|
||
if (text === '/summarize') {
|
||
handleSummarize()
|
||
return
|
||
}
|
||
|
||
if (text === '/model' || text === '/model change') {
|
||
if (text === '/model change') {
|
||
api.getProviders().then(data => {
|
||
const providers = data.providers || []
|
||
const minimax = providers.find(p => p.name.toUpperCase() === 'MINIMAX')
|
||
const mimo = providers.find(p => p.name.toUpperCase() === 'MIMO')
|
||
if (!minimax || !mimo) {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'MiniMax et MiMo doivent être configurés pour utiliser `/model change`.', time: new Date().toISOString() }])
|
||
return
|
||
}
|
||
const active = providers.find(p => p.active)
|
||
const activeName = active ? active.name.toUpperCase() : ''
|
||
const switchTo = activeName === 'MINIMAX' ? 'MIMO' : 'MINIMAX'
|
||
const target = switchTo === 'MINIMAX' ? minimax : mimo
|
||
api.saveProvider({ name: target.name, active: true }).then(() => {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: `✓ Provider changé: **${target.name}** (${target.model})`, time: new Date().toISOString() }])
|
||
}).catch(() => {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Erreur lors du changement de provider.', time: new Date().toISOString() }])
|
||
})
|
||
}).catch(() => {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Erreur: impossible de récupérer les providers', time: new Date().toISOString() }])
|
||
})
|
||
} else {
|
||
api.getProviders().then(data => {
|
||
const active = data.providers?.find(p => p.active)
|
||
const modelMsg = active ? `**${active.name}** — ${active.model}` : 'Aucun provider actif configuré'
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: modelMsg, time: new Date().toISOString() }])
|
||
}).catch(() => {
|
||
setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: 'Erreur: impossible de récupérer les providers', time: new Date().toISOString() }])
|
||
})
|
||
}
|
||
return
|
||
}
|
||
|
||
const userMsg = { id: Date.now().toString(), role: 'user', content: text, time: new Date().toISOString() }
|
||
setMessages(prev => [...prev, userMsg])
|
||
setLoading(true)
|
||
setStreaming('')
|
||
setStreamThinking('')
|
||
setStreamToolCalls([])
|
||
|
||
const controller = new AbortController()
|
||
abortRef.current = controller
|
||
|
||
try {
|
||
let segments = []
|
||
let textStartIdx = 0
|
||
let thinking = ''
|
||
|
||
const _updateLastText = (text) => {
|
||
if (!text) return
|
||
const last = segments.length > 0 ? segments[segments.length - 1] : null
|
||
if (last && last.type === 'text') {
|
||
last.content = text
|
||
} else {
|
||
segments.push({ type: 'text', content: text })
|
||
}
|
||
}
|
||
|
||
await api.sendChat(text, true, (partial, event) => {
|
||
if (event && (event.thinking_start || event.thinking_end || event.thinking !== undefined)) {
|
||
if (event.thinking !== undefined) {
|
||
thinking += event.thinking
|
||
setStreamThinking(thinking)
|
||
}
|
||
return
|
||
}
|
||
if (event && event.tool_call) {
|
||
_updateLastText(partial.slice(textStartIdx))
|
||
textStartIdx = partial.length
|
||
segments.push({ type: 'tool', call: event.tool_call, result: null })
|
||
const toolName = event.tool_call.name
|
||
if (toolName === 'crush_run' || toolName === 'claude_run') {
|
||
const agentType = toolName === 'crush_run' ? 'crush' : 'claude'
|
||
setActiveAgents(prev => ({ ...prev, [agentType]: prev[agentType] + 1 }))
|
||
}
|
||
const snap = segments.map(s => ({ ...s }))
|
||
setStreamToolCalls(snap.filter(s => s.type === 'tool'))
|
||
setStreamSegments(snap)
|
||
setStreaming(partial)
|
||
return
|
||
}
|
||
if (event && event.tool_result) {
|
||
if (event.tool_result.sudo_blocked) {
|
||
setSudoModal({ command: event.tool_result.command || event.tool_result.content })
|
||
}
|
||
const segIdx = segments.findIndex(s => s.type === 'tool' && s.call && s.call.tool_call_id === event.tool_result.tool_call_id)
|
||
if (segIdx >= 0) {
|
||
segments[segIdx].result = event.tool_result
|
||
const toolName = segments[segIdx].call?.name
|
||
if (toolName === 'crush_run' || toolName === 'claude_run') {
|
||
const agentType = toolName === 'crush_run' ? 'crush' : 'claude'
|
||
setActiveAgents(prev => ({ ...prev, [agentType]: Math.max(0, prev[agentType] - 1) }))
|
||
}
|
||
const snap = segments.map(s => ({ ...s }))
|
||
setStreamToolCalls(snap.filter(s => s.type === 'tool'))
|
||
setStreamSegments(snap)
|
||
}
|
||
return
|
||
}
|
||
_updateLastText(partial.slice(textStartIdx))
|
||
setStreaming(partial)
|
||
const snap = segments.map(s => ({ ...s }))
|
||
setStreamSegments(snap)
|
||
}, controller.signal, images, advancedReflection)
|
||
|
||
const allText = segments.filter(s => s.type === 'text').map(s => s.content).join('')
|
||
const toolSegs = segments.filter(s => s.type === 'tool')
|
||
const finalContent = allText || t('studio.noResponse')
|
||
const aiMsg = {
|
||
id: (Date.now() + 1).toString(),
|
||
role: 'assistant',
|
||
content: finalContent,
|
||
time: new Date().toISOString(),
|
||
}
|
||
if (thinking) aiMsg.thinking = thinking
|
||
if (toolSegs.length > 0 || segments.length > 1) {
|
||
aiMsg.content = JSON.stringify({
|
||
segments: segments.map(s => s.type === 'text'
|
||
? { type: 'text', content: s.content }
|
||
: { type: 'tool', call: s.call, result: { content: s.result?.content || '', is_error: s.result?.is_error || false, tool_call_id: s.call?.tool_call_id } }
|
||
),
|
||
content: allText,
|
||
tool_calls: toolSegs.map(s => s.call),
|
||
tool_results: toolSegs.map(s => ({
|
||
tool_call_id: s.call?.tool_call_id,
|
||
result: s.result?.content || '',
|
||
is_error: s.result?.is_error || false,
|
||
})),
|
||
})
|
||
}
|
||
setMessages(prev => [...prev, aiMsg])
|
||
} catch (err) {
|
||
if (err.name === 'AbortError') {
|
||
if (streaming) {
|
||
setMessages(prev => [...prev, {
|
||
id: (Date.now() + 1).toString(),
|
||
role: 'system',
|
||
content: t('studio.cancelled'),
|
||
time: new Date().toISOString(),
|
||
}])
|
||
}
|
||
} else {
|
||
setMessages(prev => [...prev, {
|
||
id: (Date.now() + 1).toString(),
|
||
role: 'system',
|
||
content: `${t('studio.error')}: ${err.message}`,
|
||
time: new Date().toISOString(),
|
||
}])
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
setStreaming('')
|
||
setStreamThinking('')
|
||
setStreamToolCalls([])
|
||
setStreamSegments(null)
|
||
setActiveAgents({ crush: 0, claude: 0 })
|
||
setToolModes({})
|
||
abortRef.current = null
|
||
refreshTokens()
|
||
}
|
||
}, [input, loading, api, t, handleClear, streaming, refreshTokens, handleSummarize, attachedImages])
|
||
|
||
const handleStop = useCallback(() => {
|
||
if (abortRef.current) {
|
||
abortRef.current.abort()
|
||
}
|
||
}, [])
|
||
|
||
const handleToolModeChange = useCallback((toolCallId, mode) => {
|
||
setToolModes(prev => ({ ...prev, [toolCallId]: mode }))
|
||
}, [])
|
||
|
||
const COMMANDS = ['/clear', '/summarize', '/help', '/model', '/model change']
|
||
|
||
const handleKeyDown = (e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault()
|
||
handleSend()
|
||
return
|
||
}
|
||
if (e.key === 'Tab') {
|
||
e.preventDefault()
|
||
const ta = textareaRef.current
|
||
if (!ta) return
|
||
if (document.activeElement !== ta) {
|
||
ta.focus()
|
||
return
|
||
}
|
||
const val = ta.value
|
||
const pos = ta.selectionStart
|
||
const before = val.slice(0, pos)
|
||
const afterSlash = before.match(/\/[\w ]*$/)
|
||
if (afterSlash) {
|
||
const partial = afterSlash[0]
|
||
const matches = COMMANDS.filter(c => c.startsWith(partial) && c !== partial)
|
||
if (matches.length >= 1) {
|
||
let completed = matches[0]
|
||
for (const m of matches) {
|
||
while (!m.startsWith(completed)) completed = completed.slice(0, -1)
|
||
}
|
||
if (completed === partial && matches.length === 1) completed = matches[0]
|
||
if (completed.length > partial.length) {
|
||
const suffix = completed[completed.length - 1] === ' ' ? '' : (matches.length === 1 ? ' ' : '')
|
||
completed += suffix
|
||
const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
|
||
setInput(newText)
|
||
requestAnimationFrame(() => {
|
||
ta.selectionStart = ta.selectionEnd = pos - afterSlash[0].length + completed.length
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const [summarizedExpanded, setSummarizedExpanded] = useState(false)
|
||
|
||
const handleToggleCollapsed = useCallback(() => {
|
||
setMessagesCollapsed(prev => !prev)
|
||
}, [])
|
||
|
||
const renderMessages = () => {
|
||
const summarizedMsgs = messages.filter(m => m.summarized)
|
||
const activeMsgs = messages.filter(m => !m.summarized)
|
||
|
||
const renderSummaryBlock = () => summarizedMsgs.length > 0 && (
|
||
<div className="feed-summary-block">
|
||
<div className="feed-summary-header" onClick={() => setSummarizedExpanded(prev => !prev)}>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||
</svg>
|
||
<span className="feed-summary-text">Résumé · {summarizedMsgs.length} messages</span>
|
||
<span className="feed-summary-toggle">{summarizedExpanded ? 'masquer' : 'voir'}</span>
|
||
</div>
|
||
{summarizedExpanded && summarizedMsgs.map(msg => (
|
||
<FeedItem key={msg.id} msg={msg} activeAgents={activeAgents} onModeChange={handleToolModeChange} collapseHistory={collapseHistory} />
|
||
))}
|
||
</div>
|
||
)
|
||
|
||
if (messagesCollapsed && activeMsgs.length > 4) {
|
||
const visibleCount = 4
|
||
const hiddenCount = activeMsgs.length - visibleCount
|
||
return (
|
||
<>
|
||
{renderSummaryBlock()}
|
||
{activeMsgs.slice(0, visibleCount).map(msg => (
|
||
<FeedItem key={msg.id} msg={msg} activeAgents={activeAgents} onModeChange={handleToolModeChange} collapseHistory={collapseHistory} />
|
||
))}
|
||
<div className="feed-collapsed-messages" onClick={handleToggleCollapsed}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
||
</svg>
|
||
<span className="feed-collapsed-text">{hiddenCount} messages antérieurs compressés</span>
|
||
<span className="feed-collapsed-count">clic pour développer</span>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{renderSummaryBlock()}
|
||
{activeMsgs.map(msg => (
|
||
<FeedItem key={msg.id} msg={msg} activeAgents={activeAgents} onModeChange={handleToolModeChange} collapseHistory={collapseHistory} />
|
||
))}
|
||
</>
|
||
)
|
||
}
|
||
|
||
if (!loaded) {
|
||
return (
|
||
<div className="studio-feed-layout">
|
||
<div className="studio-feed">
|
||
<div className="feed-loading">
|
||
<div className="studio-thinking"><span /><span /><span /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="studio-feed-layout">
|
||
<div className="studio-feed-scroll-wrap">
|
||
<div className="studio-feed" ref={feedRef}>
|
||
{renderMessages()}
|
||
{(streaming || streamThinking || loading || streamToolCalls.length > 0) && (
|
||
<StreamingItem content={streaming} thinking={streamThinking} toolCalls={streamToolCalls} segments={streamSegments} activeAgents={activeAgents} onModeChange={handleToolModeChange} collapseHistory={collapseHistory} />
|
||
)}
|
||
<div ref={messagesEnd} style={{ height: '24px' }} />
|
||
</div>
|
||
<div className="studio-scroll-btns">
|
||
<button className="studio-scroll-btn" onClick={() => feedRef.current?.scrollTo({ top: 0, behavior: 'smooth' })} title="Remonter">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 15l-6-6-6 6"/></svg>
|
||
</button>
|
||
<button className="studio-scroll-btn" onClick={() => messagesEnd.current?.scrollIntoView({ behavior: 'smooth' })} title="Descendre">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="studio-input-area">
|
||
{attachedImages.length > 0 && (
|
||
<div className="studio-image-previews">
|
||
{attachedImages.map((img, i) => (
|
||
<div key={i} className="studio-image-preview">
|
||
<img src={img.data} alt={img.filename} />
|
||
<button className="studio-image-remove" onClick={() => removeImage(i)}>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className={`studio-token-bar ${contextCollapsed === true ? 'compressed' : ''}`}>
|
||
<div className={`studio-token-track ${contextCollapsed === true ? 'compressed' : ''}`}>
|
||
<div
|
||
className={`studio-token-fill ${tokenInfo.used >= tokenInfo.summarizeAt ? 'warn' : ''} ${contextCollapsed === true ? 'compressed' : ''} ${contextCollapsed === 'animating' ? 'animating' : ''}`}
|
||
style={{ width: `${Math.min(100, (tokenInfo.used / tokenInfo.max) * 100)}%` }}
|
||
/>
|
||
</div>
|
||
<span className={`studio-token-text ${contextCollapsed === true ? 'compressed' : ''}`}>
|
||
{(tokenInfo.used / 1000).toFixed(1)}k / {(tokenInfo.max / 1000).toFixed(0)}k tokens
|
||
{contextCollapsed === true && ' · compressé'}
|
||
{tokenInfo.used >= tokenInfo.summarizeAt && contextCollapsed !== true && ' · résumé auto.'}
|
||
</span>
|
||
{contextCollapsed === true && (
|
||
<button className="ghost sm" onClick={handleToggleCollapsed} style={{ marginLeft: '8px', fontSize: '10px' }}>
|
||
voir plus
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="studio-input-row">
|
||
<input
|
||
type="file"
|
||
ref={fileInputRef}
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
style={{ display: 'none' }}
|
||
onChange={handleImageSelect}
|
||
/>
|
||
<input
|
||
type="file"
|
||
ref={ragFileRef}
|
||
accept=".txt,.md,.go,.js,.ts,.py,.java,.rs,.jsx,.tsx,.json,.yaml,.yml,.csv,.html,.css,.sh,.bash,.zsh,.fish"
|
||
multiple
|
||
style={{ display: 'none' }}
|
||
onChange={handleRAGFileSelect}
|
||
/>
|
||
<button
|
||
className="studio-attach-btn"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={loading || attachedImages.length >= 3}
|
||
title="Joindre des images (max 3)"
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="studio-attach-btn"
|
||
onClick={() => ragFileRef.current?.click()}
|
||
disabled={loading}
|
||
title={ragStatus ? `RAG: ${ragStatus.documents || 0} docs, ${ragStatus.chunks || 0} chunks` : 'Ajouter un contexte RAG'}
|
||
style={ragStatus && ragStatus.documents > 0 ? { color: 'var(--accent, #6c5ce7)', borderColor: 'var(--accent, #6c5ce7)' } : undefined}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="studio-attach-btn"
|
||
onClick={() => {
|
||
const next = !advancedReflection
|
||
setAdvancedReflection(next)
|
||
try { localStorage.setItem('muyue.advancedReflection', String(next)) } catch {}
|
||
}}
|
||
disabled={loading}
|
||
title={advancedReflection ? "Réflexion avancée: ON (un autre modèle produit un rapport préalable)" : "Réflexion avancée: OFF"}
|
||
style={advancedReflection ? { color: 'var(--accent, #6c5ce7)', borderColor: 'var(--accent, #6c5ce7)' } : undefined}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="studio-attach-btn"
|
||
onClick={() => {
|
||
const next = !showRawMarkdown
|
||
setShowRawMarkdown(next)
|
||
try { localStorage.setItem('muyue.showRawMarkdown', String(next)) } catch {}
|
||
}}
|
||
disabled={loading}
|
||
title={showRawMarkdown ? "Markdown brut: ON" : "Markdown rendu"}
|
||
style={showRawMarkdown ? { color: 'var(--accent, #6c5ce7)', borderColor: 'var(--accent, #6c5ce7)' } : undefined}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
className="studio-attach-btn"
|
||
onClick={() => {
|
||
const next = !collapseHistory
|
||
setCollapseHistory(next)
|
||
try { localStorage.setItem('muyue.collapseHistory', String(next)) } catch {}
|
||
}}
|
||
disabled={loading}
|
||
title={collapseHistory ? "Historique compressé (dernière action visible)" : "Historique complet (tout visible)"}
|
||
style={collapseHistory ? { color: 'var(--accent, #6c5ce7)', borderColor: 'var(--accent, #6c5ce7)' } : undefined}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
<textarea
|
||
ref={textareaRef}
|
||
value={input}
|
||
onChange={e => setInput(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
placeholder={t('studio.placeholderNew')}
|
||
disabled={loading}
|
||
rows={1}
|
||
/>
|
||
<button
|
||
className="studio-send-btn"
|
||
onClick={handleSend}
|
||
disabled={loading || !input.trim()}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
||
</svg>
|
||
</button>
|
||
{loading && (
|
||
<button className="studio-stop-btn" onClick={handleStop} title={t('studio.stop')}>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<rect x="4" y="4" width="16" height="16" rx="2"/>
|
||
</svg>
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="studio-input-hint">
|
||
{t('studio.inputHint')} · /clear /summarize /help /model · @fichier.ext pour joindre un fichier{attachedImages.length > 0 && ` · ${attachedImages.length} image${attachedImages.length > 1 ? 's' : ''} attachée${attachedImages.length > 1 ? 's' : ''}`}
|
||
</div>
|
||
</div>
|
||
|
||
{sudoModal && (
|
||
<div className="shell-modal-overlay" onClick={() => setSudoModal(null)}>
|
||
<div className="shell-modal" onClick={e => e.stopPropagation()}>
|
||
<div className="shell-modal-header">Commande bloquée</div>
|
||
<div className="shell-modal-body">
|
||
<p style={{ color: 'var(--accent-bright)', fontWeight: 600, marginBottom: 8 }}>L'IA a tenté d'exécuter une commande nécessitant des privilèges administrateur :</p>
|
||
<pre style={{ background: 'var(--bg)', padding: '10px 12px', borderRadius: 'var(--radius)', fontSize: 12, overflow: 'auto', fontFamily: 'var(--font-mono)' }}>{sudoModal.command}</pre>
|
||
<p style={{ color: 'var(--text-secondary)', fontSize: 12, marginTop: 12 }}>La commande a été bloquée. L'IA en a été informée et cherchera une alternative.</p>
|
||
</div>
|
||
<div className="shell-modal-footer">
|
||
<button className="primary" onClick={() => setSudoModal(null)}>Compris</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|