@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/app/_tests/AppHome.spec.tsx

@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { AppHome } from "../AppHome";
+import {
+  COMMUNITY,
+  OTHER_COMMUNITY,
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  wrapper,
+  type Route,
+} from "../../../headless/_tests/communityHarness";
+import { siteApp } from "../../../headless/_tests/siteAppHarness";
+import type { SiteAppHomeSection } from "../../../../data/queries/useSiteApp";
+
+/**
+ * The app home through the real hooks over a stub adapter: the configured
+ * order, hidden and empty sections left out, the portal always drawn, and the
+ * signed-out front door.
+ */
+
+afterEach(restoreAdapter);
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode, opts: Parameters<typeof wrapper>[0] = {}) {
+  const Wrapper = wrapper({ community: null, ...opts });
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const builtin = (key: string, visible = true) => ({ type: "builtin", key, visible }) as SiteAppHomeSection;
+
+const summary = {
+  sections: {
+    projects: 1,
+    invoices: 1,
+    documents: 0,
+    bookings: 0,
+    memberships: 1,
+    courses: 0,
+    films: 0,
+    orders: 0,
+    tickets: 0,
+    waitlist: 0,
+    saved: 0,
+    messages: 0,
+    files: 0,
+  },
+  lastActivity: { work: null, library: null },
+  attention: [
+    {
+      kind: "invoice_due",
+      id: "inv-1",
+      invoiceNumber: "1042",
+      total: "450",
+      currency: "USD",
+      dueDate: null,
+      projectId: null,
+      projectName: null,
+    },
+  ],
+};
+
+const memberRoutes = (sections: SiteAppHomeSection[]): Route[] => [
+  get("/public/websites/app", () => siteApp({ appName: "Northlight Coaching", homeSections: sections })),
+  get("/public/portal/summary", () => summary),
+  get("/public/memberships/mine", () => [
+    { community: { id: COMMUNITY.id, name: COMMUNITY.name, slug: COMMUNITY.slug }, membership: { id: "m-1", status: "active", tierName: "Free" } },
+  ]),
+  get("/public/communities", () => [COMMUNITY, OTHER_COMMUNITY]),
+  get("/public/community/notifications", () => ({ data: [], unreadCount: 5 })),
+  get("/public/notifications/inbox", () => ({ data: [], unreadCount: 2 })),
+  get("/public/products", () => ({ data: [], total: 0 })),
+];
+
+const sectionOrder = () =>
+  Array.from(document.querySelectorAll("[data-testid^='app-section-']")).map((el) => el.getAttribute("data-testid"));
+
+describe("AppHome, signed in", () => {
+  it("names the explore button by how a visitor gets in", async () => {
+    const extra = (slug: string, joinMode: string) => ({ ...OTHER_COMMUNITY, id: `c-${slug}`, slug, name: slug, joinMode });
+    // Routes answer in order, so this list wins over the default one.
+    installAdapter([
+      get("/public/communities", () => [COMMUNITY, extra("open-club", "open"), extra("apply-club", "application"), extra("invite-club", "invite")]),
+      ...memberRoutes([builtin("explore_communities")]),
+    ]);
+    mount(<AppHome />, { user: account() });
+
+    await screen.findByTestId("app-explore-apply-club-join");
+    expect(screen.getByTestId("app-explore-open-club-join").textContent).toBe("Join");
+    expect(screen.getByTestId("app-explore-apply-club-join").textContent).toBe("Apply");
+    expect(screen.getByTestId("app-explore-invite-club-join").textContent).toBe("Details");
+  });
+
+  it("draws the visible sections in the configured order and leaves out the empty ones", async () => {
+    installAdapter(
+      memberRoutes([
+        builtin("needs_you"),
+        builtin("portal"),
+        builtin("communities"),
+        builtin("explore_communities"),
+        { type: "link", id: "l1", label: "Book a discovery call", href: "/book", visible: true },
+        builtin("events", false),
+        builtin("shop"),
+      ]),
+    );
+    mount(<AppHome />, { user: account() });
+
+    await screen.findByTestId("app-section-explore_communities");
+    expect(sectionOrder()).toEqual([
+      "app-section-needs_you",
+      "app-section-portal",
+      "app-section-communities",
+      "app-section-explore_communities",
+      "app-section-link",
+    ]);
+    // Hidden: never fetched. Shop: configured, but the store is empty.
+    expect(calls("get", "/public/events")).toHaveLength(0);
+    expect(calls("get", "/public/products")).toHaveLength(1);
+    expect(screen.queryByTestId("app-section-shop")).toBeNull();
+
+    // The greeting and the header.
+    expect(screen.getByRole("heading", { level: 1 }).textContent).toMatch(/Fan$/);
+    expect(screen.getByTestId("app-home-lead").textContent).toBe("One thing is waiting for you.");
+    expect(screen.getByTestId("app-home-header").textContent).toContain("Northlight Coaching");
+
+    // Needs you: the exact thing, one tap away.
+    const needs = screen.getByTestId("app-section-needs_you");
+    expect(within(needs).getByTestId("app-attention-action").getAttribute("href")).toBe("/i/invoice/inv-1");
+    expect(within(needs).getByTestId("app-attention-action").textContent).toBe("Pay");
+
+    // The portal: a tile per section with anything in it, badges for what needs the person, then Settings.
+    const tiles = Array.from(screen.getByTestId("app-section-portal").querySelectorAll("a[data-testid^='app-portal-tile-']")).map(
+      (el) => el.getAttribute("data-testid"),
+    );
+    expect(tiles).toEqual(["app-portal-tile-projects", "app-portal-tile-invoices", "app-portal-tile-settings"]);
+    expect(screen.getByTestId("app-portal-tile-invoices-badge").textContent).toBe("1");
+
+    // Your communities, with unread; explore lists only the ones not joined.
+    await waitFor(() => expect(screen.getByTestId(`app-community-${COMMUNITY.slug}-unread`).textContent).toBe("5 new"));
+    expect(screen.getByTestId(`app-community-${COMMUNITY.slug}`).getAttribute("href")).toBe(`/i/communities/${COMMUNITY.slug}/home`);
+    expect(screen.queryByTestId(`app-explore-${COMMUNITY.slug}`)).toBeNull();
+    expect(screen.getByTestId(`app-explore-${OTHER_COMMUNITY.slug}-join`).getAttribute("href")).toBe(
+      `/i/communities/${OTHER_COMMUNITY.slug}`,
+    );
+
+    // The button names how a visitor gets in: an older server sends no joinMode, which reads as Join.
+    expect(screen.getByTestId(`app-explore-${OTHER_COMMUNITY.slug}-join`).textContent).toBe("Join");
+
+    // The link section is a labelled card to its address.
+    const linkCard = screen.getByTestId("app-section-link");
+    expect(linkCard.textContent).toContain("Book a discovery call");
+    expect(linkCard.getAttribute("href")).toBe("/book");
+  });
+
+  it("always draws the portal, even with nothing in it", async () => {
+    installAdapter([
+      get("/public/websites/app", () => siteApp({ homeSections: [builtin("needs_you"), builtin("portal"), builtin("communities")] })),
+      get("/public/portal/summary", () => ({ ...summary, sections: {}, attention: [] })),
+      get("/public/memberships/mine", () => []),
+      get("/public/communities", () => []),
+      get("/public/notifications/inbox", () => ({ data: [], unreadCount: 0 })),
+    ]);
+    mount(<AppHome />, { user: account() });
+    await screen.findByTestId("app-section-portal");
+    expect(sectionOrder()).toEqual(["app-section-portal"]);
+    expect(screen.getByTestId("app-portal-tile-settings")).toBeTruthy();
+  });
+
+  it("navigates in-app through the adapter it is given", async () => {
+    installAdapter(memberRoutes([builtin("portal")]));
+    const navigate = vi.fn();
+    mount(<AppHome navigate={navigate} />, { user: account() });
+    fireEvent.click(await screen.findByTestId("app-portal-tile-projects"), { button: 0 });
+    expect(navigate).toHaveBeenCalledWith("/i/account/projects");
+  });
+});
+
+describe("AppHome, signed out", () => {
+  it("is the app's front door: its name, an email-first sign in, and a way to look around", async () => {
+    installAdapter([
+      get("/public/websites/app", () => siteApp({ appName: "Northlight Coaching" })),
+      (req) => (req.method === "post" && req.url === "/public/sessions/email/start" ? { ok: true } : undefined),
+    ]);
+    mount(<AppHome />);
+    const door = await screen.findByTestId("app-home-signed-out");
+    expect(door.textContent).toContain("Northlight Coaching");
+    expect(screen.queryByTestId("app-section-portal")).toBeNull();
+    // Nothing member-shaped is asked for.
+    expect(calls("get", "/public/portal/summary")).toHaveLength(0);
+
+    const links = ["communities", "events", "courses", "shop"].map((key) => screen.getByTestId(`app-explore-link-${key}`).getAttribute("href"));
+    expect(links).toEqual(["/i/communities", "/i/events", "/i/courses", "/i/store"]);
+
+    fireEvent.change(within(screen.getByTestId("app-sign-in-email")).getByRole("textbox"), { target: { value: "fan@example.com" } });
+    fireEvent.submit(screen.getByTestId("app-sign-in-email"));
+    await screen.findByTestId("app-sign-in-code");
+    expect(calls("post", "/public/sessions/email/start")[0]!.body).toMatchObject({ email: "fan@example.com" });
+  });
+});

package/src/ui/styled/app/_tests/AppPrompts.spec.tsx

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { AppPrompts } from "../AppPrompts";
+import { account, calls, get, installAdapter, restoreAdapter, wrapper, type Route } from "../../../headless/_tests/communityHarness";
+import { siteApp } from "../../../headless/_tests/siteAppHarness";
+import { clearPendingAppInstall, requestAppInstall } from "../../../headless/siteApp/appPrompts";
+import { resetInstallPromptForTests } from "../../../../data/queries/usePWA";
+
+/**
+ * The site app's prompts as drawn: the install sheet after a success, worded
+ * for it, native or iPhone steps, never in the installed app, never when the
+ * creator turned it off, not again for 14 days after Not now; and the
+ * notifications sheet on the first launch of the installed app.
+ */
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+const IPHONE = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 Version/17.0 Mobile/15E148 Safari/604.1";
+const DESKTOP = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/120.0 Safari/537.36";
+
+function mount(node: ReactNode, opts: Parameters<typeof wrapper>[0] = {}) {
+  const Wrapper = wrapper({ community: null, ...opts });
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const realMatchMedia = window.matchMedia;
+const realUserAgent = Object.getOwnPropertyDescriptor(window.navigator, "userAgent");
+
+function setUserAgent(value: string) {
+  Object.defineProperty(window.navigator, "userAgent", { value, configurable: true });
+}
+
+function setStandalone(standalone: boolean) {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: standalone && query.includes("display-mode: standalone"),
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })) as never;
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+  window.sessionStorage.clear();
+  clearPendingAppInstall();
+  resetInstallPromptForTests(null);
+  setStandalone(false);
+  setUserAgent(IPHONE);
+});
+
+afterEach(() => {
+  restoreAdapter();
+  window.matchMedia = realMatchMedia;
+  if (realUserAgent) Object.defineProperty(window.navigator, "userAgent", realUserAgent);
+  else delete (window.navigator as { userAgent?: string }).userAgent;
+  vi.unstubAllGlobals();
+});
+
+const settings = (patch: Parameters<typeof siteApp>[0] = {}): Route => get("/public/websites/app", () => siteApp(patch));
+
+/** Let the settings arrive and the prompt decide. */
+const settle = () => waitFor(() => expect(calls("get", "/public/websites/app").length).toBeGreaterThan(0));
+
+describe("the install prompt", () => {
+  it("on an iPhone, shows the two Safari steps, worded for joining", async () => {
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("joined_community"));
+    const sheet = await screen.findByTestId("app-install-ios");
+    expect(sheet.textContent).toContain("You're in. Keep it one tap away.");
+    expect(screen.getByTestId("app-install-ios-steps").textContent).toContain("Tap Share in the toolbar");
+    expect(screen.getByTestId("app-install-ios-steps").textContent).toContain("Choose Add to Home Screen");
+    // Safari cannot install for us, so there is no Install button.
+    expect(screen.queryByTestId("app-install-accept")).toBeNull();
+  });
+
+  it("is worded for the moment it was asked in", async () => {
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("booking"));
+    expect((await screen.findByTestId("app-install-ios")).textContent).toContain("Booked. Keep your sessions one tap away.");
+  });
+
+  it("on Android and desktop, fires the browser's own prompt it held", async () => {
+    setUserAgent(DESKTOP);
+    const prompt = vi.fn().mockResolvedValue(undefined);
+    const event = Object.assign(new Event("beforeinstallprompt"), {
+      prompt,
+      userChoice: Promise.resolve({ outcome: "accepted" as const }),
+    });
+    resetInstallPromptForTests(event);
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("purchase"));
+    const sheet = await screen.findByTestId("app-install-native");
+    expect(sheet.textContent).toContain("Thank you. Keep your orders one tap away.");
+    fireEvent.click(screen.getByTestId("app-install-accept"));
+    expect(prompt).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryByTestId("app-install-native")).toBeNull());
+  });
+
+  it("picks up a request made on the page before (it rides the session)", async () => {
+    window.sessionStorage.setItem("forge-app-install-pending", JSON.stringify({ context: "invite_accepted", at: Date.now() }));
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    expect((await screen.findByTestId("app-install-ios")).textContent).toContain("Keep your projects one tap away.");
+  });
+
+  it("never shows in the installed app", async () => {
+    setStandalone(true);
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("joined_community"));
+    await settle();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-install-ios")).toBeNull();
+  });
+
+  it("never shows when the creator turned it off", async () => {
+    installAdapter([settings({ installPrompt: false })]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("joined_community"));
+    await settle();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-install-ios")).toBeNull();
+  });
+
+  it("remembers Not now for 14 days", async () => {
+    installAdapter([settings()]);
+    mount(<AppPrompts />);
+    act(() => requestAppInstall("joined_community"));
+    fireEvent.click(await screen.findByTestId("app-install-not-now"));
+    await waitFor(() => expect(screen.queryByTestId("app-install-ios")).toBeNull());
+    const at = Number(window.localStorage.getItem("forge-app-install-dismissed-at"));
+    expect(Date.now() - at).toBeLessThan(5_000);
+
+    act(() => requestAppInstall("purchase"));
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-install-ios")).toBeNull();
+
+    // Fifteen days on, it may ask again.
+    window.localStorage.setItem("forge-app-install-dismissed-at", String(Date.now() - 15 * 24 * 60 * 60 * 1000));
+    act(() => requestAppInstall("purchase"));
+    expect(await screen.findByTestId("app-install-ios")).toBeTruthy();
+  });
+
+  it("draws once when two hosts are mounted", async () => {
+    installAdapter([settings()]);
+    mount(
+      <>
+        <AppPrompts />
+        <AppPrompts />
+      </>,
+    );
+    act(() => requestAppInstall("joined_community"));
+    await screen.findByTestId("app-install-ios");
+    expect(screen.getAllByTestId("app-install-ios")).toHaveLength(1);
+  });
+});
+
+describe("the notifications prompt", () => {
+  function stubPush() {
+    vi.stubGlobal("Notification", { permission: "default", requestPermission: vi.fn().mockResolvedValue("denied") });
+    vi.stubGlobal("PushManager", function PushManager() {});
+    Object.defineProperty(window.navigator, "serviceWorker", {
+      configurable: true,
+      value: { ready: Promise.resolve({ pushManager: { getSubscription: async () => null } }) },
+    });
+  }
+
+  afterEach(() => {
+    delete (window.navigator as { serviceWorker?: unknown }).serviceWorker;
+  });
+
+  const matrix = get("/public/notifications/preferences", () => ({
+    preferences: { "dm.push": true, "new_post.push": false },
+    overrides: {},
+    digestCadence: "daily",
+    defaults: {
+      dm: { inapp: true, push: true, email: true, emailMode: "instant" },
+      new_post: { inapp: true, push: false, email: true, emailMode: "digest" },
+    },
+  }));
+
+  it("offers the categories the member's settings know, on the first launch of the installed app", async () => {
+    stubPush();
+    setStandalone(true);
+    installAdapter([settings(), matrix]);
+    mount(<AppPrompts />, { user: account() });
+    const sheet = await screen.findByTestId("app-push-prompt");
+    expect(sheet.textContent).toContain("Don't miss what matters");
+    expect(screen.getByTestId("app-push-category-messages")).toBeTruthy();
+    expect(screen.getByTestId("app-push-category-community")).toBeTruthy();
+    // No event types in this matrix: no events row.
+    expect(screen.queryByTestId("app-push-category-events")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("app-push-later"));
+    await waitFor(() => expect(screen.queryByTestId("app-push-prompt")).toBeNull());
+    expect(window.localStorage.getItem("forge-app-push-answer")).toBe("declined");
+  });
+
+  it("is not offered in a browser tab, when turned off, or once answered", async () => {
+    stubPush();
+    installAdapter([settings(), matrix]);
+    const tab = mount(<AppPrompts />, { user: account() });
+    await settle();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-push-prompt")).toBeNull();
+    tab.unmount();
+
+    setStandalone(true);
+    installAdapter([settings({ pushPrompt: false }), matrix]);
+    const off = mount(<AppPrompts />, { user: account() });
+    await settle();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-push-prompt")).toBeNull();
+    off.unmount();
+
+    window.localStorage.setItem("forge-app-push-answer", "accepted");
+    installAdapter([settings(), matrix]);
+    mount(<AppPrompts />, { user: account() });
+    await settle();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("app-push-prompt")).toBeNull();
+  });
+});

