Skip to content

Commit 0fc3d5d

Browse files
dushyantzzdushyantzz
committed
Fix/vertical and horizontal display toggle
1 parent f1e6ed9 commit 0fc3d5d

File tree

13 files changed

+388
-43
lines changed

13 files changed

+388
-43
lines changed

‎website/public/locales/en/tasks.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,12 @@
9595
"tab_preview": "Preview",
9696
"writing_wrong_langauge_a_b": "You appear to be writing in {{detected_lang}} but this will be submitted as {{submit_lang}}.",
9797
"not_rankable": "All answers are factually incorrect and cannot be ranked",
98-
"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."
98+
"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.",
99+
"ranking_display_preferences": "Display Preferences",
100+
"display_mode": "Display Mode",
101+
"vertical_display": "Vertical",
102+
"horizontal_display": "Horizontal",
103+
"remove_content_limit": "Remove message content limit",
104+
"messages_per_row": "Messages per row",
105+
"messages_per_row_description": "Number of messages to display per row in horizontal mode"
99106
}

‎website/src/components/Chat/ChatConfigForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@ import { Controller, useFormContext, UseFormSetValue } from "react-hook-form";
2222
import SimpleBar from "simplebar-react";
2323
import {
2424
ChatConfigFormData,
25+
CustomInstructionsType,
2526
ModelParameterConfig,
2627
PluginEntry,
2728
SamplingParameters,
28-
CustomInstructionsType,
2929
} from "src/types/Chat";
3030
import { CustomPreset, getConfigCache } from "src/utils/chat";
3131
import { useIsomorphicLayoutEffect } from "usehooks-ts";
3232

3333
import { ChatConfigSaver } from "./ChatConfigSaver";
3434
import { useChatInitialData } from "./ChatInitialDataContext";
35+
import CustomInstructions from "./CustomInstructions";
3536
import { DeletePresetButton } from "./DeletePresetButton";
3637
import { PluginsChooser } from "./PluginsChooser";
37-
import CustomInstructions from "./CustomInstructions";
3838
import { SavePresetButton } from "./SavePresetButton";
3939
import { areParametersEqual } from "./WorkParameters";
4040

‎website/src/components/Chat/ChatConfigSaver.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MutableRefObject, useEffect } from "react";
22
import { useFormContext } from "react-hook-form";
3-
import { ChatConfigFormData, PluginEntry, CustomInstructionsType } from "src/types/Chat";
3+
import { ChatConfigFormData, CustomInstructionsType,PluginEntry } from "src/types/Chat";
44
import { CachedChatConfig, CustomPreset, setConfigCache } from "src/utils/chat";
55

