v0.1.0
This commit is contained in:
Cogent Apps
GitHub
121
src/components/header.tsx
Normal file
121
src/components/header.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import styled from '@emotion/styled';
|
||||
import Helmet from 'react-helmet';
|
||||
import { useSpotlight } from '@mantine/spotlight';
|
||||
import { Button, ButtonProps, TextInput } from '@mantine/core';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { APP_NAME } from '../values';
|
||||
import { useAppContext } from '../context';
|
||||
import { backend } from '../backend';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 2.618rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
|
||||
h1 {
|
||||
@media (max-width: 40em) {
|
||||
width: 100%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
|
||||
animation: fadein 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 70%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@media (min-width: 40em) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
i + span {
|
||||
@media (max-width: 40em) {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function HeaderButton(props: ButtonProps & { icon?: string, onClick?: any, children?: any }) {
|
||||
return (
|
||||
<Button size='xs'
|
||||
variant={props.variant || 'subtle'}
|
||||
onClick={props.onClick}>
|
||||
{props.icon && <i className={'fa fa-' + props.icon} />}
|
||||
{props.children && <span>
|
||||
{props.children}
|
||||
</span>}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Header(props: { title?: any, onShare?: () => void, share?: boolean, canShare?: boolean }) {
|
||||
const context = useAppContext();
|
||||
const navigate = useNavigate();
|
||||
const spotlight = useSpotlight();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onNewChat = useCallback(async () => {
|
||||
setLoading(true);
|
||||
navigate(`/`);
|
||||
setLoading(false);
|
||||
}, [navigate]);
|
||||
|
||||
const openSettings = useCallback(() => {
|
||||
context.settings.open(context.apiKeys.openai ? 'options' : 'user');
|
||||
}, [context, context.apiKeys.openai]);
|
||||
|
||||
return <Container>
|
||||
<Helmet>
|
||||
<title>{props.title ? `${props.title} - ` : ''}{APP_NAME} - Unofficial ChatGPT app</title>
|
||||
</Helmet>
|
||||
{props.title && <h1>{props.title}</h1>}
|
||||
{!props.title && (<h1>
|
||||
<div>
|
||||
<strong>{APP_NAME}</strong><br />
|
||||
<span>An unofficial ChatGPT app</span>
|
||||
</div>
|
||||
</h1>)}
|
||||
<div className="spacer" />
|
||||
<HeaderButton icon="search" onClick={spotlight.openSpotlight} />
|
||||
<HeaderButton icon="gear" onClick={openSettings} />
|
||||
{backend && !props.share && props.canShare && typeof navigator.share !== 'undefined' && <HeaderButton icon="share" onClick={props.onShare}>
|
||||
Share
|
||||
</HeaderButton>}
|
||||
{backend && !context.authenticated && (
|
||||
<HeaderButton onClick={() => backend?.signIn()}>Sign in to sync</HeaderButton>
|
||||
)}
|
||||
<HeaderButton icon="plus" onClick={onNewChat} loading={loading} variant="light">
|
||||
New Chat
|
||||
</HeaderButton>
|
||||
</Container>;
|
||||
}
|
||||
113
src/components/input.tsx
Normal file
113
src/components/input.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Button, ActionIcon, Textarea } from '@mantine/core';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useAppContext } from '../context';
|
||||
import { Parameters } from '../types';
|
||||
|
||||
const Container = styled.div`
|
||||
background: #292933;
|
||||
border-top: thin solid #393933;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.inner {
|
||||
max-width: 50rem;
|
||||
margin: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
margin: 0.5rem -0.4rem 0.5rem 1rem;
|
||||
font-size: 0.7rem;
|
||||
color: #999;
|
||||
}
|
||||
`;
|
||||
|
||||
export declare type OnSubmit = (name?: string) => Promise<boolean>;
|
||||
|
||||
function PaperPlaneSubmitButton(props: { onSubmit: any, disabled?: boolean }) {
|
||||
return (
|
||||
<ActionIcon size="xs"
|
||||
disabled={props.disabled}
|
||||
loading={props.disabled}
|
||||
onClick={() => props.onSubmit()}>
|
||||
<i className="fa fa-paper-plane" style={{ fontSize: '90%' }} />
|
||||
</ActionIcon>
|
||||
);
|
||||
}
|
||||
|
||||
export interface MessageInputProps {
|
||||
disabled?: boolean;
|
||||
parameters: Parameters;
|
||||
onSubmit: OnSubmit;
|
||||
}
|
||||
|
||||
export default function MessageInput(props: MessageInputProps) {
|
||||
const context = useAppContext();
|
||||
|
||||
const [message, setMessage] = useState('');
|
||||
|
||||
const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setMessage(e.target.value);
|
||||
}, []);
|
||||
|
||||
const onSubmit = useCallback(async () => {
|
||||
if (await props.onSubmit(message)) {
|
||||
setMessage('');
|
||||
}
|
||||
}, [message, props.onSubmit]);
|
||||
|
||||
const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter'&& e.shiftKey === false && !props.disabled) {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}
|
||||
}, [onSubmit, props.disabled]);
|
||||
|
||||
const rightSection = useMemo(() => {
|
||||
return (
|
||||
<div style={{
|
||||
opacity: '0.8',
|
||||
paddingRight: '0.4rem',
|
||||
}}>
|
||||
<PaperPlaneSubmitButton onSubmit={onSubmit} disabled={props.disabled} />
|
||||
</div>
|
||||
);
|
||||
}, [onSubmit, props.disabled]);
|
||||
|
||||
const openSystemPromptPanel = useCallback(() => context.settings.open('options', 'system-prompt'), []);
|
||||
const openTemperaturePanel = useCallback(() => context.settings.open('options', 'temperature'), []);
|
||||
|
||||
return <Container>
|
||||
<div className="inner">
|
||||
<Textarea disabled={props.disabled}
|
||||
autosize
|
||||
minRows={3}
|
||||
maxRows={12}
|
||||
placeholder={"Enter a message here..."}
|
||||
value={message}
|
||||
onChange={onChange}
|
||||
rightSection={rightSection}
|
||||
onKeyDown={onKeyDown} />
|
||||
<div>
|
||||
<Button variant="subtle"
|
||||
className="settings-button"
|
||||
size="xs"
|
||||
compact
|
||||
onClick={openSystemPromptPanel}>
|
||||
<span>Customize system prompt</span>
|
||||
</Button>
|
||||
<Button variant="subtle"
|
||||
className="settings-button"
|
||||
size="xs"
|
||||
compact
|
||||
onClick={openTemperaturePanel}>
|
||||
<span>Temperature: {props.parameters.temperature.toFixed(1)}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>;
|
||||
}
|
||||
267
src/components/message.tsx
Normal file
267
src/components/message.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
import styled from '@emotion/styled';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Button, CopyButton, Loader } from '@mantine/core';
|
||||
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
|
||||
import { Message } from "../types";
|
||||
import { share } from '../utils';
|
||||
import { ElevenLabsReaderButton } from '../elevenlabs';
|
||||
|
||||
// hide for everyone but screen readers
|
||||
const SROnly = styled.span`
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
&.by-user {
|
||||
}
|
||||
|
||||
&.by-assistant {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
&.by-assistant + &.by-assistant, &.by-user + &.by-user {
|
||||
border-top: 0.2rem dotted rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding: 1.618rem;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
margin-top: 0rem;
|
||||
max-width: 100%;
|
||||
|
||||
* {
|
||||
color: white;
|
||||
}
|
||||
|
||||
p, ol, ul, li, h1, h2, h3, h4, h5, h6, img, blockquote, &>pre {
|
||||
max-width: 50rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 50rem;
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: list-item;
|
||||
|
||||
li {
|
||||
counter-increment: list-item;
|
||||
}
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
&, * {
|
||||
font-family: "Fira Code", monospace !important;
|
||||
}
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
margin-top: 1.618rem;
|
||||
border-spacing: 0px;
|
||||
border-collapse: collapse;
|
||||
border: thin solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
max-width: 55rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
td + td, th + th {
|
||||
border-left: thin solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
tr {
|
||||
border-top: thin solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
table td,
|
||||
table th {
|
||||
padding: 0.618rem 1rem;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
opacity: 0.6;
|
||||
max-width: 50rem;
|
||||
margin-bottom: 0.0rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
span + span {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.fa + span {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
.mantine-Button-root {
|
||||
color: #ccc;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
|
||||
.mantine-Button-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
|
||||
const EndOfChatMarker = styled.div`
|
||||
position: absolute;
|
||||
bottom: calc(-1.618rem - 0.5rem);
|
||||
left: 50%;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-left: -0.25rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
`;
|
||||
|
||||
function getRoleName(role: string, share = false) {
|
||||
switch (role) {
|
||||
case 'user':
|
||||
return !share ? 'You' : 'User';
|
||||
case 'assistant':
|
||||
return 'ChatGPT';
|
||||
case 'system':
|
||||
return 'System';
|
||||
default:
|
||||
return role;
|
||||
}
|
||||
}
|
||||
|
||||
function InlineLoader() {
|
||||
return (
|
||||
<Loader variant="dots" size="xs" style={{
|
||||
marginLeft: '1rem',
|
||||
position: 'relative',
|
||||
top: '-0.2rem',
|
||||
}} />
|
||||
);
|
||||
}
|
||||
|
||||
export default function MessageComponent(props: { message: Message, last: boolean, share?: boolean }) {
|
||||
if (props.message.role === 'system') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <Container className={"message by-" + props.message.role}>
|
||||
<div className="inner">
|
||||
<div className="metadata">
|
||||
<span>
|
||||
<strong>
|
||||
{getRoleName(props.message.role, props.share)}<SROnly>:</SROnly>
|
||||
</strong>
|
||||
{props.message.role === 'assistant' && props.last && !props.message.done && <InlineLoader />}
|
||||
</span>
|
||||
{props.message.done && <ElevenLabsReaderButton selector={'.content-' + props.message.id} />}
|
||||
<div style={{ flexGrow: 1 }} />
|
||||
<CopyButton value={props.message.content}>
|
||||
{({ copy, copied }) => (
|
||||
<Button variant="subtle" size="sm" compact onClick={copy} style={{ marginLeft: '1rem' }}>
|
||||
<i className="fa fa-clipboard" />
|
||||
<span>{copied ? 'Copied' : 'Copy'}</span>
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
{typeof navigator.share !== 'undefined' && (
|
||||
<Button variant="subtle" size="sm" compact onClick={() => share(props.message.content)}>
|
||||
<i className="fa fa-share" />
|
||||
<span>Share</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className={"prose dark:prose-invert content content-" + props.message.id}>
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
return !inline ? (
|
||||
<div>
|
||||
<CopyButton value={String(children)}>
|
||||
{({ copy, copied }) => (
|
||||
<Button variant="subtle" size="sm" compact onClick={copy}>
|
||||
<i className="fa fa-clipboard" />
|
||||
<span>{copied ? 'Copied' : 'Copy'}</span>
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
<SyntaxHighlighter
|
||||
children={String(children).replace(/\n$/, '')}
|
||||
style={vscDarkPlus as any}
|
||||
language={match?.[1] || 'text'}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
}}>{props.message.content}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
{props.last && <EndOfChatMarker />}
|
||||
</Container>
|
||||
}
|
||||
199
src/components/page.tsx
Normal file
199
src/components/page.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import styled from '@emotion/styled';
|
||||
import slugify from 'slugify';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { Button, Drawer, Loader } from '@mantine/core';
|
||||
import { SpotlightProvider } from '@mantine/spotlight';
|
||||
|
||||
import { Parameters } from '../types';
|
||||
import MessageInput from './input';
|
||||
import Header from './header';
|
||||
import SettingsScreen from './settings-screen';
|
||||
|
||||
import { useChatSpotlightProps } from '../spotlight';
|
||||
import { useChat } from '../use-chat';
|
||||
import Message from './message';
|
||||
import { loadParameters, saveParameters } from '../parameters';
|
||||
import { useAppContext } from '../context';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { APP_NAME } from '../values';
|
||||
import { backend } from '../backend';
|
||||
|
||||
const Container = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #292933;
|
||||
color: white;
|
||||
`;
|
||||
|
||||
const Messages = styled.div`
|
||||
max-height: 100%;
|
||||
overflow-y: scroll;
|
||||
`;
|
||||
|
||||
const EmptyMessage = styled.div`
|
||||
min-height: 70vh;
|
||||
padding-bottom: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
line-height: 1.7;
|
||||
gap: 1rem;
|
||||
`;
|
||||
|
||||
function Empty(props: { loading?: boolean }) {
|
||||
const context = useAppContext();
|
||||
return (
|
||||
<EmptyMessage>
|
||||
{props.loading && <Loader variant="dots" />}
|
||||
{!props.loading && <>
|
||||
<p>Hello, how can I help you today?</p>
|
||||
{!context.apiKeys.openai && (
|
||||
<Button size="xs"
|
||||
variant="light"
|
||||
compact
|
||||
onClick={() => context.settings.open('user', 'openai-api-key')}>
|
||||
Connect your OpenAI account to get started
|
||||
</Button>
|
||||
)}
|
||||
</>}
|
||||
</EmptyMessage>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ChatPage(props: any) {
|
||||
const { id } = useParams();
|
||||
const context = useAppContext();
|
||||
const spotlightProps = useChatSpotlightProps();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { chat, messages, chatLoadedAt, leaf } = useChat(id, props.share);
|
||||
const [generating, setGenerating] = useState(false);
|
||||
|
||||
const [_parameters, setParameters] = useState<Parameters>(loadParameters(id));
|
||||
const [parameters] = useDebouncedValue(_parameters, 2000);
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
saveParameters(id, parameters);
|
||||
}
|
||||
}, [parameters]);
|
||||
|
||||
const onNewMessage = useCallback(async (message?: string) => {
|
||||
if (props.share) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!message?.trim().length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!context.apiKeys.openai) {
|
||||
context.settings.open('user', 'openai-api-key');
|
||||
return false;
|
||||
}
|
||||
|
||||
setGenerating(true);
|
||||
|
||||
if (chat) {
|
||||
await context.chat.sendMessage({
|
||||
chatID: chat.id,
|
||||
content: message.trim(),
|
||||
requestedParameters: {
|
||||
...parameters,
|
||||
apiKey: context.apiKeys.openai,
|
||||
},
|
||||
parentID: leaf?.id,
|
||||
});
|
||||
} else if (props.landing) {
|
||||
const id = await context.chat.createChat();
|
||||
await context.chat.sendMessage({
|
||||
chatID: id,
|
||||
content: message.trim(),
|
||||
requestedParameters: {
|
||||
...parameters,
|
||||
apiKey: context.apiKeys.openai,
|
||||
},
|
||||
parentID: leaf?.id,
|
||||
});
|
||||
navigate('/chat/' + id);
|
||||
}
|
||||
|
||||
setTimeout(() => setGenerating(false), 4000);
|
||||
|
||||
return true;
|
||||
}, [chat, context.apiKeys.openai, leaf, parameters, props.landing]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.share) {
|
||||
return;
|
||||
}
|
||||
|
||||
const shouldScroll = (Date.now() - chatLoadedAt) > 5000;
|
||||
|
||||
if (!shouldScroll) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = document.querySelector('#messages') as HTMLElement;
|
||||
const messages = document.querySelectorAll('#messages .message');
|
||||
|
||||
if (messages.length) {
|
||||
const latest = messages[messages.length - 1] as HTMLElement;
|
||||
const offset = Math.max(0, latest.offsetTop - 100);
|
||||
setTimeout(() => {
|
||||
container?.scrollTo({ top: offset, behavior: 'smooth' });
|
||||
}, 500);
|
||||
}
|
||||
}, [chatLoadedAt, messages.length]);
|
||||
|
||||
const disabled = generating
|
||||
|| messages[messages.length - 1]?.role === 'user'
|
||||
|| (messages.length > 0 && !messages[messages.length - 1]?.done);
|
||||
|
||||
const shouldShowChat = id && chat && !!messages.length;
|
||||
|
||||
return <SpotlightProvider {...spotlightProps}>
|
||||
<Container key={chat?.id}>
|
||||
<Header share={props.share} canShare={messages.length > 1}
|
||||
title={(id && messages.length) ? chat?.title : null}
|
||||
onShare={async () => {
|
||||
if (chat) {
|
||||
const id = await backend?.shareChat(chat);
|
||||
if (id) {
|
||||
const slug = chat.title ? '/' + slugify(chat.title.toLocaleLowerCase()) : '';
|
||||
const url = window.location.origin + '/s/' + id + slug;
|
||||
navigator.share?.({
|
||||
title: chat.title || undefined,
|
||||
url,
|
||||
});
|
||||
}
|
||||
}
|
||||
}} />
|
||||
<Messages id="messages">
|
||||
{shouldShowChat && <div style={{ paddingBottom: '20rem' }}>
|
||||
{messages.map((message) => (
|
||||
<Message message={message}
|
||||
share={props.share}
|
||||
last={chat.messages.leafs.some(n => n.id === message.id)} />
|
||||
))}
|
||||
</div>}
|
||||
{!shouldShowChat && <Empty loading={(!props.landing && !chat) || props.share} />}
|
||||
</Messages>
|
||||
|
||||
{!props.share && <MessageInput disabled={disabled} onSubmit={onNewMessage} parameters={parameters} />}
|
||||
|
||||
<Drawer size="50rem"
|
||||
position='right'
|
||||
opened={!!context.settings.tab}
|
||||
onClose={() => context.settings.close()}
|
||||
withCloseButton={false}>
|
||||
<SettingsScreen parameters={_parameters} setParameters={setParameters} />
|
||||
</Drawer>
|
||||
</Container>
|
||||
</SpotlightProvider>;
|
||||
}
|
||||
242
src/components/settings-screen.tsx
Normal file
242
src/components/settings-screen.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Button, Grid, Select, Slider, Tabs, Textarea, TextInput } from "@mantine/core";
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { defaultSystemPrompt } from '../openai';
|
||||
import { defaultVoiceList, getVoices } from '../elevenlabs';
|
||||
import { useAppContext } from '../context';
|
||||
|
||||
const Container = styled.div`
|
||||
padding: .4rem 1rem 1rem 1rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mantine-Tabs-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 3rem);
|
||||
|
||||
@media (max-width: 40em) {
|
||||
height: calc(100% - 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.mantine-Tabs-tab {
|
||||
padding: 1.2rem 1.618rem 0.8rem 1.618rem;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
padding: 1rem;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mantine-Tabs-panel {
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
min-height: 0;
|
||||
margin-left: 0;
|
||||
padding: 1.2rem 0 3rem 0;
|
||||
|
||||
@media (max-width: 40em) {
|
||||
padding: 1.2rem 1rem 3rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#save {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
opacity: 1;
|
||||
|
||||
.mantine-Button-root {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Settings = styled.div`
|
||||
font-family: "Work Sans", sans-serif;
|
||||
color: white;
|
||||
|
||||
section {
|
||||
margin-bottom: .618rem;
|
||||
padding: 0.618rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration : underline;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Fira Code", monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
border: thin solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
animation: flash 3s;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% {
|
||||
border-color: rgba(255, 0, 0, 0);
|
||||
}
|
||||
50% {
|
||||
border-color: rgba(255, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export interface SettingsScreenProps {
|
||||
parameters: any;
|
||||
setParameters: (parameters: any) => any;
|
||||
}
|
||||
|
||||
export default function SettingsScreen(props: SettingsScreenProps) {
|
||||
const context = useAppContext();
|
||||
const small = useMediaQuery('(max-width: 40em)');
|
||||
const { parameters, setParameters } = props;
|
||||
|
||||
const [voices, setVoices] = useState<any[]>(defaultVoiceList);
|
||||
useEffect(() => {
|
||||
if (context.apiKeys.elevenlabs) {
|
||||
getVoices().then(data => {
|
||||
if (data?.voices?.length) {
|
||||
setVoices(data.voices);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [context.apiKeys.elevenlabs]);
|
||||
|
||||
if (!context.settings.tab) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Tabs defaultValue={context.settings.tab} style={{ margin: '0rem' }}>
|
||||
<Tabs.List grow={small}>
|
||||
<Tabs.Tab value="options">Options</Tabs.Tab>
|
||||
<Tabs.Tab value="user">User</Tabs.Tab>
|
||||
<Tabs.Tab value="speech">Speech</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="user">
|
||||
<Settings>
|
||||
<Grid style={{ marginBottom: '1.618rem' }} gutter={24}>
|
||||
<Grid.Col span={12}>
|
||||
<section className={context.settings.option === 'openai-api-key' ? 'focused' : ''}>
|
||||
<h3>Your OpenAI API Key</h3>
|
||||
<TextInput
|
||||
placeholder="Paste your API key here"
|
||||
value={context.apiKeys.openai || ''}
|
||||
onChange={event => {
|
||||
setParameters({ ...parameters, apiKey: event.currentTarget.value });
|
||||
context.apiKeys.setOpenAIApiKey(event.currentTarget.value);
|
||||
}} />
|
||||
<p><a href="https://platform.openai.com/account/api-keys" target="_blank">Find your API key here.</a> Your API key is stored only on this device and never transmitted to anyone except OpenAI.</p>
|
||||
<p>OpenAI API key usage is billed at a pay-as-you-go rate, separate from your ChatGPT subscription.</p>
|
||||
</section>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Settings>
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="options">
|
||||
<Settings>
|
||||
<Grid style={{ marginBottom: '1.618rem' }} gutter={24}>
|
||||
<Grid.Col span={12}>
|
||||
<section className={context.settings.option === 'system-prompt' ? 'focused' : ''}>
|
||||
<h3>System Prompt</h3>
|
||||
<Textarea
|
||||
value={parameters.initialSystemPrompt || defaultSystemPrompt}
|
||||
onChange={event => setParameters({ ...parameters, initialSystemPrompt: event.currentTarget.value })}
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
autosize />
|
||||
<p style={{ marginBottom: '0.7rem' }}>The System Prompt is shown to ChatGPT by the "System" before your first message. The <code style={{ whiteSpace: 'nowrap' }}>{'{{ datetime }}'}</code> tag is automatically replaced by the current date and time.</p>
|
||||
{(parameters.initialSystemPrompt?.trim() !== defaultSystemPrompt) && <Button size="xs" compact variant="light" onClick={() => setParameters({ ...parameters, initialSystemPrompt: defaultSystemPrompt })}>
|
||||
Reset to default
|
||||
</Button>}
|
||||
</section>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={12}>
|
||||
<section className={context.settings.option === 'temperature' ? 'focused' : ''}>
|
||||
<h3>Temperature ({parameters.temperature.toFixed(1)})</h3>
|
||||
<Slider value={parameters.temperature} onChange={value => setParameters({ ...parameters, temperature: value })} step={0.1} min={0} max={1} precision={3} />
|
||||
<p>The temperature parameter controls the randomness of the AI's responses. Lower values will make the AI more predictable, while higher values will make it more creative.</p>
|
||||
</section>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Settings>
|
||||
</Tabs.Panel>
|
||||
|
||||
<Tabs.Panel value="speech">
|
||||
<Settings>
|
||||
<Grid style={{ marginBottom: '1.618rem' }} gutter={24}>
|
||||
<Grid.Col span={12}>
|
||||
<section className={context.settings.option === 'elevenlabs-api-key' ? 'focused' : ''}>
|
||||
<h3>Your ElevenLabs Text-to-Speech API Key (optional)</h3>
|
||||
<TextInput placeholder="Paste your API key here" value={context.apiKeys.elevenlabs || ''} onChange={event => context.apiKeys.setElevenLabsApiKey(event.currentTarget.value)} />
|
||||
<p>Give ChatGPT a realisic human voice by connecting your ElevenLabs account (preview the available voices below). <a href="https://beta.elevenlabs.io" target="_blank">Click here to sign up.</a></p>
|
||||
<p>You can find your API key on the Profile tab of the ElevenLabs website. Your API key is stored only on this device and never transmitted to anyone except ElevenLabs.</p>
|
||||
</section>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={12}>
|
||||
<section className={context.settings.option === 'elevenlabs-voice' ? 'focused' : ''}>
|
||||
<h3>Voice</h3>
|
||||
<Select
|
||||
value={context.voice.id}
|
||||
onChange={v => context.voice.setVoiceID(v!)}
|
||||
data={voices.map(v => ({ label: v.name, value: v.voice_id }))} />
|
||||
<audio controls style={{ display: 'none' }} id="voice-preview" key={context.voice.id}>
|
||||
<source src={voices.find(v => v.voice_id === context.voice.id)?.preview_url} type="audio/mpeg" />
|
||||
</audio>
|
||||
<Button onClick={() => document.getElementById('voice-preview')?.play()} variant='light' compact style={{ marginTop: '1rem' }}>
|
||||
<i className='fa fa-headphones' />
|
||||
<span>Preview voice</span>
|
||||
</Button>
|
||||
</section>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Settings>
|
||||
</Tabs.Panel>
|
||||
</Tabs>
|
||||
<div id="save">
|
||||
<Button variant="light" fullWidth size="md" onClick={() => context.settings.close()}>
|
||||
Save and Close
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user