giers10/Heimgeist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Enhance message editing UI in App.jsx

Browse Source
This commit is contained in:
Victor Giers
2026-04-16 21:32:01 +02:00
parent fcfc34d382
commit 553b742d40
1 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.jsx
View File

@@ -2196,37 +2196,43 @@ async function createNewChat() {
) : (
<div className="user-message-wrapper">
{isEditingThis ? (
<div className="msg-content msg-content--user editing">
<div className="user-edit-shadow" aria-hidden="true">
{editText}
</div>
<>
<ImageAttachmentStrip attachments={m.attachments} className="message-attachment-strip" />
<div className="msg-content msg-content--user editing">
<div className="user-edit-shadow" aria-hidden="true">
{editText}
</div>
<TextareaAutosize
className="edit-message-input edit-overlay"
value={editText}
onChange={(e) => setEditText(e.target.value)}
onBlur={cancelEditMessage}
onKeyDown={(e) => {
if (e.key === 'Escape') { e.preventDefault(); cancelEditMessage(); }
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); commitEditMessage(i); }
}}
autoFocus
minRows={1}
/>
</div>
<TextareaAutosize
className="edit-message-input edit-overlay"
value={editText}
onChange={(e) => setEditText(e.target.value)}
onBlur={cancelEditMessage}
onKeyDown={(e) => {
if (e.key === 'Escape') { e.preventDefault(); cancelEditMessage(); }
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); commitEditMessage(i); }
}}
autoFocus
minRows={1}
/>
</div>
</>
) : (
(() => {
const raw = m.content || '';
const attachments = Array.isArray(m.attachments) ? m.attachments : [];
const lines = raw.split(/\r\n|\r|\n/);
const needsCollapse = lines.length > 30;
const key = collapseKeyFor(m, i, activeSessionId);
const isCollapsed = needsCollapse ? (collapsedUserMsgs[key] ?? true) : false;
const displayText = isCollapsed ? lines.slice(0, 30).join('\n') + '\n…' : raw;
const hasText = Boolean(raw.trim());
return (
<>
<div className="msg-content msg-content--user">{displayText}</div>
{needsCollapse && (
<ImageAttachmentStrip attachments={attachments} className="message-attachment-strip" />
{hasText && <div className="msg-content msg-content--user">{displayText}</div>}
{hasText && needsCollapse && (
<button
className="user-msg-expand"
onClick={() => toggleUserMsgCollapse(key)}