package/src/ui/styled/app/index.ts

@@ -0,0 +1,7 @@
+// The site app (one installable app per website): its home, its bottom bar,
+// the way back to its Home from another shell, and its install and
+// notification prompts.
+export { AppHome, type AppHomeProps } from "./AppHome";
+export { AppBar, APP_BAR_HEIGHT, type AppBarProps } from "./AppBar";
+export { AppPrompts } from "./AppPrompts";
+export { AppHomeMark, type AppHomeMarkProps } from "./AppHomeMark";

package/src/ui/styled/chat/ChatThreadPanel.tsx

@@ -5,6 +5,8 @@ import { useMessageThread } from "../../headless/chat/useMessageThread";
 import { useForgeTheme } from "../../theme/ForgeThemeProvider";
 import { MessageBubble } from "./MessageBubble";
 import { ChatComposer } from "./ChatComposer";
+import { CommunityAgentThinking } from "../community/CommunityAgent";
+import { useCommunityAgentAnswerRatings } from "../../headless/community/useCommunityAgent";
 
 export interface ChatThreadPanelProps {
   parentMessage: ChatMessage;
@@ -13,10 +15,14 @@ export interface ChatThreadPanelProps {
   onClose: () => void;
   onMarkAsRead?: (messageIds: string[]) => void;
   border: string;
+  /** The community AI is writing an answer in this thread. */
+  agentThinking?: boolean;
+  /** The community AI's name, for its "thinking" line. */
+  agentName?: string | null;
 }
 
 /**
- * One-level thread panel — a side panel on desktop, full-screen overlay on
+ * One-level thread panel: a side panel on desktop, full-screen overlay on
  * mobile. Renders the parent, its replies, and a reply composer.
  */
 export function ChatThreadPanel({
@@ -26,9 +32,16 @@ export function ChatThreadPanel({
   onClose,
   onMarkAsRead,
   border,
+  agentThinking = false,
+  agentName,
 }: ChatThreadPanelProps) {
   const theme = useForgeTheme();
   const thread = useMessageThread({ parentMessage, socket });
+  // The viewer's own ratings on the AI answers in this thread.
+  const ratings = useCommunityAgentAnswerRatings(
+    "chat_message",
+    thread.replies.filter((m) => m.senderAgentId).map((m) => m.id),
+  );
 
   // Thread replies count toward the channel's unread total but never appear in
   // the main timeline (which is where reads are normally marked). Mark the
@@ -63,7 +76,11 @@ export function ChatThreadPanel({
       </header>
 
       <div style={{ padding: 16, borderBottom: border }}>
-        <MessageBubble message={parentMessage} mine={parentMessage.senderAccountId === currentAccountId} showThreadControls={false} />
+        <MessageBubble
+          message={parentMessage}
+          mine={!!parentMessage.senderAccountId && parentMessage.senderAccountId === currentAccountId}
+          showThreadControls={false}
+        />
       </div>
 
       <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
@@ -76,9 +93,17 @@ export function ChatThreadPanel({
           </button>
         )}
         {thread.replies.map((m) => (
-          <MessageBubble key={m.id} message={m} mine={m.senderAccountId === currentAccountId} showThreadControls={false} />
+          <MessageBubble
+            key={m.id}
+            message={m}
+            mine={!!m.senderAccountId && m.senderAccountId === currentAccountId}
+            showThreadControls={false}
+            showAgentFeedback={!!m.senderAgentId && ratings.canRate(m.id)}
+            savedAgentRating={ratings.ratingOf(m.id)}
+          />
         ))}
-        {!thread.isLoading && thread.replies.length === 0 && (
+        {agentThinking && <CommunityAgentThinking name={agentName} />}
+        {!thread.isLoading && thread.replies.length === 0 && !agentThinking && (
           <div style={{ opacity: 0.5, fontSize: 13, textAlign: "center" }}>No replies yet. Start the thread.</div>
         )}
       </div>

package/src/ui/styled/chat/MessageBubble.tsx

@@ -2,6 +2,12 @@ import type { ChatMessage } from "../../../data/queries/useChat";
 import { useForgeTheme } from "../../theme/ForgeThemeProvider";
 import { readableTextOn } from "../../theme/contrast";
 import { ChatAttachments } from "./ChatAttachments";
+import {
+  CommunityAgentAvatar,
+  CommunityAgentFeedback,
+  CommunityAgentName,
+  CommunityLinkifiedText,
+} from "../community/CommunityAgent";
 
 export interface MessageBubbleProps {
   message: ChatMessage;
@@ -9,18 +15,44 @@ export interface MessageBubbleProps {
   /** Thread affordances hidden inside an already-open thread. */
   onOpenThread?: (message: ChatMessage) => void;
   showThreadControls?: boolean;
+  /** An answer from the community AI to this viewer's question: offer thumbs up / down. */
+  showAgentFeedback?: boolean;
+  /** The viewer's saved rating on this answer. */
+  savedAgentRating?: 1 | -1 | null;
 }
 
-export function MessageBubble({ message, mine, onOpenThread, showThreadControls = true }: MessageBubbleProps) {
+export function MessageBubble({
+  message,
+  mine: mineProp,
+  onOpenThread,
+  showThreadControls = true,
+  showAgentFeedback = false,
+  savedAgentRating = null,
+}: MessageBubbleProps) {
   const theme = useForgeTheme();
   const replyCount = message.replyCount ?? 0;
+  // The community AI sent it: its name and badge, never on "my" side.
+  const agent = message.senderAgentId
+    ? { name: message.senderFirstName || "", avatarUrl: message.senderAgentAvatarUrl ?? null }
+    : null;
+  const mine = mineProp && !agent;
 
   return (
-    <div style={{ alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "70%" }}>
-      {!mine && (
-        <div style={{ fontSize: 12, opacity: 0.6, marginBottom: 2 }}>
-          {message.senderFirstName} {message.senderLastName}
+    <div
+      style={{ alignSelf: mine ? "flex-end" : "flex-start", maxWidth: "70%" }}
+      data-testid={agent ? "chat-agent-message" : undefined}
+    >
+      {agent ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }}>
+          <CommunityAgentAvatar agent={agent} size={20} />
+          <CommunityAgentName agent={agent} fontSize={12} />
         </div>
+      ) : (
+        !mine && (
+          <div style={{ fontSize: 12, opacity: 0.6, marginBottom: 2 }}>
+            {message.senderFirstName} {message.senderLastName}
+          </div>
+        )
       )}
       <div
         style={{
@@ -30,9 +62,14 @@ export function MessageBubble({ message, mine, onOpenThread, showThreadControls
           borderRadius: theme.cornerRadius,
         }}
       >
-        {message.content}
+        {agent && message.content ? <CommunityLinkifiedText text={message.content} /> : message.content}
         <ChatAttachments attachments={message.attachments} />
       </div>
+      {showAgentFeedback && agent && (
+        <div style={{ marginTop: 3 }}>
+          <CommunityAgentFeedback entityType="chat_message" entityId={message.id} saved={savedAgentRating} />
+        </div>
+      )}
 
       {showThreadControls && (
         <div style={{ display: "flex", gap: 10, marginTop: 3 }}>