@case-framework/survey-assistant 0.4.0 → 0.6.0

package/dist/ui.mjs

@@ -1,10 +1,11 @@
 "use client";
 import { jt as parseSurveyAssistantError, l as surveyAssistantTurnFinalSchema, n as SURVEY_ASSISTANT_TURN_FINAL_PART_TYPE } from "./protocol-DJUP4gc0.mjs";
-import { f as unwrapSurveyAssistantToolOutput, i as createSurveyAssistantThreadClient, l as parseSurveyChangeSet, p as isSurveyAssistantTurnActive, r as useSurveyAssistantModelCatalog, t as useSurveyAssistantSession } from "./react-CY6N7lVi.mjs";
-import { o as connectSurveyAssistantThreadLauncher } from "./controller-proxy-jWIPOZAv.mjs";
+import { n as isSurveyAssistantAttachmentMediaType, t as SURVEY_ASSISTANT_ATTACHMENT_MEDIA_TYPES } from "./attachments-B0hg3vpT.mjs";
+import { f as unwrapSurveyAssistantToolOutput, i as createSurveyAssistantThreadClient, l as parseSurveyChangeSet, p as isSurveyAssistantTurnActive, r as useSurveyAssistantModelCatalog, t as useSurveyAssistantSession } from "./react-Dqlmasrs.mjs";
+import { o as connectSurveyAssistantThreadLauncher } from "./controller-proxy-DMTqer6T.mjs";
 import { getToolName, isFileUIPart, isReasoningUIPart, isToolUIPart } from "ai";
 import { createContext, createElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Collapsible, Select, Slot } from "radix-ui";
+import { Collapsible, Select, Slot, Tooltip } from "radix-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -123,9 +124,11 @@ const surveyAssistantEnMessages = {
 	},
 	input: {
 		placeholder: "Ask about the survey...",
-		attachFiles: "Attach files",
-		dropFiles: "Drop images or PDFs to attach",
-		unsupportedFiles: "Unsupported file type: {filenames}",
+		attachFiles: "Attach a PDF, PNG, or JPG",
+		dropFiles: "Drop a PDF, PNG, or JPG to attach",
+		supportedFiles: "Supported: PDF, PNG, and JPG. Export Word documents as PDF.",
+		unsupportedFiles: "{filenames} can't be attached. Supported formats: PDF, PNG, and JPG.",
+		wordFilesUnsupported: "Word documents aren't supported. Export {filenames} as PDF, then attach the PDF.",
 		removeFile: "Remove {filename}",
 		send: "Send message",
 		stop: "Stop response",
@@ -338,9 +341,11 @@ const surveyAssistantNlMessages = {
 	},
 	input: {
 		placeholder: "Vraag iets over de survey...",
-		attachFiles: "Bestanden toevoegen",
-		dropFiles: "Sleep afbeeldingen of pdf's hierheen om ze toe te voegen",
-		unsupportedFiles: "Niet-ondersteund bestandstype: {filenames}",
+		attachFiles: "Een pdf-, png- of jpg-bestand toevoegen",
+		dropFiles: "Sleep een pdf-, png- of jpg-bestand hierheen om het toe te voegen",
+		supportedFiles: "Ondersteund: pdf, png en jpg. Exporteer Word-documenten als pdf.",
+		unsupportedFiles: "{filenames} kan niet worden toegevoegd. Ondersteunde formaten: pdf, png en jpg.",
+		wordFilesUnsupported: "Word-documenten worden niet ondersteund. Exporteer {filenames} als pdf en voeg daarna de pdf toe.",
 		removeFile: "{filename} verwijderen",
 		send: "Bericht verzenden",
 		stop: "Antwoord stoppen",
@@ -771,9 +776,39 @@ const MessageContent = ({ children, className, ...props }) => /* @__PURE__ */ js
 	children
 });
 //#endregion
