@salla.sa/ui-ai-kit-core 1.1.0 → 2.0.0

package/dist/collection/components/ai-loading/ai-loading.stories.js

@@ -1,145 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Chat/Loading',
-    component: 'ai-loading',
-    tags: ['autodocs'],
-    argTypes: {
-        mode: {
-            control: { type: 'select' },
-            options: ['thinking', 'steps'],
-            description: 'Main mode switch',
-        },
-        statusText: {
-            control: 'text',
-            description: 'Thinking mode status text',
-        },
-        steps: {
-            control: 'text',
-            description: 'Steps as JSON string array',
-        },
-        headerTitle: {
-            control: 'text',
-            description: 'Steps card title',
-        },
-        expanded: {
-            control: 'boolean',
-            description: 'Steps card expand state',
-        },
-        collapsible: {
-            control: 'boolean',
-            description: 'Allow collapsing the steps card',
-        },
-    },
-};
-export default meta;
-const stepsInProgress = JSON.stringify([
-    { id: '1', title: 'البحث عن المعلومات المطلوبة', status: 'completed' },
-    { id: '2', title: 'تحليل البيانات وإعداد التقرير', status: 'executing' },
-    { id: '3', title: 'مراجعة النتائج والتحقق منها', status: 'pending' },
-    { id: '4', title: 'إرسال التقرير النهائي', status: 'pending' },
-]);
-const stepsAllCompleted = JSON.stringify([
-    { id: '1', title: 'البحث عن المعلومات المطلوبة', status: 'completed' },
-    { id: '2', title: 'تحليل البيانات وإعداد التقرير', status: 'completed' },
-    { id: '3', title: 'مراجعة النتائج والتحقق منها', status: 'completed' },
-]);
-export const Thinking = {
-    render: args => html `
-    <ai-loading
-      mode="${args.mode}"
-      status-text="${args.statusText}"
-    ></ai-loading>
-  `,
-    args: {
-        mode: 'thinking',
-        statusText: 'جاري التفكير...',
-    },
-};
-export const ThinkingCustomText = {
-    render: args => html `
-    <ai-loading
-      mode="${args.mode}"
-      status-text="${args.statusText}"
-    ></ai-loading>
-  `,
-    args: {
-        mode: 'thinking',
-        statusText: 'جاري معالجة طلبك...',
-    },
-};
-export const StepsInProgress = {
-    render: args => html `
-    <div style="min-width: 360px;">
-      <ai-loading
-        mode="${args.mode}"
-        .steps="${args.steps}"
-        ?expanded="${args.expanded}"
-        ?collapsible="${args.collapsible}"
-        @toggleExpand="${(e) => console.log('expand:', e.detail)}"
-        @stepClick="${(e) => console.log('step:', e.detail)}"
-      ></ai-loading>
-    </div>
-  `,
-    args: {
-        mode: 'steps',
-        steps: stepsInProgress,
-        expanded: true,
-        collapsible: true,
-    },
-};
-export const StepsAllCompleted = {
-    render: args => html `
-    <div style="min-width: 360px;">
-      <ai-loading
-        mode="${args.mode}"
-        .steps="${args.steps}"
-        ?expanded="${args.expanded}"
-        ?collapsible="${args.collapsible}"
-      ></ai-loading>
-    </div>
-  `,
-    args: {
-        mode: 'steps',
-        steps: stepsAllCompleted,
-        expanded: true,
-        collapsible: true,
-    },
-};
-export const StepsCollapsed = {
-    render: args => html `
-    <div style="min-width: 360px;">
-      <ai-loading
-        mode="${args.mode}"
-        .steps="${args.steps}"
-        ?expanded="${args.expanded}"
-        ?collapsible="${args.collapsible}"
-      ></ai-loading>
-    </div>
-  `,
-    args: {
-        mode: 'steps',
-        steps: stepsInProgress,
-        expanded: false,
-        collapsible: true,
-    },
-};
-export const StepsCustomTitle = {
-    render: args => html `
-    <div style="min-width: 360px;">
-      <ai-loading
-        mode="${args.mode}"
-        .steps="${args.steps}"
-        header-title="${args.headerTitle}"
-        ?expanded="${args.expanded}"
-        ?collapsible="${args.collapsible}"
-      ></ai-loading>
-    </div>
-  `,
-    args: {
-        mode: 'steps',
-        steps: stepsInProgress,
-        headerTitle: 'خطوات المهمة',
-        expanded: true,
-        collapsible: true,
-    },
-};

package/dist/collection/components/ai-message-input/ai-message-input.stories.js

