@parallelworks/ui 0.18.0 → 0.19.1

package/dist/ai/ai.css

@@ -0,0 +1,325 @@
+/* Chat-specific styles: markdown rendering (streamdown output) and the
+ * streaming/thinking animations. */
+
+/* Answers are read at length, so their ink sits further from the page than
+ * the theme's UI text: pulled toward black on a light scheme and toward white
+ * on a dark one, from whatever ink the theme (or an org palette) supplies. */
+.chat-ink {
+  --chat-ink: light-dark(
+    color-mix(in oklab, var(--theme-panel, #000) 60%, black),
+    color-mix(in oklab, var(--theme-panel, #fff) 75%, white)
+  );
+  color: var(--chat-ink);
+  --tw-prose-body: var(--chat-ink);
+  --tw-prose-headings: var(--chat-ink);
+  --tw-prose-bold: var(--chat-ink);
+  --tw-prose-code: var(--chat-ink);
+}
+
+/* Links */
+.markdown a {
+  color: var(--theme-link, #428bca);
+  text-decoration: none;
+}
+.markdown a:hover {
+  text-decoration: underline;
+}
+
+/* Lists hang their markers in the gutter so a wrapped line lines up with the
+ * text above it, not with the number. Streamdown sets them inside. */
+.markdown ol,
+.markdown ul {
+  list-style-position: outside;
+  padding-left: 1.625em;
+}
+.markdown li {
+  padding-left: 0.25em;
+}
+
+/* Horizontal rules */
+.markdown hr {
+  display: block;
+  height: 0;
+  border: 0;
+  border-top: 1px solid var(--theme-border, #e5e7eb);
+  margin: 1.5em 0;
+  padding: 0;
+}
+
+/* Inline code — code blocks are styled by Streamdown. A tint of the ink and
+ * no border: a hard outline turns every identifier into a keycap. */
+.markdown code {
+  /* rem, not em: a table cell or list already sized down would size it twice. */
+  font-size: 0.875rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  padding: 0.125em 0.375em;
+  background-color: color-mix(in oklab, var(--theme-panel, #000) 8%, transparent);
+  border-radius: 0.25rem;
+  /* Identifiers carry a colour of their own so they read as code at a glance
+   * without the weight the plugin gives them: the theme's link blue, which
+   * every palette already keeps legible on its surfaces. */
+  color: var(--theme-link, #2f6fa8);
+  font-weight: 400;
+}
+/* Reset inline code styles when inside a pre (code block) */
+.markdown pre code {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* KaTeX overrides */
+.katex-display {
+  margin: 1em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.katex {
+  font-size: 1.1em;
+}
+
+/* Subscript and superscript */
+.markdown sub,
+.markdown sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.markdown sup {
+  top: -0.5em;
+}
+.markdown sub {
+  bottom: -0.25em;
+}
+
+/* Images */
+.markdown img {
+  border: 0;
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border-radius: 0.5rem;
+}
+
+/* Streamdown tables: the body's own type,
+ * hairlines at a tenth of the ink, a header on a five-percent tint, and the
+ * copy/download controls only while the pointer is over the table. */
+.markdown [data-streamdown="table-wrapper"] {
+  --table-line: color-mix(in oklab, var(--theme-panel, #000) 10%, transparent);
+  position: relative;
+  display: block;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0.75rem 0;
+}
+.markdown [data-streamdown="table-wrapper"] > div:first-child {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.375rem;
+  z-index: 1;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 0.375rem;
+  background: var(--theme-panel-bg, #fff);
+  border: 1px solid var(--table-line);
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+.markdown [data-streamdown="table-wrapper"]:hover > div:first-child,
+.markdown [data-streamdown="table-wrapper"]:focus-within > div:first-child {
+  opacity: 1;
+}
+.markdown [data-streamdown="table-wrapper"] > div:last-child {
+  padding: 0;
+  border: 1px solid var(--table-line);
+  border-radius: 0.5rem;
+  background: transparent;
+}
+.markdown [data-streamdown="table-wrapper"] table {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+.markdown [data-streamdown="table"] th {
+  padding: 0.4375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: inherit;
+  background: color-mix(in oklab, var(--theme-panel, #000) 5%, transparent);
+  border-bottom: 1px solid var(--table-line);
+}
+.markdown [data-streamdown="table"] td {
+  padding: 0.4375rem 0.75rem;
+  /* Streamdown sizes cells down with its own class; the table is body type. */
+  font-size: 1rem;
+  line-height: 1.5;
+  vertical-align: top;
+  color: inherit;
+  /* A prose column keeps enough room to read; a wide table scrolls instead. */
+  min-width: 9rem;
+}
+.markdown [data-streamdown="table"] tbody tr {
+  border-bottom: 1px solid var(--table-line);
+}
+.markdown [data-streamdown="table"] tbody tr:last-child {
+  border-bottom: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .markdown [data-streamdown="table-wrapper"] > div:first-child {
+    transition: none;
+  }
+}
+
+/* Streamdown code blocks — tighten spacing, remove inner double-border */
+.markdown [data-streamdown="code-block"] {
+  padding: 0.375rem 0.5rem 0;
+  margin: 0.5em 0;
+  gap: 0;
+}
+.markdown [data-streamdown="code-block-header"] {
+  padding: 0.25rem 0.25rem;
+}
+.markdown [data-streamdown="code-block-body"] {
+  border: none;
+  border-radius: 0 0 0.5rem 0.5rem;
+  padding: 0;
+}
+/* Remove prose pre margin and code block body inner pre margin */
+.markdown [data-streamdown="code-block-body"] pre {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  overflow-x: auto;
+  /* Code reads looser than prose; Streamdown's text-sm line is too tight. */
+  line-height: 1.6;
+}
+
+/* Shiki dual-theme color overrides (standard Shiki approach).
+   Streamdown uses Tailwind dark: arbitrary-value classes for theme switching,
+   but Tailwind v4's source scanner can misparse them from minified JS —
+   generating broken selectors that apply dark bg unconditionally while
+   missing the text color classes entirely. Override both light and dark
+   explicitly to ensure correct colors in all modes.
+   See: https://shiki.style/guide/dual-themes#class-based-dark-mode */
+
+/* Light mode: use the primary Shiki theme (--sdm-bg/--sdm-c) */
+.markdown [data-streamdown="code-block-body"] pre {
+  background-color: var(--sdm-bg, inherit) !important;
+  color: var(--sdm-fg, inherit);
+}
+.markdown [data-streamdown="code-block-body"] pre code > span > span {
+  color: var(--sdm-c, inherit);
+}
+
+/* Dark mode: switch to --shiki-dark variants */
+.dark .markdown [data-streamdown="code-block-body"] pre {
+  background-color: var(--shiki-dark-bg, var(--sdm-bg, inherit)) !important;
+  color: var(--shiki-dark, var(--sdm-fg, inherit));
+}
+.dark .markdown [data-streamdown="code-block-body"] pre code > span > span {
+  color: var(--shiki-dark, inherit);
+  font-style: var(--shiki-dark-font-style, inherit);
+  font-weight: var(--shiki-dark-font-weight, inherit);
+  text-decoration: var(--shiki-dark-text-decoration, inherit);
+}
+.dark .markdown [data-streamdown="code-block-body"] pre code > span > span[style*="--sdm-tbg"] {
+  background-color: var(--shiki-dark-bg, var(--sdm-tbg));
+}
+
+/* Remove prose backtick pseudo-elements on inline code */
+.markdown code::before,
+.markdown code::after {
+  content: none !important;
+}
+
+/* Task lists (checkboxes) */
+.markdown input[type="checkbox"] {
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+.markdown li:has(> input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -1.5em;
+}
+
+/* Touch device: always show chat actions */
+@media (hover: none) {
+  .chat-actions,
+  .chat-meta {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+}
+
+/* Long finished replies clamp with a bottom fade; mask keeps the fade
+ * background-agnostic across themes. */
+.chat-message-clamp {
+  max-height: 600px;
+  overflow: hidden;
+  mask-image: linear-gradient(to bottom, black calc(100% - 96px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 96px), transparent);
+}
+
+/* Theme-aware input styling (matches the host app's .theme-input; defined
+ * here too so the edit textarea is styled in standalone use) */
+.theme-input {
+  background-color: var(--theme-input-bg, #f9fafb);
+  border-color: var(--theme-border, #d1d5db);
+  color: var(--theme-app, #374151);
+}
+
+.theme-input:focus {
+  border-color: var(--theme-element, #3b82f6);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--theme-element, #3b82f6);
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@utility animate-shimmer {
+  animation: shimmer 1.75s linear infinite;
+  background-size: 200% 100%;
+}
+
+@utility text-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--theme-muted-text-color, #6a7282) 0%,
+    var(--theme-app, #d1d5db) 20%,
+    var(--theme-muted-text-color, #6a7282) 40%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Entrance animation for chat messages (CSS replacement for a JS motion lib).
+ * Only `from` is defined so elements settle at their natural styles (queued
+ * messages render at reduced opacity). */
+@keyframes chat-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@utility animate-chat-enter {
+  animation: chat-fade-in-up 0.25s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-chat-enter {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,4 @@
+export default function AllocationSelector({ variant, }?: {
+    /** 'bare' drops the border, for a toolbar that reads as text. */
+    variant?: 'default' | 'bare';
+}): import("react").JSX.Element | null;

package/dist/ai/components/AllocationSelector.js

@@ -0,0 +1,56 @@
+import { useChat } from "../core/ChatProvider.js";
+import Dropdown from "../ui/Dropdown.js";
+import { isOrgModel } from "../utils.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useSWR from "swr";
+//#region src/ai/components/AllocationSelector.tsx
+function AllocationSelector({ variant = "default" } = {}) {
+	const bare = variant === "bare";
+	const { adapter, selectedProvider, selectedAllocation, setSelectedAllocation } = useChat();
+	const isOrgProvider = isOrgModel(selectedProvider);
+	const allocationsAdapter = adapter.allocations;
+	const { data: allocations } = useSWR(isOrgProvider && allocationsAdapter ? ["ai-chat-allocations"] : null, () => allocationsAdapter.list());
+	useEffect(() => {
+		if (isOrgProvider && allocations?.length && !selectedAllocation) setSelectedAllocation(allocations[0].name);
+	}, [
+		isOrgProvider,
+		allocations,
+		selectedAllocation,
+		setSelectedAllocation
+	]);
+	useEffect(() => {
+		if (!isOrgProvider && selectedAllocation) setSelectedAllocation(null);
+	}, [
+		isOrgProvider,
+		selectedAllocation,
+		setSelectedAllocation
+	]);
+	if (!isOrgProvider || !allocations?.length) return null;
+	const options = allocations.map((alloc) => ({
+		label: alloc.name,
+		value: alloc.name
+	}));
+	const selected = allocations.find((a) => a.name === selectedAllocation);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Dropdown, {
+			options,
+			value: selectedAllocation ?? "",
+			onChange: (v) => setSelectedAllocation(v || null),
+			variant,
+			textBoxClassName: bare ? "rounded-md px-1.5 py-0.5 text-[11px] hover:theme-muted-panel" : "h-8 rounded-lg border theme-border text-xs px-2",
+			placeholder: "Select allocation"
+		}), selected && /* @__PURE__ */ jsxs("span", {
+			className: "text-[10px] theme-muted-text whitespace-nowrap",
+			children: [
+				"$",
+				(selected.used ?? 0).toFixed(2),
+				" / $",
+				selected.total.toFixed(2)
+			]
+		})]
+	});
+}
+//#endregion
+export { AllocationSelector as default };

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

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

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

@@ -0,0 +1,24 @@
+export interface AttachmentUploadHandle {
+    addFiles: (files: FileList | File[]) => void;
+}
+export interface Attachment {
+    id?: string;
+    file?: File;
+    filename: string;
+    mimeType: string;
+    size: number;
+    uploading?: boolean;
+    uploaded?: boolean;
+    error?: string;
+    url?: string;
+}
+interface AttachmentUploadProps {
+    conversationId?: string | undefined;
+    attachments: Attachment[];
+    onAttachmentsChange: (attachments: Attachment[]) => void;
+    disabled?: boolean;
+    maxFiles?: number;
+    maxFileSize?: number;
+}
+declare const AttachmentUpload: import("react").ForwardRefExoticComponent<AttachmentUploadProps & import("react").RefAttributes<AttachmentUploadHandle>>;
+export default AttachmentUpload;