chat: add a mode specific class to the messages (#1812)

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx

@@ -81,14 +81,15 @@ describe("Chat Component", () => {
         await waitFor(() => expect(elt?.querySelector("p")).not.toBeNull());
     });
     it("can render pre", async () => {
-        render(<Chat messages={messages} className="taipy-chat" defaultKey={valueKey} mode="pre" />);
-        const elt = document.querySelector(".taipy-chat .taipy-chat-received .MuiPaper-root pre");
-        expect(elt).toBeInTheDocument();
+        const { getByText } = render(<Chat messages={messages} defaultKey={valueKey} className="taipy-chat"  mode="pre" />);
+        const elt = getByText(searchMsg);
+        expect(elt.tagName).toBe("PRE");
+        expect(elt.parentElement).toHaveClass("taipy-chat-pre");
     });
     it("can render raw", async () => {
-        render(<Chat messages={messages} className="taipy-chat" defaultKey={valueKey} mode="raw" />);
-        const elt = document.querySelector(".taipy-chat .taipy-chat-received div.MuiPaper-root");
-        expect(elt).toBeInTheDocument();
+        const { getByText } = render(<Chat messages={messages} defaultKey={valueKey} className="taipy-chat"  mode="raw" />);
+        const elt = getByText(searchMsg);
+        expect(elt).toHaveClass("taipy-chat-raw");
     });
     it("dispatch a well formed message by Keyboard", async () => {
         const dispatch = jest.fn();

frontend/taipy-gui/src/components/Taipy/Chat.tsx

@@ -11,7 +11,17 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useMemo, useCallback, KeyboardEvent, MouseEvent, useState, useRef, useEffect, ReactNode, lazy } from "react";
+import React, {
+    useMemo,
+    useCallback,
+    KeyboardEvent,
+    MouseEvent,
+    useState,
+    useRef,
+    useEffect,
+    ReactNode,
+    lazy,
+} from "react";
 import { SxProps, Theme, darken, lighten } from "@mui/material/styles";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
@@ -134,7 +144,7 @@ interface ChatRowProps {
     getAvatar: (id: string, sender: boolean) => ReactNode;
     index: number;
     showSender: boolean;
-    mode?: string;
+    mode: string;
 }
 
 const ChatRow = (props: ChatRowProps) => {
@@ -156,7 +166,11 @@ const ChatRow = (props: ChatRowProps) => {
                         {!sender ? <Box sx={avatarColSx}>{avatar}</Box> : null}
                         <Stack>
                             <Box sx={sender ? rightNameSx : leftNameSx}>{name}</Box>
-                            <Paper sx={sender ? senderPaperSx : otherPaperSx} data-idx={index}>
+                            <Paper
+                                sx={sender ? senderPaperSx : otherPaperSx}
+                                data-idx={index}
+                                className={getSuffixedClassNames(className, "-" + mode)}
+                            >
                                 {mode == "pre" ? (
                                     <pre>{message}</pre>
                                 ) : mode == "raw" ? (
@@ -169,7 +183,11 @@ const ChatRow = (props: ChatRowProps) => {
                         {sender ? <Box sx={avatarColSx}>{avatar}</Box> : null}
                     </Stack>
                 ) : (
-                    <Paper sx={sender ? senderPaperSx : otherPaperSx} data-idx={index}>
+                    <Paper
+                        sx={sender ? senderPaperSx : otherPaperSx}
+                        data-idx={index}
+                        className={getSuffixedClassNames(className, mode)}
+                    >
                         {mode == "pre" ? (
                             <pre>{message}</pre>
                         ) : mode == "raw" ? (
@@ -214,6 +232,10 @@ const Chat = (props: ChatProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const users = useLovListMemo(props.users, props.defaultUsers || "");
 
+    const mode = useMemo(
+        () => (["pre", "raw"].includes(props.mode || "") ? (props.mode as string) : "markdown"),
+        [props.mode]
+    );
     const boxSx = useMemo(
         () =>
             props.height
@@ -405,7 +427,7 @@ const Chat = (props: ChatProps) => {
                                 getAvatar={getAvatar}
                                 index={idx}
                                 showSender={showSender}
-                                mode={props.mode}
+                                mode={mode}
                             />
                         ) : null
                     )}