@parallelworks/ui 0.19.0 → 0.19.1

package/dist/ai/components/AttachmentManager.js

@@ -0,0 +1,144 @@
+import { DownloadFileIcon, FileIcon, TrashIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { formatFileSize } from "../utils.js";
+import { attachmentsPageKey } from "./attachmentKeys.js";
+import cx from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DateTime } from "luxon";
+import useSWRInfinite from "swr/infinite";
+//#region src/ai/components/AttachmentManager.tsx
+function triggerDownload(url, filename) {
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+}
+function AttachmentManager() {
+	const { adapter, notify } = useChat();
+	const t = useChatConfig().strings.attachmentManager;
+	const attachmentsAdapter = adapter.attachments;
+	const [deleting, setDeleting] = useState(null);
+	const [thumbnails, setThumbnails] = useState({});
+	const markThumbnail = useCallback((attachmentId, state) => {
+		setThumbnails((previous) => previous[attachmentId] === state ? previous : {
+			...previous,
+			[attachmentId]: state
+		});
+	}, []);
+	const { data: pages, size, setSize, isLoading, isValidating, mutate } = useSWRInfinite(attachmentsAdapter ? attachmentsPageKey : () => null, ([, cursor]) => attachmentsAdapter.list({
+		limit: 24,
+		cursor
+	}));
+	const attachments = useMemo(() => pages?.flatMap((page) => page?.attachments ?? []) ?? [], [pages]);
+	const handleDelete = useCallback(async (attachmentId) => {
+		if (!attachmentsAdapter) return;
+		setDeleting(attachmentId);
+		try {
+			await attachmentsAdapter.remove(attachmentId);
+			await mutate();
+		} catch (error) {
+			notify.error(error instanceof Error ? error.message : String(error));
+		} finally {
+			setDeleting(null);
+		}
+	}, [
+		attachmentsAdapter,
+		mutate,
+		notify
+	]);
+	if (!attachmentsAdapter) return null;
+	const hasMore = pages?.[pages.length - 1]?.hasMore ?? false;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full bg-(--theme-app-bg)",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex-1 flex flex-col min-w-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "max-w-4xl mx-auto",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "text-2xl font-semibold mb-6 text-(--theme-panel)",
+						children: t.title
+					}), isLoading && attachments.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center py-12",
+						children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-current border-t-transparent theme-muted-text" })
+					}) : attachments.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "text-center theme-muted-text py-12 text-sm",
+						children: t.empty
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",
+						children: attachments.map((att) => {
+							const downloadUrl = attachmentsAdapter.downloadUrl(att.id);
+							const isDeleting = deleting === att.id;
+							const thumbnail = thumbnails[att.id];
+							const showThumbnail = att.contentType?.startsWith("image/") && thumbnail !== "broken";
+							const openProps = attachmentsAdapter.onOpen ? {
+								onClick: () => attachmentsAdapter.onOpen?.(att),
+								role: "button",
+								style: { cursor: "pointer" }
+							} : {};
+							return /* @__PURE__ */ jsxs("div", {
+								className: cx("rounded-lg border theme-border overflow-hidden", isDeleting && "opacity-50 pointer-events-none"),
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "relative aspect-square bg-(--theme-muted-panel-bg) flex items-center justify-center",
+									...openProps,
+									children: [/* @__PURE__ */ jsx(FileIcon, { className: "w-8 h-8 theme-muted-text" }), showThumbnail && /* @__PURE__ */ jsx("img", {
+										src: downloadUrl,
+										alt: att.filename || "Image",
+										className: cx("absolute inset-0 w-full h-full object-cover", thumbnail !== "loaded" && "opacity-0"),
+										loading: "lazy",
+										onLoad: () => markThumbnail(att.id, "loaded"),
+										onError: () => markThumbnail(att.id, "broken")
+									})]
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "p-3 text-xs bg-(--theme-panel-bg) flex items-center justify-between gap-1",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "truncate font-medium text-(--theme-panel)",
+											children: att.filename || "File"
+										}), /* @__PURE__ */ jsxs("p", {
+											className: "truncate theme-muted-text",
+											children: [att.size ? formatFileSize(att.size) : "", att.uploadedAt && /* @__PURE__ */ jsxs(Fragment$1, { children: [att.size ? " · " : "", DateTime.fromISO(att.uploadedAt).toRelative()] })]
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-0.5 flex-shrink-0",
+										children: [/* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => triggerDownload(downloadUrl, att.filename || "File"),
+											className: "p-1.5 rounded-lg hover:theme-hover theme-muted-text transition-colors",
+											title: t.download,
+											children: /* @__PURE__ */ jsx(DownloadFileIcon, { className: "w-4 h-4" })
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => handleDelete(att.id),
+											disabled: isDeleting,
+											className: "p-1.5 rounded-lg hover:bg-red-500/15 theme-muted-text hover:text-red-600 transition-colors",
+											title: t.delete,
+											children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-4 h-4" })
+										})]
+									})]
+								})]
+							}, att.id);
+						})
+					}), hasMore && /* @__PURE__ */ jsx("div", {
+						className: "flex justify-center mt-8",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setSize(size + 1),
+							disabled: isValidating,
+							className: "px-6 py-3 text-sm rounded-lg theme-muted-panel hover:theme-hover transition-colors disabled:opacity-50",
+							children: isValidating ? t.loading : t.loadMore
+						})
+					})] })]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { AttachmentManager as default };

