public render()

in packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx [77:148]
62 lines of code
6 McCabe index (conditional complexity)

  public render() {
    const {
      botId,
      conversationId,
      currentUserId = '',
      directLine,
      locale,
      mode,
      webchatStore,
      webSpeechPonyfillFactory,
    } = this.props;

    const currentUser = { id: currentUserId, name: 'User' };
    const isDisabled =
      mode === 'transcript' || mode === 'debug' || this.props.restartStatus === RestartConversationStatus.Started;

    // Due to needing to make idiosyncratic style changes, Emulator is using `createStyleSet` instead of `createStyleOptions`. The object below: {...webChatStyleOptions, hideSendBox...} was formerly passed into the `styleOptions` parameter of React Web Chat. If further styling modifications are desired using styleOptions, simply pass it into the same object in createStyleSet below.

    const styleSet = createStyleSet({ ...webChatStyleOptions, hideSendBox: isDisabled });

    // Overriding default styles of webchat as these properties are not exposed directly
    styleSet.fileContent = {
      ...styleSet.fileContent,
      background: styles.bubbleBackground,
      '& .webchat__fileContent__fileName': {
        color: styles.bubbleContentColor,
      },
      '& .webchat__fileContent__size': {
        color: styles.bubbleContentColor,
      },
      '& .webchat__fileContent__downloadIcon': {
        fill: styles.bubbleContentColor,
      },
      '& .webchat__fileContent__badge': {
        padding: '4px',
      },
    };

    if (directLine) {
      const bot = {
        id: botId || 'bot',
        name: 'Bot',
      };

      const boundUpdateSelectedActivity = this.updateSelectedActivity.bind(this);

      return (
        <div className={styles.chat}>
          <Composer
            store={webchatStore}
            activityMiddleware={this.createActivityMiddleware}
            cardActionMiddleware={this.cardActionMiddleware}
            bot={bot}
            directLine={directLine}
            disabled={isDisabled}
            key={conversationId}
            locale={locale}
            styleSet={styleSet}
            userID={currentUser.id}
            username={currentUser.name || 'User'}
            webSpeechPonyfillFactory={webSpeechPonyfillFactory}
          >
            <BasicWebChat />
            <TranscriptFocusListener updateSelectedActivity={boundUpdateSelectedActivity} />
          </Composer>
          <ConnectionMessageContainer documentId={this.props.documentId} />
        </div>
      );
    }

    return <div className={styles.disconnected}>Not Connected</div>;
  }