Repository: LAION-AI/Open-Assistant
File: website/src/components/Messages/MessageTableEntry.tsx (TypeScript)

Code before:
        mt={inlineAvatar ? 0 : `6px`}
        mb={inlineAvatar ? 1.5 : 0}
        name={`${boolean(message.is_assistant) ? "Assistant" : "User"}`}
        src={`${boolean(message.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
      />
    ),
    [borderColor, inlineAvatar, message.is_assistant]
  );
  const highlightColor = useColorModeValue(colors.light.active, colors.dark.active);

  const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
    onSuccess: (data) => {
      data.emojis["+1"] = data.emojis["+1"] || 0;
      data.emojis["-1"] = data.emojis["-1"] || 0;
      setEmojis(data);
    },
  });
  const react = (emoji: string, state: boolean) => {
    sendEmojiChange({ op: state ? "add" : "remove", emoji });
  };

  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
  const { t } = useTranslation(["message"]);

  const router = useRouter();
  const focusElementRef = useFocusElement<HTMLDivElement>();
  const handleOnClick = useCallback(() => {
    enabled && router.push(ROUTES.MESSAGE_DETAIL(message.id));
  }, [enabled, message.id, router]);

  return (
    <HStack w={["full", "full", "full", "fit-content"]} gap={0.5} alignItems="start" maxW="full" position="relative">
      {!inlineAvatar && avatar}
      <Box
        width={["full", "full", "full", "fit-content"]}
        maxWidth={["full", "full", "full", "2xl"]}
        p={[3, 4]}
        borderRadius="18px"
        bg={bg}
        outline={highlight ? "2px solid black" : undefined}
        outlineColor={highlightColor}
        cursor={enabled ? "pointer" : undefined}
        ref={highlight ? focusElementRef : undefined}
        overflowX="auto"
        onClick={handleOnClick}
      >
        {inlineAvatar && avatar}
        <Suspense fallback={message.text}>
          <RenderedMarkdown markdown={message.text}></RenderedMarkdown>
        </Suspense>
        <HStack

Review comment (suggestion):
We only want to scroll on /messages/[id] and /admin/messages/[id] pages. Can you add another prop `scrollToHightlighted` or something similar? It should be false by default.

Code after:

  const avatar = useMemo(
    () => (
      <Avatar
        borderColor={borderColor}
        size={inlineAvatar ? "xs" : "sm"}
        mr={inlineAvatar ? 2 : 0}
        mt={inlineAvatar ? 0 : `6px`}
        mb={inlineAvatar ? 1.5 : 0}
        name={`${boolean(message.is_assistant) ? "Assistant" : "User"}`}
        src={`${boolean(message.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
      />
    ),
    [borderColor, inlineAvatar, message.is_assistant]
  );
  const highlightColor = useColorModeValue(colors.light.active, colors.dark.active);

  const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
    onSuccess: (data) => {
      data.emojis["+1"] = data.emojis["+1"] || 0;
      data.emojis["-1"] = data.emojis["-1"] || 0;
      setEmojis(data);
    },
  });
  const react = (emoji: string, state: boolean) => {
    sendEmojiChange({ op: state ? "add" : "remove", emoji });
  };

  const isAdminOrMod = useHasAnyRole(["admin", "moderator"]);
  const { t } = useTranslation(["message"]);

  const router = useRouter();
  const highlightedElementRef = useRef();
  useScrollToElementOnMount(scrollToHighlighted ? highlightedElementRef : undefined);
  const handleOnClick = useCallback(() => {
    enabled && router.push(ROUTES.MESSAGE_DETAIL(message.id));
  }, [enabled, message.id, router]);

  return (
    <HStack w={["full", "full", "full", "fit-content"]} gap={0.5} alignItems="start" maxW="full" position="relative">
      {!inlineAvatar && avatar}
      <Box
        width={["full", "full", "full", "fit-content"]}
        maxWidth={["full", "full", "full", "2xl"]}
        p={[3, 4]}
        borderRadius="18px"
        bg={bg}
        outline={highlight ? "2px solid black" : undefined}
        outlineColor={highlightColor}
        cursor={enabled ? "pointer" : undefined}
        ref={highlight ? highlightedElementRef : undefined}