+//#region src/ui/internal/tooltip.tsx
+const TooltipProvider = Tooltip.Provider;
+const Tooltip$1 = Tooltip.Root;
+const TooltipTrigger = Tooltip.Trigger;
+const TooltipContent = ({ className, sideOffset = 6, ...props }) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx("div", {
+	className: "case-survey-assistant case-survey-assistant-portal",
+	children: /* @__PURE__ */ jsx(Tooltip.Content, {
+		className: cn("z-50 max-w-64 rounded-md bg-foreground px-3 py-1.5 text-center text-background text-xs shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className),
+		sideOffset,
+		...props
+	})
+}) });
+//#endregion
 //#region src/ui/internal/prompt-input.tsx
-const SUPPORTED_FILE_ACCEPT = "image/*,application/pdf";
-const isSupportedFile = (file) => file.type.startsWith("image/") || file.type === "application/pdf";
+const SUPPORTED_FILE_ACCEPT = [
+	".pdf",
+	".png",
+	".jpg",
+	".jpeg",
+	...SURVEY_ASSISTANT_ATTACHMENT_MEDIA_TYPES
+].join(",");
+const WORD_DOCUMENT_MEDIA_TYPES = new Set([
+	"application/msword",
+	"application/vnd.ms-word",
+	"application/vnd.ms-word.document.macroenabled.12",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.template"
+]);
+const getUnsupportedAttachmentKind = ({ name, type }) => {
+	if (isSurveyAssistantAttachmentMediaType(type)) return null;
+	if (WORD_DOCUMENT_MEDIA_TYPES.has(type.toLowerCase()) || /\.(?:doc|docm|docx|dot|dotm|dotx)$/i.test(name)) return "word";
+	return "other";
+};
 const formatFileSize = (size) => {
 	if (size < 1024 * 1024) return `${Math.max(1, Math.round(size / 1024))} KB`;
 	return `${(size / (1024 * 1024)).toFixed(size < 10 * 1024 * 1024 ? 1 : 0)} MB`;
@@ -801,7 +836,7 @@ const PromptInput = ({ attachmentsDisabled = false, children, className, onDragE
 	const [uncontrolledValue, setUncontrolledValue] = useState("");
 	const [files, setFiles] = useState([]);
 	const [isDraggingFiles, setIsDraggingFiles] = useState(false);
-	const [unsupportedFileNames, setUnsupportedFileNames] = useState([]);
+	const [unsupportedFiles, setUnsupportedFiles] = useState([]);
 	const fileDragDepthRef = useRef(0);
 	const t = useSurveyAssistantTranslation();
 	const value = controlledValue ?? uncontrolledValue;
@@ -811,10 +846,16 @@ const PromptInput = ({ attachmentsDisabled = false, children, className, onDragE
 	}, [controlledValue, onValueChange]);
 	const addFiles = useCallback((fileList) => {
 		const nextFiles = Array.from(fileList ?? []);
-		const supportedFiles = nextFiles.filter(isSupportedFile);
-		const unsupportedFiles = nextFiles.filter((file) => !isSupportedFile(file));
+		const supportedFiles = nextFiles.filter((file) => getUnsupportedAttachmentKind(file) === null);
+		const rejectedFiles = nextFiles.flatMap((file) => {
+			const kind = getUnsupportedAttachmentKind(file);
+			return kind ? [{
+				kind,
+				name: file.name
+			}] : [];
+		});
 		setFiles((currentFiles) => [...currentFiles, ...supportedFiles]);
-		setUnsupportedFileNames(unsupportedFiles.map((file) => file.name));
+		setUnsupportedFiles(rejectedFiles);
 	}, []);
 	const removeFile = useCallback((index) => {
 		setFiles((currentFiles) => currentFiles.filter((_, fileIndex) => fileIndex !== index));
@@ -825,12 +866,12 @@ const PromptInput = ({ attachmentsDisabled = false, children, className, onDragE
 		files,
 		addFiles,
 		removeFile,
-		unsupportedFileNames
+		unsupportedFiles
 	}), [
 		addFiles,
 		files,
 		removeFile,
-		unsupportedFileNames,
+		unsupportedFiles,
 		value
 	]);
 	const handleSubmit = useCallback(async (event) => {
@@ -843,7 +884,7 @@ const PromptInput = ({ attachmentsDisabled = false, children, className, onDragE
 		}, event) === false) return;
 		setValue("");
 		setFiles([]);
-		setUnsupportedFileNames([]);
+		setUnsupportedFiles([]);
 	}, [
 		files,
 		onSubmit,
@@ -903,39 +944,48 @@ const PromptInput = ({ attachmentsDisabled = false, children, className, onDragE
 	});
 };
 const PromptInputBody = ({ children, className, ...props }) => {
-	const { files, removeFile, unsupportedFileNames } = usePromptInput();
+	const { files, removeFile, unsupportedFiles } = usePromptInput();
 	const t = useSurveyAssistantTranslation();
+	const unsupportedWordFileNames = unsupportedFiles.filter((file) => file.kind === "word").map((file) => file.name);
+	const unsupportedOtherFileNames = unsupportedFiles.filter((file) => file.kind === "other").map((file) => file.name);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("contents", className),
 		...props,
-		children: [children, (files.length > 0 || unsupportedFileNames.length > 0) && /* @__PURE__ */ jsxs("div", {
+		children: [children, (files.length > 0 || unsupportedFiles.length > 0) && /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap gap-2 px-3 pb-2",
-			children: [files.map((file, index) => /* @__PURE__ */ jsxs("div", {
-				className: "inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted px-2 py-1 text-xs",
-				children: [
-					/* @__PURE__ */ jsx(FileIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
-					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate",
-						children: file.name
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-muted-foreground",
-						children: formatFileSize(file.size)
-					}),
-					/* @__PURE__ */ jsxs("button", {
-						className: "shrink-0 rounded-sm text-muted-foreground hover:text-foreground",
-						onClick: () => removeFile(index),
-						type: "button",
-						children: [/* @__PURE__ */ jsx(XIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", {
-							className: "sr-only",
-							children: t("input.removeFile", { filename: file.name })
-						})]
-					})
-				]
-			}, `${file.name}-${file.lastModified}-${index}`)), unsupportedFileNames.length > 0 && /* @__PURE__ */ jsx("div", {
-				className: "text-destructive text-xs",
-				children: t("input.unsupportedFiles", { filenames: unsupportedFileNames.join(", ") })
-			})]
+			children: [
+				files.map((file, index) => /* @__PURE__ */ jsxs("div", {
+					className: "inline-flex max-w-full items-center gap-2 rounded-md border border-border bg-muted px-2 py-1 text-xs",
+					children: [
+						/* @__PURE__ */ jsx(FileIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: file.name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: formatFileSize(file.size)
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							className: "shrink-0 rounded-sm text-muted-foreground hover:text-foreground",
+							onClick: () => removeFile(index),
+							type: "button",
+							children: [/* @__PURE__ */ jsx(XIcon, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("input.removeFile", { filename: file.name })
+							})]
+						})
+					]
+				}, `${file.name}-${file.lastModified}-${index}`)),
+				unsupportedWordFileNames.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-destructive text-xs",
+					children: t("input.wordFilesUnsupported", { filenames: unsupportedWordFileNames.join(", ") })
+				}),
+				unsupportedOtherFileNames.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-destructive text-xs",
+					children: t("input.unsupportedFiles", { filenames: unsupportedOtherFileNames.join(", ") })
+				})
+			]
 		})]
 	});
 };
