feat: improve ranking task UI with layout options

website/public/locales/en/chat.json

@@ -10,6 +10,11 @@
   "drafts_generating_notify": "Draft messages are still generating. Please wait.",
   "edit_plugin": "Edit Plugin",
   "empty": "Untitled",
+  "hide_all_chats": "Hide all chats",
+  "hide_all_confirmation": "Are you sure you want to hide all {{count}} visible chats? They can be found in the 'Visible & hidden' view.",
+  "hide_all_success": "All chats have been hidden successfully",
+  "hide_all_error": "Failed to hide some chats",
+  "hiding": "Hiding...",
   "input_placeholder": "Ask the assistant anything",
   "login_message": "To use this feature, you need to login again. Login using one of these providers:",
   "max_new_tokens": "Max new tokens",

website/public/locales/en/tasks.json

@@ -95,5 +95,10 @@
   "tab_preview": "Preview",
   "writing_wrong_langauge_a_b": "You appear to be writing in {{detected_lang}} but this will be submitted as {{submit_lang}}.",
   "not_rankable": "All answers are factually incorrect and cannot be ranked",
+  "horizontal_layout": "Horizontal Layout",
+  "vertical_layout": "Vertical Layout",
+  "show_full_content": "Show Full Content",
+  "messages_per_row": "Messages Per Row",
+  "full_text": "Full Text",
   "moderator_edit_explain": "Modify the highlighted message while keeping changes to a minimum. This action can cause the conversation to not make sense and cause ratings to no longer be accurate. Please use carefully."
 }

website/src/components/Chat/ChatListBase.tsx

@@ -9,6 +9,7 @@ import SimpleBar from "simplebar-react";
 import { ChatListItem } from "./ChatListItem";
 import { ChatViewSelection } from "./ChatViewSelection";
 import { CreateChatButton } from "./CreateChatButton";
+import { HideAllChatsButton } from "./HideAllChatsButton";
 import { InferencePoweredBy } from "./InferencePoweredBy";
 import { ChatListViewSelection, useListChatPagination } from "./useListChatPagination";
 
@@ -67,6 +68,20 @@ export const ChatListBase = memo(function ChatListBase({
     mutateChatResponses();
   }, [mutateChatResponses]);
 
+  const handleHideAllChats = useCallback(() => {
+    mutateChatResponses(
+      (chatResponses) => [
+        ...(chatResponses?.map((chatResponse) => ({
+          ...chatResponse,
+          chats: [],
+        })) || []),
+      ],
+      false
+    );
+  }, [mutateChatResponses]);
+
+  const chatIds = chats.map((chat) => chat.id);
+
   const content = (
     <>
       {chats.map((chat) => (
@@ -107,9 +122,12 @@ export const ChatListBase = memo(function ChatListBase({
         >
           {t("create_chat")}
         </CreateChatButton>
-        {allowViews && (
-          <ChatViewSelection w={["full", "auto"]} onChange={(e) => setView(e.target.value as ChatListViewSelection)} />
-        )}
+        <Flex gap="2" alignItems="center">
+          {allowViews && (
+            <ChatViewSelection w={["full", "auto"]} onChange={(e) => setView(e.target.value as ChatListViewSelection)} />
+          )}
+          <HideAllChatsButton chatIds={chatIds} onHideAll={handleHideAllChats} />
+        </Flex>
       </Flex>
       {noScrollbar ? (
         content

website/src/components/Chat/HideAllChatsButton.tsx

@@ -0,0 +1,115 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  IconButton,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import { EyeOff } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import { useCallback, useRef, useState } from "react";
+import { API_ROUTES } from "src/lib/routes";
+import useSWRMutation from "swr/mutation";
+import { put } from "src/lib/api";
+
+interface HideAllChatsButtonProps {
+  chatIds: string[];
+  onHideAll: () => void;
+}
+
+export const HideAllChatsButton = ({ chatIds, onHideAll }: HideAllChatsButtonProps) => {
+  const { t } = useTranslation(["chat", "common"]);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const toast = useToast();
+  const [isHiding, setIsHiding] = useState(false);
+
+  const { trigger: triggerHide } = useSWRMutation(API_ROUTES.UPDATE_CHAT(), put);
+
+  const handleHideAll = useCallback(async () => {
+    if (chatIds.length === 0) {
+      onClose();
+      return;
+    }
+
+    setIsHiding(true);
+    try {
+      // Hide all chats sequentially
+      for (const chatId of chatIds) {
+        await triggerHide({ chat_id: chatId, hidden: true });
+      }
+
+      toast({
+        title: t("chat:hide_all_success"),
+        status: "success",
+        duration: 3000,
+        isClosable: true,
+      });
+
+      onHideAll();
+      onClose();
+    } catch (error) {
+      toast({
+        title: t("chat:hide_all_error"),
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    } finally {
+      setIsHiding(false);
+    }
+  }, [chatIds, onHideAll, onClose, toast, t, triggerHide]);
+
+  if (chatIds.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tooltip label={t("chat:hide_all_chats")}>
+        <IconButton
+          icon={<EyeOff size="16px" />}
+          aria-label={t("chat:hide_all_chats")}
+          onClick={onOpen}
+          variant="ghost"
+          size="sm"
+        />
+      </Tooltip>
+
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              {t("chat:hide_all_chats")}
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              {t("chat:hide_all_confirmation", { count: chatIds.length })}
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose} isDisabled={isHiding}>
+                {t("common:cancel")}
+              </Button>
+              <Button
+                colorScheme="blue"
+                onClick={handleHideAll}
+                ml={3}
+                isLoading={isHiding}
+                loadingText={t("chat:hiding")}
+              >
+                {t("common:confirm")}
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+};

website/src/components/CollapsableText.tsx

@@ -1,11 +1,19 @@
 import { useBreakpointValue } from "@chakra-ui/react";
 
-export const CollapsableText = ({ text }: { text: string }) => {
+interface CollapsableTextProps {
+  text: string;
+  isCollapsed?: boolean;
+}
+
+export const CollapsableText = ({ text, isCollapsed = true }: CollapsableTextProps) => {
   const maxLength = useBreakpointValue({ base: 220, md: 500, lg: 700, xl: 1000 });
-  if (typeof text !== "string" || text.length <= maxLength) {
+
+  // If not collapsed or text is short, show full text
+  if (!isCollapsed || typeof text !== "string" || text.length <= maxLength) {
     return <>{text}</>;
-  } else {
-    const visibleText = text.substring(0, maxLength - 3);
-    return <span>{visibleText}...</span>;
   }
+
+  // Show collapsed text
+  const visibleText = text.substring(0, maxLength - 3);
+  return <span>{visibleText}...</span>;
 };