@kitn.ai/ui 0.18.2 → 0.19.0

package/dist/elements/voice-output.js

@@ -1 +1 @@
-import{s as A,g as k,h as z,l as m,p as q,i as D,c as o,S as w,n as x,a as E,b as F,t as p,f as G}from"./chunks/define-CNSKFZCd.js";import{c as b}from"./chunks/cn-CU7UAWzk.js";import{B as I}from"./chunks/button-DBDZebGr.js";import{T as N}from"./chunks/tooltip-Cft_Rxiw.js";var P=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07">'),V=p('<svg width=14 height=14 viewBox="0 0 24 24"fill=currentColor><rect x=4 y=4 width=16 height=16 rx=2>'),W=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-spin><path d="M21 12a9 9 0 11-6.219-8.56">'),_=p("<div>");function h(){return typeof window<"u"&&"speechSynthesis"in window}function $(e){var l;const[r]=A(e,["text","disabled","class"]),[a,t]=k(!1),[n,f]=k(!1);let i,u,d;const R=()=>!!e.onSynthesize||h(),v=()=>n()?"Synthesizing...":a()?"Stop":"Read aloud";function S(){u&&(URL.revokeObjectURL(u),u=void 0)}function C(){!h()||!r.text||(window.speechSynthesis.cancel(),d=new SpeechSynthesisUtterance(r.text),d.onend=()=>t(!1),d.onerror=()=>t(!1),t(!0),window.speechSynthesis.speak(d))}async function U(){var s;if(!(!e.onSynthesize||!r.text)){f(!0);try{const c=await e.onSynthesize(r.text);(s=e.onSynthesized)==null||s.call(e,c),S(),u=URL.createObjectURL(c),i??(i=new Audio),i.src=u,i.onended=()=>t(!1),i.onerror=()=>t(!1),t(!0),await i.play()}catch{t(!1)}finally{f(!1)}}}function g(){e.onSynthesize?U():C()}function y(){e.onSynthesize?i&&(i.pause(),i.currentTime=0):h()&&window.speechSynthesis.cancel(),t(!1)}function j(){e.onSynthesize?i?.pause():h()&&window.speechSynthesis.pause()}function B(){e.onSynthesize?i?.play():h()&&window.speechSynthesis.resume()}function L(){a()?y():g()}z(m(a,s=>{var c;(c=e.onSpeakingChange)==null||c.call(e,s)},{defer:!0})),z(m(()=>r.text,s=>{e.autoplay&&s&&g()},{defer:!0})),(l=e.controllerRef)==null||l.call(e,{speak:g,pause:j,resume:B,stop:y}),q(()=>{y(),S()});const M=()=>P(),O=()=>V(),T=()=>W();return(()=>{var s=_();return D(s,o(N,{get content(){return v()},get children(){return o(I,{part:"button",variant:"ghost",size:"icon-sm",get"aria-label"(){return v()},get"aria-pressed"(){return a()},onClick:L,get disabled(){return r.disabled||!R()||n()},get class(){return b("relative z-10 rounded-full transition-all duration-300")},get children(){return[o(w,{get when(){return n()},get children(){return o(T,{})}}),o(w,{get when(){return x(()=>!n())()&&a()},get children(){return o(O,{})}}),o(w,{get when(){return x(()=>!n())()&&!a()},get children(){return o(M,{})}})]}})}})),E(()=>F(s,b("relative inline-flex items-center justify-center",r.class))),s})()}G("kai-voice-output",{text:"",autoplay:!1,synthesize:void 0,disabled:!1},(e,{dispatch:l,flag:r,expose:a})=>{let t;return a({speak:()=>t?.speak(),pause:()=>t?.pause(),resume:()=>t?.resume(),stop:()=>t?.stop()}),o($,{get text(){return e.text??""},get autoplay(){return r("autoplay")},get disabled(){return r("disabled")},get onSynthesize(){return e.synthesize?n=>e.synthesize(n):void 0},onSpeakingChange:n=>l("kai-speaking-change",{speaking:n}),onSynthesized:n=>l("kai-synthesized",{blob:n}),controllerRef:n=>t=n})});
+import{s as A,g as k,h as z,o as m,p as q,i as D,c as o,S as w,n as x,a as E,b as F,t as p,f as G}from"./chunks/define-DfTe4zwZ.js";import{c as b}from"./chunks/cn-CU7UAWzk.js";import{B as I}from"./chunks/button-BD7lUvVB.js";import{T as N}from"./chunks/tooltip-CBeFqJKk.js";var P=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07">'),V=p('<svg width=14 height=14 viewBox="0 0 24 24"fill=currentColor><rect x=4 y=4 width=16 height=16 rx=2>'),W=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-spin><path d="M21 12a9 9 0 11-6.219-8.56">'),_=p("<div>");function h(){return typeof window<"u"&&"speechSynthesis"in window}function $(e){var l;const[r]=A(e,["text","disabled","class"]),[a,t]=k(!1),[n,f]=k(!1);let i,u,d;const R=()=>!!e.onSynthesize||h(),v=()=>n()?"Synthesizing...":a()?"Stop":"Read aloud";function S(){u&&(URL.revokeObjectURL(u),u=void 0)}function C(){!h()||!r.text||(window.speechSynthesis.cancel(),d=new SpeechSynthesisUtterance(r.text),d.onend=()=>t(!1),d.onerror=()=>t(!1),t(!0),window.speechSynthesis.speak(d))}async function U(){var s;if(!(!e.onSynthesize||!r.text)){f(!0);try{const c=await e.onSynthesize(r.text);(s=e.onSynthesized)==null||s.call(e,c),S(),u=URL.createObjectURL(c),i??(i=new Audio),i.src=u,i.onended=()=>t(!1),i.onerror=()=>t(!1),t(!0),await i.play()}catch{t(!1)}finally{f(!1)}}}function g(){e.onSynthesize?U():C()}function y(){e.onSynthesize?i&&(i.pause(),i.currentTime=0):h()&&window.speechSynthesis.cancel(),t(!1)}function j(){e.onSynthesize?i?.pause():h()&&window.speechSynthesis.pause()}function B(){e.onSynthesize?i?.play():h()&&window.speechSynthesis.resume()}function L(){a()?y():g()}z(m(a,s=>{var c;(c=e.onSpeakingChange)==null||c.call(e,s)},{defer:!0})),z(m(()=>r.text,s=>{e.autoplay&&s&&g()},{defer:!0})),(l=e.controllerRef)==null||l.call(e,{speak:g,pause:j,resume:B,stop:y}),q(()=>{y(),S()});const M=()=>P(),O=()=>V(),T=()=>W();return(()=>{var s=_();return D(s,o(N,{get content(){return v()},get children(){return o(I,{part:"button",variant:"ghost",size:"icon-sm",get"aria-label"(){return v()},get"aria-pressed"(){return a()},onClick:L,get disabled(){return r.disabled||!R()||n()},get class(){return b("relative z-10 rounded-full transition-all duration-300")},get children(){return[o(w,{get when(){return n()},get children(){return o(T,{})}}),o(w,{get when(){return x(()=>!n())()&&a()},get children(){return o(O,{})}}),o(w,{get when(){return x(()=>!n())()&&!a()},get children(){return o(M,{})}})]}})}})),E(()=>F(s,b("relative inline-flex items-center justify-center",r.class))),s})()}G("kai-voice-output",{text:"",autoplay:!1,synthesize:void 0,disabled:!1},(e,{dispatch:l,flag:r,expose:a})=>{let t;return a({speak:()=>t?.speak(),pause:()=>t?.pause(),resume:()=>t?.resume(),stop:()=>t?.stop()}),o($,{get text(){return e.text??""},get autoplay(){return r("autoplay")},get disabled(){return r("disabled")},get onSynthesize(){return e.synthesize?n=>e.synthesize(n):void 0},onSpeakingChange:n=>l("kai-speaking-change",{speaking:n}),onSynthesized:n=>l("kai-synthesized",{blob:n}),controllerRef:n=>t=n})});