@@ -964,28 +1014,38 @@ const PromptInputFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div"
 const PromptInputAttachmentButton = ({ accept = SUPPORTED_FILE_ACCEPT, className, disabled, onChange, ...props }) => {
 	const { addFiles } = usePromptInput();
 	const t = useSurveyAssistantTranslation();
-	return /* @__PURE__ */ jsxs("label", {
-		className: cn("inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", disabled && "pointer-events-none cursor-default opacity-50", className),
-		children: [
-			/* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" }),
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: t("input.attachFiles")
-			}),
-			/* @__PURE__ */ jsx("input", {
-				accept,
-				className: "sr-only",
-				disabled,
-				multiple: true,
-				onChange: (event) => {
-					addFiles(event.currentTarget.files);
-					onChange?.(event);
-					event.currentTarget.value = "";
-				},
-				type: "file",
-				...props
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delayDuration: 300,
+		children: /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("label", {
+				className: cn("inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", disabled && "pointer-events-none cursor-default opacity-50", className),
+				children: [
+					/* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: t("input.attachFiles")
+					}),
+					/* @__PURE__ */ jsx("input", {
+						accept,
+						className: "sr-only",
+						disabled,
+						multiple: true,
+						onChange: (event) => {
+							addFiles(event.currentTarget.files);
+							onChange?.(event);
+							event.currentTarget.value = "";
+						},
+						type: "file",
+						...props
+					})
+				]
 			})
-		]
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			align: "start",
+			side: "top",
+			children: t("input.supportedFiles")
+		})] })
 	});
 };
 const PromptInputSubmit = ({ className, status, onStop, onClick, ...props }) => {
@@ -1353,7 +1413,7 @@ const Response = ({ children, className, controls = false, plugins, ...props })
 		code: plugins?.code ?? codeHighlighter
 	}), [plugins]);
 	return /* @__PURE__ */ jsx(Streamdown, {
-		className: cn("leading-6", "*:first:mt-0 *:last:mb-0", "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2", "[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_h1]:mb-2 [&_h1]:mt-4 [&_h1]:text-base [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-sm [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-sm [&_h3]:font-semibold", "[&_li]:my-1 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_p]:my-2", "**:data-[streamdown=code-block]:my-3 **:data-[streamdown=code-block]:gap-0 **:data-[streamdown=code-block]:overflow-hidden **:data-[streamdown=code-block]:rounded-lg **:data-[streamdown=code-block]:bg-muted/40 **:data-[streamdown=code-block]:p-0", "**:data-[streamdown=code-block-header]:px-2", "**:data-[streamdown=code-block-body]:rounded-none **:data-[streamdown=code-block-body]:border-0 **:data-[streamdown=code-block-body]:border-t **:data-[streamdown=code-block-body]:bg-background **:data-[streamdown=code-block-body]:p-3", "[&_strong]:font-semibold", "[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold", className),
+		className: cn("leading-6", "*:first:mt-0 *:last:mb-0", "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2", "[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_h1]:mb-2 [&_h1]:mt-4 [&_h1]:text-base [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-4 [&_h2]:text-sm [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-sm [&_h3]:font-semibold", "[&_li]:my-1 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_p]:my-2", "**:data-[streamdown=inline-code]:text-[length:inherit] **:data-[streamdown=inline-code]:leading-[inherit]", "**:data-[streamdown=code-block]:my-3 **:data-[streamdown=code-block]:gap-0 **:data-[streamdown=code-block]:overflow-hidden **:data-[streamdown=code-block]:rounded-lg **:data-[streamdown=code-block]:bg-muted/40 **:data-[streamdown=code-block]:p-0", "**:data-[streamdown=code-block-header]:px-2", "**:data-[streamdown=code-block-body]:rounded-none **:data-[streamdown=code-block-body]:border-0 **:data-[streamdown=code-block-body]:border-t **:data-[streamdown=code-block-body]:bg-background **:data-[streamdown=code-block-body]:p-3", "[&_strong]:font-semibold", "[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold", className),
 		controls,
 		plugins: responsePlugins,
 		...props,
@@ -1408,6 +1468,13 @@ const getPersistedMessageTurnStatus = (message) => {
 	}
 };
 //#endregion
+//#region src/ui/initial-thread-load.ts
+const getSurveyAssistantInitialThreadLoadState = ({ error, hasSelectedThread, loading }) => {
+	if (loading) return "loading";
+	if (!hasSelectedThread) return error ? "error" : "loading";
+	return null;
+};
+//#endregion
 //#region src/ui/survey-assistant-panel.tsx
 const isRootSurveyItem = (item) => typeof item.config === "object" && item.config !== null && item.config.isRoot === true;
 const getAssistantEmptyStateContext = (controller) => {
@@ -1902,7 +1969,7 @@ const SurveyAssistantHeaderIdentity = ({ indicatorClassName, status, title }) =>
 		})]
 	})]
 });