@@ -1,125 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Chat/Message Input',
-    component: 'ai-message-input',
-    tags: ['autodocs'],
-    argTypes: {
-        placeholder: {
-            control: 'text',
-            description: 'Placeholder text for the textarea',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the input is disabled',
-        },
-        showVoiceButton: {
-            control: 'boolean',
-            description: 'Show the mic button — emits voiceButtonClick when pressed so the caller can render ai-voice-input',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `
-A pill-shaped chat input component.
-
-## Events
-- \`sendMessage\` — emitted with the trimmed message string when the user sends
-- \`voiceButtonClick\` — emitted when the mic button is pressed; the caller is responsible for showing \`ai-voice-input\`
-
-## Methods
-- \`setInputValue(text: string)\` — populates the textarea programmatically (e.g. after speech-to-text transcription)
-        `,
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    render: args => html `
-    <ai-message-input
-      placeholder=${args.placeholder || 'ايش في بالك؟'}
-      ?disabled=${args.disabled}
-      ?show-voice-button=${args.showVoiceButton !== false}
-      @sendMessage=${(e) => console.log('sendMessage:', e.detail)}
-      @voiceButtonClick=${() => console.log('voiceButtonClick')}
-    ></ai-message-input>
-  `,
-    args: {
-        placeholder: 'ايش في بالك؟',
-        disabled: false,
-        showVoiceButton: true,
-    },
-};
-export const Disabled = {
-    render: () => html `<ai-message-input placeholder="ايش في بالك؟" disabled></ai-message-input>`,
-};
-/**
- * Demonstrates the full voice toggle pattern:
- * clicking the mic button hides the message input and shows ai-voice-input.
- * After recording (or cancel) the voice input is hidden and message input is restored.
- * When audio is recorded, setInputValue() pre-fills the textarea for review.
- */
-export const WithVoiceToggle = {
-    render: () => html `
-    <div id="voice-toggle-demo" style="max-width: 600px;">
-      <ai-message-input
-        id="msg-input"
-        placeholder="اكتب رسالة أو اضغط على الميكروفون"
-        @sendMessage=${(e) => {
-        const log = document.getElementById('toggle-log');
-        if (log)
-            log.innerHTML += `<div style="color:#10b981;">✓ Message sent: "${e.detail}"</div>`;
-    }}
-        @voiceButtonClick=${() => {
-        const msg = document.getElementById('msg-input');
-        const voice = document.getElementById('voice-recorder');
-        if (msg)
-            msg.style.display = 'none';
-        if (voice) {
-            voice.style.display = 'block';
-            voice.autoStart = true;
-        }
-    }}
-      ></ai-message-input>
-
-      <ai-voice-input
-        id="voice-recorder"
-        auto-start
-        style="display:none;"
-        @audioRecorded=${(e) => {
-        const msg = document.getElementById('msg-input');
-        const voice = document.getElementById('voice-recorder');
-        if (voice)
-            voice.style.display = 'none';
-        if (msg) {
-            msg.style.display = 'block';
-            // In a real app: send e.detail.blob to Whisper, then call setInputValue()
-            msg.setInputValue(`[Audio ${e.detail.duration}s — paste transcription here]`);
-        }
-        const log = document.getElementById('toggle-log');
-        if (log)
-            log.innerHTML += `<div style="color:#8b5cf6;">🎤 Audio recorded (${e.detail.duration}s, ${(e.detail.blob.size / 1024).toFixed(1)} KB)</div>`;
-    }}
-        @recordingCancel=${() => {
-        const msg = document.getElementById('msg-input');
-        const voice = document.getElementById('voice-recorder');
-        if (voice)
-            voice.style.display = 'none';
-        if (msg)
-            msg.style.display = 'block';
-        const log = document.getElementById('toggle-log');
-        if (log)
-            log.innerHTML += `<div style="color:#737373;">✕ Recording cancelled</div>`;
-    }}
-      ></ai-voice-input>
-
-      <div
-        id="toggle-log"
-        style="margin-top:1rem;padding:1rem;background:#f5f5f5;border-radius:8px;font-family:monospace;font-size:13px;min-height:80px;max-height:200px;overflow-y:auto;"
-      >
-        <div style="color:#666;font-weight:bold;margin-bottom:4px;">Event log:</div>
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/ai-rating/ai-rating.stories.js

@@ -1,78 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'UI/Rating',
-    component: 'ai-rating',
-    tags: ['autodocs'],
-    argTypes: {
-        question: { control: 'text' },
-        subtitle: { control: 'text' },
-        value: {
-            control: { type: 'select' },
-            options: [null, 1, 2, 3, 4, 5],
-        },
-        disabled: { control: 'boolean' },
-    },
-};
-export default meta;
-const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; max-width: 420px;';
-/* ─── Standalone ─────────────────────────────────────────────────────────── */
-export const Standalone = {
-    render: args => html `
-    <div style="${wrapStyle}">
-      <ai-rating
-        question="${args.question}"
-        subtitle="${args.subtitle}"
-        value="${args.value}"
-        ?disabled="${args.disabled}"
-      ></ai-rating>
-    </div>
-  `,
-    args: {
-        question: 'كيف كانت تجربتك؟',
-        subtitle: 'رأيك يساعدنا نحسن الخدمة',
-        value: null,
-        disabled: false,
-    },
-};
-/* ─── Inside Card (matches Figma node 1532-65078) ───────────────────────── */
-export const InsideCard = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card>
-        <ai-rating
-          question="كيف كانت تجربتك؟"
-          subtitle="رأيك يساعدنا نحسن الخدمة"
-        ></ai-rating>
-      </ai-card>
-    </div>
-  `,
-};
-/* ─── With Pre-selected Value ────────────────────────────────────────────── */
-export const PreSelected = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card>
-        <ai-rating
-          question="كيف كانت تجربتك؟"
-          subtitle="رأيك يساعدنا نحسن الخدمة"
-          value="5"
-        ></ai-rating>
-      </ai-card>
-    </div>
-  `,
-};
-/* ─── Disabled ───────────────────────────────────────────────────────────── */
-export const Disabled = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-card>
-        <ai-rating
-          question="كيف كانت تجربتك؟"
-          subtitle="تم إرسال تقييمك"
-          value="4"
-          disabled
-        ></ai-rating>
-      </ai-card>
-    </div>
-  `,
-};

