brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chat automatically adjusts scrollbar so as to not effect the chat view when more chats are loaded

Browse source
This commit is contained in:
Carter 2024-12-06 10:14:09 -06:00
parent cf45fcb98a
commit 48549bf4de
4 changed files with 27 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/chat/Chat.tsx
View file

@ -1,14 +1,12 @@
import { Box, CircularProgress } from "@mui/material";
import { useGlobalState, useNoteAPI, useTeamAPI } from "providers";
import { useGlobalState, useNoteAPI } from "providers";
import React from "react";
import { useCallback } from "react";
import { useEffect } from "react";
import { useState } from "react";
import ChatInput from "./ChatInput";
import ChatOutput from "./ChatOutput";
import { Note } from "models";
import { pond } from "protobuf-ts/pond";
import moment from "moment-timezone";
interface Props {
objectKey: string;
@ -24,17 +22,20 @@ export default function Chat(props: Props) {
const [totalMessages, setTotalMessages] = useState(0);
const [scrollPos, setScrollPos] = useState(0);
const [{ user }] = useGlobalState();
const [attachmentMap, setAttachmentMap] = useState<Map<string, pond.FileReference[]>>(new Map());
// const [attachmentMap, setAttachmentMap] = useState<Map<string, pond.FileReference[]>>(new Map());
useEffect(() => {
console.log(totalMessages)
}, [totalMessages])
console.log(scrollPos)
}, [scrollPos])
const loadChats = () => {
setLoading(true)
noteAPI.listChats(10, chats.length, "desc", "timestamp", objectKey).then(resp => {
// if (loaded) setScrollPos(chats.length-10)
// setScrollPos(chats.length)
setChats(resp.data.chats ? resp.data.chats.reverse().concat(chats) : [])
setScrollPos(resp.data.chats.reverse().concat(chats).length)
setTotalMessages(resp.data.total)
}).finally(() => {
setLoading(false)
@ -90,7 +91,7 @@ export default function Chat(props: Props) {
<ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
<ChatOutput
totalMessages={totalMessages}
attachmentMap={attachmentMap}
// attachmentMap={attachmentMap}
messages={chats}
scrollPos={scrollPos}
removeNoteMethod={removeNote}