fix: token persistence, context windows, CSS tables/bullets/hr, image attachments
All checks were successful
Beta Release / beta (push) Successful in 1m1s
All checks were successful
Beta Release / beta (push) Successful in 1m1s
- Fix token count reset on app restart: persist realTokens in conversation.json - Fix token/context window values: Studio 150K (summarize at 120K), Terminal 100K - Fix table rendering in terminal tab: correct thead/tbody display model - Fix copy button always top-right in Studio code blocks - Add markdown horizontal rule (---) support in Studio and Terminal - Fix bullet list double dot: remove CSS ::before duplicate bullet point - Add image attachments support (VLM description, file mentions @file.ext) - Add sudo detection with cache (sync.Once) - Fix message content serialization (TextContent wrapper) - Guide AI to use read_file instead of cat in studio prompt 💘 Generated with Crush Assisted-by: GLM-5.1 via Crush <crush@charm.land>
This commit is contained in:
Augustin
@@ -83,14 +83,15 @@ function formatText(text) {
|
||||
.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(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
|
||||
.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)/g, '$1')
|
||||
.replace(/(<\/h[234]|<\/div>|<\/table>)\s*<br\/>/g, '$1')
|
||||
.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, '')
|
||||
@@ -284,6 +285,13 @@ function FeedItem({ msg }) {
|
||||
{timeStr && <span className="feed-time">{timeStr}</span>}
|
||||
</div>
|
||||
{msg.thinking && <ThinkingBlock content={formatText(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>
|
||||
)}
|
||||
{parsedToolCalls && parsedToolCalls.map((tc, i) => {
|
||||
const resultData = parsedToolResults
|
||||
? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
|
||||
@@ -372,14 +380,16 @@ export default function Studio({ api }) {
|
||||
const [streamThinking, setStreamThinking] = useState('')
|
||||
const [streamToolCalls, setStreamToolCalls] = useState([])
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 100000, summarizeAt: 80000 })
|
||||
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 messagesEnd = useRef(null)
|
||||
const feedRef = useRef(null)
|
||||
const textareaRef = useRef(null)
|
||||
const abortRef = useRef(null)
|
||||
const fileInputRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
api.getChatHistory().then(data => {
|
||||
@@ -392,8 +402,8 @@ export default function Studio({ api }) {
|
||||
}
|
||||
setTokenInfo({
|
||||
used: data.tokens || 0,
|
||||
max: data.max_tokens || 100000,
|
||||
summarizeAt: data.summarize_at || 80000,
|
||||
max: data.max_tokens || 150000,
|
||||
summarizeAt: data.summarize_at || 120000,
|
||||
})
|
||||
setLoaded(true)
|
||||
}).catch(() => {
|
||||
@@ -434,8 +444,8 @@ export default function Studio({ api }) {
|
||||
const data = await api.getChatHistory()
|
||||
setTokenInfo({
|
||||
used: data.tokens || 0,
|
||||
max: data.max_tokens || 100000,
|
||||
summarizeAt: data.summarize_at || 80000,
|
||||
max: data.max_tokens || 150000,
|
||||
summarizeAt: data.summarize_at || 120000,
|
||||
})
|
||||
} catch {}
|
||||
}, [api])
|
||||
@@ -466,10 +476,36 @@ export default function Studio({ api }) {
|
||||
} 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 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)
|
||||
|
||||
@@ -580,7 +616,7 @@ export default function Studio({ api }) {
|
||||
}
|
||||
accumulated = partial
|
||||
setStreaming(partial)
|
||||
}, controller.signal)
|
||||
}, controller.signal, images)
|
||||
|
||||
const finalContent = accumulated || t('studio.noResponse')
|
||||
const aiMsg = {
|
||||
@@ -628,7 +664,7 @@ export default function Studio({ api }) {
|
||||
abortRef.current = null
|
||||
refreshTokens()
|
||||
}
|
||||
}, [input, loading, api, t, handleClear, streaming, refreshTokens, handleSummarize])
|
||||
}, [input, loading, api, t, handleClear, streaming, refreshTokens, handleSummarize, attachedImages])
|
||||
|
||||
const handleStop = useCallback(() => {
|
||||
if (abortRef.current) {
|
||||
@@ -732,6 +768,16 @@ export default function Studio({ api }) {
|
||||
</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
|
||||
@@ -751,6 +797,24 @@ export default function Studio({ api }) {
|
||||
)}
|
||||
</div>
|
||||
<div className="studio-input-row">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
multiple
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleImageSelect}
|
||||
/>
|
||||
<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>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
@@ -778,7 +842,7 @@ export default function Studio({ api }) {
|
||||
)}
|
||||
</div>
|
||||
<div className="studio-input-hint">
|
||||
{t('studio.inputHint')} · /clear /summarize /help /model
|
||||
{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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user