Merge pull request #8515 from sagemathinc/chat-copy-button

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

Author: williamstein

src/packages/frontend/chat/message.tsx

@@ -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,
@@ -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";
@@ -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}>
@@ -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

src/packages/frontend/i18n/trans/ar_EG.json

@@ -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)",
@@ -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",
@@ -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": "إضافة التوثيق",
@@ -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": "سرعة التنفيذ، القابلية للقراءة، …",