Skip to content

Commit 2c38aec

Browse files
williamsteinwilliamstein
committed
chat: get rid of extra space at bottom of message (when no edit or history info)
1 parent 803629f commit 2c38aec

File tree

1 file changed

+138
-119
lines changed

1 file changed

+138
-119
lines changed

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

Lines changed: 138 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,143 @@ export default function Message(props: Readonly<Props>) {
425425
const otherFeedback =
426426
isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
427427

428+
const editControlRow = () => {
429+
if (isEditing) {
430+
return null;
431+
}
432+
const showDeleteButton =
433+
DELETE_BUTTON && newest_content(message).trim().length > 0;
434+
const showEditingStatus =
435+
(message.get("history")?.size ?? 0) > 1 ||
436+
(message.get("editing")?.size ?? 0) > 0;
437+
const showHistory = (message.get("history")?.size ?? 0) > 1;
438+
const showLLMFeedback = isLLMThread && msgWrittenByLLM;
439+
const showOtherFeedback = otherFeedback > 0;
440+
441+
const show =
442+
showEditButton ||
443+
showDeleteButton ||
444+
showEditingStatus ||
445+
showHistory ||
446+
showLLMFeedback ||
447+
showOtherFeedback;
448+
if (!show) {
449+
// important to explicitly check this before rendering below, since otherwise we get a big BLANK space.
450+
return null;
451+
}
452+
453+
return (
454+
<div style={{ width: "100%", textAlign: "center" }}>
455+
<Space direction="horizontal" size="small" wrap>
456+
{showEditButton ? (
457+
<Tooltip
458+
title="Edit this message. You can edit any past message by anybody at any time by double clicking on it. Previous versions are in the history."
459+
placement="left"
460+
>
461+
<Button
462+
disabled={replying}
463+
style={{
464+
color: is_viewers_message ? "white" : "#555",
465+
}}
466+
type="text"
467+
size="small"
468+
onClick={() => props.actions?.setEditing(message, true)}
469+
>
470+
<Icon name="pencil" /> Edit
471+
</Button>
472+
</Tooltip>
473+
) : undefined}
474+
{showDeleteButton && (
475+
<Tooltip
476+
title="Delete this message. You can delete any past message by anybody. The deleted message can be view in history."
477+
placement="left"
478+
>
479+
<Popconfirm
480+
title="Delete this message"
481+
description="Are you sure you want to delete this message?"
482+
onConfirm={() => {
483+
props.actions?.setEditing(message, true);
484+
setTimeout(() => props.actions?.sendEdit(message, ""), 1);
485+
}}
486+
>
487+
<Button
488+
disabled={replying}
489+
style={{
490+
color: is_viewers_message ? "white" : "#555",
491+
}}
492+
type="text"
493+
size="small"
494+
>
495+
<Icon name="trash" /> Delete
496+
</Button>
497+
</Popconfirm>
498+
</Tooltip>
499+
)}
500+
{showEditingStatus && editing_status(isEditing)}
501+
{showHistory && (
502+
<Button
503+
style={{
504+
marginLeft: "5px",
505+
color: is_viewers_message ? "white" : "#555",
506+
}}
507+
type="text"
508+
size="small"
509+
icon={<Icon name="history" />}
510+
onClick={() => {
511+
set_show_history(!show_history);
512+
props.scroll_into_view?.();
513+
}}
514+
>
515+
<Tip
516+
title="Message History"
517+
tip={`${verb} history of editing of this message. Any collaborator can edit any message by double clicking on it.`}
518+
>
519+
{verb} History
520+
</Tip>
521+
</Button>
522+
)}
523+
{showLLMFeedback && (
524+
<>
525+
<RegenerateLLM
526+
actions={props.actions}
527+
date={date}
528+
model={isLLMThread}
529+
/>
530+
<FeedbackLLM actions={props.actions} message={message} />
531+
</>
532+
)}
533+
</Space>
534+
{showOtherFeedback && (
535+
<div
536+
style={{
537+
float: "right",
538+
color: is_viewers_message ? "white" : "#555",
539+
}}
540+
>
541+
<Tooltip
542+
title={() => {
543+
return (
544+
<div>
545+
{Object.keys(message.get("feedback")?.toJS() ?? {}).map(
546+
(account_id) => (
547+
<div key={account_id} style={{ marginBottom: "2px" }}>
548+
<Avatar size={24} account_id={account_id} />{" "}
549+
<User account_id={account_id} />
550+
</div>
551+
),
552+
)}
553+
</div>
554+
);
555+
}}
556+
>
557+
{otherFeedback} <Icon name="thumbs-up" />
558+
</Tooltip>
559+
</div>
560+
)}
561+
</div>
562+
);
563+
};
564+
428565
return (
429566
<Col key={1} xs={mainXS}>
430567
<div
@@ -516,125 +653,7 @@ export default function Message(props: Readonly<Props>) {
516653
/>
517654
)}
518655
{isEditing && renderEditMessage()}
519-
{!isEditing && (
520-
<div style={{ width: "100%", textAlign: "center" }}>
521-
<Space direction="horizontal" size="small" wrap>
522-
{showEditButton ? (
523-
<Tooltip
524-
title="Edit this message. You can edit any past message by anybody at any time by double clicking on it. Previous versions are in the history."
525-
placement="left"
526-
>
527-
<Button
528-
disabled={replying}
529-
style={{
530-
color: is_viewers_message ? "white" : "#555",
531-
}}
532-
type="text"
533-
size="small"
534-
onClick={() => props.actions?.setEditing(message, true)}
535-
>
536-
<Icon name="pencil" /> Edit
537-
</Button>
538-
</Tooltip>
539-
) : undefined}
540-
{DELETE_BUTTON && newest_content(message).trim().length > 0 ? (
541-
<Tooltip
542-
title="Delete this message. You can delete any past message by anybody. The deleted message can be view in history."
543-
placement="left"
544-
>
545-
<Popconfirm
546-
title="Delete this message"
547-
description="Are you sure you want to delete this message?"
548-
onConfirm={() => {
549-
props.actions?.setEditing(message, true);
550-
setTimeout(
551-
() => props.actions?.sendEdit(message, ""),
552-
1,
553-
);
554-
}}
555-
>
556-
<Button
557-
disabled={replying}
558-
style={{
559-
color: is_viewers_message ? "white" : "#555",
560-
}}
561-
type="text"
562-
size="small"
563-
>
564-
<Icon name="trash" /> Delete
565-
</Button>
566-
</Popconfirm>
567-
</Tooltip>
568-
) : undefined}
569-
{(message.get("history")?.size ?? 0) > 1 ||
570-
(message.get("editing")?.size ?? 0) > 0
571-
? editing_status(isEditing)
572-
: undefined}
573-
{(message.get("history")?.size ?? 0) > 1 ? (
574-
<Button
575-
style={{
576-
marginLeft: "5px",
577-
color: is_viewers_message ? "white" : "#555",
578-
}}
579-
type="text"
580-
size="small"
581-
icon={<Icon name="history" />}
582-
onClick={() => {
583-
set_show_history(!show_history);
584-
props.scroll_into_view?.();
585-
}}
586-
>
587-
<Tip
588-
title="Message History"
589-
tip={`${verb} history of editing of this message. Any collaborator can edit any message by double clicking on it.`}
590-
>
591-
{verb} History
592-
</Tip>
593-
</Button>
594-
) : undefined}
595-
{isLLMThread && msgWrittenByLLM ? (
596-
<>
597-
<RegenerateLLM
598-
actions={props.actions}
599-
date={date}
600-
model={isLLMThread}
601-
/>
602-
<FeedbackLLM actions={props.actions} message={message} />
603-
</>
604-
) : undefined}
605-
</Space>
606-
{otherFeedback > 0 && (
607-
<div
608-
style={{
609-
float: "right",
610-
color: is_viewers_message ? "white" : "#555",
611-
}}
612-
>
613-
<Tooltip
614-
title={() => {
615-
return (
616-
<div>
617-
{Object.keys(
618-
message.get("feedback")?.toJS() ?? {},
619-
).map((account_id) => (
620-
<div
621-
key={account_id}
622-
style={{ marginBottom: "2px" }}
623-
>
624-
<Avatar size={24} account_id={account_id} />{" "}
625-
<User account_id={account_id} />
626-
</div>
627-
))}
628-
</div>
629-
);
630-
}}
631-
>
632-
{otherFeedback} <Icon name="thumbs-up" />
633-
</Tooltip>
634-
</div>
635-
)}
636-
</div>
637-
)}
656+
{editControlRow()}
638657
</div>
639658
{show_history && (
640659
<div>

0 commit comments

Comments
 (0)