<commit_before>import { Collapsible, lang } from 'botpress/shared'
import _ from 'lodash'
import React, { FC, useState } from 'react'

import { IUser } from '../../../../types'
import style from '../../style.scss'

import UserName from './UserName'

const UserProfile: FC<IUser> = user => {
  const [expanded, setExpanded] = useState(true)

  return (
    <div>
      <div className={style.profileHeader}>
        <UserName user={user} />
        {user.attributes?.email && <p>{user.attributes?.email}</p>}
      </div>
      <Collapsible
        opened={expanded}
        toggleExpand={() => setExpanded(!expanded)}
        name={lang.tr('module.hitlnext.user.variables.heading')}
        ownProps={{ transitionDuration: 10 }}
      >
        {!_.isEmpty(user.attributes) && (
          <table className={style.table}>
            <thead>
              <tr>
                <th>{lang.tr('module.hitlnext.user.variables.variable')}</th>
                <th>{lang.tr('module.hitlnext.user.variables.value')}</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(user.attributes).map((entry, index) => (
                <tr key={index}>
                  <td>{entry[0]}</td>
                  <td>{entry[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Collapsible>
    </div>
  )
}

export default UserProfile<commit_msg>feat: display user's object props as string on UserProfile for hitlnext (#5342)<commit_after>import { Collapsible, lang } from 'botpress/shared'
import _ from 'lodash'
import React, { FC, useState } from 'react'

import { IUser } from '../../../../types'
import style from '../../style.scss'

import UserName from './UserName'

const UserProfile: FC<IUser> = (user) => {
  const [expanded, setExpanded] = useState(true)

  return (
    <div>
      <div className={style.profileHeader}>
        <UserName user={user} />
        {user.attributes?.email && <p>{user.attributes?.email}</p>}
      </div>
      <Collapsible
        opened={expanded}
        toggleExpand={() => setExpanded(!expanded)}
        name={lang.tr('module.hitlnext.user.variables.heading')}
        ownProps={{ transitionDuration: 10 }}
      >
        {!_.isEmpty(user.attributes) && (
          <table className={style.table}>
            <thead>
              <tr>
                <th>{lang.tr('module.hitlnext.user.variables.variable')}</th>
                <th>{lang.tr('module.hitlnext.user.variables.value')}</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(user.attributes).map((entry, index) => (
                <tr key={index}>
                  <td>{entry[0]}</td>
                  <td>{_.isObject(entry[1]) ? JSON.stringify(entry[1]) : entry[1]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Collapsible>
    </div>
  )
}

export default UserProfile
{'fraction_non_alphanumeric': 0.17128378378378378, 'fraction_numerical': 0.00472972972972973, 'mean_word_length': 1.9201183431952662, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 65, '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': '677097', 'n_tokens_mistral': 902, 'n_tokens_neox': 884, 'n_words': 162}