@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/communities/shared.tsx

@@ -51,6 +51,12 @@ export function useCommunityStyles() {
  * Paystack popup is open (see `DialogRoot`). The hook that owns the flow must
  * live in the COMPONENT that renders this, not inside `children`: a Paystack
  * stand-down remounts the content.
+ *
+ * Below `lg` it is a bottom sheet: anchored to the bottom edge, full width,
+ * top corners rounded, a grab handle, scrolling inside, and clear of the
+ * phone's home indicator. From `lg` up it is the centred dialog it always was.
+ * The layout is breakpoint classes, so there is nothing to measure and nothing
+ * that renders differently on the server.
  */
 export function CommunitySheet({
   open,
@@ -71,12 +77,20 @@ export function CommunitySheet({
   return (
     <DialogRoot open={open} onOpenChange={onOpenChange}>
       <DialogPortal>
-        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: COMMUNITY_SHEET_Z }} />
         <DialogContent
           data-testid={testId}
+          data-sheet="bottom-below-lg"
           aria-describedby={undefined}
+          className={COMMUNITY_SHEET_CLASSES}
           style={sheetStyle(t)}
         >
+          <div
+            aria-hidden
+            data-sheet-handle=""
+            className="fg:mx-auto fg:mb-3 fg:lg:hidden"
+            style={{ width: 40, height: 4, borderRadius: 2, background: t.border }}
+          />
           <div className="fg:flex fg:items-center fg:justify-between fg:gap-3" style={{ marginBottom: 12 }}>
             <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0, fontFamily: t.headingFontFamily }}>
               {title}
@@ -98,20 +112,34 @@ export function CommunitySheet({
   );
 }
 
+/**
+ * The sheet's stacking order. It is modal, so it covers everything pinned to
+ * the screen: the site's chat bubble (`AiAgentWidget` defaults to 9999) and
+ * the member home's bottom bar.
+ */
+export const COMMUNITY_SHEET_Z = 10000;
+
+/**
+ * Where the sheet sits: a bottom sheet below `lg`, the centred dialog from
+ * `lg` up. The corner radius comes from the theme through `--cs-radius`.
+ */
+export const COMMUNITY_SHEET_CLASSES = [
+  "fg:fixed fg:inset-x-0 fg:bottom-0 fg:w-full fg:max-h-[90dvh] fg:overflow-y-auto",
+  "fg:rounded-t-[var(--cs-radius)] fg:px-5 fg:pt-3",
+  "fg:lg:inset-x-auto fg:lg:bottom-auto fg:lg:top-1/2 fg:lg:left-1/2 fg:lg:-translate-x-1/2 fg:lg:-translate-y-1/2",
+  "fg:lg:w-[min(560px,calc(100vw-32px))] fg:lg:max-h-[88vh] fg:lg:rounded-[var(--cs-radius-lg)] fg:lg:p-6",
+].join(" ");
+
 function sheetStyle(t: ResolvedThemeTokens): CSSProperties {
   return {
-    position: "fixed",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "min(560px, calc(100vw - 32px))",
-    maxHeight: "88vh",
-    overflowY: "auto",
+    // A bottom sheet's top corners stay visibly round on a square theme.
+    ["--cs-radius" as string]: `${Math.max(t.cornerRadius, 12)}px`,
+    ["--cs-radius-lg" as string]: `${t.cornerRadius}px`,
+    // Clear of the phone's home indicator; the inset is 0 everywhere else.
+    paddingBottom: "calc(24px + env(safe-area-inset-bottom))",
     background: t.background,
     color: t.text,
-    borderRadius: t.cornerRadius,
-    padding: 24,
-    zIndex: 51,
+    zIndex: COMMUNITY_SHEET_Z + 1,
     fontFamily: t.fontFamily,
     boxSizing: "border-box",
   };

package/src/ui/styled/community/CommunityAgent.tsx

@@ -0,0 +1,286 @@
+import { Bot, Sparkles, ThumbsDown, ThumbsUp, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  linkifyText,
+  useCommunityAgentAnswerFeedback,
+  useCommunityCatchUp,
+} from "../../headless/community/useCommunityAgent";
+import type { CommunityAgentFeedbackEntity } from "../../../data/queries/useCommunityAgent";
+
+/** What an agent is drawn from: its name and avatar. */
+export interface CommunityAgentIdentity {
+  name: string;
+  avatarUrl?: string | null;
+}
+
+/**
+ * The "AI" chip. Shown beside the community AI's name everywhere it appears,
+ * so it is never mistaken for a member or for the creator.
+ */
+export function CommunityAgentBadge() {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <span
+      data-testid="community-agent-badge"
+      title={tr("forge.community_agent.badge_title")}
+      style={{
+        background: t.primary,
+        color: t.textPrimary,
+        borderRadius: 999,
+        fontSize: 10,
+        fontWeight: 700,
+        padding: "1px 6px",
+        letterSpacing: 0.4,
+        whiteSpace: "nowrap",
+        flexShrink: 0,
+      }}
+    >
+      {tr("forge.community_agent.badge")}
+    </span>
+  );
+}
+
+export interface CommunityAgentAvatarProps {
+  agent: CommunityAgentIdentity;
+  size?: number;
+}
+
+/** The agent's avatar, or a neutral AI glyph when the creator set none. */
+export function CommunityAgentAvatar({ agent, size = 36 }: CommunityAgentAvatarProps) {
+  const t = useThemeTokens();
+  const style: React.CSSProperties = { width: size, height: size, borderRadius: "50%", flexShrink: 0, objectFit: "cover" };
+  if (agent.avatarUrl) return <img src={agent.avatarUrl} alt={agent.name} style={style} />;
+  return (
+    <div
+      role="img"
+      aria-label={agent.name}
+      data-testid="community-agent-glyph"
+      style={{
+        ...style,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: `${t.primary}22`,
+        color: t.primary,
+      }}
+    >
+      <Bot size={Math.max(12, Math.round(size * 0.55))} aria-hidden />
+    </div>
+  );
+}
+
+export interface CommunityAgentNameProps {
+  agent: CommunityAgentIdentity;
+  fontSize?: number;
+  fontWeight?: number;
+}
+
+/** The agent's name with its "AI" badge, in place of a member's name. */
+export function CommunityAgentName({ agent, fontSize = 14, fontWeight = 600 }: CommunityAgentNameProps) {
+  const t = useThemeTokens();
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+      <span
+        style={{
+          color: t.text,
+          fontWeight,
+          fontSize,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {agent.name}
+      </span>
+      <CommunityAgentBadge />
+    </span>
+  );
+}
+
+/**
+ * Plain text with its http(s) addresses made clickable, line breaks kept. For
+ * the agent's answers, which end with a "Sources:" list of addresses.
+ */
+export function CommunityLinkifiedText({ text }: { text: string }) {
+  const t = useThemeTokens();
+  return (
+    <span style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>
+      {linkifyText(text).map((segment, i) =>
+        segment.kind === "link" ? (
+          <a
+            key={i}
+            href={segment.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "inherit", textDecoration: "underline", textDecorationColor: t.primary }}
+          >
+            {segment.text}
+          </a>
+        ) : (
+          <span key={i}>{segment.text}</span>
+        ),
+      )}
+    </span>
+  );
+}
+
+/** "<name> is thinking..." while the agent writes an answer. */
+export function CommunityAgentThinking({ name }: { name?: string | null }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <div
+      role="status"
+      data-testid="community-agent-thinking"
+      style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: t.muted }}
+    >
+      <Sparkles size={13} aria-hidden style={{ color: t.primary }} />
+      {name ? tr("forge.community_agent.thinking", { agent_name: name }) : tr("forge.community_agent.thinking_unnamed")}
+    </div>
+  );
+}
+
+export interface CommunityAgentFeedbackProps {
+  entityType: CommunityAgentFeedbackEntity;
+  entityId: string;
+  /** The member's saved rating, from `useCommunityAgentAnswerRatings`. */
+  saved?: 1 | -1 | null;
+}
+
+/**
+ * Thumbs up / down on one AI answer, for the member who asked (render it only
+ * where `useCommunityAgentAnswerRatings` says they may rate). Starts from the
+ * saved rating; optimistic; a second press on the active thumb clears it. A
+ * 404 hides it without a word.
+ */
+export function CommunityAgentFeedback({ entityType, entityId, saved = null }: CommunityAgentFeedbackProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const feedback = useCommunityAgentAnswerFeedback(entityType, entityId, saved);
+  if (feedback.hidden) return null;
+
+  const thumb = (value: 1 | -1, label: string, icon: React.ReactNode) => {
+    const active = feedback.value === value;
+    return (
+      <button
+        type="button"
+        onClick={() => feedback.rate(value)}
+        aria-label={label}
+        aria-pressed={active}
+        title={label}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          background: active ? `${t.primary}1a` : "none",
+          border: "none",
+          borderRadius: t.cornerRadius,
+          cursor: "pointer",
+          color: active ? t.primary : t.muted,
+          padding: "2px 4px",
+        }}
+      >
+        {icon}
+      </button>
+    );
+  };
+
+  return (
+    <span data-testid="community-agent-feedback" style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
+      {thumb(1, tr("forge.community_agent.feedback_up"), <ThumbsUp size={13} aria-hidden />)}
+      {thumb(-1, tr("forge.community_agent.feedback_down"), <ThumbsDown size={13} aria-hidden />)}
+    </span>
+  );
+}
+
+export interface CommunityCatchMeUpProps {
+  postId: string;
+  agent: CommunityAgentIdentity;
+}
+
+/**
+ * "Catch me up" on a long thread. The summary opens in a private panel, marked
+ * as written by the AI, that only this member sees; nothing is posted. A
+ * reached daily limit or an unavailable AI is said plainly.
+ */
+export function CommunityCatchMeUp({ postId, agent }: CommunityCatchMeUpProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const catchUp = useCommunityCatchUp(postId);
+  const border = `1px solid ${t.border}`;
+
+  const errorCopy =
+    catchUp.error === "daily_limit"
+      ? tr("forge.community_agent.catch_up_daily_limit")
+      : catchUp.error === "unavailable"
+        ? tr("forge.community_agent.catch_up_unavailable")
+        : catchUp.error
+          ? tr("forge.community_agent.catch_up_failed")
+          : null;
+
+  if (catchUp.summary) {
+    return (
+      <section
+        data-testid="community-catch-me-up-panel"
+        aria-label={tr("forge.community_agent.catch_up_panel_label", { agent_name: catchUp.summary.agentName })}
+        style={{ border, borderRadius: t.cornerRadius, background: `${t.primary}0d`, padding: 14 }}
+      >
+        <header style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
+          <CommunityAgentAvatar agent={agent} size={24} />
+          <span style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
+            <CommunityAgentName agent={{ ...agent, name: catchUp.summary.agentName || agent.name }} fontSize={13} />
+            <span style={{ fontSize: 12, color: t.muted }}>{tr("forge.community_agent.catch_up_private")}</span>
+          </span>
+          <button
+            type="button"
+            onClick={catchUp.dismiss}
+            aria-label={tr("forge.community_agent.catch_up_dismiss")}
+            style={{ background: "none", border: "none", cursor: "pointer", color: t.muted, padding: 2 }}
+          >
+            <X size={15} aria-hidden />
+          </button>
+        </header>
+        <div style={{ color: t.text, fontSize: 14, lineHeight: 1.55 }}>
+          <CommunityLinkifiedText text={catchUp.summary.summary} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start" }}>
+      <button
+        type="button"
+        onClick={catchUp.ask}
+        disabled={catchUp.isPending}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          background: "none",
+          border,
+          borderRadius: t.cornerRadius,
+          padding: "6px 12px",
+          cursor: catchUp.isPending ? "wait" : "pointer",
+          color: t.text,
+          fontSize: 13,
+          fontWeight: 600,
+          opacity: catchUp.isPending ? 0.7 : 1,
+        }}
+      >
+        <Sparkles size={14} aria-hidden style={{ color: t.primary }} />
+        {catchUp.isPending ? tr("forge.community_agent.catch_up_pending") : tr("forge.community_agent.catch_up")}
+      </button>
+      {errorCopy && (
+        <div
+          role="alert"
+          data-testid="community-catch-me-up-error"
+          style={{ fontSize: 13, color: t.text, borderLeft: `3px solid ${t.primary}`, paddingLeft: 8 }}
+        >
+          {errorCopy}
+        </div>
+      )}
+    </div>
+  );
+}