add a trivial chat "thumbs up" feature, based on the LLM one, but for non-LLM messages

- also redo the LLM like/unlike to use **standard ANTD** instead
  bootstrap-style stuff and non-standard unicode symbols

Author: williamstein

src/packages/frontend/chat/llm-msg-feedback.tsx

@@ -3,11 +3,9 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Space } from "antd";
-
-import { Button } from "@cocalc/frontend/antd-bootstrap";
+import { Button, Space } from "antd";
 import { redux } from "@cocalc/frontend/app-framework";
-import { HelpIcon, Text } from "@cocalc/frontend/components";
+import { HelpIcon, Icon, Text } from "@cocalc/frontend/components";
 import { useProjectContext } from "../project/context";
 import { ChatActions } from "./actions";
 import { ChatMessageTyped, Feedback } from "./types";
@@ -27,7 +25,7 @@ export function FeedbackLLM({ actions, message }: FeedackLLMProps) {
   const val = message.getIn(["feedback", account_id]);
 
   function feedback(what: Feedback) {
-    return `Give a ${what} feedback about this answer written by the language model.`;
+    return `Give ${what} feedback about this answer written by the language model.`;
   }
 
   const isNegative = val === "negative";
@@ -61,30 +59,30 @@ export function FeedbackLLM({ actions, message }: FeedackLLMProps) {
 
   return (
     <Space size="small" wrap>
-      <Space.Compact>
+      <Space>
         <Button
-          bsSize="xsmall"
-          bsStyle="ghost"
-          active={isPositive}
+          style={{ color: "#555" }}
+          size="small"
+          type={isPositive ? "dashed" : "text"}
           onClick={() =>
             actions?.feedback(message, isPositive ? null : "positive")
           }
           title={feedback("positive")}
         >
-          👍
+          <Icon name="thumbs-up" />
         </Button>
         <Button
-          bsSize="xsmall"
-          bsStyle="ghost"
-          active={isNegative}
+          style={{ color: "#555" }}
+          size="small"
+          type={isNegative ? "dashed" : "text"}
           onClick={() =>
             actions?.feedback(message, isNegative ? null : "negative")
           }
           title={feedback("negative")}
         >
-          👎
+          <Icon name="thumbs-down" />
         </Button>
-      </Space.Compact>
+      </Space>
       {renderUnhappy()}
     </Space>
   );

src/packages/frontend/chat/message.tsx

@@ -23,6 +23,7 @@ import {
   TimeAgo,
   Tip,
 } from "@cocalc/frontend/components";
+import { User } from "@cocalc/frontend/users";
 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";
@@ -413,6 +414,9 @@ export default function Message(props: Readonly<Props>) {
 
     const mainXS = mode === "standalone" ? 20 : 22;
     const showEditButton = Date.now() - date < SHOW_EDIT_BUTTON_MS;
+    const feedback = message.getIn(["feedback", props.account_id]);
+    const otherFeedback =
+      isLLMThread && msgWrittenByLLM ? 0 : (message.get("feedback")?.size ?? 0);
 
     return (
       <Col key={1} xs={mainXS}>
@@ -441,6 +445,27 @@ export default function Message(props: Readonly<Props>) {
           {!isEditing && (
             <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",
+                    );
+                  }}
+                >
+                  <Icon name="thumbs-up" />
+                </Button>
+              )}{" "}
             </span>
           )}
           {!isEditing && (
@@ -548,6 +573,36 @@ export default function Message(props: Readonly<Props>) {
                   </>
                 ) : undefined}
               </Space>
+              {otherFeedback > 0 && (
+                <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>
           )}
         </div>

src/packages/frontend/collaborators/current-collabs.tsx

@@ -6,7 +6,6 @@
 import { Button, Card, Popconfirm } from "antd";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-
 import { CSS, redux, useRedux } from "@cocalc/frontend/app-framework";
 import {
   Gap,