Repository: LAION-AI/Open-Assistant
File: website/src/components/Chat/ChatMessageEntry.tsx (TypeScript)

Code before:
                bg: "gray.800",
              }}
              autoFocus
            ></Textarea>
          </Box>
        )}
        {!isEditing && (
          <Flex justifyContent={pagingSlot ? "space-between" : "end"} mt="1">
            {pagingSlot}
            {isAssistant && (
              <MessageInlineEmojiRow>
                {(state === "pending" || state === "in_progress") && (
                  <CircularProgress isIndeterminate size="20px" title={state} />
                )}
                {(state === "aborted_by_worker" || state === "cancelled" || state === "timeout") && (
                  <>
                    <Icon as={XCircle} color="red" />
                    <Text color="red">{`Error: ${state}`}</Text>
                    {onRetry && !isSending && <Button onClick={handleRetry}>{t("retry")}</Button>}
                  </>
                )}
                {state === "complete" && (
                  <>
                    <BaseMessageEmojiButton
                      emoji={FileText}
                      onClick={() => setIsPlainText(!isPlainText)}
                      label={t("plain_text")}
                    />

                    {canRetry && <BaseMessageEmojiButton emoji={RotateCcw} onClick={handleRetry} label={t("retry")} />}
                    {!hasCopied ? (
                      <BaseMessageEmojiButton emoji={Copy} onClick={onCopy} label={t("copy")} />
                    ) : (
                      <BaseMessageEmojiButton emoji={Check} />
                    )}
                    {showFeedbackOptions && (
                      <BaseMessageEmojiButton emoji={ThumbsUp} checked={score === 1} onClick={handleThumbsUp} />
                    )}
                    {showFeedbackOptions && (
                      <BaseMessageEmojiButton emoji={ThumbsDown} checked={score === -1} onClick={handleThumbsDown} />
                    )}
                  </>
                )}
              </MessageInlineEmojiRow>
            )}
          </Flex>
        )}
        {work_parameters && <WorkParametersDisplay parameters={work_parameters} />}
      </PendingMessageEntry>
      {state === "complete" && isAssistant && showEncourageMessage && showFeedbackOptions && (
        <EncourageMessage

Review comment (suggestion):
Can you adjust icon base on the `isPlainText` state? I think using these two icons will make more sense
 https://tabler-icons.io/i/markdown-off
 https://tabler-icons.io/i/markdown
 Just copy the SVG, we don't need to install the lib

Code after:
              borderRadius="xl"
              _dark={{
                bg: "gray.800",
              }}
              autoFocus
            ></Textarea>
          </Box>
        )}
        {!isEditing && (
          <Flex justifyContent={pagingSlot ? "space-between" : "end"} mt="1">
            {pagingSlot}
            {isAssistant && (
              <MessageInlineEmojiRow>
                {(state === "pending" || state === "in_progress") && (
                  <CircularProgress isIndeterminate size="20px" title={state} />
                )}
                {(state === "aborted_by_worker" || state === "cancelled" || state === "timeout") && (
                  <>
                    <Icon as={XCircle} color="red" />
                    <Text color="red">{`Error: ${state}`}</Text>
                    {onRetry && !isSending && <Button onClick={handleRetry}>{t("retry")}</Button>}
                  </>
                )}
                {state === "complete" && (
                  <>
                    <BaseMessageEmojiButton
                      emoji={isPlainText ? MarkdownIcon : MarkdownOffIcon}
                      onClick={() => setIsPlainText(!isPlainText)}
                      label={t("plain_text")}
                    />

                    {canRetry && <BaseMessageEmojiButton emoji={RotateCcw} onClick={handleRetry} label={t("retry")} />}
                    {!hasCopied ? (
                      <BaseMessageEmojiButton emoji={Copy} onClick={onCopy} label={t("copy")} />
                    ) : (
                      <BaseMessageEmojiButton emoji={Check} />
                    )}
                    {showFeedbackOptions && (
                      <BaseMessageEmojiButton emoji={ThumbsUp} checked={score === 1} onClick={handleThumbsUp} />
                    )}
                    {showFeedbackOptions && (
                      <BaseMessageEmojiButton emoji={ThumbsDown} checked={score === -1} onClick={handleThumbsDown} />
                    )}
                  </>
                )}
              </MessageInlineEmojiRow>
            )}
          </Flex>
        )}
        {work_parameters && <WorkParametersDisplay parameters={work_parameters} />}
      </PendingMessageEntry>