diff --git a/web/src/components/entry.tsx b/web/src/components/entry.tsx
new file mode 100644
index 0000000..d9316b6
--- /dev/null
+++ 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 (
+
+
+ {" "}
+ {entry.content}{" "}
+
+
+ );
+};
+
+export const Error = ({ entry }: { entry: ErrorMessage }) => {
+ return (
+
+
+ {" "}
+ {entry.content}{" "}
+
+
+ );
+};
+
+export const Assistant = ({ entry }: { entry: AssistantEntry }) => {
+ return (
+
+
+
+ );
+};
+
+export const Stampy = ({ entry }: { entry: StampyMessage }) => {
+ return (
+
+
+
+ );
+};
+
+export const Entry = ({ entry }: { entry: EntryType }) => {
+ switch (entry.role) {
+ case "user":
+ return ;
+ case "error":
+ return ;
+ case "assistant":
+ return ;
+ case "stampy":
+ return ;
+ }
+};
diff --git a/web/src/components/page.tsx b/web/src/components/page.tsx
new file mode 100644
index 0000000..1969234
--- /dev/null
+++ 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 (
+ <>
+
+ AI Safety Info
+
+
+
+ {children}
+
+
+ );
+};
+export default Page;
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
index 2a1699a..b1765d9 100644
--- a/web/src/pages/index.tsx
+++ b/web/src/pages/index.tsx
@@ -1,12 +1,9 @@
-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";
@@ -14,6 +11,7 @@ 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 (
- <>
-
- AI Safety Info
-
-
-
-
-
- WARNING: This is a very early prototype. Feedback welcomed.
-
-
-
- {entries.map((entry, i) => {
- switch (entry.role) {
- case "user": return -
-
{entry.content}
-
-
- case "error": return -
-
{entry.content}
-
-
- case "assistant": return -
-
-
-
- case "stampy": return -
-
-
- }
- })}
+
+
+
+ WARNING: This is a very early prototype. Feedback welcomed.
+
-
+
+ {entries.map((entry, i) => (
+
+ ))}
+
- { last_entry }
+ { last_entry }
-
-
-
+
+
);
};
diff --git a/web/src/pages/semantic.tsx b/web/src/pages/semantic.tsx
index 755399b..d405ed9 100644
--- 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 (
- <>
-
- AI Safety Info
-
-
-
- Retrieve relevant data sources from alignment research
-
-
- {results.map((entry, i) => (
- -
-
-
- ))}
-
-
-
+
+ Retrieve relevant data sources from alignment research
+
+
+ {results.map((entry, i) => (
+ -
+
+
+ ))}
+
+
);
};