@kitn.ai/ui/dist/elements/source.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{c as t,i as u,S as m,a as f,d as g,b as w,v as C,w as z,t as d,f as b,g as _,o as R,F as U,n as E,p as I}from"./chunks/define-CNSKFZCd.js";import{c as v}from"./chunks/cn-CU7UAWzk.js";import{a as L,b as $,c as q}from"./chunks/hover-card-BQGdGAQ3.js";var D=d('<img alt=favicon width=14 height=14 class="size-3.5 rounded-full">'),K=d('<a target=_blank rel="noopener noreferrer"><span class="truncate tabular-nums text-center font-normal">'),M=d('<a target=_blank rel="noopener noreferrer"class="flex flex-col gap-2 p-3"><div class="flex items-center gap-1.5"><img alt=favicon class="size-4 rounded-full"width=16 height=16><div class="text-primary truncate text-sm"></div></div><div class="line-clamp-2 text-sm font-medium"></div><div class="text-muted-foreground line-clamp-2 text-sm">'),H=d("<div>");const x=C();function F(){const e=z(x);if(!e)throw new Error("Source.* must be used inside <Source>");return e}function y(e){const r=()=>{try{return new URL(e.href).hostname}catch{return e.href.split("/").pop()||e.href}};return t(x.Provider,{value:{get href(){return e.href},get domain(){return r()}},get children(){return t(L,{openDelay:150,get children(){return e.children}})}})}function S(e){const r=F(),a=()=>e.label??r.domain.replace("www.","");return t($,{get children(){var o=K(),l=o.firstChild;return u(o,t(m,{get when(){return e.showFavicon},get children(){var i=D();return f(()=>g(i,"src",`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(r.href)}`)),i}}),l),u(l,a),f(i=>{var c=r.href,n=v("bg-muted text-foreground/80 hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150",e.showFavicon?"pr-2 pl-1":"px-2",e.class);return c!==i.e&&g(o,"href",i.e=c),n!==i.t&&w(o,i.t=n),i},{e:void 0,t:void 0}),o}})}function A(e){const r=F();return t(q,{get class(){return v("w-80 p-0 shadow-xs",e.class)},get children(){var a=M(),o=a.firstChild,l=o.firstChild,i=l.nextSibling,c=o.nextSibling,n=c.nextSibling;return u(i,()=>r.domain.replace("www.","")),u(c,()=>e.title),u(n,()=>e.description),f(s=>{var h=r.href,p=`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(r.href)}`;return h!==s.e&&g(a,"href",s.e=h),p!==s.t&&g(l,"src",s.t=p),s},{e:void 0,t:void 0}),a}})}function N(e){return(()=>{var r=H();return u(r,()=>e.children),f(()=>w(r,v("flex flex-wrap gap-1.5 mt-3",e.class))),r})()}var O=d("<style>:host{display:inline-flex}");b("kai-source",{href:"",label:void 0,headline:"",description:"",showFavicon:!1},(e,{flag:r})=>[O(),t(m,{get when(){return e.href},get children(){return t(y,{get href(){return e.href},get children(){return[t(S,{get label(){return e.label},get showFavicon(){return r("showFavicon")}}),t(A,{get title(){return e.headline??""},get description(){return e.description??""}})]}})}})]);function k(e){return{href:e.getAttribute("href")??"",label:e.getAttribute("label")??void 0,title:e.getAttribute("headline")??void 0,description:e.getAttribute("description")??void 0,showFavicon:e.hasAttribute("show-favicon")&&e.getAttribute("show-favicon")!=="false"}}b("kai-sources",{sources:[],showFavicon:!1,numbered:!1},(e,{element:r,flag:a})=>{const[o,l]=_([]);R(()=>{const n=()=>{const h=[...r.querySelectorAll("kai-source")];l(h.map(k))};n();const s=new MutationObserver(n);s.observe(r,{childList:!0,attributes:!0,subtree:!0}),I(()=>s.disconnect())});const i=()=>[...e.sources,...o()],c=()=>a("numbered");return t(N,{get children(){return t(U,{get each(){return i()},children:(n,s)=>t(y,{get href(){return n.href},get children(){return[t(S,{get label(){return E(()=>!!c())()?s()+1:n.label},get showFavicon(){return n.showFavicon??a("showFavicon")}}),t(A,{get title(){return n.title??""},get description(){return n.description??""}})]}})})}})});export{k as parseKaiSourceElement};