<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import {
  Card,
  Flexbox2 as Flexbox,
  Input,
  Title,
  Spacing
} from 'bonde-styleguide'
import { graphqlApi as GraphQLAPI } from 'services/graphql'
import { Field, FormField, MutationForm, SubmitButton } from 'components/Forms'
import { required } from 'services/validations'
import {
  chatbotSettingsQuery,
  updateChatbotSettingsMutation,
  insertChatbotSettingsMutation
} from '../graphql'
import { ContentPageComponent } from 'scenes/Dashboard/components'

class ChatbotSettingsForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = { chatbotSettings: [], fetching: true }
  }

  componentDidMount () {
    const { chatbotId } = this.props
    GraphQLAPI.query({ query: chatbotSettingsQuery, variables: { chatbotId } })
      .then(({ data }) => {
        const { chatbot_settings: chatbotSettings } = data
        this.setState({ fetching: false, chatbotSettings })
      })
      .catch((err) => {
        // eslint-disable-next-line no-console
        console.error('[Chatbot] SettingsForm:', err)
        this.setState({ fetching: false })
      })
  }

  renderSubmitButton () {
    return (
      <SubmitButton formId='ChabotSettingsForm'>Salvar alterações</SubmitButton>
    )
  }

  render () {
    const { chatbotId } = this.props
    // TODO: chatbot funciona apenas com configurações do Facebook
    const mutationFormProps = {
      mutation: insertChatbotSettingsMutation,
      variables: { chatbotId, channel: 'facebook' },
      refetchQueries: [{ query: chatbotSettingsQuery, variables: { chatbotId } }],
      onSuccess: 'Pronto! Alterações salvas e publicadas no seu bot.'
    }

    if (this.state.chatbotSettings.length > 0) {
      const config = this.state.chatbotSettings.filter(c => c.channel === 'facebook')[0]
      // throw exception when facebook config not exists
      if (config === undefined) throw new Error('Bonde implement only facebook webhooks')

      mutationFormProps.mutation = updateChatbotSettingsMutation
      mutationFormProps.variables = { id: config.id }

      // fill form with default values
      mutationFormProps.values = { settings: config.settings }
    } else {
      mutationFormProps.updateQuery = (readQuery, writeQuery, data) => {
        const { insert_chatbot_settings: { returning } } = data
        const { chatbot_settings: settings } = readQuery()
        settings.push(returning[0])
        writeQuery({ chatbot_settings: settings })
      }
    }
    return (
      <MutationForm formId='ChabotSettingsForm' {...mutationFormProps}>
        <ContentPageComponent actions={this.renderSubmitButton.bind(this)}>
          {() => (
            <Flexbox vertical>
              <Card rounded={5} padding={{ x: 40, y: 40 }} margin={{ bottom: 10 }}>
                <Flexbox vertical>
                  <Spacing margin={{ bottom: 15 }}>
                    <Title.H3>Facebook</Title.H3>
                  </Spacing>
                  <Field
                    type='text'
                    name='settings.messenger_app_secret'
                    label='Chave de acesso ao Facebook app'
                    placeholder='Informe sua chave de acesso ao Facebook app'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Chave de acesso deve ser preenchido')]}
                  />
                  <Field
                    name='settings.messenger_validation_token'
                    label='Token para validação'
                    placeholder='Informe seu token para validação'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Token para validação deve ser preenchido')]}
                  />
                  <Field
                    name='settings.messenger_page_access_token'
                    label='Chave de acesso ao Facebook page'
                    placeholder='Informe sua chave de acesso ao Facebook page'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Chave de acesso ao Facebook page deve ser preenchido')]}
                  />
                </Flexbox>
              </Card>
              <Card rounded={5} padding={{ x: 40, y: 40 }}>
                <Flexbox vertical>
                  <Spacing margin={{ bottom: 15 }}>
                    <Title.H3>Wit (Inteligência Artificial)</Title.H3>
                  </Spacing>
                  {/* Should be transform settings outside facebook */}
                  <Field
                    name='settings.wit_server_access_token'
                    label='Chave de acesso a WIT (Inteligência artificial)'
                    placeholder='Informe sua chave de acesso ao WIT (Inteligência artificial)'
                    component={FormField}
                    inputComponent={Input}
                  />
                </Flexbox>
              </Card>
            </Flexbox>
          )}
        </ContentPageComponent>
      </MutationForm>
    )
  }
}

ChatbotSettingsForm.propTypes = {
  chatbotId: PropTypes.number.isRequired
}

export default ChatbotSettingsForm<commit_msg>feat(canary): add settings to default error on chatbot<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import {
  Card,
  Flexbox2 as Flexbox,
  Input,
  Title,
  Spacing
} from 'bonde-styleguide'
import { graphqlApi as GraphQLAPI } from 'services/graphql'
import { Field, FormField, MutationForm, SubmitButton } from 'components/Forms'
import { required } from 'services/validations'
import {
  chatbotSettingsQuery,
  updateChatbotSettingsMutation,
  insertChatbotSettingsMutation
} from '../graphql'
import { ContentPageComponent } from 'scenes/Dashboard/components'

class ChatbotSettingsForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = { chatbotSettings: [], fetching: true }
  }

  componentDidMount () {
    const { chatbotId } = this.props
    GraphQLAPI.query({ query: chatbotSettingsQuery, variables: { chatbotId } })
      .then(({ data }) => {
        const { chatbot_settings: chatbotSettings } = data
        this.setState({ fetching: false, chatbotSettings })
      })
      .catch((err) => {
        // eslint-disable-next-line no-console
        console.error('[Chatbot] SettingsForm:', err)
        this.setState({ fetching: false })
      })
  }

  renderSubmitButton () {
    return (
      <SubmitButton formId='ChabotSettingsForm'>Salvar alterações</SubmitButton>
    )
  }

  render () {
    const { chatbotId } = this.props
    // TODO: chatbot funciona apenas com configurações do Facebook
    const mutationFormProps = {
      mutation: insertChatbotSettingsMutation,
      variables: { chatbotId, channel: 'facebook' },
      refetchQueries: [{ query: chatbotSettingsQuery, variables: { chatbotId } }],
      onSuccess: 'Pronto! Alterações salvas e publicadas no seu bot.'
    }

    if (this.state.chatbotSettings.length > 0) {
      const config = this.state.chatbotSettings.filter(c => c.channel === 'facebook')[0]
      // throw exception when facebook config not exists
      if (config === undefined) throw new Error('Bonde implement only facebook webhooks')

      mutationFormProps.mutation = updateChatbotSettingsMutation
      mutationFormProps.variables = { id: config.id }

      // fill form with default values
      mutationFormProps.values = { settings: config.settings }
    } else {
      mutationFormProps.updateQuery = (readQuery, writeQuery, data) => {
        const { insert_chatbot_settings: { returning } } = data
        const { chatbot_settings: settings } = readQuery()
        settings.push(returning[0])
        writeQuery({ chatbot_settings: settings })
      }
    }
    return (
      <MutationForm formId='ChabotSettingsForm' {...mutationFormProps}>
        <ContentPageComponent actions={this.renderSubmitButton.bind(this)}>
          {() => (
            <Flexbox vertical>
              <Card rounded={5} padding={{ x: 40, y: 40 }} margin={{ bottom: 10 }}>
                <Flexbox vertical>
                  <Spacing margin={{ bottom: 15 }}>
                    <Title.H3>Webhook (Facebook)</Title.H3>
                  </Spacing>
                  <Field
                    type='text'
                    name='settings.messenger_app_secret'
                    label='Chave de acesso ao Facebook app'
                    placeholder='Informe sua chave de acesso ao Facebook app'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Chave de acesso deve ser preenchido')]}
                  />
                  <Field
                    name='settings.messenger_validation_token'
                    label='Token para validação'
                    placeholder='Informe seu token para validação'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Token para validação deve ser preenchido')]}
                  />
                  <Field
                    name='settings.messenger_page_access_token'
                    label='Chave de acesso ao Facebook page'
                    placeholder='Informe sua chave de acesso ao Facebook page'
                    component={FormField}
                    inputComponent={Input}
                    validate={[required('Chave de acesso ao Facebook page deve ser preenchido')]}
                  />
                </Flexbox>
              </Card>
              <Flexbox horizontal>
                <div style={{ width: '100%' }}>
                  <Card rounded={5} padding={{ x: 40, y: 40 }} margin={{ right: 10 }}>
                    <Spacing margin={{ bottom: 15 }}>
                      <Title.H3>Inteligência Artificial (Wit)</Title.H3>
                    </Spacing>
                    {/* Should be transform settings outside facebook */}
                    <Field
                      name='settings.wit_server_access_token'
                      label='Chave de acesso a WIT (Inteligência artificial)'
                      placeholder='Informe sua chave de acesso ao WIT (Inteligência artificial)'
                      component={FormField}
                      inputComponent={Input}
                    />
                  </Card>
                </div>
                <div style={{ width: '100%' }}>
                  <Card rounded={5} padding={{ x: 40, y: 40 }}>
                    <Spacing margin={{ bottom: 15 }}>
                      <Title.H3>Padrão de mensagem</Title.H3>
                    </Spacing>
                    {/* Should be transform settings outside facebook */}
                    <Field
                      name='settings.default_error_message'
                      label='Mensagem de erro'
                      placeholder='Informe uma resposta padrão para erros ocorridos no BOT'
                      component={FormField}
                      inputComponent={Input}
                    />
                  </Card>
                </div>
              </Flexbox>
            </Flexbox>
          )}
        </ContentPageComponent>
      </MutationForm>
    )
  }
}

ChatbotSettingsForm.propTypes = {
  chatbotId: PropTypes.number.isRequired
}

export default ChatbotSettingsForm
{'fraction_non_alphanumeric': 0.1005332633971501, 'fraction_numerical': 0.005682314887665006, 'mean_word_length': 1.9013441541973117, 'pattern_counts': {'":': 0, '<': 70, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '835839', 'n_tokens_mistral': 3111, 'n_tokens_neox': 2920, 'n_words': 718}