package/dist/ai/components/AttachmentUpload.js

@@ -0,0 +1,179 @@
+import { AddIcon, FileSolidIcon, ImageSolidIcon, PdfSolidIcon, TrashIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { formatFileSize } from "../utils.js";
+import { ATTACHMENTS_INFINITE_KEY } from "./attachmentKeys.js";
+import cx from "classnames";
+import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mutate } from "swr";
+//#region src/ai/components/AttachmentUpload.tsx
+var DEFAULT_MAX_FILE_SIZE = 26214400;
+var DEFAULT_MAX_FILES = 10;
+function getFileIcon(mimeType) {
+	if (!mimeType) return FileSolidIcon;
+	if (mimeType.startsWith("image/")) return ImageSolidIcon;
+	if (mimeType === "application/pdf") return PdfSolidIcon;
+	return FileSolidIcon;
+}
+var AttachmentUpload = forwardRef(function AttachmentUpload({ conversationId, attachments, onAttachmentsChange, disabled = false, maxFiles = DEFAULT_MAX_FILES, maxFileSize = DEFAULT_MAX_FILE_SIZE }, ref) {
+	const { adapter, notify } = useChat();
+	const t = useChatConfig().strings.attachmentUpload;
+	const [isDragging, setIsDragging] = useState(false);
+	const fileInputRef = useRef(null);
+	const validateFile = useCallback((file) => {
+		if (file.size > maxFileSize) return t.fileTooLarge(formatFileSize(maxFileSize));
+		if (attachments.length >= maxFiles) return t.maxFilesAllowed(maxFiles);
+		return null;
+	}, [
+		attachments.length,
+		maxFileSize,
+		maxFiles,
+		t
+	]);
+	const uploadFile = useCallback(async (file) => {
+		if (!adapter.attachments) return null;
+		try {
+			const uploaded = await adapter.attachments.upload(file, conversationId);
+			await mutate(ATTACHMENTS_INFINITE_KEY);
+			return {
+				id: uploaded.id,
+				filename: uploaded.filename,
+				mimeType: uploaded.contentType,
+				size: uploaded.size,
+				uploaded: true
+			};
+		} catch (error) {
+			return {
+				file,
+				filename: file.name,
+				mimeType: file.type,
+				size: file.size,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}, [adapter, conversationId]);
+	const handleFiles = useCallback(async (files) => {
+		const fileArray = Array.from(files);
+		const newAttachments = [];
+		for (const file of fileArray) {
+			const error = validateFile(file);
+			if (error) {
+				notify.error(error);
+				continue;
+			}
+			const pendingAttachment = {
+				file,
+				filename: file.name,
+				mimeType: file.type,
+				size: file.size,
+				uploading: true
+			};
+			newAttachments.push(pendingAttachment);
+		}
+		onAttachmentsChange([...attachments, ...newAttachments]);
+		const uploaded = await Promise.all(newAttachments.map(async (a) => {
+			if (a.file) return uploadFile(a.file);
+			return a;
+		}));
+		onAttachmentsChange(attachments.concat(uploaded.filter((a) => a !== null)));
+	}, [
+		attachments,
+		notify,
+		onAttachmentsChange,
+		uploadFile,
+		validateFile
+	]);
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(true);
+	}, []);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(false);
+	}, []);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		setIsDragging(false);
+		if (e.dataTransfer.files.length > 0) handleFiles(e.dataTransfer.files);
+	}, [handleFiles]);
+	const handleInputChange = useCallback((e) => {
+		if (e.target.files && e.target.files.length > 0) handleFiles(e.target.files);
+		e.target.value = "";
+	}, [handleFiles]);
+	const handleRemove = useCallback((index) => {
+		onAttachmentsChange(attachments.filter((_, i) => i !== index));
+	}, [attachments, onAttachmentsChange]);
+	useImperativeHandle(ref, () => ({ addFiles: handleFiles }), [handleFiles]);
+	const handleClick = () => {
+		fileInputRef.current?.click();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+		ref: fileInputRef,
+		type: "file",
+		multiple: true,
+		onChange: handleInputChange,
+		disabled,
+		className: "hidden",
+		accept: "image/*,.pdf,.txt,.csv,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [attachments.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2",
+			children: attachments.map((attachment, index) => {
+				const Icon = getFileIcon(attachment.mimeType);
+				return /* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-center gap-2 px-2 py-1 rounded border theme-border theme-muted-panel", attachment.error && "border-red-500"),
+					children: [
+						/* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 theme-muted-text" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-sm truncate max-w-[150px] text-(--theme-app)",
+							children: attachment.filename
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs theme-muted-text",
+							children: formatFileSize(attachment.size)
+						}),
+						attachment.uploading && /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-blue-500 animate-pulse",
+							children: "Uploading..."
+						}),
+						attachment.error && /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-red-500",
+							title: attachment.error,
+							children: "⚠️"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => handleRemove(index),
+							className: "p-0.5 rounded hover:bg-red-500/10",
+							title: t.remove,
+							disabled,
+							children: /* @__PURE__ */ jsx(TrashIcon, { className: "w-3 h-3 text-red-500" })
+						})
+					]
+				}, attachment.id || index);
+			})
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+			className: cx("relative block w-full border-2 border-dashed rounded-lg p-3 text-center transition-colors", isDragging ? "border-blue-500 bg-blue-500/10" : "theme-border hover:theme-border", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			onClick: disabled ? void 0 : handleClick,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center justify-center gap-2 text-sm theme-muted-text",
+				children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: isDragging ? t.dropFilesHere : t.addFiles })]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "block text-xs theme-muted-text mt-1",
+				children: [
+					"Max ",
+					formatFileSize(maxFileSize),
+					" per file"
+				]
+			})]
+		})]
+	})] });
+});
+//#endregion
+export { AttachmentUpload as default };

