Merge pull request #93 from Cognigy/bug/75697-agent-avatar-once

Rename avatar override property

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cognigy/chat-components",
-	"version": "0.32.1",
+	"version": "0.33.0",
 	"type": "module",
 	"exports": "./dist/chat-components.js",
 	"module": "./dist/chat-components.js",

src/common/Avatar.tsx

@@ -15,13 +15,13 @@ const Avatar: FC<AvatarProps> = props => {
 	const overrides = (message?.data as any)?._webchat || {};
 
 	useEffect(() => {
-		if (overrides.agentAvatarOverrideUrl) {
-			setAvatarUrl(overrides.agentAvatarOverrideUrl);
+		if (overrides.agentAvatarOverrideUrlOnce) {
+			setAvatarUrl(overrides.agentAvatarOverrideUrlOnce);
 			return;
 		}
 
-		if (overrides.botAvatarOverrideUrl) {
-			setAvatarUrl(overrides.botAvatarOverrideUrl);
+		if (overrides.botAvatarOverrideUrlOnce) {
+			setAvatarUrl(overrides.botAvatarOverrideUrlOnce);
 			return;
 		}
 
@@ -36,8 +36,8 @@ const Avatar: FC<AvatarProps> = props => {
 	}, [
 		message.avatarUrl,
 		message?.source,
-		overrides.agentAvatarOverrideUrl,
-		overrides.botAvatarOverrideUrl,
+		overrides.agentAvatarOverrideUrlOnce,
+		overrides.botAvatarOverrideUrlOnce,
 	]);
 
 	const classNames = classnames(
@@ -49,10 +49,11 @@ const Avatar: FC<AvatarProps> = props => {
 
 	return (
 		<img
-			alt={`${message?.source} avatar`}
+			alt={`${message?.source || "unknown source"} avatar`}
 			className={classNames}
 			src={avatarUrl}
 			onError={() => setAvatarUrl(placeholderAvatar)}
+			data-testid="avatar"
 		/>
 	);
 };

src/common/MessageHeader.tsx

@@ -44,12 +44,12 @@ const MessageHeader: FC<MessageHeaderProps> = props => {
 
 	let name = message?.avatarName || (isAgentMessage ? "Agent" : "Bot");
 
-	if (overrides.agentAvatarOverrideName) {
-		name = overrides.agentAvatarOverrideName;
+	if (overrides.agentAvatarOverrideNameOnce) {
+		name = overrides.agentAvatarOverrideNameOnce;
 	}
 
-	if (overrides.botAvatarOverrideName) {
-		name = overrides.botAvatarOverrideName;
+	if (overrides.botAvatarOverrideNameOnce) {
+		name = overrides.botAvatarOverrideNameOnce;
 	}
 
 	return (
@@ -58,7 +58,9 @@ const MessageHeader: FC<MessageHeaderProps> = props => {
 			<Typography variant="title2-regular" component="div" className={classes.headerMeta}>
 				{!isUserMessage && (
 					<>
-						<span className={classes["avatar-name"]}>{name}</span>
+						<span data-testid="sender-name" className={classes["avatar-name"]}>
+							{name}
+						</span>
 						<HeaderEllipsis />
 					</>
 				)}

test/Avatar.spec.tsx

@@ -0,0 +1,64 @@
+import { render, waitFor, screen } from "@testing-library/react";
+import { it, describe, expect } from "vitest";
+import Message from "src/messages/Message";
+
+describe("Avatars", () => {
+	const defaultAgentAvatarUrl = "/src/assets/svg/avatar_placeholder.svg";
+	const customAvatarUrl = "https://placewaifu/image/100/100";
+	const agentAvatarOverrideUrlOnce = "https://placewaifu/image/300/300";
+
+	const messageDefault = {
+		source: "agent" as const,
+		text: "default",
+	};
+
+	const messageAvatarUrl = {
+		avatarUrl: customAvatarUrl,
+		source: "agent" as const,
+		text: "avatarUrl",
+	};
+
+	const messageAvatarOverride = {
+		avatarUrl: customAvatarUrl,
+		source: "agent" as const,
+		text: "_webchat",
+		data: {
+			_webchat: {
+				agentAvatarOverrideUrlOnce,
+				agentAvatarOverrideNameOnce: "Agent Smith",
+			},
+		},
+	} as any;
+
+	it("shows placeholder avatar for agent by default", async () => {
+		await waitFor(() => {
+			render(<Message message={messageDefault} />);
+		});
+
+		expect(screen.getByTestId("avatar")).toHaveAttribute("src", defaultAgentAvatarUrl);
+	});
+
+	it("shows the avatar from the avatarUrl prop", async () => {
+		await waitFor(() => {
+			render(<Message message={messageAvatarUrl} />);
+		});
+
+		expect(screen.getByTestId("avatar")).toHaveAttribute("src", customAvatarUrl);
+	});
+
+	it("shows the avatar from the override mechanism", async () => {
+		await waitFor(() => {
+			render(<Message message={messageAvatarOverride} />);
+		});
+
+		expect(screen.getByTestId("avatar")).toHaveAttribute("src", agentAvatarOverrideUrlOnce);
+	});
+
+	it("shows the sender name from the override mechanism", async () => {
+		await waitFor(() => {
+			render(<Message message={messageAvatarOverride} />);
+		});
+
+		expect(screen.getByTestId("sender-name")).toHaveTextContent("Agent Smith");
+	});
+});

test/demo.tsx

@@ -303,6 +303,12 @@ const screens: TScreen[] = [
 					text: "I have a problem with my order",
 				},
 			},
+			{
+				message: {
+					source: "agent",
+					text: "This is an agent message",
+				},
+			},
 			{
 				message: {
 					source: "bot",
@@ -317,8 +323,8 @@ const screens: TScreen[] = [
 					data: {
 						//@ts-ignore
 						_webchat: {
-							agentAvatarOverrideUrl: "https://placewaifu.com/image/200/200",
-							agentAvatarOverrideName: "Agent Name Override",
+							agentAvatarOverrideUrlOnce: "https://placewaifu.com/image/200/200",
+							agentAvatarOverrideNameOnce: "Agent Name Override",
 						},
 					},
 				},