fix message reaction count visibility (#1382)

close #1367
*  Only show when the user is author, admin or has reacted to the message for all pages.
*  Add disabled state when user is author

website/src/components/Messages/MessageEmojiButton.stories.tsx

@@ -11,25 +11,26 @@ export default {
 const Template = ({
   emoji,
   count,
-  checked,
-  showCount,
+  ...rest
 }: {
   emoji: string;
   count: number;
   checked?: boolean;
-  showCount: boolean;
+  userIsAuthor: boolean;
+  disabled?: boolean;
+  userReacted: boolean;
 }) => {
-  return (
-    <MessageEmojiButton emoji={{ name: emoji, count }} checked={checked} onClick={undefined} showCount={showCount} />
-  );
+  return <MessageEmojiButton emoji={{ name: emoji, count }} onClick={undefined} {...rest} />;
 };
 
 export const Default = Template.bind({});
 Default.args = {
   emoji: "+1",
   count: 7,
   checked: false,
-  showCount: true,
+  userIsAuthor: false,
+  disabled: false,
+  userReacted: true,
 };
 
 export const BigNumber = Template.bind({});

website/src/components/Messages/MessageEmojiButton.tsx

@@ -1,17 +1,33 @@
 import { Button } from "@chakra-ui/react";
+import { useHasRole } from "src/hooks/auth/useHasRole";
 import { MessageEmoji } from "src/types/Conversation";
 import { emojiIcons } from "src/types/Emoji";
 
 interface MessageEmojiButtonProps {
   emoji: MessageEmoji;
   checked?: boolean;
   onClick: () => void;
-  showCount: boolean;
+  userIsAuthor: boolean;
+  disabled?: boolean;
+  userReacted: boolean;
 }
 
-export const MessageEmojiButton = ({ emoji, checked, onClick, showCount }: MessageEmojiButtonProps) => {
+export const MessageEmojiButton = ({
+  emoji,
+  checked,
+  onClick,
+  userIsAuthor,
+  disabled,
+  userReacted,
+}: MessageEmojiButtonProps) => {
   const EmojiIcon = emojiIcons.get(emoji.name);
-  if (!EmojiIcon) return <></>;
+  const isAdmin = useHasRole("admin");
+
+  if (!EmojiIcon) return null;
+
+  const isDisabled = !!(userIsAuthor ? true : disabled);
+  const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdmin;
+
   return (
     <Button
       onClick={onClick}
@@ -21,9 +37,16 @@ export const MessageEmojiButton = ({ emoji, checked, onClick, showCount }: Messa
       height="1.6em"
       minWidth={0}
       padding="0"
+      disabled={disabled}
+      sx={{
+        ":hover": {
+          backgroundColor: isDisabled ? "transparent" : undefined,
+        },
+      }}
+      color={isDisabled ? "gray.500" : undefined}
     >
       <EmojiIcon style={{ height: "1em" }} />
-      {emoji.count > 0 && showCount && <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>}
+      {showCount && <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>}
     </Button>
   );
 };

website/src/components/Messages/MessageTableEntry.tsx

@@ -116,7 +116,8 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
                   key={emoji}
                   emoji={{ name: emoji, count }}
                   checked={emojiState.user_emojis.includes(emoji)}
-                  showCount={emojiState.user_emojis.filter((emoji) => emoji === "+1" || emoji === "-1").length > 0}
+                  userReacted={emojiState.user_emojis.length > 0}
+                  userIsAuthor={message.user_is_author}
                   onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
                 />
               );

website/src/types/Conversation.ts

@@ -19,6 +19,14 @@ export interface Message extends MessageEmojis {
   parent_id: string;
   frontend_message_id?: string;
   user_id: string;
+  user_is_author: boolean | null;
+  deleted: boolean | null;
+  synthetic: boolean | null;
+  message_tree_id: string;
+  ranking_count: number | null;
+  rank: number | null;
+  model_name: string | null;
+  review_count: number | null;
 }
 
 export interface Conversation {