Merge branch 'main' into cleanup

website/src/components/CloudflareCaptcha.tsx

@@ -0,0 +1,20 @@
+import { useColorMode } from "@chakra-ui/react";
+import { Turnstile, TurnstileInstance, TurnstileProps } from "@marsidev/react-turnstile";
+import { forwardRef } from "react";
+
+export const CloudFlareCaptcha = forwardRef<TurnstileInstance, Omit<TurnstileProps, "siteKey">>((props, ref) => {
+  const { colorMode } = useColorMode();
+  return (
+    <Turnstile
+      ref={ref}
+      {...props}
+      siteKey={process.env.NEXT_PUBLIC_CLOUDFLARE_CAPTCHA_SITE_KEY}
+      options={{
+        theme: colorMode,
+        ...props.options,
+      }}
+    />
+  );
+});
+
+CloudFlareCaptcha.displayName = "CloudFlareCaptcha";

website/src/components/CollapsableText.tsx

@@ -51,7 +51,7 @@ export const CollapsableText = ({
             <ModalContent alignItems="center">
               <ModalHeader>Full Text</ModalHeader>
               <ModalCloseButton />
-              <ModalBody>{text}</ModalBody>
+              <ModalBody style={{ whiteSpace: "pre-line" }}>{text}</ModalBody>
             </ModalContent>
           </ModalOverlay>
         </Modal>

website/src/components/Dashboard/TaskOption.tsx

@@ -1,5 +1,7 @@
 import {
+  Badge,
   Box,
+  Card,
   Flex,
   GridItem,
   Heading,
@@ -8,7 +10,6 @@ import {
   SimpleGrid,
   Spacer,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
@@ -19,19 +20,20 @@ import { TaskCategory, TaskInfo, TaskType } from "src/types/Task";
 
 import { TaskCategoryLabels, TaskInfos } from "../Tasks/TaskTypes";
 
+export type TaskCategoryItem = { taskType: TaskType; count: number };
+
 export interface TasksOptionProps {
-  content: Partial<Record<TaskCategory, TaskType[]>>;
+  content: Partial<Record<TaskCategory, TaskCategoryItem[]>>;
 }
 
 export const TaskOption = ({ content }: TasksOptionProps) => {
   const { t } = useTranslation(["dashboard", "tasks"]);
-  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const taskInfoMap = useMemo(
     () =>
       Object.values(content)
         .flat()
-        .reduce((obj, taskType) => {
+        .reduce((obj, { taskType }) => {
           obj[taskType] = TaskInfos.filter((t) => t.type === taskType).pop();
           return obj;
         }, {} as Record<TaskType, TaskInfo>),
@@ -40,7 +42,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 
   return (
     <Box className="flex flex-col gap-14">
-      {Object.entries(content).map(([category, taskTypes]) => (
+      {Object.entries(content).map(([category, items]) => (
         <div key={category}>
           <Flex>
             <Heading size="lg" className="pb-4">
@@ -52,24 +54,25 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
             </ExternalLink>
           </Flex>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
-            {taskTypes
-              .map((taskType) => taskInfoMap[taskType])
+            {items
+              .map(({ taskType, count }) => ({ ...taskInfoMap[taskType], count }))
               .map((item) => (
                 <Link key={category + item.id} href={item.pathname}>
-                  <GridItem
-                    bg={backgroundColor}
-                    borderRadius="xl"
-                    boxShadow="base"
-                    className="flex flex-col justify-between h-full"
-                  >
-                    <Flex className="p-6 pb-10" flexDir="column" gap="3">
-                      <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
-                      <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                  <GridItem as={Card} height="100%" justifyContent="space-between">
+                    <Flex px="6" pt="6" flexDir="column" gap="3" justifyContent="space-between" height="100%">
+                      <Flex flexDir="column" gap="3">
+                        <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
+                        <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                      </Flex>
+                      <Box>
+                        <Badge textTransform="none">{t("tasks:available_task_count", { count: item.count })}</Badge>
+                      </Box>
                     </Flex>
                     <Text
                       fontWeight="bold"
                       color="white"
                       borderBottomRadius="xl"
+                      mt="6"
                       className="px-6 py-2 transition-colors duration-300 bg-blue-500 hover:bg-blue-600"
                     >
                       {t("go")} -&gt;
@@ -85,12 +88,20 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 };
 
 export const allTaskOptions: TasksOptionProps["content"] = {
-  [TaskCategory.Random]: [TaskType.random],
-  [TaskCategory.Create]: [TaskType.initial_prompt, TaskType.prompter_reply, TaskType.assistant_reply],
+  [TaskCategory.Random]: [{ taskType: TaskType.random, count: 0 }],
+  [TaskCategory.Create]: [
+    { taskType: TaskType.initial_prompt, count: 0 },
+    { taskType: TaskType.prompter_reply, count: 0 },
+    { taskType: TaskType.assistant_reply, count: 0 },
+  ],
   [TaskCategory.Evaluate]: [
-    TaskType.rank_initial_prompts,
-    TaskType.rank_prompter_replies,
-    TaskType.rank_assistant_replies,
+    { taskType: TaskType.rank_initial_prompts, count: 0 },
+    { taskType: TaskType.rank_prompter_replies, count: 0 },
+    { taskType: TaskType.rank_assistant_replies, count: 0 },
+  ],
+  [TaskCategory.Label]: [
+    { taskType: TaskType.label_initial_prompt, count: 0 },
+    { taskType: TaskType.label_prompter_reply, count: 0 },
+    { taskType: TaskType.label_assistant_reply, count: 0 },
   ],
-  [TaskCategory.Label]: [TaskType.label_initial_prompt, TaskType.label_prompter_reply, TaskType.label_assistant_reply],
 };

website/src/components/Messages.tsx

@@ -1,23 +0,0 @@
-import { Box, forwardRef, useColorMode } from "@chakra-ui/react";
-import { useMemo } from "react";
-import { Message } from "src/types/Conversation";
-
-export const MessageView = forwardRef<Partial<Message>, "div">((message: Partial<Message>, ref) => {
-  const { colorMode } = useColorMode();
-
-  const bgColor = useMemo(() => {
-    if (colorMode === "light") {
-      return message.is_assistant ? "gray.800" : "blue.600";
-    } else {
-      return message.is_assistant ? "black" : "blue.600";
-    }
-  }, [colorMode, message.is_assistant]);
-
-  return (
-    <Box bg={bgColor} ref={ref} className={`p-4 rounded-md text-white whitespace-pre-wrap`}>
-      {message.text}
-    </Box>
-  );
-});
-
-MessageView.displayName = "MessageView";

website/src/components/Tasks/LabelTask/LabelTask.tsx

@@ -1,13 +1,11 @@
 import { Box, useBoolean, useColorModeValue } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
 import { useEffect, useState } from "react";
-import { MessageView } from "src/components/Messages";
 import { LabelInputGroup } from "src/components/Messages/LabelInputGroup";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskHeader } from "src/components/Tasks/TaskHeader";
-import { TaskType } from "src/types/Task";
 import { LabelTaskType } from "src/types/Tasks";
 
 const isRequired = (labelName: string, requiredLabels?: string[]) => {
@@ -56,15 +54,9 @@ export const LabelTask = ({
       <TwoColumnsWithCards>
         <>
           <TaskHeader taskType={taskType} />
-          {task.type !== TaskType.label_initial_prompt ? (
-            <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
-              <MessageTable messages={task.conversation.messages} highlightLastMessage />
-            </Box>
-          ) : (
-            <Box mt="4">
-              <MessageView text={task.prompt} is_assistant={false} id={task.message_id} emojis={{}} user_emojis={[]} />
-            </Box>
-          )}
+          <Box mt="4" p={[4, 6]} borderRadius="lg" bg={cardColor}>
+            <MessageTable messages={task.conversation.messages} highlightLastMessage />
+          </Box>
         </>
         <LabelInputGroup
           labels={task.labels}