Skip to content

AI mode: full-pane document loading state, notebook link, locked effo… #1103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yattias merged 1 commit into from
Sep 11, 2026
Merged

AI mode: full-pane document loading state, notebook link, locked effo… #1103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 42 additions & 27 deletions components/AIMode/DocumentPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

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';
Expand Down Expand Up @@ -142,10 +143,26 @@
// 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 (
<div className={cn('relative flex h-full min-h-0 flex-col bg-white', className)}>
<div className="flex h-12 shrink-0 items-center border-b border-gray-200 px-3">
<div className="flex h-12 shrink-0 items-center justify-between gap-2 border-b border-gray-200 px-3">
<NotebookTabs active={tab} onChange={onTabChange} labels={{ details: 'Publish' }} />
{document.notebookHref && (
<a
href={document.notebookHref}
target="_blank"
rel="noopener noreferrer"
className="inline-flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
Open in notebook
</a>
)}
</div>

{/* The document is the pane: no gutter, no card, just the page. The
Expand All @@ -165,42 +182,39 @@
<div className={DOCUMENT_PAGE_CLASS}>
<DocumentPaneSkeleton />
</div>
) : startingDocument ? (
<StartingDocument label={phaseLabel} />
) : (
<article className={cn(DOCUMENT_PAGE_CLASS, 'animate-in fade-in duration-300')}>
{editorLostContent && (
<div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
This document couldn’t be displayed here. Open it in the notebook to view it;
nothing has been changed.
</div>
)}
{status === 'empty' && review.review == null && (
<EmptyDocument label={phaseLabel} active={false} />
)}
{status === 'working' && !document.hasWrittenVersion && (
<EmptyDocument label={phaseLabel} active />
)}
{status === 'empty' && review.review == null && <EmptyDocument />}

{/* Mounted once per note: the editor's content prop is only read on
creation, and later versions arrive through the review. */}
<BlockEditorClientWrapper
key={noteId ?? 'none'}
content={content.content}
contentJson={content.contentJson}
editable={!readOnly}
locked={locked}
requireTitle={false}
autofocus={false}
onUpdate={readOnly ? undefined : handleEditorUpdate}
setEditor={setEditor}
/>

{status === 'drafting' && draftText && <DraftSection text={draftText} />}

{status === 'working' && document.hasWrittenVersion && (
<InProgressRow label={phaseLabel ?? 'Working'} />
)}
</article>
)}

Check warning on line 217 in components/AIMode/DocumentPane.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Extract this nested ternary operation into an independent statement. 


See more on https://sonarcloud.io/project/issues?id=ResearchHub_web&issues=AaCOWVHpAd9JgHF7I0ID&open=AaCOWVHpAd9JgHF7I0ID&pullRequest=1103
</div>

{tab === 'details' && (
Expand All @@ -225,29 +239,30 @@
}

/**
* The note exists but has no version yet. Spins only while a turn is
* running; a settled conversation that never wrote anything says so plainly.
* 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 EmptyDocument({
label,
active,
}: {
readonly label: string | null;
readonly active: boolean;
}) {
function StartingDocument({ label }: { readonly label: string | null }) {
return (
<div
role="status"
aria-live="polite"
className="flex h-full min-h-[320px] flex-col items-center justify-center gap-3 bg-gray-50 px-6 text-center"
>
<Loader size="md" className="text-primary-500" />
<p className="text-base font-semibold text-gray-800">Starting the document…</p>
{label && <p className="text-sm text-gray-500">{label}</p>}
</div>
);
}

/** The note exists, the turn has settled, and nothing was ever written. */
function EmptyDocument() {
return (
<div className="mb-4 flex flex-col items-center gap-2 rounded-lg bg-gray-50 px-4 py-5 text-center">
{active ? (
<>
<Loader size="sm" className="text-primary-500" />
<p className="text-sm font-medium text-gray-700">Starting the document…</p>
{label && <p className="text-xs text-gray-500">{label}</p>}
</>
) : (
<p className="text-sm text-gray-500">
Nothing has been written here yet. You can start typing, or ask the assistant.
</p>
)}
<p className="text-sm text-gray-500">
Nothing has been written here yet. You can start typing, or ask the assistant.
</p>
</div>
);
}
Expand Down
19 changes: 7 additions & 12 deletions components/AgentChat/ModelControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ const PANEL_WIDTH = 'w-[360px] max-w-[calc(100vw-1rem)]';
/**
* The composer's two controls: which model answers, and how hard it works.
*
* Model and effort lock after the first turn. Once effort is locked the
* panel only says so: thinking and temperature depend on the effort the chat
* runs at, and offering them under a lock reads as a control that half works.
* Model and effort lock after the first turn: both triggers go disabled and
* show a lock, the same way. Thinking and temperature depend on the effort
* the chat runs at, so they lock with it rather than half working.
*
* The model picker is a menu (`BaseMenu`): one choice, closes on pick. The
* effort panel is a popover: it holds all three controls, temperature
Expand Down Expand Up @@ -91,10 +91,9 @@ export function ModelControls({
const hasEffort = model.capabilities.effort.length > 0 || options.effort != null;
const hasEffortMenu = hasEffort || thinkingModes.length > 0 || showTemperature;
const effortLocked = effortPinned && hasEffort;
const lockedEffortLabel = options.effort ? EFFORT_LABELS[options.effort] : 'Locked effort';
const lockedEffortDescription = options.effort
? `${EFFORT_LABELS[options.effort]} effort is locked for this chat. Start a new chat to change it.`
: 'Effort is locked for this chat. Start a new chat to change it.';
? `${EFFORT_LABELS[options.effort]} effort — locked for this chat. Start a new chat to change it.`
: 'Effort — locked for this chat. Start a new chat to change it.';
const allowedModels = models.filter((option) => option.allowed);

return (
Expand Down Expand Up @@ -145,7 +144,7 @@ export function ModelControls({
<Popover>
<PopoverTrigger asChild>
<MenuTrigger
disabled={disabled}
disabled={disabled || effortLocked}
title={
effortLocked
? lockedEffortDescription
Expand All @@ -161,14 +160,10 @@ export function ModelControls({
srLabel={effortLocked ? 'Effort, locked for this chat:' : 'Effort:'}
className="max-w-[140px]"
>
{effortLocked ? lockedEffortLabel : effortButtonLabel(options)}
{effortLocked ? 'Effort' : effortButtonLabel(options)}
</MenuTrigger>
</PopoverTrigger>
<PopoverContent aria-label="Effort" className={cn(PANEL_WIDTH, 'space-y-3 shadow-xl')}>
{effortLocked && (
<p className="text-sm leading-snug text-gray-500">{lockedEffortDescription}</p>
)}

{!effortLocked && effortLevels.length > 0 && (
<ChoicePills
label="Effort"
Expand Down
Loading