@parallelworks/ui 0.18.0 → 0.19.1

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

@@ -0,0 +1,3 @@
+export default function ChatThread({ conversationId }: {
+    conversationId: string;
+}): import("react").JSX.Element;

package/dist/ai/components/ChatThread.js

@@ -0,0 +1,198 @@
+import { CloseIcon, ThinkingIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import { useChat } from "../core/ChatProvider.js";
+import Markdown from "../ui/Markdown.js";
+import BlockedGroupBanner from "./BlockedGroupBanner.js";
+import useDragDrop from "../core/useDragDrop.js";
+import { ComposerControls, ConnectToolsLink } from "./ComposerChrome.js";
+import DragOverlay from "./DragOverlay.js";
+import ChatInput from "./ChatInput.js";
+import { ShareButton } from "./ShareDialog.js";
+import ChatMessageList from "./ChatMessageList.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/ChatThread.tsx
+function ChatThread({ conversationId }) {
+	const chatInputRef = useRef(null);
+	const [editingState, setEditingState] = useState(null);
+	const [reasoningDrawerOpen, setReasoningDrawerOpen] = useState(false);
+	const [selectedReasoning, setSelectedReasoning] = useState(null);
+	const handleOpenReasoning = useCallback((reasoning, duration) => {
+		if (reasoningDrawerOpen && selectedReasoning?.content === reasoning) setReasoningDrawerOpen(false);
+		else {
+			setSelectedReasoning({
+				content: reasoning,
+				duration
+			});
+			setReasoningDrawerOpen(true);
+		}
+	}, [reasoningDrawerOpen, selectedReasoning?.content]);
+	const { adapter, currentUser, currentConversation, loadConversation, loadProviders, sendMessage, retryMessage, isLoadingConversation, isStreaming, streamingContent, navigateToBranch, queuedMessages, removeQueuedMessage } = useChat();
+	const { slots, strings } = useChatConfig();
+	const requestedConversationIdRef = useRef(null);
+	useEffect(() => {
+		loadProviders();
+		if (requestedConversationIdRef.current !== conversationId) {
+			requestedConversationIdRef.current = conversationId;
+			loadConversation(conversationId);
+		}
+	}, [
+		conversationId,
+		loadConversation,
+		loadProviders
+	]);
+	const handleSendMessage = useCallback((content, attachmentIds, attachmentMeta) => {
+		sendMessage(content, attachmentIds, void 0, attachmentMeta);
+	}, [sendMessage]);
+	const handleEditMessage = useCallback((messageId) => {
+		const message = (currentConversation?.messages || []).find((m) => m.id === messageId);
+		if (message && message.role === "user") setEditingState({
+			messageId: message.id,
+			parentId: message.parentId || null
+		});
+	}, [currentConversation?.messages]);
+	const handleSaveEdit = useCallback((_messageId, content) => {
+		if (!editingState) return;
+		sendMessage(content, void 0, editingState.parentId || void 0);
+		setEditingState(null);
+	}, [sendMessage, editingState]);
+	const handleCancelEdit = useCallback(() => {
+		setEditingState(null);
+	}, []);
+	const handleEditLastMessage = useCallback(() => {
+		const conversationMessages = currentConversation?.messages || [];
+		for (let i = conversationMessages.length - 1; i >= 0; i--) if (conversationMessages[i].role === "user") {
+			handleEditMessage(conversationMessages[i].id);
+			break;
+		}
+	}, [currentConversation?.messages, handleEditMessage]);
+	const handleNavigateBranch = useCallback((messageId) => {
+		navigateToBranch?.(messageId);
+	}, [navigateToBranch]);
+	const handleRegenerateMessage = useCallback((messageId) => {
+		const conversationMessages = currentConversation?.messages || [];
+		const assistantMessage = conversationMessages.find((m) => m.id === messageId);
+		if (!assistantMessage || assistantMessage.role !== "assistant") return;
+		const userMessage = conversationMessages.find((m) => m.id === assistantMessage.parentId);
+		if (!userMessage || userMessage.role !== "user") return;
+		sendMessage(userMessage.content || "", userMessage.attachments?.map((a) => a.id), userMessage.parentId || void 0);
+	}, [currentConversation?.messages, sendMessage]);
+	const handleRetryMessage = useCallback((messageId) => {
+		retryMessage(messageId);
+	}, [retryMessage]);
+	const handleFilesDropped = useCallback((files) => {
+		chatInputRef.current?.addFiles(files);
+	}, []);
+	const { isDragging, dragHandlers } = useDragDrop({ onFilesDropped: handleFilesDropped });
+	const attachmentsAvailable = !!adapter.attachments;
+	const streamingMessage = useMemo(() => isStreaming && streamingContent ? {
+		id: "streaming",
+		conversationId,
+		role: "assistant",
+		content: streamingContent,
+		timestamp: ""
+	} : null, [
+		isStreaming,
+		streamingContent,
+		conversationId
+	]);
+	const messages = currentConversation?.messages || [];
+	const showAuthor = useMemo(() => {
+		return new Set(messages.filter((m) => m.author).map((m) => m.author.username)).size > 1 || currentConversation?.isOwner === false;
+	}, [messages, currentConversation?.isOwner]);
+	if (isLoadingConversation && !currentConversation) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full bg-(--theme-panel-bg)",
+		children: [/* @__PURE__ */ jsx("div", { className: "flex-1" }), /* @__PURE__ */ jsx(ChatInput, {
+			ref: chatInputRef,
+			onSend: handleSendMessage,
+			disabled: true,
+			conversationId,
+			settingsLeft: /* @__PURE__ */ jsx(ConnectToolsLink, {}),
+			settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, {})] })
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full relative bg-(--theme-panel-bg)",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex-1 flex flex-col min-w-0",
+			...attachmentsAvailable ? dragHandlers : {},
+			children: [
+				isDragging && attachmentsAvailable && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-lg" }),
+				/* @__PURE__ */ jsx(BlockedGroupBanner, {}),
+				/* @__PURE__ */ jsx(ChatMessageList, {
+					messages,
+					allMessages: messages,
+					streamingMessage,
+					queuedMessages,
+					onRemoveQueued: removeQueuedMessage,
+					editingMessageId: editingState?.messageId,
+					showAuthor,
+					currentUsername: currentUser.username,
+					onNavigateBranch: handleNavigateBranch,
+					onEditMessage: currentConversation?.canCollaborate !== false ? handleEditMessage : void 0,
+					onRegenerateMessage: currentConversation?.canCollaborate !== false ? handleRegenerateMessage : void 0,
+					onRetryMessage: currentConversation?.canCollaborate !== false ? handleRetryMessage : void 0,
+					onSaveEdit: handleSaveEdit,
+					onCancelEdit: handleCancelEdit,
+					onOpenReasoning: handleOpenReasoning,
+					inputElement: /* @__PURE__ */ jsx(ChatInput, {
+						ref: chatInputRef,
+						onSend: handleSendMessage,
+						disabled: isLoadingConversation || currentConversation?.canCollaborate === false,
+						placeholder: currentConversation?.canCollaborate === false ? strings.thread.viewOnly : void 0,
+						conversationId,
+						onEditLastMessage: handleEditLastMessage,
+						settingsLeft: /* @__PURE__ */ jsxs(Fragment$1, { children: [currentConversation?.isOwner !== false && /* @__PURE__ */ jsx(ShareButton, { conversationId }), /* @__PURE__ */ jsx(ConnectToolsLink, {})] }),
+						settingsRight: /* @__PURE__ */ jsxs(Fragment$1, { children: [slots.composerUsage, /* @__PURE__ */ jsx(ComposerControls, {})] })
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("flex-shrink-0 border-l theme-border flex flex-col h-full transition-[width] duration-300 ease-in-out overflow-hidden bg-(--theme-panel-bg)", reasoningDrawerOpen ? "w-[400px]" : "w-0 border-l-0"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "w-[400px] h-full flex flex-col",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between p-3 border-b theme-border",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(ThinkingIcon, { className: "w-5 h-5 theme-muted-text" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: strings.thinking.activity
+							}),
+							selectedReasoning?.duration && /* @__PURE__ */ jsxs("span", {
+								className: "text-sm theme-muted-text",
+								children: [
+									"· ",
+									Math.round(selectedReasoning.duration / 1e3),
+									"s"
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setReasoningDrawerOpen(false),
+						className: "p-1 rounded hover:theme-hover transition-colors",
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-5 h-5 theme-muted-text" })
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: selectedReasoning?.content && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-sm font-medium theme-text",
+							children: [/* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500" }), /* @__PURE__ */ jsx("span", { children: strings.thinking.label })]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-sm theme-muted-text leading-relaxed pl-4 border-l-2 theme-border",
+							children: /* @__PURE__ */ jsx(Markdown, { children: selectedReasoning.content })
+						})]
+					})
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { ChatThread as default };

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/** Where the turn runs, sitting above the composer the way the terminal shows
+ *  it: the machine, the workspace, and whatever else names the place. */
+export declare function ComposerContext({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** What the turn runs as, sitting under the composer: the surface's own
+ *  controls on the left, the model on the right, both reading as plain text. */
+export declare function ComposerSettings({ left, children }: {
+    left?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The two selectors every surface carries, bare so they read as text beside
+ *  whatever the surface puts next to them. */
+export declare function ComposerControls({ targetSession }: {
+    targetSession?: string | null | undefined;
+}): import("react").JSX.Element;
+export declare function ConnectToolsLink(): import("react").JSX.Element | null;

package/dist/ai/components/ComposerChrome.js

@@ -0,0 +1,50 @@
+import { ConnectIcon } from "../../icons.js";
+import { useChatConfig } from "../core/config.js";
+import AllocationSelector from "./AllocationSelector.js";
+import ModelSelector from "./ModelSelector.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ComposerChrome.tsx
+/** Where the turn runs, sitting above the composer the way the terminal shows
+*  it: the machine, the workspace, and whatever else names the place. */
+function ComposerContext({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mb-1.5 flex flex-wrap items-center gap-1.5",
+		children
+	});
+}
+/** What the turn runs as, sitting under the composer: the surface's own
+*  controls on the left, the model on the right, both reading as plain text. */
+function ComposerSettings({ left, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-1.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: left
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children
+		})]
+	});
+}
+/** The two selectors every surface carries, bare so they read as text beside
+*  whatever the surface puts next to them. */
+function ComposerControls({ targetSession }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelector, {
+		variant: "bare",
+		targetSession
+	}), /* @__PURE__ */ jsx(AllocationSelector, { variant: "bare" })] });
+}
+function ConnectToolsLink() {
+	const { extraLinks, LinkComponent, strings } = useChatConfig();
+	if (!extraLinks.connectTools) return null;
+	return /* @__PURE__ */ jsxs(LinkComponent, {
+		target: {
+			kind: "external",
+			href: extraLinks.connectTools
+		},
+		className: "flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] theme-muted-text transition-colors hover:theme-muted-panel hover:theme-text",
+		children: [/* @__PURE__ */ jsx(ConnectIcon, { className: "h-3 w-3" }), strings.sidebar.connectTools]
+	});
+}
+//#endregion
+export { ComposerContext, ComposerControls, ComposerSettings, ConnectToolsLink };

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+/** The column a composer sits in: notices above it, what the agent is doing
+ *  right now, a row of chips saying where the message goes, the box itself,
+ *  and a row of settings under it with the model and allocation on the right. */
+export default function ComposerFrame({ notices, activity, above, belowLeft, belowRight, hint, className, children, }: {
+    notices?: ReactNode;
+    /** Sits where a terminal's spinner line would, just above the box. */
+    activity?: ReactNode;
+    above?: ReactNode;
+    belowLeft?: ReactNode;
+    /** Defaults to the model and allocation pickers. */
+    belowRight?: ReactNode;
+    hint?: string | undefined;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/ai/components/ComposerFrame.js

@@ -0,0 +1,33 @@
+import { ComposerContext, ComposerControls, ComposerSettings } from "./ComposerChrome.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/ComposerFrame.tsx
+/** The column a composer sits in: notices above it, what the agent is doing
+*  right now, a row of chips saying where the message goes, the box itself,
+*  and a row of settings under it with the model and allocation on the right. */
+function ComposerFrame({ notices, activity, above, belowLeft, belowRight, hint, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("shrink-0 px-6 pb-6 pt-2", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto w-full max-w-[50rem] space-y-2",
+			children: [notices, /* @__PURE__ */ jsxs("div", { children: [
+				activity && /* @__PURE__ */ jsx("div", {
+					className: "mb-2",
+					children: activity
+				}),
+				above && /* @__PURE__ */ jsx(ComposerContext, { children: above }),
+				children,
+				/* @__PURE__ */ jsx(ComposerSettings, {
+					left: belowLeft,
+					children: belowRight ?? /* @__PURE__ */ jsx(ComposerControls, {})
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-center text-[11px] theme-muted-text",
+					children: hint
+				})
+			] })]
+		})
+	});
+}
+//#endregion
+export { ComposerFrame as default };

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

@@ -0,0 +1,5 @@
+interface DragOverlayProps {
+    className?: string;
+}
+export default function DragOverlay({ className }: DragOverlayProps): import("react").JSX.Element;
+export {};

package/dist/ai/components/DragOverlay.js

@@ -0,0 +1,20 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/DragOverlay.tsx
+function DragOverlay({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("absolute inset-0 z-50 flex items-center justify-center bg-blue-500/10 border-2 border-dashed border-blue-500 backdrop-blur-sm pointer-events-none", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-lg font-medium text-blue-600",
+				children: "Drop files here"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-blue-500/80",
+				children: "Release to upload"
+			})]
+		})
+	});
+}
+//#endregion
+export { DragOverlay as default };

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

@@ -0,0 +1,6 @@
+export declare function getProviderKeyFromModelId(modelId: string): string;
+export default function ModelSelector({ targetSession, variant, }: {
+    targetSession?: string | null | undefined;
+    /** 'bare' drops the border and the icon, for a toolbar that reads as text. */
+    variant?: 'default' | 'bare';
+}): import("react").JSX.Element;