From 48668f7f6e2cb251b2463116e8cf8ddf3bc177f5 Mon Sep 17 00:00:00 2001 From: Sage The DM Date: Wed, 18 Sep 2024 10:03:36 +0200 Subject: [PATCH] Split the pages up --- app/Conversation.tsx | 39 ++++++++++++ app/Header.tsx | 34 +++++++++++ app/History.tsx | 36 +++++++++++ app/InputForm.tsx | 22 +++++++ app/Models.tsx | 43 +++++++++++++ app/layout.tsx | 4 ++ app/page.tsx | 141 ++++++++----------------------------------- 7 files changed, 203 insertions(+), 116 deletions(-) create mode 100644 app/Conversation.tsx create mode 100644 app/Header.tsx create mode 100644 app/History.tsx create mode 100644 app/InputForm.tsx create mode 100644 app/Models.tsx diff --git a/app/Conversation.tsx b/app/Conversation.tsx new file mode 100644 index 0000000..1a37518 --- /dev/null +++ b/app/Conversation.tsx @@ -0,0 +1,39 @@ +// Conversation.tsx +import React, { ForwardedRef } from 'react'; + +interface ConversationProps { + messages: string[]; +} + +const Conversation = React.forwardRef(({ messages }, ref: ForwardedRef) => { + return ( +
+
+ {messages.map((message, index) => { + const isUserMessage = message.startsWith('User:'); + return ( +
+ {message} +
+ ); + })} +
+ + + +
+
+
+ ); +}); + +export default Conversation; diff --git a/app/Header.tsx b/app/Header.tsx new file mode 100644 index 0000000..7ea87c9 --- /dev/null +++ b/app/Header.tsx @@ -0,0 +1,34 @@ +// Header.tsx +import React from 'react'; + +interface HeaderProps { + toggleDivs: () => void; + showDivs: boolean; +} + +const Header: React.FC = ({ toggleDivs, showDivs }) => { + return ( +
+
+ +
+
+ ); +}; + +export default Header; diff --git a/app/History.tsx b/app/History.tsx new file mode 100644 index 0000000..eb21840 --- /dev/null +++ b/app/History.tsx @@ -0,0 +1,36 @@ +// History.tsx +import React from 'react'; + +const History: React.FC = () => { + return ( +
+ +
+ ); +}; + +export default History; diff --git a/app/InputForm.tsx b/app/InputForm.tsx new file mode 100644 index 0000000..9682357 --- /dev/null +++ b/app/InputForm.tsx @@ -0,0 +1,22 @@ +// InputForm.tsx +import React from 'react'; + +const InputForm: React.FC = () => { + return ( +
+ + + +
+ ); +}; + +export default InputForm; diff --git a/app/Models.tsx b/app/Models.tsx new file mode 100644 index 0000000..98c72c8 --- /dev/null +++ b/app/Models.tsx @@ -0,0 +1,43 @@ +// Models.tsx +import React from 'react'; + +const Models: React.FC = () => { + return ( +
+
+
+

Different AI models

+
+
+
+ + + + + {/* Add more model buttons here */} +
+
+
+
+ ); +}; + +export default Models; diff --git a/app/layout.tsx b/app/layout.tsx index a14e64f..3bf71eb 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,6 +10,10 @@ export default function RootLayout({ }) { return ( + + + AI Assistant + {children} ) diff --git a/app/page.tsx b/app/page.tsx index 63d9c78..cc79706 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,14 +1,19 @@ -"use client"; // Add this at the top to mark this file as a Client Component +// LandingPage.tsx +"use client"; import React, { useState, useEffect, useRef } from 'react'; -import './styles.css'; // Make sure this matches your CSS file path +import Header from './Header'; +import History from './History'; +import Models from './Models'; +import Conversation from './Conversation'; +import InputForm from './InputForm'; +import './styles.css'; -const App = () => { - const [showDivs, setShowDivs] = useState(true); // Default to true to show divs on load +const LandingPage: React.FC = () => { + const [showDivs, setShowDivs] = useState(true); const conversationRef = useRef(null); useEffect(() => { - // Scroll to bottom when the component mounts or updates const scrollToBottom = () => { const conversation = conversationRef.current; if (conversation) { @@ -16,11 +21,9 @@ const App = () => { } }; - scrollToBottom(); // Scroll to the bottom when the page loads + scrollToBottom(); - // Use MutationObserver to efficiently observe changes in the conversation element const observer = new MutationObserver(scrollToBottom); - if (conversationRef.current) { observer.observe(conversationRef.current, { childList: true, @@ -39,119 +42,25 @@ const App = () => { setShowDivs(prevState => !prevState); }; + // Example messages array + const messages = [ + 'User: Hello!', + 'AI: Hi there!', + 'User: How are you?', + 'AI: I’m good, thank you!' + ]; + return (
-
-
- -
-
- +
- {showDivs && ( -
-
-
    -
  • - history1 -
    • - {/* Add more history items here */} -
-
-
- )} - - {showDivs && ( -
-
-
-

Different AI models

-
-
-
- - - - - - - -
-
-
-
- )} - -
-
- {/* Render messages here */} - {/* Replace the following example with dynamic rendering */} -
User: Example message
-
AI: Example response
-
-
- -
- - - -
+ {showDivs && } + {showDivs && } + +
); }; -export default App; +export default LandingPage;