diff --git a/frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx
index 7348c411e..3a58d89e3 100644
--- a/frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx
+++ b/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();
- const elt = document.querySelector(".taipy-chat .taipy-chat-received .MuiPaper-root pre");
- expect(elt).toBeInTheDocument();
+ const { getByText } = render();
+ const elt = getByText(searchMsg);
+ expect(elt.tagName).toBe("PRE");
+ expect(elt.parentElement).toHaveClass("taipy-chat-pre");
});
it("can render raw", async () => {
- render();
- const elt = document.querySelector(".taipy-chat .taipy-chat-received div.MuiPaper-root");
- expect(elt).toBeInTheDocument();
+ const { getByText } = render();
+ const elt = getByText(searchMsg);
+ expect(elt).toHaveClass("taipy-chat-raw");
});
it("dispatch a well formed message by Keyboard", async () => {
const dispatch = jest.fn();
diff --git a/frontend/taipy-gui/src/components/Taipy/Chat.tsx b/frontend/taipy-gui/src/components/Taipy/Chat.tsx
index 44449b99a..0644abf09 100644
--- a/frontend/taipy-gui/src/components/Taipy/Chat.tsx
+++ b/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 ? {avatar} : null}
{name}
-
+
{mode == "pre" ? (
{message}
) : mode == "raw" ? (
@@ -169,7 +183,11 @@ const ChatRow = (props: ChatRowProps) => {
{sender ? {avatar} : null}
) : (
-
+
{mode == "pre" ? (
{message}
) : 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
)}