-const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = false, hasEarlierMessages, initialLaunch, initialMessages, modelId, models, onInitialLaunchHandled, onModelChange, onFirstSubmit, onLoadEarlierMessages, onTurnSettled, onApplyReceipts, onSettleApply, onReviewChangeSets, onTurnActiveChange, resourceId, surveyId, threadControls, threadId, threadTitle }) => {
+const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = false, focusPromptOnMount = false, hasEarlierMessages, initialLaunch, initialMessages, modelId, models, onInitialLaunchHandled, onModelChange, onFirstSubmit, onLoadEarlierMessages, onTurnSettled, onApplyReceipts, onSettleApply, onReviewChangeSets, onTurnActiveChange, resourceId, surveyId, threadControls, threadId, threadTitle }) => {
 	const t = useSurveyAssistantTranslation();
 	const emptyStateContext = getAssistantEmptyStateContext(controller);
 	const assistantQuickPrompts = getAssistantQuickPrompts(t, emptyStateContext);
@@ -2187,6 +2254,7 @@ const SurveyAssistantChatPanel = ({ api, applyPolicy, controller, embedded = fal
 					onSubmit: handleSubmit,
 					status,
 					textareaClassName: "min-h-11 max-h-28 px-3 pt-2.5 pb-1.5 transition-colors disabled:placeholder:text-muted-foreground/60",
+					textareaProps: { autoFocus: focusPromptOnMount },
 					textareaRef: promptTextareaRef
 				})
 			})
