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] 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>