<commit_before>import React, {Component, Fragment} from 'react'

import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import gravatar from "../../shared/gravatar"
import {ThemeProvider} from 'emotion-theming'

import graphql from "../../graphql/client"
import {last} from 'lodash'
import Moment from 'react-moment';

import { 
    AGENTS
} from "../../graphql/queries"

import {
  GridElement,
  ChatContainer,
  HeaderTitle,
  ConversationButtons,
  FixedHeader,
  ChatMessageItem,
  ChatAvatar,
  StatusItem
} from './styles'

import Progress from '../../shared/Progress'
import OptionMenu from './optionMenu'
import FilterMenu from './filterMenu'

import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button'
import CheckIcon from '@material-ui/icons/Check'
import InboxIcon from '@material-ui/icons/Inbox'
import PriorityHighIcon from '@material-ui/icons/PriorityHigh'

import theme from './theme'
import themeDark from './darkTheme'
import EditorContainer from './editorStyles'

import ConversationEditor from './Editor.js'
import {getConversation, 
  insertComment, 
  insertNote,
  setLoading,
  clearConversation,
  appendMessage,
  updateConversationState,
  updateConversationPriority,
  assignAgent
} from '../../actions/conversation'

import { camelCase, isEmpty } from 'lodash';

import DraftRenderer from '../../textEditor/draftRenderer'

class ConversationContainerShow extends Component {

  constructor(props){
    super(props)
    this.state = {
      appUser: {},
      subscription: false
    }

    this.fetching = false
  }

  componentDidMount(){
    this.getMessages( this.scrollToLastItem )
  }

  componentDidUpdate(PrevProps, PrevState){
    if(PrevProps.match && PrevProps.match.params.id !== this.props.match.params.id){
        this.props.dispatch(clearConversation( ()=>{
          this.getMessages(this.scrollToLastItem )
        }))
    }

    if( PrevProps.conversation.collection && 
      this.props.conversation.collection && 
      this.props.conversation.collection.length != PrevProps.conversation.collection.length){
      this.scrollToLastItem()
    }
  }

  handleScroll = (e) => {
    let element = e.target
    if (element.scrollTop === 0) { // on top
      if (this.props.conversation.meta.next_page && !this.props.conversation.loading)
        this.getMessages( (item)=> {
          this.scrollToItem(item)
       })
    }
  }

  scrollToItem = (item)=>{
    if(item){
      this.refs.overflow.scrollTop = document.querySelector(`#message-id-${item}`).offsetHeight
    }else{
      this.scrollToLastItem()
    }
  }

  scrollToLastItem = ()=>{
    if(!this.refs.overflow) return
    this.refs.overflow.scrollTop = this.refs.overflow.scrollHeight;
  }

  getMessages = (cb)=>{
    const opts = {id: this.props.match.params.id } 

    const lastItem = last(this.props.conversation.collection)

    this.props.dispatch(getConversation(opts, ()=>{
      //this.getMainUser(this.state.conversation.mainParticipant.id)
      // TODO: this will scroll scroll to last when new items 
      // are added on pagination (scroll up)!
      cb ? cb(lastItem ? lastItem.id : null) : null
    }))
  }

  insertComment = (comment, cb)=>{
    this.props.dispatch(insertComment(comment, ()=>{
      cb ? cb() : null
    }))
  }

  insertNote = (comment, cb)=>{
    this.props.dispatch(insertNote(comment, ()=>{
      cb ? cb() : null
    }))
  }

  getAgents = (cb)=>{
    graphql(AGENTS, {appKey: this.props.appId }, {
      success: (data)=>{
        cb(data.app.agents)
      }, 
      error: (error)=>{

      }
    })
  }

  setAgent = (id, cb)=>{
    this.props.dispatch(
      assignAgent(id, cb)
    )
  }

  updateConversationState = (state, cb)=>{
    this.props.dispatch(updateConversationState(state, ()=>{
      cb ? cb(data.updateConversationState.conversation) : null
    }))
  }

  toggleConversationPriority = (e, cb)=>{
    this.props.dispatch(updateConversationPriority(()=>{
      cb ? cb(data.updateConversationState.conversation) : null
    }))
  }

