refactor conversation class

- Create a new class `Conversation` in `api.ts` to handle conversations.
- Move the logic for getting messages and sending messages to the `Conversation` class.
- Add a constructor to initialize the `Conversation` with the appropriate API instance and conversation ID.
- Add a `getMessages` method to fetch messages for the conversation.
- Add a `chat` method to send a message in the conversation.
- Update the code to use the `Conversation` class instead of making API calls directly.
- Update the `Home` component to use the new `Conversation` class for fetching messages and sending messages.
- Remove unused imports and variables.

www/app/page.tsx

@@ -150,10 +150,7 @@ export default function Home() {
             </p>
           </section>
         )}
-        <section
-          className="flex flex-col flex-1 overflow-y-auto lg:px-5"
-          ref={messageContainerRef}
-        >
+        <section className="flex flex-col flex-1 overflow-y-auto lg:px-5">
           {messages.map((message, i) => (
             <Message isUser={message.isUser} key={i}>
               <MarkdownWrapper text={message.text} />
@@ -178,6 +175,9 @@ export default function Home() {
             className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 text-gray-400 rounded-2xl border-2 ${
               canSend ? " border-green-200" : "border-red-200 opacity-50"
             }`}
+            className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 text-gray-400 rounded-2xl border-2 ${
+              canSend ? " border-green-200" : "border-red-200 opacity-50"
+            }`}
             disabled={!canSend}
           />
           <button
@@ -194,5 +194,12 @@ export default function Home() {
         isThoughtsOpen={isThoughtsOpen}
       />
     </main>
+      </div>
+      <Thoughts
+        thought={thought}
+        setIsThoughtsOpen={setIsThoughtsOpen}
+        isThoughtsOpen={isThoughtsOpen}
+      />
+    </main>
   );
 }