feat(web): enhance composer suggestion skeleton, improve document mention picker loading states & improved LLM prompt block for connector mentions

surfsense_backend/app/tasks/chat/stream_new_chat.py

@@ -1401,14 +1401,15 @@ async def stream_new_chat(
                     continue
                 connector_lines.append(
                     f'  - connector_id={connector_id}, connector_type="{connector_type}", '
-                    f'account="{account_name or ""}"'
+                    f'account_name="{account_name or ""}"'
                 )
             if connector_lines:
                 context_parts.append(
                     "<mentioned_connectors>\n"
                     "The user selected these exact connector accounts with @. "
-                    "For read, write, or HITL tool calls involving these services, "
+                    "These entries are selection metadata, not retrieved connector content. "
-                    "prefer the matching connector_id instead of guessing from available accounts:\n"
+                    "When a connector-backed tool needs an account, use the matching "
+                    "connector_id from this list if the tool supports connector_id:\n"
                     + "\n".join(connector_lines)
                     + "\n</mentioned_connectors>"
                 )

surfsense_web/components/new-chat/composer-suggestion-popup.tsx

@@ -31,7 +31,7 @@ function ComposerSuggestionPopoverContent({
 				onCloseAutoFocus?.(event);
 			}}
 			className={cn(
-				"w-[232px] overflow-hidden rounded-md border border-popover-border bg-popover p-0 text-popover-foreground shadow-md sm:w-[264px]",
+				"w-[232px] select-none overflow-hidden rounded-md border border-popover-border bg-popover p-0 text-popover-foreground shadow-md sm:w-[264px]",
 				"data-[state=open]:!animate-none data-[state=closed]:!animate-none data-[state=open]:!duration-0 data-[state=closed]:!duration-0",
 				className
 			)}
@@ -145,18 +145,24 @@ function ComposerSuggestionMessage({
 	);
 }
 
-function ComposerSuggestionSkeleton() {
+function ComposerSuggestionSkeleton({
+	rows = 5,
+	mobileRows = 3,
+}: {
+	rows?: number;
+	mobileRows?: number;
+}) {
 	return (
 		<div className="px-1.5 py-1">
 			<div className="px-2 py-1">
 				<Skeleton className="h-3.5 w-20" />
 			</div>
-			{["a", "b", "c", "d", "e"].map((id, index) => (
+			{Array.from({ length: rows }, (_, index) => `skeleton-row-${index}`).map((id, index) => (
 				<div
 					key={id}
 					className={cn(
 						"flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left",
-						index >= 3 && "hidden sm:flex"
+						index >= mobileRows && "hidden sm:flex"
 					)}
 				>
 					<span className="shrink-0">

surfsense_web/components/new-chat/document-mention-picker.tsx

@@ -438,7 +438,7 @@ export const DocumentMentionPicker = forwardRef<
 		() => new Set(initialSelectedDocuments.map((d) => getMentionDocKey(d))),
 		[initialSelectedDocuments]
 	);
-	const showSurfsenseDocsRootRef = useRef((surfsenseDocs?.items?.length ?? 0) > 0);
+	const showSurfsenseDocsRoot = surfsenseDocsList.length > 0;
 
 	const selectMention = useCallback(
 		(mention: MentionedDocumentInfo) => {
@@ -463,7 +463,7 @@ export const DocumentMentionPicker = forwardRef<
 	const rootNodes = useMemo<ComposerSuggestionNode<ResourceNodeValue>[]>(
 		() => {
 			const nodes: ComposerSuggestionNode<ResourceNodeValue>[] = [...recentRootNodes];
-			if (showSurfsenseDocsRootRef.current) {
+			if (showSurfsenseDocsRoot) {
 				nodes.push({
 					id: "surfsense-docs",
 					label: "SurfSense Docs",
@@ -496,7 +496,7 @@ export const DocumentMentionPicker = forwardRef<
 			);
 			return nodes;
 		},
-		[activeConnectors.length, recentRootNodes]
+		[activeConnectors.length, recentRootNodes, showSurfsenseDocsRoot]
 	);
 
 	const searchNodes = useMemo<ComposerSuggestionNode<ResourceNodeValue>[]>(() => {
@@ -680,11 +680,18 @@ export const DocumentMentionPicker = forwardRef<
 		[canLoadMoreDocuments, hasMore, isLoadingMore, loadNextPage]
 	);
 
+	const isRootBrowseView = !hasSearch && view.kind === "root";
+	const isVisibleViewLoading = hasSearch
+		? isTitleSearchLoading || isSurfsenseDocsLoading || isConnectorsLoading
+		: view.kind === "surfsense-docs"
+			? isSurfsenseDocsLoading
+			: view.kind === "files-folders"
+				? isTitleSearchLoading
+				: view.kind === "connectors" || view.kind === "connector-type"
+					? isConnectorsLoading
+					: false;
 	const actualLoading =
-		(isTitleSearchLoading || isSurfsenseDocsLoading || isConnectorsLoading) &&
+		isVisibleViewLoading && !isSingleCharSearch && visibleNodes.length === 0 && !isRootBrowseView;
-		!isSingleCharSearch &&
-		visibleNodes.length === 0 &&
-		(view.kind === "root" || hasSearch);
 
 	const title =
 		hasSearch || view.kind === "root"
@@ -703,9 +710,10 @@ export const DocumentMentionPicker = forwardRef<
 			onScroll={handleScroll}
 			role="listbox"
 			tabIndex={-1}
+			className={isRootBrowseView ? "max-h-none overflow-visible sm:max-h-none" : undefined}
 		>
 			{actualLoading ? (
-				<ComposerSuggestionSkeleton />
+				<ComposerSuggestionSkeleton rows={8} mobileRows={8} />
 			) : (
 				<ComposerSuggestionGroup>
 					{title ? (

surfsense_web/components/new-chat/prompt-picker.tsx

@@ -127,7 +127,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 	return (
 		<ComposerSuggestionList ref={scrollContainerRef}>
 			{isLoading ? (
-				<ComposerSuggestionSkeleton />
+				<ComposerSuggestionSkeleton rows={8} mobileRows={8} />
 			) : isError ? (
 				<ComposerSuggestionMessage variant="destructive">Failed to load prompts</ComposerSuggestionMessage>
 			) : filtered.length === 0 ? (