From 1fdb3c48763803a0b85a70eb6bef98bce38e959d Mon Sep 17 00:00:00 2001
From: Kostia <kkaploon@gmail.com>
Date: Tue, 3 Jan 2023 03:11:50 +0200
Subject: [PATCH 1/4] Added collapsable text for text that's too long

---
 website/src/components/CollapsableText.tsx    | 37 +++++++++++++++++++
 website/src/components/Sortable/Sortable.tsx  |  3 +-
 .../pages/evaluate/rank_assistant_replies.tsx |  2 +
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/CollapsableText.tsx

diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
new file mode 100644
index 00000000..77792ede
--- /dev/null
+++ b/website/src/components/CollapsableText.tsx
@@ -0,0 +1,37 @@
+import { Button, Container, useDisclosure } from "@chakra-ui/react"
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalCloseButton,
+  } from '@chakra-ui/react'
+import React from "react";
+
+export const CollapsableText = ({text, maxLength=220}) => {
+        const { isOpen, onOpen, onClose } = useDisclosure()
+        if (typeof(text) != 'string' || text.length <= maxLength) {
+            return text;
+        } else {
+            return (
+                <>
+                    {text.substring(0, maxLength-3)}
+                    <Button style={{display: 'contents'}} onClick={onOpen}>...</Button>
+                    <Container maxW='full'>
+                        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={'inside'} > 
+                            <ModalOverlay>
+                                <ModalContent maxH="400">
+                                    <ModalHeader>Full Text</ModalHeader>
+                                    <ModalCloseButton />
+                                    <ModalBody>
+                                        {text}
+                                    </ModalBody>
+                                </ModalContent>
+                            </ModalOverlay>
+                        </Modal>
+                    </Container>
+                </>
+            );
+        }
+    }
diff --git a/website/src/components/Sortable/Sortable.tsx b/website/src/components/Sortable/Sortable.tsx
index 615b0853..b8c38932 100644
--- a/website/src/components/Sortable/Sortable.tsx
+++ b/website/src/components/Sortable/Sortable.tsx
@@ -17,6 +17,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { ReactNode, useEffect, useState } from "react";
+import { CollapsableText } from "../CollapsableText";
 
 import { SortableItem } from "./SortableItem";
 