package/dist/collection/components/ai-suggestion/ai-suggestion.stories.js

@@ -1,62 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'UI/Suggestion',
-    component: 'ai-suggestion',
-    tags: ['autodocs'],
-    argTypes: {
-        label: { control: 'text' },
-        disabled: { control: 'boolean' },
-    },
-};
-export default meta;
-const wrapStyle = 'padding: 24px; background: #f3f4f6; direction: rtl; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start;';
-/* ─── Playground ─────────────────────────────────────────────────────────── */
-export const Playground = {
-    render: args => html `
-    <div style="${wrapStyle}">
-      <ai-suggestion
-        label="${args.label}"
-        ?disabled="${args.disabled}"
-      ></ai-suggestion>
-    </div>
-  `,
-    args: {
-        label: 'وش الفرق بين باقة بلس وبرو',
-        disabled: false,
-    },
-};
-/* ─── Multiple suggestions (typical usage in chat) ──────────────────────── */
-export const SuggestionGroup = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-suggestion label="وش الفرق بين باقة بلس وبرو"></ai-suggestion>
-      <ai-suggestion label="كيف أضيف منتج جديد؟"></ai-suggestion>
-      <ai-suggestion label="أظهر لي العملاء اللي ما اشتروا هذا الشهر"></ai-suggestion>
-      <ai-suggestion label="ما هي أفضل وقت لإرسال حملة تسويقية؟"></ai-suggestion>
-    </div>
-  `,
-};
-/* ─── Disabled ───────────────────────────────────────────────────────────── */
-export const Disabled = {
-    render: () => html `
-    <div style="${wrapStyle}">
-      <ai-suggestion label="وش الفرق بين باقة بلس وبرو" disabled></ai-suggestion>
-      <ai-suggestion label="كيف أضيف منتج جديد؟" disabled></ai-suggestion>
-    </div>
-  `,
-};
-/* ─── Inside chat (realistic usage) ─────────────────────────────────────── */
-export const InChatContext = {
-    render: () => html `
-    <div style="padding: 24px; background: #f3f4f6; direction: rtl; max-width: 480px; display: flex; flex-direction: column; gap: 16px;">
-      <ai-card>
-        <p style="margin:0; font-size:14px; font-weight:500; color:#333;">أهلاً! كيف يمكنني مساعدتك اليوم؟</p>
-      </ai-card>
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <ai-suggestion label="وش الفرق بين باقة بلس وبرو"></ai-suggestion>
-        <ai-suggestion label="أظهر لي أفضل المنتجات مبيعاً"></ai-suggestion>
-        <ai-suggestion label="كيف أحسن معدل التحويل؟"></ai-suggestion>
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/ai-voice-input/ai-voice-input.stories.js

