hunk.code_window:   }
   `;
   const getMessage = () => {
     const msg = `Someone else is also editing this page. Your changes may get overwritten. Realtime Editing is coming soon.`;
     return msg;
   };
   export default function ConcurrentPageEditorToast() {
     const [isForceHidden, setIsForceHidden] = useState(true);
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit:   const msg = `Other users editing this page may overwrite your changes. Realtime editing is coming soon!`;
  
hunk.file_path: app/client/src/comments/ConcurrentPageEditorToast.tsx
hunk.type: replace
file: import Icon from "components/ads/Icon";
  import { Theme } from "constants/DefaultTheme";
  import React from "react";
  import styled, { withTheme } from "styled-components";
  import { getTypographyByKey } from "constants/DefaultTheme";
  import { VIEW_LATEST, createMessage } from "constants/messages";
  
  const Container = styled.div`
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    color: ${(props) => props.theme.colors.comments.viewLatest};
    text-transform: uppercase;
    display: flex;
    ${(props) => getTypographyByKey(props, "btnMedium")}
    & .view-latest {
      margin-right: ${(props) => props.theme.spaces[1]}px;
    }
  `;
  
  const ScrollToLatest = withTheme(
    ({ scrollToBottom, theme }: { scrollToBottom: () => void; theme: Theme }) => {
      return (
        <Container onClick={scrollToBottom}>
          <span className="view-latest">{createMessage(VIEW_LATEST)}</span>
          <Icon
            fillColor={theme.colors.comments.viewLatest}
            hoverFillColor={theme.colors.comments.viewLatest}
            name="down-arrow-2"
          />
        </Container>
      );
    },
  );
  
  export default ScrollToLatest;
  