Merge pull request #1040 from notmd/995_available_task

Display number of available tasks

website/public/locales/en/tasks.json

@@ -77,5 +77,6 @@
     "label": "Classify Assistant Reply",
     "desc": "Provide labels for a prompt.",
     "overview": "Read the following conversation and then answer the question about the last reply in the discussion."
-  }
+  },
+  "available_task_count": "{{count}} tasks available"
 }

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.Evaluate]: [
-    TaskType.rank_initial_prompts,
-    TaskType.rank_prompter_replies,
-    TaskType.rank_assistant_replies,
+  [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: 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/pages/dashboard.tsx

@@ -5,8 +5,9 @@ import { useEffect, useMemo, useState } from "react";
 import { LeaderboardWidget, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { get } from "src/lib/api";
-import { AvailableTasks, TaskCategory, TaskType } from "src/types/Task";
+import { AvailableTasks, TaskCategory } from "src/types/Task";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import { TaskCategoryItem } from "src/components/Dashboard/TaskOption";
 import useSWR from "swr";
 
 const Dashboard = () => {
@@ -59,4 +60,4 @@ const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
   Object.entries(availableTasks)
     .filter(([, count]) => count > 0)
     .sort((a, b) => b[1] - a[1])
-    .map(([taskType]) => taskType) as TaskType[];
+    .map(([taskType, count]) => ({ taskType, count })) as TaskCategoryItem[];

website/src/styles/Theme/components/Badge.ts

@@ -0,0 +1,14 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+
+export const badgeTheme = defineStyleConfig({
+  baseStyle: {
+    borderRadius: "lg",
+    px: 2,
+    py: 0.5,
+    fontWeight: "600",
+  },
+  defaultProps: {
+    variant: "solid",
+    colorScheme: "blue",
+  },
+});

website/src/styles/Theme/index.ts

@@ -2,6 +2,7 @@ import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { Styles } from "@chakra-ui/theme-tools";
 
 import { colors } from "./colors";
+import { badgeTheme } from "./components/Badge";
 import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 
@@ -12,6 +13,7 @@ const config: ThemeConfig = {
 };
 
 const components = {
+  Badge: badgeTheme,
   Container: containerTheme,
   Card: cardTheme,
 };