package/dist/ai/components/BlockedGroupBanner.js

@@ -0,0 +1,29 @@
+import { WarningTriangleIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import { getProviderKeyFromModelId } from "./ModelSelector.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/BlockedGroupBanner.tsx
+function BlockedGroupBanner() {
+	const { strings } = useChatConfig();
+	const { providers, selectedProvider } = useChat();
+	if (!selectedProvider) return null;
+	const providerKey = getProviderKeyFromModelId(selectedProvider);
+	const provider = providers.find((p) => `${p.user}:${p.name}` === providerKey);
+	if (!provider?.groupBlocked || !provider.group) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
+		children: [/* @__PURE__ */ jsx(WarningTriangleIcon, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-amber-700",
+				children: strings.blockedGroup.title.replace("{group}", provider.group)
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-amber-600/80 mt-0.5",
+				children: strings.blockedGroup.message
+			})]
+		})]
+	});
+}
+//#endregion
+export { BlockedGroupBanner as default };

package/dist/ai/components/BranchNavigator.js

@@ -0,0 +1,57 @@
+import { AngleLeftIcon, AngleRightIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/BranchNavigator.tsx
+function findSiblings(messages, messageId) {
+	const message = messages.find((m) => m.id === messageId);
+	if (!message) return [];
+	return messages.filter((m) => m.parentId === message.parentId);
+}
+function BranchNavigator({ messages, currentMessageId, onNavigate }) {
+	const t = useChatConfig().strings.branch;
+	const siblings = useMemo(() => findSiblings(messages, currentMessageId), [messages, currentMessageId]);
+	if (siblings.length <= 1) return null;
+	const currentIndex = siblings.findIndex((m) => m.id === currentMessageId);
+	const hasPrev = currentIndex > 0;
+	const hasNext = currentIndex < siblings.length - 1;
+	const handlePrev = () => {
+		if (hasPrev) onNavigate(siblings[currentIndex - 1].id);
+	};
+	const handleNext = () => {
+		if (hasNext) onNavigate(siblings[currentIndex + 1].id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "inline-flex items-center gap-1 text-xs theme-muted-text",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handlePrev,
+				disabled: !hasPrev,
+				className: "p-0.5 rounded theme-hover disabled:opacity-30 disabled:cursor-not-allowed",
+				title: t.previous,
+				"aria-label": t.previous,
+				children: /* @__PURE__ */ jsx(AngleLeftIcon, { className: "w-3 h-3" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-[3ch] text-center",
+				children: [
+					currentIndex + 1,
+					"/",
+					siblings.length
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleNext,
+				disabled: !hasNext,
+				className: "p-0.5 rounded theme-hover disabled:opacity-30 disabled:cursor-not-allowed",
+				title: t.next,
+				"aria-label": t.next,
+				children: /* @__PURE__ */ jsx(AngleRightIcon, { className: "w-3 h-3" })
+			})
+		]
+	});
+}
+//#endregion
+export { BranchNavigator as default };

package/dist/ai/components/ChatEmptyState.js

@@ -0,0 +1,171 @@
+import { AddIcon, CloudIcon, TimesIcon, WarningTriangleIcon } from "../../icons.js";
+import { keyedByContent } from "../../components/keys.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import BlockedGroupBanner from "./BlockedGroupBanner.js";
+import { getGreeting } from "../core/greeting.js";
+import useDragDrop from "../core/useDragDrop.js";
+import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
+import DragOverlay from "./DragOverlay.js";
+import ChatInput from "./ChatInput.js";
+import cx from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ChatEmptyState.tsx
+function pickRandom(arr, count) {
+	return [...arr].sort(() => Math.random() - .5).slice(0, count);
+}
+function ChatEmptyState({ targetSession }) {
+	const { extraLinks, LinkComponent, slots, suggestedPrompts, strings } = useChatConfig();
+	const t = strings.emptyState;
+	const tInput = strings.input;
+	const { adapter, currentUser, models, loadProviders, loadConversations, sendMessage, isLoading, isLoadingModels, hasLoadedModels, clearCurrentConversation, setSelectedProvider, refreshModels } = useChat();
+	const [builtinGreeting] = useState(() => getGreeting(currentUser));
+	const greeting = t.greeting ?? builtinGreeting;
+	const [prompts] = useState(() => pickRandom(suggestedPrompts ?? [], 4));
+	const inputRef = useRef(null);
+	useEffect(() => {
+		clearCurrentConversation();
+	}, [clearCurrentConversation]);
+	useEffect(() => {
+		loadProviders();
+		loadConversations();
+	}, [loadProviders, loadConversations]);
+	const sessionUnreachable = useMemo(() => {
+		if (!targetSession || !hasLoadedModels || isLoadingModels) return false;
+		if (models.length === 0) return false;
+		const prefix = `session:${targetSession}/`;
+		return !models.some((m) => m.id.startsWith(prefix));
+	}, [
+		targetSession,
+		models,
+		hasLoadedModels,
+		isLoadingModels
+	]);
+	const [sessionBannerDismissed, setSessionBannerDismissed] = useState(false);
+	useEffect(() => {
+		if (!targetSession || !hasLoadedModels || isLoadingModels || models.length === 0) return;
+		const prefix = `session:${targetSession}/`;
+		const match = models.find((m) => m.id.startsWith(prefix));
+		if (match) setSelectedProvider(match.id);
+	}, [
+		targetSession,
+		models,
+		hasLoadedModels,
+		isLoadingModels,
+		setSelectedProvider
+	]);
+	const handleSendMessage = useCallback(async (content, attachmentIds, attachmentMeta) => {
+		await sendMessage(content, attachmentIds, void 0, attachmentMeta);
+	}, [sendMessage]);
+	const handleSuggestedPrompt = useCallback((prompt) => {
+		handleSendMessage(prompt);
+	}, [handleSendMessage]);
+	const handleFilesDropped = useCallback((files) => {
+		inputRef.current?.addFiles(files);
+	}, []);
+	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
+	const attachmentsAvailable = !!adapter.attachments;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full bg-(--theme-panel-bg)",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex flex-col min-w-0",
+			children: [
+				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
+				sessionUnreachable && !sessionBannerDismissed && /* @__PURE__ */ jsxs("div", {
+					className: "mx-4 mt-2 flex items-start gap-3 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20",
+					children: [
+						/* @__PURE__ */ jsx(WarningTriangleIcon, { className: "w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium text-amber-700",
+								children: t.sessionUnreachableTitle(targetSession?.split(":").pop() ?? "")
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-amber-600/80 mt-0.5",
+								children: t.sessionUnreachableBody
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 flex-shrink-0",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => refreshModels(),
+								className: "text-xs font-medium text-amber-700 hover:text-amber-800 hover:bg-amber-500/10 px-2 py-1 rounded transition-colors cursor-pointer",
+								children: t.retry
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setSessionBannerDismissed(true),
+								className: "text-amber-400 hover:text-amber-600 transition-colors cursor-pointer",
+								children: /* @__PURE__ */ jsx(TimesIcon, { className: "w-3 h-3" })
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 flex flex-col relative bg-(--theme-panel-bg)",
+					...attachmentsAvailable ? dragHandlers : {},
+					children: [
+						isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl m-4" }),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1 flex flex-col items-center justify-center p-8",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "max-w-2xl w-full",
+								children: [!(hasLoadedModels && models.length === 0) && /* @__PURE__ */ jsxs("div", {
+									className: "text-center mb-10",
+									children: [/* @__PURE__ */ jsx("h1", {
+										className: cx("text-2xl font-semibold text-(--theme-panel)", "tracking-tight"),
+										children: greeting
+									}), /* @__PURE__ */ jsx("p", {
+										className: "mt-2 text-sm theme-muted-text",
+										children: t.modernSubtitle
+									})]
+								}), hasLoadedModels && models.length === 0 ? /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-col items-center justify-center gap-4 py-8",
+									children: [
+										/* @__PURE__ */ jsx(CloudIcon, { className: "h-16 w-16 theme-muted-text opacity-50" }),
+										/* @__PURE__ */ jsx("p", {
+											className: "text-lg theme-muted-text",
+											children: t.noProvidersTitle
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: "text-sm theme-muted-text text-center max-w-md",
+											children: t.noProvidersBody
+										}),
+										extraLinks.addProvider && /* @__PURE__ */ jsxs(LinkComponent, {
+											target: {
+												kind: "external",
+												href: extraLinks.addProvider
+											},
+											className: "inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm font-medium theme-element hover:opacity-90",
+											children: [/* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }), t.addProvider]
+										})
+									]
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "grid grid-cols-1 md:grid-cols-2 gap-3",
+									children: keyedByContent(prompts, (p) => p).map(({ key, item: prompt }) => /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => handleSuggestedPrompt(prompt),
+										disabled: isLoading || isLoadingModels || models.length === 0,
+										className: "text-left p-4 rounded-2xl border theme-border\n                          hover:opacity-80 transition-all duration-200 cursor-pointer\n                          disabled:opacity-50 disabled:cursor-not-allowed\n                          text-sm shadow-sm bg-(--theme-panel-bg) text-(--theme-panel)",
+										children: prompt
+									}, key))
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx(ChatInput, {
+							ref: inputRef,
+							onSend: handleSendMessage,
+							disabled: isLoading || isLoadingModels || models.length === 0,
+							placeholder: isLoadingModels ? tInput.placeholderLoading : hasLoadedModels && models.length === 0 ? tInput.placeholderNoProviders : tInput.placeholder,
+							settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+							settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, { targetSession })] })
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ChatEmptyState as default };