Skip to content

frontend/chat: add mini button to copy markdown to clipboard #8515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 20, 2025
Merged

frontend/chat: add mini button to copy markdown to clipboard #8515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 115 additions & 77 deletions src/packages/frontend/chat/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Badge, Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
import { List, Map } from "immutable";
import { CSSProperties, useEffect, useLayoutEffect } from "react";
import { useIntl } from "react-intl";

import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
import {
CSS,
Expand All @@ -19,6 +20,7 @@ import {
useTypedRedux,
} from "@cocalc/frontend/app-framework";
import { Gap, Icon, TimeAgo, Tip } from "@cocalc/frontend/components";
import CopyButton from "@cocalc/frontend/components/copy-button";
import MostlyStaticMarkdown from "@cocalc/frontend/editors/slate/mostly-static-markdown";
import { IS_TOUCH } from "@cocalc/frontend/feature";
import { modelToName } from "@cocalc/frontend/frame-editors/llm/llm-selector";
Expand Down Expand Up @@ -501,14 +503,122 @@ export default function Message({
);
}

function renderMessageBody({ lighten, message_class }) {
const value = newest_content(message);
function renderCopyMessageButton() {
return (
<Tip
placement={"top"}
title={intl.formatMessage({
id: "chat.message.copy_markdown.tooltip",
defaultMessage: "Copy message as markdown",
description:
"Tooltip for button to copy chat message as markdown text",
})}
>
<CopyButton
value={message_to_markdown(message)}
size="small"
noText={true}
style={{
color: is_viewers_message ? "white" : "#888",
fontSize: "12px",
marginTop: "-4px",
}}
/>
</Tip>
);
}

function renderLinkMessageButton() {
return (
<Tip
placement={"top"}
title={intl.formatMessage({
id: "chat.message.copy_link.tooltip",
defaultMessage: "Select message. Copy URL to link to this message.",
description:
"Tooltip for button to copy URL link to specific chat message",
})}
>
<Button
onClick={() => {
actions?.setFragment(message.get("date"));
}}
size="small"
type={"text"}
style={{
color: is_viewers_message ? "white" : "#888",
fontSize: "12px",
marginTop: "-4px",
}}
>
<Icon name="link" />
</Button>
</Tip>
);
}

function renderLLMFeedbackButtons() {
if (isLLMThread) return;

const feedback = message.getIn(["feedback", account_id]);
const otherFeedback =
isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
const showOtherFeedback = otherFeedback > 0;

return (
<Tip
placement={"top"}
title={
!showOtherFeedback
? "Like this"
: () => {
return (
<div>
{Object.keys(message.get("feedback")?.toJS() ?? {}).map(
(account_id) => (
<div key={account_id} style={{ marginBottom: "2px" }}>
<Avatar size={24} account_id={account_id} />{" "}
<User account_id={account_id} />
</div>
),
)}
</div>
);
}
}
>
<Button
style={{
color: !feedback && is_viewers_message ? "white" : "#888",
fontSize: "12px",
marginTop: "-4px",
...(feedback ? {} : { position: "relative", top: "-5px" }),
}}
size="small"
type={feedback ? "dashed" : "text"}
onClick={() => {
actions?.feedback(message, feedback ? null : "positive");
}}
>
{showOtherFeedback ? (
<Badge count={otherFeedback} color="darkblue" size="small" />
) : (
""
)}
<Icon
name="thumbs-up"
style={{
color: showOtherFeedback ? "darkblue" : undefined,
}}
/>
</Button>
</Tip>
);
}

function renderMessageBody({ lighten, message_class }) {
const value = newest_content(message);

return (
<>
<span style={lighten}>
Expand All @@ -518,81 +628,9 @@ export default function Message({
align="baseline"
style={{ float: "right", marginRight: "10px" }}
>
{!isLLMThread && (
<Tip
placement={"top"}
title={
!showOtherFeedback
? "Like this"
: () => {
return (
<div>
{Object.keys(
message.get("feedback")?.toJS() ?? {},
).map((account_id) => (
<div
key={account_id}
style={{ marginBottom: "2px" }}
>
<Avatar size={24} account_id={account_id} />{" "}
<User account_id={account_id} />
</div>
))}
</div>
);
}
}
>
<Button
style={{
color: !feedback && is_viewers_message ? "white" : "#888",
fontSize: "12px",
marginTop: "-4px",
...(feedback ? {} : { position: "relative", top: "-5px" }),
}}
size="small"
type={feedback ? "dashed" : "text"}
onClick={() => {
actions?.feedback(message, feedback ? null : "positive");
}}
>
{showOtherFeedback ? (
<Badge
count={otherFeedback}
color="darkblue"
size="small"
/>
) : (
""
)}
<Icon
name="thumbs-up"
style={{
color: showOtherFeedback ? "darkblue" : undefined,
}}
/>
</Button>
</Tip>
)}
<Tip
placement={"top"}
title="Select message. Copy URL to link to this message."
>
<Button
onClick={() => {
actions?.setFragment(message.get("date"));
}}
size="small"
type={"text"}
style={{
color: is_viewers_message ? "white" : "#888",
fontSize: "12px",
marginTop: "-4px",
}}
>
<Icon name="link" />
</Button>
</Tip>
{renderLLMFeedbackButtons()}
{renderCopyMessageButton()}
{renderLinkMessageButton()}
</Space>
</span>
<MostlyStaticMarkdown
Expand Down
27 changes: 25 additions & 2 deletions src/packages/frontend/i18n/trans/ar_EG.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,8 @@
"app.verify-email-banner.title": "تحقق من عنوان بريدك الإلكتروني",
"chat.chat-indicator.tooltip": "إخفاء أو إظهار محادثة المستندات",
"chat.input.placeholder": "اكتب رسالة جديدة ({have_llm, select, true {الدردشة مع الذكاء الاصطناعي أو } other {}}إخطار زميل بكتابة @)...",
"chat.message.copy_link.tooltip": "حدد الرسالة. انسخ عنوان URL للربط بهذه الرسالة.",
"chat.message.copy_markdown.tooltip": "نسخ الرسالة كنص تنسيق Markdown",
"chatroom.chat_input.preview_button.label": "عرض",
"chatroom.chat_input.send_button.label": "إرسال",
"chatroom.chat_input.send_button.tooltip": "إرسال رسالة (shift+enter)",
Expand Down Expand Up @@ -634,8 +636,10 @@
"jupyter.cell-buttonbar-menu.paste-cell-below": "لصق الخلية أدناه",
"jupyter.cell-buttonbar-menu.paste-clipboard": "لصق من الحافظة",
"jupyter.cell-buttonbar-menu.split-cell": "قسّم الخلية عند المؤشر",
"jupyter.cell-buttonbar.format-button.label": "تنسيق",
"jupyter.cell-buttonbar.format-button.tooltip": "نسّق هذا الكود ليبدو جميلاً",
"jupyter.cell-buttonbr.format-button.label": "تنسيق",
"jupyter.cell-buttonbr.format-button.tooltip": "نسّق هذا الكود ليبدو جميلاً",
"jupyter.cell-buttonbr.format-button.tooltip": "نسق هذا الكود ليبدو جميلاً",
"jupyter.commands.cell_toolbar_attachments.label": "شريط أدوات المرفقات",
"jupyter.commands.cell_toolbar_attachments.menu": "المرفقات",
"jupyter.commands.cell_toolbar_create_assignment.label": "إنشاء واجب باستخدام NBgrader",
Expand Down Expand Up @@ -812,6 +816,8 @@
"jupyter.editor.run_all_cells.label": "تشغيل جميع الخلايا",
"jupyter.editor.run_selected_cells.label": "تشغيل الخلايا المحددة",
"jupyter.editor.snippets_tooltip": "افتح لوحة تحتوي على مقتطفات الكود",
"jupyter.llm.cell-tool.actions.ask.descr": "اطرح سؤالاً مخصصاً حول الكود في هذه الخلية.",
"jupyter.llm.cell-tool.actions.ask.label": "اسأل",
"jupyter.llm.cell-tool.actions.bugfix.descr": "وصف مشكلة تلك الخلية للحصول على نسخة مصححة من الخطأ",
"jupyter.llm.cell-tool.actions.bugfix.label": "إصلاح الأخطاء",
"jupyter.llm.cell-tool.actions.document.descr": "إضافة التوثيق",
Expand All @@ -820,22 +826,39 @@
"jupyter.llm.cell-tool.actions.explain.label": "اشرح",
"jupyter.llm.cell-tool.actions.improve.descr": "حسّن الشيفرة في تلك الخلية",
"jupyter.llm.cell-tool.actions.improve.label": "تحسين",
"jupyter.llm.cell-tool.actions.md.ask.descr": "اطرح سؤالًا مخصصًا حول هذه الخلية مع سياق اختياري من الخلايا المحيطة.",
"jupyter.llm.cell-tool.actions.md.document.descr": "اكتب ملخصًا حول جميع الخلايا في السياق",
"jupyter.llm.cell-tool.actions.md.document.label": "توثيق",
"jupyter.llm.cell-tool.actions.md.formulize.descr": "أضف صيغًا رياضية لجعل النص أكثر قابلية للقراءة للعلماء.",
"jupyter.llm.cell-tool.actions.md.formulize.label": "إضافة صيغ",
"jupyter.llm.cell-tool.actions.md.proofread.descr": "تحسين اللغة، إصلاح الأخطاء الإملائية والنحوية.",
"jupyter.llm.cell-tool.actions.md.proofread.label": "تدقيق",
"jupyter.llm.cell-tool.actions.md.translate-text.descr": "ترجمة محتوى النص إلى لغة بشرية أخرى.",
"jupyter.llm.cell-tool.actions.md.translate-text.label": "ترجمة",
"jupyter.llm.cell-tool.actions.modify.descr": "عدل الكود في الخلية",
"jupyter.llm.cell-tool.actions.modify.label": "تعديل",
"jupyter.llm.cell-tool.actions.translate.descr": "ترجمة الشيفرة في تلك الخلية إلى لغة أخرى باستخدام الذكاء الاصطناعي.",
"jupyter.llm.cell-tool.actions.translate.label": "ترجمة",
"jupyter.llm.cell-tool.ask.label": "سؤال",
"jupyter.llm.cell-tool.ask.placeholder": "ماذا تريد أن تعرف عن هذا الرمز؟",
"jupyter.llm.cell-tool.assistant.title": "استخدم مساعد الذكاء الاصطناعي على هذه الخلية",
"jupyter.llm.cell-tool.bugfix.label": "خلل",
"jupyter.llm.cell-tool.bugfix.placeholder": "صف المشكلة التي تحتاج إلى إصلاحها...",
"jupyter.llm.cell-tool.document.label": "تركيز",
"jupyter.llm.cell-tool.document.placeholder": "على ماذا يجب أن تركز الوثائق؟ (اختياري)",
"jupyter.llm.cell-tool.explain.description": "كيف تشرح الشيفرة؟ إما {summary} عالي المستوى أو {step_by_step} تفسيرات.",
"jupyter.llm.cell-tool.explain.step-by-step": "خطوة بخطوة",
"jupyter.llm.cell-tool.explain.summary": "ملخص",
"jupyter.llm.cell-tool.explanation.ask": "اطرح أي سؤال حول الكود في هذه الخلية. سيقوم نموذج اللغة بتحليل الكود وتقديم إجابة بناءً على سؤالك المحدد.",
"jupyter.llm.cell-tool.explanation.bugfix": "اشرح مشكلة الكود في الخلية وسيحاول النموذج اللغوي المحدد إصلاحها. عادةً، سيخبرك إذا وجد مشكلة ويشرحها لك.",
"jupyter.llm.cell-tool.explanation.document": "سيقوم نموذج اللغة بإضافة سطور التوثيق إلى الكود في الخلية.",
"jupyter.llm.cell-tool.explanation.explain": "سيتم إرسال الكود في الخلية إلى النموذج اللغوي المحدد. سيوضح لك الكود بلغة بسيطة.",
"jupyter.llm.cell-tool.explanation.improve": "سيقوم نموذج اللغة المحدد بتحليل الكود واقتراح التحسينات. احذر، فالنتائج ليست مضمونة أن تكون صحيحة، وقد تسبب مشكلات دقيقة - راجعها بعناية.",
"jupyter.llm.cell-tool.explanation.formulize": "سيضيف نموذج اللغة الصيغ الرياضية المناسبة باستخدام ترميز LaTeX لجعل النص أكثر وضوحًا للعلماء.",
"jupyter.llm.cell-tool.explanation.improve": "سيقوم نموذج اللغة المحدد بتحليل الشفرة واقتراح تحسينات. احذر، فالنتائج لا يُضمن أن تكون صحيحة، وقد تسبب مشاكل طفيفة – راجعها بعناية.",
"jupyter.llm.cell-tool.explanation.modify": "سيقوم نموذج اللغة بتعديل الكود وفقًا للتعليمات المعطاة. اختر أحد النماذج وقم بتعديله، أو ابتكر تعليمات خاصة بك!",
"jupyter.llm.cell-tool.explanation.proofread": "سيقوم نموذج اللغة بمراجعة نص الماركداون، وتصحيح الأخطاء الإملائية والنحوية مع تحسين الوضوح وسهولة القراءة.",
"jupyter.llm.cell-tool.explanation.translate": "سيحاول نموذج اللغة ترجمة الكود في الخلية إلى لغة برمجة أخرى. قد لا يعمل الناتج على الإطلاق - ولكن إذا كنت أكثر دراية بلغة الهدف المختارة، فقد تجد من الأسهل فهم ما يحدث!",
"jupyter.llm.cell-tool.explanation.translate-text": "سيقوم نموذج اللغة بترجمة نصوص الماركداون إلى اللغة المحددة مع الحفاظ على التنسيق والهيكل.",
"jupyter.llm.cell-tool.footer.info": "إرسال هذه الرسالة إلى {model} سيبدأ محادثة في <A>إطار الدردشة الجانبية</A>. سيرد نموذج اللغة ويمكنك متابعة المحادثة في نفس الموضوع.",
"jupyter.llm.cell-tool.improve.label": "تحسين",
"jupyter.llm.cell-tool.improve.placeholder": "سرعة التنفيذ، القابلية للقراءة، …",
Expand Down
Loading