@case-framework/survey-assistant 0.5.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,