@@ -1,118 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Chat/Voice Input',
-    component: 'ai-voice-input',
-    tags: ['autodocs'],
-    argTypes: {
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the component is disabled',
-        },
-        showWaveform: {
-            control: 'boolean',
-            description: 'Show the waveform visualization while recording',
-        },
-        autoStart: {
-            control: 'boolean',
-            description: 'Start recording immediately on mount',
-        },
-    },
-    parameters: {
-        docs: {
-            description: {
-                component: `
-A standalone voice recorder designed to visually replace \`ai-message-input\` while the user records.
-It shares the same pill shape, glow, colors, and sizing as the message input.
-
-## Events
-- \`audioRecorded\` — emitted with \`{ blob: Blob, duration: number }\` when the user submits the recording
-- \`recordingCancel\` — emitted when the user cancels
-
-## Props
-- \`autoStart\` — start recording immediately on mount (use this when swapping in from the message input)
-- \`showWaveform\` — toggle the frequency bar visualization
-- \`disabled\` — disable the start button
-
-## Typical usage with \`ai-message-input\`
-\`\`\`html
-<ai-message-input id="msg" @voiceButtonClick=\${showVoice}></ai-message-input>
-<ai-voice-input   id="voice" auto-start style="display:none"
-  @audioRecorded=\${onAudio} @recordingCancel=\${hideVoice}></ai-voice-input>
-\`\`\`
-        `,
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    render: args => html `
-    <ai-voice-input
-      ?disabled=${args.disabled}
-      ?show-waveform=${args.showWaveform !== false}
-      ?auto-start=${args.autoStart}
-      @audioRecorded=${(e) => console.log('audioRecorded:', e.detail)}
-      @recordingCancel=${() => console.log('recordingCancel')}
-    ></ai-voice-input>
-  `,
-    args: {
-        disabled: false,
-        showWaveform: true,
-        autoStart: false,
-    },
-};
-export const AutoStart = {
-    name: 'Auto Start',
-    render: () => html `
-    <ai-voice-input
-      auto-start
-      @audioRecorded=${(e) => console.log('audioRecorded:', e.detail)}
-      @recordingCancel=${() => console.log('recordingCancel')}
-    ></ai-voice-input>
-  `,
-    parameters: {
-        docs: {
-            description: { story: 'Starts recording immediately on mount — the typical mode when toggled from `ai-message-input`.' },
-        },
-    },
-};
-export const WithoutWaveform = {
-    name: 'Without Waveform',
-    render: () => html `
-    <ai-voice-input
-      auto-start
-      ?show-waveform=${false}
-      @audioRecorded=${(e) => console.log('audioRecorded:', e.detail)}
-      @recordingCancel=${() => console.log('recordingCancel')}
-    ></ai-voice-input>
-  `,
-};
-export const Disabled = {
-    render: () => html `<ai-voice-input disabled></ai-voice-input>`,
-};
-export const WithEventHandlers = {
-    name: 'With Event Handlers',
-    render: () => html `
-    <div style="max-width:600px;">
-      <ai-voice-input
-        auto-start
-        @audioRecorded=${(e) => {
-        const log = document.getElementById('voice-log');
-        if (log)
-            log.innerHTML += `<div style="color:#8b5cf6;">🎤 Audio recorded — ${e.detail.duration}s / ${(e.detail.blob.size / 1024).toFixed(1)} KB</div>`;
-    }}
-        @recordingCancel=${() => {
-        const log = document.getElementById('voice-log');
-        if (log)
-            log.innerHTML += `<div style="color:#737373;">✕ Cancelled</div>`;
-    }}
-      ></ai-voice-input>
-      <div
-        id="voice-log"
-        style="margin-top:1rem;padding:1rem;background:#f5f5f5;border-radius:8px;font-family:monospace;font-size:13px;min-height:80px;max-height:200px;overflow-y:auto;"
-      >
-        <div style="color:#666;font-weight:bold;margin-bottom:4px;">Event log:</div>
-      </div>
-    </div>
-  `,
-};

package/dist/components/p-CWjXxYJI.js

@@ -1 +0,0 @@
-const e='@import url("https://cdn.salla.network/fonts/pingarlt.css");:root{--ai-font-family:"PingARLT", sans-serif;font-family:var(--ai-font-family);--ai-bg-card:hsl(var(--white));--ai-bg-surface:hsl(var(--gray-300));--ai-bg-input:hsl(var(--white));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-100));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary));--ai-accent-text:hsl(var(--dark));--ai-user-bubble-bg:hsl(var(--gray-300));--ai-agent-bubble-bg:hsl(var(--white));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(0, 0, 0, 0.15);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--dark-100)) 0%, hsl(var(--gray)) 50%, hsl(var(--dark-100)) 100%);--ai-input-glow:linear-gradient(to right, hsl(var(--secondary-400)), hsl(var(--secondary-100)) 10%, hsl(var(--secondary)))}.dark{--ai-bg-card:hsl(var(--gray-100));--ai-bg-surface:hsl(var(--white-300));--ai-bg-input:hsl(var(--gray-100));--ai-text-primary:hsl(var(--dark));--ai-text-secondary:hsl(var(--dark-200));--ai-text-muted:hsl(var(--gray));--ai-border-default:hsl(var(--gray-400));--ai-border-light:hsl(var(--gray-300));--ai-accent:hsl(var(--secondary));--ai-accent-dark:hsl(var(--primary-500));--ai-accent-text:hsl(var(--primary-force));--ai-user-bubble-bg:hsl(var(--gray-400));--ai-agent-bubble-bg:hsl(var(--gray-100));--ai-warning-bg:hsl(var(--warning-100));--ai-warning-border:hsl(var(--warning));--ai-success:hsl(var(--success));--ai-success-text:hsl(var(--success));--ai-success-bg:hsl(var(--success-100));--ai-danger-text:hsl(var(--danger));--ai-danger-bg:hsl(var(--danger-100));--ai-danger-border:hsl(var(--danger-200));--ai-accent-bg:hsl(var(--secondary-100));--ai-focus-ring:hsl(var(--info));--ai-amber:hsl(var(--warning));--ai-scrollbar-thumb:rgba(255, 255, 255, 0.2);--ai-glow-gradient:linear-gradient(90deg, hsl(var(--gray)) 0%, hsl(var(--dark-300)) 50%, hsl(var(--gray)) 100%);--ai-input-glow:linear-gradient(to right, hsl(var(--secondary-400)), hsl(var(--secondary-100)) 10%, hsl(var(--secondary)))}';function t(e,t,n){const r="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;e&&e!==r;){const r=Object.getOwnPropertyDescriptor(e,t);if(r&&(!n||r.get))return r;e=Object.getPrototypeOf(e)}}var n,r=(e,n)=>{var r;Object.entries(null!=(r=n.l.t)?r:{}).map((([r,[s]])=>{if(31&s||32&s){const s=e[r],l=t(Object.getPrototypeOf(e),r,!0)||Object.getOwnPropertyDescriptor(e,r);l&&Object.defineProperty(e,r,{get(){return l.get.call(this)},set(e){l.set.call(this,e)},configurable:!0,enumerable:!0}),n.i.has(r)?e[r]=n.i.get(r):void 0!==s&&(e[r]=s)}}))},s=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},l=(e,t)=>t in e,a=(e,t)=>(0,console.error)(e,t),i=new Map,o="undefined"!=typeof window?window:{},c=o.HTMLElement||class{},u={o:0,u:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,r)=>e.addEventListener(t,n,r),rel:(e,t,n,r)=>e.removeEventListener(t,n,r),ce:(e,t)=>new CustomEvent(e,t)},f=(()=>{try{return!!o.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(e){}return!1})(),h=!!f&&(()=>!!o.document&&Object.getOwnPropertyDescriptor(o.document.adoptedStyleSheets,"length").writable)(),d=!1,g=[],v=[],b=(e,t)=>n=>{e.push(n),d||(d=!0,t&&4&u.o?m(p):u.raf(p))},y=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){a(e)}e.length=0},p=()=>{y(g),y(v),(d=g.length>0)&&u.raf(p)},m=e=>Promise.resolve(undefined).then(e),w=b(v,!0),$=e=>{const t=new URL(e,u.u);return t.origin!==o.location.origin?t.href:t.pathname},j=e=>u.u=e;function O(){var t;const r=this.attachShadow({mode:"open"});if(void 0===n&&(n=null!=(t=function(e){if(!f)return;const t=new CSSStyleSheet;return t.replaceSync(e),t}(e))?t:null),n)h?r.adoptedStyleSheets.push(n):r.adoptedStyleSheets=[...r.adoptedStyleSheets,n];else if(!f){const t=document.createElement("style");t.innerHTML=e,r.prepend(t)}}var S,k=new WeakMap,x=e=>"sc-"+e.h,M=e=>"object"==(e=typeof e)||"function"===e,E=(e,t,...n)=>{let r=null,s=null,l=!1,a=!1;const i=[],o=t=>{for(let n=0;n<t.length;n++)r=t[n],Array.isArray(r)?o(r):null!=r&&"boolean"!=typeof r&&((l="function"!=typeof e&&!M(r))&&(r=String(r)),l&&a?i[i.length-1].v+=r:i.push(l?A(null,r):r),a=l)};if(o(n),t){t.key&&(s=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const c=A(e,null);return c.p=t,i.length>0&&(c.m=i),c.$=s,c},A=(e,t)=>({o:0,j:e,v:null!=t?t:null,O:null,m:null,p:null,$:null}),C={},L=(e,t)=>null==e||M(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?"string"==typeof e?parseFloat(e):"number"==typeof e?e:NaN:1&t?String(e):e,N=(e,t)=>{const n=e;return{emit:e=>P(n,t,{bubbles:!0,composed:!0,cancelable:!0,detail:e})}},P=(e,t,n)=>{const r=u.ce(t,n);return e.dispatchEvent(r),r},R=(e,t,n,r,a,i)=>{if(n===r)return;let c=l(e,t),f=t.toLowerCase();if("class"===t){const t=e.classList,s=D(n);let l=D(r);t.remove(...s.filter((e=>e&&!l.includes(e)))),t.add(...l.filter((e=>e&&!s.includes(e))))}else if("style"===t){for(const t in n)r&&null!=r[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in r)n&&r[t]===n[t]||(t.includes("-")?e.style.setProperty(t,r[t]):e.style[t]=r[t])}else if("key"===t);else if("ref"===t)r&&K(r,e);else if(e.__lookupSetter__(t)||"o"!==t[0]||"n"!==t[1]){if("a"===t[0]&&t.startsWith("attr:")){const n=t.slice(5);let l;{const t=s(e);if(t&&t.l&&t.l.t){const e=t.l.t[n];e&&e[1]&&(l=e[1])}}return l||(l=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==r||!1===r?!1===r&&""!==e.getAttribute(l)||e.removeAttribute(l):e.setAttribute(l,!0===r?"":r))}if("p"===t[0]&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=r}catch(e){}return}{const s=M(r);if((c||s&&null!==r)&&!a)try{if(e.tagName.includes("-"))e[t]!==r&&(e[t]=r);else{const s=null==r?"":r;"list"===t?c=!1:null!=n&&e[t]===s||("function"==typeof e.__lookupSetter__(t)?e[t]=s:e.setAttribute(t,s))}}catch(e){}null==r||!1===r?!1===r&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&i||a)&&!s&&1===e.nodeType&&e.setAttribute(t,r=!0===r?"":r)}}else if(t="-"===t[2]?t.slice(3):l(o,f)?f.slice(2):f[2]+t.slice(3),n||r){const s=t.endsWith(H);t=t.replace(U,""),n&&u.rel(e,t,n,s),r&&u.ael(e,t,r,s)}},_=/\s/,D=e=>("object"==typeof e&&e&&"baseVal"in e&&(e=e.baseVal),e&&"string"==typeof e?e.split(_):[]),H="Capture",U=new RegExp(H+"$"),W=(e,t,n)=>{const r=11===t.O.nodeType&&t.O.host?t.O.host:t.O,s=e&&e.p||{},l=t.p||{};for(const e of F(Object.keys(s)))e in l||R(r,e,s[e],void 0,n,t.o);for(const e of F(Object.keys(l)))R(r,e,s[e],l[e],n,t.o)};function F(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var T=!1,V=!1,q=[],z=[],Y=(e,t,n)=>{const r=t.m[n];let s,l,a=0;if(null!=r.v)s=r.O=o.document.createTextNode(r.v);else{if(V||(V="svg"===r.j),!o.document)throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(s=r.O=o.document.createElementNS(V?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r.j),V&&"foreignObject"===r.j&&(V=!1),W(null,r,V),r.m){const t="template"===r.j?s.content:s;for(a=0;a<r.m.length;++a)l=Y(e,r,a),l&&t.appendChild(l)}"svg"===r.j?V=!1:"foreignObject"===s.tagName&&(V=!0)}return s["s-hn"]=S,s},Z=(e,t,n,r,s,l)=>{let a,i=e;for(i.shadowRoot&&i.tagName===S&&(i=i.shadowRoot),"template"===n.j&&(i=i.content);s<=l;++s)r[s]&&(a=Y(null,n,s),a&&(r[s].O=a,Q(i,a,t)))},B=(e,t,n)=>{for(let r=t;r<=n;++r){const t=e[r];if(t){const e=t.O;J(t),e&&e.remove()}}},G=(e,t,n=!1)=>e.j===t.j&&(n?(n&&!e.$&&t.$&&(e.$=t.$),!0):e.$===t.$),I=(e,t,n=!1)=>{const r=t.O=e.O,s=e.m,l=t.m,a=t.j,i=t.v;null==i?(V="svg"===a||"foreignObject"!==a&&V,"slot"!==a||T||e.S!==t.S&&(t.O["s-sn"]=t.S||"",(e=>{u.o|=1;const t=e.closest(S.toLowerCase());if(null!=t){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"])),r=Array.from(e.__childNodes||e.childNodes);for(const e of n?r.reverse():r)null!=e["s-sh"]&&(Q(t,e,null!=n?n:null),e["s-sh"]=void 0)}u.o&=-2})(t.O.parentElement)),W(e,t,V),null!==s&&null!==l?((e,t,n,r,s=!1)=>{let l,a,i=0,o=0,c=0,u=0,f=t.length-1,h=t[0],d=t[f],g=r.length-1,v=r[0],b=r[g];const y="template"===n.j?e.content:e;for(;i<=f&&o<=g;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==v)v=r[++o];else if(null==b)b=r[--g];else if(G(h,v,s))I(h,v,s),h=t[++i],v=r[++o];else if(G(d,b,s))I(d,b,s),d=t[--f],b=r[--g];else if(G(h,b,s))I(h,b,s),Q(y,h.O,d.O.nextSibling),h=t[++i],b=r[--g];else if(G(d,v,s))I(d,v,s),Q(y,d.O,h.O),d=t[--f],v=r[++o];else{for(c=-1,u=i;u<=f;++u)if(t[u]&&null!==t[u].$&&t[u].$===v.$){c=u;break}c>=0?(a=t[c],a.j!==v.j?l=Y(t&&t[o],n,c):(I(a,v,s),t[c]=void 0,l=a.O),v=r[++o]):(l=Y(t&&t[o],n,o),v=r[++o]),l&&Q(h.O.parentNode,l,h.O)}i>f?Z(e,null==r[g+1]?null:r[g+1].O,n,r,o,g):o>g&&B(t,i,f)})(r,s,t,l,n):null!==l?(null!==e.v&&(r.textContent=""),Z(r,null,t,l,0,l.length-1)):!n&&null!==s&&B(s,0,s.length-1),V&&"svg"===a&&(V=!1)):e.v!==i&&(r.data=i)},J=e=>{e.p&&e.p.ref&&q.push((()=>e.p.ref(null))),e.m&&e.m.map(J)},K=(e,t)=>{z.push((()=>e(t)))},Q=(e,t,n)=>e.__insertBefore?e.__insertBefore(t,n):null==e?void 0:e.insertBefore(t,n),X=(e,t,n=!1)=>{const r=e.$hostElement$,s=e.l,l=e.k||A(null,null);var a;const i=(a=t)&&a.j===C?t:E(null,null,t);if(S=r.tagName,n&&i.p)for(const e of Object.keys(i.p))r.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(i.p[e]=r[e]);i.j=null,i.o|=4,e.k=i,i.O=l.O=r.shadowRoot||r,T=!(!(1&s.o)||128&s.o),I(l,i,n),q.forEach((e=>e())),q.length=0,z.forEach((e=>e())),z.length=0},ee=(e,t)=>{if(t&&!e.M&&t["s-p"]){const n=t["s-p"].push(new Promise((r=>e.M=()=>{t["s-p"].splice(n-1,1),r()})))}},te=(e,t)=>{if(e.o|=16,4&e.o)return void(e.o|=512);ee(e,e.A);const n=()=>ne(e,t);if(!t)return w(n);queueMicrotask((()=>{n()}))},ne=(e,t)=>{const n=e.$hostElement$,r=n;if(!r)throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let s;return s=ce(r,t?"componentWillLoad":"componentWillUpdate",void 0,n),s=re(s,(()=>ce(r,"componentWillRender",void 0,n))),re(s,(()=>le(e,r,t)))},re=(e,t)=>se(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),se=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,le=async(e,t,n)=>{var r;const s=e.$hostElement$,l=s["s-rc"];n&&(e=>{const t=e.l,n=e.$hostElement$,r=t.o,s=((e,t)=>{var n,r,s;const l=x(t),a=i.get(l);if(!o.document)return l;if(e=11===e.nodeType?e:o.document,a)if("string"==typeof a){let s,i=k.get(e=e.head||e);if(i||k.set(e,i=new Set),!i.has(l)){s=o.document.createElement("style"),s.textContent=a;const c=null!=(n=u.C)?n:function(){var e,t,n;return null!=(n=null==(t=null==(e=o.document.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:t.getAttribute("content"))?n:void 0}();if(null!=c&&s.setAttribute("nonce",c),!(1&t.o))if("HEAD"===e.nodeName){const t=e.querySelectorAll("link[rel=preconnect]"),n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(s,(null==n?void 0:n.parentNode)===e?n:null)}else if("host"in e)if(f){const t=new(null!=(r=e.defaultView)?r:e.ownerDocument.defaultView).CSSStyleSheet;t.replaceSync(a),h?e.adoptedStyleSheets.unshift(t):e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");t?t.textContent=a+t.textContent:e.prepend(s)}else e.append(s);1&t.o&&e.insertBefore(s,null),4&t.o&&(s.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),i&&i.add(l)}}else{let t=k.get(e);if(t||k.set(e,t=new Set),!t.has(l)){const n=null!=(s=e.defaultView)?s:e.ownerDocument.defaultView;let r;if(a.constructor===n.CSSStyleSheet)r=a;else{r=new n.CSSStyleSheet;for(let e=0;e<a.cssRules.length;e++)r.insertRule(a.cssRules[e].cssText,e)}h?e.adoptedStyleSheets.push(r):e.adoptedStyleSheets=[...e.adoptedStyleSheets,r],t.add(l)}}return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&r&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);ae(e,t,s,n),l&&(l.map((e=>e())),s["s-rc"]=void 0);{const t=null!=(r=s["s-p"])?r:[],n=()=>ie(e);0===t.length?n():(Promise.all(t).then(n).catch(n),e.o|=4,t.length=0)}},ae=(e,t,n,r)=>{try{t=t.render(),e.o&=-17,e.o|=2,X(e,t,r)}catch(t){a(t,e.$hostElement$)}return null},ie=e=>{const t=e.$hostElement$,n=t,r=e.A;ce(n,"componentDidRender",void 0,t),64&e.o?ce(n,"componentDidUpdate",void 0,t):(e.o|=64,ue(t),ce(n,"componentDidLoad",void 0,t),e.L(t),r||oe()),e.M&&(e.M(),e.M=void 0),512&e.o&&m((()=>te(e,!1))),e.o&=-517},oe=()=>{m((()=>P(o,"appload",{detail:{namespace:"ui-ai-kit"}})))},ce=(e,t,n,r)=>{if(e&&e[t])try{return e[t](n)}catch(e){a(e,r)}},ue=e=>e.classList.add("hydrated"),fe=(e,t,n,r)=>{const l=s(e);if(!l)return;const i=e,o=l.i.get(t),c=l.o,u=i;n=L(n,r.t[t][0]);const f=Number.isNaN(o)&&Number.isNaN(n);if(n!==o&&!f){if(l.i.set(t,n),r.N){const e=r.N[t];e&&e.map((e=>{try{const[[r,s]]=Object.entries(e);(128&c||1&s)&&(u?u[r](n,o,t):l.P.push((()=>{l.R[r](n,o,t)})))}catch(e){a(e,i)}}))}if(2&c){if(u.componentShouldUpdate&&!1===u.componentShouldUpdate(n,o,t)&&!(16&c))return;16&c||te(l,!1)}}},he=(e,n)=>{var r,l;const a=e.prototype;{e.watchers&&!n.N&&(n.N=e.watchers),e.deserializers&&!n._&&(n._=e.deserializers),e.serializers&&!n.D&&(n.D=e.serializers);const i=Object.entries(null!=(r=n.t)?r:{});i.map((([e,[r]])=>{if(31&r||32&r){const{get:l,set:i}=t(a,e)||{};l&&(n.t[e][0]|=2048),i&&(n.t[e][0]|=4096),Object.defineProperty(a,e,{get(){return l?l.apply(this):(t=e,s(this).i.get(t));var t},configurable:!0,enumerable:!0}),Object.defineProperty(a,e,{set(t){const l=s(this);if(l){if(i)return void 0===(32&r?this[e]:l.$hostElement$[e])&&l.i.get(e)&&(t=l.i.get(e)),i.apply(this,[L(t,r)]),void fe(this,e,t=32&r?this[e]:l.$hostElement$[e],n);fe(this,e,t,n)}}})}}));{const t=new Map;a.attributeChangedCallback=function(e,r,l){u.jmp((()=>{var o;const c=t.get(e),u=s(this);if(this.hasOwnProperty(c),a.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==l)return;if(null==c){const t=null==u?void 0:u.o;if(u&&t&&!(8&t)&&l!==r){const s=this,a=null==(o=n.N)?void 0:o[e];null==a||a.forEach((n=>{const[[a,i]]=Object.entries(n);null!=s[a]&&(128&t||1&i)&&s[a].call(s,l,r,e)}))}return}const f=i.find((([e])=>e===c));f&&4&f[1][0]&&(l=null!==l&&"false"!==l);const h=Object.getOwnPropertyDescriptor(a,c);l==this[c]||h.get&&!h.set||(this[c]=l)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(l=n.N)?l:{}),...i.filter((([e,t])=>31&t[0])).map((([e,n])=>{const r=n[1]||e;return t.set(r,e),r}))]))}}return e},de=(e,t)=>{const n={o:t[0],h:t[1]};try{n.t=t[2],n.N=e.N,n._=e._,n.D=e.D;const l=e.prototype.connectedCallback,o=e.prototype.disconnectedCallback;return Object.assign(e.prototype,{__hasHostListenerAttached:!1,__registerHost(){((e,t)=>{const n={o:0,$hostElement$:e,l:t,i:new Map,H:new Map};n.U=new Promise((e=>n.L=e)),e["s-p"]=[],e["s-rc"]=[];const s=n;e.__stencil__getHostRef=()=>s,512&t.o&&r(e,n)})(this,n)},connectedCallback(){if(!this.__hasHostListenerAttached){if(!s(this))return;this.__hasHostListenerAttached=!0}(e=>{if(!(1&u.o)){const t=s(e);if(!t)return;const n=t.l,r=()=>{};if(1&t.o)(null==t?void 0:t.R)||(null==t?void 0:t.U)&&t.U.then((()=>{}));else{t.o|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){ee(t,t.A=n);break}}n.t&&Object.entries(n.t).map((([t,[n]])=>{if(31&n&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let r;try{if(!(32&t.o)&&(t.o|=32,r=e.constructor,customElements.whenDefined(e.localName).then((()=>t.o|=128)),r&&r.style)){let e;"string"==typeof r.style&&(e=r.style);const t=x(n);if(!i.has(t)){const r=()=>{};((e,t,n)=>{let r=i.get(e);f&&n?(r=r||new CSSStyleSheet,"string"==typeof r?r=t:r.replaceSync(t)):r=t,i.set(e,r)})(t,e,!!(1&n.o)),r()}}const s=t.A,l=()=>te(t,!0);s&&s["s-rc"]?s["s-rc"].push(l):l()}catch(n){a(n,e),t.M&&(t.M(),t.M=void 0),t.L&&t.L(e)}})(e,t,n)}r()}})(this),l&&l.call(this)},disconnectedCallback(){(async e=>{1&u.o||s(e),k.has(e)&&k.delete(e),e.shadowRoot&&k.has(e.shadowRoot)&&k.delete(e.shadowRoot)})(this),o&&o.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw new Error(`Unable to re-use existing shadow root for ${n.h}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else O.call(this,n)}}),Object.defineProperty(e,"is",{value:n.h,configurable:!0}),he(e,n)}catch(t){return a(t),e}},ge=e=>u.C=e,ve=e=>Object.assign(u,e);function be(e,t){X({l:{o:0,h:t.tagName},$hostElement$:t},e)}function ye(e){return e}export{c as H,ge as a,ve as b,C as c,N as d,$ as g,E as h,de as p,be as r,j as s,ye as t}

package/dist/types/components/ai-card/ai-card.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const AiReply: Story;
-export declare const WithRating: Story;
-export declare const NoPadding: Story;

package/dist/types/components/ai-chat-container/ai-chat-container.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const StickyRight: Story;
-export declare const FloatMode: Story;
-export declare const ShowcaseConversation: Story;

package/dist/types/components/ai-chat-header/ai-chat-header.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const AgentMode: Story;
-export declare const HumanMode: Story;
-export declare const HumanWithoutBack: Story;
-export declare const InChatContainer: Story;

package/dist/types/components/ai-chat-message/ai-chat-message.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const UserMessage: Story;
-export declare const AgentMessageSimple: Story;
-export declare const AgentMessageMarkdown: Story;
-export declare const FeedbackSelected: Story;
-export declare const WithSlottedContent: Story;
-export declare const ConversationThread: Story;

package/dist/types/components/ai-link/ai-link.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Playground: Story;
-export declare const MultipleLinks: Story;
-export declare const InsideCard: Story;
-export declare const FullMessageContext: Story;

package/dist/types/components/ai-loading/ai-loading.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Thinking: Story;
-export declare const ThinkingCustomText: Story;
-export declare const StepsInProgress: Story;
-export declare const StepsAllCompleted: Story;
-export declare const StepsCollapsed: Story;
-export declare const StepsCustomTitle: Story;

package/dist/types/components/ai-message-input/ai-message-input.stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const Disabled: Story;
-/**
- * Demonstrates the full voice toggle pattern:
- * clicking the mic button hides the message input and shows ai-voice-input.
- * After recording (or cancel) the voice input is hidden and message input is restored.
- * When audio is recorded, setInputValue() pre-fills the textarea for review.
- */
-export declare const WithVoiceToggle: Story;

package/dist/types/components/ai-rating/ai-rating.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standalone: Story;
-export declare const InsideCard: Story;
-export declare const PreSelected: Story;
-export declare const Disabled: Story;

package/dist/types/components/ai-suggestion/ai-suggestion.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Playground: Story;
-export declare const SuggestionGroup: Story;
-export declare const Disabled: Story;
-export declare const InChatContext: Story;