@kitn.ai/ui/dist/elements/link-preview.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{s as q,g as x,j as v,o as B,h as C,l as L,c as t,i,S as g,a as w,d as f,b as S,t as c,e as F,f as G}from"./chunks/define-CNSKFZCd.js";import{c as j}from"./chunks/cn-CU7UAWzk.js";import{S as k}from"./chunks/skeleton-Pjc5jiaY.js";import{l as z}from"./chunks/link-vko7AttA.js";import{e as H}from"./chunks/card-routing-C986KuUA.js";function J(a){try{return new URL(a).hostname.replace(/^www\./,"")}catch{return}}const K=["http:","https:"];function M(a){try{return K.includes(new URL(a).protocol)}catch{return!1}}var P=c('<div class="space-y-2 p-3">'),Q=c('<img role=img class="aspect-[16/9] w-full object-cover">'),T=c('<img alt class="h-3.5 w-3.5 shrink-0 rounded-sm">'),V=c('<div class="line-clamp-3 text-xs text-muted-foreground">'),W=c('<div class="space-y-1 p-3"><div class="flex items-center gap-1.5 text-xs text-muted-foreground"><span class=truncate></span></div><div class="line-clamp-2 text-sm font-semibold text-foreground">'),X=c('<a rel="noopener noreferrer">'),Y=c('<div role=img aria-label="Invalid link"><span class=truncate>Invalid link');function Z(a){return!!(a.title||a.description||a.image)}function _(a){const[n]=q(a,["cardId","data","onEmit","class"]),m=r=>{var e;return(e=n.onEmit)==null?void 0:e.call(n,r)},[D,ee]=x(),[I,re]=x(!1),[R,y]=x(!1),u=()=>n.data.url,h=v(()=>M(u())),s=v(()=>({...n.data,...D()}));B(()=>m({kind:"ready",cardId:n.cardId})),C(L(h,r=>{r||m({kind:"error",cardId:n.cardId,message:`Invalid link url: ${u()}`})})),C(L(()=>[n.data,h()],([r,e])=>{y(!1),!e||Z(r)}));const b=v(()=>s().domain??J(u())??u()),U=v(()=>s().siteName??b()),$=v(()=>s().title??b()),A=v(()=>!!s().image&&!R()),E=()=>{h()&&m({kind:"open",cardId:n.cardId,url:u(),target:"tab"})},N=r=>{r.preventDefault(),E()},O=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),E())};return t(g,{get when(){return h()},get fallback(){return(()=>{var r=Y(),e=r.firstChild;return i(r,t(z,{size:16,"aria-hidden":"true"}),e),w(()=>S(r,j("flex items-center gap-2 rounded-xl border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive dark:border-red-400/50 dark:bg-destructive/20 dark:text-red-400",n.class))),r})()},get children(){var r=X();return r.$$keydown=O,r.$$click=N,i(r,t(g,{get when(){return I()},get children(){return[t(k,{class:"aspect-[16/9] w-full rounded-none"}),(()=>{var e=P();return i(e,t(k,{class:"h-3 w-1/3"}),null),i(e,t(k,{class:"h-4 w-2/3"}),null),i(e,t(k,{class:"h-3 w-full"}),null),e})()]}}),null),i(r,t(g,{get when(){return!I()},get children(){return[t(g,{get when(){return A()},get children(){var e=Q();return e.addEventListener("error",()=>y(!0)),w(d=>{var l=s().image,o=s().imageAlt??"";return l!==d.e&&f(e,"src",d.e=l),o!==d.t&&f(e,"alt",d.t=o),d},{e:void 0,t:void 0}),e}}),(()=>{var e=W(),d=e.firstChild,l=d.firstChild,o=d.nextSibling;return i(d,t(g,{get when(){return s().favicon},get fallback(){return t(z,{size:12,class:"shrink-0 opacity-70","aria-hidden":"true"})},get children(){var p=T();return w(()=>f(p,"src",s().favicon)),p}}),l),i(l,U),i(o,$),i(e,t(g,{get when(){return s().description},get children(){var p=V();return i(p,()=>s().description),p}}),null),e})()]}}),null),w(e=>{var d=u(),l=`Open ${$()} on ${b()}`,o=j("group block overflow-hidden rounded-xl border border-border bg-card text-card-foreground no-underline outline-none transition-shadow","cursor-pointer hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring",n.class);return d!==e.e&&f(r,"href",e.e=d),l!==e.t&&f(r,"aria-label",e.t=l),o!==e.a&&S(r,e.a=o),e},{e:void 0,t:void 0,a:void 0}),r}})}F(["click","keydown"]),G("kai-link-preview",{cardId:void 0,data:void 0},(a,{element:n})=>t(_,{get cardId(){return a.cardId??""},get data(){return a.data??{url:""}},onEmit:m=>H(n,m)}));