Browse Source

Hide unfinished composer intent chips

The composer top row no longer shows the placeholder Style, Mark, and Focus chips. Reference image upload remains available while those future controls are deferred.

Constraint: User asked to hide the highlighted area temporarily, not remove reference upload
Rejected: Disabling the buttons visually | hidden controls better avoid confusing unfinished affordances
Confidence: high
Scope-risk: narrow
Directive: Reintroduce these chips only with implemented behavior behind them
Tested: npm run test:run -- src/components/__tests__/GenerationComposer.test.tsx
Tested: PROVIDER_MODE=popi NEXT_PUBLIC_PROVIDER_MODE=popi npm run build
feature/add_agent_md
jiajia 2 months ago
parent
commit
94695a97c8
  1. 40
      src/components/composer/GenerationComposer.tsx

40
src/components/composer/GenerationComposer.tsx

@ -45,7 +45,6 @@ type ComposerMode = "empty-create" | "node-edit" | "process-node" | "unsupported
type ComposerCapability = "all" | "image" | "video" | "3d" | "audio";
type EditableNodeType = "nanoBanana" | "generateVideo" | "generateAudio";
type DraftField = "prompt" | "aspectRatio" | "resolution" | "selectedModel" | "inputImages" | "imageCount" | "parameters";
type ActiveChip = "style" | "mark" | "focus";
type VideoStitchLoopCount = 1 | 2 | 3;
interface ComposerContext {
@ -477,7 +476,6 @@ export function GenerationComposer() {
const fingerprint = nodeDraftFingerprint(context);
const [draft, setDraft] = useState(() => readDraftFromContext(context));
const [dirtyFields, setDirtyFields] = useState<Set<DraftField>>(() => new Set());
const [activeChip, setActiveChip] = useState<ActiveChip | null>(null);
const [assistMenu, setAssistMenu] = useState<"command" | "reference" | null>(null);
const [modelDialogOpen, setModelDialogOpen] = useState(false);
const [isComposerCollapsed, setIsComposerCollapsed] = useState(false);
@ -536,7 +534,6 @@ export function GenerationComposer() {
flushDraftForContext(previousContext);
contextRef.current = context;
setDraft(readDraftFromContext(context));
setActiveChip(null);
clearDirtyFields();
}, [clearDirtyFields, context, flushDraftForContext, identity]);
@ -1113,43 +1110,6 @@ export function GenerationComposer() {
)
) : (
<>
<button
type="button"
onClick={() => setActiveChip(activeChip === "style" ? null : "style")}
className={`flex h-14 w-16 flex-col items-center justify-center gap-1 rounded-lg border text-xs transition-colors ${
activeChip === "style"
? "border-cyan-500/60 bg-cyan-500/10 text-cyan-200"
: "border-neutral-700 bg-neutral-800 text-neutral-400 hover:border-neutral-600 hover:text-neutral-200"
}`}
>
<span className="text-base leading-none"></span>
<span>{t("composer.style")}</span>
</button>
<button
type="button"
onClick={() => setActiveChip(activeChip === "mark" ? null : "mark")}
className={`flex h-14 w-16 flex-col items-center justify-center gap-1 rounded-lg border text-xs transition-colors ${
activeChip === "mark"
? "border-cyan-500/60 bg-cyan-500/10 text-cyan-200"
: "border-neutral-700 bg-neutral-800 text-neutral-400 hover:border-neutral-600 hover:text-neutral-200"
}`}
>
<span className="text-base leading-none"></span>
<span>{t("composer.mark")}</span>
</button>
<button
type="button"
onClick={() => setActiveChip(activeChip === "focus" ? null : "focus")}
className={`flex h-14 w-16 flex-col items-center justify-center gap-1 rounded-lg border text-xs transition-colors ${
activeChip === "focus"
? "border-cyan-500/60 bg-cyan-500/10 text-cyan-200"
: "border-neutral-700 bg-neutral-800 text-neutral-400 hover:border-neutral-600 hover:text-neutral-200"
}`}
>
<span className="text-base leading-none"></span>
<span>{t("composer.focus")}</span>
</button>
<button
type="button"
onClick={() => referenceImageInputRef.current?.click()}

Loading…
Cancel
Save