66
export const ChatConfigSaver = ({

‎website/src/components/Chat/CustomInstructions.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import React, { useState } from "react";
21
import {
32
Button,
3+
FormControl,
4+
FormLabel,
45
Modal,
5-
ModalOverlay,
6-
ModalContent,
7-
ModalHeader,
86
ModalBody,
7+
ModalContent,
98
ModalFooter,
10-
FormControl,
11-
FormLabel,
12-
Input,
9+
ModalHeader,
10+
ModalOverlay,
1311
Text,
1412
Textarea,
1513
} from "@chakra-ui/react";
1614
import { BookOpen } from "lucide-react";
1715
import { useTranslation } from "next-i18next";
16+
import React, { useState } from "react";
1817
import { CustomInstructionsType } from "src/types/Chat";
1918

2019
const CHAR_LIMIT = 256;

‎website/src/components/Chat/PluginsChooser.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
} from "@chakra-ui/react";
2525
import { AlertCircle, CheckCircle2, Edit, Eye, Paperclip, Plus } from "lucide-react";
2626
import { X } from "lucide-react";
27+
import Link from "next/link";
2728
import { useTranslation } from "next-i18next";
2829
import { Dispatch, SetStateAction, useCallback, useRef, useState } from "react";
2930
import { MouseEvent } from "react";
@@ -33,7 +34,6 @@ import { post } from "src/lib/api";
3334
import { OasstError } from "src/lib/oasst_api_client";
3435
import { API_ROUTES } from "src/lib/routes";
3536
import { ChatConfigFormData, PluginEntry } from "src/types/Chat";
36-
import Link from "next/link";
3737

3838
import { JsonCard } from "../JsonCard";
3939

‎website/src/components/CollapsableText.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import { useBreakpointValue } from "@chakra-ui/react";
22

3-
export const CollapsableText = ({ text }: { text: string }) => {
3+
interface CollapsableTextProps {
4+
text: string;
5+
disableCollapse?: boolean;
6+
}
7+
8+
export const CollapsableText = ({ text, disableCollapse = false }: CollapsableTextProps) => {
49
const maxLength = useBreakpointValue({ base: 220, md: 500, lg: 700, xl: 1000 });
5-
if (typeof text !== "string" || text.length <= maxLength) {
10+
11+
if (disableCollapse || typeof text !== "string" || text.length <= maxLength) {
612
return <>{text}</>;
713
} else {
814
const visibleText = text.substring(0, maxLength - 3);

‎website/src/components/Sortable/Sortable.tsx‎

Lines changed: 78 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Flex,
3+
Grid,
34
Modal,
45
ModalBody,
56
ModalCloseButton,
@@ -21,6 +22,7 @@ import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
2122
import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
2223
import {
2324
arrayMove,
25+
rectSortingStrategy,
2426
SortableContext,
2527
sortableKeyboardCoordinates,
2628
verticalListSortingStrategy,
@@ -40,6 +42,9 @@ export interface SortableProps {
4042
isDisabled?: boolean;
4143
className?: string;
4244
revealSynthetic?: boolean;
45+
displayMode?: "vertical" | "horizontal";
46+
messagesPerRow?: number;
47+
removeContentLimit?: boolean;
4348
}
4449

4550
interface SortableItem {
@@ -48,7 +53,14 @@ interface SortableItem {
4853
item: Message;
4954
}
5055

51-
export const Sortable = ({ onChange, revealSynthetic, ...props }: SortableProps) => {
56+
export const Sortable = ({
57+
onChange,
58+
revealSynthetic,
59+
displayMode = "vertical",
60+
messagesPerRow = 3,
61+
removeContentLimit = false,
62+
...props
63+
}: SortableProps) => {
5264
const [itemsWithIds, setItemsWithIds] = useState<SortableItem[]>([]);
5365
const [modalText, setModalText] = useState<string | null>(null);
5466
useEffect(() => {
@@ -90,42 +102,82 @@ export const Sortable = ({ onChange, revealSynthetic, ...props }: SortableProps)
90102
[onChange]
91103
);
92104

105+
const isHorizontal = displayMode === "horizontal";
106+
const sortingStrategy = isHorizontal ? rectSortingStrategy : verticalListSortingStrategy;
107+
const modifiers = isHorizontal
108+
? [restrictToWindowEdges]
109+
: [restrictToWindowEdges, restrictToVerticalAxis];
110+
93111
return (
94112
<>
95113
<DndContext
96114
sensors={sensors}
97115
collisionDetection={closestCenter}
98116
onDragEnd={handleDragEnd}
99-
modifiers={[restrictToWindowEdges, restrictToVerticalAxis]}
117+
modifiers={modifiers}
100118
>
101-
<SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
102-
<Flex direction="column" gap={4} className={extraClasses}>
103-
{itemsWithIds.map(({ id, item }, index) => (
104-
<SortableItem
105-
OpenModal={() => {
106-
setModalText(item.text);
107-
onOpen();
108-
}}
109-
key={id}
110-
id={id}
111-
index={index}
112-
isEditable={props.isEditable}
113-
isDisabled={!!props.isDisabled}
114-
synthetic={item.synthetic && !!revealSynthetic}
115-
>
116-
<button
117-
className="w-full text-left"
118-
aria-label="show full text"
119-
onClick={() => {
119+
<SortableContext items={itemsWithIds} strategy={sortingStrategy}>
120+
{isHorizontal ? (
121+
<Grid
122+
templateColumns={`repeat(${messagesPerRow}, 1fr)`}
123+
gap={4}
124+
className={extraClasses}
125+
>
126+
{itemsWithIds.map(({ id, item }, index) => (
127+
<SortableItem
128+
OpenModal={() => {
129+
setModalText(item.text);
130+
onOpen();
131+
}}
132+
key={id}
133+
id={id}
134+
index={index}
135+
isEditable={props.isEditable}
136+
isDisabled={!!props.isDisabled}
137+
synthetic={item.synthetic && !!revealSynthetic}
138+
>
139+
<button
140+
className="w-full text-left"
141+
aria-label="show full text"
142+
onClick={() => {
143+
setModalText(item.text);
144+
onOpen();
145+
}}
146+
>
147+
<CollapsableText text={item.text} disableCollapse={removeContentLimit} />
148+
</button>
149+
</SortableItem>
150+
))}
151+
</Grid>
152+
) : (
153+
<Flex direction="column" gap={4} className={extraClasses}>
154+
{itemsWithIds.map(({ id, item }, index) => (
155+
<SortableItem
156+
OpenModal={() => {
120157
setModalText(item.text);
121158
onOpen();
122159
}}
160+
key={id}
161+
id={id}
162+
index={index}
163+
isEditable={props.isEditable}
164+
isDisabled={!!props.isDisabled}
165+
synthetic={item.synthetic && !!revealSynthetic}
123166
>
124-
<CollapsableText text={item.text} />
125-
</button>
126-
</SortableItem>
127-
))}
128-
</Flex>
167+
<button
168+
className="w-full text-left"
169+
aria-label="show full text"
170+
onClick={() => {
171+
setModalText(item.text);
172+
onOpen();
173+
}}
174+
>
175+
<CollapsableText text={item.text} disableCollapse={removeContentLimit} />
176+
</button>
177+
</SortableItem>
178+
))}
179+
</Flex>
180+
)}
129181
</SortableContext>
130182
</DndContext>
131183
<Modal

‎website/src/components/Tasks/EvaluateTask.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
44
import { MessageConversation } from "src/components/Messages/MessageConversation";
55
import { Sortable } from "src/components/Sortable/Sortable";
66
import { SurveyCard } from "src/components/Survey/SurveyCard";
7+
import { RankingDisplayPreferences } from "src/components/Tasks/RankingDisplayPreferences";
78
import { TaskSurveyProps } from "src/components/Tasks/Task";
89
import { TaskHeader } from "src/components/Tasks/TaskHeader";
10+
import { useRankingDisplayPreferences } from "src/hooks/tasks/useRankingDisplayPreferences";
911
import { Message } from "src/types/Conversation";
1012
import { TaskType } from "src/types/Task";
1113
import { EvaluateTaskReply } from "src/types/TaskResponses";
@@ -22,6 +24,8 @@ export const EvaluateTask = ({
2224
const cardColor = useColorModeValue("gray.50", "gray.800");
2325
const [ranking, setRanking] = useState<number[] | null>(null);
2426
const [notRankable, setNotRankable] = useState(false);
27+
const { preferences } = useRankingDisplayPreferences();
28+
2529
let messages: Message[] = [];
2630
if (task.type !== TaskType.rank_initial_prompts) {
2731
messages = task.conversation.messages;
@@ -49,6 +53,10 @@ export const EvaluateTask = ({
4953
// @notmd: I haven't test `rank_initial_prompts` type yet
5054
const sortableItems =
5155
task.type === TaskType.rank_initial_prompts ? (task.prompts as unknown as Message[]) : task.reply_messages;
56+
57+
// Calculate max messages per row based on the number of items
58+
const maxMessagesPerRow = Math.min(sortableItems.length, 6);
59+
5260
return (
5361
<div data-cy="task" data-task-type="evaluate-task">
5462
<Box mb="4">
@@ -57,13 +65,22 @@ export const EvaluateTask = ({
5765
<Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
5866
<MessageConversation messages={messages} highlightLastMessage />
5967
</Box>
60-
<Box mt="8">
68+
69+
{/* Display Preferences Controls */}
70+
<Box mt="4">
71+
<RankingDisplayPreferences maxMessagesPerRow={maxMessagesPerRow} />
72+
</Box>
73+
74+
<Box mt="4">
6175
<Sortable
6276
items={sortableItems}
6377
isDisabled={isDisabled}
6478
isEditable={isEditable}
6579
revealSynthetic={task.reveal_synthetic}
6680
onChange={setRanking}
81+
displayMode={preferences.displayMode}
82+
messagesPerRow={preferences.messagesPerRow}
83+
removeContentLimit={preferences.removeContentLimit}
6784
/>
6885
<Checkbox
6986
size="lg"

0 commit comments

Comments
 (0)