wassname/stampy-chat
1
0
Fork 0
mirror of https://github.com/wassname/stampy-chat.git synced 2026-09-09 11:36:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Component for pages + small tidy ups

Browse Source
This commit is contained in:
Daniel O'Connell
2023-09-28 23:08:26 +02:00
parent ac7fdbc442
commit cedb2aa280
4 changed files with 126 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/entry.tsx
+83
View File
@@ -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} />;
}
};
web/src/components/page.tsx
+18
View File
@@ -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;
web/src/pages/index.tsx
+13 -53
View File
@@ -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 (
<>
<Head>
<title>AI Safety Info</title>
</Head>
<main>
<Header page="index" />
<Controls mode={mode} setMode={setMode} />
<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>
<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>
<ul>
{entries.map((entry, i) => (
<EntryTag entry={entry} key={i} />
))}
<SearchBox search={search} />
case "error": return <li key={i}>
<p className="border bg-red-100 border-red-500 text-red-800 px-1"> {entry.content} </p>
</li>
{ last_entry }
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>
}
})}
<SearchBox search={search} />
{ last_entry }
</ul>
</main>
</>
</ul>
</Page>
);
};
web/src/pages/semantic.tsx
+12 -19
View File
@@ -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>
);
};