);
};
/**
* Inline "this workspace can't chat yet" tray, mirrored on top of the composer
* (same visual treatment as the "Connect your tools" tray below it).
*
* Replaces the old full-screen onboarding redirect: a workspace with no usable
* chat model (fresh install, or an admin deleted the last model) renders the
* composer in place with this notice instead of navigating away. Configurable
* members get a CTA to connect one; everyone else is told to ask an admin. The
* send button stays disabled independently, and the backend rejects any send
* that slips through, so this is purely guidance.
*
* Presentational: visibility is decided by the parent so the composer can flatten
* its top shadow for a seamless join.
*/
const ChatUnavailableNotice: FC<{ workspaceId: number; canConfigure: boolean }> = ({
workspaceId,
canConfigure,
}) => {
const router = useRouter();
return (
{canConfigure
? "Connect a chat model to start chatting."
: "No model available. Ask a workspace admin to connect a chat model."}
{canConfigure ? (
) : null}
);
};
const Composer: FC = () => {
const [mentionedDocuments, setMentionedDocuments] = useAtom(mentionedDocumentsAtom);
const setSubmittedMentions = useSetAtom(submittedMentionsAtom);
const [showDocumentPopover, setShowDocumentPopover] = useState(false);
const [showPromptPicker, setShowPromptPicker] = useState(false);
const [mentionQuery, setMentionQuery] = useState("");
const [actionQuery, setActionQuery] = useState("");
const [suggestionAnchorPoint, setSuggestionAnchorPoint] =
useState(null);
const [isComposerInputEmpty, setIsComposerInputEmpty] = useState(true);
const editorRef = useRef(null);
const prevMentionedDocsRef = useRef>(new Map());
const documentPickerRef = useRef(null);
const promptPickerRef = useRef(null);
const params = useParams();
const workspaceId = getWorkspaceIdNumber(params);
const chat_id = params.chat_id;
const aui = useAui();
// Desktop-only auto-focus; on mobile, programmatic focus would
// summon the soft keyboard on every picker close / thread switch.
const isDesktop = useMediaQuery("(min-width: 640px)");
const electronAPI = useElectronAPI();
const [clipboardInitialText, setClipboardInitialText] = useState();
const clipboardLoadedRef = useRef(false);
useEffect(() => {
if (!electronAPI || clipboardLoadedRef.current) return;
clipboardLoadedRef.current = true;
electronAPI.getQuickAskText().then((text: string) => {
if (text) {
setClipboardInitialText(text);
}
});
}, [electronAPI]);
const isThreadEmpty = useAuiState(({ thread }) => thread.isEmpty);
const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);
const [connectToolsTrayVisible, setConnectToolsTrayVisible] = useState(false);
const { data: chatSetupStatus } = useAtomValue(llmSetupStatusAtomFamily(workspaceId ?? 0));
const isChatUnavailable = !!chatSetupStatus && chatSetupStatus.status !== "ready";
const currentPlaceholder = COMPOSER_PLACEHOLDER;
const { data: currentUser } = useAtomValue(currentUserAtom);
const { data: members } = useAtomValue(membersAtom);
const threadId = useMemo(() => {
if (Array.isArray(chat_id) && chat_id.length > 0) {
return Number.parseInt(chat_id[0], 10) || null;
}
return typeof chat_id === "string" ? Number.parseInt(chat_id, 10) || null : null;
}, [chat_id]);
const sessionState = useAtomValue(chatSessionStateAtom);
const isAiResponding = sessionState?.isAiResponding ?? false;
const respondingToUserId = sessionState?.respondingToUserId ?? null;
const isBlockedByOtherUser = isAiResponding && respondingToUserId !== currentUser?.id;
// One Zero subscription per thread for comment sync.
useCommentsSync(threadId);
// Batch-prefetch assistant message comments to avoid N+1 fetches.
// Returns a primitive string so useSyncExternalStore can compare by value.
const assistantIdsKey = useAuiState(({ thread }) =>
thread.messages
.filter((m) => m.role === "assistant" && m.id?.startsWith("msg-"))
.map((m) => m.id?.replace("msg-", ""))
.join(",")
);
const assistantDbMessageIds = useMemo(
() => (assistantIdsKey ? assistantIdsKey.split(",").map(Number) : []),
[assistantIdsKey]
);
useBatchCommentsPreload(assistantDbMessageIds);
// Always-focused composer: refocus whenever no picker has taken
// over input. ``threadId`` is in the deps so the effect re-fires
// on thread switch (Composer instance is reused).
useEffect(() => {
if (!isDesktop) return;
if (showDocumentPopover || showPromptPicker) return;
void threadId;
editorRef.current?.focus();
}, [isDesktop, showDocumentPopover, showPromptPicker, threadId]);
const handleChatModelSelected = useCallback(() => {
if (!isDesktop) return;
editorRef.current?.focus();
}, [isDesktop]);
// Close document picker when a sidebar slide-out panel (inbox, etc.) opens.
// React only on changes to the tick — comparing against the previously-seen
// value preserves the one-shot semantics of the prior window-event approach
// (no retroactive close on mount if a panel had already opened earlier).
const slideoutOpenedTick = useAtomValue(slideoutOpenedTickAtom);
const lastSeenSlideoutTickRef = useRef(slideoutOpenedTick);
useEffect(() => {
if (lastSeenSlideoutTickRef.current === slideoutOpenedTick) return;
lastSeenSlideoutTickRef.current = slideoutOpenedTick;
setShowDocumentPopover(false);
setMentionQuery("");
setSuggestionAnchorPoint(null);
}, [slideoutOpenedTick]);
// Sync editor text into assistant-ui's composer and mirror the chip
// atom from the editor's reported ``docs``. The editor is the
// single source of truth, so this catches every Plate deletion path
// (Backspace, X button, Cmd+Backspace, range-delete, cut,
// paste-over) without per-keybinding plumbing. The ``prev``
// short-circuit keeps pure-text keystrokes from churning the atom.
const handleEditorChange = useCallback(
(text: string, docs: MentionedDocument[]) => {
setIsComposerInputEmpty(text.trim().length === 0 && docs.length === 0);
aui.composer().setText(text);
setMentionedDocuments((prev) => {
if (prev.length === docs.length) {
const editorKeys = new Set(docs.map((d) => getMentionDocKey(d)));
if (prev.every((d) => editorKeys.has(getMentionDocKey(d)))) {
return prev;
}
}
return docs.map((d) => {
if (d.kind === "connector") {
return {
id: d.id,
title: d.title,
kind: "connector",
connector_type: d.connector_type ?? "UNKNOWN",
account_name: d.account_name ?? d.title,
};
}
if (d.kind === "folder") {
return {
id: d.id,
title: d.title,
kind: "folder",
};
}
if (d.kind === "thread") {
return {
id: d.id,
title: d.title,
kind: "thread",
};
}
return {
id: d.id,
title: d.title,
document_type: d.document_type ?? "UNKNOWN",
kind: "doc",
};
});
});
},
[aui, setMentionedDocuments]
);
const handleMentionTrigger = useCallback((trigger: SuggestionTriggerInfo) => {
const anchorPoint = getComposerSuggestionAnchorPoint(trigger.anchorRect, "top");
if (!anchorPoint) {
setShowDocumentPopover(false);
setMentionQuery("");
setSuggestionAnchorPoint(null);
return;
}
setSuggestionAnchorPoint((current) => current ?? anchorPoint);
setShowDocumentPopover(true);
setMentionQuery(trigger.query);
}, []);
const handleMentionClose = useCallback(() => {
if (showDocumentPopover) {
setShowDocumentPopover(false);
setMentionQuery("");
setSuggestionAnchorPoint(null);
}
}, [showDocumentPopover]);
const handleDocumentPopoverOpenChange = useCallback((open: boolean) => {
setShowDocumentPopover(open);
if (!open) {
setMentionQuery("");
setSuggestionAnchorPoint(null);
}
}, []);
const handleActionTrigger = useCallback(
(trigger: SuggestionTriggerInfo) => {
const anchorPoint = getComposerSuggestionAnchorPoint(
trigger.anchorRect,
clipboardInitialText ? "bottom" : "top"
);
if (!anchorPoint) {
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
return;
}
setSuggestionAnchorPoint((current) => current ?? anchorPoint);
setShowPromptPicker(true);
setActionQuery(trigger.query);
},
[clipboardInitialText]
);
const handleActionClose = useCallback(() => {
if (showPromptPicker) {
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
}
}, [showPromptPicker]);
const handlePromptPickerOpenChange = useCallback((open: boolean) => {
setShowPromptPicker(open);
if (!open) {
setActionQuery("");
setSuggestionAnchorPoint(null);
}
}, []);
const handleActionSelect = useCallback(
(action: { name: string; prompt: string; mode: "transform" | "explore" }) => {
let userText = editorRef.current?.getText() ?? "";
const trigger = `/${actionQuery}`;
if (userText.endsWith(trigger)) {
userText = userText.slice(0, -trigger.length).trimEnd();
}
const finalPrompt = action.prompt.includes("{selection}")
? action.prompt.replace("{selection}", () => userText)
: userText
? `${action.prompt}\n\n${userText}`
: action.prompt;
editorRef.current?.setText(finalPrompt);
aui.composer().setText(finalPrompt);
setIsComposerInputEmpty(false);
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
},
[actionQuery, aui]
);
const handleExampleSelect = useCallback(
(prompt: string) => {
editorRef.current?.setText(prompt);
aui.composer().setText(prompt);
setIsComposerInputEmpty(false);
editorRef.current?.focus();
},
[aui]
);
const handleQuickAskSelect = useCallback(
(action: { name: string; prompt: string; mode: "transform" | "explore" }) => {
if (!clipboardInitialText) return;
electronAPI?.setQuickAskMode(action.mode);
const finalPrompt = action.prompt.includes("{selection}")
? action.prompt.replace("{selection}", () => clipboardInitialText)
: `${action.prompt}\n\n${clipboardInitialText}`;
editorRef.current?.setText(finalPrompt);
aui.composer().setText(finalPrompt);
setIsComposerInputEmpty(false);
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
setClipboardInitialText(undefined);
},
[clipboardInitialText, electronAPI, aui]
);
// Arrow / Enter / Escape navigation for the active picker.
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
// While an IME composition is active (e.g. confirming a Japanese/Chinese/
// Korean conversion), let the Enter/Arrow keys reach the IME instead of
// driving picker navigation/selection.
if (e.nativeEvent.isComposing) return;
if (showPromptPicker) {
if (e.key === "ArrowDown") {
e.preventDefault();
promptPickerRef.current?.moveDown();
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
promptPickerRef.current?.moveUp();
return;
}
if (e.key === "Enter") {
e.preventDefault();
promptPickerRef.current?.selectHighlighted();
return;
}
if (e.key === "Escape") {
e.preventDefault();
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
return;
}
}
if (showDocumentPopover) {
if (e.key === "ArrowDown") {
e.preventDefault();
documentPickerRef.current?.moveDown();
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
documentPickerRef.current?.moveUp();
return;
}
if (e.key === "Enter") {
e.preventDefault();
documentPickerRef.current?.selectHighlighted();
return;
}
if (e.key === "Escape") {
e.preventDefault();
if (documentPickerRef.current?.goBack()) {
return;
}
setShowDocumentPopover(false);
setMentionQuery("");
setSuggestionAnchorPoint(null);
return;
}
}
},
[showDocumentPopover, showPromptPicker]
);
const handleSubmit = useCallback(() => {
if (isThreadRunning || isBlockedByOtherUser) return;
if (showDocumentPopover || showPromptPicker) return;
if (clipboardInitialText) {
const userText = editorRef.current?.getText() ?? "";
const combined = userText ? `${userText}\n\n${clipboardInitialText}` : clipboardInitialText;
aui.composer().setText(combined);
setClipboardInitialText(undefined);
}
// Capture chips before the reset below clears the live atom, so
// the async ``onNew`` still sees them.
setSubmittedMentions(mentionedDocuments);
aui.composer().send();
editorRef.current?.clear();
setIsComposerInputEmpty(true);
setMentionedDocuments([]);
}, [
showDocumentPopover,
showPromptPicker,
isThreadRunning,
isBlockedByOtherUser,
clipboardInitialText,
aui,
mentionedDocuments,
setSubmittedMentions,
setMentionedDocuments,
]);
const handleDocumentRemove = useCallback(
(
docId: number,
docType?: string,
kind?: "doc" | "folder" | "connector" | "thread",
connectorType?: string
) => {
setMentionedDocuments((prev) => {
const removedKey = getMentionDocKey({
id: docId,
document_type: docType,
kind,
connector_type: connectorType,
});
return prev.filter((doc) => getMentionDocKey(doc) !== removedKey);
});
},
[setMentionedDocuments]
);
const handleDocumentsMention = useCallback(
(mentions: MentionedDocumentInfo[]) => {
const editorMentionedDocs = editorRef.current?.getMentionedDocuments() ?? [];
const editorDocKeys = new Set(editorMentionedDocs.map((doc) => getMentionDocKey(doc)));
for (const mention of mentions) {
const key = getMentionDocKey(mention);
if (editorDocKeys.has(key)) continue;
editorRef.current?.insertMentionChip(mention);
if (workspaceId) {
promoteRecentMention(workspaceId, mention);
}
// Track within the loop so a duplicate-in-batch can't double-insert.
editorDocKeys.add(key);
}
// Atom is reconciled by ``handleEditorChange`` via the editor's
// onChange — no second write path here.
setMentionQuery("");
setSuggestionAnchorPoint(null);
},
[workspaceId]
);
useEffect(() => {
const editor = editorRef.current;
const nextDocsMap = new Map(mentionedDocuments.map((doc) => [getMentionDocKey(doc), doc]));
const prevDocsMap = prevMentionedDocsRef.current;
if (!editor) {
prevMentionedDocsRef.current = nextDocsMap;
return;
}
const editorKeys = new Set(editor.getMentionedDocuments().map(getMentionDocKey));
for (const [key, doc] of nextDocsMap) {
if (prevDocsMap.has(key) || editorKeys.has(key)) continue;
editor.insertMentionChip(doc, { removeTriggerText: false });
}
for (const [key, doc] of prevDocsMap) {
if (!nextDocsMap.has(key)) {
editor.removeDocumentChip(
doc.id,
doc.kind === "doc" ? doc.document_type : undefined,
doc.kind,
doc.kind === "connector" ? doc.connector_type : undefined
);
}
}
prevMentionedDocsRef.current = nextDocsMap;
}, [mentionedDocuments]);
return (
{suggestionAnchorPoint ? (
<>
{
setShowDocumentPopover(false);
setMentionQuery("");
setSuggestionAnchorPoint(null);
}}
initialSelectedDocuments={mentionedDocuments}
externalSearch={mentionQuery}
/>
) : null}
{suggestionAnchorPoint ? (
<>
{
setShowPromptPicker(false);
setActionQuery("");
setSuggestionAnchorPoint(null);
}}
externalSearch={actionQuery}
/>
) : null}
);
};
/**
* Full-color brand marks for the platform-native scraper APIs (web, Google
* Search, Google Maps, Reddit, YouTube) available in this workspace, shown beside the
* composer "+" so the user can see these native endpoints are connected. Laid
* out as the same overlapping avatar group used by the connect-tools tray
* from the composer actions. The capability registry is the source of truth;
* icons are display-only with a status tooltip.
*/
const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) => {
const { data: capabilities } = useScraperCapabilities(workspaceId);
const platforms = useMemo(() => {
if (!capabilities?.length) return [];
const seen = new Set();
const result: PlaygroundPlatform[] = [];
for (const cap of capabilities) {
const platformId = cap.name.split(".")[0];
if (seen.has(platformId)) continue;
seen.add(platformId);
const platform = findPlatform(platformId);
if (platform) result.push(platform);
}
return result;
}, [capabilities]);
if (platforms.length === 0) return null;
return (