Addressing review comments

website/.storybook/preview.js

@@ -9,6 +9,31 @@ initialize();
 // Provide the MSW addon decorator globally
 export const decorators = [mswDecorator];
 
+const MOCK_VALID_LABELS= [
+  {
+    name: "spam",
+    display_text: "Seems to be intentionally low-quality or irrelevant",
+    help_text: null,
+  },
+  {
+    name: "fails_task",
+    display_text:
+      "Fails to follow the correct instruction / task",
+    help_text: null,
+  },
+  {
+    name: "not_appropriate",
+    display_text: "Inappropriate for customer assistant",
+    help_text: null,
+  },
+  {
+    name: "violence",
+    display_text:
+      "Encourages or fails to discourage violence/abuse/terrorism/self-harm",
+    help_text: null,
+  },
+];
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -26,31 +51,7 @@ export const parameters = {
         rest.get("/api/valid_labels", (req, res, ctx) => {
           return res(
             ctx.json({
-              valid_labels: [
+              valid_labels: MOCK_VALID_LABELS
-                {
-                  name: "spam",
-                  display_text:
-                    "Seems to be intentionally low-quality or irrelevant",
-                  help_text: null,
-                },
-                {
-                  name: "fails_task",
-                  display_text:
-                    "Fails to follow the correct instruction / task",
-                  help_text: null,
-                },
-                {
-                  name: "not_appropriate",
-                  display_text: "Inappropriate for customer assistant",
-                  help_text: null,
-                },
-                {
-                  name: "violence",
-                  display_text:
-                    "Encourages or fails to discourage violence/abuse/terrorism/self-harm",
-                  help_text: null,
-                },
-              ],
             })
           );
         }),

website/src/components/Messages/MessageTableEntry.tsx

@@ -36,7 +36,10 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
   const router = useRouter();
   const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
   useEffect(() => {
-    setEmojis({ emojis: message.emojis, user_emojis: message.user_emojis });
+    setEmojis({
+      emojis: message?.emojis || {},
+      user_emojis: message?.user_emojis || [],
+    });
   }, [message.emojis, message.user_emojis]);
 
   const goToMessage = useCallback(() => router.push(`/messages/${message.id}`), [router, message.id]);
@@ -71,8 +74,6 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
     sendEmojiChange({ op: state ? "add" : "remove", emoji });
   };
 
-  console.log(emojiState);
-  console.log(message);
   return (
     <HStack w={["full", "full", "full", "fit-content"]} gap={2}>
       {!inlineAvatar && avatar}
@@ -95,7 +96,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
           style={{ float: "right", position: "relative", right: "-0.3em", bottom: "-0em", marginLeft: "1em" }}
           onClick={(e) => e.stopPropagation()}
         >
-          {Object.entries(emojiState?.emojis || {}).map(([emoji, count]) => (
+          {Object.entries(emojiState.emojis).map(([emoji, count]) => (
             <MessageEmojiButton
               key={emoji}
               emoji={{ name: emoji, count }}