using chats instead of notes for the chat

src/chat/ChatOutput.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 import ChatMessage from "./ChatMessage";
-import { Box, Button } from "@mui/material";
+import { Box, Button, ListItemButton } from "@mui/material";
 
-import { Note } from "models";
+// import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
 
 interface Props {
-  messages: Note[];
+  messages: pond.Chat[];
   attachmentMap?: Map<string, pond.FileReference[]>;
   totalMessages: number;
   scrollPos: number;
@@ -54,33 +54,31 @@ export default function ChatOutput(props: Props) {
     let display = props.messages.map((curMessage, index) => (
       <div key={index}>
         <ChatMessage
-          note={curMessage}
+          chat={curMessage}
           index={index}
-          attachments={props.attachmentMap?.get(curMessage.key())}
+          // attachments={props.attachmentMap?.get(curMessage.note?.settings?.key)}
           removeNoteMethod={props.removeNoteMethod}
         />
-        {props.scrollPos !== 0 && index === props.scrollPos && <ScrollTo />}
+        {/* {props.scrollPos !== 0 && index === props.scrollPos && <ScrollTo />} */}
+        <ScrollTo />
       </div>
     ));
     return display;
   };
 
   return (
-    <Box
-      //height="85%"
-      // height="auto"
-      style={{
-        overflowY: "scroll",
-        overflowX: "hidden",
-        // borderRadius: "4px"
-      }}>
+    <Box style={{
+      overflowY: "scroll",
+      overflowX: "hidden",
+    }}>
       {props.messages.length < props.totalMessages && (
-        <div style={{ textAlign: "center" }}>
-          <Button onClick={seeMore}>See More</Button>
-        </div>
+        <ListItemButton onClick={seeMore} sx={{ justifyContent: "center"}}>
+          <Button >See More</Button>
+        </ListItemButton>
       )}
       {displayMessages()}
       {props.scrollPos === 0 && <ScrollTo />}
+      {/* <ScrollTo/> */}
     </Box>
   );
 }