Merge pull request #102 from StampyAI/tidy-up

Component for pages + small tidy ups
StampyAI · Sep 29, 2023 · 6da4851 · 6da4851
2 parents e273dad + cedb2aa
commit 6da4851
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 74 deletions.
diff --git a/web/src/components/entry.tsx b/web/src/components/entry.tsx
@@ -0,0 +1,83 @@
+import type {
+  Entry as EntryType,
+  AssistantEntry,
+  ErrorMessage,
+  StampyMessage,
+  UserEntry,
+} from "../types";
+import { ShowAssistantEntry } from "./assistant";
+import { GlossarySpan } from "./glossary";
+import Image from "next/image";
+import logo from "../logo.svg";
+
+export const User = ({ entry }: { entry: UserEntry }) => {
+  return (
+    <li>
+      <p className="border border-gray-300 px-1 text-right">
+        {" "}
+        {entry.content}{" "}
+      </p>
+    </li>
+  );
+};
+
+export const Error = ({ entry }: { entry: ErrorMessage }) => {
+  return (
+    <li>
+      <p className="border border-red-500 bg-red-100 px-1 text-red-800">
+        {" "}
+        {entry.content}{" "}
+      </p>
+    </li>
+  );
+};
+
+export const Assistant = ({ entry }: { entry: AssistantEntry }) => {
+  return (
+    <li>
+      <ShowAssistantEntry entry={entry} />
+    </li>
+  );
+};
+
+export const Stampy = ({ entry }: { entry: StampyMessage }) => {
+  return (
+    <li>
+      <div
+        className="my-7 rounded bg-slate-500 px-4 py-0.5 text-slate-50"
+        style={{
+          marginLeft: "auto",
+          marginRight: "auto",
+          maxWidth: "99.8%",
+        }}
+      >
+        <div>
+          <GlossarySpan content={entry.content} />
+        </div>
+        <div className="mb-3 flex justify-end">
+          <a
+            href={entry.url}
+            target="_blank"
+            className="flex items-center space-x-1"
+          >
+            <span>aisafety.info</span>
+            <Image src={logo} alt="aisafety.info logo" width={19} />
+          </a>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+export const Entry = ({ entry }: { entry: EntryType }) => {
+  switch (entry.role) {
+    case "user":
+      return <User entry={entry} />;
+    case "error":
+      return <Error entry={entry} />;
+    case "assistant":
+      return <Assistant entry={entry} />;
+    case "stampy":
+      return <Stampy entry={entry} />;
+  }
+};
diff --git a/web/src/components/page.tsx b/web/src/components/page.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import Head from "next/head";
+import Header from "./header";
+
+const Page: React.FC<{children: ReactNode, page: "index" | "semantic"}> = ({page, children}) => {
+  return (
+    <>
+      <Head>
+        <title>AI Safety Info</title>
+      </Head>
+      <main>
+        <Header page={page} />
+        {children}
+      </main>
+    </>
+  );
+};
+export default Page;
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -1,19 +1,17 @@
-import Head from "next/head";
-import React from "react";
 import { type NextPage } from "next";
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from 'next/image';
 
-import Header from "../components/header";
-import logo from "../logo.svg"
+import Page from "../components/page"
 import { API_URL } from "../settings"
 import type { Citation, Entry, UserEntry, AssistantEntry, ErrorMessage, StampyMessage } from "../types";
 import { SearchBox, Followup } from "../components/searchbox";
 import { GlossarySpan } from "../components/glossary";
 import { Controls, Mode } from "../components/controls";
 import { ShowAssistantEntry } from "../components/assistant";
 import { ProcessText } from "../components/citations";
+import { Entry as EntryTag } from "../components/entry";
 
 const MAX_FOLLOWUPS = 4;
 
@@ -276,60 +274,22 @@ const Home: NextPage = () => {
 
 
   return (
-    <>
-      <Head>
-        <title>AI Safety Info</title>
-      </Head>
-      <main>
-        <Header page="index" />
-        <Controls mode={mode} setMode={setMode} />
-
-        <h2 className="bg-red-100 text-red-800"><b>WARNING</b>: This is a very <b>early prototype</b>. <Link href="http://bit.ly/stampy-chat-issues" target="_blank">Feedback</Link> welcomed.</h2>
-
-
-        <ul>
-          {entries.map((entry, i) => {
-            switch (entry.role) {
-              case "user": return <li key={i}>
-                <p className="border border-gray-300 px-1 text-right"> {entry.content} </p>
-              </li>
-
-              case "error": return <li key={i}>
-                <p className="border bg-red-100 border-red-500 text-red-800 px-1"> {entry.content} </p>
-              </li>
-
-              case "assistant": return <li key={i}>
-                <ShowAssistantEntry entry={entry}/>
-              </li>
-
-              case "stampy": return <li key={i}>
-                <div className="px-4 py-0.5 my-7 bg-slate-500 text-slate-50 rounded"
-                  style={{
-                    marginLeft: "auto",
-                    marginRight: "auto",
-                    maxWidth: "99.8%",
-                  }}
-                >
-                  <div><GlossarySpan content={entry.content} /></div>
-                  <div className="mb-3 flex justify-end">
-                    <a href={entry.url} target="_blank"
-                       className="flex items-center space-x-1">
-                      <span>aisafety.info</span>
-                      <Image src={logo} alt="aisafety.info logo" width={19}/>
-                    </a>
-                  </div>
-                </div>
-              </li>
-            }
-          })}
+    <Page page="index">
+      <Controls mode={mode} setMode={setMode} />
+
+      <h2 className="bg-red-100 text-red-800"><b>WARNING</b>: This is a very <b>early prototype</b>. <Link href="http://bit.ly/stampy-chat-issues" target="_blank">Feedback</Link> welcomed.</h2>
+
 
-          <SearchBox search={search} />
+      <ul>
+        {entries.map((entry, i) => (
+           <EntryTag entry={entry} key={i} />
+        ))}
+        <SearchBox search={search} />
 
-          { last_entry }
+        { last_entry }
 
-        </ul>
-      </main>
-    </>
+      </ul>
+    </Page>
   );
 };
 

diff --git a/web/src/pages/semantic.tsx b/web/src/pages/semantic.tsx
@@ -1,7 +1,6 @@
 import { type NextPage } from "next";
 import React from "react";
-import Head from "next/head";
-import Header from "../components/header";
+import Page from "../components/page"
 import { SearchBox, Followup } from "../components/searchbox";
 import { useState } from "react";
 import { API_URL } from "../settings"
@@ -38,23 +37,17 @@ const Semantic: NextPage = () => {
   };
 
   return (
-    <>
-      <Head>
-        <title>AI Safety Info</title>
-      </Head>
-      <main>
-        <Header page="semantic" />
-        <h2>Retrieve relevant data sources from alignment research</h2>
-        <SearchBox search={semantic_search} />
-        <ul>
-          {results.map((entry, i) => (
-            <li key={"entry" + i}>
-              <ShowSemanticEntry entry={entry} />
-            </li>
-          ))}
-        </ul>
-      </main>
-    </>
+    <Page page="semantic">
+      <h2>Retrieve relevant data sources from alignment research</h2>
+      <SearchBox search={semantic_search} />
+      <ul>
+        {results.map((entry, i) => (
+          <li key={"entry" + i}>
+            <ShowSemanticEntry entry={entry} />
+          </li>
+        ))}
+      </ul>
+    </Page>
   );
 };