How to use the @fluentui/react.ChatMessage.className function in @fluentui/react

import { ChatMessage } from '@fluentui/react'

const selectors = {
  message: `.${ChatMessage.className}`,
}

const config: ScreenerTestsConfig = {
  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
  steps: [
    (builder, keys) => builder.keys('body', keys.tab).snapshot('Focuses last message'),
    (builder, keys) =>
      builder
        .click(selectors.message)
        .keys(selectors.message, keys.downArrow)
        .snapshot('Focuses second message'),
  ],
}

export default config

import { Button, ChatMessage, ChatItem } from '@fluentui/react'

const classNames = {
  threadedMessage: {
    thread: `${ChatMessage.className}__thread`,
    threadBody: `${ChatMessage.className}__thread-body`,
    innerContent: `${ChatMessage.slotClassNames.content}-inner`,
    author: `${ChatMessage.slotClassNames.author}-inner`,
    timestamp: `${ChatMessage.slotClassNames.timestamp}-inner`,
  },
  threadReplies: {
    trigger: `${Button.className}__reply`,
    message: `${ChatMessage.className}__reply`,
    gutter: `${ChatItem.className}__reply__gutter`,
    chatItem: `${ChatItem.className}__reply`,
    chatItemMessage: `${ChatItem.slotClassNames.message}-reply`,
  },
  replyEditor: `${ChatMessage.className}__reply-editor`,
}

export default classNames