Merge pull request #856 from LAION-AI/message-mobile

More space for messages on narrow screens

website/src/components/FlaggableElement.tsx

@@ -25,8 +25,8 @@ import clsx from "clsx";
 import { useEffect, useReducer } from "react";
 import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
-import { Message } from "src/types/Conversation";
 import { colors } from "src/styles/Theme/colors";
+import { Message } from "src/types/Conversation";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 
@@ -114,9 +114,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
   }, [data, isLoading]);
 
   const { trigger } = useSWRMutation("/api/set_label", post, {
-    onSuccess: () => {
-      setIsEditing.off();
-    },
+    onSuccess: setIsEditing.off,
   });
 
   const submitResponse = () => {
@@ -149,7 +147,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <Box display="flex" alignItems="center" gap="2">
+      <Box display="flex" alignItems="center" flexDirection={["column", "row"]} gap="2">
         <PopoverAnchor>{props.children}</PopoverAnchor>
 
         <Tooltip label="Report" bg="red.500" aria-label="A tooltip">

website/src/components/Messages/MessageTable.tsx

@@ -9,7 +9,7 @@ interface MessageTableProps {
 
 export function MessageTable({ messages, enableLink }: MessageTableProps) {
   return (
-    <Stack spacing="3">
+    <Stack spacing="4">
       {messages.map((item) => (
         <MessageTableEntry enabled={enableLink} item={item} key={item.id + item.frontend_message_id} />
       ))}

website/src/components/Messages/MessageTableEntry.tsx

@@ -1,6 +1,8 @@
-import { Avatar, Box, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, Box, HStack, LinkBox, useBreakpoint, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
 import { FlaggableElement } from "src/components/FlaggableElement";
 import { Message } from "src/types/Conversation";
 
@@ -10,47 +12,48 @@ interface MessageTableEntryProps {
 }
 
 export function MessageTableEntry(props: MessageTableEntryProps) {
+  const router = useRouter();
+
   const { item } = props;
+
+  const goToMessage = useCallback(() => router.push(`/messages/${item.id}`), [router, item.id]);
+
   const backgroundColor = useColorModeValue("gray.100", "gray.700");
   const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
 
-  const avatarColor = useColorModeValue("white", "black");
   const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
 
+  const inlineAvatar = useBreakpointValue({ base: true, sm: false });
+
+  const avatar = useMemo(
+    () => (
+      <Avatar
+        borderColor={borderColor}
+        size={inlineAvatar ? "xs" : "sm"}
+        mr={inlineAvatar ? 2 : 0}
+        name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
+        src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+      />
+    ),
+    [borderColor, inlineAvatar, item.is_assistant]
+  );
+
   return (
     <FlaggableElement message={item}>
       <HStack w={["full", "full", "full", "fit-content"]} gap={2}>
-        <Box borderRadius="full" border="solid" borderWidth="1px" borderColor={borderColor} bg={avatarColor}>
-          <Avatar
-            size="sm"
-            name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
-            src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
-          />
+        {!inlineAvatar && avatar}
+        <Box
+          width={["full", "full", "full", "fit-content"]}
+          maxWidth={["full", "full", "full", "2xl"]}
+          p="4"
+          borderRadius="md"
+          bg={item.is_assistant ? backgroundColor : backgroundColor2}
+          onClick={props.enabled && goToMessage}
+          _hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
+        >
+          {inlineAvatar && avatar}
+          {item.text}
         </Box>
-        {props.enabled ? (
-          <Box width={["full", "full", "full", "fit-content"]} maxWidth={["full", "full", "full", "2xl"]}>
-            <Link href={`/messages/${item.id}`}>
-              <LinkBox
-                bg={item.is_assistant ? backgroundColor : backgroundColor2}
-                p="4"
-                borderRadius="md"
-                whiteSpace="pre-line"
-              >
-                {item.text}
-              </LinkBox>
-            </Link>
-          </Box>
-        ) : (
-          <Box
-            width={["full", "full", "full", "fit-content"]}
-            maxWidth={["full", "full", "full", "2xl"]}
-            bg={item.is_assistant ? backgroundColor : backgroundColor2}
-            p="4"
-            borderRadius="md"
-          >
-            {item.text}
-          </Box>
-        )}
       </HStack>
     </FlaggableElement>
   );

website/src/components/Tasks/TaskTypes.tsx

@@ -121,7 +121,7 @@ export const TaskTypes: TaskInfo[] = [
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
     help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
-    overview: "Given the following discussion, provide labels for the final prompt",
+    overview: "Given the following discussion, provide labels for the final prompt.",
     type: "label_prompter_reply",
     mode: "full",
     update_type: "text_labels",