Added guidelines to sidebar (#1757)

I added the guidelines tab to the sidebar. I also updated the '?' links to point to corresponding guidelines page / sections <img width="330" alt="Screenshot 2023-02-20 at 3 20 23 AM" src="https://user-images.githubusercontent.com/43126781/220050939-c0f45161-9451-4240-943d-e18ecc5f048a.png"> Corresponding '?' had the links also updated <img width="971" alt="Screenshot 2023-02-20 at 3 20 43 AM" src="https://user-images.githubusercontent.com/43126781/220050942-32e37457-df18-42f5-ace3-23bdfb7df983.png"> <img width="257" alt="Screenshot 2023-02-20 at 3 20 58 AM" src="https://user-images.githubusercontent.com/43126781/220050950-a0ca0287-9d01-491d-a323-8d655de5238f.png">
LAION-AI · Feb 20, 2023 · d396575 · d396575
1 parent 4984a02
commit d396575
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 41 deletions.
diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
@@ -49,7 +49,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
               {t(TaskCategoryLabels[category])}
             </Heading>
             <Spacer />
-            <ExternalLink href="https://projects.laion.ai/Open-Assistant/" isExternal>
+            <ExternalLink href="https://projects.laion.ai/Open-Assistant/docs/guides/guidelines" isExternal>
               <IconButton variant="ghost" aria-label="More Information" icon={<HelpCircle size="2em" />} />
             </ExternalLink>
           </Flex>

diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import { Box, Grid } from "@chakra-ui/react";
-import { Activity, BarChart2, Layout, MessageSquare, Settings, Users, TrendingUp } from "lucide-react";
+import { Activity, BarChart2, HelpCircle, Layout, MessageSquare, Settings, Users, TrendingUp } from "lucide-react";
 import type { NextPage } from "next";
 import { Header } from "src/components/Header";
 
@@ -33,37 +33,45 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 export const getDashboardLayout = (page: React.ReactElement) => (
   <Grid templateRows="min-content 1fr" h="full" gridTemplateColumns="minmax(0, 1fr)">
     <Header />
-    <ToSWrapper>
-      <SideMenuLayout
-        menuButtonOptions={[
-          {
-            labelID: "dashboard",
-            pathname: "/dashboard",
-            icon: Layout,
-          },
-          {
-            labelID: "messages",
-            pathname: "/messages",
-            icon: MessageSquare,
-          },
-          {
-            labelID: "leaderboard",
-            pathname: "/leaderboard",
-            icon: BarChart2,
-          },
-          {
-            labelID: "stats",
-            pathname: "/stats",
-            icon: TrendingUp,
-          },
-        ]}
-      >
-        <Box>{page}</Box>
-        <Box mt="10">
-          <SlimFooter />
-        </Box>
-      </SideMenuLayout>
-    </ToSWrapper>
+    <Grid templateRows="1fr min-content" h="full">
+      <ToSWrapper>
+        <SideMenuLayout
+          menuButtonOptions={[
+            {
+              labelID: "dashboard",
+              pathname: "/dashboard",
+              icon: Layout,
+            },
+            {
+              labelID: "messages",
+              pathname: "/messages",
+              icon: MessageSquare,
+            },
+            {
+              labelID: "leaderboard",
+              pathname: "/leaderboard",
+              icon: BarChart2,
+            },
+            {
+              labelID: "stats",
+              pathname: "/stats",
+              icon: TrendingUp,
+            },
+            {
+              labelID: "Guidelines",
+              pathname: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines",
+              icon: HelpCircle,
+              target: "_blank",
+            },
+          ]}
+        >
+          <Box>{page}</Box>
+          <Box mt="10">
+            <SlimFooter />
+          </Box>
+        </SideMenuLayout>
+      </ToSWrapper>
+    </Grid>
   </Grid>
 );
 

diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
@@ -9,6 +9,7 @@ export interface MenuButtonOption {
   labelID: string;
   pathname: string;
   icon: LucideIcon;
+  target?: HTMLAnchorElement["target"];
 }
 
 export interface SideMenuProps {
@@ -37,7 +38,12 @@ export function SideMenu(props: SideMenuProps) {
                 placement="right"
                 className="hidden lg:hidden sm:block"
               >
-                <Link key={item.labelID} href={item.pathname} className="no-underline">
+                <Link
+                  key={item.labelID}
+                  href={item.pathname}
+                  target={!item.target ? "_self" : item.target}
+                  className="no-underline"
+                >
                   <Button
                     justifyContent={["center", "center", "center", "start"]}
                     gap="3"

diff --git a/website/src/components/Tasks/TaskTypes.tsx b/website/src/components/Tasks/TaskTypes.tsx
@@ -22,7 +22,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "create_initial_prompt",
     category: TaskCategory.Create,
     pathname: "/create/initial_prompt",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/reply_as_user",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#user-reply",
     type: TaskType.initial_prompt,
     update_type: TaskUpdateType.TextReplyToMessage,
   },
@@ -38,7 +38,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "reply_as_assistant",
     category: TaskCategory.Create,
     pathname: "/create/assistant_reply",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/reply_as_assistant",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#assistant-reply",
     type: TaskType.assistant_reply,
     update_type: TaskUpdateType.TextReplyToMessage,
   },
@@ -55,7 +55,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "rank_assistant_replies",
     category: TaskCategory.Evaluate,
     pathname: "/evaluate/rank_assistant_replies",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/rank_assistant_replies",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#ranking-assistant",
     type: TaskType.rank_assistant_replies,
     update_type: TaskUpdateType.MessageRanking,
   },
@@ -72,7 +72,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "label_initial_prompt",
     category: TaskCategory.Label,
     pathname: "/label/label_initial_prompt",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#classifying-user",
     type: TaskType.label_initial_prompt,
     mode: "full",
     update_type: TaskUpdateType.TextLabels,
@@ -100,7 +100,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "classify_initial_prompt",
     category: TaskCategory.Label,
     pathname: "/label/label_initial_prompt",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#classifying-user",
     type: TaskType.label_initial_prompt,
     mode: "simple",
     update_type: TaskUpdateType.TextLabels,
@@ -109,7 +109,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "classify_prompter_reply",
     category: TaskCategory.Label,
     pathname: "/label/label_prompter_reply",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_prompter_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#classifying-user",
     type: TaskType.label_prompter_reply,
     mode: "simple",
     update_type: TaskUpdateType.TextLabels,
@@ -118,7 +118,7 @@ export const TaskInfos: TaskInfo[] = [
     id: "classify_assistant_reply",
     category: TaskCategory.Label,
     pathname: "/label/label_assistant_reply",
-    help_link: "https://projects.laion.ai/Open-Assistant/docs/tasks/label_assistant_reply",
+    help_link: "https://projects.laion.ai/Open-Assistant/docs/guides/guidelines#classifying-assistant",
     type: TaskType.label_assistant_reply,
     mode: "simple",
     update_type: TaskUpdateType.TextLabels,