From ac5a0e8157755380f979592f48e990b4b6d74857 Mon Sep 17 00:00:00 2001
From: Keith Stevens <fozziethebeat@gmail.com>
Date: Tue, 17 Jan 2023 15:11:33 +0900
Subject: [PATCH] Adding links to external documentation for tasks and in
 footers

---
 .../src/components/Dashboard/SlimFooter.tsx   |  1 +
 website/src/components/Footer.tsx             |  8 ++++-
 website/src/components/Tasks/CreateTask.tsx   | 11 ++----
 website/src/components/Tasks/EvaluateTask.tsx | 15 +++-----
 .../components/Tasks/LabelTask/LabelTask.tsx  | 14 ++------
 .../Tasks/TaskHeader/TaskHeader.tsx           | 35 +++++++++++++++++++
 .../src/components/Tasks/TaskHeader/index.tsx |  1 +
 website/src/components/Tasks/TaskTypes.tsx    | 18 ++++++++++
 8 files changed, 71 insertions(+), 32 deletions(-)
 create mode 100644 website/src/components/Tasks/TaskHeader/TaskHeader.tsx
 create mode 100644 website/src/components/Tasks/TaskHeader/index.tsx

diff --git a/website/src/components/Dashboard/SlimFooter.tsx b/website/src/components/Dashboard/SlimFooter.tsx
index 5a7b093c..1c109eb4 100644
--- a/website/src/components/Dashboard/SlimFooter.tsx
+++ b/website/src/components/Dashboard/SlimFooter.tsx
@@ -20,6 +20,7 @@ export function SlimFooter() {
               <FooterLink href="/terms-of-service" label="Terms of Service" />
               <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
               <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+              <FooterLink href="https://projects.laion.ai/Open-Assistant/" label="Docs" />
             </Box>
           </nav>
         </Box>
diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index b22653e9..b239708a 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -42,7 +42,7 @@ export function Footer() {
           </Flex>
 
           <nav>
-            <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} alignItems="center" fontSize="sm">
+            <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} fontSize="sm">
               <Flex direction="column" alignItems={["center", "start"]}>
                 <Text fontWeight="bold" color={textColor}>
                   Legal