@@ -2230,8 +2298,10 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 	const [editingTitle, setEditingTitle] = useState("");
 	const [threadError, setThreadError] = useState(null);
 	const [loadingThread, setLoadingThread] = useState(true);
+	const [threadLoadAttempt, setThreadLoadAttempt] = useState(0);
 	const [assistantTurnActive, setAssistantTurnActive] = useState(false);
 	const [initialLaunch, setInitialLaunch] = useState();
+	const [promptFocusThreadId, setPromptFocusThreadId] = useState();
 	const historyControlsRef = useRef(null);
 	const loadingAllThreadsRef = useRef(false);
 	const selectModel = useCallback((modelId) => {
@@ -2239,6 +2309,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		onModelChange(modelId);
 	}, [models, onModelChange]);
 	const selectThread = useCallback(async (thread, reportError = true) => {
+		setPromptFocusThreadId(void 0);
 		setLoadingThread(true);
 		setThreadError(null);
 		try {
@@ -2265,6 +2336,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		setThreadError(null);
 		try {
 			const thread = await threadClient.create(launch?.title);
+			setPromptFocusThreadId(launch ? void 0 : thread.id);
 			setThreads((current) => mergeThreads(current, [thread]));
 			setSelectedThread(thread);
 			setInitialMessages([]);
@@ -2317,8 +2389,14 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		selectThread,
 		storageKey,
 		t,
-		threadClient
+		threadClient,
+		threadLoadAttempt
 	]);
+	const retryInitialThreadLoad = useCallback(() => {
+		setThreadError(null);
+		setLoadingThread(true);
+		setThreadLoadAttempt((attempt) => attempt + 1);
+	}, []);
 	const loadOlderThreads = useCallback(async () => {
 		if (!nextThreadCursor || loadingOlderThreads) return;
 		setLoadingOlderThreads(true);
@@ -2543,6 +2621,13 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		commitEditingThread,
 		historyOpen
 	]);
+	useEffect(() => {
+		if (!loadingThread && selectedThread?.id === promptFocusThreadId) setPromptFocusThreadId(void 0);
+	}, [
+		loadingThread,
+		promptFocusThreadId,
+		selectedThread?.id
+	]);
 	useEffect(() => {
 		const handleFocus = () => {
 			refreshThreadList(false);
@@ -2550,20 +2635,49 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		window.addEventListener("focus", handleFocus);
 		return () => window.removeEventListener("focus", handleFocus);
 	}, [refreshThreadList]);
-	if (loadingThread || !selectedThread) return /* @__PURE__ */ jsxs("aside", {
-		className: cn("flex h-full min-h-0 flex-col overflow-visible bg-background", !embedded && "rounded-xl border border-border shadow-sm"),
-		children: [/* @__PURE__ */ jsx("header", {
-			className: "box-content flex h-9 shrink-0 items-center border-b border-border bg-background px-2.5",
-			children: /* @__PURE__ */ jsx(SurveyAssistantHeaderIdentity, {
-				indicatorClassName: "animate-pulse bg-blue-500",
-				status: t("panel.loadingChats"),
-				title: t("panel.title")
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1 items-center justify-center text-muted-foreground text-sm",
-			children: [/* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mr-2 size-4 animate-spin" }), t("panel.loadingChats")]
-		})]
+	const initialThreadLoadState = getSurveyAssistantInitialThreadLoadState({
+		error: threadError,
+		hasSelectedThread: Boolean(selectedThread),
+		loading: loadingThread
 	});
+	if (initialThreadLoadState || !selectedThread) {
+		const initialLoadFailed = initialThreadLoadState === "error";
+		return /* @__PURE__ */ jsxs("aside", {
+			className: cn("flex h-full min-h-0 flex-col overflow-visible bg-background", !embedded && "rounded-xl border border-border shadow-sm"),
+			children: [/* @__PURE__ */ jsx("header", {
+				className: "box-content flex h-9 shrink-0 items-center border-b border-border bg-background px-2.5",
+				children: /* @__PURE__ */ jsx(SurveyAssistantHeaderIdentity, {
+					indicatorClassName: initialLoadFailed ? "bg-destructive" : "animate-pulse bg-blue-500",
+					status: initialLoadFailed ? t("panel.controlsUnavailable") : t("panel.loadingChats"),
+					title: t("panel.title")
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-1 items-center justify-center p-6 text-sm",
+				children: initialLoadFailed ? /* @__PURE__ */ jsxs("div", {
+					className: "max-w-sm text-center",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "font-medium text-foreground",
+							children: t("panel.controlsUnavailable")
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-1 text-muted-foreground",
+							children: threadError
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: "mt-3 rounded-md border border-border bg-background px-3 py-1.5 font-medium text-foreground hover:bg-muted",
+							onClick: retryInitialThreadLoad,
+							type: "button",
+							children: t("errors.retry")
+						})
+					]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(LoaderCircleIcon, { className: "mr-2 size-4 animate-spin" }), t("panel.loadingChats")]
+				})
+			})]
+		});
+	}
 	const normalizedThreadSearch = threadSearch.trim().toLocaleLowerCase();
 	const visibleThreads = normalizedThreadSearch ? threads.filter((thread) => thread.title.toLocaleLowerCase().includes(normalizedThreadSearch)) : threads;
 	const threadControls = /* @__PURE__ */ jsxs("div", {
@@ -2685,6 +2799,7 @@ const SurveyAssistantPanelContent = ({ embedded = false, modelId, models = [], o
 		children: [/* @__PURE__ */ createElement(SurveyAssistantChatPanel, {
 			...sessionProps,
 			embedded,
+			focusPromptOnMount: selectedThread.id === promptFocusThreadId,
 			hasEarlierMessages: Boolean(nextMessageCursor),
 			initialLaunch: initialLaunch?.input,
 			initialMessages,