package/dist/elements.d.ts

@@ -944,6 +944,8 @@ export interface KaiResizableElement extends HTMLElement {
   orientation?: "vertical" | "horizontal";
   /** Which item index is maximized (null = none). Declarative source of truth. */
   maximizedIndex?: null | number;
+  /** Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. */
+  handle?: "none" | "line" | "grip";
 }
 
 export interface KaiResizableItemElement extends HTMLElement {
@@ -1234,6 +1236,27 @@ export interface KaiThinkingBarElement extends HTMLElement {
   stopLabel?: string;
 }
 
+export interface KaiThreadElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). */
+  messages?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string }; feedback?: "like" | "dislike" }[];
+  /** Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. */
+  loading?: boolean;
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`. */
+  proseSize?: "sm" | "lg" | "xs" | "base";
+  /** Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). */
+  actionsReveal?: "always" | "hover";
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Extra classes applied to the thread's inner root. */
+  class?: string;
+}
+
 export interface KaiToastRegionElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -1433,6 +1456,7 @@ declare global {
     'kai-tasks': KaiTasksElement;
     'kai-text-shimmer': KaiTextShimmerElement;
     'kai-thinking-bar': KaiThinkingBarElement;
+    'kai-thread': KaiThreadElement;
     'kai-toast-region': KaiToastRegionElement;
     'kai-tool': KaiToolElement;
     'kai-tooltip': KaiTooltipElement;