@@ -57,6 +57,12 @@ export function Footer() {
                 <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
                 <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
               </Flex>
+              <Flex direction="column" alignItems={["center", "start"]}>
+                <Text fontWeight="bold" color={textColor}>
+                  About
+                </Text>
+                <FooterLink href="https://projects.laion.ai/Open-Assistant" label="Docs" />
+              </Flex>
             </Box>
           </nav>
         </Box>
diff --git a/website/src/components/Tasks/CreateTask.tsx b/website/src/components/Tasks/CreateTask.tsx
index 79d081ce..6cbead52 100644
--- a/website/src/components/Tasks/CreateTask.tsx
+++ b/website/src/components/Tasks/CreateTask.tsx
@@ -4,6 +4,7 @@ import { MessageTable } from "src/components/Messages/MessageTable";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
+import { TaskHeader } from "src/components/Tasks/TaskHeader";
 
 export const CreateTask = ({
   task,
@@ -14,7 +15,6 @@ export const CreateTask = ({
 }: TaskSurveyProps<{ text: string }>) => {
   const cardColor = useColorModeValue("gray.50", "gray.800");
   const titleColor = useColorModeValue("gray.800", "gray.300");
-  const labelColor = useColorModeValue("gray.600", "gray.400");
 
   const [inputText, setInputText] = useState("");
   const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -33,14 +33,7 @@ export const CreateTask = ({
     <div data-cy="task" data-task-type="create-task">
       <TwoColumnsWithCards>
         <>
-          <Stack spacing="1">
-            <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-              {taskType.label}
-            </Text>
-            <Text fontSize="md" color={labelColor}>
-              {taskType.overview}
-            </Text>
-          </Stack>
+          <TaskHeader taskType={taskType} />
           {task.conversation ? (
             <Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
               <MessageTable messages={task.conversation.messages} />
diff --git a/website/src/components/Tasks/EvaluateTask.tsx b/website/src/components/Tasks/EvaluateTask.tsx
index 55aa4b3c..6ec92a96 100644
--- a/website/src/components/Tasks/EvaluateTask.tsx
+++ b/website/src/components/Tasks/EvaluateTask.tsx
@@ -1,19 +1,19 @@
-import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
+import { TaskHeader } from "src/components/Tasks/TaskHeader";
 
 export const EvaluateTask = ({
   task,
+  taskType,
   isEditable,
   isDisabled,
   onReplyChanged,
 }: TaskSurveyProps<{ ranking: number[] }>) => {
   const cardColor = useColorModeValue("gray.50", "gray.800");
-  const titleColor = useColorModeValue("gray.800", "gray.300");
-  const labelColor = useColorModeValue("gray.600", "gray.400");
 
   let messages = [];
   if (task.conversation) {
@@ -36,14 +36,7 @@ export const EvaluateTask = ({
     <div data-cy="task" data-task-type="evaluate-task">
       <Box mb="4">
         <SurveyCard>
-          <Stack spacing="1">
-            <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-              Instructions
-            </Text>
-            <Text fontSize="md" color={labelColor}>
-              Given the following {sortables}, sort them from best to worst, best being first, worst being last.
-            </Text>
-          </Stack>
+          <TaskHeader taskType={taskType} />
           <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
             <MessageTable messages={messages} />
           </Box>
diff --git a/website/src/components/Tasks/LabelTask/LabelTask.tsx b/website/src/components/Tasks/LabelTask/LabelTask.tsx
index 7299732e..7d6394df 100644
--- a/website/src/components/Tasks/LabelTask/LabelTask.tsx
+++ b/website/src/components/Tasks/LabelTask/LabelTask.tsx
@@ -1,5 +1,4 @@
-import { Box } from "@chakra-ui/react";
-import { Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
@@ -7,6 +6,7 @@ import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";
 import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
 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";
 
 export const LabelTask = ({
@@ -36,20 +36,12 @@ export const LabelTask = ({
   };
 
   const cardColor = useColorModeValue("gray.50", "gray.800");
-  const titleColor = useColorModeValue("gray.800", "gray.300");
-  const labelColor = useColorModeValue("gray.600", "gray.400");
 
   return (
     <div data-cy="task" data-task-type="label-task">
       <TwoColumnsWithCards>
         <>
-          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
-            {taskType.label}
-          </Text>
-          <Text fontSize="md" color={labelColor}>
-            {taskType.overview}
-          </Text>
-
+          <TaskHeader taskType={taskType} />
           {task.conversation ? (
             <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
               <MessageTable
diff --git a/website/src/components/Tasks/TaskHeader/TaskHeader.tsx b/website/src/components/Tasks/TaskHeader/TaskHeader.tsx
new file mode 100644
index 00000000..33c2bd97
--- /dev/null
+++ b/website/src/components/Tasks/TaskHeader/TaskHeader.tsx
@@ -0,0 +1,35 @@
+import { HStack, IconButton, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
+import { FiHelpCircle } from "react-icons/fi";
+import type { TaskInfo } from "src/components/Tasks/TaskTypes";
+
+interface TaskHeaderProps {
+  /**
+   * The `TaskInfo` representing how we present the task to a user.
+   */
+  taskType: TaskInfo;
+}
+
+/**
+ * Presents the Task label, instructions, and help link
+ */
+const TaskHeader = ({ taskType }: TaskHeaderProps) => {
+  const labelColor = useColorModeValue("gray.600", "gray.400");
+  const titleColor = useColorModeValue("gray.800", "gray.300");
+  return (
+    <Stack spacing="1">
+      <HStack>
+        <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+          {taskType.label}
+        </Text>
+        <Link href={taskType.help_link} isExternal>
+          <IconButton variant="ghost" aria-label="More Information" icon={<FiHelpCircle />} />
+        </Link>
+      </HStack>
+      <Text fontSize="md" color={labelColor}>
+        {taskType.overview}
+      </Text>
+    </Stack>
+  );
+};
+
+export { TaskHeader };
diff --git a/website/src/components/Tasks/TaskHeader/index.tsx b/website/src/components/Tasks/TaskHeader/index.tsx
new file mode 100644
index 00000000..d328d709
--- /dev/null
+++ b/website/src/components/Tasks/TaskHeader/index.tsx
@@ -0,0 +1 @@
+export * from "./TaskHeader";
diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx
index 4a85ccbd..868a9fb8 100644
--- a/website/src/components/Tasks/TaskTypes.tsx
+++ b/website/src/components/Tasks/TaskTypes.tsx
@@ -11,6 +11,7 @@ export interface TaskInfo {
   category: TaskCategory;
   pathname: string;
   type: string;
+  help_link: string;
   mode?: string;
   overview?: string;
   instruction?: string;
@@ -26,6 +27,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Help us improve Open Assistant by starting a random task.",
     category: TaskCategory.Tasks,
     pathname: "/tasks/random",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     type: "random",
     update_type: "random",
   },
@@ -35,6 +37,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Write initial prompts to help Open Assistant to try replying to diverse messages.",
     category: TaskCategory.Create,
     pathname: "/create/initial_prompt",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     type: "initial_prompt",
     overview: "Create an initial message to send to the assistant",
     instruction: "Provide the initial prompt",
@@ -45,6 +48,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
     category: TaskCategory.Create,
     pathname: "/create/user_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/reply_as_user",
     type: "prompter_reply",
     overview: "Given the following conversation, provide an adequate reply",
     instruction: "Provide the user's reply",
@@ -55,6 +59,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Help Open Assistant improve its responses to conversations with other users.",
     category: TaskCategory.Create,
     pathname: "/create/assistant_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/reply_as_assistant",
     type: "assistant_reply",
     overview: "Given the following conversation, provide an adequate reply",
     instruction: "Provide the assistant's reply",
@@ -66,6 +71,8 @@ export const TaskTypes: TaskInfo[] = [
     category: TaskCategory.Evaluate,
     desc: "Help Open Assistant improve its responses to conversations with other users.",
     pathname: "/evaluate/rank_user_replies",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
+    overview: "Given the following User replies, sort them from best to worst, best being first, worst being last.",
     type: "rank_prompter_replies",
     update_type: "message_ranking",
     unchanged_title: "Order Unchanged",
@@ -76,6 +83,9 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
     category: TaskCategory.Evaluate,
     pathname: "/evaluate/rank_assistant_replies",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
+    overview:
+      "Given the following Assistant replies, sort them from best to worst, best being first, worst being last.",
     type: "rank_assistant_replies",
     update_type: "message_ranking",
     unchanged_title: "Order Unchanged",
@@ -86,6 +96,8 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
     category: TaskCategory.Evaluate,
     pathname: "/evaluate/rank_initial_prompts",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
+    overview: "Given the following inital prompts, sort them from best to worst, best being first, worst being last.",
     type: "rank_initial_prompts",
     update_type: "message_ranking",
     unchanged_title: "Order Unchanged",
@@ -97,6 +109,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_initial_prompt",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     overview: "Provide labels for the following prompt",
     type: "label_initial_prompt",
     mode: "full",
@@ -107,6 +120,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
     overview: "Given the following discussion, provide labels for the final prompt",
     type: "label_prompter_reply",
     mode: "full",
@@ -117,6 +131,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_assistant_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_assistant_reply",
     overview: "Given the following discussion, provide labels for the final prompt.",
     type: "label_assistant_reply",
     mode: "full",
@@ -128,6 +143,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_initial_prompt",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     overview: "Read the following prompt and then answer the question about it.",
     type: "label_initial_prompt",
     mode: "simple",
@@ -138,6 +154,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
     type: "label_prompter_reply",
     mode: "simple",
@@ -148,6 +165,7 @@ export const TaskTypes: TaskInfo[] = [
     desc: "Provide labels for a prompt.",
     category: TaskCategory.Label,
     pathname: "/label/label_assistant_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/prompting",
     overview: "Read the following conversation and then answer the question about the last prompt in the discussion.",
     type: "label_assistant_reply",
     mode: "simple",