Merge branch 'main' into typesafe_i18n

website/src/components/CallToAction.tsx

@@ -1,9 +1,10 @@
 import { Box, Link, Text, useColorMode } from "@chakra-ui/react";
+import { Github } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useId } from "react";
-import { FaDiscord, FaGithub } from "react-icons/fa";
 
 import { Container } from "./Container";
+import { Discord } from "./Icons/Discord";
 
 const CIRCLE_HEIGHT = 558;
 const CIRCLE_WIDTH = 558;
@@ -70,7 +71,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <FaDiscord size={25} />
+                <Discord size={25} />
                 <Text as="span" className="text-lg ml-3">
                   {t("discord")}
                 </Text>
@@ -81,7 +82,7 @@ export function CallToAction() {
                 type="button"
                 className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
               >
-                <FaGithub size={25} />
+                <Github size={25} />
                 <Text as="span" className="text-lg ml-3">
                   {t("github")}
                 </Text>

website/src/components/DataTable.tsx

@@ -25,8 +25,8 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { Filter } from "lucide-react";
 import { ChangeEvent, ReactNode } from "react";
-import { FaFilter } from "react-icons/fa";
 import { useDebouncedCallback } from "use-debounce";
 
 export type DataTableColumnDef<T> = ColumnDef<T> & {
@@ -148,7 +148,7 @@ const FilterModal = ({
     <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
       <PopoverTrigger>
         <Button variant={"unstyled"} ml="2">
-          <FaFilter></FaFilter>
+          <Filter size="1em"></Filter>
         </Button>
       </PopoverTrigger>
       <PopoverContent w="fit-content">

website/src/components/EmptyState.tsx

@@ -1,11 +1,10 @@
 import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import { AlertTriangle, LucideIcon } from "lucide-react";
 import NextLink from "next/link";
-import { FiAlertTriangle } from "react-icons/fi";
-import { IconType } from "react-icons/lib";
 
 type EmptyStateProps = {
   text: string;
-  icon: IconType;
+  icon: LucideIcon;
 };
 
 export const EmptyState = (props: EmptyStateProps) => {
@@ -25,5 +24,5 @@ export const EmptyState = (props: EmptyStateProps) => {
 };
 
 export const TaskEmptyState = () => {
-  return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
+  return <EmptyState text="Looks like no tasks were found." icon={AlertTriangle} />;
 };

website/src/components/FlaggableElement.tsx

@@ -22,8 +22,8 @@ import {
 } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import { AlertCircle } from "lucide-react";
 import { useEffect, useReducer } from "react";
-import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message } from "src/types/Conversation";
@@ -154,7 +154,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
           <Box>
             <PopoverTrigger>
               <Box as="button" display="flex" alignItems="center" justifyContent="center" borderRadius="full" p="1">
-                <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
+                <AlertCircle size="20" className="text-red-400" aria-hidden="true" />
               </Box>
             </PopoverTrigger>
           </Box>

website/src/components/Header/Header.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, Flex, Text } from "@chakra-ui/react";
+import { User } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
-import { FaUser } from "react-icons/fa";
 import { LanguageSelector } from "src/components/LanguageSelector";
 
 import { UserMenu } from "./UserMenu";
@@ -17,7 +17,7 @@ function AccountButton() {
   return (
     <Link href="/auth/signin" aria-label="Home">
       <Flex alignItems="center">
-        <Button variant="outline" leftIcon={<FaUser />}>
+        <Button variant="outline" leftIcon={<User size={"20"} />}>
           Sign in
         </Button>
       </Flex>

website/src/components/Header/UserMenu.tsx

@@ -11,11 +11,11 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { AlertTriangle, Layout, LogOut, Settings, Shield } from "lucide-react";
 import NextLink from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import React, { ElementType, useCallback } from "react";
-import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
 interface MenuOption {
   name: string;
@@ -39,19 +39,19 @@ export function UserMenu() {
     {
       name: t("dashboard"),
       href: "/dashboard",
-      icon: FiLayout,
+      icon: Layout,
       isExternal: false,
     },
     {
       name: t("account_settings"),
       href: "/account",
-      icon: FiSettings,
+      icon: Settings,
       isExternal: false,
     },
     {
       name: t("report_a_bug"),
       href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose",
-      icon: FiAlertTriangle,
+      icon: AlertTriangle,
       isExternal: true,
     },
   ];
@@ -60,7 +60,7 @@ export function UserMenu() {
     options.unshift({
       name: t("admin_dashboard"),
       href: "/admin",
-      icon: FiShield,
+      icon: Shield,
       isExternal: false,
     });
   }
@@ -93,7 +93,7 @@ export function UserMenu() {
               _hover={{ textDecoration: "none" }}
             >
               <MenuItem gap="3" borderRadius="md" p="4">
-                <item.icon className="text-blue-500" aria-hidden="true" />
+                <item.icon size="1em" className="text-blue-500" aria-hidden="true" />
                 <Text>{item.name}</Text>
               </MenuItem>
             </Link>
@@ -101,7 +101,7 @@ export function UserMenu() {
         </MenuGroup>
         <MenuDivider />
         <MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
-          <FiLogOut className="text-blue-500" aria-hidden="true" />
+          <LogOut size="1em" className="text-blue-500" aria-hidden="true" />
           <Text>{t("sign_out")}</Text>
         </MenuItem>
       </MenuList>

website/src/components/Icons/Discord.tsx

@@ -0,0 +1,16 @@
+import { LucideIcon } from "lucide-react";
+
+export const Discord: LucideIcon = ({ size = 24, ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 127.14 96.36"
+      fill="currentColor"
+      height={size}
+      width={size}
+      {...rest}
+    >
+      <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
+    </svg>
+  );
+};

website/src/components/LanguageSelector/LanguageSelector.tsx

@@ -8,12 +8,13 @@ const LanguageSelector = () => {
   const router = useRouter();
   const { i18n } = useTranslation();
 
-  const { language: currentLanguage } = i18n;
-  const languageNames = useMemo(() => {
-    return new Intl.DisplayNames([currentLanguage], {
-      type: "language",
-    });
-  }, [currentLanguage]);
+  // Memo the set of locales and their display names.
+  const localesAndNames = useMemo(() => {
+    return router.locales.map((locale) => ({
+      locale,
+      name: new Intl.DisplayNames([locale], { type: "language" }).of(locale),
+    }));
+  }, [router.locales]);
 
   const languageChanged = useCallback(
     async (option) => {
@@ -25,12 +26,12 @@ const LanguageSelector = () => {
     [router]
   );
 
-  const locales = router.locales;
+  const { language: currentLanguage } = i18n;
   return (
     <Select onChange={languageChanged} defaultValue={currentLanguage}>
-      {locales.map((locale) => (
+      {localesAndNames.map(({ locale, name }) => (
         <option key={locale} value={locale}>
-          {languageNames.of(locale) ?? locale}
+          {name}
         </option>
       ))}
     </Select>

website/src/components/Layout.tsx

@@ -1,8 +1,8 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import { Box, Grid } from "@chakra-ui/react";
+import { Activity, BarChart2, Layout, MessageSquare, Users } from "lucide-react";
 import type { NextPage } from "next";
-import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers, FiActivity } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { SlimFooter } from "./Dashboard/SlimFooter";
@@ -38,19 +38,19 @@ export const getDashboardLayout = (page: React.ReactElement) => (
           label: "Dashboard",
           pathname: "/dashboard",
           desc: "Dashboard Home",
-          icon: FiLayout,
+          icon: Layout,
         },
         {
           label: "Messages",
           pathname: "/messages",
           desc: "Messages Dashboard",
-          icon: FiMessageSquare,
+          icon: MessageSquare,
         },
         {
           label: "Leaderboard",
           pathname: "/leaderboard",
           desc: "User Leaderboard",
-          icon: FiBarChart2,
+          icon: BarChart2,
         },
       ]}
     >
@@ -73,13 +73,13 @@ export const getAdminLayout = (page: React.ReactElement) => (
           label: "Users",
           pathname: "/admin",
           desc: "Users Dashboard",
-          icon: FiUsers,
+          icon: Users,
         },
         {
           label: "Status",
           pathname: "/admin/status",
           desc: "Status Dashboard",
-          icon: FiActivity,
+          icon: Activity,
         },
       ]}
     >

website/src/components/Messages/MessageTable.tsx

@@ -5,13 +5,19 @@ import { Message } from "src/types/Conversation";
 interface MessageTableProps {
   messages: Message[];
   enableLink?: boolean;
+  highlightLastMessage?: boolean;
 }
 
-export function MessageTable({ messages, enableLink }: MessageTableProps) {
+export function MessageTable({ messages, enableLink, highlightLastMessage }: MessageTableProps) {
   return (
     <Stack spacing="4">
-      {messages.map((item) => (
-        <MessageTableEntry enabled={enableLink} item={item} key={item.id + item.frontend_message_id} />
+      {messages.map((item, idx) => (
+        <MessageTableEntry
+          enabled={enableLink}
+          item={item}
+          key={item.id + item.frontend_message_id}
+          highlight={highlightLastMessage && idx === messages.length - 1}
+        />
       ))}
     </Stack>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -1,14 +1,15 @@
-import { Avatar, Box, HStack, LinkBox, useBreakpoint, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
+import { Avatar, Box, HStack, useBreakpointValue, useColorModeValue } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useMemo } from "react";
 import { FlaggableElement } from "src/components/FlaggableElement";
 import { Message } from "src/types/Conversation";
+import { colors } from "styles/Theme/colors";
 
 interface MessageTableEntryProps {
   item: Message;
   enabled?: boolean;
+  highlight?: boolean;
 }
 
 export function MessageTableEntry(props: MessageTableEntryProps) {
@@ -37,6 +38,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
     ),
     [borderColor, inlineAvatar, item.is_assistant]
   );
+  const highlightColor = useColorModeValue(colors.light.highlight, colors.dark.highlight);
 
   return (
     <FlaggableElement message={item}>
@@ -48,6 +50,8 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
           p="4"
           borderRadius="md"
           bg={item.is_assistant ? backgroundColor : backgroundColor2}
+          outline={props.highlight && "2px solid black"}
+          outlineColor={highlightColor}
           onClick={props.enabled && goToMessage}
           _hover={props.enabled && { cursor: "pointer", opacity: 0.9 }}
           whiteSpace="pre-wrap"

website/src/components/SideMenu.tsx

@@ -1,15 +1,14 @@
 import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { LucideIcon, Sun } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { FiSun } from "react-icons/fi";
-import { IconType } from "react-icons/lib";
 import { colors } from "styles/Theme/colors";
 
 export interface MenuButtonOption {
   label: string;
   pathname: string;
   desc: string;
-  icon: IconType;
+  icon: LucideIcon;
 }
 
 export interface SideMenuProps {
@@ -47,7 +46,7 @@ export function SideMenu(props: SideMenuProps) {
                   bg={router.pathname === item.pathname ? "blue.500" : null}
                   _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
                 >
-                  <item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                  <item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : null} />
                   <Text
                     fontWeight="normal"
                     color={router.pathname === item.pathname ? "white" : null}
@@ -63,7 +62,7 @@ export function SideMenu(props: SideMenuProps) {
         <div>
           <Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
             <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
-              <FiSun />
+              <Sun size={"1em"} />
               <Text fontWeight="normal" className="hidden lg:block">
                 {colorMode === "light" ? "Dark Mode" : "Light Mode"}
               </Text>

website/src/components/Sortable/SortableItem.tsx

@@ -1,8 +1,8 @@
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
 import { PropsWithChildren, useState } from "react";
-import { RxDragHandleDots2 } from "react-icons/rx";
 
 export const SortableItem = ({
   children,
@@ -45,7 +45,7 @@ export const SortableItem = ({
       style={style}
       shadow="base"
     >
-      <Box pr="4">{isEditable ? <RxDragHandleDots2 size="20px" /> : `${index + 1}.`}</Box>
+      <Box pr="4">{isEditable ? <GripVertical size="20px" /> : `${index + 1}.`}</Box>
       {children}
     </Box>
   );

website/src/components/Survey/TaskControls.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
-import { FiEdit2 } from "react-icons/fi";
+import { Edit2 } from "lucide-react";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -36,7 +36,13 @@ export const TaskControls = (props: TaskControlsProps) => {
         {props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
           <>
             <Tooltip label="Edit">
-              <IconButton size="lg" data-cy="edit" aria-label="edit" onClick={props.onEdit} icon={<FiEdit2 />} />
+              <IconButton
+                size="lg"
+                data-cy="edit"
+                aria-label="edit"
+                onClick={props.onEdit}
+                icon={<Edit2 size="1em" />}
+              />
             </Tooltip>
             <SubmitButton
               colorScheme="green"

website/src/components/Tasks/CreateTask.tsx

@@ -36,7 +36,7 @@ export const CreateTask = ({
           <TaskHeader taskType={taskType} />
           {task.conversation ? (
             <Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
-              <MessageTable messages={task.conversation.messages} />
+              <MessageTable messages={task.conversation.messages} highlightLastMessage />
             </Box>
           ) : null}
         </>

website/src/components/Tasks/EvaluateTask.tsx

@@ -38,7 +38,7 @@ export const EvaluateTask = ({
         <SurveyCard>
           <TaskHeader taskType={taskType} />
           <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
-            <MessageTable messages={messages} />
+            <MessageTable messages={messages} highlightLastMessage />
           </Box>
           <Sortable
             items={task[sortables]}

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

@@ -53,6 +53,7 @@ export const LabelTask = ({
                     message_id: task.message_id,
                   },
                 ]}
+                highlightLastMessage
               />
             </Box>
           ) : (

website/src/components/Tasks/TaskHeader/TaskHeader.tsx

@@ -1,5 +1,5 @@
 import { HStack, IconButton, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
-import { FiHelpCircle } from "react-icons/fi";
+import { HelpCircle } from "lucide-react";
 import type { TaskInfo } from "src/components/Tasks/TaskTypes";
 
 interface TaskHeaderProps {
@@ -22,7 +22,7 @@ const TaskHeader = ({ taskType }: TaskHeaderProps) => {
           {taskType.label}
         </Text>
         <Link href={taskType.help_link} isExternal>
-          <IconButton variant="ghost" aria-label="More Information" icon={<FiHelpCircle />} />
+          <IconButton variant="ghost" aria-label="More Information" icon={<HelpCircle size="1em" />} />
         </Link>
       </HStack>
       <Text fontSize="md" color={labelColor}>

website/src/components/UserTable.tsx

@@ -1,8 +1,8 @@
 import { IconButton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
+import { Pencil } from "lucide-react";
 import Link from "next/link";
 import { memo, useState } from "react";
-import { FaPen } from "react-icons/fa";
 import { get } from "src/lib/api";
 import { FetchUsersResponse } from "src/lib/oasst_api_client";
 import type { User } from "src/types/Users";
@@ -49,7 +49,7 @@ const columns: DataTableColumnDef<User>[] = [
         as={Link}
         href={`/admin/manage_user/${getValue()}`}
         aria-label="Manage"
-        icon={<FaPen></FaPen>}
+        icon={<Pencil size="1em"></Pencil>}
       ></IconButton>
     ),
     header: "Update",