hunk.code_window:     cy.contains("Appsmith Bot").should("be.visible");
     });
     // create another comment since the first one is a private bot thread
     it("another comment can be created after dismissing the first one", () => {
       cy.get(commonLocators.canvas).click(10, 10);
       // wait for transition to be completed
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(300);
       typeIntoDraftEditor(commentsLocators.mentionsInput, newCommentText1);
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep
hunk.after_edit:     cy.get(commonLocators.canvas).click(60, 10);
  
hunk.file_path: app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Comments/AddComments_spec.js
hunk.type: replace
file: import { getTypographyByKey } from "constants/DefaultTheme";
  import React from "react";
  import styled from "styled-components";
  
  const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    ${(props) => getTypographyByKey(props, "p1")};
    color: ${(props) => props.theme.colors.numberedStep.number};
    height: 100%;
  `;
  
  const Line = styled.div`
    width: 1px;
    flex: 1;
    background-color: ${(props) => props.theme.colors.numberedStep.line};
  `;
  
  function NumberedStep(props: { current: number; total: number }) {
    const { current, total } = props;
    return (
      <Container>
        <span>
          {current}/{total}
        </span>
        <Line />
      </Container>
    );
  }
  
  export default NumberedStep;
  