Made the header button show/hide work

app/page.tsx

@@ -1,13 +1,12 @@
+"use client"
 // LandingPage.tsx
-"use client";
-
 import React, { useState, useEffect, useRef } from 'react';
 import Header from './Header';
 import History from './History';
 import Models from './Models';
 import Conversation from './Conversation';
 import InputForm from './InputForm';
-import './styles.css';
+import './styles/master.css';
 
 const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
@@ -42,7 +41,6 @@ const LandingPage: React.FC = () => {
     setShowDivs(prevState => !prevState);
   };
 
-  // Example messages array
   const messages = [
     'User: Hello!',
     'AI: Hi there!',
@@ -50,14 +48,39 @@ const LandingPage: React.FC = () => {
     'AI: I’m good, thank you!'
   ];
 
+  const handleResendClick = () => {
+    console.log('Resend button clicked');
+    // Handle resend action
+  };
+
+  const handleEditClick = () => {
+    console.log('Edit button clicked');
+    // Handle edit action
+  };
+
+  const handleCopyClick = () => {
+    console.log('Copy button clicked');
+    // Handle copy action
+  };
+
   return (
     <div className="App">
       <Header toggleDivs={toggleDivs} showDivs={showDivs} />
       <div className="container">
-        {showDivs && <History />}
-        {showDivs && <Models />}
-        <Conversation ref={conversationRef} messages={messages} />
-        <InputForm />
+        <div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
+          <History />
+          <Models />
+        </div>
+        <div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
+          <Conversation
+            ref={conversationRef}
+            messages={messages}
+            onResendClick={handleResendClick}
+            onEditClick={handleEditClick}
+            onCopyClick={handleCopyClick}
+          />
+          <InputForm />
+        </div>
       </div>
     </div>
   );