@@ -61,7 +62,7 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
         <Flex direction="column" gap={2}>
           {itemsWithIds.map(({ id, item }) => (
             <SortableItem key={id} id={id}>
-              {item}
+              <CollapsableText text={item} />
             </SortableItem>
           ))}
         </Flex>
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 017deb3f..109240a0 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -57,6 +57,8 @@ const RankAssistantReplies = () => {
 
   const replies = tasks[0].task.replies as string[];
   const endTask = tasks[tasks.length - 1];
+  // Added for testing purposes, will be removed:
+  replies.push("My test text that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long."); 
   return (
     <>
       <Head>

From c68bbe75d09368d6f1a156769c1092a8da8872ac Mon Sep 17 00:00:00 2001
From: Kostia <kkaploon@gmail.com>
Date: Tue, 3 Jan 2023 03:42:36 +0200
Subject: [PATCH 2/4] Ran pre-commit to make prettier happy.

---
 website/src/components/CollapsableText.tsx    | 63 +++++++++----------
 .../pages/evaluate/rank_assistant_replies.tsx |  4 +-
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
index 77792ede..9fd28b93 100644
--- a/website/src/components/CollapsableText.tsx
+++ b/website/src/components/CollapsableText.tsx
@@ -1,37 +1,30 @@
-import { Button, Container, useDisclosure } from "@chakra-ui/react"
-import {
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalBody,
-    ModalCloseButton,
-  } from '@chakra-ui/react'
+import { Button, Container, useDisclosure } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
 import React from "react";
 
-export const CollapsableText = ({text, maxLength=220}) => {
-        const { isOpen, onOpen, onClose } = useDisclosure()
-        if (typeof(text) != 'string' || text.length <= maxLength) {
-            return text;
-        } else {
-            return (
-                <>
-                    {text.substring(0, maxLength-3)}
-                    <Button style={{display: 'contents'}} onClick={onOpen}>...</Button>
-                    <Container maxW='full'>
-                        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={'inside'} > 
-                            <ModalOverlay>
-                                <ModalContent maxH="400">
-                                    <ModalHeader>Full Text</ModalHeader>
-                                    <ModalCloseButton />
-                                    <ModalBody>
-                                        {text}
-                                    </ModalBody>
-                                </ModalContent>
-                            </ModalOverlay>
-                        </Modal>
-                    </Container>
-                </>
-            );
-        }
-    }
+export const CollapsableText = ({ text, maxLength = 220 }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  if (typeof text != "string" || text.length <= maxLength) {
+    return text;
+  } else {
+    return (
+      <>
+        {text.substring(0, maxLength - 3)}
+        <Button style={{ display: "contents" }} onClick={onOpen}>
+          ...
+        </Button>
+        <Container maxW="full">
+          <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
+            <ModalOverlay>
+              <ModalContent maxH="400">
+                <ModalHeader>Full Text</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>{text}</ModalBody>
+              </ModalContent>
+            </ModalOverlay>
+          </Modal>
+        </Container>
+      </>
+    );
+  }
+};
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index 109240a0..8e015976 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -58,7 +58,9 @@ const RankAssistantReplies = () => {
   const replies = tasks[0].task.replies as string[];
   const endTask = tasks[tasks.length - 1];
   // Added for testing purposes, will be removed:
-  replies.push("My test text that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long."); 
+  replies.push(
+    "My test text that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long."
+  );
   return (
     <>
       <Head>

From ec9e338c46ff96706cb167c867c5152c733f1458 Mon Sep 17 00:00:00 2001
From: Kostia <kkaploon@gmail.com>
Date: Tue, 3 Jan 2023 23:21:16 +0200
Subject: [PATCH 3/4] fixed the modal overlay

---
 website/src/components/CollapsableText.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
index 9fd28b93..86de4af7 100644
--- a/website/src/components/CollapsableText.tsx
+++ b/website/src/components/CollapsableText.tsx
@@ -1,4 +1,4 @@
-import { Button, Container, useDisclosure } from "@chakra-ui/react";
+import { Button, useDisclosure } from "@chakra-ui/react";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton } from "@chakra-ui/react";
 import React from "react";
 
@@ -13,17 +13,15 @@ export const CollapsableText = ({ text, maxLength = 220 }) => {
         <Button style={{ display: "contents" }} onClick={onOpen}>
           ...
         </Button>
-        <Container maxW="full">
-          <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
-            <ModalOverlay>
-              <ModalContent maxH="400">
-                <ModalHeader>Full Text</ModalHeader>
-                <ModalCloseButton />
-                <ModalBody>{text}</ModalBody>
-              </ModalContent>
-            </ModalOverlay>
-          </Modal>
-        </Container>
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"} >
+          <ModalOverlay style={{ width: "100%", height: "100%" }}>
+            <ModalContent maxH="400">
+              <ModalHeader>Full Text</ModalHeader>
+              <ModalCloseButton />
+              <ModalBody>{text}</ModalBody>
+            </ModalContent>
+          </ModalOverlay>
+        </Modal>
       </>
     );
   }

From 30ae9bde8a43651d2dcf3900baf782b430299402 Mon Sep 17 00:00:00 2001
From: Kostia <kkaploon@gmail.com>
Date: Tue, 3 Jan 2023 23:26:54 +0200
Subject: [PATCH 4/4] fixed pre-commit

---
 website/src/components/CollapsableText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
index 86de4af7..b0cfb3b9 100644
--- a/website/src/components/CollapsableText.tsx
+++ b/website/src/components/CollapsableText.tsx
@@ -13,7 +13,7 @@ export const CollapsableText = ({ text, maxLength = 220 }) => {
         <Button style={{ display: "contents" }} onClick={onOpen}>
           ...
         </Button>
-        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"} >
+        <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
           <ModalOverlay style={{ width: "100%", height: "100%" }}>
             <ModalContent maxH="400">
               <ModalHeader>Full Text</ModalHeader>