hunk.code_window:   pageLevelWebsocketWriteEvent({
       type: PAGE_LEVEL_SOCKET_EVENTS.STOP_EDITING_APP,
     });
   export const collabShareUserPointerEvent = (payload: any) =>
  
hunk.labels: keep add keep keep keep
hunk.after_edit:     payload: pageId,
  
hunk.file_path: app/client/src/actions/appCollabActions.ts
hunk.type: add
file: import React from "react";
  import { connectCurrentRefinements } from "react-instantsearch-dom";
  import styled from "styled-components";
  import { ReactComponent as CloseIcon } from "assets/icons/help/close_blue.svg";
  import { getSnippetFilterLabel } from "./utils";
  import { useStore } from "react-redux";
  
  const RefinementListContainer = styled.div`
    background: ${(props) => props.theme.colors.globalSearch.primaryBgColor};
    display: flex;
    padding: 5px 5px 0;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: ${(props) => props.theme.colors.globalSearch.secondaryTextColor};
    .pill-container {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .refinement-pill {
        margin: 2px 5px 0;
        padding: 5px;
        color: ${(props) => props.theme.colors.globalSearch.primaryTextColor};
        border: 1px solid
          ${(props) => props.theme.colors.globalSearch.primaryBorderColor};
        svg {
          cursor: pointer;
          transition: 0.2s all ease;
          margin-left: ${(props) => props.theme.spaces[4]}px;
          path {
            fill: #4b4848;
          }
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  `;
  
  function RefinementPill({ item, refine, state }: any) {
    return (
      <div className="refinement-pill">
        <span>{getSnippetFilterLabel(state, item.label)}</span>
        <CloseIcon
          onClick={(event) => {
            event.preventDefault();
            refine(item.value);
          }}
        />
      </div>
    );
  }
  
  function SnippetRefinements({ items, refine }: any) {
    const store = useStore();
    return (
      <RefinementListContainer>
        <span>Showing filtered results: </span>
        <div className="pill-container">
          {(items[0]?.items || []).map((item: any) => (
            <RefinementPill
              item={item}
              key={item.label}
              refine={refine}
              state={store.getState()}
            />
          ))}
        </div>
      </RefinementListContainer>
    );
  }
  
  export default connectCurrentRefinements(SnippetRefinements);
  