-
+
+
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
-export const SessionGrouping = () => {
- const createSessionWithDate = (id: string, title: string, daysAgo: number): Session => ({
- id,
- title,
- createdAt: subDays(new Date(), daysAgo),
- updatedAt: subDays(new Date(), daysAgo),
- conversations: [
- { id: `${id}-1`, question: 'Sample question', response: 'Sample response', createdAt: subDays(new Date(), daysAgo), updatedAt: subDays(new Date(), daysAgo) },
- ],
- });
-
- const sessionsWithVariousDates: Session[] = [
- createSessionWithDate('1', 'Today Session', 0),
- createSessionWithDate('2', 'Yesterday Session', 1),
- createSessionWithDate('2', 'Yesterday Session 2', 1),
- createSessionWithDate('3', 'Last Week Session', 6),
- createSessionWithDate('4', 'Two Weeks Ago Session', 14),
- createSessionWithDate('5', 'Last Month Session', 32),
- createSessionWithDate('6', 'Two Months Ago Session', 65),
- createSessionWithDate('7', 'Six Months Ago Session', 180),
- createSessionWithDate('8', 'Last Year Session', 370),
- createSessionWithDate('9', 'Two Years Ago Session', 740),
- ];
+// export const SessionGrouping = () => {
+// const createSessionWithDate = (id: string, title: string, daysAgo: number): Session => ({
+// id,
+// title,
+// createdAt: subDays(new Date(), daysAgo),
+// updatedAt: subDays(new Date(), daysAgo),
+// conversations: [
+// { id: `${id}-1`, question: 'Sample question', response: 'Sample response', createdAt: subDays(new Date(), daysAgo), updatedAt: subDays(new Date(), daysAgo) },
+// ],
+// });
- return (
-
- {}}
- />
-
- );
-};
+// const sessionsWithVariousDates: Session[] = [
+// createSessionWithDate('1', 'Today Session', 0),
+// createSessionWithDate('2', 'Yesterday Session', 1),
+// createSessionWithDate('2', 'Yesterday Session 2', 1),
+// createSessionWithDate('3', 'Last Week Session', 6),
+// createSessionWithDate('4', 'Two Weeks Ago Session', 14),
+// createSessionWithDate('5', 'Last Month Session', 32),
+// createSessionWithDate('6', 'Two Months Ago Session', 65),
+// createSessionWithDate('7', 'Six Months Ago Session', 180),
+// createSessionWithDate('8', 'Last Year Session', 370),
+// createSessionWithDate('9', 'Two Years Ago Session', 740),
+// ];
+
+// return (
+//
+// {}}
+// />
+//
+// );
+// };
export const HundredSessions = () => {
const generateFakeSessions = (count: number): Session[] => {
@@ -203,13 +538,39 @@ export const HundredSessions = () => {
const hundredSessions = generateFakeSessions(100);
return (
-
-
{}}
- />
+
+
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
+
{}}
- />
+ >
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
@@ -260,13 +652,43 @@ export const LongSessionNames = () => {
const sessionsWithLongNames = generateFakeSessionsWithLongNames(10);
return (
-
+
{}}
- />
+ activeSessionId="session-10"
+ >
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
@@ -321,28 +743,61 @@ export const MarkdownShowcase = () => {
[Perspective](https://en.wikipedia.org/wiki/Philosophical_question)
`;
- const sessionWithMarkdown: Session[] = [{
- id: 'session-markdown',
- title: 'Markdown Showcase',
- createdAt: subHours(new Date(), 1),
- updatedAt: new Date(),
- conversations: [{
- id: 'conversation-1',
- question: markdownQuestion,
- response: markdownResponse,
- createdAt: new Date()
- }]
- }];
+ const sessionWithMarkdown: Session[] = [
+ {
+ id: 'session-markdown',
+ title: 'Markdown Showcase',
+ createdAt: subHours(new Date(), 1),
+ updatedAt: new Date(),
+ conversations: [
+ {
+ id: 'conversation-1',
+ question: markdownQuestion,
+ response: markdownResponse,
+ createdAt: new Date()
+ }
+ ]
+ }
+ ];
return (
-
+
{}}
- />
+ >
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
@@ -366,29 +821,62 @@ export const CVEExample = () => {
- CVE-2021-45046
`;
- const sessionWithMarkdown: Session[] = [{
- id: 'session-cve',
- title: 'CVE Showcase',
- createdAt: subHours(new Date(), 1),
- updatedAt: new Date(),
- conversations: [{
- id: 'conversation-1',
- question: markdownQuestion,
- response: markdownResponse,
- createdAt: new Date()
- }]
- }];
+ const sessionWithMarkdown: Session[] = [
+ {
+ id: 'session-cve',
+ title: 'CVE Showcase',
+ createdAt: subHours(new Date(), 1),
+ updatedAt: new Date(),
+ conversations: [
+ {
+ id: 'conversation-1',
+ question: markdownQuestion,
+ response: markdownResponse,
+ createdAt: new Date()
+ }
+ ]
+ }
+ ];
return (
-
+
{}}
remarkPlugins={[remarkCve as any]}
- />
+ >
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
@@ -410,70 +898,106 @@ export const OpenAIIntegration = () => {
}
}, [apiKey]);
- const handleNewMessage = useCallback(async (message: string, sessionId: string = '1') => {
- setIsLoading(true);
- try {
- const response = await openai.current.chat.completions.create({
- model: 'gpt-3.5-turbo',
- messages: [{ role: 'user', content: message }],
- });
+ const handleNewMessage = useCallback(
+ async (message: string, sessionId: string = '1') => {
+ setIsLoading(true);
+ try {
+ const response = await openai.current.chat.completions.create({
+ model: 'gpt-3.5-turbo',
+ messages: [{ role: 'user', content: message }]
+ });
- const aiResponse = response.choices[0]?.message?.content || 'Sorry, I couldn\'t generate a response.';
-
- setSessions(prevSessions => {
- const sessionIndex = prevSessions.findIndex(s => s.id === sessionId);
- if (sessionIndex === -1) {
- // Create a new session
- return [...prevSessions, {
- id: sessionId,
- title: message.slice(0, 30),
- createdAt: new Date(),
- updatedAt: new Date(),
- conversations: [{
- id: Date.now().toString(),
- question: message,
- response: aiResponse,
- createdAt: new Date(),
- updatedAt: new Date()
- }]
- }];
- } else {
- // Add to existing session
- const updatedSessions = [...prevSessions];
- updatedSessions[sessionIndex] = {
- ...updatedSessions[sessionIndex],
- updatedAt: new Date(),
- conversations: [
- ...updatedSessions[sessionIndex].conversations,
+ const aiResponse =
+ response.choices[0]?.message?.content ||
+ "Sorry, I couldn't generate a response.";
+
+ setSessions(prevSessions => {
+ const sessionIndex = prevSessions.findIndex(s => s.id === sessionId);
+ if (sessionIndex === -1) {
+ // Create a new session
+ return [
+ ...prevSessions,
{
- id: Date.now().toString(),
- question: message,
- response: aiResponse,
+ id: sessionId,
+ title: message.slice(0, 30),
createdAt: new Date(),
- updatedAt: new Date()
+ updatedAt: new Date(),
+ conversations: [
+ {
+ id: Date.now().toString(),
+ question: message,
+ response: aiResponse,
+ createdAt: new Date(),
+ updatedAt: new Date()
+ }
+ ]
}
- ]
- };
- return updatedSessions;
- }
- });
+ ];
+ } else {
+ // Add to existing session
+ const updatedSessions = [...prevSessions];
+ updatedSessions[sessionIndex] = {
+ ...updatedSessions[sessionIndex],
+ updatedAt: new Date(),
+ conversations: [
+ ...updatedSessions[sessionIndex].conversations,
+ {
+ id: Date.now().toString(),
+ question: message,
+ response: aiResponse,
+ createdAt: new Date(),
+ updatedAt: new Date()
+ }
+ ]
+ };
+ return updatedSessions;
+ }
+ });
- setActiveSessionId(sessionId);;
- } catch (error) {
- console.error('Error calling OpenAI API:', error);
- } finally {
- setIsLoading(false);
- }
- }, [openai]);
+ setActiveSessionId(sessionId);
+ } catch (error) {
+ console.error('Error calling OpenAI API:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ },
+ [openai]
+ );
const handleDeleteSession = useCallback((sessionId: string) => {
setSessions(prevSessions => prevSessions.filter(s => s.id !== sessionId));
}, []);
return (
-
-
setApiKey(e.target.value)} />
-
+
+
setApiKey(e.target.value)}
+ />
+
{
onDeleteSession={handleDeleteSession}
onSendMessage={handleNewMessage}
activeSessionId={activeSessionId}
- />
+ >
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+ ))
+ }
+
+
+
+
+
);
};
+
+const CustomSessionMessage: FC
= ({
+ question,
+ response
+}) => (
+
+
+ This is my question: {question}
+
+
+);
+
+const CustomSessionListItem: FC = ({ session }) => {
+ const [open, setOpen] = useState(false);
+ const btnRef = useRef(null);
+ return (
+ <>
+ {
+ e.stopPropagation();
+ setOpen(true);
+ }}
+ >
+ {session.title}
+
+ setOpen(false)} reference={btnRef}>
+
+
+ alert('rename')}>Rename
+ alert('delete')}>Delete
+
+
+
+
+ );
+};
+
+export const CustomComponents = () => {
+ return (
+
+
+
+
+ New Session
+
+
+ {groups =>
+ groups.map(({ heading, sessions }) => (
+
+ {sessions.map(s => (
+
+
+ ))}
+
+ ))
+ }
+
+
+
+
+
+
+
+
