Fix/vertical and horizontal display toggle

website/public/locales/en/tasks.json

@@ -95,5 +95,12 @@
   "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",
-  "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."
+  "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.",
+  "ranking_display_preferences": "Display Preferences",
+  "display_mode": "Display Mode",
+  "vertical_display": "Vertical",
+  "horizontal_display": "Horizontal",
+  "remove_content_limit": "Remove message content limit",
+  "messages_per_row": "Messages per row",
+  "messages_per_row_description": "Number of messages to display per row in horizontal mode"
 }

website/src/components/Chat/ChatConfigForm.tsx

@@ -22,19 +22,19 @@ import { Controller, useFormContext, UseFormSetValue } from "react-hook-form";
 import SimpleBar from "simplebar-react";
 import {
   ChatConfigFormData,
+  CustomInstructionsType,
   ModelParameterConfig,
   PluginEntry,
   SamplingParameters,
-  CustomInstructionsType,
 } from "src/types/Chat";
 import { CustomPreset, getConfigCache } from "src/utils/chat";
 import { useIsomorphicLayoutEffect } from "usehooks-ts";
 
 import { ChatConfigSaver } from "./ChatConfigSaver";
 import { useChatInitialData } from "./ChatInitialDataContext";
+import CustomInstructions from "./CustomInstructions";
 import { DeletePresetButton } from "./DeletePresetButton";
 import { PluginsChooser } from "./PluginsChooser";
-import CustomInstructions from "./CustomInstructions";
 import { SavePresetButton } from "./SavePresetButton";
 import { areParametersEqual } from "./WorkParameters";
 

website/src/components/Chat/ChatConfigSaver.tsx

