From 4880a6dcd76868dd9b6e35a72839a7af645c7d22 Mon Sep 17 00:00:00 2001
From: William Stein <wstein@sagemath.com>
Date: Fri, 11 Oct 2024 14:41:27 +0000
Subject: [PATCH] chat: move message like counter, as suggested by Andrey N.

---
 src/packages/frontend/chat/message.tsx | 112 ++++++++++++++-----------
 1 file changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/packages/frontend/chat/message.tsx b/src/packages/frontend/chat/message.tsx
index 9992b98b39..e273749982 100644
--- a/src/packages/frontend/chat/message.tsx
+++ b/src/packages/frontend/chat/message.tsx
@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
+import { Badge, Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
 import { Map } from "immutable";
 import { CSSProperties, useEffect, useLayoutEffect } from "react";
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
@@ -301,7 +301,6 @@ export default function Message(props: Readonly<Props>) {
         <div
           style={{
             color: COLORS.GRAY_M,
-            marginBottom: "2px",
             fontSize: "14px" /* matches Reply button */,
           }}
         >
@@ -416,6 +415,7 @@ export default function Message(props: Readonly<Props>) {
     const feedback = message.getIn(["feedback", props.account_id]);
     const otherFeedback =
       isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
+    const showOtherFeedback = otherFeedback > 0;
 
     const editControlRow = () => {
       if (isEditing) {
@@ -428,15 +428,16 @@ export default function Message(props: Readonly<Props>) {
         (message.get("editing")?.size ?? 0) > 0;
       const showHistory = (message.get("history")?.size ?? 0) > 1;
       const showLLMFeedback = isLLMThread && msgWrittenByLLM;
-      const showOtherFeedback = otherFeedback > 0;
 
+      // Show the bottom line of the message -- this uses a LOT of extra
+      // vertical space, so only do it if there is a good reason to.
+      // Getting rid of this might be nice.
       const show =
         showEditButton ||
         showDeleteButton ||
         showEditingStatus ||
         showHistory ||
-        showLLMFeedback ||
-        showOtherFeedback;
+        showLLMFeedback;
       if (!show) {
         // important to explicitly check this before rendering below, since otherwise we get a big BLANK space.
         return null;
@@ -523,33 +524,6 @@ export default function Message(props: Readonly<Props>) {
               </>
             )}
           </Space>
-          {showOtherFeedback && (
-            <div
-              style={{
-                float: "right",
-                color: is_viewers_message ? "white" : "#555",
-              }}
-            >
-              <Tooltip
-                title={() => {
-                  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>
-                  );
-                }}
-              >
-                {otherFeedback} <Icon name="thumbs-up" />
-              </Tooltip>
-            </div>
-          )}
         </div>
       );
     };
@@ -587,25 +561,63 @@ export default function Message(props: Readonly<Props>) {
             <span style={lighten}>
               <Time message={message} edit={edit_message} />
               {!isLLMThread && (
-                <Button
-                  style={{
-                    marginRight: "5px",
-                    float: "right",
-                    marginTop: "-4px",
-                    color: !feedback && is_viewers_message ? "white" : "#888",
-                    fontSize: "12px",
-                  }}
-                  size="small"
-                  type={feedback ? "dashed" : "text"}
-                  onClick={() => {
-                    props.actions?.feedback(
-                      message,
-                      feedback ? null : "positive",
-                    );
-                  }}
+                <Tooltip
+                  title={
+                    !showOtherFeedback
+                      ? undefined
+                      : () => {
+                          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>
+                          );
+                        }
+                  }
                 >
-                  <Icon name="thumbs-up" />
-                </Button>
+                  <Button
+                    style={{
+                      marginRight: "5px",
+                      float: "right",
+                      marginTop: "-4px",
+                      color: !feedback && is_viewers_message ? "white" : "#888",
+                      fontSize: "12px",
+                    }}
+                    size="small"
+                    type={feedback ? "dashed" : "text"}
+                    onClick={() => {
+                      props.actions?.feedback(
+                        message,
+                        feedback ? null : "positive",
+                      );
+                    }}
+                  >
+                    {showOtherFeedback ? (
+                      <Badge
+                        count={otherFeedback}
+                        color="darkblue"
+                        size="small"
+                      />
+                    ) : (
+                      ""
+                    )}
+                    <Icon
+                      name="thumbs-up"
+                      style={{
+                        color: showOtherFeedback ? "darkred" : undefined,
+                      }}
+                    />
+                  </Button>
+                </Tooltip>
               )}{" "}
               <Tooltip title="Select this message. Copy the browser URL to link to this message.">
                 <Button