@parallelworks/ui 0.18.0 → 0.19.1

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.d.ts

@@ -0,0 +1 @@
+export default function BlockedGroupBanner(): import("react").JSX.Element | null;

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.d.ts

@@ -0,0 +1,8 @@
+import type { ChatMessage as Message } from '../types.js';
+interface BranchNavigatorProps {
+    messages: Message[];
+    currentMessageId: string;
+    onNavigate: (messageId: string) => void;
+}
+export default function BranchNavigator({ messages, currentMessageId, onNavigate, }: BranchNavigatorProps): import("react").JSX.Element | null;
+export {};

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.d.ts

@@ -0,0 +1,3 @@
+export default function ChatEmptyState({ targetSession, }: {
+    targetSession?: string | null | undefined;
+}): import("react").JSX.Element;

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 };

package/dist/ai/components/ChatInput.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { type SlashMenuConfig } from './SlashMenu.js';
+interface ChatInputProps {
+    onSend: (content: string, attachmentIds?: string[], attachmentMeta?: Record<string, {
+        filename: string;
+        contentType: string;
+        size: number;
+    }>) => void;
+    disabled?: boolean;
+    placeholder?: string | undefined;
+    conversationId?: string;
+    onEditLastMessage?: () => void;
+    /** Only the box: no page padding, width cap, or settings row, for a host
+     *  that lays out its own controls around it. */
+    flush?: boolean;
+    /** Send with nothing typed, for a surface where the text is optional. */
+    allowEmpty?: boolean;
+    /** Attach, paste, and drop files. Off for a target that takes text only. */
+    attachments?: boolean;
+    /** Hold sending until the provider's selected model is one it can serve.
+     *  Off when the target picks its own model. */
+    requireModel?: boolean;
+    inputLabel?: string;
+    sendLabel?: string;
+    sendTestId?: string;
+    /** Offers the host's slash commands as the input starts with /. */
+    slash?: SlashMenuConfig | undefined;
+    /** Pills naming where the turn runs, rendered above the input. */
+    context?: ReactNode;
+    settingsLeft?: ReactNode;
+    settingsRight?: ReactNode;
+    /** A turn the chat provider does not run, such as an agent session's: it
+     *  drives the Stop button in place of the provider's stream and queue. */
+    turn?: {
+        running: boolean;
+        onStop: () => void;
+        stopping?: boolean;
+    };
+}
+export interface ChatInputHandle {
+    addFiles: (files: FileList | File[]) => void;
+    focus: () => void;
+}
+declare const ChatInput: import("react").ForwardRefExoticComponent<ChatInputProps & import("react").RefAttributes<ChatInputHandle>>;
+export default ChatInput;