@@ -1,6 +1,6 @@
 import { MutableRefObject, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
-import { ChatConfigFormData, PluginEntry, CustomInstructionsType } from "src/types/Chat";
+import { ChatConfigFormData, CustomInstructionsType,PluginEntry } from "src/types/Chat";
 import { CachedChatConfig, CustomPreset, setConfigCache } from "src/utils/chat";
 
 export const ChatConfigSaver = ({

website/src/components/Chat/CustomInstructions.tsx

@@ -1,20 +1,19 @@
-import React, { useState } from "react";
 import {
   Button,
+  FormControl,
+  FormLabel,
   Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
   ModalBody,
+  ModalContent,
   ModalFooter,
-  FormControl,
-  FormLabel,
-  Input,
+  ModalHeader,
+  ModalOverlay,
   Text,
   Textarea,
 } from "@chakra-ui/react";
 import { BookOpen } from "lucide-react";
 import { useTranslation } from "next-i18next";
+import React, { useState } from "react";
 import { CustomInstructionsType } from "src/types/Chat";
 
 const CHAR_LIMIT = 256;

website/src/components/Chat/PluginsChooser.tsx

@@ -24,6 +24,7 @@ import {
 } from "@chakra-ui/react";
 import { AlertCircle, CheckCircle2, Edit, Eye, Paperclip, Plus } from "lucide-react";
 import { X } from "lucide-react";
+import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { Dispatch, SetStateAction, useCallback, useRef, useState } from "react";
 import { MouseEvent } from "react";
@@ -33,7 +34,6 @@ import { post } from "src/lib/api";
 import { OasstError } from "src/lib/oasst_api_client";
 import { API_ROUTES } from "src/lib/routes";
 import { ChatConfigFormData, PluginEntry } from "src/types/Chat";
-import Link from "next/link";
 
 import { JsonCard } from "../JsonCard";
 

website/src/components/CollapsableText.tsx

@@ -1,8 +1,14 @@
 import { useBreakpointValue } from "@chakra-ui/react";
 
-export const CollapsableText = ({ text }: { text: string }) => {
+interface CollapsableTextProps {
+  text: string;
+  disableCollapse?: boolean;
+}
+
+export const CollapsableText = ({ text, disableCollapse = false }: CollapsableTextProps) => {
   const maxLength = useBreakpointValue({ base: 220, md: 500, lg: 700, xl: 1000 });
-  if (typeof text !== "string" || text.length <= maxLength) {
+
+  if (disableCollapse || typeof text !== "string" || text.length <= maxLength) {
     return <>{text}</>;
   } else {
     const visibleText = text.substring(0, maxLength - 3);

website/src/components/Sortable/Sortable.tsx

@@ -1,5 +1,6 @@
 import {
   Flex,
+  Grid,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -21,6 +22,7 @@ import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import {
   arrayMove,
+  rectSortingStrategy,
   SortableContext,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
@@ -40,6 +42,9 @@ export interface SortableProps {
   isDisabled?: boolean;
   className?: string;
   revealSynthetic?: boolean;
+  displayMode?: "vertical" | "horizontal";
+  messagesPerRow?: number;
+  removeContentLimit?: boolean;
 }
 
 interface SortableItem {
@@ -48,7 +53,14 @@ interface SortableItem {
   item: Message;
 }
 
-export const Sortable = ({ onChange, revealSynthetic, ...props }: SortableProps) => {
+export const Sortable = ({
+  onChange,
+  revealSynthetic,
+  displayMode = "vertical",
+  messagesPerRow = 3,
+  removeContentLimit = false,
+  ...props
+}: SortableProps) => {
   const [itemsWithIds, setItemsWithIds] = useState<SortableItem[]>([]);
   const [modalText, setModalText] = useState<string | null>(null);
   useEffect(() => {
@@ -90,42 +102,82 @@ export const Sortable = ({ onChange, revealSynthetic, ...props }: SortableProps)
     [onChange]
   );
 
+  const isHorizontal = displayMode === "horizontal";
+  const sortingStrategy = isHorizontal ? rectSortingStrategy : verticalListSortingStrategy;
+  const modifiers = isHorizontal
+    ? [restrictToWindowEdges]
+    : [restrictToWindowEdges, restrictToVerticalAxis];
+
   return (
     <>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
         onDragEnd={handleDragEnd}
-        modifiers={[restrictToWindowEdges, restrictToVerticalAxis]}
+        modifiers={modifiers}
       >
-        <SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
-          <Flex direction="column" gap={4} className={extraClasses}>
-            {itemsWithIds.map(({ id, item }, index) => (
-              <SortableItem
-                OpenModal={() => {
-                  setModalText(item.text);
-                  onOpen();
-                }}
-                key={id}
-                id={id}
-                index={index}
-                isEditable={props.isEditable}
-                isDisabled={!!props.isDisabled}
-                synthetic={item.synthetic && !!revealSynthetic}
-              >
-                <button
-                  className="w-full text-left"
-                  aria-label="show full text"
-                  onClick={() => {
+        <SortableContext items={itemsWithIds} strategy={sortingStrategy}>
+          {isHorizontal ? (
+            <Grid
+              templateColumns={`repeat(${messagesPerRow}, 1fr)`}
+              gap={4}
+              className={extraClasses}
+            >
+              {itemsWithIds.map(({ id, item }, index) => (
+                <SortableItem
+                  OpenModal={() => {
+                    setModalText(item.text);
+                    onOpen();
+                  }}
+                  key={id}
+                  id={id}
+                  index={index}
+                  isEditable={props.isEditable}
+                  isDisabled={!!props.isDisabled}
+                  synthetic={item.synthetic && !!revealSynthetic}
+                >
+                  <button
+                    className="w-full text-left"
+                    aria-label="show full text"
+                    onClick={() => {
+                      setModalText(item.text);
+                      onOpen();
+                    }}
+                  >
+                    <CollapsableText text={item.text} disableCollapse={removeContentLimit} />
+                  </button>
+                </SortableItem>
+              ))}
+            </Grid>
+          ) : (
+            <Flex direction="column" gap={4} className={extraClasses}>
+              {itemsWithIds.map(({ id, item }, index) => (
+                <SortableItem
+                  OpenModal={() => {
                     setModalText(item.text);
                     onOpen();
                   }}
+                  key={id}
+                  id={id}
+                  index={index}
+                  isEditable={props.isEditable}
+                  isDisabled={!!props.isDisabled}
+                  synthetic={item.synthetic && !!revealSynthetic}
                 >
-                  <CollapsableText text={item.text} />
-                </button>
-              </SortableItem>
-            ))}
-          </Flex>
+                  <button
+                    className="w-full text-left"
+                    aria-label="show full text"
+                    onClick={() => {
+                      setModalText(item.text);
+                      onOpen();
+                    }}
+                  >
+                    <CollapsableText text={item.text} disableCollapse={removeContentLimit} />
+                  </button>
+                </SortableItem>
+              ))}
+            </Flex>
+          )}
         </SortableContext>
       </DndContext>
       <Modal

website/src/components/Tasks/EvaluateTask.tsx

@@ -4,8 +4,10 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import { MessageConversation } from "src/components/Messages/MessageConversation";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { RankingDisplayPreferences } from "src/components/Tasks/RankingDisplayPreferences";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
+import { useRankingDisplayPreferences } from "src/hooks/tasks/useRankingDisplayPreferences";
 import { Message } from "src/types/Conversation";
 import { TaskType } from "src/types/Task";
 import { EvaluateTaskReply } from "src/types/TaskResponses";
@@ -22,6 +24,8 @@ export const EvaluateTask = ({
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const [ranking, setRanking] = useState<number[] | null>(null);
   const [notRankable, setNotRankable] = useState(false);
+  const { preferences } = useRankingDisplayPreferences();
+
   let messages: Message[] = [];
   if (task.type !== TaskType.rank_initial_prompts) {
     messages = task.conversation.messages;
@@ -49,6 +53,10 @@ export const EvaluateTask = ({
   // @notmd: I haven't test `rank_initial_prompts` type yet
   const sortableItems =
     task.type === TaskType.rank_initial_prompts ? (task.prompts as unknown as Message[]) : task.reply_messages;
+
+  // Calculate max messages per row based on the number of items
+  const maxMessagesPerRow = Math.min(sortableItems.length, 6);
+
   return (
     <div data-cy="task" data-task-type="evaluate-task">
       <Box mb="4">
@@ -57,13 +65,22 @@ export const EvaluateTask = ({
           <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
             <MessageConversation messages={messages} highlightLastMessage />
           </Box>
-          <Box mt="8">
+
+          {/* Display Preferences Controls */}
+          <Box mt="4">
+            <RankingDisplayPreferences maxMessagesPerRow={maxMessagesPerRow} />
+          </Box>
+
+          <Box mt="4">
             <Sortable
               items={sortableItems}
               isDisabled={isDisabled}
               isEditable={isEditable}
               revealSynthetic={task.reveal_synthetic}
               onChange={setRanking}
+              displayMode={preferences.displayMode}
+              messagesPerRow={preferences.messagesPerRow}
+              removeContentLimit={preferences.removeContentLimit}
             />
             <Checkbox
               size="lg"