Repository: appsmithorg/appsmith
File: app/client/packages/design-system/widgets/src/components/AIChat/src/ThreadMessage/ThreadMessage.tsx (TypeScript)

Code before:
import { Text } from "@appsmith/wds";
import { clsx } from "clsx";
import React from "react";
import Markdown from "react-markdown";
import SyntaxHighlighter from "react-syntax-highlighter";
import { monokai } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { UserAvatar } from "../UserAvatar";
import styles from "./styles.module.css";
import type { ThreadMessageProps } from "./types";

export const ThreadMessage = ({
  className,
  content,
  isAssistant,
  username,
  ...rest
}: ThreadMessageProps) => {
  return (
    <li
      className={clsx(styles.root, className)}
      data-assistant={isAssistant}
      {...rest}
    >
      {isAssistant ? (
        <div>
          <Text className={styles.content}>
            <Markdown
              // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
              components={{
                code(props) {
                  const { children, className, ...rest } = props;
                  const match = /language-(\w+)/.exec(className ?? "");

                  return match ? (
                    <SyntaxHighlighter
                      PreTag="div"
                      language={match[1]}
                      style={monokai}
                    >
                      {String(children).replace(/\n$/, "")}
                    </SyntaxHighlighter>
                  ) : (
                    <code {...rest} className={className}>
                      {children}
                    </code>
                  );
                },
              }}
            >
              {content}
            </Markdown>
          </Text>
        </div>
      ) : (
        <>
          <UserAvatar className={styles.userAvatar} username={username} />
          <div>
            <Text className={styles.content}>{content}</Text>
          </div>
        </>
      )}
    </li>
  );
};


Review comment (suggestion):
Please do not suppress linter errors. If you don't agree on how this rule works, then you can bring it up for discussion and do something about it.

Code after:
                    >
                      {String(children).replace(/\n$/, "")}
                    </SyntaxHighlighter>
                  ) : (
                    <code {...rest} className={className}>
                      {children}
                    </code>
                  );
                },
              }}
            >
              {content}
            </Markdown>
          </Text>

          {promptSuggestions.length > 0 && (
            <Flex
              className={styles.suggestions}
              gap="var(--inner-spacing-5)"
              paddingTop="spacing-4"
              wrap="wrap"
            >
              {promptSuggestions.map((suggestion) => (
                <AssistantSuggestionButton
                  key={suggestion}
                  // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
                  onPress={() => onApplyAssistantSuggestion?.(suggestion)}
                >
                  {suggestion}
                </AssistantSuggestionButton>
              ))}
            </Flex>
          )}
        </div>
      ) : (
        <>
          <UserAvatar className={styles.userAvatar} username={username} />
          <div>
            <Text className={styles.content}>{content}</Text>
          </div>
        </>
      )}
    </li>
  );
};