@keboola/design 14.0.0 → 15.1.0

package/dist/{AIKit-BRSZ3nY7.js → AIKit-BR6jfsdI.js}

@@ -1,24 +1,24 @@
 import { cn } from "./classNames-DcGnTh2N.js";
-import { Tooltip, TooltipProvider, isMac } from "./utils-LQ4jJA-9.js";
+import { Tooltip, TooltipProvider, isMac } from "./utils-DwC9u0tM.js";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, BarChart3, Bell, BookOpen, Bookmark, Box, Bug, Calendar, ChartBar, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert, CircleCheck, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleStop, CircleX, Clock, Cloud, Cog, Copy, Database, Download, Ellipsis, ExternalLink, Eye, File, FilePen, FileText, Filter, Flag, Folder, Gauge, GitBranch, GitMerge, GitPullRequest, Globe, Hand, HardDrive, History, Hourglass, Info, Key, Layers, Lightbulb, LineChart, Link, List, ListChecks, Loader2, LoaderCircle, Lock, Mail, Maximize2, Minimize2, Minus, Package, Pause, Pencil, Pin, Play, Plus, Quote, RefreshCw, Rocket, RotateCcw, RotateCw, Save, Search, Send, Server, Settings, Shield, Sparkles, Star, Table, ThumbsDown, ThumbsUp, Trash2, TrendingDown, TrendingUp, TriangleAlert, Upload, User, Users, WandSparkles, Warehouse, Workflow, Wrench, X, XCircle, Zap } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-D2JqBAq7.js";
+import { Button } from "./Button-BNkyYU8u.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
-import { ClipboardButton } from "./ClipboardButton-DxvZG_H0.js";
-import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CUuAakh3.js";
+import { ClipboardButton } from "./ClipboardButton-B1Hr_n_Z.js";
+import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-DAvvlGOz.js";
 import { Truncated } from "./internal/components/Truncated.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { HoverCard } from "./HoverCard-BBdPYqEf.js";
-import { Command } from "./Command-T3MLRaen.js";
-import { TextInput } from "./TextInput-K2DSDs5O.js";
-import { Badge } from "./Badge-Ba3epgcI.js";
+import { HoverCard } from "./HoverCard-Cf9iYyaW.js";
+import { Command } from "./Command-DhXmqFLT.js";
+import { TextInput } from "./TextInput-CR0_USaY.js";
+import { Badge } from "./Badge-CqlOE5A2.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { Kbd, keys } from "./Kbd-3YM7NQO4.js";
+import { Kbd, keys } from "./Kbd-CflKthfu.js";
 import { Collapsible } from "./Collapsible-DD4xTL75.js";
-import { Alert } from "./Alert-CZ0dDsuk.js";
+import { Alert } from "./Alert-Chz6KZ7e.js";
 import { Table as Table$1, tableAriaSort } from "./Table-CilEvpMq.js";
 import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
 import { DiagramSource, makeResponsive } from "./svgTransforms-Hnvev3Vs.js";
-import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-Dh1OstPN.js";
+import { ZoomableSvg, toSvgFileContent } from "./ZoomableSvg-CxXKanUR.js";
 import { Progress } from "./internal/components/Progress.js";
 import { digitFromKeyCode, useAltDigitHotkey } from "./internal/hooks/useAltDigitHotkey.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -52,7 +52,6 @@ const AnswerCommentInput = ({ placeholder, onSubmit }) => {
 		submit();
 	};
 	return /* @__PURE__ */ jsx(TextInput, {
-		sizing: "small",
 		value: text,
 		onValueChange: setText,
 		onKeyDown: handleKeyDown,
@@ -94,7 +93,7 @@ const SIZES = {
 * - A vote can be changed but not withdrawn; pressing the pressed one re-sends it.
 * - The caller owns the recorded vote and the write.
 */
-const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again" }) => {
+const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, extraActions = [], labels = DEFAULT_LABELS, confirmation, size = "small", layout = "inline", onDownComment, commentPlaceholder = "What was wrong? (optional)", onRegenerate, regenerateLabel = "Ask again" }) => {
 	const { button, gap } = SIZES[size];
 	const votes = VOTE_BUTTONS.map(({ vote: candidate, icon }) => {
 		const isRecorded = vote === candidate;
@@ -133,6 +132,19 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 			children: /* @__PURE__ */ jsx(RotateCcw, { className: "tw:size-4" })
 		})
 	}) : null;
