@page-speed/agent-everywhere 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/dist/index.cjs +836 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +195 -2
- package/dist/index.d.ts +195 -2
- package/dist/index.js +832 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { twMerge } from 'tailwind-merge';
|
|
4
4
|
import * as React4 from 'react';
|
|
5
|
-
import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext, useId, Fragment as Fragment$1 } from 'react';
|
|
5
|
+
import { createContext, forwardRef, useRef, useImperativeHandle, useCallback, useLayoutEffect, useState, useEffect, useReducer, useMemo, useContext, useId, Fragment as Fragment$1, isValidElement, cloneElement } from 'react';
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
7
|
import { AnimatePresence, motion } from 'motion/react';
|
|
8
8
|
import { Markdown } from '@page-speed/markdown-to-jsx';
|
|
9
|
-
import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon,
|
|
9
|
+
import { SendIcon, PaperclipIcon, FileTextIcon, MicIcon, ImageIcon, XIcon, SearchIcon, UploadIcon, FileIcon, UserCircleIcon, CheckIcon, SparklesIcon, BookmarkIcon, InfoIcon, CheckCircle2Icon, AlertTriangleIcon, LightbulbIcon, BrainIcon, ChevronDownIcon, ZapIcon, CopyIcon, ThumbsUpIcon, ThumbsDownIcon, BotIcon, UserIcon, DownloadIcon, MinusIcon, TrendingDownIcon, TrendingUpIcon, ChevronUpIcon, ArrowUpDownIcon, LinkIcon, PlayIcon, ExternalLinkIcon, WandIcon, LayoutGridIcon, Grid3X3Icon, ArrowUpRightIcon, ShuffleIcon, SkipForwardIcon, ChevronLeftIcon, ChevronRightIcon, XCircleIcon, HelpCircleIcon, Minimize2Icon, Maximize2Icon, RotateCcwIcon, MessageSquareIcon, GripVerticalIcon, PanelLeftOpenIcon, PanelLeftCloseIcon, CheckCircleIcon, AlertCircleIcon, MoreHorizontalIcon, Globe, X, Loader2, CornerDownLeft, Pencil, Trash2, CircleCheck, ClipboardListIcon, ArrowLeftIcon, MoreVerticalIcon, ArrowUp, PanelLeft, PanelRight, RotateCcw, ChevronDown, Sparkles, MessageSquare, Paperclip, Loader2Icon, ArrowRightIcon, AlignLeftIcon, ListIcon, HashIcon, TypeIcon, ClockIcon, CoinsIcon, ActivityIcon, Play, Check, ArrowUpIcon, ArrowDownIcon, ShoppingCart, MessageCircle, Camera, Music, MapPin, Calendar, User, Settings, Heart, Star, Video, Image, Link, Phone, Mail } from 'lucide-react';
|
|
10
10
|
import { Slot } from '@radix-ui/react-slot';
|
|
11
11
|
import { cva } from 'class-variance-authority';
|
|
12
12
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
@@ -9923,6 +9923,831 @@ function AudioPlayer({
|
|
|
9923
9923
|
}) })
|
|
9924
9924
|
] });
|
|
9925
9925
|
}
|
|
9926
|
+
function BrandFacebook({ className }) {
|
|
9927
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
|
|
9928
|
+
}
|
|
9929
|
+
function BrandInstagram({ className }) {
|
|
9930
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" }) });
|
|
9931
|
+
}
|
|
9932
|
+
function BrandX({ className }) {
|
|
9933
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z" }) });
|
|
9934
|
+
}
|
|
9935
|
+
function BrandLinkedin({ className }) {
|
|
9936
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" }) });
|
|
9937
|
+
}
|
|
9938
|
+
function BrandYoutube({ className }) {
|
|
9939
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) });
|
|
9940
|
+
}
|
|
9941
|
+
function BrandGithub({ className }) {
|
|
9942
|
+
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12z" }) });
|
|
9943
|
+
}
|
|
9944
|
+
var ICON_MAP = {
|
|
9945
|
+
globe: (c) => /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: c }),
|
|
9946
|
+
facebook: (c) => /* @__PURE__ */ jsx(BrandFacebook, { className: c }),
|
|
9947
|
+
instagram: (c) => /* @__PURE__ */ jsx(BrandInstagram, { className: c }),
|
|
9948
|
+
twitter: (c) => /* @__PURE__ */ jsx(BrandX, { className: c }),
|
|
9949
|
+
x: (c) => /* @__PURE__ */ jsx(BrandX, { className: c }),
|
|
9950
|
+
linkedin: (c) => /* @__PURE__ */ jsx(BrandLinkedin, { className: c }),
|
|
9951
|
+
youtube: (c) => /* @__PURE__ */ jsx(BrandYoutube, { className: c }),
|
|
9952
|
+
github: (c) => /* @__PURE__ */ jsx(BrandGithub, { className: c }),
|
|
9953
|
+
mail: (c) => /* @__PURE__ */ jsx(Mail, { "aria-hidden": "true", className: c }),
|
|
9954
|
+
email: (c) => /* @__PURE__ */ jsx(Mail, { "aria-hidden": "true", className: c }),
|
|
9955
|
+
phone: (c) => /* @__PURE__ */ jsx(Phone, { "aria-hidden": "true", className: c }),
|
|
9956
|
+
link: (c) => /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: c }),
|
|
9957
|
+
url: (c) => /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: c }),
|
|
9958
|
+
image: (c) => /* @__PURE__ */ jsx(Image, { "aria-hidden": "true", className: c }),
|
|
9959
|
+
photo: (c) => /* @__PURE__ */ jsx(Image, { "aria-hidden": "true", className: c }),
|
|
9960
|
+
video: (c) => /* @__PURE__ */ jsx(Video, { "aria-hidden": "true", className: c }),
|
|
9961
|
+
star: (c) => /* @__PURE__ */ jsx(Star, { "aria-hidden": "true", className: c }),
|
|
9962
|
+
heart: (c) => /* @__PURE__ */ jsx(Heart, { "aria-hidden": "true", className: c }),
|
|
9963
|
+
check: (c) => /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: c }),
|
|
9964
|
+
settings: (c) => /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: c }),
|
|
9965
|
+
user: (c) => /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: c }),
|
|
9966
|
+
account: (c) => /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: c }),
|
|
9967
|
+
calendar: (c) => /* @__PURE__ */ jsx(Calendar, { "aria-hidden": "true", className: c }),
|
|
9968
|
+
"map-pin": (c) => /* @__PURE__ */ jsx(MapPin, { "aria-hidden": "true", className: c }),
|
|
9969
|
+
mappin: (c) => /* @__PURE__ */ jsx(MapPin, { "aria-hidden": "true", className: c }),
|
|
9970
|
+
location: (c) => /* @__PURE__ */ jsx(MapPin, { "aria-hidden": "true", className: c }),
|
|
9971
|
+
music: (c) => /* @__PURE__ */ jsx(Music, { "aria-hidden": "true", className: c }),
|
|
9972
|
+
camera: (c) => /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true", className: c }),
|
|
9973
|
+
message: (c) => /* @__PURE__ */ jsx(MessageCircle, { "aria-hidden": "true", className: c }),
|
|
9974
|
+
chat: (c) => /* @__PURE__ */ jsx(MessageCircle, { "aria-hidden": "true", className: c }),
|
|
9975
|
+
cart: (c) => /* @__PURE__ */ jsx(ShoppingCart, { "aria-hidden": "true", className: c }),
|
|
9976
|
+
shop: (c) => /* @__PURE__ */ jsx(ShoppingCart, { "aria-hidden": "true", className: c })
|
|
9977
|
+
};
|
|
9978
|
+
function resolveIconName(name, className = "size-5 shrink-0") {
|
|
9979
|
+
if (!name) return null;
|
|
9980
|
+
const render = ICON_MAP[name.trim().toLowerCase()];
|
|
9981
|
+
return render ? render(className) : null;
|
|
9982
|
+
}
|
|
9983
|
+
var DEFAULT_OPEN_GRAPH_ENDPOINT = "/api/opengraph";
|
|
9984
|
+
function firstString(...values) {
|
|
9985
|
+
for (const value of values) {
|
|
9986
|
+
if (typeof value === "string" && value.trim()) {
|
|
9987
|
+
return value.trim();
|
|
9988
|
+
}
|
|
9989
|
+
}
|
|
9990
|
+
return null;
|
|
9991
|
+
}
|
|
9992
|
+
function imageUrlFromOpenGraph(image) {
|
|
9993
|
+
if (!image) return null;
|
|
9994
|
+
if (typeof image === "string") return firstString(image);
|
|
9995
|
+
return firstString(image.url);
|
|
9996
|
+
}
|
|
9997
|
+
function domainFromUrl(url) {
|
|
9998
|
+
try {
|
|
9999
|
+
return new URL(url).hostname.replace(/^www\./, "");
|
|
10000
|
+
} catch {
|
|
10001
|
+
return url;
|
|
10002
|
+
}
|
|
10003
|
+
}
|
|
10004
|
+
function normalizeUrlForPreview(input) {
|
|
10005
|
+
const trimmed = input.trim();
|
|
10006
|
+
if (!trimmed) return "";
|
|
10007
|
+
return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
|
|
10008
|
+
}
|
|
10009
|
+
function buildEndpointUrl(endpoint, url) {
|
|
10010
|
+
const separator = endpoint.includes("?") ? "&" : "?";
|
|
10011
|
+
return `${endpoint}${separator}url=${encodeURIComponent(url)}`;
|
|
10012
|
+
}
|
|
10013
|
+
function getErrorMessage(body) {
|
|
10014
|
+
if (body && typeof body === "object" && "error" in body && typeof body.error === "string") {
|
|
10015
|
+
return body.error;
|
|
10016
|
+
}
|
|
10017
|
+
return "Could not load a preview for that link.";
|
|
10018
|
+
}
|
|
10019
|
+
function extractLinkPreview(data, fallbackUrl = "") {
|
|
10020
|
+
const hybridGraph = data.hybridGraph;
|
|
10021
|
+
const openGraph = data.openGraph;
|
|
10022
|
+
const htmlInferred = data.htmlInferred;
|
|
10023
|
+
const url = firstString(
|
|
10024
|
+
data.finalUrl,
|
|
10025
|
+
data.url,
|
|
10026
|
+
data.normalizedUrl,
|
|
10027
|
+
data.requestedUrl,
|
|
10028
|
+
openGraph?.url,
|
|
10029
|
+
hybridGraph?.url,
|
|
10030
|
+
htmlInferred?.url
|
|
10031
|
+
) ?? normalizeUrlForPreview(fallbackUrl);
|
|
10032
|
+
return {
|
|
10033
|
+
url,
|
|
10034
|
+
domain: domainFromUrl(url),
|
|
10035
|
+
title: firstString(hybridGraph?.title, openGraph?.title, htmlInferred?.title),
|
|
10036
|
+
description: firstString(
|
|
10037
|
+
hybridGraph?.description,
|
|
10038
|
+
openGraph?.description,
|
|
10039
|
+
htmlInferred?.description
|
|
10040
|
+
),
|
|
10041
|
+
image: firstString(
|
|
10042
|
+
hybridGraph?.image,
|
|
10043
|
+
imageUrlFromOpenGraph(openGraph?.image ?? null),
|
|
10044
|
+
htmlInferred?.image,
|
|
10045
|
+
htmlInferred?.images?.[0]
|
|
10046
|
+
),
|
|
10047
|
+
favicon: firstString(hybridGraph?.favicon, htmlInferred?.favicon),
|
|
10048
|
+
siteName: firstString(
|
|
10049
|
+
htmlInferred?.site_name,
|
|
10050
|
+
openGraph?.site_name,
|
|
10051
|
+
hybridGraph?.site_name
|
|
10052
|
+
)
|
|
10053
|
+
};
|
|
10054
|
+
}
|
|
10055
|
+
async function fetchOpenGraphPreview(url, endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT) {
|
|
10056
|
+
const response = await fetch(buildEndpointUrl(endpoint, url), {
|
|
10057
|
+
headers: { Accept: "application/json" }
|
|
10058
|
+
});
|
|
10059
|
+
let body = null;
|
|
10060
|
+
try {
|
|
10061
|
+
body = await response.json();
|
|
10062
|
+
} catch {
|
|
10063
|
+
body = null;
|
|
10064
|
+
}
|
|
10065
|
+
if (!response.ok) {
|
|
10066
|
+
throw new Error(getErrorMessage(body));
|
|
10067
|
+
}
|
|
10068
|
+
return body;
|
|
10069
|
+
}
|
|
10070
|
+
function LinkInput({
|
|
10071
|
+
label = "Add a link",
|
|
10072
|
+
icon,
|
|
10073
|
+
iconName,
|
|
10074
|
+
placeholder = "Paste or type a URL...",
|
|
10075
|
+
defaultUrl = "",
|
|
10076
|
+
defaultValue = null,
|
|
10077
|
+
value,
|
|
10078
|
+
defaultExpanded = false,
|
|
10079
|
+
expanded: controlledExpanded,
|
|
10080
|
+
disabled = false,
|
|
10081
|
+
endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT,
|
|
10082
|
+
fetcher,
|
|
10083
|
+
onSubmit,
|
|
10084
|
+
onValueChange,
|
|
10085
|
+
onClear,
|
|
10086
|
+
onExpandedChange,
|
|
10087
|
+
className
|
|
10088
|
+
}) {
|
|
10089
|
+
const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
|
|
10090
|
+
const [url, setUrl] = useState(defaultUrl || defaultValue?.url || "");
|
|
10091
|
+
const [submittedUrl, setSubmittedUrl] = useState(
|
|
10092
|
+
defaultUrl || defaultValue?.url || ""
|
|
10093
|
+
);
|
|
10094
|
+
const [status, setStatus] = useState("idle");
|
|
10095
|
+
const [error, setError] = useState(null);
|
|
10096
|
+
const [internalPreview, setInternalPreview] = useState(
|
|
10097
|
+
defaultValue
|
|
10098
|
+
);
|
|
10099
|
+
const inputRef = useRef(null);
|
|
10100
|
+
const reactId = useId();
|
|
10101
|
+
const inputId = `link-input-${reactId}`;
|
|
10102
|
+
const errorId = `link-input-error-${reactId}`;
|
|
10103
|
+
const isExpanded = controlledExpanded === void 0 ? uncontrolledExpanded : controlledExpanded;
|
|
10104
|
+
const isPreviewControlled = value !== void 0;
|
|
10105
|
+
const preview = (isPreviewControlled ? value : internalPreview) ?? null;
|
|
10106
|
+
const isLoading = status === "loading";
|
|
10107
|
+
const hasPreview = preview !== null;
|
|
10108
|
+
const resolvedIcon = icon ?? resolveIconName(iconName, "size-5") ?? /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-5" });
|
|
10109
|
+
const resolvedFetcher = useCallback(
|
|
10110
|
+
(nextUrl) => fetcher?.(nextUrl) ?? fetchOpenGraphPreview(nextUrl, endpoint),
|
|
10111
|
+
[endpoint, fetcher]
|
|
10112
|
+
);
|
|
10113
|
+
const setExpanded = useCallback(
|
|
10114
|
+
(next) => {
|
|
10115
|
+
if (controlledExpanded === void 0) {
|
|
10116
|
+
setUncontrolledExpanded(next);
|
|
10117
|
+
}
|
|
10118
|
+
onExpandedChange?.(next);
|
|
10119
|
+
},
|
|
10120
|
+
[controlledExpanded, onExpandedChange]
|
|
10121
|
+
);
|
|
10122
|
+
useEffect(() => {
|
|
10123
|
+
if (value !== void 0) {
|
|
10124
|
+
const nextUrl = value?.url ?? "";
|
|
10125
|
+
setSubmittedUrl(nextUrl);
|
|
10126
|
+
if (!isExpanded) setUrl(nextUrl);
|
|
10127
|
+
}
|
|
10128
|
+
}, [isExpanded, value]);
|
|
10129
|
+
useEffect(() => {
|
|
10130
|
+
if (!isExpanded) return;
|
|
10131
|
+
const timeout = window.setTimeout(() => inputRef.current?.focus(), 60);
|
|
10132
|
+
return () => window.clearTimeout(timeout);
|
|
10133
|
+
}, [isExpanded]);
|
|
10134
|
+
async function handleSubmit(event) {
|
|
10135
|
+
event?.preventDefault();
|
|
10136
|
+
const nextUrl = url.trim();
|
|
10137
|
+
if (!nextUrl || isLoading || disabled) return;
|
|
10138
|
+
setStatus("loading");
|
|
10139
|
+
setError(null);
|
|
10140
|
+
try {
|
|
10141
|
+
const data = await resolvedFetcher(nextUrl);
|
|
10142
|
+
const nextPreview = extractLinkPreview(data, nextUrl);
|
|
10143
|
+
if (!isPreviewControlled) {
|
|
10144
|
+
setInternalPreview(nextPreview);
|
|
10145
|
+
}
|
|
10146
|
+
setUrl(nextPreview.url);
|
|
10147
|
+
setSubmittedUrl(nextPreview.url);
|
|
10148
|
+
setStatus("idle");
|
|
10149
|
+
setExpanded(false);
|
|
10150
|
+
onValueChange?.(nextPreview, data);
|
|
10151
|
+
onSubmit?.(data, nextPreview);
|
|
10152
|
+
} catch (submitError) {
|
|
10153
|
+
setStatus("error");
|
|
10154
|
+
setError(
|
|
10155
|
+
submitError instanceof Error ? submitError.message : "Something went wrong."
|
|
10156
|
+
);
|
|
10157
|
+
}
|
|
10158
|
+
}
|
|
10159
|
+
function handleEdit() {
|
|
10160
|
+
if (disabled) return;
|
|
10161
|
+
setUrl(submittedUrl);
|
|
10162
|
+
setStatus("idle");
|
|
10163
|
+
setError(null);
|
|
10164
|
+
setExpanded(true);
|
|
10165
|
+
}
|
|
10166
|
+
function handleClose() {
|
|
10167
|
+
setUrl(submittedUrl);
|
|
10168
|
+
setStatus("idle");
|
|
10169
|
+
setError(null);
|
|
10170
|
+
setExpanded(false);
|
|
10171
|
+
}
|
|
10172
|
+
function handleDelete() {
|
|
10173
|
+
if (disabled) return;
|
|
10174
|
+
if (!isPreviewControlled) {
|
|
10175
|
+
setInternalPreview(null);
|
|
10176
|
+
}
|
|
10177
|
+
setUrl("");
|
|
10178
|
+
setSubmittedUrl("");
|
|
10179
|
+
setStatus("idle");
|
|
10180
|
+
setError(null);
|
|
10181
|
+
setExpanded(false);
|
|
10182
|
+
onValueChange?.(null, null);
|
|
10183
|
+
onClear?.();
|
|
10184
|
+
}
|
|
10185
|
+
return /* @__PURE__ */ jsxs(
|
|
10186
|
+
"div",
|
|
10187
|
+
{
|
|
10188
|
+
"data-state": isExpanded ? "editing" : hasPreview ? "filled" : "idle",
|
|
10189
|
+
className: cn(
|
|
10190
|
+
"group/link-input overflow-hidden rounded-xl border bg-card text-card-foreground transition-colors",
|
|
10191
|
+
isExpanded || hasPreview ? "border-foreground/80 shadow-sm" : "border-border hover:border-foreground/30",
|
|
10192
|
+
disabled && "opacity-60",
|
|
10193
|
+
className
|
|
10194
|
+
),
|
|
10195
|
+
children: [
|
|
10196
|
+
isExpanded ? /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col gap-3 px-4 py-3.5", children: [
|
|
10197
|
+
/* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
|
|
10198
|
+
/* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label }),
|
|
10199
|
+
/* @__PURE__ */ jsx(
|
|
10200
|
+
"button",
|
|
10201
|
+
{
|
|
10202
|
+
type: "button",
|
|
10203
|
+
onClick: handleClose,
|
|
10204
|
+
"aria-label": "Close link input",
|
|
10205
|
+
className: "absolute right-2.5 top-2.5 flex size-6 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60",
|
|
10206
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-4" })
|
|
10207
|
+
}
|
|
10208
|
+
)
|
|
10209
|
+
] }) : hasPreview ? /* @__PURE__ */ jsx(
|
|
10210
|
+
LinkInputPreview,
|
|
10211
|
+
{
|
|
10212
|
+
preview,
|
|
10213
|
+
onEdit: handleEdit,
|
|
10214
|
+
onDelete: handleDelete,
|
|
10215
|
+
disabled
|
|
10216
|
+
}
|
|
10217
|
+
) : /* @__PURE__ */ jsxs(
|
|
10218
|
+
"button",
|
|
10219
|
+
{
|
|
10220
|
+
type: "button",
|
|
10221
|
+
onClick: () => setExpanded(true),
|
|
10222
|
+
"aria-expanded": false,
|
|
10223
|
+
disabled,
|
|
10224
|
+
className: "flex w-full flex-col gap-3 px-4 py-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed",
|
|
10225
|
+
children: [
|
|
10226
|
+
/* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
|
|
10227
|
+
/* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label })
|
|
10228
|
+
]
|
|
10229
|
+
}
|
|
10230
|
+
),
|
|
10231
|
+
isExpanded && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
|
|
10232
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
10233
|
+
/* @__PURE__ */ jsx(
|
|
10234
|
+
Input,
|
|
10235
|
+
{
|
|
10236
|
+
ref: inputRef,
|
|
10237
|
+
id: inputId,
|
|
10238
|
+
type: "text",
|
|
10239
|
+
inputMode: "url",
|
|
10240
|
+
autoComplete: "off",
|
|
10241
|
+
spellCheck: false,
|
|
10242
|
+
value: url,
|
|
10243
|
+
disabled: disabled || isLoading,
|
|
10244
|
+
"aria-invalid": status === "error",
|
|
10245
|
+
"aria-describedby": status === "error" ? errorId : void 0,
|
|
10246
|
+
onChange: (event) => {
|
|
10247
|
+
setUrl(event.target.value);
|
|
10248
|
+
if (status === "error") {
|
|
10249
|
+
setStatus("idle");
|
|
10250
|
+
setError(null);
|
|
10251
|
+
}
|
|
10252
|
+
},
|
|
10253
|
+
placeholder,
|
|
10254
|
+
className: cn(
|
|
10255
|
+
"h-10 rounded-lg bg-background pr-[5.25rem] text-sm shadow-sm placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40",
|
|
10256
|
+
status === "error" && "border-destructive/60"
|
|
10257
|
+
)
|
|
10258
|
+
}
|
|
10259
|
+
),
|
|
10260
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-1.5 flex items-center", children: /* @__PURE__ */ jsxs(
|
|
10261
|
+
Button,
|
|
10262
|
+
{
|
|
10263
|
+
type: "submit",
|
|
10264
|
+
size: "sm",
|
|
10265
|
+
disabled: !url.trim() || isLoading || disabled,
|
|
10266
|
+
className: "h-7 gap-1 px-2",
|
|
10267
|
+
children: [
|
|
10268
|
+
isLoading ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: "size-3.5" }),
|
|
10269
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs", children: isLoading ? "Loading" : "Enter" })
|
|
10270
|
+
]
|
|
10271
|
+
}
|
|
10272
|
+
) })
|
|
10273
|
+
] }),
|
|
10274
|
+
status === "error" && error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "px-0.5 text-xs text-destructive", children: error }) : /* @__PURE__ */ jsxs("p", { className: "px-0.5 text-xs text-muted-foreground", children: [
|
|
10275
|
+
"Press",
|
|
10276
|
+
" ",
|
|
10277
|
+
/* @__PURE__ */ jsx("kbd", { className: "rounded border border-border bg-muted px-1 font-sans text-[0.65rem] text-muted-foreground", children: "Enter" }),
|
|
10278
|
+
" ",
|
|
10279
|
+
"to fetch a preview."
|
|
10280
|
+
] })
|
|
10281
|
+
] }) })
|
|
10282
|
+
]
|
|
10283
|
+
}
|
|
10284
|
+
);
|
|
10285
|
+
}
|
|
10286
|
+
function LinkInputPreview({
|
|
10287
|
+
preview,
|
|
10288
|
+
onEdit,
|
|
10289
|
+
onDelete,
|
|
10290
|
+
disabled
|
|
10291
|
+
}) {
|
|
10292
|
+
const [imageError, setImageError] = useState(false);
|
|
10293
|
+
const [faviconError, setFaviconError] = useState(false);
|
|
10294
|
+
const showImage = Boolean(preview.image) && !imageError;
|
|
10295
|
+
const showFavicon = Boolean(preview.favicon) && !faviconError;
|
|
10296
|
+
const title = preview.title || preview.siteName || preview.domain || "Untitled link";
|
|
10297
|
+
useEffect(() => {
|
|
10298
|
+
setImageError(false);
|
|
10299
|
+
setFaviconError(false);
|
|
10300
|
+
}, [preview.favicon, preview.image]);
|
|
10301
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 p-3", children: [
|
|
10302
|
+
/* @__PURE__ */ jsx(
|
|
10303
|
+
"a",
|
|
10304
|
+
{
|
|
10305
|
+
href: preview.url || "#",
|
|
10306
|
+
target: "_blank",
|
|
10307
|
+
rel: "noopener noreferrer",
|
|
10308
|
+
className: "relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
|
|
10309
|
+
children: showImage ? /* @__PURE__ */ jsx(
|
|
10310
|
+
"img",
|
|
10311
|
+
{
|
|
10312
|
+
src: preview.image,
|
|
10313
|
+
alt: "",
|
|
10314
|
+
crossOrigin: "anonymous",
|
|
10315
|
+
onError: () => setImageError(true),
|
|
10316
|
+
className: "size-full object-cover"
|
|
10317
|
+
}
|
|
10318
|
+
) : showFavicon ? /* @__PURE__ */ jsx(
|
|
10319
|
+
"img",
|
|
10320
|
+
{
|
|
10321
|
+
src: preview.favicon,
|
|
10322
|
+
alt: "",
|
|
10323
|
+
crossOrigin: "anonymous",
|
|
10324
|
+
onError: () => setFaviconError(true),
|
|
10325
|
+
className: "size-7"
|
|
10326
|
+
}
|
|
10327
|
+
) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-7 text-muted-foreground" })
|
|
10328
|
+
}
|
|
10329
|
+
),
|
|
10330
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-0.5", children: [
|
|
10331
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
10332
|
+
showFavicon && showImage ? /* @__PURE__ */ jsx(
|
|
10333
|
+
"img",
|
|
10334
|
+
{
|
|
10335
|
+
src: preview.favicon,
|
|
10336
|
+
alt: "",
|
|
10337
|
+
crossOrigin: "anonymous",
|
|
10338
|
+
onError: () => setFaviconError(true),
|
|
10339
|
+
className: "size-3.5 shrink-0 rounded-sm"
|
|
10340
|
+
}
|
|
10341
|
+
) : null,
|
|
10342
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: preview.domain || preview.siteName })
|
|
10343
|
+
] }),
|
|
10344
|
+
/* @__PURE__ */ jsx(
|
|
10345
|
+
"a",
|
|
10346
|
+
{
|
|
10347
|
+
href: preview.url || "#",
|
|
10348
|
+
target: "_blank",
|
|
10349
|
+
rel: "noopener noreferrer",
|
|
10350
|
+
className: "mt-0.5 line-clamp-1 text-sm font-semibold text-foreground outline-none hover:underline focus-visible:underline",
|
|
10351
|
+
children: title
|
|
10352
|
+
}
|
|
10353
|
+
),
|
|
10354
|
+
preview.description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground", children: preview.description }) : null
|
|
10355
|
+
] }),
|
|
10356
|
+
/* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center gap-1", children: [
|
|
10357
|
+
/* @__PURE__ */ jsx(
|
|
10358
|
+
Button,
|
|
10359
|
+
{
|
|
10360
|
+
type: "button",
|
|
10361
|
+
size: "icon",
|
|
10362
|
+
variant: "ghost",
|
|
10363
|
+
onClick: onEdit,
|
|
10364
|
+
disabled,
|
|
10365
|
+
"aria-label": "Edit link",
|
|
10366
|
+
className: "size-7 rounded-full",
|
|
10367
|
+
children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
|
|
10368
|
+
}
|
|
10369
|
+
),
|
|
10370
|
+
/* @__PURE__ */ jsx(
|
|
10371
|
+
Button,
|
|
10372
|
+
{
|
|
10373
|
+
type: "button",
|
|
10374
|
+
size: "icon",
|
|
10375
|
+
variant: "ghost",
|
|
10376
|
+
onClick: onDelete,
|
|
10377
|
+
disabled,
|
|
10378
|
+
"aria-label": "Delete link",
|
|
10379
|
+
className: "size-7 rounded-full",
|
|
10380
|
+
children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
|
|
10381
|
+
}
|
|
10382
|
+
)
|
|
10383
|
+
] })
|
|
10384
|
+
] });
|
|
10385
|
+
}
|
|
10386
|
+
function LinkInputGroup({
|
|
10387
|
+
options,
|
|
10388
|
+
onSubmit,
|
|
10389
|
+
onValueChange,
|
|
10390
|
+
onClear,
|
|
10391
|
+
className
|
|
10392
|
+
}) {
|
|
10393
|
+
const [openId, setOpenId] = useState(null);
|
|
10394
|
+
return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", className), children: options.map(({ id, ...option }) => /* @__PURE__ */ jsx(
|
|
10395
|
+
LinkInput,
|
|
10396
|
+
{
|
|
10397
|
+
...option,
|
|
10398
|
+
expanded: openId === id,
|
|
10399
|
+
onExpandedChange: (next) => setOpenId((currentId) => {
|
|
10400
|
+
if (next) return id;
|
|
10401
|
+
return currentId === id ? null : currentId;
|
|
10402
|
+
}),
|
|
10403
|
+
onSubmit: (data, preview) => {
|
|
10404
|
+
setOpenId(null);
|
|
10405
|
+
onSubmit?.(id, data, preview);
|
|
10406
|
+
},
|
|
10407
|
+
onValueChange: (preview, data) => {
|
|
10408
|
+
onValueChange?.(id, preview, data);
|
|
10409
|
+
},
|
|
10410
|
+
onClear: () => onClear?.(id)
|
|
10411
|
+
},
|
|
10412
|
+
id
|
|
10413
|
+
)) });
|
|
10414
|
+
}
|
|
10415
|
+
var getDimensionStyle = (width, height) => {
|
|
10416
|
+
const style = {};
|
|
10417
|
+
if (width) style.width = typeof width === "number" ? `${width}px` : width;
|
|
10418
|
+
if (height) style.height = typeof height === "number" ? `${height}px` : height;
|
|
10419
|
+
return style;
|
|
10420
|
+
};
|
|
10421
|
+
var getThumbnailSizing = (thumbnailHeight) => ({
|
|
10422
|
+
heightClass: typeof thumbnailHeight === "number" ? "" : thumbnailHeight,
|
|
10423
|
+
heightStyle: typeof thumbnailHeight === "number" ? { height: `${thumbnailHeight}px` } : void 0
|
|
10424
|
+
});
|
|
10425
|
+
function MediaFallback() {
|
|
10426
|
+
return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-28 w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(ImageIcon, { className: "size-7", "aria-hidden": "true" }) });
|
|
10427
|
+
}
|
|
10428
|
+
function MediaOptionItem({
|
|
10429
|
+
option,
|
|
10430
|
+
isChecked,
|
|
10431
|
+
onToggle,
|
|
10432
|
+
thumbnailHeight
|
|
10433
|
+
}) {
|
|
10434
|
+
const {
|
|
10435
|
+
value,
|
|
10436
|
+
label,
|
|
10437
|
+
subtitle,
|
|
10438
|
+
mediaUrl,
|
|
10439
|
+
mediaType,
|
|
10440
|
+
thumbnailUrl,
|
|
10441
|
+
width,
|
|
10442
|
+
height,
|
|
10443
|
+
disabled
|
|
10444
|
+
} = option;
|
|
10445
|
+
const videoRef = useRef(null);
|
|
10446
|
+
const [playing, setPlaying] = useState(false);
|
|
10447
|
+
const [mediaError, setMediaError] = useState(!mediaUrl);
|
|
10448
|
+
const sizeStyle = getDimensionStyle(width, height);
|
|
10449
|
+
const { heightClass, heightStyle } = getThumbnailSizing(thumbnailHeight);
|
|
10450
|
+
const handleMouseEnter = () => {
|
|
10451
|
+
if (mediaType === "video" && videoRef.current && !disabled) {
|
|
10452
|
+
videoRef.current.play().then(() => setPlaying(true)).catch(() => {
|
|
10453
|
+
});
|
|
10454
|
+
}
|
|
10455
|
+
};
|
|
10456
|
+
const handleMouseLeave = () => {
|
|
10457
|
+
if (mediaType === "video" && videoRef.current) {
|
|
10458
|
+
videoRef.current.pause();
|
|
10459
|
+
setPlaying(false);
|
|
10460
|
+
}
|
|
10461
|
+
};
|
|
10462
|
+
const handleVideoClick = (e) => {
|
|
10463
|
+
e.stopPropagation();
|
|
10464
|
+
if (mediaType !== "video" || !videoRef.current || disabled) return;
|
|
10465
|
+
if (playing) {
|
|
10466
|
+
videoRef.current.pause();
|
|
10467
|
+
setPlaying(false);
|
|
10468
|
+
return;
|
|
10469
|
+
}
|
|
10470
|
+
videoRef.current.play().then(() => setPlaying(true)).catch(() => {
|
|
10471
|
+
});
|
|
10472
|
+
};
|
|
10473
|
+
return /* @__PURE__ */ jsxs(
|
|
10474
|
+
"label",
|
|
10475
|
+
{
|
|
10476
|
+
className: cn(
|
|
10477
|
+
"group block h-full",
|
|
10478
|
+
disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
|
|
10479
|
+
),
|
|
10480
|
+
style: sizeStyle,
|
|
10481
|
+
children: [
|
|
10482
|
+
/* @__PURE__ */ jsx(
|
|
10483
|
+
"input",
|
|
10484
|
+
{
|
|
10485
|
+
type: "checkbox",
|
|
10486
|
+
className: "peer sr-only",
|
|
10487
|
+
checked: isChecked,
|
|
10488
|
+
disabled,
|
|
10489
|
+
onChange: () => onToggle(value)
|
|
10490
|
+
}
|
|
10491
|
+
),
|
|
10492
|
+
/* @__PURE__ */ jsxs(
|
|
10493
|
+
"span",
|
|
10494
|
+
{
|
|
10495
|
+
className: cn(
|
|
10496
|
+
"relative flex h-full flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-xs transition-all duration-200 ease-in-out",
|
|
10497
|
+
"border-input hover:border-border hover:shadow-sm",
|
|
10498
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
|
|
10499
|
+
isChecked && "border-primary shadow-sm ring-1 ring-primary/30 hover:border-primary",
|
|
10500
|
+
disabled && "pointer-events-none"
|
|
10501
|
+
),
|
|
10502
|
+
children: [
|
|
10503
|
+
/* @__PURE__ */ jsxs(
|
|
10504
|
+
"span",
|
|
10505
|
+
{
|
|
10506
|
+
className: cn("relative block overflow-hidden bg-muted", heightClass),
|
|
10507
|
+
style: heightStyle,
|
|
10508
|
+
onMouseEnter: handleMouseEnter,
|
|
10509
|
+
onMouseLeave: handleMouseLeave,
|
|
10510
|
+
children: [
|
|
10511
|
+
mediaError ? /* @__PURE__ */ jsx(MediaFallback, {}) : mediaType === "image" ? /* @__PURE__ */ jsx(
|
|
10512
|
+
"img",
|
|
10513
|
+
{
|
|
10514
|
+
src: mediaUrl,
|
|
10515
|
+
alt: label,
|
|
10516
|
+
className: "h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-[1.015]",
|
|
10517
|
+
onError: () => setMediaError(true)
|
|
10518
|
+
}
|
|
10519
|
+
) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10520
|
+
/* @__PURE__ */ jsx(
|
|
10521
|
+
"video",
|
|
10522
|
+
{
|
|
10523
|
+
ref: videoRef,
|
|
10524
|
+
src: mediaUrl,
|
|
10525
|
+
poster: thumbnailUrl,
|
|
10526
|
+
muted: true,
|
|
10527
|
+
loop: true,
|
|
10528
|
+
playsInline: true,
|
|
10529
|
+
preload: "metadata",
|
|
10530
|
+
onClick: handleVideoClick,
|
|
10531
|
+
onError: () => setMediaError(true),
|
|
10532
|
+
className: cn(
|
|
10533
|
+
"h-full w-full object-cover transition duration-300 ease-out group-hover:scale-[1.015]",
|
|
10534
|
+
playing ? "grayscale-0" : "grayscale"
|
|
10535
|
+
)
|
|
10536
|
+
}
|
|
10537
|
+
),
|
|
10538
|
+
/* @__PURE__ */ jsx(
|
|
10539
|
+
"span",
|
|
10540
|
+
{
|
|
10541
|
+
className: cn(
|
|
10542
|
+
"absolute bottom-2 left-2 flex size-7 items-center justify-center rounded-full bg-background/85 text-foreground shadow-xs backdrop-blur",
|
|
10543
|
+
playing && "opacity-0"
|
|
10544
|
+
),
|
|
10545
|
+
"aria-hidden": "true",
|
|
10546
|
+
children: /* @__PURE__ */ jsx(Play, { className: "ml-0.5 size-3.5 fill-current" })
|
|
10547
|
+
}
|
|
10548
|
+
)
|
|
10549
|
+
] }),
|
|
10550
|
+
/* @__PURE__ */ jsx(
|
|
10551
|
+
"span",
|
|
10552
|
+
{
|
|
10553
|
+
className: cn(
|
|
10554
|
+
"absolute right-3 top-3 flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xs transition-all duration-200",
|
|
10555
|
+
isChecked ? "scale-100 opacity-100 ring-2 ring-white ring-offset-2" : "scale-75 opacity-0"
|
|
10556
|
+
),
|
|
10557
|
+
"aria-hidden": "true",
|
|
10558
|
+
children: /* @__PURE__ */ jsx(Check, { className: "size-3.5 stroke-[2.5]" })
|
|
10559
|
+
}
|
|
10560
|
+
)
|
|
10561
|
+
]
|
|
10562
|
+
}
|
|
10563
|
+
),
|
|
10564
|
+
/* @__PURE__ */ jsxs(
|
|
10565
|
+
"span",
|
|
10566
|
+
{
|
|
10567
|
+
className: cn(
|
|
10568
|
+
"flex min-h-[82px] flex-col gap-1 border-t border-border bg-card px-3 py-3 text-card-foreground",
|
|
10569
|
+
isChecked && "bg-primary text-primary-foreground"
|
|
10570
|
+
),
|
|
10571
|
+
children: [
|
|
10572
|
+
/* @__PURE__ */ jsx("span", { className: "line-clamp-1 text-sm font-semibold leading-5", children: label }),
|
|
10573
|
+
subtitle && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm leading-5", children: subtitle })
|
|
10574
|
+
]
|
|
10575
|
+
}
|
|
10576
|
+
)
|
|
10577
|
+
]
|
|
10578
|
+
}
|
|
10579
|
+
)
|
|
10580
|
+
]
|
|
10581
|
+
}
|
|
10582
|
+
);
|
|
10583
|
+
}
|
|
10584
|
+
function MediaCheckboxes({
|
|
10585
|
+
options,
|
|
10586
|
+
selectedValues,
|
|
10587
|
+
defaultSelectedValues,
|
|
10588
|
+
onSelect,
|
|
10589
|
+
minSelection = 0,
|
|
10590
|
+
maxSelection,
|
|
10591
|
+
className,
|
|
10592
|
+
thumbnailHeight = "h-48"
|
|
10593
|
+
}) {
|
|
10594
|
+
const isControlled = Array.isArray(selectedValues);
|
|
10595
|
+
const [internal, setInternal] = useState(
|
|
10596
|
+
defaultSelectedValues ?? []
|
|
10597
|
+
);
|
|
10598
|
+
const current = isControlled ? selectedValues : internal;
|
|
10599
|
+
const max = maxSelection ?? options.length;
|
|
10600
|
+
const toggleOption = useCallback(
|
|
10601
|
+
(value) => {
|
|
10602
|
+
const isSelected = current.includes(value);
|
|
10603
|
+
let updated;
|
|
10604
|
+
if (isSelected) {
|
|
10605
|
+
updated = current.filter((v) => v !== value);
|
|
10606
|
+
if (updated.length < minSelection) return;
|
|
10607
|
+
} else if (max === 1) {
|
|
10608
|
+
updated = [value];
|
|
10609
|
+
} else {
|
|
10610
|
+
if (current.length >= max) return;
|
|
10611
|
+
updated = [...current, value];
|
|
10612
|
+
}
|
|
10613
|
+
if (!isControlled) setInternal(updated);
|
|
10614
|
+
onSelect?.(updated);
|
|
10615
|
+
},
|
|
10616
|
+
[current, isControlled, max, minSelection, onSelect]
|
|
10617
|
+
);
|
|
10618
|
+
return /* @__PURE__ */ jsx(
|
|
10619
|
+
"fieldset",
|
|
10620
|
+
{
|
|
10621
|
+
className: cn(
|
|
10622
|
+
"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4",
|
|
10623
|
+
className
|
|
10624
|
+
),
|
|
10625
|
+
children: options.map((option) => /* @__PURE__ */ jsx(
|
|
10626
|
+
MediaOptionItem,
|
|
10627
|
+
{
|
|
10628
|
+
option,
|
|
10629
|
+
isChecked: current.includes(option.value),
|
|
10630
|
+
onToggle: toggleOption,
|
|
10631
|
+
thumbnailHeight
|
|
10632
|
+
},
|
|
10633
|
+
option.value
|
|
10634
|
+
))
|
|
10635
|
+
}
|
|
10636
|
+
);
|
|
10637
|
+
}
|
|
10638
|
+
function renderTileIcon(item) {
|
|
10639
|
+
if (item.icon != null) {
|
|
10640
|
+
if (isValidElement(item.icon)) {
|
|
10641
|
+
return cloneElement(item.icon, {
|
|
10642
|
+
className: cn(item.icon.props.className, "size-5 shrink-0")
|
|
10643
|
+
});
|
|
10644
|
+
}
|
|
10645
|
+
return item.icon;
|
|
10646
|
+
}
|
|
10647
|
+
return resolveIconName(item.iconName);
|
|
10648
|
+
}
|
|
10649
|
+
function IconCheckboxes({
|
|
10650
|
+
options,
|
|
10651
|
+
selectedValues,
|
|
10652
|
+
defaultSelectedValues,
|
|
10653
|
+
onSelect,
|
|
10654
|
+
minSelection = 0,
|
|
10655
|
+
maxSelection,
|
|
10656
|
+
className
|
|
10657
|
+
}) {
|
|
10658
|
+
const isControlled = Array.isArray(selectedValues);
|
|
10659
|
+
const [internal, setInternal] = useState(
|
|
10660
|
+
defaultSelectedValues ?? []
|
|
10661
|
+
);
|
|
10662
|
+
const current = isControlled ? selectedValues : internal;
|
|
10663
|
+
const max = maxSelection ?? options.length;
|
|
10664
|
+
const commit = (updated) => {
|
|
10665
|
+
if (!isControlled) setInternal(updated);
|
|
10666
|
+
onSelect?.(updated);
|
|
10667
|
+
};
|
|
10668
|
+
const toggleOption = (value) => {
|
|
10669
|
+
const isSelected = current.includes(value);
|
|
10670
|
+
let updated;
|
|
10671
|
+
if (isSelected) {
|
|
10672
|
+
updated = current.filter((v) => v !== value);
|
|
10673
|
+
if (updated.length < minSelection) return;
|
|
10674
|
+
} else if (max === 1) {
|
|
10675
|
+
updated = [value];
|
|
10676
|
+
} else {
|
|
10677
|
+
if (current.length >= max) return;
|
|
10678
|
+
updated = [...current, value];
|
|
10679
|
+
}
|
|
10680
|
+
commit(updated);
|
|
10681
|
+
};
|
|
10682
|
+
return /* @__PURE__ */ jsx(
|
|
10683
|
+
"fieldset",
|
|
10684
|
+
{
|
|
10685
|
+
className: cn(
|
|
10686
|
+
"grid w-full max-w-sm grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-3",
|
|
10687
|
+
className
|
|
10688
|
+
),
|
|
10689
|
+
children: options.map((item) => {
|
|
10690
|
+
const { value, label, disabled } = item;
|
|
10691
|
+
const isChecked = current.includes(value);
|
|
10692
|
+
return /* @__PURE__ */ jsxs(
|
|
10693
|
+
"label",
|
|
10694
|
+
{
|
|
10695
|
+
className: cn(
|
|
10696
|
+
"block",
|
|
10697
|
+
disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
|
|
10698
|
+
),
|
|
10699
|
+
children: [
|
|
10700
|
+
/* @__PURE__ */ jsx(
|
|
10701
|
+
"input",
|
|
10702
|
+
{
|
|
10703
|
+
type: "checkbox",
|
|
10704
|
+
className: "peer sr-only",
|
|
10705
|
+
checked: isChecked,
|
|
10706
|
+
disabled,
|
|
10707
|
+
onChange: () => toggleOption(value)
|
|
10708
|
+
}
|
|
10709
|
+
),
|
|
10710
|
+
/* @__PURE__ */ jsxs(
|
|
10711
|
+
"span",
|
|
10712
|
+
{
|
|
10713
|
+
className: cn(
|
|
10714
|
+
"relative flex min-h-[88px] flex-col items-start justify-center rounded-lg border bg-card px-4 py-3 text-left text-muted-foreground transition-all duration-200 ease-in-out",
|
|
10715
|
+
"border-input hover:border-border hover:bg-accent/40",
|
|
10716
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
|
|
10717
|
+
isChecked && "border-primary bg-primary/5 text-primary shadow-xs ring-1 ring-primary/20 hover:border-primary hover:bg-primary/5",
|
|
10718
|
+
disabled && "pointer-events-none"
|
|
10719
|
+
),
|
|
10720
|
+
children: [
|
|
10721
|
+
/* @__PURE__ */ jsx(
|
|
10722
|
+
"span",
|
|
10723
|
+
{
|
|
10724
|
+
"aria-hidden": "true",
|
|
10725
|
+
className: "mb-3 flex size-5 items-center justify-center",
|
|
10726
|
+
children: renderTileIcon(item)
|
|
10727
|
+
}
|
|
10728
|
+
),
|
|
10729
|
+
/* @__PURE__ */ jsx("span", { className: "w-full break-words text-sm font-medium leading-tight transition-colors duration-200 ease-in-out", children: label }),
|
|
10730
|
+
/* @__PURE__ */ jsx(
|
|
10731
|
+
CircleCheck,
|
|
10732
|
+
{
|
|
10733
|
+
"aria-hidden": "true",
|
|
10734
|
+
className: cn(
|
|
10735
|
+
"absolute right-2 top-2 size-5 rounded-full fill-primary text-primary-foreground transition-all duration-200 ease-in-out",
|
|
10736
|
+
isChecked ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
|
10737
|
+
)
|
|
10738
|
+
}
|
|
10739
|
+
)
|
|
10740
|
+
]
|
|
10741
|
+
}
|
|
10742
|
+
)
|
|
10743
|
+
]
|
|
10744
|
+
},
|
|
10745
|
+
value
|
|
10746
|
+
);
|
|
10747
|
+
})
|
|
10748
|
+
}
|
|
10749
|
+
);
|
|
10750
|
+
}
|
|
9926
10751
|
var ARTIFACT_REGISTRY = {
|
|
9927
10752
|
chart: ({ payload, className }) => payload.chart ? /* @__PURE__ */ jsx(ChartContainer, { data: payload.chart, className }) : null,
|
|
9928
10753
|
metrics: ({ payload, className }) => payload.metrics ? /* @__PURE__ */ jsx(MetricsGrid, { metrics: payload.metrics, className }) : null,
|
|
@@ -9940,7 +10765,10 @@ var ARTIFACT_REGISTRY = {
|
|
|
9940
10765
|
"deep-research-progress": ({ payload, className }) => payload.deepResearchProgress ? /* @__PURE__ */ jsx(DeepResearchProgress, { ...payload.deepResearchProgress, className }) : null,
|
|
9941
10766
|
tracker: ({ payload, className }) => payload.tracker ? /* @__PURE__ */ jsx(Tracker, { ...payload.tracker, className }) : null,
|
|
9942
10767
|
"built-in-questions": ({ payload, className }) => payload.builtInQuestions ? /* @__PURE__ */ jsx(BuiltInQuestions, { ...payload.builtInQuestions, className }) : null,
|
|
9943
|
-
"audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null
|
|
10768
|
+
"audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null,
|
|
10769
|
+
"link-input": ({ payload, className }) => payload.linkInput ? /* @__PURE__ */ jsx(LinkInput, { ...payload.linkInput, className }) : null,
|
|
10770
|
+
"media-checkboxes": ({ payload, className }) => payload.mediaCheckboxes ? /* @__PURE__ */ jsx(MediaCheckboxes, { ...payload.mediaCheckboxes, className }) : null,
|
|
10771
|
+
"icon-checkboxes": ({ payload, className }) => payload.iconCheckboxes ? /* @__PURE__ */ jsx(IconCheckboxes, { ...payload.iconCheckboxes, className }) : null
|
|
9944
10772
|
};
|
|
9945
10773
|
function DataPayloadView({ payload, className }) {
|
|
9946
10774
|
const render = ARTIFACT_REGISTRY[payload.type];
|
|
@@ -11370,6 +12198,6 @@ function AgentWorkspaceSkeleton({
|
|
|
11370
12198
|
);
|
|
11371
12199
|
}
|
|
11372
12200
|
|
|
11373
|
-
export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AgentWorkspaceSkeleton, AllocationBreakdown, AnalyticsDashboard, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, BadgesArtifact, BuiltInQuestions, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DataPayloadView, DataTable, DeepResearchProgress, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, ImageGenerator, InlineSuggestionsInput, Input, KpiCardWithChart, KpiCardWithSparklines, ListingFeed, LocationsRevenueCard, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OrderedListArtifact, OverlayModal, PerformanceMetrics, PersonaSelector, PieChartArtifact, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, RowBasedDataList, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StackedSparklines, StatCardHalfCircle, StatusBadge, SystemMessage, TableListArtifact, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tracker, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
|
|
12201
|
+
export { AgentAvatar, AgentComposer, AgentConversation, AgentHandoff, AgentProvider, AgentSurface, AgentWorkspace, AgentWorkspaceComposer, AgentWorkspacePanelToggle, AgentWorkspaceSkeleton, AllocationBreakdown, AnalyticsDashboard, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, BadgesArtifact, BuiltInQuestions, Button, ChartContainer, ChatPanel, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ConfirmationPanel, ControlGrid, ConversationAnalytics, ConversationArtifact, DEFAULT_OPEN_GRAPH_ENDPOINT, DataPayloadView, DataTable, DeepResearchProgress, DynamicRenderer, EntityCard, FileDropZone, FloatingWidget, FullBleedSurface, FullscreenDashboard, GuidedLessonFlow, IconCheckboxes, ImageGenerator, InlineSuggestionsInput, Input, KpiCardWithChart, KpiCardWithSparklines, LinkInput, LinkInputGroup, ListingFeed, LocationsRevenueCard, MediaCheckboxes, MediaEditorCanvas, MediaGallery, MessageActions, MessageBubble, MessageContainer, MessageContent, MessageList, MessageWithAttachments, MessageWithFeedback, MessageWithReasoning, MessageWithSteps, MetricsGrid, MobileShell, MultimodalInput, NativeAgentProvider, NativeSurface, OnboardingWizard, OptionCards, OrderedListArtifact, OverlayModal, PerformanceMetrics, PersonaSelector, PieChartArtifact, Progress, ProgressTracker, PromptInput, PromptLibrary, QuickReplies, QuizCard, RecommendationCards, ReportView, RowBasedDataList, ScheduleTimeline, ScrollArea, ScrollBar, SemanticBuilderSocketClient, SentimentDisplay, SettingsPanel, SlotRenderer, SplitView, StackedSparklines, StatCardHalfCircle, StatusBadge, SystemMessage, TableListArtifact, TemplateSelector, Textarea, Timestamp, Tooltip4 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tracker, TypingIndicator, WritingAssistant, badgeVariants, buildSocketUrl, buttonVariants, calculatePercentage, cn, componentManifest, componentMap, componentRegistry, copyToClipboard, createMockBackend, debounce, delay, extractLinkPreview, fetchOpenGraphPreview, findComponentsByCapability, findComponentsByCategory, findComponentsBySurface, formatBytes, formatCurrency, formatNumber, formatRelativeTime, formatTime, generateId, getInitials, getManifestEntry, getSentimentBgColor, getSentimentColor, isBrowser, isInIframe, normalizeWebsiteId, parseTextWithBold, registerAllComponents, truncate, useAgent, useAgentBackend, useAgentInput, useAgentLayout, useAgentMessages, useAgentWorkspace, useAgentWorkspaceOptional, useNativeAgent, useNativeAgentOptional, useSemanticBuilder };
|
|
11374
12202
|
//# sourceMappingURL=index.js.map
|
|
11375
12203
|
//# sourceMappingURL=index.js.map
|