refactor(chat): migrate simple bubble styles to tailwind

2026-07-11 13:31:46 +08:00
parent bbe1825bb3
commit b426cc7a72
5 changed files with 57 additions and 64 deletions
@@ -0,0 +1,40 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { MessageAvatar } from "../message-avatar";
+import { TextBubble } from "../text-bubble";
+
+describe("chat Tailwind components", () => {
+  it("renders MessageAvatar AI and user branches with image utilities", () => {
+    const aiHtml = renderToStaticMarkup(<MessageAvatar isFromAI={true} />);
+    const userHtml = renderToStaticMarkup(
+      <MessageAvatar isFromAI={false} userAvatarUrl="/user-avatar.png" />,
+    );
+
+    expect(aiHtml).toContain('aria-label="AI avatar"');
+    expect(aiHtml).toContain("size-[var(--chat-avatar-size,43px)]");
+    expect(aiHtml).toContain("size-full object-cover");
+    expect(aiHtml).toContain("%2Fimages%2Fchat%2Fpic-chat-elio.png");
+    expect(userHtml).toContain('aria-label="User avatar"');
+    expect(userHtml).toContain("%2Fuser-avatar.png");
+  });
+
+  it("renders TextBubble AI and user visual variants", () => {
+    const aiHtml = renderToStaticMarkup(
+      <TextBubble content={"hello\nthere"} isFromAI={true} />,
+    );
+    const userHtml = renderToStaticMarkup(
+      <TextBubble content="from user" isFromAI={false} />,
+    );
+
+    expect(aiHtml).toContain("whitespace-pre-wrap");
+    expect(aiHtml).toContain("rounded-tl-none");
+    expect(aiHtml).toContain("bg-white");
+    expect(aiHtml).toContain("hello\nthere");
+    expect(userHtml).toContain("rounded-tr-none");
+    expect(userHtml).toContain(
+      "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
+    );
+    expect(userHtml).toContain("from user");
+  });
+});