+	const extras = extraActions.map(({ id, label, icon, onSelect, disabled }) => /* @__PURE__ */ jsx(Tooltip, {
+		tooltip: label,
+		placement: "top",
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			size: button,
+			variant: "invisible",
+			"aria-label": label,
+			disabled,
+			onClick: onSelect,
+			children: icon
+		})
+	}, id));
 	const comment = onDownComment && vote === "down" ? /* @__PURE__ */ jsx(AnswerCommentInput, {
 		placeholder: commentPlaceholder,
 		onSubmit: onDownComment
@@ -156,7 +168,8 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 				children: [
 					actions,
 					regenerate,
-					copy
+					copy,
+					extras
 				]
 			})
 		]
@@ -166,6 +179,7 @@ const AnswerActions = ({ copyText, vote, onVote, onCopy, actions, labels = DEFAU
 		"aria-label": "Answer actions",
 		children: [
 			copy,
+			extras,
 			votes,
 			regenerate,
 			actions,
@@ -381,7 +395,7 @@ const InlineStepLabel = ({ variant, children, meta, detail, defaultExpanded = fa
 			children: [
 				children,
 				meta && /* @__PURE__ */ jsx("span", {
-					className: "tw:font-normal tw:text-muted-foreground/70",
+					className: "tw:font-normal tw:text-muted-foreground",
 					children: meta
 				}),
 				detail && /* @__PURE__ */ jsx(Button, {
@@ -468,7 +482,7 @@ const AnswerSummary = ({ items, variant = "success", statusLabel = DEFAULT_STATU
 };
 //#endregion
 //#region src/blocks/AIKit/AttachmentChip.tsx
-const Lead = ({ status, thumbnailUrl }) => {
+const Lead = ({ status, thumbnailUrl, lead }) => {
 	if (status === "uploading") return /* @__PURE__ */ jsx(LoaderCircle, {
 		"aria-hidden": true,
 		className: "tw:size-4 tw:shrink-0 tw:animate-spin"
@@ -477,6 +491,7 @@ const Lead = ({ status, thumbnailUrl }) => {
 		"aria-hidden": true,
 		className: "tw:size-4 tw:shrink-0 tw:text-destructive"
 	});
+	if (lead) return lead;
 	if (thumbnailUrl) return /* @__PURE__ */ jsx("img", {
 		src: thumbnailUrl,
 		alt: "",
@@ -493,16 +508,17 @@ const Lead = ({ status, thumbnailUrl }) => {
 * - Capped width with a truncating name, so a long filename cannot push the text away.
 * - `error` explains itself in a tooltip; the remove control stays available in every status.
 */
-const AttachmentChip = ({ name, thumbnailUrl, status, error, onRemove, trailing, className }) => {
+const AttachmentChip = ({ name, thumbnailUrl, lead, label, status, error, onRemove, trailing, className }) => {
 	const chip = /* @__PURE__ */ jsxs("span", {
 		"data-status": status,
 		className: cn("tailwindcss-preflight tw:inline-flex tw:h-6 tw:min-w-0 tw:max-w-48 tw:items-center tw:gap-1 tw:rounded-md tw:bg-muted tw:px-2 tw:text-xs tw:text-muted-foreground", status === "error" && "tw:text-destructive", className),
 		children: [
 			/* @__PURE__ */ jsx(Lead, {
 				status,
-				thumbnailUrl
+				thumbnailUrl,
+				lead
 			}),
-			/* @__PURE__ */ jsx("span", {
+			label ?? /* @__PURE__ */ jsx("span", {
 				className: "tw:min-w-0 tw:truncate",
 				children: name
 			}),
@@ -789,7 +805,7 @@ const CONTEXT_CHIP_EXPANDABLE_LENGTH = 120;
 * - The excerpt is clamped to two lines; "Show all" appears once it is long enough to be cut.
 * - Images sit under the excerpt as small thumbnails.
 */
-const ContextChip = ({ label, excerpt, images = [], onRemove, className }) => {
+const ContextChip = ({ label, excerpt = "", images = [], number, onRemove, className }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const isExpandable = excerpt.length > 120;
 	return /* @__PURE__ */ jsxs("div", {
@@ -798,24 +814,28 @@ const ContextChip = ({ label, excerpt, images = [], onRemove, className }) => {
 			/* @__PURE__ */ jsxs("div", {
 				className: "tw:flex tw:items-center tw:gap-1 tw:text-muted-foreground",
 				children: [
-					/* @__PURE__ */ jsx(Quote, {
+					number === void 0 ? /* @__PURE__ */ jsx(Quote, {
 						"aria-hidden": true,
 						className: "tw:size-3.5 tw:shrink-0"
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:bg-primary tw:text-[10px] tw:font-semibold tw:text-primary-foreground",
+						children: number
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: "tw:min-w-0 tw:flex-1 tw:truncate tw:font-medium",
 						children: label
 					}),
-					/* @__PURE__ */ jsx("button", {
+					onRemove && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						"aria-label": `Remove ${label}`,
+						"aria-label": number === void 0 ? `Remove ${label}` : `Remove ${number}, ${label}`,
 						onClick: onRemove,
 						className: "tw:shrink-0 tw:cursor-pointer tw:rounded-sm tw:border-0 tw:bg-transparent tw:p-0 tw:text-muted-foreground tw:hover:text-foreground tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring",
 						children: /* @__PURE__ */ jsx(X, { className: "tw:size-3.5" })
 					})
 				]
 			}),
-			/* @__PURE__ */ jsx("p", {
+			excerpt && /* @__PURE__ */ jsx("p", {
 				className: cn("tw:m-0 tw:whitespace-pre-wrap tw:break-words tw:text-foreground", !isExpanded && "tw:line-clamp-2"),
 				children: excerpt
 			}),
@@ -1058,9 +1078,9 @@ const InlineStepGroup = ({ label, variant = "success", isExpanded, onToggle, sur
 * - Renders nothing while `visible` is false.
 * - Positioning is the host's: pass `className` to pin it over the list.
 */
-const JumpToLatest = ({ visible, working = false, onClick, label, className }) => {
+const JumpToLatest = ({ visible, working = false, onClick, label, tooltip, className }) => {
 	if (!visible) return null;
-	return /* @__PURE__ */ jsxs(Button, {
+	const button = /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
 		size: label ? "small" : "icon-sm",
 		"aria-label": label ?? "Scroll to bottom",
@@ -1069,6 +1089,13 @@ const JumpToLatest = ({ visible, working = false, onClick, label, className }) =
 		className: cn("tw:rounded-full tw:shadow-md", working && "tw:animate-pulse tw:motion-reduce:animate-none", className),
 		children: [/* @__PURE__ */ jsx(ArrowDown, { className: "tw:size-4" }), label]
 	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		tooltip,
+		placement: "left",
+		triggerAsChild: true,
+		children: button
+	});
 };
 //#endregion
 //#region src/blocks/AIKit/DiagramBlock.tsx
@@ -2271,7 +2298,6 @@ const STATUS_PILL_COLOR = {
 const StatusPill = ({ status, label }) => /* @__PURE__ */ jsx(Badge, {
 	color: STATUS_PILL_COLOR[status],
 	variant: "pill",
-	className: "tw:normal-case tw:tracking-normal",
 	children: label
 });
 const ExpandToggle = ({ isExpanded, onToggle, showMoreLabel, showLessLabel }) => /* @__PURE__ */ jsxs("button", {
@@ -2776,7 +2802,7 @@ const PromptInputCommands = ({ items, open, onSelect, filterValue, tabPicks = fa
 				className: "tw:py-3 tw:pl-4 tw:text-center tw:text-sm tw:text-muted-foreground",
 				children: emptyText
 			}) : /* @__PURE__ */ jsx(Command.List, {
-				className: "tw:group-data-[variant=argo]/command:px-1 tw:group-data-[variant=argo]/command:pb-1",
+				className: "tw:px-1 tw:pb-1",
 				viewPortClassName: "tw:max-h-[var(--prompt-menu-max-h)] tw:[&>div]:!block",
 				children: Object.entries(groups).map(([groupName, groupItems], index) => /* @__PURE__ */ jsx(Command.Group, {
 					heading: groupName ? /* @__PURE__ */ jsxs("span", {
@@ -3018,11 +3044,17 @@ const wrapperVariants = cva(null, {
 		inline: ""
 	} }
 });
-const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, disabled, disableSubmit, busy = false, blurOnEscape = false, onKeyDown, onPasteFiles, canSubmitEmpty = false, allowSendWhileBusy = false, canAbort = true, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsEmptyText = "No commands found", commandsLoading = false, slashTrigger = "value", commandsGroupAction, panel, mentions, onMentionSelect, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, history, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
+const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, attachments, className, shellClassName, onFocusChange, disabled, disableSubmit, busy = false, blurOnEscape = false, onKeyDown, onPasteFiles, canSubmitEmpty = false, allowSendWhileBusy = false, canAbort = true, value = "", onValueChange, status = "ready", maxRows = 6, minRows, commands, commandsEmptyText = "No commands found", commandsLoading = false, slashTrigger = "value", commandsGroupAction, panel, mentions, onMentionSelect, mentionInsert, mentionsEmptyText = "Nothing to attach", mentionsGroupHeading, mentionsMultiple = false, history, autoFocus, textareaRef: publishedRef, ...textareaProps }) => {
 	const defaultMinRows = variant === "inline" ? 1 : 2;
 	const canSendWhileBusy = allowSendWhileBusy && (status === "streaming" || status === "submitted") && !busy && !disabled && !disableSubmit && value.trim() !== "";
 	const showSeparateStop = allowSendWhileBusy && canAbort && (canSendWhileBusy || status === "submitted");
 	const isDisabled = busy || !canSendWhileBusy && (disabled || disableSubmit || !canSubmitEmpty && !value.trim()) && status !== "streaming" && status !== "interrupted";
+	const [isFocused, setIsFocused] = useState(false);
+	const changeFocus = (next) => {
+		if (next === isFocused) return;
+		setIsFocused(next);
+		onFocusChange?.(next);
+	};
 	const textareaId = useId();
 	const textareaRef = useRef(null);
 	const setTextareaNode = useCallback((node) => {
@@ -3106,7 +3138,7 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 			return;
 		}
 		if (mentionToken) {
-			const keep = mentionsMultiple ? "@" : "";
+			const keep = mentionsMultiple ? "@" : mentionInsert?.(item) ?? "";
 			const next = value.slice(0, mentionToken.start) + keep + value.slice(mentionToken.end);
 			const nextCaret = mentionToken.start + keep.length;
 			onValueChange?.(next);
@@ -3181,11 +3213,16 @@ const PromptInput = ({ onSend, onAbort, onContinue, prefix, variant, suffix, att
 		textareaRef.current?.focus();
 	};
 	const formEl = /* @__PURE__ */ jsx("div", {
-		className: wrapperVariants({ variant }),
+		className: cn(wrapperVariants({ variant }), shellClassName),
+		"data-focused": isFocused ? "" : void 0,
 		children: /* @__PURE__ */ jsxs("form", {
 			"data-testid": "prompt-input",
 			"data-status": status,
 			onKeyDown: handleOnFormKeyDown,
+			onFocus: () => changeFocus(true),
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) changeFocus(false);
+			},
 			onMouseDown: handleOnMouseDown,
 			onSubmit: handleOnSubmit,
 			className: cn(promptInputVariants({ variant }), disabled && "tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default", className),
@@ -3543,7 +3580,6 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 										children: [option.label, /* @__PURE__ */ jsx(Badge, {
 											variant: "pill",
 											color: "green-inverse",
-											className: "tw:normal-case tw:tracking-normal",
 											"data-testid": "question-option-badge",
 											children: option.badge
 										})]
@@ -3598,7 +3634,6 @@ const Question = ({ question, header, options, multiSelect = true, selectedOptio
 							} : void 0,
 							placeholder: customAnswerPlaceholder,
 							maxLength: customAnswerMaxLength,
-							sizing: "small",
 							testId: "question-custom"
 						})]
 					})]
@@ -4175,7 +4210,6 @@ const ToolCallApproval = ({ status, statusLabel, statusMessage, density = "card"
 							children: [showBadge && /* @__PURE__ */ jsx(Badge, {
 								color: badge.color,
 								variant: "pill",
-								className: "tw:normal-case tw:tracking-normal",
 								children: label
 							}), toolName != null && /* @__PURE__ */ jsx("code", {
 								className: "tw:rounded tw:bg-muted tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground",
@@ -4443,4 +4477,4 @@ const UsageStats = ({ value, alert = false, children, className, ariaLabel, alig
 //#endregion
 export { ANSWER_SOURCES_VISIBLE, AnswerActions, AnswerSources, AnswerSummary, AttachmentChip, CONTEXT_CHIP_EXPANDABLE_LENGTH, ChatInlineIcon, ChatNotice, CollapsibleStepHeader, ContextChip, DIAGRAM_LANGUAGES, FileDownloadChip, FileGallery, InlineStepDetail, InlineStepGroup, InlineStepLabel, JumpToLatest, Markdown, MarkdownTable, MessageBubble, ModeChip, PROMPT_INPUT_CONTAINER, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SourceChip, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, findMentionToken, findSlashToken, formatPercentage, getChatInlineIconName, splitSealedBlocks, withholdOpenTail };
 
-//# sourceMappingURL=AIKit-BRSZ3nY7.js.map
+//# sourceMappingURL=AIKit-BR6jfsdI.js.map