Skip to content

Commit 3bc9c1c

Browse files
haraldschillyharaldschilly
committed
frontend/chat: refactor the message component a bit more
1 parent 5b7b168 commit 3bc9c1c

File tree

1 file changed

+121
-121
lines changed

1 file changed

+121
-121
lines changed

‎src/packages/frontend/chat/message.tsx

Lines changed: 121 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,8 @@ export default function Message({
183183
return message?.get("date")?.valueOf() ?? 0;
184184
}, [message.get("date")]);
185185

186+
const showEditButton = Date.now() - date < SHOW_EDIT_BUTTON_MS;
187+
186188
const generating = message.get("generating");
187189

188190
const history_size = useMemo(
@@ -255,7 +257,7 @@ export default function Message({
255257
}
256258
}, [replying]);
257259

258-
function editing_status(is_editing: boolean) {
260+
function render_editing_status(is_editing: boolean) {
259261
let text;
260262

261263
let other_editors = // @ts-ignore -- keySeq *is* a method of TypedMap
@@ -383,6 +385,123 @@ export default function Message({
383385
);
384386
}
385387

388+
function renderEditControlRow() {
389+
if (isEditing) {
390+
return null;
391+
}
392+
const showDeleteButton =
393+
DELETE_BUTTON && newest_content(message).trim().length > 0;
394+
const showEditingStatus =
395+
(message.get("history")?.size ?? 0) > 1 ||
396+
(message.get("editing")?.size ?? 0) > 0;
397+
const showHistory = (message.get("history")?.size ?? 0) > 1;
398+
const showLLMFeedback = isLLMThread && msgWrittenByLLM;
399+
400+
// Show the bottom line of the message -- this uses a LOT of extra
401+
// vertical space, so only do it if there is a good reason to.
402+
// Getting rid of this might be nice.
403+
const show =
404+
showEditButton ||
405+
showDeleteButton ||
406+
showEditingStatus ||
407+
showHistory ||
408+
showLLMFeedback;
409+
if (!show) {
410+
// important to explicitly check this before rendering below, since otherwise we get a big BLANK space.
411+
return null;
412+
}
413+
414+
return (
415+
<div style={{ width: "100%", textAlign: "center" }}>
416+
<Space direction="horizontal" size="small" wrap>
417+
{showEditButton ? (
418+
<Tooltip
419+
title={
420+
<>
421+
Edit this message. You can edit <b>any</b> past message at any
422+
time by double clicking on it. Fix other people's typos. All
423+
versions are stored.
424+
</>
425+
}
426+
placement="left"
427+
>
428+
<Button
429+
disabled={replying}
430+
style={{
431+
color: is_viewers_message ? "white" : "#555",
432+
}}
433+
type="text"
434+
size="small"
435+
onClick={() => actions?.setEditing(message, true)}
436+
>
437+
<Icon name="pencil" /> Edit
438+
</Button>
439+
</Tooltip>
440+
) : undefined}
441+
{showDeleteButton && (
442+
<Tooltip
443+
title="Delete this message. You can delete any past message by anybody. The deleted message can be view in history."
444+
placement="left"
445+
>
446+
<Popconfirm
447+
title="Delete this message"
448+
description="Are you sure you want to delete this message?"
449+
onConfirm={() => {
450+
actions?.setEditing(message, true);
451+
setTimeout(() => actions?.sendEdit(message, ""), 1);
452+
}}
453+
>
454+
<Button
455+
disabled={replying}
456+
style={{
457+
color: is_viewers_message ? "white" : "#555",
458+
}}
459+
type="text"
460+
size="small"
461+
>
462+
<Icon name="trash" /> Delete
463+
</Button>
464+
</Popconfirm>
465+
</Tooltip>
466+
)}
467+
{showEditingStatus && render_editing_status(isEditing)}
468+
{showHistory && (
469+
<Button
470+
style={{
471+
marginLeft: "5px",
472+
color: is_viewers_message ? "white" : "#555",
473+
}}
474+
type="text"
475+
size="small"
476+
icon={<Icon name="history" />}
477+
onClick={() => {
478+
set_show_history(!show_history);
479+
scroll_into_view?.();
480+
}}
481+
>
482+
<Tip
483+
title="Message History"
484+
tip={`${verb} history of editing of this message. Any collaborator can edit any message by double clicking on it.`}
485+
>
486+
{verb} History
487+
</Tip>
488+
</Button>
489+
)}
490+
{showLLMFeedback && (
491+
<>
492+
<RegenerateLLM
493+
actions={actions}
494+
date={date}
495+
model={isLLMThread}
496+
/>
497+
<FeedbackLLM actions={actions} message={message} />
498+
</>
499+
)}
500+
</Space>
501+
</div>
502+
);
503+
}
504+
386505
function contentColumn() {
387506
const value = newest_content(message);
388507

@@ -414,129 +533,11 @@ export default function Message({
414533
} as const;
415534

416535
const mainXS = mode === "standalone" ? 20 : 22;
417-
const showEditButton = Date.now() - date < SHOW_EDIT_BUTTON_MS;
418536
const feedback = message.getIn(["feedback", account_id]);
419537
const otherFeedback =
420538
isLLMThread && msgWrittenByLLM ? 0 : message.get("feedback")?.size ?? 0;
421539
const showOtherFeedback = otherFeedback > 0;
422540

423-
const editControlRow = () => {
424-
if (isEditing) {
425-
return null;
426-
}
427-
const showDeleteButton =
428-
DELETE_BUTTON && newest_content(message).trim().length > 0;
429-
const showEditingStatus =
430-
(message.get("history")?.size ?? 0) > 1 ||
431-
(message.get("editing")?.size ?? 0) > 0;
432-
const showHistory = (message.get("history")?.size ?? 0) > 1;
433-
const showLLMFeedback = isLLMThread && msgWrittenByLLM;
434-
435-
// Show the bottom line of the message -- this uses a LOT of extra
436-
// vertical space, so only do it if there is a good reason to.
437-
// Getting rid of this might be nice.
438-
const show =
439-
showEditButton ||
440-
showDeleteButton ||
441-
showEditingStatus ||
442-
showHistory ||
443-
showLLMFeedback;
444-
if (!show) {
445-
// important to explicitly check this before rendering below, since otherwise we get a big BLANK space.
446-
return null;
447-
}
448-
449-
return (
450-
<div style={{ width: "100%", textAlign: "center" }}>
451-
<Space direction="horizontal" size="small" wrap>
452-
{showEditButton ? (
453-
<Tooltip
454-
title={
455-
<>
456-
Edit this message. You can edit <b>any</b> past message at
457-
any time by double clicking on it. Fix other people's typos.
458-
All versions are stored.
459-
</>
460-
}
461-
placement="left"
462-
>
463-
<Button
464-
disabled={replying}
465-
style={{
466-
color: is_viewers_message ? "white" : "#555",
467-
}}
468-
type="text"
469-
size="small"
470-
onClick={() => actions?.setEditing(message, true)}
471-
>
472-
<Icon name="pencil" /> Edit
473-
</Button>
474-
</Tooltip>
475-
) : undefined}
476-
{showDeleteButton && (
477-
<Tooltip
478-
title="Delete this message. You can delete any past message by anybody. The deleted message can be view in history."
479-
placement="left"
480-
>
481-
<Popconfirm
482-
title="Delete this message"
483-
description="Are you sure you want to delete this message?"
484-
onConfirm={() => {
485-
actions?.setEditing(message, true);
486-
setTimeout(() => actions?.sendEdit(message, ""), 1);
487-
}}
488-
>
489-
<Button
490-
disabled={replying}
491-
style={{
492-
color: is_viewers_message ? "white" : "#555",
493-
}}
494-
type="text"
495-
size="small"
496-
>
497-
<Icon name="trash" /> Delete
498-
</Button>
499-
</Popconfirm>
500-
</Tooltip>
501-
)}
502-
{showEditingStatus && editing_status(isEditing)}
503-
{showHistory && (
504-
<Button
505-
style={{
506-
marginLeft: "5px",
507-
color: is_viewers_message ? "white" : "#555",
508-
}}
509-
type="text"
510-
size="small"
511-
icon={<Icon name="history" />}
512-
onClick={() => {
513-
set_show_history(!show_history);
514-
scroll_into_view?.();
515-
}}
516-
>
517-
<Tip
518-
title="Message History"
519-
tip={`${verb} history of editing of this message. Any collaborator can edit any message by double clicking on it.`}
520-
>
521-
{verb} History
522-
</Tip>
523-
</Button>
524-
)}
525-
{showLLMFeedback && (
526-
<>
527-
<RegenerateLLM
528-
actions={actions}
529-
date={date}
530-
model={isLLMThread}
531-
/>
532-
<FeedbackLLM actions={actions} message={message} />
533-
</>
534-
)}
535-
</Space>
536-
</div>
537-
);
538-
};
539-
540541
return (
541542
<Col key={1} xs={mainXS}>
542543
<div
@@ -665,8 +666,7 @@ export default function Message({
665666
}
666667
/>
667668
)}
668-
{isEditing && renderEditMessage()}
669-
{editControlRow()}
669+
{isEditing ? renderEditMessage() : renderEditControlRow()}
670670
</div>
671671
{show_history && (
672672
<div>

0 commit comments

Comments
 (0)