  render(){
    return <Fragment>
          
            <GridElement grow={2}>

              {
                this.props.conversation.id ?
              
                <ChatContainer>
                  
                  <FixedHeader>
                    
                    <HeaderTitle>
                      <p>
                        Conversation with {" "}
                        {
                          this.props.conversation.mainParticipant ? 
                          <b>{this.props.conversation.mainParticipant.displayName}</b> 
                          : null
                        }
                      </p>

                    </HeaderTitle>

                    <ConversationButtons>

                      <OptionMenu <commit_msg>Update container.js<commit_after>import React, {Component, Fragment} from 'react'

import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import gravatar from "../../shared/gravatar"
import {ThemeProvider} from 'emotion-theming'

import graphql from "../../graphql/client"
import {last} from 'lodash'
import Moment from 'react-moment';

import { 
    AGENTS
} from "../../graphql/queries"

import {
  GridElement,
  ChatContainer,
  HeaderTitle,
  ConversationButtons,
  FixedHeader,
  ChatMessageItem,
  ChatAvatar,
  StatusItem
} from './styles'

import Progress from '../../shared/Progress'
import OptionMenu from './optionMenu'
import FilterMenu from './filterMenu'

import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Button from '@material-ui/core/Button'
import CheckIcon from '@material-ui/icons/Check'
import InboxIcon from '@material-ui/icons/Inbox'
import PriorityHighIcon from '@material-ui/icons/PriorityHigh'

import theme from './theme'
import themeDark from './darkTheme'
import EditorContainer from './editorStyles'

import ConversationEditor from './Editor.js'
import {getConversation, 
  insertComment, 
  insertNote,
  setLoading,
  clearConversation,
  appendMessage,
  updateConversationState,
  updateConversationPriority,
  assignAgent
} from '../../actions/conversation'

import { camelCase, isEmpty } from 'lodash';

import DraftRenderer from '../../textEditor/draftRenderer'

class ConversationContainerShow extends Component {

  constructor(props){
    super(props)
    this.state = {
      appUser: {},
      subscription: false
    }

    this.fetching = false
  }

  componentDidMount(){
    this.getMessages( this.scrollToLastItem )
  }

  componentDidUpdate(PrevProps, PrevState){
    if(PrevProps.match && PrevProps.match.params.id !== this.props.match.params.id){
        this.props.dispatch(clearConversation( ()=>{
          this.getMessages(this.scrollToLastItem )
        }))
    }

    if( PrevProps.conversation.collection && 
      this.props.conversation.collection && 
      this.props.conversation.collection.length != PrevProps.conversation.collection.length){
      this.scrollToLastItem()
    }
  }

  handleScroll = (e) => {
    let element = e.target
    if (element.scrollTop === 0) { // on top
      if (this.props.conversation.meta.next_page && !this.props.conversation.loading)
        this.getMessages( (item)=> {
          this.scrollToItem(item)
       })
    }
  }

  scrollToItem = (item)=>{
    if(item){
      this.refs.overflow.scrollTop = document.querySelector(`#message-id-${item}`).offsetHeight
    }else{
      this.scrollToLastItem()
    }
  }

  scrollToLastItem = ()=>{
    if(!this.refs.overflow) return
    this.refs.overflow.scrollTop = this.refs.overflow.scrollHeight;
  }

  getMessages = (cb)=>{
    const opts = {id: this.props.match.params.id } 

    const lastItem = last(this.props.conversation.collection)

    this.props.dispatch(getConversation(opts, ()=>{
      //this.getMainUser(this.state.conversation.mainParticipant.id)
      // TODO: this will scroll scroll to last when new items 
      // are added on pagination (scroll up)!
      cb ? cb(lastItem ? lastItem.id : null) : null
    }))
  }

  insertComment = (comment, cb)=>{
    this.props.dispatch(insertComment(comment, ()=>{
      cb ? cb() : null
    }))
  }

  insertNote = (comment, cb)=>{
    this.props.dispatch(insertNote(comment, ()=>{
      cb ? cb() : null
    }))
  }

  getAgents = (cb)=>{
    graphql(AGENTS, {appKey: this.props.appId }, {
      success: (data)=>{
        cb(data.app.agents)
      }, 
      error: (error)=>{

      }
    })
  }

  setAgent = (id, cb)=>{
    this.props.dispatch(
      assignAgent(id, cb)
    )
  }

  updateConversationState = (state, cb)=>{
    this.props.dispatch(updateConversationState(state, ()=>{
      cb ? cb(data.updateConversationState.conversation) : null
    }))
  }

  toggleConversationPriority = (e, cb)=>{
    this.props.dispatch(updateConversationPriority(()=>{
      cb ? cb(data.updateConversationState.conversation) : null
    }))
  }

  render(){
    return <Fragment>
          
            <GridElement grow={2}>

              {
                this.props.conversation.id ?
              
                <ChatContainer>
                  
                  <FixedHeader>
                    
                    <HeaderTitle>
                      <span>
                        Conversation with {" "}
                        {
                          this.props.conversation.mainParticipant ? 
                          <b>{this.props.conversation.mainParticipant.displayName}</b> 
                          : null
                        }
                      </span>

                    </HeaderTitle>

                    <ConversationButtons>

                      <OptionMenu 
{'fraction_non_alphanumeric': 0.12931915763647517, 'fraction_numerical': 0.0004089143324473523, 'mean_word_length': 2.390987868284229, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 63, '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': '823543', 'n_tokens_mistral': 2963, 'n_tokens_neox': 2822, 'n_words': 547}