Skip to content

Commit 4d8aa8e

Browse files
haraldschillyharaldschilly
committed
frontend/chat/message: further refactoring and using "Tip" component
1 parent de0afe9 commit 4d8aa8e

File tree

3 files changed

+162
-133
lines changed

3 files changed

+162
-133
lines changed

‎src/packages/frontend/chat/llm-msg-summarize.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Button, Collapse, Switch } from "antd";
77

88
import { useLanguageModelSetting } from "@cocalc/frontend/account/useLanguageModelSetting";
99
import { useAsyncEffect, useState } from "@cocalc/frontend/app-framework";
10-
import { Icon, Paragraph, RawPrompt } from "@cocalc/frontend/components";
10+
import { Icon, Paragraph, RawPrompt, Tip } from "@cocalc/frontend/components";
1111
import AIAvatar from "@cocalc/frontend/components/ai-avatar";
1212
import PopconfirmKeyboard from "@cocalc/frontend/components/popconfirm-keyboard";
1313
import LLMSelector, {
@@ -111,9 +111,14 @@ export function SummarizeThread({
111111
onConfirm={() => actions?.summarizeThread({ model, reply_to, short })}
112112
okText="Summarize"
113113
>
114-
<Button type="text" style={{ color: COLORS.GRAY_M }}>
115-
<Icon name="vertical-align-middle" /> Summarize…
116-
</Button>
114+
<Tip
115+
placement={"bottom"}
116+
title={"Summarize this thread using a language model."}
117+
>
118+
<Button type="text" style={{ color: COLORS.GRAY_M }}>
119+
<Icon name="vertical-align-middle" /> Summarize…
120+
</Button>
121+
</Tip>
117122
</PopconfirmKeyboard>
118123
);
119124
}

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

Lines changed: 148 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
// cSpell:ignore blankcolumn
77

8-
import { Badge, Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
8+
import { Badge, Button, Col, Popconfirm, Row, Space } from "antd";
99
import { List, Map } from "immutable";
1010
import { CSSProperties, useEffect, useLayoutEffect } from "react";
1111
import { useIntl } from "react-intl";
@@ -415,7 +415,7 @@ export default function Message({
415415
<div style={{ width: "100%", textAlign: "center" }}>
416416
<Space direction="horizontal" size="small" wrap>
417417
{showEditButton ? (
418-
<Tooltip
418+
<Tip
419419
title={
420420
<>
421421
Edit this message. You can edit <b>any</b> past message at any
@@ -436,10 +436,10 @@ export default function Message({
436436
>
437437
<Icon name="pencil" /> Edit
438438
</Button>
439-
</Tooltip>
439+
</Tip>
440440
) : undefined}
441441
{showDeleteButton && (
442-
<Tooltip
442+
<Tip
443443
title="Delete this message. You can delete any past message by anybody. The deleted message can be view in history."
444444
placement="left"
445445
>
@@ -462,7 +462,7 @@ export default function Message({
462462
<Icon name="trash" /> Delete
463463
</Button>
464464
</Popconfirm>
465-
</Tooltip>
465+
</Tip>
466466
)}
467467
{showEditingStatus && render_editing_status(isEditing)}
468468
{showHistory && (
@@ -502,9 +502,117 @@ export default function Message({
502502
);
503503
}
504504

505-
function contentColumn() {
505+
function renderMessageBody({ lighten, message_class }) {
506506
const value = newest_content(message);
507507

508+
const feedback = message.getIn(["feedback", account_id]);
509+
const otherFeedback =
510+
isLLMThread && msgWrittenByLLM ? 0 : message.get("feedback")?.size ?? 0;
511+
const showOtherFeedback = otherFeedback > 0;
512+
513+
return (
514+
<>
515+
<span style={lighten}>
516+
<Time message={message} edit={edit_message} />
517+
{!isLLMThread && (
518+
<Tip
519+
placement={"bottom"}
520+
title={
521+
!showOtherFeedback
522+
? undefined
523+
: () => {
524+
return (
525+
<div>
526+
{Object.keys(
527+
message.get("feedback")?.toJS() ?? {},
528+
).map((account_id) => (
529+
<div
530+
key={account_id}
531+
style={{ marginBottom: "2px" }}
532+
>
533+
<Avatar size={24} account_id={account_id} />{" "}
534+
<User account_id={account_id} />
535+
</div>
536+
))}
537+
</div>
538+
);
539+
}
540+
}
541+
>
542+
<Button
543+
style={{
544+
marginRight: "5px",
545+
float: "right",
546+
marginTop: "-4px",
547+
color: !feedback && is_viewers_message ? "white" : "#888",
548+
fontSize: "12px",
549+
}}
550+
size="small"
551+
type={feedback ? "dashed" : "text"}
552+
onClick={() => {
553+
actions?.feedback(message, feedback ? null : "positive");
554+
}}
555+
>
556+
{showOtherFeedback ? (
557+
<Badge count={otherFeedback} color="darkblue" size="small" />
558+
) : (
559+
""
560+
)}
561+
<Tip
562+
placement={"bottom"}
563+
title={showOtherFeedback ? undefined : "Like this"}
564+
>
565+
<Icon
566+
name="thumbs-up"
567+
style={{
568+
color: showOtherFeedback ? "darkblue" : undefined,
569+
}}
570+
/>
571+
</Tip>
572+
</Button>
573+
</Tip>
574+
)}{" "}
575+
<Tip
576+
placement={"bottom"}
577+
title="Select message. Copy URL to link to this message."
578+
>
579+
<Button
580+
onClick={() => {
581+
actions?.setFragment(message.get("date"));
582+
}}
583+
size="small"
584+
type={"text"}
585+
style={{
586+
float: "right",
587+
marginTop: "-4px",
588+
color: is_viewers_message ? "white" : "#888",
589+
fontSize: "12px",
590+
}}
591+
>
592+
<Icon name="link" />
593+
</Button>
594+
</Tip>
595+
</span>
596+
<MostlyStaticMarkdown
597+
style={MARKDOWN_STYLE}
598+
value={value}
599+
className={message_class}
600+
selectedHashtags={selectedHashtags}
601+
toggleHashtag={
602+
selectedHashtags != null && actions != null
603+
? (tag) =>
604+
actions?.setHashtagState(
605+
tag,
606+
selectedHashtags?.has(tag) ? undefined : 1,
607+
)
608+
: undefined
609+
}
610+
/>
611+
</>
612+
);
613+
}
614+
615+
function contentColumn() {
508616
const { background, color, lighten, message_class } = message_colors(
509617
account_id,
510618
message,
@@ -533,10 +641,6 @@ export default function Message({
533641
} as const;
534642

535643
const mainXS = mode === "standalone" ? 20 : 22;
536-
const feedback = message.getIn(["feedback", account_id]);
537-
const otherFeedback =
538-
isLLMThread && msgWrittenByLLM ? 0 : message.get("feedback")?.size ?? 0;
539-
const showOtherFeedback = otherFeedback > 0;
540644

541645
return (
542646
<Col key={1} xs={mainXS}>
@@ -567,106 +671,14 @@ export default function Message({
567671
className="smc-chat-message"
568672
onDoubleClick={edit_message}
569673
>
570-
{!isEditing && (
571-
<span style={lighten}>
572-
<Time message={message} edit={edit_message} />
573-
{!isLLMThread && (
574-
<Tooltip
575-
title={
576-
!showOtherFeedback
577-
? undefined
578-
: () => {
579-
return (
580-
<div>
581-
{Object.keys(
582-
message.get("feedback")?.toJS() ?? {},
583-
).map((account_id) => (
584-
<div
585-
key={account_id}
586-
style={{ marginBottom: "2px" }}
587-
>
588-
<Avatar size={24} account_id={account_id} />{" "}
589-
<User account_id={account_id} />
590-
</div>
591-
))}
592-
</div>
593-
);
594-
}
595-
}
596-
>
597-
<Button
598-
style={{
599-
marginRight: "5px",
600-
float: "right",
601-
marginTop: "-4px",
602-
color: !feedback && is_viewers_message ? "white" : "#888",
603-
fontSize: "12px",
604-
}}
605-
size="small"
606-
type={feedback ? "dashed" : "text"}
607-
onClick={() => {
608-
actions?.feedback(message, feedback ? null : "positive");
609-
}}
610-
>
611-
{showOtherFeedback ? (
612-
<Badge
613-
count={otherFeedback}
614-
color="darkblue"
615-
size="small"
616-
/>
617-
) : (
618-
""
619-
)}
620-
<Tooltip
621-
title={showOtherFeedback ? undefined : "Like this"}
622-
>
623-
<Icon
624-
name="thumbs-up"
625-
style={{
626-
color: showOtherFeedback ? "darkblue" : undefined,
627-
}}
628-
/>
629-
</Tooltip>
630-
</Button>
631-
</Tooltip>
632-
)}{" "}
633-
<Tooltip title="Select message. Copy URL to link to this message.">
634-
<Button
635-
onClick={() => {
636-
actions?.setFragment(message.get("date"));
637-
}}
638-
size="small"
639-
type={"text"}
640-
style={{
641-
float: "right",
642-
marginTop: "-4px",
643-
color: is_viewers_message ? "white" : "#888",
644-
fontSize: "12px",
645-
}}
646-
>
647-
<Icon name="link" />
648-
</Button>
649-
</Tooltip>
650-
</span>
651-
)}
652-
{!isEditing && (
653-
<MostlyStaticMarkdown
654-
style={MARKDOWN_STYLE}
655-
value={value}
656-
className={message_class}
657-
selectedHashtags={selectedHashtags}
658-
toggleHashtag={
659-
selectedHashtags != null && actions != null
660-
? (tag) =>
661-
actions?.setHashtagState(
662-
tag,
663-
selectedHashtags?.has(tag) ? undefined : 1,
664-
)
665-
: undefined
666-
}
667-
/>
674+
{isEditing ? (
675+
renderEditMessage()
676+
) : (
677+
<>
678+
{renderMessageBody({ lighten, message_class })}
679+
{renderEditControlRow()}
680+
</>
668681
)}
669-
{isEditing ? renderEditMessage() : renderEditControlRow()}
670682
</div>
671683
{show_history && (
672684
<div>
@@ -876,7 +888,8 @@ export default function Message({
876888

877889
return (
878890
<div style={{ textAlign: "center", width: "100%" }}>
879-
<Tooltip
891+
<Tip
892+
placement={"bottom"}
880893
title={
881894
isLLMThread
882895
? `Reply to ${modelToName(
@@ -903,25 +916,32 @@ export default function Message({
903916
/>
904917
) : undefined}
905918
</Button>
906-
</Tooltip>
919+
</Tip>
907920
{showAISummarize && is_thread ? (
908921
<SummarizeThread message={message} actions={actions} />
909922
) : undefined}
910-
{is_thread ? (
911-
<Button
912-
type="text"
913-
style={{ color: COLORS.GRAY_M }}
914-
icon={<Icon name="to-top-outlined" />}
915-
onClick={() =>
916-
actions?.toggleFoldThread(
917-
new Date(getThreadRootDate({ date, messages })),
918-
index,
919-
)
923+
{is_thread && (
924+
<Tip
925+
placement={"bottom"}
926+
title={
927+
"Fold this thread to make the list of messages shorter. You can unfold it again at any time."
920928
}
921929
>
922-
Fold Thread…
923-
</Button>
924-
) : undefined}
930+
<Button
931+
type="text"
932+
style={{ color: COLORS.GRAY_M }}
933+
icon={<Icon name="to-top-outlined" />}
934+
onClick={() =>
935+
actions?.toggleFoldThread(
936+
new Date(getThreadRootDate({ date, messages })),
937+
index,
938+
)
939+
}
940+
>
941+
Fold…
942+
</Button>
943+
</Tip>
944+
)}
925945
</div>
926946
);
927947
}
@@ -998,6 +1018,7 @@ export default function Message({
9981018
}
9991019
/>
10001020
);
1021+
10011022
return (
10021023
<Col
10031024
xs={xs}
@@ -1007,7 +1028,8 @@ export default function Message({
10071028
{hideTooltip ? (
10081029
button
10091030
) : (
1010-
<Tooltip
1031+
<Tip
1032+
placement={"bottom"}
10111033
title={
10121034
is_folded ? (
10131035
<>
@@ -1026,7 +1048,7 @@ export default function Message({
10261048
}
10271049
>
10281050
{button}
1029-
</Tooltip>
1051+
</Tip>
10301052
)}
10311053
</Col>
10321054
);

0 commit comments

Comments
 (0)