@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,66 @@
+import type { ChatMessage } from "../../../data/queries/useChat";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { readableTextOn } from "../../theme/contrast";
+import { ChatAttachments } from "./ChatAttachments";
+
+export interface MessageBubbleProps {
+  message: ChatMessage;
+  mine: boolean;
+  /** Thread affordances hidden inside an already-open thread. */
+  onOpenThread?: (message: ChatMessage) => void;
+  showThreadControls?: boolean;
+}
+
+export function MessageBubble({ message, mine, onOpenThread, showThreadControls = true }: MessageBubbleProps) {
+  const theme = useForgeTheme();
+  const replyCount = message.replyCount ?? 0;
+
+  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>
+      )}
+      <div
+        style={{
+          background: mine ? theme.colors.primary : `${theme.colors.text}10`,
+          color: mine ? readableTextOn(theme.colors.primary) : theme.colors.text,
+          padding: "8px 12px",
+          borderRadius: theme.cornerRadius,
+        }}
+      >
+        {message.content}
+        <ChatAttachments attachments={message.attachments} />
+      </div>
+
+      {showThreadControls && (
+        <div style={{ display: "flex", gap: 10, marginTop: 3 }}>
+          {replyCount > 0 ? (
+            <button
+              onClick={() => onOpenThread?.(message)}
+              style={{
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                color: theme.colors.primary,
+                fontSize: 12,
+                fontWeight: 600,
+              }}
+            >
+              {replyCount} {replyCount === 1 ? "reply" : "replies"}
+            </button>
+          ) : (
+            <button
+              onClick={() => onOpenThread?.(message)}
+              style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: theme.colors.text, opacity: 0.55, fontSize: 12 }}
+            >
+              Reply
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+import { useMemo, useState } from "react";
+import type { ChatDirectoryMember } from "../../../data/queries/useChat";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { readableTextOn } from "../../theme/contrast";
+
+export interface NewDmDialogProps {
+  members: ChatDirectoryMember[];
+  isStarting?: boolean;
+  onSelect: (accountId: string) => void;
+  onClose: () => void;
+}
+
+const memberName = (m: ChatDirectoryMember) => `${m.firstName ?? ""} ${m.lastName ?? ""}`.trim() || m.email;
+
+/** People-picker of same-tier members to start a DM with. */
+export function NewDmDialog({ members, isStarting, onSelect, onClose }: NewDmDialogProps) {
+  const theme = useForgeTheme();
+  const [query, setQuery] = useState("");
+  const border = `1px solid ${theme.colors.text}1a`;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return members;
+    return members.filter((m) => memberName(m).toLowerCase().includes(q) || m.email.toLowerCase().includes(q));
+  }, [members, query]);
+
+  return (
+    <div
+      onClick={onClose}
+      style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000, padding: 16 }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{ background: theme.colors.background, color: theme.colors.text, borderRadius: theme.cornerRadius, width: "100%", maxWidth: 420, maxHeight: "80vh", display: "flex", flexDirection: "column", overflow: "hidden", border }}
+      >
+        <header style={{ padding: "14px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>
+          <strong style={{ flex: 1 }}>New message</strong>
+          <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text, fontSize: 18 }} aria-label="Close">
+            ×
+          </button>
+        </header>
+        <div style={{ padding: 12, borderBottom: border }}>
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search members…"
+            style={{ width: "100%", padding: "8px 10px", borderRadius: theme.cornerRadius, border, background: theme.colors.background, color: theme.colors.text }}
+          />
+        </div>
+        <div style={{ overflowY: "auto", flex: 1 }}>
+          {filtered.length === 0 && (
+            <div style={{ padding: 20, textAlign: "center", opacity: 0.5, fontSize: 13 }}>No members to message.</div>
+          )}
+          {filtered.map((m) => {
+            const name = memberName(m);
+            const initial = name.charAt(0).toUpperCase();
+            return (
+              <button
+                key={m.accountId}
+                disabled={isStarting}
+                onClick={() => onSelect(m.accountId)}
+                style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left", padding: "10px 16px", background: "none", border: "none", borderBottom: border, cursor: isStarting ? "wait" : "pointer", color: theme.colors.text }}
+              >
+                <span
+                  style={{ width: 32, height: 32, borderRadius: 999, background: theme.colors.primary, color: readableTextOn(theme.colors.primary), display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, flexShrink: 0 }}
+                >
+                  {initial}
+                </span>
+                <span style={{ minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,358 @@
+import { useRef, useState } from "react";
+import { Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { formatBytes } from "../../headless/chat/attachmentKind";
+import { useCommunityAttachmentUpload } from "../../headless/community/useCommunityAttachmentUpload";
+import { useRichMentionComposer, type RichCommand } from "../../headless/community/useRichMentionComposer";
+import { MemberAvatar } from "./MemberAvatar";
+import type { CommunityAttachmentInput } from "../../../data/queries/useCommunity";
+
+export interface CommunityComposerSubmit {
+  title?: string;
+  body: unknown;
+  attachments: CommunityAttachmentInput[];
+  mentionedAccountIds: string[];
+}
+
+export interface CommunityComposerProps {
+  /** Show the title input (forum spaces). */
+  withTitle?: boolean;
+  placeholder?: string;
+  submitLabel?: string;
+  autoFocus?: boolean;
+  compact?: boolean;
+  onSubmit: (input: CommunityComposerSubmit) => Promise<unknown>;
+  onCancel?: () => void;
+}
+
+/**
+ * Post/reply composer: a lean contentEditable rich-text editor (bold/italic/
+ * underline, bullet + numbered lists, links) with `@mention` autocomplete
+ * (member directory) and attachments. The DOM is the source of truth; on submit
+ * it serializes to the Lexical state CommunityRichText renders — no Lexical
+ * runtime is pulled into forge. Same onSubmit contract the plain-text composer
+ * used ({ title?, body, attachments, mentionedAccountIds }).
+ */
+export function CommunityComposer({
+  withTitle = false,
+  placeholder = "Write something…",
+  submitLabel = "Post",
+  autoFocus = false,
+  compact = false,
+  onSubmit,
+  onCancel,
+}: CommunityComposerProps) {
+  const t = useThemeTokens();
+  const composer = useRichMentionComposer();
+  const upload = useCommunityAttachmentUpload();
+  const [title, setTitle] = useState("");
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const border = `1px solid ${t.border}`;
+  const canSubmit =
+    (!composer.isEmpty || upload.hasPending) && !sending && (!withTitle || title.trim().length > 0);
+
+  const submit = async () => {
+    if (!canSubmit) return;
+    setSending(true);
+    setError(null);
+    try {
+      const attachments = upload.hasPending ? await upload.uploadAll() : [];
+      await onSubmit({
+        title: withTitle ? title.trim() : undefined,
+        body: composer.getBody(),
+        attachments,
+        mentionedAccountIds: composer.getMentionedAccountIds(),
+      });
+      composer.reset();
+      setTitle("");
+      upload.clear();
+    } catch (err: any) {
+      setError(err?.response?.data?.message || "Couldn't publish. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const toolbarButton = (label: string, icon: React.ReactNode, onClick: () => void) => (
+    <button
+      key={label}
+      type="button"
+      title={label}
+      aria-label={label}
+      // mousedown so the editor keeps its selection.
+      onMouseDown={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 28,
+        height: 28,
+        background: "none",
+        border,
+        borderRadius: t.cornerRadius,
+        cursor: "pointer",
+        color: t.text,
+        padding: 0,
+      }}
+    >
+      {icon}
+    </button>
+  );
+
+  const fmt = (command: RichCommand) => () => composer.format(command);
+
+  return (
+    <div
+      style={{
+        border,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        padding: compact ? 8 : 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+      }}
+    >
+      {withTitle && (
+        <input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Title"
+          maxLength={200}
+          style={{
+            padding: "8px 10px",
+            borderRadius: t.cornerRadius,
+            border,
+            background: t.background,
+            color: t.text,
+            fontWeight: 600,
+          }}
+        />
+      )}
+
+      {/* Formatting toolbar */}
+      <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
+        {toolbarButton("Bold", <Bold size={15} />, fmt("bold"))}
+        {toolbarButton("Italic", <Italic size={15} />, fmt("italic"))}
+        {toolbarButton("Underline", <Underline size={15} />, fmt("underline"))}
+        <span style={{ width: 1, height: 18, background: t.border, margin: "0 2px" }} aria-hidden />
+        {toolbarButton("Bullet list", <List size={15} />, fmt("insertUnorderedList"))}
+        {toolbarButton("Numbered list", <ListOrdered size={15} />, fmt("insertOrderedList"))}
+        <span style={{ width: 1, height: 18, background: t.border, margin: "0 2px" }} aria-hidden />
+        {toolbarButton("Link", <LinkIcon size={15} />, () => composer.insertLink())}
+      </div>
+
+      <div style={{ position: "relative" }}>
+        <div
+          ref={composer.editorRef}
+          contentEditable
+          suppressContentEditableWarning
+          role="textbox"
+          aria-multiline="true"
+          data-placeholder={placeholder}
+          autoFocus={autoFocus}
+          onInput={composer.onEditorChange}
+          onKeyUp={composer.onEditorChange}
+          onClick={composer.onEditorChange}
+          onBlur={() => {
+            // Delay so a suggestion mousedown fires first.
+            setTimeout(() => composer.dismissSuggestions(), 120);
+          }}
+          className="forge-community-composer-editable"
+          style={{
+            width: "100%",
+            minHeight: compact ? 72 : 100,
+            maxHeight: 260,
+            overflowY: "auto",
+            padding: "8px 10px",
+            borderRadius: t.cornerRadius,
+            border,
+            background: t.background,
+            color: t.text,
+            fontFamily: "inherit",
+            fontSize: 14,
+            lineHeight: 1.5,
+            boxSizing: "border-box",
+            outline: "none",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+          }}
+        />
+        {/* Placeholder + mention-chip styling (scoped by class). */}
+        <style>{`
+          .forge-community-composer-editable:empty:before {
+            content: attr(data-placeholder);
+            color: ${t.muted};
+            pointer-events: none;
+          }
+          .forge-community-composer-editable [data-account-id] {
+            color: ${t.primary};
+            font-weight: 600;
+            background: ${t.primary}1a;
+            border-radius: 4px;
+            padding: 0 3px;
+          }
+          .forge-community-composer-editable a { color: ${t.primary}; text-decoration: underline; }
+        `}</style>
+
+        {composer.isSuggesting && (
+          <div
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              right: 0,
+              maxWidth: 320,
+              background: t.surface,
+              border,
+              borderRadius: t.cornerRadius,
+              boxShadow: "0 6px 20px rgba(0,0,0,0.14)",
+              zIndex: 30,
+              overflow: "hidden",
+            }}
+          >
+            {composer.suggestions.map((s) => (
+              <button
+                key={s.accountId}
+                type="button"
+                onMouseDown={(e) => {
+                  // mousedown so the editor keeps focus.
+                  e.preventDefault();
+                  composer.insertMention(s);
+                }}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  width: "100%",
+                  padding: "6px 10px",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  color: t.text,
+                  textAlign: "left",
+                  fontSize: 14,
+                }}
+              >
+                <MemberAvatar member={{ displayName: s.name, avatarUrl: s.avatarUrl }} size={24} />
+                <span style={{ fontWeight: 500 }}>{s.name}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {upload.error && <div style={{ fontSize: 12, color: "#dc2626" }}>{upload.error}</div>}
+      {error && <div style={{ fontSize: 12, color: "#dc2626" }}>{error}</div>}
+
+      {upload.pending.length > 0 && (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {upload.pending.map((p) => (
+            <div
+              key={p.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "4px 8px",
+                border,
+                borderRadius: t.cornerRadius,
+                maxWidth: 200,
+              }}
+            >
+              {p.kind === "image" && p.previewUrl ? (
+                <img src={p.previewUrl} alt="" style={{ width: 28, height: 28, objectFit: "cover", borderRadius: 4 }} />
+              ) : (
+                <span aria-hidden>📎</span>
+              )}
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                  {p.file.name}
+                </div>
+                <div style={{ fontSize: 10, color: t.muted }}>
+                  {p.status === "uploading" ? `${p.progress}%` : formatBytes(p.file.size)}
+                </div>
+              </div>
+              <button
+                onClick={() => upload.removeFile(p.id)}
+                aria-label="Remove attachment"
+                style={{ background: "none", border: "none", cursor: "pointer", color: t.text }}
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          hidden
+          onChange={(e) => {
+            if (e.target.files) upload.addFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={!upload.canAddMore}
+          title="Attach files"
+          style={{
+            background: "none",
+            border,
+            borderRadius: t.cornerRadius,
+            padding: "4px 10px",
+            cursor: upload.canAddMore ? "pointer" : "not-allowed",
+            color: t.text,
+            fontSize: 16,
+          }}
+        >
+          📎
+        </button>
+        <span style={{ flex: 1, fontSize: 11, color: t.muted }}>Use @ to mention members</span>
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            style={{
+              background: "none",
+              border,
+              borderRadius: t.cornerRadius,
+              padding: "6px 12px",
+              cursor: "pointer",
+              color: t.text,
+              fontSize: 13,
+            }}
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          onClick={submit}
+          disabled={!canSubmit}
+          style={{
+            background: t.primary,
+            color: t.textPrimary,
+            border: "none",
+            borderRadius: t.cornerRadius,
+            padding: "6px 16px",
+            fontWeight: 600,
+            cursor: canSubmit ? "pointer" : "not-allowed",
+            opacity: canSubmit ? 1 : 0.6,
+            fontSize: 14,
+          }}
+        >
+          {sending ? "…" : submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}