69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import Box from '@mui/material/Box';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import MuiMarkdown from 'mui-markdown';
|
|
|
|
import { BackstoryPageProps } from './BackstoryTab';
|
|
import { Conversation, ConversationHandle } from './Conversation';
|
|
import { ChatQuery } from './ChatQuery';
|
|
import { MessageList } from './Message';
|
|
|
|
const HomePage = forwardRef<ConversationHandle, BackstoryPageProps>((props: BackstoryPageProps, ref) => {
|
|
const { sessionId, setSnack, submitQuery } = props;
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
const backstoryPreamble: MessageList = [
|
|
{
|
|
role: 'content',
|
|
title: 'Welcome to Backstory',
|
|
disableCopy: true,
|
|
content: `
|
|
Backstory is a RAG enabled expert system with access to real-time data running self-hosted
|
|
(no cloud) versions of industry leading Large and Small Language Models (LLM/SLMs).
|
|
It was written by James Ketrenos in order to provide answers to
|
|
questions potential employers may have about his work history.
|
|
|
|
What would you like to know about James?
|
|
`,
|
|
}
|
|
];
|
|
|
|
const backstoryQuestions = [
|
|
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
|
|
<ChatQuery prompt="What is James Ketrenos' work history?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
|
|
<ChatQuery prompt="What programming languages has James used?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
|
|
<ChatQuery prompt="What are James' professional strengths?" tunables={{ enable_tools: false }} submitQuery={submitQuery} />
|
|
<ChatQuery prompt="What are today's headlines on CNBC.com?" tunables={{ enable_tools: true, enable_rag: false, enable_context: false }} submitQuery={submitQuery} />
|
|
</Box>,
|
|
<Box sx={{ p: 1 }}>
|
|
<MuiMarkdown>
|
|
As with all LLM interactions, the results may not be 100% accurate. If you have questions about my career,
|
|
I'd love to hear from you. You can send me an email at **james_backstory@ketrenos.com**.
|
|
</MuiMarkdown>
|
|
</Box>
|
|
];
|
|
|
|
return <Conversation
|
|
sx={{
|
|
maxWidth: "1024px",
|
|
height: "calc(100vh - 72px)",
|
|
}}
|
|
ref={ref}
|
|
{...{
|
|
type: "chat",
|
|
prompt: "What would you like to know about James?",
|
|
resetLabel: "chat",
|
|
sessionId,
|
|
setSnack,
|
|
preamble: backstoryPreamble,
|
|
defaultPrompts: backstoryQuestions,
|
|
submitQuery,
|
|
}}
|
|
/>;
|
|
});
|
|
|
|
export {
|
|
HomePage
|
|
}; |