Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Sep 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions frontend/taipy-gui/src/components/Taipy/Chat.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
32 changes: 27 additions & 5 deletions frontend/taipy-gui/src/components/Taipy/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -134,7 +144,7 @@ interface ChatRowProps {
getAvatar: (id: string, sender: boolean) => ReactNode;
index: number;
showSender: boolean;
mode?: string;
mode: string;
}

const ChatRow = (props: ChatRowProps) => {
Expand All @@ -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)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would have called these classes
taipy-chat-<mode>-[incoming|outgoing]-message
and probably add
taipy-chat-[incoming|outgoing]-message as well
and maybe add
taipy-chat-message

What say you?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there's a class earlier in the hierarchy taipy-chat-received taipy-chat-sent

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is that enough for you ? @FabienLelaquais

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is!

>
{mode == "pre" ? (
<pre>{message}</pre>
) : mode == "raw" ? (
Expand All @@ -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" ? (
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -405,7 +427,7 @@ const Chat = (props: ChatProps) => {
getAvatar={getAvatar}
index={idx}
showSender={showSender}
mode={props.mode}
mode={mode}
/>
) : null
)}
Expand Down
Loading