<commit_before>import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";

import Picture from "../../../../components/Picture";

import Message from "./Message";
import Reply from "./Reply";
import Typing from "./Typing";

const MessageGroup = styled.div(
  {
    alignItems: "flex-end",
    display: "none",
    flex: "1 1",
    position: "relative",

    i: {
      left: "7rem",
      position: "absolute",
      bottom: "2rem"
    }
  },
  props => props.mounted && { display: "flex" },
  props => props.fullWidth && { flexBasis: "100%" }
);

const Backdrop = styled.div({
  backdropFilter: "blur(2px)",
  background: "hsla(0, 0%, 80%, 0.8)",
  bottom: 0,
  display: "block",
  left: 0,
  opacity: 0,
  pointerEvents: "none",
  position: "fixed",
  right: 0,
  top: 0,
  transition: "opacity 125ms ease-in-out",
  visibility: "hidden",
  willChange: "opacity",
  zIndex: 1
});

const PictureContainer = styled.div({
  bottom: "1rem",
  flex: "0 0 4rem",
  marginRight: "1rem",
  position: "sticky",
  transition: "all 125ms ease-in-out",
  width: "4rem",
  zIndex: 2,

  "> img": {
    borderRadius: "50%",
    bottom: 0,
    position: "absolute",
    transition: "all 125ms ease-in-out",
    willChange: "border-radius, height, width"
  },

  "&:hover": {
    "> img": {
      borderRadius: "0.5rem",
      boxShadow: "0 2px 1rem hsla(0, 0%, 0%, 0.1)",
      height: "16rem",
      width: "16rem"
    },

    "+ *": {
      opacity: 1,
      pointerEvents: "auto",
      visibility: "visible"
    }
  }
});

const MessageListContainer = styled.ol(
  {
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "column",
    flex: "1 1",
    justifyContent: "flex-end",
    listStyle: "none"
  },
  props =>
    props.typing && {
      marginBottom: "4.5rem",
      transition: "all 125ms ease-in-out"
    }
);

const SkipButton = styled.button({
  appearance: "none",
  background: "none",
  border: "none",
  color: "hsl(0, 0%, 60%)",
  cursor: "pointer",
  fontSize: "1rem",
  margin: "1rem 0 1rem auto",
  outline: "none",
  textAlign: "center",
  width: "4rem"
});

const Container = styled.div({
  justifyContent: "center",
  margin: "auto",
  display: "flex",
  flexWrap: "wrap",
  maxWidth: "40rem",
  padding: "1rem",
  position: "relative",
  width: "100%"
});

export default class Chat extends React.PureComponent {
  static propTypes = {
    messages: PropTypes.array.isRequired,
    onSentFeedback: PropTypes.func.isRequired,
    onSkip: PropTypes.func.isRequired,
    onStart: PropTypes.func.isRequired,
    ready: PropTypes.bool.isRequired,
    typing: PropTypes.bool.isRequired
  };

  lastMessageRef = React.createRef();

  state = {
    mounted: false,
    sticky: true
  };

  componentDidMount() {
    this.props.onStart();
    this.setState({ mounted: true });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const { messages } = this.props;

    if (prevProps.messages.length < messages.length && this.state.sticky) {
      this.lastMessageRef.current.scrollIntoView({ behaviour: "smooth" });
    }
  }

  render() {<commit_msg>fix: properly use smooth scroll<commit_after>import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";

import Picture from "../../../../components/Picture";

import Message from "./Message";
import Reply from "./Reply";
import Typing from "./Typing";

const MessageGroup = styled.div(
  {
    alignItems: "flex-end",
    display: "none",
    flex: "1 1",
    position: "relative",

    i: {
      left: "7rem",
      position: "absolute",
      bottom: "2rem"
    }
  },
  props => props.mounted && { display: "flex" },
  props => props.fullWidth && { flexBasis: "100%" }
);

const Backdrop = styled.div({
  backdropFilter: "blur(2px)",
  background: "hsla(0, 0%, 80%, 0.8)",
  bottom: 0,
  display: "block",
  left: 0,
  opacity: 0,
  pointerEvents: "none",
  position: "fixed",
  right: 0,
  top: 0,
  transition: "opacity 125ms ease-in-out",
  visibility: "hidden",
  willChange: "opacity",
  zIndex: 1
});

const PictureContainer = styled.div({
  bottom: "1rem",
  flex: "0 0 4rem",
  marginRight: "1rem",
  position: "sticky",
  transition: "all 125ms ease-in-out",
  width: "4rem",
  zIndex: 2,

  "> img": {
    borderRadius: "50%",
    bottom: 0,
    position: "absolute",
    transition: "all 125ms ease-in-out",
    willChange: "border-radius, height, width"
  },

  "&:hover": {
    "> img": {
      borderRadius: "0.5rem",
      boxShadow: "0 2px 1rem hsla(0, 0%, 0%, 0.1)",
      height: "16rem",
      width: "16rem"
    },

    "+ *": {
      opacity: 1,
      pointerEvents: "auto",
      visibility: "visible"
    }
  }
});

const MessageListContainer = styled.ol(
  {
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "column",
    flex: "1 1",
    justifyContent: "flex-end",
    listStyle: "none"
  },
  props =>
    props.typing && {
      marginBottom: "4.5rem",
      transition: "all 125ms ease-in-out"
    }
);

const SkipButton = styled.button({
  appearance: "none",
  background: "none",
  border: "none",
  color: "hsl(0, 0%, 60%)",
  cursor: "pointer",
  fontSize: "1rem",
  margin: "1rem 0 1rem auto",
  outline: "none",
  textAlign: "center",
  width: "4rem"
});

const Container = styled.div({
  justifyContent: "center",
  margin: "auto",
  display: "flex",
  flexWrap: "wrap",
  maxWidth: "40rem",
  padding: "1rem",
  position: "relative",
  width: "100%"
});

export default class Chat extends React.PureComponent {
  static propTypes = {
    messages: PropTypes.array.isRequired,
    onSentFeedback: PropTypes.func.isRequired,
    onSkip: PropTypes.func.isRequired,
    onStart: PropTypes.func.isRequired,
    ready: PropTypes.bool.isRequired,
    typing: PropTypes.bool.isRequired
  };

  lastMessageRef = React.createRef();

  state = {
    mounted: false,
    sticky: true
  };

  componentDidMount() {
    this.props.onStart();
    this.setState({ mounted: true });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const { messages } = this.props;

    if (prevProps.messages.length < messages.length && this.state.sticky) {
      this.lastMessageRef.current.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest"
      });
    }
  }

  render() {
{'fraction_non_alphanumeric': 0.16614073840328178, 'fraction_numerical': 0.023982328810350267, 'mean_word_length': 3.055662188099808, 'pattern_counts': {'":': 8, '<': 5, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7472304', 'n_tokens_mistral': 2283, 'n_tokens_neox': 2178, 'n_words': 540}