- {pageInfo.title ? (
+ {pageInfo.loading ? (
+
+ ) : pageInfo.title ? (
- {pageInfo.title}
+ {shortTitle && !isMobile ? (
+ <>
+ {/* The bar is as wide as the screen under 1240px, and 240px narrower past it. */}
+
+ {pageInfo.title}
+
+
+ {shortTitle}
+
+
+ ) : (
+ pageInfo.title
+ )}
) : (
pageInfo.icon && (
diff --git a/app/layouts/topbar/pageRoutes.tsx b/app/layouts/topbar/pageRoutes.tsx
index dc3f5306e..443d70f79 100644
--- a/app/layouts/topbar/pageRoutes.tsx
+++ b/app/layouts/topbar/pageRoutes.tsx
@@ -16,6 +16,8 @@ import { HOME_TAB_PATHS, isHomeTabPath } from '@/hooks/useFundTabs';
export interface PageInfo {
title: string;
icon?: React.ReactNode;
+ /** The page names what it has open and has not yet: a placeholder stands in. */
+ loading?: boolean;
}
export const ROOT_NAVIGATION_PATHS = new Set([
@@ -61,6 +63,14 @@ const ROUTE_RULES: RouteRule[] = [
icon:
,
}),
},
+ {
+ // Not a root navigation page, so the top bar gives it the back arrow:
+ // that arrow is the way out of the workspace. It always names what it has
+ // open (a document, or the draft it will start) rather than itself, so
+ // until it does, the title is a placeholder rather than "Workspace".
+ match: (p) => p === '/workspace',
+ getInfo: () => ({ title: '', loading: true }),
+ },
{
match: (p) => p === '/notifications',
getInfo: () => ({
diff --git a/app/my-funding/components/FundsReceived.tsx b/app/my-funding/components/FundsReceived.tsx
deleted file mode 100644
index ce77ae11f..000000000
--- a/app/my-funding/components/FundsReceived.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import Link from 'next/link';
-import { EarnEarningsSummary } from '@/components/Earn/EarnEarningsSummary';
-import { FeedContent } from '@/components/Feed/FeedContent';
-import { buttonVariants } from '@/components/ui/Button';
-import { useActivityFeed } from '@/hooks/useActivityFeed';
-import { useFeed } from '@/hooks/useFeed';
-import type { ActivityCommentType } from '@/services/activity.service';
-import { cn } from '@/utils/styles';
-
-interface FundsReceivedProps {
- userId: number;
- authorId?: number;
-}
-
-/** Stable reference: a new array on every render would restart the activity feed. */
-const PEER_REVIEW_COMMENT_TYPES: readonly ActivityCommentType[] = ['REVIEW', 'PEER_REVIEW'];
-
-function EmptyState({ children }: Readonly<{ children: ReactNode }>) {
- return (
-
- {children}
-
- );
-}
-
-function MyProposals({ userId }: Readonly<{ userId: number }>) {
- const {
- entries,
- isLoading,
- hasMore,
- loadMore,
- restoredScrollPosition,
- page,
- lastClickedEntryId,
- } = useFeed('all', {
- endpoint: 'funding_feed',
- contentType: 'PREREGISTRATION',
- createdBy: userId,
- ordering: 'newest',
- });
-
- return (
-
- My proposals
-
- You have no published proposals.
-
- );
-}
-
-function PeerReviewFeed({ authorId }: Readonly<{ authorId: number }>) {
- const {
- entries,
- isLoading,
- hasMore,
- loadMore,
- isLoadingMore,
- page,
- restorationTab,
- restoredScrollPosition,
- lastClickedEntryId,
- } = useActivityFeed({
- authorId,
- contentType: 'RHCOMMENTMODEL',
- commentTypes: PEER_REVIEW_COMMENT_TYPES,
- });
-
- return (
-
- You have no published peer reviews.
-
- }
- maxLength={150}
- showReadMoreCTA
- activeTab={restorationTab}
- restoredScrollPosition={restoredScrollPosition}
- page={page}
- lastClickedEntryId={lastClickedEntryId ?? undefined}
- shouldRenderBountyAsComment
- wideContent
- />
- );
-}
-
-function PeerReviews({ authorId }: Readonly<{ authorId?: number }>) {
- const hasAuthorId = authorId !== undefined && authorId > 0;
-
- return (
-
- Peer reviews
- {!hasAuthorId ? (
-
-
-
- Complete your researcher profile to publish peer reviews.
-
-
-
- );
-}
-
-export function FundsReceived({ userId, authorId }: Readonly) {
- return (
-
- );
-}
diff --git a/app/my-funding/components/MyFundingActivityContent.tsx b/app/my-funding/components/MyFundingActivityContent.tsx
new file mode 100644
index 000000000..131dfca54
--- /dev/null
+++ b/app/my-funding/components/MyFundingActivityContent.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { MyFundingActivityFeed } from '@/components/Funding/dashboard/MyFundingActivityFeed';
+import type { MyFundingActivity } from '@/components/Funding/dashboard/hooks/useMyFundingActivity';
+import { MyFundingActivityEmptyState } from './MyFundingActivityEmptyState';
+import { MyFundingDataError } from './MyFundingDataError';
+
+interface MyFundingActivityContentProps {
+ readonly activity: MyFundingActivity;
+ /** When the user last looked; later news is marked new. */
+ readonly seenAt: number | null;
+ /** A scientist the user backs, named in the empty state. */
+ readonly firstScientist?: string;
+ readonly hasRfps: boolean;
+}
+
+/** The Activity tab. */
+export function MyFundingActivityContent({
+ activity,
+ seenAt,
+ firstScientist,
+ hasRfps,
+}: MyFundingActivityContentProps) {
+ return (
+
+ {activity.error && (
+
+
+ )}
+
+ }
+ />
+
+
+
+
+ Nothing new yet
+
+
+ {activityPromise(firstScientist)}
+
+
+
+ {kinds.map(({ label, Icon, tint, note }) => (
+
+
+
+
+ {label}
+ {note ? (
+ {note}
+ ) : (
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/app/my-funding/components/MyFundingContent.tsx b/app/my-funding/components/MyFundingContent.tsx
new file mode 100644
index 000000000..1874b3dd0
--- /dev/null
+++ b/app/my-funding/components/MyFundingContent.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { FundedResearchList } from '@/components/Funding/dashboard/FundedResearchList';
+import { OwnProposalCards, RfpCards } from '@/components/Funding/dashboard/FundingWorkCards';
+import { MyFundingEmptyState } from '@/components/Funding/dashboard/MyFundingEmptyState';
+import { PeerReviewRows } from '@/components/Funding/dashboard/PeerReviewRows';
+import { RecentActivityPreview } from '@/components/Funding/dashboard/RecentActivityPreview';
+import { UpNext } from '@/components/Funding/dashboard/UpNext';
+import type { MyFundingActivity } from '@/components/Funding/dashboard/hooks/useMyFundingActivity';
+import type { MyFundingSeen } from '@/components/Funding/dashboard/hooks/useMyFundingSeen';
+import type {
+ FundedRow,
+ OwnProposalModel,
+ RfpCardModel,
+ UpNextItem,
+} from '@/components/Funding/dashboard/lib/myFundingModel';
+import type { FeedEntry } from '@/types/feed';
+import type { Note } from '@/types/note';
+
+export type MyFundingTab = 'overview' | 'funded' | 'rfps' | 'proposals' | 'reviews' | 'activity';
+
+/** How many of each list the Overview shows before "See all". */
+const OVERVIEW_ROWS = 4;
+const OVERVIEW_CARDS = 2;
+
+interface MyFundingContentProps {
+ readonly tab: Exclude;
+ readonly isSettled: boolean;
+ readonly isEmpty: boolean;
+ readonly latestDraft?: Note;
+ /** The side the user is mostly on, whose sections come first. */
+ readonly lead: 'giving' | 'raising';
+ readonly upNext: readonly UpNextItem[];
+ readonly fundedRows: readonly FundedRow[];
+ readonly rfps: readonly RfpCardModel[];
+ readonly ownProposals: readonly OwnProposalModel[];
+ readonly rfpEntries: ReadonlyMap;
+ readonly proposalEntries: ReadonlyMap;
+ readonly reviews: {
+ readonly entries: FeedEntry[];
+ readonly total: number;
+ readonly hasMore: boolean;
+ readonly isLoadingMore: boolean;
+ readonly loadMore: () => void;
+ };
+ /** Previewed at the foot of the Overview. */
+ readonly activity: MyFundingActivity;
+ readonly now: number;
+ readonly seen: MyFundingSeen;
+ readonly onTabChange: (tab: MyFundingTab) => void;
+}
+
+/**
+ * The column of My Funding under its hero. The Overview leads with what needs
+ * the user, then each side they are on, the bigger one first, and ends with a
+ * preview of the activity; the other tabs show one of those lists in full.
+ */
+export function MyFundingContent({
+ tab,
+ isSettled,
+ isEmpty,
+ latestDraft,
+ lead,
+ upNext,
+ fundedRows,
+ rfps,
+ ownProposals,
+ rfpEntries,
+ proposalEntries,
+ reviews,
+ activity,
+ now,
+ seen,
+ onTabChange,
+}: MyFundingContentProps) {
+ if (!isSettled) return onTabChange('funded')}
+ />
+ );
+ const rfpCards = (
+ onTabChange('rfps')}
+ />
+ );
+ const proposals = (
+ onTabChange('proposals')}
+ />
+ );
+ const peerReviews = reviews.entries.length > 0 && (
+
+ {overview && (
+ item.rfp && markReviewed(item.rfp)} />
+ )}
+ {sections}
+ {overview && (
+ onTabChange('activity')}
+ />
+ )}
+
+ );
+}
+
+function ContentSkeleton() {
+ return (
+
+ {[0, 1, 2].map((index) => (
+
+ );
+}
diff --git a/app/my-funding/components/MyFundingDataError.tsx b/app/my-funding/components/MyFundingDataError.tsx
new file mode 100644
index 000000000..a8a009cf9
--- /dev/null
+++ b/app/my-funding/components/MyFundingDataError.tsx
@@ -0,0 +1,17 @@
+interface MyFundingDataErrorProps {
+ readonly message?: string;
+}
+
+/** Non-blocking error notice for a dashboard data source. */
+export function MyFundingDataError({
+ message = 'Data failed to load. Please refresh and try again.',
+}: MyFundingDataErrorProps) {
+ return (
+
+ {message}
+
+ );
+}
diff --git a/app/my-funding/components/MyFundingPage.tsx b/app/my-funding/components/MyFundingPage.tsx
index 9c42e9131..335168e92 100644
--- a/app/my-funding/components/MyFundingPage.tsx
+++ b/app/my-funding/components/MyFundingPage.tsx
@@ -1,95 +1,556 @@
'use client';
-import { useEffect, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LayoutDashboard } from 'lucide-react';
+import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
-import { ArrowDownLeft, ArrowUpRight, type LucideIcon } from 'lucide-react';
import { PageLayout } from '@/app/layouts/PageLayout';
-import { FundsGiven } from '@/components/Funding/dashboard/FundsGiven';
+import { useEarningOverview } from '@/components/Earn/lib/hooks/useEarningOverview';
+import { FundingPowerCard } from '@/components/Funding/FundingPowerCard';
import { ModeratorViewAsFunder } from '@/components/Funding/dashboard/ModeratorViewAsFunder';
+import {
+ DECK_SIZE,
+ GENERIC_COVERS,
+ MyFundingHero,
+ MyFundingWelcomeHero,
+ type HeroCover,
+} from '@/components/Funding/dashboard/MyFundingHero';
+import { MyFundingRail, MyFundingRailSkeleton } from '@/components/Funding/dashboard/MyFundingRail';
+import { PeopleModal } from '@/components/Funding/dashboard/PeopleModal';
+import {
+ parseViewedFunderId,
+ useFunderOverview,
+} from '@/components/Funding/dashboard/hooks/useFunderOverview';
+import { useMyFundingActivity } from '@/components/Funding/dashboard/hooks/useMyFundingActivity';
+import { useMyFundingDocuments } from '@/components/Funding/dashboard/hooks/useMyFundingDocuments';
+import { useMyFundingSeen } from '@/components/Funding/dashboard/hooks/useMyFundingSeen';
+import {
+ buildFundedRows,
+ buildOwnFunders,
+ buildOwnProposals,
+ buildRfpCards,
+ buildSupportedPeople,
+ buildUpNext,
+ lastOwnUpdates,
+ latestNewsByPost,
+ type FundedRow,
+ type Money,
+ type OwnProposalModel,
+ type RfpCardModel,
+} from '@/components/Funding/dashboard/lib/myFundingModel';
+import { useMoneyFormat } from '@/components/Funding/dashboard/lib/useMoneyFormat';
+import {
+ RadiatingDotTabIcon,
+ RadiatingDotTabIconActive,
+} from '@/components/ui/RadiatingDotTabIcon';
import { Tabs } from '@/components/ui/Tabs';
+import { useFundingDocuments } from '@/contexts/FundingDocumentsContext';
import { useUser } from '@/contexts/UserContext';
-import { FundsReceived } from './FundsReceived';
+import { useActivityFeed } from '@/hooks/useActivityFeed';
+import type { ActivityCommentType } from '@/services/activity.service';
+import type { EarningAmount } from '@/types/user';
+import { cn } from '@/utils/styles';
+import { MyFundingActivityContent } from './MyFundingActivityContent';
+import { MyFundingContent, type MyFundingTab } from './MyFundingContent';
+import { MyFundingDataError } from './MyFundingDataError';
+import { MyFundingSignedOut } from './MyFundingSignedOut';
+import { buildHeroCopy } from './myFundingCopy';
-type MyFundingTab = 'given' | 'received';
+/** Stable reference: a new array on every render would restart the activity feed. */
+const PEER_REVIEW_COMMENT_TYPES: readonly ActivityCommentType[] = ['REVIEW', 'PEER_REVIEW'];
-/**
- * Tab label with the direction of the money in a circle: out of the wallet for
- * funds given, into it for funds received. The arrow inherits the tab's own
- * color so it picks up the active/inactive treatment for free.
- */
-function TabLabel({ icon: DirectionIcon, children }: { icon: LucideIcon; children: ReactNode }) {
- return (
-
-
-
- {children}
-
+const TABS: readonly MyFundingTab[] = [
+ 'overview',
+ 'funded',
+ 'rfps',
+ 'proposals',
+ 'reviews',
+ 'activity',
+];
+
+const ZERO: Money = { usd: 0, rsc: 0 };
+
+const sumMoney = (amounts: readonly Money[]): Money =>
+ amounts.reduce(
+ (total, amount) => ({ usd: total.usd + amount.usd, rsc: total.rsc + amount.rsc }),
+ ZERO
);
-}
-const MY_FUNDING_TABS = [
- {
- id: 'given',
- label: Funds given ,
- href: '/my-funding?tab=given',
- },
- {
- id: 'received',
- label: Funds received ,
- href: '/my-funding?tab=received',
- // Money coming in reads green, matching the emerald treatment the Fund
- // tabs already use for the inbound side.
- activeClassName: 'text-emerald-600 border-b-emerald-600',
- },
-];
+/** Earned amounts keep RSC at its value when earned, beside any USD. */
+const earnedMoney = (amounts: (EarningAmount | undefined)[]): Money =>
+ amounts.reduce(
+ (total, amount) => ({
+ usd: total.usd + (amount ? amount.rscUsdSnapshot + amount.usd : 0),
+ rsc: total.rsc + (amount?.rsc ?? 0),
+ }),
+ ZERO
+ );
-function resolveMyFundingTab(tab: string | null): MyFundingTab {
- return tab === 'received' ? 'received' : 'given';
+function TabLabel({ label, count }: { readonly label: string; readonly count?: number }) {
+ return (
+
+ {label}
+ {count != null && count > 0 && (
+
+ {count}
+
+ )}
+
+ );
}
+/**
+ * My Funding, built from what its user does rather than what they say they
+ * are: what they gave and to whom, the RFPs they run, the proposals they wrote
+ * and the reviews they published. Each side they are on adds its tab, its
+ * sections and its part of the rail; someone who has done nothing yet gets the
+ * ways in.
+ */
export function MyFundingPage() {
const router = useRouter();
const searchParams = useSearchParams();
const { user, isLoading: isLoadingUser } = useUser();
- const activeTab = resolveMyFundingTab(searchParams.get('tab'));
+ const format = useMoneyFormat();
const isModerator = !!user?.isModerator;
- const hasModeratorOverrideOnReceivedTab =
- activeTab === 'received' && isModerator && searchParams.has('user_id');
+ // A moderator may view another funder's page; everyone else sees their own.
+ const viewedUserId =
+ (isModerator ? parseViewedFunderId(searchParams.get('user_id')) : undefined) ?? user?.id;
+ const isOwnPage = viewedUserId != null && viewedUserId === user?.id;
+ const authorId = isOwnPage ? user?.authorProfile?.id : undefined;
+ const requestedTab = searchParams.get('tab') as MyFundingTab | null;
+ // Fixed for the visit, so "days left" and "days ago" agree everywhere on the page.
+ const [now] = useState(() => Date.now());
+
+ const overview = useFunderOverview(viewedUserId);
+ const earnings = useEarningOverview(isOwnPage ? user?.id : undefined);
+ const documents = useMyFundingDocuments({ viewedUserId, isOwnPage });
+ const activity = useMyFundingActivity({ viewedUserId, authorId });
+ const readsReviews = isOwnPage && authorId != null && authorId > 0;
+ const reviews = useActivityFeed({
+ authorId: readsReviews ? authorId : undefined,
+ contentType: 'RHCOMMENTMODEL',
+ commentTypes: PEER_REVIEW_COMMENT_TYPES,
+ enabled: readsReviews,
+ });
+ // Once the feed pages, its count becomes the number of rows loaded, so the
+ // total it first reported is the one kept.
+ const [reviewTotal, setReviewTotal] = useState(0);
useEffect(() => {
- if (isLoadingUser) return;
+ setReviewTotal((total) => Math.max(total, reviews.count));
+ }, [reviews.count]);
+ const seen = useMyFundingSeen(user?.id, isOwnPage);
+ const { drafts, status: draftsStatus } = useFundingDocuments();
- if (!user) {
- router.replace('/');
- return;
+ const rfpDocuments = useMemo(
+ () => documents.published.filter((document) => document.kind === 'rfp'),
+ [documents.published]
+ );
+ const givingOverview = overview.error ? null : overview.overview;
+ const news = useMemo(() => latestNewsByPost(activity.entries), [activity.entries]);
+ const fundedRows = useMemo(() => buildFundedRows(givingOverview, news), [givingOverview, news]);
+ const people = useMemo(() => buildSupportedPeople(fundedRows), [fundedRows]);
+ // What the user gave to each proposal, which RFPs count as committed budget.
+ const givenByProposal = useMemo(
+ () =>
+ new Map(
+ (givingOverview?.supportedProposals ?? []).map((proposal) => [
+ proposal.id,
+ proposal.fundedAmount,
+ ])
+ ),
+ [givingOverview]
+ );
+ const rfps = useMemo(
+ () => buildRfpCards(documents.published, givenByProposal, now),
+ [documents.published, givenByProposal, now]
+ );
+ const ownProposals = useMemo(
+ () => buildOwnProposals(documents.published, lastOwnUpdates(activity.entries, authorId), now),
+ [documents.published, activity.entries, authorId, now]
+ );
+ const ownFunders = useMemo(() => buildOwnFunders(ownProposals), [ownProposals]);
+ const upNext = useMemo(
+ () =>
+ buildUpNext({
+ rfps,
+ newProposalCount: seen.newProposalCount,
+ ownProposals,
+ format: (amount) => format(amount, { shorten: true }),
+ now,
+ }),
+ [rfps, seen.newProposalCount, ownProposals, format, now]
+ );
+
+ // Every source has had its first load, so nothing on the page will jump.
+ const isSettled =
+ !overview.isLoading &&
+ documents.isSettled &&
+ (!isOwnPage || !earnings.isLoading) &&
+ // The draft the empty state offers to pick up.
+ (!isOwnPage || draftsStatus !== 'loading') &&
+ (!readsReviews || !reviews.isLoading);
+
+ // RFPs never looked at before start counting new proposals from now, once
+ // their full list of proposals has loaded.
+ useEffect(() => {
+ if (isSettled && rfps.length > 0) {
+ seen.setProposalBaselines(rfps.map(({ postId, proposalIds }) => ({ postId, proposalIds })));
}
+ }, [isSettled, rfps, seen]);
+
+ const activeTab: MyFundingTab =
+ requestedTab && TABS.includes(requestedTab) ? requestedTab : 'overview';
+ const [activityOpened, setActivityOpened] = useState(false);
+ useEffect(() => {
+ if (activeTab !== 'activity') return;
+ setActivityOpened(true);
+ seen.markActivitySeen();
+ }, [activeTab, seen]);
+
+ const handleTabChange = useCallback(
+ (tabId: string) => {
+ const params = new URLSearchParams(searchParams.toString());
+ if (tabId === 'overview') params.delete('tab');
+ else params.set('tab', tabId);
+ const query = params.toString();
+ router.push(`/my-funding${query ? `?${query}` : ''}`, { scroll: false });
+ },
+ [router, searchParams]
+ );
+
+ const [peopleOpen, setPeopleOpen] = useState<'scientists' | 'funders' | null>(null);
+
+ // The page's frame and a placeholder header while the account loads, so
+ // nothing pops in around the header later.
+ if (isLoadingUser) return
+ Activity
+ {newActivity > 0 && (
+
+ {newActivity} new
+
+ )}
+
+ ),
+ icon: RadiatingDotTabIcon,
+ activeIcon: RadiatingDotTabIconActive,
+ iconClassName: 'h-[18px] w-[18px]',
+ },
+ ...(hasFunded
+ ? [{ id: 'funded', label:
+
+ )
+ }
+ />
+ );
+
+ const covers = heroCovers(fundedRows, hasProposals ? ownProposals : [], rfps, format);
- const params = new URLSearchParams(searchParams.toString());
- params.delete('user_id');
- router.replace(`/my-funding?${params.toString()}`, { scroll: false });
- }, [hasModeratorOverrideOnReceivedTab, isLoadingUser, router, searchParams, user]);
+ const hero = isEmpty ? (
+
+ ) : !isSettled ? (
+
+ ) : (
+
+ );
+
+ // The whole rail shows for everyone; like the header, it waits until every
+ // source has loaded.
+ const rail = !isSettled ? (
+
+ ) : (
+
+ );
- if (isLoadingUser || !user || hasModeratorOverrideOnReceivedTab) return null;
+ const latestDraft = isOwnPage ? drafts[0] : undefined;
return (
-
- {}}
- rightContent={isModerator && activeTab === 'given' ?
+
+ )}
+
+ {activeTab === 'activity' && !isEmpty ? (
+ [document.postId, document.entry]))}
+ proposalEntries={
+ new Map(
+ documents.published
+ .filter((document) => document.kind === 'proposal')
+ .map((document) => [document.postId, document.entry])
+ )
+ }
+ reviews={{
+ entries: readsReviews ? reviews.entries : [],
+ total: reviewTotal,
+ hasMore: reviews.hasMore,
+ isLoadingMore: reviews.isLoadingMore,
+ loadMore: reviews.loadMore,
+ }}
+ activity={activity}
+ now={now}
+ seen={seen}
+ onTabChange={handleTabChange}
+ />
+ )}
+
+ setPeopleOpen(null)}
+ title="Scientists you support"
+ people={people.map((person) => ({
+ profile: person.profile,
+ detail: person.proposalTitle,
+ amount: format(person.youGave, { shorten: true }),
+ }))}
+ />
+ setPeopleOpen(null)}
+ title="Your funders"
+ people={ownFunders.map((profile) => ({ profile }))}
/>
+
+ );
+}
+
+/**
+ * The hero's deck: the work the page is about (funded proposals, the user's
+ * own, their RFPs), one of each kind first. A deck with fewer than two cards
+ * is filled out with generic ones, a green proposal and a blue RFP.
+ */
+function heroCovers(
+ fundedRows: readonly FundedRow[],
+ ownProposals: readonly OwnProposalModel[],
+ rfps: readonly RfpCardModel[],
+ format: (amount: Money, options?: { shorten?: boolean }) => string
+): HeroCover[] {
+ // Ordered by what was given and described by it, so the deck is the same
+ // before and after the activity loads.
+ // The overview has no covers, so a funded proposal is drawn with the
+ // proposal icon and named by what was given to it.
+ const funded = [...fundedRows]
+ .sort((a, b) => b.youGave.usd - a.youGave.usd || b.youGave.rsc - a.youGave.rsc)
+ .map(
+ (row): HeroCover => ({
+ key: row.key,
+ title: row.title,
+ image: null,
+ status: `You gave ${format(row.youGave, { shorten: true })}`,
+ detail: row.scientist.fullName,
+ })
+ );
+ const own = ownProposals.map(
+ (proposal): HeroCover => ({
+ key: proposal.key,
+ title: proposal.title,
+ image: proposal.image,
+ ...(proposal.status === 'raising'
+ ? {
+ percent: proposal.percent ?? 0,
+ status: `${format(proposal.raised, { shorten: true })} of ${format(proposal.goal, { shorten: true })}`,
+ }
+ : {
+ status: proposal.status === 'closed' ? 'Closed' : 'Funded',
+ detail: `${proposal.funderCount} ${proposal.funderCount === 1 ? 'funder' : 'funders'}`,
+ }),
+ })
+ );
+ const rfpCovers = rfps.map(
+ (rfp): HeroCover => ({
+ key: rfp.key,
+ title: rfp.title,
+ image: rfp.image,
+ tone: 'blue',
+ status: rfp.isOpen ? 'RFP · open' : 'RFP · closed',
+ detail: `${rfp.proposalCount} ${rfp.proposalCount === 1 ? 'proposal' : 'proposals'}`,
+ })
+ );
+
+ // One of each kind before seconds, so a busy page still shows its range.
+ const groups = [funded, own, rfpCovers];
+ const real: HeroCover[] = [];
+ for (let round = 0; real.length < 3 && groups.some((group) => group.length > round); round++) {
+ for (const group of groups) if (group[round] && real.length < 3) real.push(group[round]);
+ }
+ if (real.length >= 2) return real;
+ if (real.length === 0) return GENERIC_COVERS;
+ // One real card: pair it with the generic card of the other kind.
+ const realIsRfp = rfpCovers.includes(real[0]);
+ return [real[0], GENERIC_COVERS[realIsRfp ? 0 : 1]];
+}
-
- {activeTab === 'given' ? (
-
- ) : (
-
- )}
+/**
+ * The header's shape while its contents are being worked out: the headline,
+ * the line under it, the deck and the tab bar, at the sizes they will have.
+ */
+function HeroSkeleton() {
+ return (
+
+ );
+}
+
+/** The whole page while the signed-in account is still loading. */
+function MyFundingLoading() {
+ return (
+
}
+ rightSidebarAbove={
}
+ rightSidebarTopOffset="aligned"
+ topBanner={
}
+ >
+
+ {[0, 1, 2].map((index) => (
+
);
}
diff --git a/app/my-funding/components/MyFundingSignedOut.tsx b/app/my-funding/components/MyFundingSignedOut.tsx
new file mode 100644
index 000000000..8cf543e22
--- /dev/null
+++ b/app/my-funding/components/MyFundingSignedOut.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import { PageLayout } from '@/app/layouts/PageLayout';
+import { FundingPowerCard } from '@/components/Funding/FundingPowerCard';
+import { MyFundingEmptyState } from '@/components/Funding/dashboard/MyFundingEmptyState';
+import { MyFundingWelcomeHero } from '@/components/Funding/dashboard/MyFundingHero';
+import { MyFundingRail } from '@/components/Funding/dashboard/MyFundingRail';
+import { useAuthModalContext } from '@/contexts/AuthModalContext';
+
+/**
+ * My Funding for someone who has not signed in: what the page will hold once
+ * they take part, a way to sign in, drafting an RFP or a proposal, and the
+ * proposals and RFPs open right now so the preview is real rather than a
+ * promise. Its width and rail are the signed-in page's.
+ */
+export function MyFundingSignedOut() {
+ const { showAuthModal } = useAuthModalContext();
+
+ return (
+
}
+ rightSidebarAbove={
}
+ rightSidebarTopOffset="aligned"
+ topBanner={
+
+ showAuthModal()}
+ className="inline-flex h-11 items-center rounded-lg bg-primary-500 px-5 text-[15px] font-semibold text-white hover:bg-primary-600"
+ >
+ Sign in
+
+ {format(facts.given)} and raised{' '}
+ {format(facts.raised)} .
+
+ ),
+ };
+ }
+
+ if (gave) {
+ const who = facts.isOwnPage ? 'You’ve' : 'This funder has';
+ return {
+ lead,
+ line: LINE,
+ headline: (
+ <>
+ {who} put {format(facts.given)} into science.
+
+ ),
+ };
+ }
+
+ if (facts.isOwnPage && facts.ownCount > 0) {
+ return {
+ lead: 'raising',
+ line: LINE,
+ headline: raised ? (
+ <>
+ You’ve raised {format(facts.raised)} for
+ your research.
+
+ ) : (
+ <>
+ You’re raising{' '}
+ {format(facts.asked, { shorten: true })} {' '}
+ for your research.
+
+ ),
+ };
+ }
+
+ if (facts.rfpCount > 0) {
+ return {
+ lead: 'giving',
+ line: LINE,
+ headline: (
+ <>
+ Your RFPs offer {format(facts.rfpBudget)} for research.
+
+ ),
+ };
+ }
+
+ return {
+ lead: 'raising',
+ line: LINE,
+ headline: (
+ <>
+ You’ve earned {format(facts.reviewEarned)} {' '}
+ reviewing research.
+
+ ),
+ };
+}
diff --git a/app/my-funding/page.tsx b/app/my-funding/page.tsx
index b0a8a30a2..96422288c 100644
--- a/app/my-funding/page.tsx
+++ b/app/my-funding/page.tsx
@@ -1,10 +1,11 @@
+import 'cal-sans/index.css';
import { Metadata } from 'next';
import { buildOpenGraphMetadata } from '@/lib/metadata';
import { MyFundingPage } from './components/MyFundingPage';
export const metadata: Metadata = buildOpenGraphMetadata({
title: 'My Funding',
- description: 'Track the funding you give and the earnings you receive.',
+ description: 'Manage your RFPs and proposals, track funding activity, and view your earnings.',
url: '/my-funding',
});
diff --git a/app/notebook/[orgSlug]/page.tsx b/app/notebook/[orgSlug]/page.tsx
index 046727ae6..cdae9f313 100644
--- a/app/notebook/[orgSlug]/page.tsx
+++ b/app/notebook/[orgSlug]/page.tsx
@@ -2,17 +2,13 @@
import { useOrganizationContext } from '@/contexts/OrganizationContext';
import { useNotebookContext } from '@/contexts/NotebookContext';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import proposalTemplate from '@/components/Editor/lib/data/proposalTemplate';
import { initialContent } from '@/components/Editor/lib/data/initialContent';
import grantTemplate from '@/components/Editor/lib/data/grantTemplate';
-import {
- getDocumentTitle,
- getTemplatePlainText,
-} from '@/components/Editor/lib/utils/documentTitle';
-import { useCreateNote, useNoteContent } from '@/hooks/useNote';
-import { NoteService } from '@/services/note.service';
+import { getDocumentTitle } from '@/components/Editor/lib/utils/documentTitle';
+import { createFundingDraft } from '@/components/Funding/createFundingDraft';
import { NoteCreationPopover } from '@/components/Notebook/NoteCreationPopover';
import { useUser } from '@/contexts/UserContext';
import type { ID } from '@/types/root';
@@ -34,8 +30,7 @@ export default function OrganizationPage() {
const { user, isLoading: isLoadingUser } = useUser();
const isModerator = !!user?.isModerator;
- const [{ isLoading: isCreatingNote }, createNote] = useCreateNote();
- const [{ isLoading: isUpdatingContent }, updateNoteContent] = useNoteContent();
+ const [isCreatingNote, setIsCreatingNote] = useState(false);
const isNewFunding = searchParams.get('newFunding') === 'true';
const isNewChangelog = searchParams.get('newChangelog') === 'true';
@@ -56,36 +51,28 @@ export default function OrganizationPage() {
template: typeof proposalTemplate | typeof grantTemplate | typeof initialContent;
queryParam?: string;
queryValue?: string;
- documentType?: string;
+ documentType: string;
selectedGrantId?: Exclude;
}
) => {
+ setIsCreatingNote(true);
try {
- const title = getDocumentTitle(template) || 'Untitled';
- const newNote = await createNote({
- organizationSlug: orgSlug,
- title,
- grouping: 'WORKSPACE',
+ const newNote = await createFundingDraft({
+ orgSlug,
+ title: getDocumentTitle(template) || 'Untitled',
documentType,
+ grouping: 'WORKSPACE',
+ selectedGrantId,
+ template,
});
- if (newNote) {
- if (selectedGrantId) {
- await NoteService.updateNote({ noteId: newNote.id, selectedGrantId });
- }
-
- await updateNoteContent({
- note: newNote.id,
- fullJson: JSON.stringify(template),
- plainText: getTemplatePlainText(template),
- });
-
- const queryString = queryParam && queryValue ? `?${queryParam}=${queryValue}` : '';
- refreshNotes();
- router.replace(`/notebook/${orgSlug}/${newNote.id}${queryString}`);
- }
+ const queryString = queryParam && queryValue ? `?${queryParam}=${queryValue}` : '';
+ refreshNotes();
+ router.replace(`/notebook/${orgSlug}/${newNote.id}${queryString}`);
} catch (err) {
console.error('Failed to create note:', err);
+ } finally {
+ setIsCreatingNote(false);
}
};
@@ -156,5 +143,5 @@ export default function OrganizationPage() {
return null;
}
- return
+
+
+
+
+
+
+
+
+
+
+ Peer review
+ Proposal
+
+
+
+ {REVIEW_SCORES.map((score) => (
+
+
{score.label}
+
+ {Array.from({ length: 5 }, (_, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+ Accepted
+
+
+ {/* Three steps fit a phone's width with tighter gaps; wider screens keep the full spacing. */}
+
+
+ {PIPELINE_STEPS.map((step, index) => {
+ const next = PIPELINE_STEPS[index + 1];
+ const number = String(index + 1).padStart(2, '0');
+
+ return (
+
0 && 'pl-4 sm:pl-6')}>
+
+ {number}
+
+ {next && (
+ // The lines brighten into the current step and fade out of it.
+
+ );
+ })}
+
+
+
+ {PIPELINE_STEPS.map((step, index) => {
+ const content = (
+ <>
+
+ {step.label}
+
+
{step.description}
+
+ );
+
+ return (
+
0 && 'pl-4 sm:pl-6')}>
+ {step.href ? (
+
+ );
+ })}
+
+
+
+
+
+
+
+ Where peer review finally pays.
+
+
+ Expert, public reviews of submitted proposals. $150 for every accepted review.
+
+
+
+
+
+ {/* Wide screens only, and no taller than the text beside it, as on My Funding. */}
+
+
+
+
+
+ How it works
+
+
+ {HOW_IT_WORKS.map((step, index) => {
+ const StepIcon = step.icon;
+
+ return (
+
+ {index > 0 && (
+
+
+ )}
+
+
+
+ {step.title}
+
+
{step.description}
+
+
+ );
+ })}
+
+
+);
diff --git a/app/peer-review/PeerReviewSidebar.tsx b/app/peer-review/PeerReviewSidebar.tsx
new file mode 100644
index 000000000..205af643f
--- /dev/null
+++ b/app/peer-review/PeerReviewSidebar.tsx
@@ -0,0 +1,117 @@
+import { ExternalLink, Feather, Info } from 'lucide-react';
+import {
+ CollapsibleEditorialBoardSection,
+ EditorialBoardSection,
+} from '@/components/Journal/RHJRightSidebar';
+import { JournalCollapsibleSection } from '@/components/Journal/JournalCollapsibleSection';
+import { cn } from '@/utils/styles';
+
+interface SectionProps {
+ className?: string;
+}
+
+const PEER_REVIEW_FACTS = [
+ { label: 'Reward', value: '$150 in RSC' },
+ { label: 'Paid per proposal', value: 'Top 2 reviews' },
+ { label: 'Payout', value: '~10 days after acceptance' },
+ { label: 'Visibility', value: 'Public, under your name' },
+];
+
+const RESOURCE_LINKS = [
+ {
+ href: 'https://docs.researchhub.com/researchhub-foundation/programs-and-initiatives/peer-review-program/peer-review-guidelines',
+ text: 'Peer review guidelines',
+ icon: Feather,
+ },
+];
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+ return {children} ;
+}
+
+function PeerReviewFactList() {
+ return (
+
+ {PEER_REVIEW_FACTS.map((fact) => (
+
+
{fact.label}
+ {fact.value}
+
+ ))}
+
+ );
+}
+
+function PeerReviewFacts({ className }: SectionProps) {
+ return (
+
+ );
+}
+
+function PeerReviewResources({ className }: SectionProps) {
+ return (
+
+ );
+}
+
+export function PeerReviewSidebar() {
+ return (
+
+ );
+}
+
+const MOBILE_SECTION_CLASS = 'rounded-xl border-t-0 bg-gray-50 px-4 py-3';
+
+/**
+ * The right sidebar is hidden below `lg` and this page has no trigger for the
+ * layout's mobile drawer, so phones get the same details here, collapsed so the
+ * bounties stay near the top. Mirrors the journal page.
+ */
+export function MobilePeerReviewDetails() {
+ return (
+
+
}
+ className={MOBILE_SECTION_CLASS}
+ >
+
+
+
+
+
+
+
+
ResearchHub compensates researchers for peer-reviewing scientific proposals. Unlike
@@ -45,11 +57,11 @@ export default async function PeerReviewPage() {
ways it can improve.
+
- Get paid to peer-review research proposals.
);
diff --git a/app/workspace/WorkspaceClient.tsx b/app/workspace/WorkspaceClient.tsx
new file mode 100644
index 000000000..a560ccbf8
--- /dev/null
+++ b/app/workspace/WorkspaceClient.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+import { PageLayout } from '@/app/layouts/PageLayout';
+
+/** The app's shell with the workspace's areas empty, until the workspace itself has loaded. */
+function WorkspaceShell() {
+ return (
+
+
+
+ );
+}
+
+// Client-only: the workspace sizes its panes from the window and from widths
+// remembered in the browser, none of which a server render can know.
+const WorkspacePage = dynamic(
+ () => import('@/components/AIMode/WorkspacePage').then((module) => module.WorkspacePage),
+ { ssr: false, loading: () => ` selects a conversation. */
-export const AI_MODE_OPEN_PARAM = 'ai';
-export const AI_MODE_CHAT_PARAM = 'aiChat';
-
-interface AIModeUrlState {
- isOpen: boolean;
- chatId: number | null;
-}
-
-export interface AIModeContextValue extends AIModeUrlState {
- /** Open on the last selected conversation, or the new-conversation screen. */
- open: () => void;
- close: () => void;
- toggle: () => void;
- /** Select a conversation (null = the new-conversation screen), opening if needed. */
- selectChat: (chatId: number | null) => void;
+import { useSearchParams } from 'next/navigation';
+import {
+ documentTarget,
+ readWorkspaceTarget,
+ sameTarget,
+ workspaceHref,
+ type DocumentChat,
+ type WorkspaceTarget,
+} from './workspaceUrl';
+
+export interface AIModeContextValue {
+ /** What the workspace is open on, as the URL says. */
+ readonly target: WorkspaceTarget;
+ selectTarget: (target: WorkspaceTarget) => void;
+ /** Open a document, on its most recent chat unless another is named. */
+ selectDocument: (noteId: number, chat?: DocumentChat) => void;
+ /**
+ * The open document while the assistant works on it, for the sidebar's
+ * row. Only the open one is known without asking the server, so only it
+ * is marked.
+ */
+ readonly workingNoteId: number | null;
+ setWorkingNoteId: (noteId: number | null) => void;
}
const AIModeContext = createContext(null);
-function parseChatId(raw: string | null): number | null {
- if (raw == null) return null;
- const parsed = Number.parseInt(raw, 10);
- return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
-}
-
-/**
- * Reads the overlay's URL state. Isolated behind Suspense because
- * `useSearchParams` de-opts a statically rendered page up to the nearest
- * boundary; the provider itself stays synchronous so nothing above it is
- * affected.
- */
-function AIModeUrlSync({ onChange }: { readonly onChange: (state: AIModeUrlState) => void }) {
- const searchParams = useSearchParams();
- const isOpen = searchParams.get(AI_MODE_OPEN_PARAM) === '1';
- const chatId = isOpen ? parseChatId(searchParams.get(AI_MODE_CHAT_PARAM)) : null;
- useEffect(() => {
- onChange({ isOpen, chatId });
- }, [isOpen, chatId, onChange]);
- return null;
-}
-
-const AIModeOverlay = dynamic(
- () => import('./AIModeOverlay').then((module) => module.AIModeOverlay),
- { ssr: false }
-);
-
/**
- * Owns the AI Mode overlay: its open/selected state lives in the URL, so a
- * reload or a shared link lands on the same conversation, and any client-side
- * navigation to another page naturally drops the params and closes it.
+ * Owns what the workspace page is open on. It lives in the URL, so a reload
+ * or a shared link lands on the same document and chat.
*
- * Mounted once, globally. The overlay body is lazy-loaded so a session that
- * never opens it pays nothing.
+ * Mounted by the `/workspace` page, not globally: the doors elsewhere in the
+ * app are plain links built with `workspaceHref`. Reads the URL with
+ * `useSearchParams`, so it needs a Suspense boundary above it.
*/
export function AIModeProvider({ children }: { readonly children: ReactNode }) {
- const pathname = usePathname();
- const [state, setState] = useState({ isOpen: false, chatId: null });
- // Closing drops the chat from the URL; reopening from the sidebar in the same
- // page session should still return to it. In memory only — a reload starts
- // from whatever the URL says.
- const lastChatIdRef = useRef(null);
- if (state.chatId != null) lastChatIdRef.current = state.chatId;
-
- const pathnameRef = useRef(pathname);
- pathnameRef.current = pathname;
-
- const navigate = useCallback((next: AIModeUrlState) => {
- // Event-handler only, so window is available; keeps every unrelated
- // query param the page already carries.
- const params = new URLSearchParams(window.location.search);
- if (next.isOpen) {
- params.set(AI_MODE_OPEN_PARAM, '1');
- } else {
- params.delete(AI_MODE_OPEN_PARAM);
- }
- if (next.isOpen && next.chatId != null) {
- params.set(AI_MODE_CHAT_PARAM, String(next.chatId));
- } else {
- params.delete(AI_MODE_CHAT_PARAM);
- }
- const query = params.toString();
- const hash = window.location.hash;
- // Native history, not router.replace: the app router keeps
- // useSearchParams in sync with it, and unlike a router navigation it
- // neither re-fetches nor re-renders the page behind the overlay.
- window.history.replaceState(
- window.history.state,
- '',
- `${pathnameRef.current}${query ? `?${query}` : ''}${hash}`
- );
- setState(next);
+ const searchParams = useSearchParams();
+ // The same object until the target itself changes, so effects keyed on it
+ // do not re-run with every render or unrelated param.
+ const parsed = readWorkspaceTarget(searchParams);
+ const targetRef = useRef(parsed);
+ if (!sameTarget(targetRef.current, parsed)) targetRef.current = parsed;
+ const target = targetRef.current;
+
+ const selectTarget = useCallback((next: WorkspaceTarget) => {
+ if (sameTarget(next, targetRef.current)) return;
+ // Replaced, not pushed: the workspace is one history entry however many
+ // documents and chats are opened in it, so Back leaves in a single step. Native
+ // history with no state of our own, which the app router picks up and
+ // feeds back through useSearchParams without fetching anything.
+ window.history.replaceState(null, '', `${workspaceHref(next)}${window.location.hash}`);
}, []);
-
- const open = useCallback(() => {
- navigate({ isOpen: true, chatId: lastChatIdRef.current });
- }, [navigate]);
- const close = useCallback(() => navigate({ isOpen: false, chatId: null }), [navigate]);
- const selectChat = useCallback(
- (chatId: number | null) => {
- if (chatId == null) lastChatIdRef.current = null;
- navigate({ isOpen: true, chatId });
- },
- [navigate]
+ const selectDocument = useCallback(
+ (noteId: number, chat?: DocumentChat) => selectTarget(documentTarget(noteId, chat)),
+ [selectTarget]
);
- const stateRef = useRef(state);
- stateRef.current = state;
- const toggle = useCallback(() => {
- if (stateRef.current.isOpen) close();
- else open();
- }, [open, close]);
+ const [workingNoteId, setWorkingNoteId] = useState(null);
const value = useMemo(
- () => ({ ...state, open, close, toggle, selectChat }),
- [state, open, close, toggle, selectChat]
+ () => ({ target, selectTarget, selectDocument, workingNoteId, setWorkingNoteId }),
+ [target, selectTarget, selectDocument, workingNoteId]
);
- return (
-
- {children}
-
-
- {state.isOpen &&
- );
+ return {children} ;
}
export function useAIMode(): AIModeContextValue {
@@ -151,7 +84,7 @@ export function useAIMode(): AIModeContextValue {
return context;
}
-/** Same as {@link useAIMode} but tolerates rendering outside the provider. */
+/** Same as {@link useAIMode} but null anywhere other than the workspace page. */
export function useOptionalAIMode(): AIModeContextValue | null {
return useContext(AIModeContext);
}
diff --git a/components/AIMode/AIModeOverlay.tsx b/components/AIMode/AIModeOverlay.tsx
deleted file mode 100644
index c72baac15..000000000
--- a/components/AIMode/AIModeOverlay.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { PanelRight, Sparkles, X } from 'lucide-react';
-import { cn } from '@/utils/styles';
-import { ResizeHandle } from '@/components/ui/ResizeHandle';
-import { SwipeableDrawer } from '@/components/ui/SwipeableDrawer';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-import { useResizableWidth } from '@/hooks/useResizableWidth';
-import { useAIMode } from './AIModeContext';
-import { ChatPane } from './ChatPane';
-import { ConversationList } from './ConversationList';
-import { DocumentCard } from './DocumentCard';
-import { DocumentPane } from './DocumentPane';
-import { useAIModeChat } from './useAIModeChat';
-import type { NotebookTab } from '@/components/Notebook/NotebookTabs';
-import type { PublishingDefaultArticleType } from '@/contexts/PublishingHostContext';
-import { useAIModeDocument } from './useAIModeDocument';
-import { AI_MODE_NAME } from './copy';
-
-/** Above the overlay (9500), below BaseModal (9999). */
-const AI_MODE_DRAWER_Z_INDEX = 9600;
-
-const LIST_MIN_WIDTH = 200;
-const LIST_MAX_WIDTH = 440;
-const LIST_DEFAULT_WIDTH = 264;
-const CHAT_MIN_WIDTH = 360;
-const DOCUMENT_MIN_WIDTH = 420;
-/** The details form needs more room than the document: authors, image, funding fields. */
-const DETAILS_MIN_WIDTH = 560;
-/** Share of the viewport the document opens at before the user drags it. */
-const DOCUMENT_DEFAULT_SHARE = 0.55;
-
-/**
- * A modal that portals outside the overlay (BaseModal, a drawer) is showing.
- * Closed drawers stay mounted off-screen with `role="dialog"`, so presence in
- * the DOM is not enough — the box has to intersect the viewport.
- */
-function isForeignDialogOpen(): boolean {
- const overlay = document.getElementById('ai-mode-overlay');
- return Array.from(document.querySelectorAll('[role="dialog"]')).some((el) => {
- if (overlay?.contains(el)) return false;
- const rect = el.getBoundingClientRect();
- return (
- rect.width > 0 &&
- rect.height > 0 &&
- rect.bottom > 0 &&
- rect.right > 0 &&
- rect.top < window.innerHeight &&
- rect.left < window.innerWidth
- );
- });
-}
-
-/**
- * The full-viewport shell: header, conversation list, chat, document. Sits
- * below BaseModal (9999) and Tooltip (10000) so real modals and tooltips
- * opened from inside it still render on top.
- */
-export function AIModeOverlay() {
- const { close } = useAIMode();
- const state = useAIModeChat();
- // Below the tablet breakpoint the list lives in a bottom drawer.
- const [listDrawerOpen, setListDrawerOpen] = useState(false);
- const closeListDrawer = useCallback(() => setListDrawerOpen(false), []);
-
- const doc = useAIModeDocument({
- note: state.note,
- chat: state.chat.chat,
- latestExecution: state.chat.latestExecution,
- });
-
- // Tailwind's `tablet` breakpoint; the drawer only exists below it.
- const isBelowTablet = useMediaQuery('(max-width: 767px)') === true;
-
- // ---- pane widths, claude.ai style: both side panes drag, the chat takes the rest ----
- const [viewportWidth, setViewportWidth] = useState(() =>
- typeof window === 'undefined' ? 1440 : window.innerWidth
- );
- useEffect(() => {
- const update = () => setViewportWidth(window.innerWidth);
- update();
- window.addEventListener('resize', update);
- return () => window.removeEventListener('resize', update);
- }, []);
- const listWidth = useResizableWidth({
- storageKey: 'ai-mode:list-width',
- min: LIST_MIN_WIDTH,
- max: LIST_MAX_WIDTH,
- defaultWidth: LIST_DEFAULT_WIDTH,
- anchor: 'left',
- });
- // Document or details in the right pane; details wants a wider floor.
- const [documentTab, setDocumentTab] = useState('document');
- const documentMinWidth = documentTab === 'details' ? DETAILS_MIN_WIDTH : DOCUMENT_MIN_WIDTH;
- // The document may grow until the chat is down to its minimum column.
- const documentMaxWidth = Math.max(
- documentMinWidth,
- viewportWidth - listWidth.width - CHAT_MIN_WIDTH
- );
- const documentWidth = useResizableWidth({
- storageKey: 'ai-mode:document-width',
- min: documentMinWidth,
- max: documentMaxWidth,
- defaultWidth: (width) => width * DOCUMENT_DEFAULT_SHARE,
- anchor: 'right',
- });
- const isBelowTabletRef = useRef(isBelowTablet);
- isBelowTabletRef.current = isBelowTablet;
-
- // On desktop the document pane opens by itself the moment a conversation
- // gains a note. On mobile it never opens by itself — the card in the
- // transcript is the way in, and it opens a drawer. Either way the user can
- // close it and reopen it from the card or the chat header.
- const noteId = state.note?.id ?? null;
- const [documentOpen, setDocumentOpen] = useState(false);
- useEffect(() => {
- setDocumentOpen(noteId != null && !isBelowTabletRef.current);
- setDocumentTab('document');
- }, [noteId]);
-
- // What the conversation set out to write, from its opening message, so the
- // details form preselects the matching work type for a note that has none.
- const defaultArticleType = useMemo(() => {
- const opening = state.chat.chat?.messages.find((message) => message.role === 'user')?.content;
- if (!opening) return null;
- if (/request for proposals|\bRFP\b/i.test(opening)) return 'grant';
- if (/proposal/i.test(opening)) return 'preregistration';
- return null;
- }, [state.chat.chat?.messages]);
- const openDocument = useCallback(() => setDocumentOpen(true), []);
- const closeDocument = useCallback(() => setDocumentOpen(false), []);
- const showDocument = noteId != null && documentOpen;
-
- // The turn that created the document, for seating its card in the transcript.
- const documentCardExecutionId = useMemo(() => {
- if (noteId == null) return null;
- for (const execution of state.chat.chat?.executions ?? []) {
- const created = (execution.activity ?? []).some(
- (item) =>
- item.type === 'tool_call' &&
- item.tool === 'create_note' &&
- item.status === 'succeeded' &&
- item.note_id === noteId
- );
- if (created) return execution.id;
- }
- return null;
- }, [noteId, state.chat.chat]);
- const documentCard =
- noteId != null ? (
- (null);
- useEffect(() => {
- if (!rootEl) return;
- rootEl.focus();
- const inerted: Element[] = [];
- for (const child of Array.from(document.body.children)) {
- if (child === rootEl || child.tagName === 'SCRIPT' || child.tagName === 'NEXTJS-PORTAL') {
- continue;
- }
- if (child.hasAttribute('inert')) continue;
- child.setAttribute('inert', '');
- inerted.push(child);
- }
- return () => {
- for (const child of inerted) child.removeAttribute('inert');
- };
- }, [rootEl]);
-
- // Lock the page behind the overlay.
- useEffect(() => {
- const previous = document.body.style.overflow;
- document.body.style.overflow = 'hidden';
- return () => {
- document.body.style.overflow = previous;
- };
- }, []);
-
- const conversationList = (
- {
- state.selectChat(chatId);
- closeListDrawer();
- }}
- onNew={() => {
- state.startNewChat();
- closeListDrawer();
- }}
- onRename={state.rename}
- onDelete={state.deleteChat}
- loadNotes={state.notesForChat}
- onRetry={state.list.refresh}
- />
- );
-
- return createPortal(
-
-
-
- {AI_MODE_NAME}
-
-
- Esc to close
-
-
-
-
-
-
-
-
- setListDrawerOpen(true)}
- documentCard={documentCard}
- documentCardExecutionId={documentCardExecutionId}
- headerActions={
- noteId != null && (
- setDocumentOpen((open) => !open)}
- aria-pressed={showDocument}
- aria-label={showDocument ? 'Hide document' : 'Show document'}
- title={showDocument ? 'Hide document' : 'Show document'}
- className={cn(
- 'inline-flex shrink-0 items-center justify-center rounded-lg p-1.5 transition-colors',
- showDocument
- ? 'bg-primary-50 text-primary-700 hover:bg-primary-100'
- : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
- )}
- >
-
- )
- }
- />
-
- {/* One editor per note at a time: the pane mounts in the column above
- the tablet breakpoint and in the drawer below it, never both. */}
- {showDocument && !isBelowTablet && (
-
- )}
-
-
- {/* Drawers portal to the body, so they need to stack above this overlay
- (z-9500) while staying under BaseModal (9999). */}
-
- {conversationList}
-
-
- {showDocument && isBelowTablet && (
-
-
(null);
- const paneRef = useRef(null);
-
- // ---- transcript auto-scroll ----
- // Follows new content while the reader is at the bottom; never yanks the
- // view down once they have scrolled up, and offers a jump back instead.
- const { scrollRef, handleScroll, isAtBottom, jumpToLatest, follow } =
- useJumpToLatest({ resetKey: chatId });
- useEffect(() => {
- follow();
- }, [chat.chat, chat.pendingSend, follow]);
- // Text types out over many frames without the chat changing, so follow the
- // content's own growth too.
- const contentRef = useRef(null);
- useEffect(() => {
- const el = contentRef.current;
- if (!el || typeof ResizeObserver === 'undefined') return;
- const observer = new ResizeObserver(() => follow());
- observer.observe(el);
- return () => observer.disconnect();
- }, [follow, chatId]);
-
- // ---- title: inline rename from the header menu ----
- const [renaming, setRenaming] = useState(false);
- useEffect(() => {
- setRenaming(false);
- }, [chatId]);
-
- // A starter card is a complete first message: send it and start the
- // conversation rather than leaving it in the box to be sent by hand.
- const { user } = useUser();
- const startFromCard = useCallback(
- (message: string) => {
- state.clearNotice();
- void state.sendText(message);
- },
- [state]
- );
-
- const listBlocked = list.access === 'hidden';
- const chatUnavailable =
- chatId != null && (chat.access === 'not_found' || chat.access === 'unauthorized');
- const composerDisabled =
- listBlocked || chatUnavailable || (chatId != null && chat.access === 'loading');
- const composerBusy = chat.isBusy || creatingChat;
- // Stop must only be offered when there is a turn to cancel server-side.
- const canStop = chat.latestExecution != null && chat.isBusy && chat.pendingSend == null;
-
- // The listing usually knows the title before the chat itself has loaded,
- // so a refresh doesn't flash "Untitled" while the transcript is fetched.
- const listedTitle =
- chatId == null ? null : (list.chats.find((item) => item.id === chatId)?.title ?? null);
- const currentTitle =
- chatId == null ? null : state.titleFor(chatId, chat.chat?.title ?? listedTitle);
- const titleLoading =
- chatId != null && currentTitle == null && (chat.chat == null || list.access === 'loading');
- const title =
- chatId == null ? 'New conversation' : (currentTitle?.trim() ?? '') || 'Untitled conversation';
-
- const composer = (
-
-
- {onOpenConversations && (
-
-
- )}
- {renaming && chatId != null ? (
- setRenaming(false)}
- onCommit={(value) => {
- setRenaming(false);
- const next = value.trim();
- if (next && next !== (currentTitle ?? '')) state.rename(chatId, next);
- }}
- />
- ) : titleLoading ? (
-
- ) : (
- {title}
- )}
- {chatId != null && !renaming && (
- setRenaming(true)}
- onDelete={(options) => state.deleteChat(chatId, options)}
- loadNotes={() => state.notesForChat(chatId)}
- />
- )}
- {headerActions}
-
-
-
-
-
- {listBlocked ? (
-
- ) : chatId == null ? (
-
- ) : chat.access === 'loading' && chat.chat == null ? (
-
- ) : chat.access === 'not_found' ? (
-
- This conversation is no longer available.
-
- ) : chat.access === 'unauthorized' ? (
-
- ) : chat.access === 'error' && chat.chat == null ? (
-
-
Couldn’t load this conversation.
-
- Try again
-
-
- ) : chat.chat ? (
-
-
- execution.id === documentCardExecutionId ? (
- {documentCard}
- ) : null
- : undefined
- }
- />
- {documentCard && documentCardExecutionId == null && (
- {documentCard}
- )}
-
- ) : null}
-
-
-
-
-
-
- {/* A conversation keeps the composer docked at the bottom; the
- new-conversation screen seats it in the middle with the starters. */}
- {chatId != null && (
-
- )}
-
-
The assistant isn’t available to you yet.
-
- {detail ?? 'Your account doesn’t have access to this feature.'}
-
-
-
-
-
{composer}
-
- {/* Picking a card starts the conversation with its message. */}
-
- {AI_MODE_STARTER_PROMPTS.map((prompt) => (
- onSelectStarter(prompt.message)}
- disabled={disabled}
- className={cn(
- 'group flex h-full min-h-[120px] flex-col items-center justify-center gap-2.5 rounded-xl border border-gray-200 bg-white px-3 py-4 text-center transition-colors',
- 'hover:border-primary-200 hover:bg-primary-50',
- 'focus:outline-none focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-500',
- 'disabled:cursor-not-allowed disabled:opacity-60'
- )}
- >
-
-
-
- {prompt.title}
-
- {prompt.description}
-
- ))}
-
-
;
- readonly onDelete: (chatId: number, options: { deleteNotes: boolean }) => Promise;
- readonly loadNotes: (chatId: number) => Promise;
- readonly onRetry: () => void;
-}
-
-/**
- * The left pane: the user's assistant conversations, newest activity first
- * as the server orders them. Rows rename through a menu; nothing deletes,
- * because the backend has no endpoint for it.
- */
-export function ConversationList({
- chats,
- access,
- accessDetail,
- activeChatId,
- titleFor,
- onSelect,
- onNew,
- onRename,
- onDelete,
- loadNotes,
- onRetry,
-}: ConversationListProps) {
- const [renamingId, setRenamingId] = useState(null);
-
- return (
-
-
-
-
-
-
-
- {access === 'loading' &&
}
-
- {access === 'hidden' && (
-
- {accessDetail ?? 'You don’t have access to the assistant.'}
-
- )}
-
- {access === 'error' && (
-
-
- {accessDetail ?? 'Couldn’t load your conversations.'}
-
-
- Try again
-
-
- )}
-
- {access === 'ok' && chats.length === 0 && (
-
No conversations yet.
- )}
-
- {chats.map((item) => {
- const isActive = item.id === activeChatId;
- const title = titleFor(item.id, item.title);
- return (
-
onSelect(item.id)}
- onStartRename={() => setRenamingId(item.id)}
- onCancelRename={() => setRenamingId(null)}
- onCommitRename={async (value) => {
- setRenamingId(null);
- const next = value.trim();
- if (!next || next === (title ?? '')) return;
- await onRename(item.id, next);
- }}
- onDelete={(options) => onDelete(item.id, options)}
- loadNotes={() => loadNotes(item.id)}
- />
- );
- })}
-
-
;
-}
-
-function ConversationRow({
- item,
- title,
- isActive,
- renaming,
- onSelect,
- onStartRename,
- onCancelRename,
- onCommitRename,
- onDelete,
- loadNotes,
-}: ConversationRowProps) {
- return (
-
- {renaming ? (
-
-
- ) : (
-
-
- {title}
- {item.has_active_turn && (
-
- {formatTimeAgo(item.updated_date)}
-
- )}
-
- {!renaming && (
-
-
- )}
-
;
- readonly className?: string;
-}
-
-/**
- * The ellipsis menu for one conversation — rename inline, or delete behind a
- * confirmation. Shared by the sidebar rows and the chat header so the two
- * places offer exactly the same actions.
- */
-export function ConversationMenu({
- title,
- onRename,
- onDelete,
- loadNotes,
- className,
-}: ConversationMenuProps) {
- const [confirming, setConfirming] = useState(false);
- // The notes are looked up when the dialog opens, so a row whose detail was
- // never loaded still gets the offer — and only the offer when there is
- // something to delete. Off by default: the note is the user's work.
- const [notes, setNotes] = useState(null);
- const [deleteNotes, setDeleteNotes] = useState(false);
- useEffect(() => {
- if (!confirming) return;
- setNotes(null);
- setDeleteNotes(false);
- let cancelled = false;
- (loadNotes ? loadNotes() : Promise.resolve([]))
- .then((loaded) => {
- if (!cancelled) setNotes(loaded);
- })
- .catch(() => {
- if (!cancelled) setNotes([]);
- });
- return () => {
- cancelled = true;
- };
- }, [confirming, loadNotes]);
- const noteTitle = notes?.[0]?.title?.trim();
-
- return (
- <>
-
-
-
- setConfirming(true)}
- className="gap-2 text-red-600 focus:bg-red-50 focus:text-red-700"
- >
-
-
-
- {/* BaseModal, not Modal: it stacks at 9999, above the AI Mode overlay. */}
- setConfirming(false)}
- title="Delete conversation?"
- size="sm"
- footer={
-
- setConfirming(false)}>
- Cancel
-
- {
- setConfirming(false);
- onDelete({ deleteNotes: deleteNotes && (notes?.length ?? 0) > 0 });
- }}
- >
- Delete
-
-
- }
- >
- “{title}” and its messages will be deleted.
- {notes && notes.length > 0 ? (
-
-
- Also delete the document it created
- {noteTitle ? , “{noteTitle}” : null}. Otherwise
- it stays in your notebook.
-
-
- ) : notes == null && loadNotes ? (
- Checking for a document…
- ) : null}
-
-
- );
-}
diff --git a/components/AIMode/DocumentCard.tsx b/components/AIMode/DocumentCard.tsx
deleted file mode 100644
index 1542867c6..000000000
--- a/components/AIMode/DocumentCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { FileText, Lock } from 'lucide-react';
-import { Loader } from '@/components/ui/Loader';
-import { cn } from '@/utils/styles';
-import type { DocumentStatus } from './useAIModeDocument';
-
-interface DocumentCardProps {
- readonly title: string;
- readonly status: DocumentStatus;
- /** The document is showing beside the chat (desktop) or in the drawer (mobile). */
- readonly open: boolean;
- readonly onOpen: () => void;
-}
-
-/**
- * The document's card in the transcript, seated under the turn that created
- * it. The one place the reader is told the document exists and can reach it
- * from — the pane beside the chat on desktop, a drawer on mobile.
- */
-export function DocumentCard({ title, status, open, onOpen }: DocumentCardProps) {
- const writing = status === 'drafting' || status === 'working';
- const subtitle = writing
- ? status === 'drafting'
- ? 'Writing…'
- : 'Working…'
- : status === 'empty'
- ? 'Nothing written yet'
- : 'Ready to edit';
-
- return (
-
-
- {writing ? (
-
-
- {title}
-
- Document
- ·
- Only you
- ·
- {subtitle}
-
-
-
- {open ? 'Showing' : 'Open'}
-
-
- );
-}
diff --git a/components/AIMode/DocumentPane.tsx b/components/AIMode/DocumentPane.tsx
deleted file mode 100644
index f99dd8a7b..000000000
--- a/components/AIMode/DocumentPane.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Editor } from '@tiptap/react';
-import { ExternalLink } from 'lucide-react';
-import { BlockEditorClientWrapper } from '@/components/Editor/components/BlockEditor/components/BlockEditorClientWrapper';
-import { NoteReviewBanner } from '@/components/Notebook/NoteReview/NoteReviewBanner';
-import { NotebookTabs, type NotebookTab } from '@/components/Notebook/NotebookTabs';
-import { PublishingForm } from '@/components/Notebook/PublishingForm';
-import {
- PublishingHostProvider,
- type PublishingDefaultArticleType,
- type PublishingHost,
-} from '@/contexts/PublishingHostContext';
-import { useNoteDetailsSaver } from '@/hooks/useNoteDetailsSaver';
-import { NoteReviewControls } from '@/components/Notebook/NoteReview/NoteReviewControls';
-import { noteDiffPersistableDoc } from '@/components/Notebook/NoteReview/noteDiffOverlay';
-import { useNoteAgentReview } from '@/components/Notebook/NoteReview/useNoteAgentReview';
-import { Button } from '@/components/ui/Button';
-import { Loader } from '@/components/ui/Loader';
-import { DraftBlockPreview } from './DraftBlockPreview';
-import { DocumentPaneSkeleton } from '@/components/skeletons/AIModeSkeleton';
-import { useUpdateNote } from '@/hooks/useNote';
-import type { AgentChat } from '@/types/agentChat';
-import { cn } from '@/utils/styles';
-import type { AIModeDocument } from './useAIModeDocument';
-
-/** The page column: shared by the skeleton and the document so they line up. */
-const DOCUMENT_PAGE_CLASS =
- 'ai-mode-document mx-auto w-full max-w-[860px] px-5 py-6 tablet:!px-8 tablet:!py-8';
-
-interface DocumentPaneProps {
- readonly document: AIModeDocument;
- /** The open chat, whose activity is one of the review's version signals. */
- readonly chat: AgentChat | null;
- /** Document, or the publishing details form. */
- readonly tab: NotebookTab;
- readonly onTabChange: (tab: NotebookTab) => void;
- /** Work type to preselect in the details form for a note without one. */
- readonly defaultArticleType?: PublishingDefaultArticleType | null;
- /** Never editable — the mobile drawer. */
- readonly readOnly?: boolean;
- readonly className?: string;
-}
-
-/**
- * The right pane: the note the assistant is composing, in the real editor.
- * Each version the assistant writes is spliced into the editor as an in-note
- * review (highlighted insertions, struck removals, accept/reject), exactly as
- * in the notebook. The user can edit once the turn has settled; edits
- * autosave. While a section is being written the streaming prose is appended
- * below the editor, and a turn with no draft shows an in-progress row so the
- * page never sits frozen.
- */
-export function DocumentPane({
- document,
- chat,
- tab,
- onTabChange,
- defaultArticleType = null,
- readOnly = false,
- className,
-}: DocumentPaneProps) {
- const { note, content, loading, error, status, draftText, draftBlocks, phaseLabel } = document;
- const noteId = note?.id ?? null;
- const writing = status === 'drafting' || status === 'working';
-
- // ---- the editor, its autosave, and the assistant-version review ----
- const [editor, setEditor] = useState(null);
- // The assistant names the note when it creates it; unlike the notebook,
- // the document's first heading is a section, not the title, so saves here
- // never derive a title from it.
- const [, updateNote, saveNoteNow] = useUpdateNote(noteId ?? undefined, {
- // Mid-review the editor holds a merged document; saves must persist it
- // without the struck (pending-removal) ranges.
- docToPersist: (instance) => noteDiffPersistableDoc(instance) ?? instance.state.doc,
- });
- // Creating the editor dispatches document-changing transactions of its own
- // (UniqueID stamps ids onto the assistant's blocks, which carry none) and
- // those arrive here before the instance has even been handed over via
- // setEditor. Saving them would write an editor-authored version the user
- // never made — on a brand-new note that also makes the assistant's first
- // edit_note stale. Only updates to the editor we hold are the user's.
- const editorRef = useRef(null);
- useEffect(() => {
- editorRef.current = editor;
- }, [editor]);
- // The editor came up empty for a note that has text: the content didn't
- // survive the load (a parse the schema rejected, say — tiptap falls back
- // to an empty document with only a console warning). Treat it as a failed
- // load rather than an empty document, or the first autosave would write
- // that emptiness over the real note.
- const loadedText = content?.plainText?.trim() ?? '';
- const editorLostContent =
- editor != null && loadedText.length > 0 && editor.state.doc.textContent.trim().length === 0;
-
- const handleEditorUpdate = useCallback(
- (instance: Editor) => {
- if (editorRef.current !== instance) return;
- // An empty document is never a save this surface should make: not on a
- // fresh note (the assistant's first edit_note would go stale), and not
- // on a written one (it would erase it). Clearing everything on purpose
- // is the notebook's job.
- if (instance.state.doc.textContent.trim().length === 0) return;
- updateNote(instance);
- },
- [updateNote]
- );
-
- // The details form is the notebook's own, hosted here: it reads the note,
- // the live editor and the note's single details writer through the host
- // seam rather than the notebook context.
- const { saveDetailsSoon, saveDetailsNow } = useNoteDetailsSaver(noteId ?? undefined);
- const publishingHost = useMemo(
- () => ({
- note: content,
- editor,
- isLoading: loading,
- saveDetailsSoon,
- saveDetailsNow,
- defaultArticleType,
- }),
- [content, editor, loading, saveDetailsSoon, saveDetailsNow, defaultArticleType]
- );
-
- const persistEditorState = useCallback(async () => {
- if (!editor || editor.isDestroyed) return false;
- return saveNoteNow(editor);
- }, [editor, saveNoteNow]);
-
- const loadedNote = useMemo(
- () => (content && noteId != null ? { id: noteId, versionId: content.versionId } : null),
- [content, noteId]
- );
- const review = useNoteAgentReview({
- noteId,
- editor,
- loadedNote,
- chat,
- onPersistEditorState: persistEditorState,
- });
-
- // Editable only once the turn has settled: typing while the assistant is
- // mid-edit would make its next edit_note stale and the review jumpy.
- const locked = writing || editorLostContent;
-
- // The assistant is writing the first version: nothing to show in the
- // editor yet, so the whole pane becomes the progress screen.
- const startingDocument =
- status === 'working' && !document.hasWrittenVersion && review.review == null;
-
- return (
-
-
-
- {/* The document is the pane: no gutter, no card, just the page. The
- editor stays mounted behind the details tab — it holds the review
- and autosave state, and the form publishes from it. */}
-
-
-
- {error && content == null ? (
-
-
{error}
-
- Try again
-
-
- ) : loading || content == null ? (
-
-
- ) : startingDocument ? (
-
- ) : (
-
- {editorLostContent && (
-
- This document couldn’t be displayed here. Open it in the notebook to view it;
- nothing has been changed.
-
- )}
- {status === 'empty' && review.review == null &&
-
-
- {status === 'drafting' && draftText && (
-
- )}
-
-
- {tab === 'details' && (
-
- )}
-
- {review.review && tab === 'document' && (
-
-
- )}
-
-
-
Starting the document…
- {label &&
{label}
}
-
-
- Nothing has been written here yet. You can start typing, or ask the assistant.
-
-
-
-
- Drafting
-
- ·
-
- Preview updates live
-
-
-
- );
-}
-
-/** No draft is streaming, but a turn is running: say what it's doing. */
-function InProgressRow({ label }: { readonly label: string }) {
- return (
-
- {label}…
-
- );
-}
diff --git a/components/AIMode/WorkspacePage.tsx b/components/AIMode/WorkspacePage.tsx
new file mode 100644
index 000000000..1d56bd515
--- /dev/null
+++ b/components/AIMode/WorkspacePage.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+import { PageLayout } from '@/app/layouts/PageLayout';
+import { useFundingDocuments } from '@/contexts/FundingDocumentsContext';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useResizableWidth } from '@/hooks/useResizableWidth';
+import { isActiveExecutionStatus } from '@/types/agentChat';
+import type { FundingIntent } from '@/components/Funding/fundingDirection';
+import { isPublishedNote } from '@/types/note';
+import { cn } from '@/utils/styles';
+import { AIModeProvider, useAIMode } from './AIModeContext';
+import { ChatPane } from './chat/ChatPane';
+import { newDraftTitle } from './copy';
+import { DocumentPane } from './document/DocumentPane';
+import { useAIModeDocument, type AIModeDocument } from './document/useAIModeDocument';
+import { WorkspacePanes } from './shell/WorkspacePanes';
+import { WorkspaceTopBar } from './shell/WorkspaceTopBar';
+import { useAIModeChat } from './useAIModeChat';
+
+const CHAT_MIN_WIDTH = 360;
+const DOCUMENT_MIN_WIDTH = 420;
+/** Share of the viewport the document opens at before the user drags it. */
+const DOCUMENT_DEFAULT_SHARE = 0.55;
+
+/** An element's width as it resizes; the viewport's until it has mounted. */
+function useElementWidth(element: HTMLElement | null): number {
+ const [width, setWidth] = useState(() =>
+ typeof window === 'undefined' ? 1440 : window.innerWidth
+ );
+ useEffect(() => {
+ if (!element) return;
+ const update = () => setWidth(Math.round(element.getBoundingClientRect().width));
+ update();
+ if (typeof ResizeObserver === 'undefined') return;
+ const observer = new ResizeObserver(update);
+ observer.observe(element);
+ return () => observer.disconnect();
+ }, [element]);
+ return width;
+}
+
+/**
+ * What the top bar names: on the start screen what it will produce (an RFP
+ * or a proposal), and on a document its title as the document heads it, or,
+ * below the width at which a title stays readable, just whether it is out
+ * yet. '' is the bar's loading state: shown until the note has loaded, so
+ * nothing stands in for the real title first.
+ */
+function topBarTitle({
+ startingIntent,
+ doc,
+ isWide,
+}: {
+ readonly startingIntent: FundingIntent | null;
+ readonly doc: AIModeDocument;
+ readonly isWide: boolean;
+}): string {
+ if (startingIntent) return newDraftTitle(startingIntent);
+ const loadedNote = doc.details ?? doc.content;
+ if (doc.missing || (doc.error != null && loadedNote == null)) return 'Untitled';
+ if (loadedNote == null) return '';
+ if (!isWide) return isPublishedNote(loadedNote) ? 'Published' : 'Draft';
+ return doc.displayTitle ?? '';
+}
+
+/**
+ * The `/workspace` page: the app's shell, with the chat and, beside it on
+ * the right, the document it is about. The user's documents are in the
+ * app's left sidebar, as on every page. What it is open on lives in the URL.
+ */
+export function WorkspacePage() {
+ return (
+
+
+ );
+}
+
+function Workspace() {
+ const state = useAIModeChat();
+ const { target, note } = state;
+
+ // From Tailwind's `sidebar-compact` up the app's left column is there and
+ // the top bar has room for a document's title.
+ const isWide = useMediaQuery('(min-width: 1240px)') === true;
+ // Tailwind's `tablet` breakpoint; the side-by-side panes only exist from it up.
+ const phoneQuery = useMediaQuery('(max-width: 767px)');
+ const isBelowTablet = phoneQuery === true;
+
+ const latestExecution = state.chat.latestExecution;
+ const turnActive = latestExecution != null && isActiveExecutionStatus(latestExecution.status);
+ const doc = useAIModeDocument({
+ note,
+ chat: state.chat.chat,
+ latestExecution,
+ assistantWorking: turnActive || state.anyTurnActive,
+ messagePending: state.messagePending,
+ });
+
+ // The sidebar marks the open document's row while the assistant works on
+ // it, as the document's own dot does.
+ const { setWorkingNoteId } = useAIMode();
+ const workingNoteId =
+ note != null && (doc.status === 'drafting' || doc.status === 'working' || state.anyTurnActive)
+ ? note.id
+ : null;
+ useEffect(() => {
+ setWorkingNoteId(workingNoteId);
+ }, [workingNoteId, setWorkingNoteId]);
+ useEffect(() => () => setWorkingNoteId(null), [setWorkingNoteId]);
+
+ // ---- the document's width: it drags, the chat takes the rest ----
+ const [panesEl, setPanesEl] = useState(null);
+ const panesWidth = useElementWidth(panesEl);
+ const documentMaxWidth = Math.max(DOCUMENT_MIN_WIDTH, panesWidth - CHAT_MIN_WIDTH);
+ const documentWidth = useResizableWidth({
+ storageKey: 'ai-mode:document-width',
+ min: DOCUMENT_MIN_WIDTH,
+ max: documentMaxWidth,
+ defaultWidth: (width) => width * DOCUMENT_DEFAULT_SHARE,
+ anchor: 'right',
+ });
+
+ // On desktop the document shows beside its chat as soon as it is open; on
+ // a phone the chat header's toggle opens it in a drawer. Either way the
+ // user can hide it and bring it back from there; that choice holds for
+ // the document it was made on. Until the width is known, nothing opens.
+ const noteId = note?.id ?? null;
+ const [documentChoice, setDocumentChoice] = useState<{
+ readonly noteId: number;
+ readonly open: boolean;
+ } | null>(null);
+ const documentOpen =
+ documentChoice != null && documentChoice.noteId === noteId
+ ? documentChoice.open
+ : phoneQuery === false;
+ const setDocumentOpen = useCallback(
+ (open: boolean) => {
+ if (noteId != null) setDocumentChoice({ noteId, open });
+ },
+ [noteId]
+ );
+ const closeDocument = useCallback(() => setDocumentOpen(false), [setDocumentOpen]);
+ const showDocument = noteId != null && documentOpen && !doc.missing;
+
+ // The sidebar's row follows the open document's saved title (its heading
+ // once that has saved, or a name the assistant gave it) and latest edit.
+ const { patch } = useFundingDocuments();
+ const { title: docTitle, updatedDate: docUpdatedDate } = doc;
+ useEffect(() => {
+ if (noteId == null || !docTitle) return;
+ patch(
+ noteId,
+ docUpdatedDate ? { title: docTitle, updatedDate: docUpdatedDate } : { title: docTitle }
+ );
+ }, [noteId, docTitle, docUpdatedDate, patch]);
+
+ const headerTitle = topBarTitle({
+ startingIntent: target.kind === 'new' ? state.intent : null,
+ doc,
+ isWide,
+ });
+
+ const documentPane = (inDrawer: boolean) => (
+
+
+
+
+
setDocumentOpen(!showDocument)}
+ aria-pressed={showDocument}
+ aria-label={showDocument ? 'Hide document' : 'Show document'}
+ title={showDocument ? 'Hide document' : 'Show document'}
+ className={cn(
+ 'flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-lg transition-colors',
+ showDocument
+ ? 'bg-primary-50 text-primary-700 hover:bg-primary-100'
+ : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
+ )}
+ >
+ {/* The chevron points where the document goes: away to the
+ right while it shows, in from the right while hidden. */}
+ {showDocument ? (
+
+ );
+}
diff --git a/components/AIMode/chat/ChatMenu.tsx b/components/AIMode/chat/ChatMenu.tsx
new file mode 100644
index 000000000..3f464cfd7
--- /dev/null
+++ b/components/AIMode/chat/ChatMenu.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useState } from 'react';
+import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { BaseMenu, BaseMenuItem } from '@/components/ui/form/BaseMenu';
+import { BaseModal } from '@/components/ui/BaseModal';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/utils/styles';
+
+interface ChatMenuProps {
+ readonly title: string;
+ readonly onRename: () => void;
+ /** Called only after the user confirms. */
+ readonly onDelete: () => void;
+ readonly className?: string;
+}
+
+/**
+ * The open chat's ellipsis menu: rename inline, or delete behind a
+ * confirmation. Deleting a chat never touches its document.
+ */
+export function ChatMenu({ title, onRename, onDelete, className }: ChatMenuProps) {
+ const [confirming, setConfirming] = useState(false);
+
+ return (
+ <>
+
+
+
+ setConfirming(true)}
+ className="gap-2 text-red-600 focus:bg-red-50 focus:text-red-700"
+ >
+
+
+
+ setConfirming(false)}
+ title="Delete chat?"
+ size="sm"
+ footer={
+
+ setConfirming(false)}>
+ Cancel
+
+ {
+ setConfirming(false);
+ onDelete();
+ }}
+ >
+ Delete
+
+
+ }
+ >
+
+ “{title}” and its messages will be deleted. The document stays as it is.
+
+
+
+ );
+}
diff --git a/components/AIMode/chat/ChatPane.tsx b/components/AIMode/chat/ChatPane.tsx
new file mode 100644
index 000000000..0929fe488
--- /dev/null
+++ b/components/AIMode/chat/ChatPane.tsx
@@ -0,0 +1,393 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import Link from 'next/link';
+import { History, Sparkles } from 'lucide-react';
+import { ChatComposer } from '@/components/AgentChat/ChatComposer';
+import { ChatPicker } from '@/components/AgentChat/ChatPicker';
+import { ChatTranscript } from '@/components/AgentChat/ChatTranscript';
+import { JumpToLatestButton } from '@/components/AgentChat/JumpToLatestButton';
+import { ModelControls } from '@/components/AgentChat/ModelControls';
+import { RefusalActions } from '@/components/AgentChat/RefusalActions';
+import { useJumpToLatest } from '@/hooks/useJumpToLatest';
+import { Button } from '@/components/ui/Button';
+import { ChatTranscriptSkeleton } from '@/components/skeletons/AIModeSkeleton';
+import { canSelectAIModel } from '@/types/researchAI';
+import type { ChatExecution } from '@/types/agentChat';
+import { cn } from '@/utils/styles';
+import type { AIModeChatState } from '../useAIModeChat';
+import { AI_MODE_GREETING } from '../copy';
+import { StartContextChips } from '../start/StartContextChips';
+import {
+ START_COMPOSER_MIN_ROWS,
+ startComposerBoxClass,
+ startComposerPlaceholder,
+ startComposerSendClass,
+} from '../start/startComposer';
+import { StartPresets } from '../start/StartPresets';
+import { StartScreen } from '../start/StartScreen';
+import { ChatMenu } from './ChatMenu';
+import { ChatTitleField } from './ChatTitleField';
+
+interface ChatPaneProps {
+ readonly state: AIModeChatState;
+ /** Header controls at its right end: the document toggle. */
+ readonly headerActions?: ReactNode;
+ /** The open document no longer exists. */
+ readonly documentMissing: boolean;
+}
+
+/**
+ * The chat: on a document, its header (History, the chat's menu
+ * and the document toggle), the transcript and the composer; on the screen
+ * that starts a new draft, the composer in the middle of the page.
+ */
+export function ChatPane({ state, headerActions, documentMissing }: ChatPaneProps) {
+ const {
+ chatId,
+ list,
+ listReady,
+ chat,
+ modelSelection,
+ draft,
+ setDraft,
+ notice,
+ composerBusy,
+ canStop,
+ } = state;
+ const composerRef = useRef(null);
+ const paneRef = useRef(null);
+ const onStart = state.target.kind === 'new';
+ const resolving = state.resolvingChat;
+
+ // ---- transcript auto-scroll ----
+ // Follows new content while the reader is at the bottom; never yanks the
+ // view down once they have scrolled up, and offers a jump back instead.
+ // The start screen has no transcript to follow: on a phone it is taller
+ // than the viewport, and following would scroll the greeting away.
+ const { scrollRef, handleScroll, isAtBottom, jumpToLatest, follow } =
+ useJumpToLatest({ resetKey: chatId });
+ useEffect(() => {
+ if (!onStart) follow();
+ }, [chat.chat, chat.pendingSend, follow, onStart]);
+ // Text types out over many frames without the chat changing, so follow the
+ // content's own growth too.
+ const contentRef = useRef(null);
+ useEffect(() => {
+ const el = contentRef.current;
+ if (onStart || !el || typeof ResizeObserver === 'undefined') return;
+ const observer = new ResizeObserver(() => follow());
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [follow, chatId, onStart]);
+
+ // ---- title: inline rename from the header menu ----
+ const [renaming, setRenaming] = useState(false);
+ useEffect(() => {
+ setRenaming(false);
+ }, [chatId]);
+
+ // The start screen is there to be typed into: the caret is in the box the
+ // moment it opens, whichever door it opened from.
+ useEffect(() => {
+ if (onStart) composerRef.current?.focus();
+ }, [onStart]);
+
+ /**
+ * Loads the composer rather than sending: a suggestion is a starting point
+ * the user finishes, a refused message one they reword. Focus follows the
+ * text so the caret is already waiting at the end of it.
+ */
+ const { clearNotice } = state;
+ const applyPreset = useCallback(
+ (message: string) => {
+ clearNotice();
+ setDraft(message);
+ const textarea = composerRef.current;
+ if (!textarea) return;
+ textarea.focus();
+ textarea.setSelectionRange(message.length, message.length);
+ },
+ [clearNotice, setDraft]
+ );
+
+ // A refusal is about what was asked, so the same message would be refused
+ // again: the newest turn's offers a way to reword it, or a new chat.
+ const { openChat } = state;
+ const renderFailureActions = (execution: ChatExecution) => {
+ if (execution.error?.code !== 'content_refused') return null;
+ if (execution.id !== chat.latestExecution?.id) return null;
+ const refused = chat.chat?.messages.find(
+ (message) => message.id === execution.trigger_message_id
+ )?.content;
+ return (
+ applyPreset(refused) : undefined}
+ onNewChat={() => openChat('new')}
+ />
+ );
+ };
+
+ const aiBlocked = state.researchAI.budget?.tier === 'blocked';
+ const canSelectModel = canSelectAIModel(state.researchAI.budget?.tier);
+ const listBlocked = listReady && list.access === 'hidden';
+ const listFailed = listReady && list.access === 'error';
+ const chatUnavailable =
+ chatId != null && (chat.access === 'not_found' || chat.access === 'unauthorized');
+ const composerDisabled =
+ aiBlocked ||
+ documentMissing ||
+ listBlocked ||
+ resolving ||
+ chatUnavailable ||
+ (chatId != null && chat.access === 'loading');
+
+ const title = chatId == null ? 'New chat' : state.chatTitle?.trim() || 'Untitled chat';
+
+ const modelControls = (
+ void state.send()}
+ onStop={state.stop}
+ busy={composerBusy}
+ canStop={canStop}
+ disabled={composerDisabled}
+ sendDisabled={state.sendBlocked}
+ notice={notice}
+ attachments={state.attachments}
+ dropTargetRef={paneRef}
+ className={cn('border-t-0', onStart ? 'bg-white pt-0' : 'bg-gray-50')}
+ boxClassName={onStart ? startComposerBoxClass(state.intent) : undefined}
+ minRows={onStart ? START_COMPOSER_MIN_ROWS : 1}
+ sendClassName={onStart ? startComposerSendClass(state.intent) : undefined}
+ placeholder={onStart ? startComposerPlaceholder(state.intent) : undefined}
+ toolbar={
+ // A researcher's context rides with the first message, like attachments.
+ onStart && state.intent === 'need_funding' ? (
+ {modelControls}
+ ) : undefined
+ }
+ />
+ );
+
+ const body = (): ReactNode => {
+ if (aiBlocked) return void state.send(message)}
+ disabled={composerDisabled || composerBusy || state.sendBlocked}
+ />
+ ) : undefined
+ }
+ />
+ );
+ }
+ if (documentMissing) {
+ return (
+
+
This document is no longer available.
+
+ Go to My Funding
+
+
+
+
+ The assistant can help draft this document, find research to support it, and answer your
+ questions along the way.
+
+
+
+ );
+ };
+
+ return (
+
+ {/* No border or fill: the controls float over the pane, at its right.
+ No title: the top bar already names the document, and History
+ names the chats. The start screen has no chat yet, so no header. */}
+ {!onStart && !documentMissing && (
+
+ {renaming && chatId != null ? (
+ setRenaming(false)}
+ onCommit={(value) => {
+ setRenaming(false);
+ const next = value.trim();
+ if (next && next !== (state.chatTitle ?? '')) void state.rename(next);
+ }}
+ />
+ ) : (
+
+ )}
+
+ {/* This chat's menu, then History of the document's chats. */}
+ {chatId != null && !renaming && (
+ setRenaming(true)}
+ onDelete={() => void state.deleteChat(chatId)}
+ />
+ )}
+ {!listBlocked && (
+ state.openChat(id)}
+ onOpen={() => void list.refresh()}
+ onNewChat={() => state.openChat('new')}
+ failed={listFailed}
+ className="flex-none"
+ trigger={
+
+
+ }
+ />
+ )}
+ {headerActions}
+
+ )}
+
+
+
+ {/* A document's chat keeps the composer docked at the bottom; the start
+ screen seats it in the middle. */}
+ {!onStart && !documentMissing && (
+
+ )}
+
+
{message}
+
+ Try again
+
+
+
The assistant isn’t available to you yet.
+
+ {detail ?? 'Your account doesn’t have access to this feature.'}
+
+
(null);
useEffect(() => {
@@ -47,7 +48,7 @@ export function ConversationTitleField({
onKeyDown={handleKeyDown}
onBlur={() => onCommit(value)}
maxLength={MAX_CHAT_TITLE_LENGTH}
- aria-label="Conversation title"
+ aria-label="Chat title"
className={cn(
'w-full min-w-0 rounded-md border border-primary-300 bg-white px-2 py-1 text-sm text-gray-900 outline-none ring-2 ring-primary-100',
className
diff --git a/components/AIMode/copy.ts b/components/AIMode/copy.ts
index 93caea86f..c16e45448 100644
--- a/components/AIMode/copy.ts
+++ b/components/AIMode/copy.ts
@@ -1,60 +1,66 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import {
- faBullhorn,
- faFileSignature,
- faMagnifyingGlassDollar,
-} from '@fortawesome/pro-light-svg-icons';
+import type { FundingIntent } from '@/components/Funding/fundingDirection';
/**
- * User-facing copy for AI Mode, in one place so the product name and the
- * empty-state wording can change without touching components.
+ * User-facing copy for the workspace, in one place so the new-draft wording
+ * can change without touching components.
*/
-export const AI_MODE_NAME = 'ResearchHub AI';
-/** Greeting on the new-conversation screen; the name is filled in at render. */
-export const aiModeGreeting = (firstName: string | null | undefined): string =>
- firstName?.trim() ? `Welcome, ${firstName.trim()}` : 'Welcome';
+/**
+ * What the new-draft screen is called, in the app's top bar: named for what
+ * it will produce, not for the chat.
+ */
+export const newDraftTitle = (intent: FundingIntent): string =>
+ intent === 'fund' ? 'New RFP' : 'New proposal';
+
+/** A new draft's title until the assistant (or the user) names it. */
+export const untitledDraftTitle = (intent: FundingIntent): string =>
+ intent === 'fund' ? 'Untitled RFP' : 'Untitled proposal';
-export interface StarterPrompt {
- readonly id: string;
- readonly title: string;
- readonly description: string;
- /** Same icon family as the sidebar's Publish menu. */
- readonly icon: IconDefinition;
- /** Sent as the conversation's first message when the card is picked. */
- readonly message: string;
-}
+/** The heading of the new-draft screen. */
+export const AI_MODE_GREETING = 'Let’s get started';
+
+/** The line under the greeting and what the composer asks for, per side of the money. */
+export const INTENT_COPY: Record = {
+ fund: {
+ tagline: 'The fastest way to fund science.',
+ placeholder: 'Describe the research you want to fund…',
+ },
+ need_funding: {
+ tagline: 'Turn your proposal into funded science.',
+ placeholder: 'Describe the research you need funding for…',
+ },
+};
/**
- * Starter cards for the new-conversation screen. Picking one starts the
- * conversation with its message; the backend does not supply suggestions.
- * Titles and subtext mirror the sidebar's Publish menu.
+ * Examples under a new RFP's composer, to show a funder what the assistant
+ * can do. The label is what the pill reads; clicking it sends the message as
+ * the user's first, so the chat shows exactly what was asked. No amounts: the
+ * assistant asks about the budget itself.
*/
-export const AI_MODE_STARTER_PROMPTS: readonly StarterPrompt[] = [
+export const RFP_START_PRESETS: readonly { readonly label: string; readonly message: string }[] = [
+ {
+ label: 'Fund a cure for cancer',
+ message:
+ 'I want to fund research toward a cure for cancer. Help me write an RFP that will reach the labs doing the most promising work.',
+ },
+ {
+ label: 'Fund novel longevity research',
+ message:
+ 'I want to fund novel research on the biology of aging that could lead to longer, healthier lives. Help me write an RFP for it.',
+ },
{
- id: 'draft-rfp',
- title: 'Draft a Request for Proposal',
- description: 'Fund specific research you care about',
- icon: faBullhorn,
+ label: 'Back new Alzheimer’s treatments',
message:
- 'Help me draft a request for proposals. Ask me for anything you still need to know about ' +
- 'the work I want to fund, then create a note and write the RFP into it.',
+ 'I want to back research into new ways to prevent or treat Alzheimer’s disease. Help me write an RFP for it.',
},
{
- id: 'draft-proposal',
- title: 'Draft a Research Proposal',
- description: 'Raise money for your research',
- icon: faFileSignature,
+ label: 'Support rare disease research',
message:
- 'Help me draft a research proposal. Ask me for anything you still need to know about the ' +
- 'work, then create a note and write the proposal into it, starting with three hypotheses.',
+ 'I want to support research on a rare disease that few others fund. Help me write an RFP that will reach the right labs.',
},
{
- id: 'funding',
- title: 'Find me funding',
- description: 'Open RFPs that fit your work',
- icon: faMagnifyingGlassDollar,
+ label: 'Advance mental health care',
message:
- 'Find open RFPs I could apply to based on my expertise, and tell me why each one is a match.',
+ 'I want to fund research that could lead to better treatments for depression and anxiety. Help me write an RFP for it.',
},
];
diff --git a/components/AIMode/document/DocumentPane.tsx b/components/AIMode/document/DocumentPane.tsx
new file mode 100644
index 000000000..256c4121a
--- /dev/null
+++ b/components/AIMode/document/DocumentPane.tsx
@@ -0,0 +1,354 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+import { BlockEditorClientWrapper } from '@/components/Editor/components/BlockEditor/components/BlockEditorClientWrapper';
+import { AssistantActivityDot } from '@/components/AgentChat/AssistantActivityDot';
+import { NoteReviewBanner } from '@/components/Notebook/NoteReview/NoteReviewBanner';
+import { PublishingFormProvider } from '@/components/Notebook/PublishingForm';
+import { PublishingHostProvider, type PublishingHost } from '@/contexts/PublishingHostContext';
+import { useNoteDetailsSaver } from '@/hooks/useNoteDetailsSaver';
+import { NoteReviewControls } from '@/components/Notebook/NoteReview/NoteReviewControls';
+import { noteDiffPersistableDoc } from '@/components/Notebook/NoteReview/noteDiffOverlay';
+import { useNoteAgentReview } from '@/components/Notebook/NoteReview/useNoteAgentReview';
+import { Button } from '@/components/ui/Button';
+import { Loader } from '@/components/ui/Loader';
+import { DraftBlockPreview } from './DraftBlockPreview';
+import { DocumentPaneSkeleton } from '@/components/skeletons/AIModeSkeleton';
+import { useUpdateNote } from '@/hooks/useNote';
+import type { AgentChat } from '@/types/agentChat';
+import { cn } from '@/utils/styles';
+import { Masthead } from './masthead/Masthead';
+import { useMastheadSlots } from './masthead/useMastheadSlots';
+import { PublishDialog } from './PublishDialog';
+import { PublishPill } from './PublishPill';
+import type { AIModeDocument } from './useAIModeDocument';
+import { useDocumentTitle } from './useDocumentTitle';
+
+/** The page column: shared by the skeleton and the document so they line up. */
+const DOCUMENT_PAGE_CLASS =
+ 'ai-mode-document mx-auto w-full max-w-[860px] px-5 py-6 tablet:!px-8 tablet:!py-8';
+
+interface DocumentPaneProps {
+ readonly document: AIModeDocument;
+ /** The open chat, whose activity is one of the review's version signals. */
+ readonly chat: AgentChat | null;
+ /** The assistant has a turn running on this document in one of its other chats. */
+ readonly assistantWorking?: boolean;
+ readonly className?: string;
+}
+
+/**
+ * The document pane: the note the assistant is composing, in the real editor,
+ * under a masthead that holds what it needs before it can be published, with
+ * a Publish button floating over it. The same in the column beside the chat
+ * and in the phone's drawer.
+ * Each version the assistant writes is spliced into the editor as an in-note
+ * review (highlighted insertions, struck removals, accept/reject), exactly as
+ * in the notebook. The user can edit once the turn has settled; edits
+ * autosave. While a section is being written the streaming prose is appended
+ * below the editor, and a turn with no draft shows an in-progress row so the
+ * page never sits frozen.
+ */
+export function DocumentPane({
+ document,
+ chat,
+ assistantWorking = false,
+ className,
+}: DocumentPaneProps) {
+ const { note, content, loading, error, status, draftText, draftBlocks, phaseLabel } = document;
+ const noteId = note?.id ?? null;
+ const writing = status === 'drafting' || status === 'working';
+
+ // ---- the editor, its autosave, and the assistant-version review ----
+ // The editor is held with the note it was made for. Switching documents
+ // leaves the previous one in state until the next editor is up; read as
+ // this note's, it would report the old document's heading as the new
+ // one's title and save into the wrong note. Until then there is none.
+ const [heldEditor, setHeldEditor] = useState<{
+ readonly editor: Editor | null;
+ readonly noteId: number | null;
+ }>({ editor: null, noteId: null });
+ const setEditor = useCallback(
+ (instance: Editor | null) => setHeldEditor({ editor: instance, noteId }),
+ [noteId]
+ );
+ const editor = heldEditor.noteId === noteId ? heldEditor.editor : null;
+ // The details form is the notebook's own, hosted here: it reads the note,
+ // the live editor and the note's single details writer through the host
+ // seam rather than the notebook context.
+ const { saveDetailsSoon, saveDetailsNow } = useNoteDetailsSaver(noteId ?? undefined);
+ // A save whose heading changed brings the note's saved title along. The
+ // title hook that does it needs this save in turn, so it is reached
+ // through a ref, set where the hook is called below.
+ const syncAfterSaveRef = useRef(() => {});
+ const [, updateNote, saveNoteNow] = useUpdateNote(noteId ?? undefined, {
+ // Mid-review the editor holds a merged document; saves must persist it
+ // without the struck (pending-removal) ranges.
+ docToPersist: (instance) => noteDiffPersistableDoc(instance) ?? instance.state.doc,
+ saveTitle: () => syncAfterSaveRef.current(),
+ });
+ // Creating the editor dispatches document-changing transactions of its own
+ // (UniqueID stamps ids onto the assistant's blocks, which carry none) and
+ // those arrive here before the instance has even been handed over via
+ // setEditor. Saving them would write an editor-authored version the user
+ // never made — on a brand-new note that also makes the assistant's first
+ // edit_note stale. Only updates to the editor we hold are the user's.
+ const editorRef = useRef(null);
+ useEffect(() => {
+ editorRef.current = editor;
+ }, [editor]);
+ // The editor came up empty for a note that has text: the content didn't
+ // survive the load (a parse the schema rejected, say — tiptap falls back
+ // to an empty document with only a console warning). Treat it as a failed
+ // load rather than an empty document, or the first autosave would write
+ // that emptiness over the real note.
+ const loadedText = content?.plainText?.trim() ?? '';
+ const editorLostContent =
+ editor != null && loadedText.length > 0 && editor.state.doc.textContent.trim().length === 0;
+
+ const handleEditorUpdate = useCallback(
+ (instance: Editor) => {
+ if (editorRef.current !== instance) return;
+ // An empty document is never a save this surface should make: not on a
+ // fresh note (the assistant's first edit_note would go stale), and not
+ // on a written one (it would erase it). Clearing everything on purpose
+ // is the notebook's job.
+ if (instance.state.doc.textContent.trim().length === 0) return;
+ updateNote(instance);
+ },
+ [updateNote]
+ );
+
+ const publishingHost = useMemo(
+ () => ({
+ note: content,
+ editor,
+ isLoading: loading,
+ saveDetailsSoon,
+ saveDetailsNow,
+ }),
+ [content, editor, loading, saveDetailsSoon, saveDetailsNow]
+ );
+
+ const persistEditorState = useCallback(async () => {
+ if (!editor || editor.isDestroyed) return false;
+ return saveNoteNow(editor);
+ }, [editor, saveNoteNow]);
+
+ const loadedNote = useMemo(
+ () => (content && noteId != null ? { id: noteId, versionId: content.versionId } : null),
+ [content, noteId]
+ );
+ const review = useNoteAgentReview({
+ noteId,
+ editor,
+ loadedNote,
+ chat,
+ onPersistEditorState: persistEditorState,
+ });
+
+ // Editable only once the turn has settled: typing while the assistant is
+ // mid-edit would make its next edit_note stale and the review jumpy.
+ const locked = writing || editorLostContent;
+
+ // The assistant is about to write the first version: nothing to show in
+ // the editor yet, so the whole pane is the progress screen from the moment
+ // the message is sent, even before the note has loaded.
+ const startingDocument = document.starting && review.review == null;
+
+ const reviewing = review.review != null;
+ const mastheadSlots = useMastheadSlots(editor);
+
+ // The document's one title: its first heading (see useDocumentTitle).
+ const { title, syncSavedTitle, syncAfterSave, writeTitle } = useDocumentTitle({
+ editor,
+ savedTitle: document.title,
+ showSavedTitle: document.rename,
+ reportHeading: document.setHeadingTitle,
+ saveDetailsSoon,
+ saveNoteNow,
+ locked,
+ reviewing,
+ });
+ syncAfterSaveRef.current = syncAfterSave;
+ const acceptReview = review.accept;
+ const accept = useCallback(() => {
+ acceptReview();
+ syncSavedTitle();
+ }, [acceptReview, syncSavedTitle]);
+
+ // The bottom-centre spot is the assistant's first: while it writes, and
+ // while its changes wait to be accepted or rejected, there is no Publish.
+ const showPublish =
+ content != null && !loading && !writing && review.review == null && !editorLostContent;
+
+ return (
+
+ {/* The form lives as long as the note does, whichever view is showing:
+ its values are the source of the masthead and the publish controls,
+ and remounting it would rehydrate from the note as it was loaded,
+ dropping edits saved since. */}
+
+ {/* Above the content, so it does not scroll: the one sign of the
+ assistant's work on the document, flashing and named while it
+ drafts, still while its changes wait to be accepted or rejected. */}
+ {(writing || assistantWorking) && (
+
+
+ )}
+ {!writing && !assistantWorking && reviewing && (
+
+ )}
+ {/* The document is the pane: no gutter, no card, just the page. */}
+
+
+
+ {error && content == null ? (
+
+
{error}
+
+ Try again
+
+
+ ) : startingDocument ? (
+
+ ) : loading || content == null ? (
+
+
+ ) : (
+
+
+ This document couldn’t be displayed here. Open it in the notebook to view it;
+ nothing has been changed.
+
+ )}
+ {status === 'empty' && review.review == null &&
+
+
+ {status === 'drafting' && draftText && (
+
+ )}
+
+
+ {review.review && (
+
+
+ )}
+
+ {showPublish &&
}
+
+ );
+}
+
+/**
+ * The assistant is writing the first version. Fills the pane: there is no
+ * document to sit beside yet, so the progress state is the page.
+ */
+function StartingDocument({ label }: { readonly label: string | null }) {
+ return (
+
+
+
Starting the document…
+ {label &&
{label}
}
+
+
+ Nothing has been written here yet. You can start typing, or ask the assistant.
+
+
+ {label}…
+
+ );
+}
diff --git a/components/AIMode/DraftBlockPreview.tsx b/components/AIMode/document/DraftBlockPreview.tsx
similarity index 100%
rename from components/AIMode/DraftBlockPreview.tsx
rename to components/AIMode/document/DraftBlockPreview.tsx
diff --git a/components/AIMode/document/MissingDetails.tsx b/components/AIMode/document/MissingDetails.tsx
new file mode 100644
index 000000000..c2331d01b
--- /dev/null
+++ b/components/AIMode/document/MissingDetails.tsx
@@ -0,0 +1,371 @@
+'use client';
+
+import { useRef, useState, type ReactNode } from 'react';
+import { useWatch } from 'react-hook-form';
+import { MIN_PUBLISH_TITLE_LENGTH } from '@/components/modals/ConfirmPublishModal';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AmountEditor } from './masthead/AmountWidget';
+import { useCoverImagePicker } from './masthead/CoverImage';
+import { EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './masthead/MastheadLine';
+import { MAX_TITLE_LENGTH, normalizeTitle } from './masthead/title';
+import {
+ detailValue,
+ mastheadWidgetsFor,
+ peopleOf,
+ type MastheadWidgetConfig,
+} from './masthead/mastheadWidgets';
+import { PeopleEditor } from './masthead/PeopleWidget';
+import { TextEditor } from './masthead/TextWidget';
+import { useLeaveToCommit } from './masthead/useLeaveToCommit';
+import type { PublishReadiness } from './masthead/usePublishReadiness';
+
+const TITLE_ROW = 'title';
+
+interface MissingDetailsProps {
+ readonly readiness: PublishReadiness;
+ /** The note's title, and how the dialog changes it when it is too short to publish under. */
+ readonly title: string;
+ readonly onRename: (title: string) => void;
+}
+
+/**
+ * What the document still needs before it can be published, listed in the
+ * publish dialog with a way to give each one right there. The document
+ * itself never marks anything as missing; this is where the user finds out.
+ * The rows alone say it: a row stays once it is filled, showing what was
+ * entered, so the list does not shift under the pointer.
+ */
+export function MissingDetails({ readiness, title, onRename }: MissingDetailsProps) {
+ const { articleType } = usePublishingController();
+ const values = useWatch() as PublishingFormData;
+ const widgets = mastheadWidgetsFor(articleType);
+ const { missing, titleMissing, titleTooShort } = readiness;
+
+ // What was missing when the dialog opened: the rows it keeps.
+ const [rowIds] = useState(() => [
+ ...(titleTooShort ? [TITLE_ROW] : []),
+ ...missing.flatMap((field) => widgets.find((widget) => widget.field === field)?.id ?? []),
+ ]);
+ // One editor at a time.
+ const [editingId, setEditingId] = useState(null);
+
+ if (rowIds.length === 0) return null;
+
+ const configs = rowIds.flatMap((id) => widgets.find((widget) => widget.id === id) ?? []);
+
+ const rowState = (id: string) => ({
+ editing: editingId === id,
+ onEditingChange: (editing: boolean) =>
+ setEditingId((current) => {
+ if (editing) return id;
+ return current === id ? null : current;
+ }),
+ });
+
+ return (
+
+ {rowIds.includes(TITLE_ROW) && (
+
+ );
+}
+
+/** The small outlined button at a row's right end: "Add", "Edit", "Change". */
+function RowButton({
+ onClick,
+ children,
+}: {
+ readonly onClick: () => void;
+ readonly children: ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** A row's value once it has one: click it to change it. */
+const ROW_VALUE_CLASS =
+ 'min-w-0 max-w-[230px] truncate rounded-md px-1 text-right text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:outline-none';
+
+interface RowProps {
+ readonly label: string;
+ /** A second, quieter line under the label. */
+ readonly hint?: ReactNode;
+ /** What sits at the row's right end: a button, a small field, or the value. */
+ readonly control?: ReactNode;
+ /** An editor too wide for the right end, on a line of its own under the label. */
+ readonly below?: ReactNode;
+}
+
+function Row({ label, hint, control, below }: RowProps) {
+ return (
+
+
+
+ {label}
+ {hint && {hint} }
+
+ {control}
+
+ {below}
+
+ {value}
+
+ ) : (
+ Add
+ );
+
+ switch (config.kind) {
+ case 'cover':
+ return |
+ ) : (
+ control
+ )
+ }
+ />
+ );
+ case 'people':
+ return (
+ |
+ ) : undefined
+ }
+ />
+ );
+ case 'text':
+ case 'paragraph':
+ return (
+
+
+ ) : undefined
+ }
+ />
+ );
+ // A proposal publishes without an RFP, so it is never listed here.
+ case 'grant':
+ return null;
+ }
+}
+
+/** The cover image has no editor: Add opens the file picker, and the pick shows as a thumbnail. */
+function CoverRow({
+ config,
+ value,
+}: {
+ readonly config: MastheadWidgetConfig;
+ readonly value: PublishingFormData['coverImage'];
+}) {
+ const cover = useCoverImagePicker(value);
+ return (
+
+ {cover.imageUrl && (
+ // eslint-disable-next-line @next/next/no-img-element
+ {cover.imageUrl ? 'Change' : 'Add'}
+ |
}
+ control={
+ editing ? undefined : (
+ onEditingChange(true)}>{missing ? 'Add' : 'Edit'}
+ )
+ }
+ below={
+ editing ? (
+ onEditingChange(false)} />
+ ) : undefined
+ }
+ />
+ );
+}
+
+/** The title as it stands, and what it lacks: a short one is not missing, so it says how short. */
+function TitleHint({
+ title,
+ missing,
+ tooShort,
+}: {
+ readonly title: string;
+ readonly missing: boolean;
+ readonly tooShort: boolean;
+}) {
+ if (missing) return <>Your document needs a title;
+ return (
+ <>
+ {title}
+ {tooShort && (
+ Too short: {titleLength(title.length)}
+ )}
+
+ );
+}
+
+/** How a title's length stands against the minimum to publish under. */
+function titleLength(length: number): string {
+ return length < MIN_PUBLISH_TITLE_LENGTH
+ ? `${length} of at least ${MIN_PUBLISH_TITLE_LENGTH} characters`
+ : `${length} characters`;
+}
+
+function TitleEditor({
+ title,
+ onRename,
+ onClose,
+}: {
+ readonly title: string;
+ readonly onRename: (title: string) => void;
+ readonly onClose: () => void;
+}) {
+ const [draft, setDraft] = useState(title);
+ const ref = useRef(null);
+ const next = normalizeTitle(draft);
+ const short = next.length < MIN_PUBLISH_TITLE_LENGTH;
+ const commit = () => {
+ // A note is never left without a title.
+ if (next && next !== title) onRename(next);
+ onClose();
+ };
+ useLeaveToCommit(ref, commit);
+
+ return (
+
+
+
+
+ {/* Enter saves too, but a phone's keyboard may not offer it. */}
+
+ Save
+
+
+ {/* Counts as the user types, so they know when it is long enough
+ without having to save to find out. */}
+
+ {next ? titleLength(next.length) : `At least ${MIN_PUBLISH_TITLE_LENGTH} characters`}
+
+
= {
+ public: Globe,
+ private: Lock,
+ OPTIONAL: User,
+ PUBLIC: Globe,
+ PRIVATE: Lock,
+};
+
+const FUNDRAISE_DAYS = ['30', '60', '90'] as const;
+
+interface PublishDialogProps {
+ /** The document's first heading: what the work is published under. Empty when it has none. */
+ readonly title: string;
+ /** Writes a title into the heading, for when there is none or it is too short to publish under. */
+ readonly onRename: (title: string) => void;
+}
+
+/**
+ * The workspace's one step between Publish and a published work, and the only
+ * place that says what is missing. It opens on every Publish click: whatever
+ * the document still needs is listed first, each with a way to add it here;
+ * then what the masthead leaves out because it has a sensible default (who
+ * can see the work, how long a fundraise runs, a nonprofit); then the posting
+ * guidelines to agree to. Its Publish waits until nothing is missing. An
+ * update has only the list and the guidelines.
+ */
+export function PublishDialog({ title, onRename }: PublishDialogProps) {
+ const { articleType, workId, isPublishing, dismissConfirmation, confirmPublish } =
+ usePublishingController();
+ const { watch } = useFormContext();
+ const selectedNonprofit = watch('selectedNonprofit');
+ const readiness = usePublishReadiness(title);
+ const [hasAgreed, setHasAgreed] = useState(false);
+ const [showGuidelines, setShowGuidelines] = useState(false);
+ // The nonprofit is chosen in here, so its confirmation comes after, in the dialog's place.
+ const [confirmingNonprofit, setConfirmingNonprofit] = useState(false);
+
+ const isRfp = articleType === 'grant';
+ const isUpdate = Boolean(workId);
+ const isNewProposal = articleType === 'preregistration' && !isUpdate;
+ const privateNeedsRfp = useShowPrivateWarning() && isNewProposal;
+
+ const action = isUpdate ? 'Update' : 'Publish';
+ const canPublish = readiness.ready && hasAgreed && !isPublishing && !privateNeedsRfp;
+
+ const publish = () => {
+ if (!canPublish) return;
+ if (isNewProposal && selectedNonprofit) setConfirmingNonprofit(true);
+ else void confirmPublish(title);
+ };
+
+ return (
+ <>
+
+ {/* Matches BaseModal. */}
+ {} : dismissConfirmation}
+ >
+
+
+
+
+
+
+
+ {/* No overflow clipping: the people picker drops its results past the panel. */}
+
+
+ {action} {isRfp ? 'RFP' : 'proposal'}
+
+
+
+ {showGuidelines && (
+
+ )}
+
+
setHasAgreed(checked)}
+ />
+
+
+ I have adhered to the ResearchHub{' '}
+
+ setShowGuidelines((shown) => !shown)}
+ aria-expanded={showGuidelines}
+ className="underline underline-offset-2 transition-colors hover:text-gray-900"
+ >
+ posting guidelines
+
+
+
+
+
+ Cancel
+
+
+ {isPublishing ? 'Publishing...' : action}
+
+
+
+
+
+
+
+
+ {confirmingNonprofit && selectedNonprofit && (
+ setConfirmingNonprofit(false)}
+ onConfirm={() => {
+ setConfirmingNonprofit(false);
+ void confirmPublish(title);
+ }}
+ nonprofitName={selectedNonprofit.name}
+ ein={selectedNonprofit.ein}
+ />
+ )}
+
+ );
+}
+
+/**
+ * A setting with a default: its name, a line on what it decides, and its
+ * choices, each saying what it means, as the notebook's Details tab has them.
+ */
+function SettingSection({
+ label,
+ help,
+ action,
+ children,
+}: {
+ readonly label: ReactNode;
+ readonly help?: ReactNode;
+ /** A control at the right of the name, for a setting that is only offered. */
+ readonly action?: ReactNode;
+ readonly children?: ReactNode;
+}) {
+ return (
+
+
+
+
{label}
+ {help &&
{help}
}
+
+ {action}
+
+ {children}
+
{children}
;
+}
+
+interface Choice {
+ readonly value: string;
+ readonly label: string;
+ /** Leads the label: what the choice is at a glance (a globe for public, a lock for private). */
+ readonly icon?: LucideIcon;
+ /**
+ * What choosing it means, shown under the choices while it is the chosen
+ * one. Choices that speak for themselves ("30 days") have none.
+ */
+ readonly description?: ReactNode;
+}
+
+/**
+ * A setting's few choices side by side in one box, and under them, in the
+ * same box, what the chosen one means: the explanation reads as the
+ * switch's own, and the setting takes two lines rather than a card per choice.
+ * Without descriptions it is just the switch.
+ */
+function ChoiceBox({
+ label,
+ value,
+ choices,
+ onChange,
+}: {
+ /** Names the group for assistive technology; the section shows it visibly. */
+ readonly label: string;
+ readonly value: string;
+ readonly choices: readonly Choice[];
+ readonly onChange: (value: string) => void;
+}) {
+ const selected = choices.find((choice) => choice.value === value);
+ return (
+
+
+ {choices.map((choice) => {
+ const checked = choice.value === value;
+ const Icon = choice.icon;
+ return (
+ onChange(choice.value)}
+ className={cn(
+ 'flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40',
+ checked ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'
+ )}
+ >
+ {Icon &&
+ );
+ })}
+
+ {selected?.description && (
+
+ {selected.description}
+
+ )}
+
();
+ const isPublic = watch('isPublic');
+ const days = watch('fundraiseEndDays') ?? DEFAULT_FUNDRAISE_END_DAYS;
+ const isLockedPrivate = useIsLockedPrivate();
+ const privateNeedsRfp = useShowPrivateWarning();
+ // The RFP may have been chosen since the form loaded, which is the only
+ // other moment the lock is applied.
+ useEffect(() => {
+ if (isLockedPrivate && isPublic !== false) setValue('isPublic', false);
+ }, [isLockedPrivate, isPublic, setValue]);
+
+ return (
+ <>
+ {isLockedPrivate ? (
+
+ ({
+ ...option,
+ icon: VISIBILITY_ICONS[option.value],
+ }))}
+ value={isPublic === false ? 'private' : 'public'}
+ onChange={(next) => setValue('isPublic', next === 'public', { shouldValidate: true })}
+ />
+
+ )}
+ {privateNeedsRfp && (
+ In order to submit a private proposal, you must select an RFP.
+ )}
+
+
+
+ setValue('fundraiseEndDays', next as (typeof FUNDRAISE_DAYS)[number], {
+ shouldDirty: true,
+ })
+ }
+ choices={FUNDRAISE_DAYS.map((value) => ({ value, label: `${value} days` }))}
+ />
+
+
+ {/* The search itself, not an offer to open it: finding the
+ foundation is the whole of the setting. */}
+
+ Nonprofit optional
+
+ }
+ >
+
+
+ );
+}
+
+/** A new RFP's one setting: how its applicants may submit. */
+function RfpSettings() {
+ const { watch, setValue } = useFormContext();
+ const value = watch('applicationVisibility') ?? 'OPTIONAL';
+
+ return (
+
+
+ setValue('applicationVisibility', next as PublishingFormData['applicationVisibility'], {
+ shouldValidate: true,
+ })
+ }
+ choices={GRANT_APPLICATION_VISIBILITY_OPTIONS.map((option) => ({
+ value: option.value,
+ label: option.label,
+ icon: VISIBILITY_ICONS[option.value],
+ description:
+ option.value === 'PUBLIC' ? (
+ <>
+ {option.description}
+
+ Community match eligible: community members can co-fund public proposals, adding
+ to your funding.
+
+
+ ) : (
+ option.description
+ ),
+ }))}
+ />
+
+ );
+}
diff --git a/components/AIMode/document/PublishPill.tsx b/components/AIMode/document/PublishPill.tsx
new file mode 100644
index 000000000..a3cf44b16
--- /dev/null
+++ b/components/AIMode/document/PublishPill.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { ExternalLink, Send } from 'lucide-react';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import { getWorkPath } from '@/components/Notebook/PublishingForm/formMapping';
+import { Loader } from '@/components/ui/Loader';
+import { cn } from '@/utils/styles';
+
+/**
+ * The document's Publish button, floating at the bottom centre of the pane.
+ * It never waits on missing details and never comments on them: every click
+ * opens the publish dialog, which lists what is still empty and lets it be
+ * filled in there. Once published it says so, with a way to the page and an
+ * Update button.
+ */
+export function PublishPill() {
+ const controller = usePublishingController();
+ const { note, editor, articleType, workId, isPublished, isChangelog } = controller;
+
+ // A type this surface cannot publish has no button to press.
+ const isNewPreprint = articleType === 'discussion' && !workId && !isChangelog;
+ if (!articleType || isNewPreprint || controller.blockedMessage) return null;
+
+ const handleClick = () => void controller.requestPublish();
+
+ const busyLabel = controller.isUpserting
+ ? 'Publishing...'
+ : controller.isLinkingNonprofit
+ ? 'Linking nonprofit...'
+ : controller.isRedirecting
+ ? 'Redirecting...'
+ : null;
+ const disabled =
+ controller.readOnly || controller.isDeclined || controller.isPublishing || editor == null;
+
+ const livePath =
+ isPublished && note?.post && workId ? getWorkPath(articleType, workId, note.post.slug) : null;
+
+ return (
+
+ {livePath ? (
+
+ ) : (
+
+ )}
+
+ {lively && (
+ <>
+ {/* The blue running into indigo: a gradient can't transition, so it fades in over the fill. */}
+
+ {busy ? (
+
+ {label}
+
+ );
+}
diff --git a/components/AIMode/document/masthead/AmountWidget.tsx b/components/AIMode/document/masthead/AmountWidget.tsx
new file mode 100644
index 000000000..be26f4352
--- /dev/null
+++ b/components/AIMode/document/masthead/AmountWidget.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue, EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './MastheadLine';
+import { formatAmount, type MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** Whole dollars, with room for any amount a fund would name. */
+const MAX_DIGITS = 12;
+
+const withSeparators = (digits: string): string =>
+ digits ? new Intl.NumberFormat('en-US').format(Number.parseInt(digits, 10)) : '';
+
+interface AmountWidgetProps {
+ readonly config: MastheadWidgetConfig;
+ readonly value: string | undefined;
+ readonly editable: boolean;
+ readonly editing: boolean;
+ readonly onEditingChange: (editing: boolean) => void;
+}
+
+/** A sum in whole US dollars: a proposal's funding goal, an RFP's funding amount. */
+export function AmountWidget({
+ config,
+ value,
+ editable,
+ editing,
+ onEditingChange,
+}: AmountWidgetProps) {
+ const amount = formatAmount(value);
+
+ if (editing && editable) {
+ return (
+
+ {config.label}
+ onEditingChange(false)} />
+
+ );
+ }
+ if (amount) {
+ return (
+ onEditingChange(true) : undefined}>
+ {amount}
+
+ );
+ }
+ if (!editable) return null;
+ return (
+ onEditingChange(true)} />
+ );
+}
+
+/**
+ * The amount as a small field: digits, shown with thousands separators.
+ * Enter or leaving it keeps the amount, Escape does not.
+ */
+export function AmountEditor({
+ config,
+ initial,
+ onClose,
+}: {
+ readonly config: MastheadWidgetConfig;
+ readonly initial: string | undefined;
+ readonly onClose: () => void;
+}) {
+ const { setValue } = useFormContext();
+ const startDigits = Number(initial) > 0 ? String(Math.trunc(Number(initial))) : '';
+ const [digits, setDigits] = useState(startDigits);
+ const ref = useRef(null);
+
+ const commit = () => {
+ if (digits !== startDigits) {
+ setValue('budget', digits, { shouldDirty: true, shouldValidate: true });
+ }
+ onClose();
+ };
+ useLeaveToCommit(ref, commit);
+
+ return (
+
+ $
+ USD
+
+ );
+}
diff --git a/components/AIMode/document/masthead/ApplyingToWidget.tsx b/components/AIMode/document/masthead/ApplyingToWidget.tsx
new file mode 100644
index 000000000..2ca2e2359
--- /dev/null
+++ b/components/AIMode/document/masthead/ApplyingToWidget.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useSelectedGrant } from '@/components/Notebook/PublishingForm/useSelectedGrant';
+import { AddDetail, DetailValue } from './MastheadLine';
+import type { MastheadWidgetConfig } from './mastheadWidgets';
+import { SelectGrantForNoteModal } from './SelectGrantForNoteModal';
+
+interface ApplyingToWidgetProps {
+ readonly config: MastheadWidgetConfig;
+ readonly noteId: number;
+ readonly editable: boolean;
+ readonly editing: boolean;
+ readonly onEditingChange: (editing: boolean) => void;
+}
+
+/**
+ * The Request for Proposal a proposal answers, picked in the RFP modal and
+ * saved to the note there. A proposal can publish without one, so it can
+ * also be taken away.
+ */
+export function ApplyingToWidget({
+ config,
+ noteId,
+ editable,
+ editing,
+ onEditingChange,
+}: ApplyingToWidgetProps) {
+ const { selectedGrant, isSaving, save } = useSelectedGrant(noteId);
+ const open = editable ? () => onEditingChange(true) : undefined;
+
+ if (!selectedGrant && !open) return null;
+ return (
+ <>
+ {selectedGrant ? (
+ void save(null) : undefined}
+ clearLabel="Stop applying to this RFP"
+ truncate
+ >
+ {selectedGrant.shortTitle}
+
+ ) : (
+ open && onEditingChange(false)}
+ />
+ )}
+
+ );
+}
diff --git a/components/AIMode/document/masthead/CoverImage.tsx b/components/AIMode/document/masthead/CoverImage.tsx
new file mode 100644
index 000000000..b9c4ec8f6
--- /dev/null
+++ b/components/AIMode/document/masthead/CoverImage.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { X } from 'lucide-react';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import {
+ COVER_IMAGE_ACCEPT,
+ coverImageFileError,
+ useCoverImageUpload,
+} from '@/components/Notebook/PublishingForm/useCoverImageUpload';
+
+/**
+ * The cover image has no editing state: a click opens the file picker, the
+ * pick shows at once and uploads behind it. Two places start that click, the
+ * byline's offer to add one and the banner once there is one, so the picker
+ * is held here and its hidden input rendered once by the masthead.
+ */
+export function useCoverImagePicker(value: PublishingFormData['coverImage']) {
+ const { select, remove } = useCoverImageUpload();
+ const inputRef = useRef(null);
+ const [error, setError] = useState(null);
+
+ const file = value?.file instanceof File ? value.file : null;
+ const [fileUrl, setFileUrl] = useState(null);
+ useEffect(() => {
+ if (!file) {
+ setFileUrl(null);
+ return undefined;
+ }
+ const url = URL.createObjectURL(file);
+ setFileUrl(url);
+ return () => URL.revokeObjectURL(url);
+ }, [file]);
+
+ const browse = useCallback(() => inputRef.current?.click(), []);
+ const handlePick = (event: React.ChangeEvent) => {
+ const picked = event.target.files?.[0];
+ event.target.value = ''; // allow picking the same file again
+ if (!picked) return;
+ const fileError = coverImageFileError(picked);
+ setError(fileError);
+ if (!fileError) void select(picked);
+ };
+
+ return {
+ /** The picture to show: the pick while it uploads, then what the server stored. */
+ imageUrl: fileUrl ?? value?.url ?? null,
+ /** Why the last pick was refused, if it was. */
+ error,
+ browse,
+ remove: () => {
+ setError(null);
+ remove();
+ },
+ inputProps: {
+ ref: inputRef,
+ type: 'file' as const,
+ accept: COVER_IMAGE_ACCEPT.join(','),
+ onChange: handlePick,
+ className: 'hidden',
+ 'data-testid': 'masthead-cover-input',
+ },
+ };
+}
+
+interface CoverBannerProps {
+ readonly imageUrl: string;
+ /** Opens the file picker to replace it; absent where the cover cannot be changed. */
+ readonly onChange?: () => void;
+ readonly onRemove?: () => void;
+}
+
+/** The cover image across the column, above the title, as the published page shows it. */
+export function CoverBanner({ imageUrl, onChange, onRemove }: CoverBannerProps) {
+ // eslint-disable-next-line @next/next/no-img-element
+ const image = {image}
;
+ }
+ return (
+
+
+ {image}
+
+ {onRemove && (
+
+
+ )}
+
+ );
+}
diff --git a/components/AIMode/document/masthead/DetailSketch.tsx b/components/AIMode/document/masthead/DetailSketch.tsx
new file mode 100644
index 000000000..7ffc1b5bf
--- /dev/null
+++ b/components/AIMode/document/masthead/DetailSketch.tsx
@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import { ImageIcon, Target } from 'lucide-react';
+
+interface DetailSketchProps {
+ /** The detail to show, by its masthead widget id: `coverImage`, `contacts`, … */
+ readonly highlight: string;
+}
+
+/**
+ * A thumbnail of a published page in two colours: the page in grey
+ * placeholders, and the hovered detail in blue, drawn as it might look with
+ * a made-up value (a contact's avatar and name, an amount), under the title
+ * where it will show. Not this document, and not every detail: just enough
+ * to say what this one is.
+ */
+export function DetailSketch({ highlight }: DetailSketchProps) {
+ const isCover = highlight === 'coverImage';
+ const detail = isCover ? null : SAMPLES[highlight];
+
+ return (
+
+ {isCover ? (
+
+
+ ) : (
+
+ )}
+
+ {detail ??
}
+
+
+
;
+}
+
+/** A made-up person, as the published page would show them: avatar and name. */
+function Person({ initials, name }: { readonly initials: string; readonly name: string }) {
+ return (
+
+
+ {initials}
+
+ {name}
+
+ );
+}
+
+/** A detail line: its label in grey, its value in blue. */
+function Line({ label, children }: { readonly label?: string; readonly children: ReactNode }) {
+ return (
+
+ {label && {label} }
+ {children}
+
+ );
+}
+
+const value = (text: string) => {text} ;
+
+/** What each detail looks like with a value, keyed by masthead widget id. */
+const SAMPLES: Record = {
+ contacts: (
+
+
+ ),
+ organization: {value('Hartwell Foundation')} ,
+ fundingAmount: {value('$250,000')} ,
+ shortDescription: (
+
+ Early detection tools for pediatric cancers, from new biomarkers to low-cost screening.
+
+ ),
+ authors: (
+
+ and
+
+ ),
+ fundingGoal: (
+
+ ),
+ applyingTo: (
+
+
+
+
+ ),
+};
diff --git a/components/AIMode/document/masthead/Masthead.tsx b/components/AIMode/document/masthead/Masthead.tsx
new file mode 100644
index 000000000..947140aee
--- /dev/null
+++ b/components/AIMode/document/masthead/Masthead.tsx
@@ -0,0 +1,194 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useWatch } from 'react-hook-form';
+import { usePublishingController } from '@/components/Notebook/PublishingForm';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AmountWidget } from './AmountWidget';
+import { ApplyingToWidget } from './ApplyingToWidget';
+import { CoverBanner, useCoverImagePicker } from './CoverImage';
+import { AddDetail, DetailHint } from './MastheadLine';
+import {
+ detailValue,
+ mastheadWidgetsFor,
+ peopleOf,
+ type MastheadWidgetConfig,
+} from './mastheadWidgets';
+import { PeopleWidget } from './PeopleWidget';
+import { TextWidget } from './TextWidget';
+import type { MastheadSlots } from './useMastheadSlots';
+
+const LINE_CLASS = 'flex flex-wrap items-center gap-x-5 text-sm text-gray-600';
+
+interface MastheadProps {
+ /**
+ * Where in the editor it renders: the cover above the document's title,
+ * the details right under it. Nothing renders until the editor has them.
+ */
+ readonly slots: MastheadSlots | null;
+}
+
+/**
+ * The publishing details as the head of the document, shaped like the header
+ * the published page will have and no heavier: the cover image once there is
+ * one above the document's title; under the title, the authors and the RFP
+ * each on a line of their own once set, and one quiet line of the rest. The
+ * title itself is the document's first heading, edited in the document: there
+ * is only ever the one. A detail with a value is a label and
+ * the value ("By Kobe Attias"), one without is its icon and what to do ("Add
+ * cover"), and the one being edited is a small field in its place. Nothing here is ever marked as
+ * missing: the publish dialog lists what is still empty.
+ */
+export function Masthead({ slots }: MastheadProps) {
+ const { note, articleType, readOnly: formReadOnly, isDeclined } = usePublishingController();
+ const values = useWatch() as PublishingFormData;
+ const canEdit = !formReadOnly && !isDeclined;
+
+ // One editor at a time.
+ const [editingId, setEditingId] = useState(null);
+ const noteId = note?.id ?? null;
+ useEffect(() => {
+ setEditingId(null);
+ }, [noteId]);
+
+ const widgets = mastheadWidgetsFor(articleType).filter((widget) => !widget.hiddenWhen?.(values));
+ const isEditable = (config: MastheadWidgetConfig) => canEdit && !config.lockedWhen?.(values);
+
+ const coverConfig = widgets.find((widget) => widget.kind === 'cover');
+ const cover = useCoverImagePicker(values.coverImage);
+ const coverEditable = coverConfig != null && isEditable(coverConfig);
+
+ // A paragraph is an offer on the line until it is written; from then on it
+ // stands under the line as the paragraph it is.
+ const standsAlone = (config: MastheadWidgetConfig) =>
+ config.kind === 'paragraph' &&
+ (editingId === config.id || Boolean(values.shortDescription?.trim()));
+
+ // The details with a line to themselves: the authors and the RFP, once
+ // they are set. Until then their offers sit with the other details. A
+ // people picker that is open keeps its line until it closes, rather than
+ // jumping into the row the moment the last name is removed.
+ const onOwnLine = (config: MastheadWidgetConfig) =>
+ (config.ownLineWhen?.(values) ?? false) ||
+ (config.kind === 'people' && editingId === config.id);
+ const ownLine = widgets.filter(onOwnLine);
+
+ const hasValue = (config: MastheadWidgetConfig) =>
+ config.kind === 'cover' ? cover.imageUrl != null : detailValue(config, values) != null;
+ // The shared line, and whether anything on it will show: a detail shows
+ // its value, or an offer to add one when it can be edited.
+ const rowWidgets = widgets.filter(
+ (widget) => widget.kind !== 'cover' && !standsAlone(widget) && !onOwnLine(widget)
+ );
+ const offersCover = coverConfig != null && coverEditable && !cover.imageUrl;
+ const rowShows =
+ offersCover || rowWidgets.some((widget) => isEditable(widget) || hasValue(widget));
+
+ const renderWidget = (config: MastheadWidgetConfig) => {
+ const state = {
+ config,
+ editable: isEditable(config),
+ editing: editingId === config.id,
+ onEditingChange: (editing: boolean) =>
+ setEditingId((current) => {
+ if (editing) return config.id;
+ return current === config.id ? null : current;
+ }),
+ };
+ switch (config.kind) {
+ case 'cover':
+ return null;
+ case 'people':
+ return
+ {widget}
+
+ );
+ };
+
+ if (!slots) return null;
+
+ const details = (
+ // A rule under the details sets them off from the body that follows.
+
+ {/* The byline: its lines sit closer to each other than to anything else. */}
+ {(ownLine.length > 0 || rowShows) && (
+
+ {ownLine.map((config) => (
+
+ {renderDetail(config)}
+
+ ))}
+ {rowShows && (
+
+ {rowWidgets.map(renderDetail)}
+ {offersCover && (
+
+
+ )}
+
+ )}
+
+ )}
+ {widgets.filter(standsAlone).map(renderDetail)}
+
+ {cover.error && (
+
+ {cover.error}
+
+ )}
+ {coverEditable &&
}
+
+
,
+ slots.cover
+ )}
+ {createPortal(details, slots.details)}
+
+ );
+}
diff --git a/components/AIMode/document/masthead/MastheadLine.tsx b/components/AIMode/document/masthead/MastheadLine.tsx
new file mode 100644
index 000000000..e354f30b6
--- /dev/null
+++ b/components/AIMode/document/masthead/MastheadLine.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { X, type LucideIcon } from 'lucide-react';
+import { Tooltip } from '@/components/ui/Tooltip';
+import { DetailSketch } from './DetailSketch';
+import { cn } from '@/utils/styles';
+
+/** A detail being edited: a small field in the byline's place. The only blue in the masthead. */
+export const EDITING_FIELD_CLASS =
+ 'flex items-center gap-2 rounded-lg border border-solid border-primary-600 bg-white px-2.5 ring-[3px] ring-primary-600/15';
+
+/** The text input inside such a field. */
+export const EDITING_INPUT_CLASS =
+ 'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-400 focus:outline-none focus:ring-0';
+
+interface AddDetailProps {
+ readonly icon: LucideIcon;
+ /** What to do: "Add cover". */
+ readonly label: string;
+ readonly onClick: () => void;
+}
+
+/**
+ * A detail with no value yet: a quiet icon and what to do, among the
+ * byline's values. Nothing on the document marks it as required; the publish dialog
+ * lists what is still empty when Publish is clicked.
+ */
+export function AddDetail({ icon: Icon, label, onClick }: AddDetailProps) {
+ return (
+
+
+ );
+}
+
+interface DetailValueProps {
+ readonly label: string;
+ readonly children: ReactNode;
+ /** Re-opens the detail's editor; absent when the value cannot be changed. */
+ readonly onEdit?: () => void;
+ /** Takes the value away; only a detail the work can publish without offers it. */
+ readonly onClear?: () => void;
+ readonly clearLabel?: string;
+ /** Keep the value on one line and ellipsize it; names wrap instead. */
+ readonly truncate?: boolean;
+}
+
+/**
+ * A detail with a value: its label and the value, like the byline of the
+ * published page. The same for every detail under the title.
+ */
+export function DetailValue({
+ label,
+ children,
+ onEdit,
+ onClear,
+ clearLabel,
+ truncate = false,
+}: DetailValueProps) {
+ const valueClass = cn('min-w-0 text-left font-medium text-gray-900', truncate && 'truncate');
+ return (
+
+ {label}
+ {onEdit ? (
+
+ {children}
+
+ ) : (
+ {children}
+ )}
+ {onClear && (
+
+
+ )}
+
+ );
+}
+
+interface DetailHintProps {
+ /** The detail's widget id, which the sketch picks out. */
+ readonly id: string;
+ /** What the detail is called: the hint's heading. */
+ readonly name: string;
+ /** What it is for. */
+ readonly hint: string;
+ readonly children: ReactNode;
+}
+
+/**
+ * Says what a detail is for when it is hovered or focused, under it: a
+ * sketch of the published page with the detail picked out, its name, and a
+ * line on what it means. On a touch screen a tap edits the detail instead,
+ * so there the hint stays out of the way.
+ */
+export function DetailHint({ id, name, hint, children }: DetailHintProps) {
+ return (
+
+
+ {name}
+ {hint}
+
+
+ }
+ position="bottom"
+ width="w-64"
+ delay={400}
+ hideDelay={0}
+ disableTouchClick
+ wrapperAs="span"
+ wrapperClassName="h-auto min-w-0 max-w-full"
+ className="p-2.5 text-left text-xs leading-relaxed"
+ >
+ {children}
+
+ );
+}
diff --git a/components/AIMode/document/masthead/PeopleWidget.tsx b/components/AIMode/document/masthead/PeopleWidget.tsx
new file mode 100644
index 000000000..8ef512ddd
--- /dev/null
+++ b/components/AIMode/document/masthead/PeopleWidget.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Users } from 'lucide-react';
+import type { PublishingFormData, SelectOption } from '@/components/Notebook/PublishingForm/schema';
+import { Avatar } from '@/components/ui/Avatar';
+import type { MultiSelectOption } from '@/components/ui/form/SearchableMultiSelect';
+import { SearchableUserSelect } from '@/components/ui/form/SearchableUserSelect';
+import type { UserSuggestion } from '@/types/search';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue } from './MastheadLine';
+import { joinNames, type MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** An RFP's contacts are users; a work's authors are author profiles. */
+const getContactId = (user: UserSuggestion) => user.id!.toString();
+
+const renderPerson = (option: MultiSelectOption, { focus }: { focus: boolean }) => (
+
+);
+
+interface PeopleWidgetProps {
+ readonly config: MastheadWidgetConfig;
+ readonly value: SelectOption[];
+ readonly editable: boolean;
+ readonly editing: boolean;
+ readonly onEditingChange: (editing: boolean) => void;
+}
+
+/** The people on the work: a proposal's authors, an RFP's contacts. Any number of them. */
+export function PeopleWidget({
+ config,
+ value,
+ editable,
+ editing,
+ onEditingChange,
+}: PeopleWidgetProps) {
+ if (editing && editable) {
+ return (
+ onEditingChange(false)}
+ className="basis-full"
+ />
+ );
+ }
+ if (value.length > 0) {
+ return (
+ onEditingChange(true) : undefined}>
+ {joinNames(value.map((person) => person.label))}
+
+ );
+ }
+ if (!editable) return null;
+ return (
+ onEditingChange(true)} />
+ );
+}
+
+/**
+ * The shared people picker, dressed as a field: the people already added
+ * stay as chips and the search adds another. Each change is the form's at
+ * once; Escape puts back who was there when the field opened.
+ */
+export function PeopleEditor({
+ config,
+ value,
+ onClose,
+ className,
+}: {
+ readonly config: MastheadWidgetConfig;
+ readonly value: SelectOption[];
+ readonly onClose: () => void;
+ readonly className?: string;
+}) {
+ const { setValue } = useFormContext();
+ const field = config.field === 'contacts' ? 'contacts' : 'authors';
+ const write = (people: SelectOption[]) => setValue(field, people, { shouldValidate: true });
+ const openedWithRef = useRef(value);
+ const ref = useRef(null);
+ useLeaveToCommit(ref, onClose);
+
+ return (
+ {
+ // Only once the search is empty: with text in it Enter picks a result
+ // and Escape clears it, both the picker's own.
+ const input = event.target;
+ if (!(input instanceof HTMLInputElement) || input.value !== '') return;
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ onClose();
+ } else if (event.key === 'Escape') {
+ event.preventDefault();
+ write(openedWithRef.current);
+ onClose();
+ }
+ }}
+ >
+
+ );
+}
diff --git a/components/AIMode/document/masthead/SelectGrantForNoteModal.tsx b/components/AIMode/document/masthead/SelectGrantForNoteModal.tsx
new file mode 100644
index 000000000..485e6a892
--- /dev/null
+++ b/components/AIMode/document/masthead/SelectGrantForNoteModal.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { SelectFundingOpportunityModal } from '@/components/modals/SelectFundingOpportunityModal';
+import { useSelectedGrant } from '@/components/Notebook/PublishingForm/useSelectedGrant';
+
+/** A modal a masthead widget opens for the note it belongs to. */
+export interface NoteModalProps {
+ readonly noteId: number;
+ readonly isOpen: boolean;
+ readonly onClose: () => void;
+}
+
+/** Picks the Request for Proposal a draft proposal answers and saves it to the note. */
+export function SelectGrantForNoteModal({ noteId, isOpen, onClose }: NoteModalProps) {
+ const { save } = useSelectedGrant(noteId);
+
+ return (
+ void save(grant)}
+ />
+ );
+}
diff --git a/components/AIMode/document/masthead/TextWidget.tsx b/components/AIMode/document/masthead/TextWidget.tsx
new file mode 100644
index 000000000..066ce7718
--- /dev/null
+++ b/components/AIMode/document/masthead/TextWidget.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import type { PublishingFormData } from '@/components/Notebook/PublishingForm/schema';
+import { cn } from '@/utils/styles';
+import { AddDetail, DetailValue, EDITING_FIELD_CLASS, EDITING_INPUT_CLASS } from './MastheadLine';
+import type { MastheadWidgetConfig } from './mastheadWidgets';
+import { useLeaveToCommit } from './useLeaveToCommit';
+
+/** The schema's limit on an organization's name. */
+const MAX_LINE_LENGTH = 200;
+
+type TextField = 'organization' | 'shortDescription';
+
+interface TextWidgetProps {
+ readonly config: MastheadWidgetConfig;
+ readonly value: string | undefined;
+ readonly editable: boolean;
+ readonly editing: boolean;
+ readonly onEditingChange: (editing: boolean) => void;
+}
+
+/**
+ * Words the author types: one line after a label (who an RFP is offered
+ * by), or a few sentences that stand as a paragraph (its short description).
+ * Unset, either is an offer in the byline; the masthead gives a paragraph
+ * that is set or being written a place of its own under it.
+ */
+export function TextWidget({ config, value, editable, editing, onEditingChange }: TextWidgetProps) {
+ const text = value?.trim() ?? '';
+ const paragraph = config.kind === 'paragraph';
+ const edit = editable ? () => onEditingChange(true) : undefined;
+
+ if (editing && editable) {
+ const editor = (
+ onEditingChange(false)} />
+ );
+ return paragraph ? (
+ editor
+ ) : (
+
+ {config.label}
+ {editor}
+
+ );
+ }
+ if (text && paragraph) {
+ const className = 'whitespace-pre-wrap break-words text-[15px] leading-relaxed text-gray-700';
+ return edit ? (
+
+ {text}
+
+ ) : (
+ {text}
+ );
+ }
+ if (text) {
+ return (
+
+ {text}
+
+ );
+ }
+ if (!edit) return null;
+ return ();
+ const field: TextField = config.field === 'organization' ? 'organization' : 'shortDescription';
+ const [draft, setDraft] = useState(initial);
+ const ref = useRef(null);
+
+ const commit = () => {
+ const next = draft.trim();
+ if (next !== initial) setValue(field, next, { shouldDirty: true, shouldValidate: true });
+ onClose();
+ };
+ useLeaveToCommit(ref, commit);
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ // Shift+Enter still breaks a line in the paragraph.
+ if (event.key === 'Enter' && !event.shiftKey) {
+ event.preventDefault();
+ commit();
+ } else if (event.key === 'Escape') {
+ event.preventDefault();
+ onClose();
+ }
+ };
+
+ if (config.kind === 'paragraph') {
+ return (
+
+ {/* The hidden copy sizes the cell, so the field grows with its text. */}
+
+
+ {draft}{' '}
+
+