CODEWITHSUNDEEP
typescriptnext.jsautoscroll
Kuthulu
Kuthulu

Reputation: 11

How to make auto scroll component if answer return a form?

I working on a chatbot. I have a 'conversation' component to auto scroll to bottom when question or answer being render.

import { Box, useTheme } from '@mui/material';
import { useEffect, useRef } from 'react';
import Answer from 'src/components/question-answer/answer';
import Question from 'src/components/question-answer/question';
import { useAppSelector } from 'src/redux/hook';

export default function Conversation() {
  const theme = useTheme();
  const ref = useRef<null | (HTMLDivElement & { firstRender: boolean })>(null);
  const conversationBoxRef = useRef<null | HTMLDivElement>(null);
  const { data } = useAppSelector((state) => state.conversation);

  useEffect(() => {
    if (ref.current) {
      ref.current.firstRender = true;
    }
    if (ref.current && ref.current.firstRender) {
      ref.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
    }
  }, [conversationBoxRef.current?.clientHeight]);

  return (
    <Box
      sx={{
        overflow: 'auto scroll',
        height: 'calc(100vh - 300px)',
        scrollSnapType: 'y mandatory',
        [theme.breakpoints.down('sm')]: {
          height: '400px',
          padding: '0 1rem 0 1rem',
        },
        '&::-webkit-scrollbar-thumb': {
          background: '#D3D3D3',
          borderRadius: '6px',
        },
        maxWidth: '760px',
        padding: '0 1.5rem 0 1.5rem',
        width: '100%',
        marginLeft: 'auto',
        marginRight: 'auto',
      }}
    >
      <Box ref={conversationBoxRef}>
        {Object.entries(data).map((item) => {
          const id = item[0];
          const _data = item[1];

          return (
            <Box key={id}>
              <Box sx={{ mb: 2 }}>
                <Question question={_data.question} />
              </Box>
              <Box sx={{ mb: 2 }}>
                <Answer id={id} conversationData={_data} />
              </Box>
            </Box>
          );
        })}
      </Box>
      <Box ref={ref} />
    </Box>
  );
}

The code work just fine if answer is a string or paragraph, but when the answer return a submit form, it not scroll to bottom of the form, just half of it. I need help in the code above.

Many thanks

Upvotes: 1

Views: 22

Answers (0)

Related Questions