wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-05 17:30:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #635 from Klotske/add-empty-state

Browse Source 
Add empty state & tweak loading screen
This commit is contained in:
Keith Stevens
2023-01-12 11:24:27 +09:00
committed by GitHub
parent f58f473602 802701d776
commit cacfd02c51
12 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/EmptyState.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
import { FiFileText } from "react-icons/fi";
import { IconType } from "react-icons/lib";
type EmptyStateProps = {
text: string;
icon: IconType;
};
export const EmptyState = (props: EmptyStateProps) => {
const { colorMode } = useColorMode();
const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
return (
<div className={`p-12 ${mainBgClasses}`}>
<Center>
<div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
<props.icon className="mx-auto h-16 w-16" />
<Text fontFamily="inter" fontSize="2xl">
{props.text}
</Text>
</div>
</Center>
</div>
);
};
export const TaskEmptyState = () => {
return <EmptyState text="No tasks found!" icon={FiFileText} />;
};
website/src/components/Loading/LoadingScreen.jsx
+6 -4
View File
@@ -1,13 +1,15 @@
import { Box, Progress, Text } from "@chakra-ui/react";
import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
export const LoadingScreen = ({ text = "Loading..." } = {}) => {
const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white");
return (
<Box width="full">
<Box width="full" className={mainBgClasses}>
<Progress size="sm" isIndeterminate />
{text && (
<Box width="full">
<Center width="full" className="p-12">
<Text fontFamily="Inter">{text}</Text>
</Box>
</Center>
)}
</Box>
);
website/src/pages/create/assistant_reply.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const AssistantReply = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/create/initial_prompt.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const InitialPrompt = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/create/user_reply.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import Head from "next/head";
import { Container } from "src/components/Container";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const UserReply = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/evaluate/rank_assistant_replies.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import Head from "next/head";
import { Container } from "src/components/Container";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankAssistantReplies = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/evaluate/rank_initial_prompts.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import Head from "next/head";
import { Container } from "src/components/Container";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankInitialPrompts = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/evaluate/rank_user_replies.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import Head from "next/head";
import { Container } from "src/components/Container";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankUserReplies = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/label/label_assistant_reply.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelAssistantReply = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/label/label_initial_prompt.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelInitialPrompt = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/label/label_prompter_reply.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelPrompterReply = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (
website/src/pages/tasks/random.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Container } from "@chakra-ui/react";
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
@@ -12,7 +12,7 @@ const RandomTask = () => {
}
if (tasks.length === 0) {
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
return <TaskEmptyState />;
}
return (