@salla.sa/ui-ai-kit-core 1.0.0

package/dist/esm/ai-chat-container.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-7hrZ8FOQ.js';
+
+const aiChatContainerCss = () => `:host{display:contents}.chat-container{font-family:var(--ai-font-family, 'PingARLT', sans-serif);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--ai-container-bg, var(--ai-bg-card, white));border:1px solid var(--border-default, var(--ai-border-default, #eee));z-index:50;box-sizing:border-box}.messages-area{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15)) transparent}.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.15));border-radius:99px}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb, rgba(0, 0, 0, 0.28))}.chat-container.left,.chat-container.right{position:fixed;top:0;bottom:0;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.chat-container.left{left:0;transform:translateX(-100%)}.chat-container.right{right:0;transform:translateX(100%)}.chat-container.left.open,.chat-container.right.open{transform:translateX(0)}.chat-container.float{position:fixed;top:24px;left:24px;border-radius:16px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12),     0 2px 8px rgba(0, 0, 0, 0.08);display:none}.chat-container.float.open{display:flex}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}.watermark ai-icon{opacity:0.8;filter:drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))}.chat-container.mobile{width:100% !important}.chat-container.float.mobile{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}@media (max-width: 767px){.chat-container{width:100% !important}.chat-container.float{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}}:host(.dark) .watermark ai-icon{opacity:0.6}`;
+
+const ChatContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Controls visibility of the chat panel */
+    isOpen = false;
+    /** Position of the panel: 'left', 'right', or 'float' */
+    position = 'right';
+    /** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
+    width = '28rem';
+    /** Enable/disable auto-scroll to latest message */
+    autoScroll = true;
+    /** Show AI watermark in the top half of the container */
+    showWatermark = false;
+    /** Height of the panel when position='float' */
+    floatHeight = '600px';
+    isMobile = false;
+    containerRef;
+    dragState = null;
+    resizeObserver;
+    componentWillLoad() {
+        this.checkMobile();
+    }
+    componentDidLoad() {
+        if (typeof window !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkMobile();
+            });
+            this.resizeObserver.observe(document.body);
+            if (this.position === 'float') {
+                this.setupDrag();
+            }
+        }
+    }
+    positionChanged(newVal) {
+        if (newVal === 'float') {
+            this.setupDrag();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    checkMobile() {
+        if (typeof window !== 'undefined') {
+            this.isMobile = window.innerWidth < 768;
+        }
+    }
+    setupDrag() {
+        const container = this.containerRef;
+        if (!container)
+            return;
+        // Listen on the host element so composed events from ai-chat-header's shadow DOM
+        // are received. (composedPath() hides cross-shadow-root elements from shadow listeners.)
+        this.el.addEventListener('headerDragStart', (e) => {
+            const { clientX, clientY } = e.detail;
+            const rect = container.getBoundingClientRect();
+            this.dragState = {
+                startX: clientX,
+                startY: clientY,
+                initLeft: rect.left,
+                initTop: rect.top,
+            };
+            // Switch from bottom/right anchoring to top/left so we can move freely
+            container.style.right = 'auto';
+            container.style.bottom = 'auto';
+            container.style.left = `${rect.left}px`;
+            container.style.top = `${rect.top}px`;
+            const onMove = (me) => {
+                if (!this.dragState)
+                    return;
+                const dx = me.clientX - this.dragState.startX;
+                const dy = me.clientY - this.dragState.startY;
+                let newLeft = this.dragState.initLeft + dx;
+                let newTop = this.dragState.initTop + dy;
+                // Clamp to viewport edges
+                const vw = window.innerWidth;
+                const vh = window.innerHeight;
+                const w = container.offsetWidth;
+                const h = container.offsetHeight;
+                newLeft = Math.max(0, Math.min(newLeft, vw - w));
+                newTop = Math.max(0, Math.min(newTop, vh - h));
+                container.style.left = `${newLeft}px`;
+                container.style.top = `${newTop}px`;
+            };
+            const onUp = () => {
+                this.dragState = null;
+                document.removeEventListener('pointermove', onMove);
+                document.removeEventListener('pointerup', onUp);
+            };
+            document.addEventListener('pointermove', onMove);
+            document.addEventListener('pointerup', onUp);
+        });
+    }
+    getContainerClasses() {
+        const classes = ['chat-container', this.position];
+        if (this.isOpen) {
+            classes.push('open');
+        }
+        if (this.isMobile) {
+            classes.push('mobile');
+        }
+        return classes.join(' ');
+    }
+    getContainerStyle() {
+        const style = {};
+        if (this.isMobile) {
+            return style;
+        }
+        if (this.position === 'float') {
+            style.width = this.width;
+            style.height = this.floatHeight;
+        }
+        else {
+            style.width = this.width;
+        }
+        return style;
+    }
+    render() {
+        return (h(Host, { key: '5048010bf45a26985c92bfb9a6caf01d8aa938c0' }, h("div", { key: '08491cff2361071bc0635914cc665281b80321ac', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '366140a61929689fc522dddfb1485bbd4d2cbef9', class: "watermark" }, h("ai-icon", { key: '5e210929feeb519889344385fa2fb75373ff8fed', name: "watermark", size: 133 }))), h("slot", { key: '57eef4d0c273009feeeb4f03400e05352acdf6cd', name: "header" }), h("div", { key: '15b14f49819f886ce1d56de87c770bb7241dcd77', class: "messages-area" }, h("slot", { key: '050cd0fde5bc3de75df0747031dc84214c125d5d' })), h("slot", { key: '195ab33291da775299e0d7c0c53df92fcf46a4ca', name: "footer" }))));
+    }
+    static get watchers() { return {
+        "position": [{
+                "positionChanged": 0
+            }]
+    }; }
+};
+ChatContainer.style = aiChatContainerCss();
+
+export { ChatContainer as ai_chat_container };

package/dist/esm/ai-chat-header.entry.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+
+const aiChatHeaderCss = () => `:host{display:block;font-family:var(--ai-font-family, "PingARLT", sans-serif)}.header-container{display:flex;align-items:center;gap:8px;padding:16px;background:var(--ai-bg-card, white);border-bottom:1px solid var(--ai-border-light, #f4f4f4);width:100%;box-sizing:border-box}.header-container{direction:rtl}.drag-btn{cursor:grab;color:var(--ai-text-muted)}.drag-btn:active{cursor:grabbing}.action-btn,.back-btn{width:40px;height:40px;padding:4px;display:flex;align-items:center;justify-content:center;background:var(--ai-bg-card, white);border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-primary);transition:background 0.15s ease}.action-btn:hover,.back-btn:hover{background:var(--ai-bg-surface, #f9fafb)}.action-btn:focus-visible,.back-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.action-btn:active,.back-btn:active{background:var(--ai-bg-surface, #f3f4f6)}.actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.content{flex:1 0 0;display:flex;align-items:center;justify-content:flex-start;min-width:0}.content.agent{gap:4px;height:40px}.content.human{gap:8px}.dropdown-trigger{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;color:var(--ai-text-primary)}.dropdown-trigger:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.title{font-size:16px;font-weight:700;color:var(--ai-text-primary, #444444);white-space:nowrap;line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default, #eeeeee);object-fit:cover;display:block}.online-dot{position:absolute;bottom:0;left:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ai-bg-card);}.text-block{display:flex;flex-direction:column;align-items:flex-end;gap:0;flex-shrink:0}.agent-name{font-size:14px;font-weight:500;color:var(--ai-text-primary, #333333);line-height:20px;white-space:nowrap}.agent-status{font-size:14px;font-weight:400;color:var(--ai-text-secondary, #737373);line-height:20px;white-space:nowrap}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-wrap svg{display:block}`;
+
+const AiChatHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeClick = createEvent(this, "closeClick");
+        this.editClick = createEvent(this, "editClick");
+        this.dropdownClick = createEvent(this, "dropdownClick");
+        this.moreClick = createEvent(this, "moreClick");
+        this.backClick = createEvent(this, "backClick");
+        this.headerDragStart = createEvent(this, "headerDragStart");
+    }
+    /** Layout variant */
+    mode = 'agent';
+    /** Agent mode: conversation title */
+    conversation = 'محادثة جديدة';
+    /** Human mode: agent's display name */
+    agentName = '';
+    /** Human mode: status label (e.g. "Active") */
+    agentStatus = '';
+    /** Human mode: avatar image URL */
+    agentAvatar = '';
+    /** Human mode: show the back button */
+    showBack = true;
+    isDraggable = false;
+    /** Cancel / close button */
+    closeClick;
+    /** Pencil-edit button (agent mode) */
+    editClick;
+    /** Title / chevron click → open conversation list (agent mode) */
+    dropdownClick;
+    /** Chevron-down button (human mode) */
+    moreClick;
+    /** Back-arrow button (human mode) */
+    backClick;
+    /**
+     * Fired on pointerdown of the drag handle.
+     * Composed + bubbling so ai-chat-container can receive it across shadow roots.
+     */
+    headerDragStart;
+    renderIcon(name, width, height) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    renderAgentMode() {
+        return [
+            this.isDraggable && (h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
+                    e.preventDefault();
+                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
+                } }, this.renderIcon('drag', 11, 15))),
+            h("div", { class: "content agent" }, h("span", { class: "title" }, this.conversation), h("button", { class: "dropdown-trigger", onClick: () => this.dropdownClick.emit() }, this.renderIcon('chevron-down', 24, 24))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
+    renderHumanMode() {
+        return [
+            this.isDraggable && (h("button", { class: "action-btn drag-btn", onPointerDown: (e) => {
+                    e.preventDefault();
+                    this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
+                } }, this.renderIcon('drag', 11, 15))),
+            h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, h("img", { class: "avatar", src: this.agentAvatar, alt: this.agentName }), h("span", { class: "online-dot" }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), h("span", { class: "agent-status" }, this.agentStatus))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", onClick: () => this.moreClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '93fe332abe1339f7235aa18717d63aa65d9aac13' }, h("div", { key: 'b496695911f7d1f959c4f98506b0d230e77a86c3', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
+    }
+};
+AiChatHeader.style = aiChatHeaderCss();
+
+export { AiChatHeader as ai_chat_header };

package/dist/esm/ai-chat-message.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+
+const aiChatMessageCss = () => `:host{--ai-msg-user-bg:var(--ai-user-bubble-bg, #F4F4F4);--ai-msg-user-color:var(--ai-text-primary, #333333);--ai-msg-user-border:1px solid var(--ai-border-default, #eee);--ai-msg-agent-bg:var(--ai-agent-bubble-bg, #ffffff);--ai-msg-agent-color:var(--ai-text-primary, #333333);--ai-msg-agent-border:1px solid var(--ai-border-default, #eee);--ai-msg-border-radius:16px;--ai-msg-padding:16px;--ai-msg-font-size:14px;--ai-msg-action-active-bg:var(--ai-accent, #a4ffe5);--ai-msg-timestamp-color:var(--ai-text-secondary, #737373);--ai-user-msg-max-width:80%;--ai-agent-msg-max-width:80%;display:block;direction:rtl;font-family:var(--ai-font-family, "PingARLT", sans-serif)}.message-row{display:flex}.user-row{flex-direction:column;align-items:flex-end}.user-bubble{background:var(--ai-msg-user-bg);color:var(--ai-msg-user-color);border:var(--ai-msg-user-border);border-radius:var(--ai-msg-border-radius);padding:var(--ai-msg-padding);font-size:var(--ai-msg-font-size);max-width:var(--ai-user-msg-max-width);line-height:1.5;word-break:break-word;box-shadow:0px 1px 2px 0px rgba(18, 18, 23, 0.05)}.user-row .timestamp{font-size:12px;color:var(--ai-msg-timestamp-color);margin-top:4px}.agent-row{flex-direction:row;justify-content:flex-start}.agent-bubble-wrapper{display:flex;flex-direction:column;gap:6px;width:100%;max-width:var(--ai-msg-agent-max-width);min-width:0}.agent-bubble{background:var(--ai-msg-agent-bg);color:var(--ai-msg-agent-color);border:var(--ai-msg-agent-border);border-radius:var(--ai-msg-border-radius);padding:var(--ai-msg-padding);font-size:var(--ai-msg-font-size);line-height:1.6;word-break:break-word;box-shadow:0px 1px 2px 0px rgba(18, 18, 23, 0.05);display:flex;flex-direction:column;gap:12px}.message-content{white-space:pre-wrap}.message-content p{margin:0 0 8px 0}.message-content p:last-child{margin-bottom:0}.message-content h2{font-size:16px;font-weight:700;margin:0 0 8px 0}.message-content h3{font-size:15px;font-weight:600;margin:0 0 6px 0}.message-content strong{font-weight:700}.message-content em{font-style:italic}.message-content code{background:var(--ai-bg-surface, #f3f4f6);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:13px;color:var(--ai-text-primary, #374151)}.message-content pre{background:var(--ai-bg-surface, #f3f4f6);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:8px 0}.message-content pre code{background:none;padding:0;font-size:13px}.message-content ul,.message-content ol{padding-inline-start:20px;margin:4px 0 8px 0}.message-content li{margin-bottom:3px}.actions-bar{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;height:0;overflow:hidden;opacity:0;pointer-events:none;transition:height 0.15s ease, opacity 0.15s ease}.agent-bubble:hover .actions-bar{height:32px;opacity:1;pointer-events:auto}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--ai-bg-card, #ffffff);border:1px solid var(--ai-border-default, #eee);cursor:pointer;color:var(--ai-text-primary, #333333);transition:background 0.15s, color 0.15s;padding:0;flex-shrink:0}.action-btn:hover{background:var(--ai-bg-surface, #f3f4f6)}.action-btn.copy-success{background:var(--ai-msg-action-active-bg);color:var(--ai-accent-text);border-color:var(--ai-accent)}.feedback-group{display:flex;align-items:center;border:1px solid var(--ai-border-default, #eee);border-radius:8px;overflow:hidden;background:var(--ai-bg-card, #ffffff)}.feedback-btn{display:flex;align-items:center;justify-content:center;height:32px;padding:0 8px;background:var(--ai-bg-card, #ffffff);border:none;border-inline-start:1px solid var(--ai-border-default, #eee);cursor:pointer;color:var(--ai-text-primary, #333333);transition:background 0.15s, color 0.15s}.feedback-btn:first-child{border-inline-start:none}.feedback-btn:hover{background:var(--ai-bg-surface, #f3f4f6)}.feedback-btn.active{background:var(--ai-msg-action-active-bg);color:var(--ai-accent-text)}.icon-wrap{display:flex;align-items:center;justify-content:center;line-height:0}.agent-info{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;color:var(--ai-text-muted, #9ca3af)}.agent-info-name,.agent-info-time{font-size:12px;color:inherit;line-height:16px;white-space:nowrap}.agent-info .icon-wrap{display:flex;align-items:center;color:inherit;opacity:0.6;flex-shrink:0}.typing-indicator{display:flex;align-items:center;gap:5px;padding:4px 2px}.typing-dot{width:8px;height:8px;border-radius:50%;background:var(--ai-text-muted, #9ca3af);animation:typingBounce 1.2s ease-in-out infinite}.typing-dot:nth-child(2){animation-delay:0.2s}.typing-dot:nth-child(3){animation-delay:0.4s}@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}.streaming-cursor{display:inline-block;width:2px;height:1em;background:currentColor;vertical-align:text-bottom;margin-inline-start:2px;animation:cursorBlink 0.8s step-start infinite}@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}`;
+
+const AiChatMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.messageCopy = createEvent(this, "messageCopy");
+        this.messageFeedback = createEvent(this, "messageFeedback");
+        this.messageRegenerate = createEvent(this, "messageRegenerate");
+    }
+    role = 'user';
+    content = '';
+    format = 'text';
+    agentName = '';
+    timestamp = '';
+    showActions = true;
+    enableRegenerate = false;
+    feedbackValue = null;
+    messageCopy;
+    messageFeedback;
+    messageRegenerate;
+    copySuccess = false;
+    copyTimeout;
+    disconnectedCallback() {
+        if (this.copyTimeout)
+            clearTimeout(this.copyTimeout);
+    }
+    renderIcon(name, size = 16) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${size}"  height="${size}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    parseMarkdown(text) {
+        let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        const blocks = [];
+        html = html.replace(/```(?:\w+)?\n?([\s\S]*?)```/g, (_, code) => {
+            const idx = blocks.length;
+            blocks.push(`<pre><code>${code}</code></pre>`);
+            return `\x00BLOCK${idx}\x00`;
+        });
+        html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+        html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+        html = html.replace(/((?:^[ \t]*[-*] .+\n?)+)/gm, match => {
+            const items = match
+                .trim()
+                .split('\n')
+                .filter(l => l.trim())
+                .map(l => `<li>${l.replace(/^[ \t]*[-*] /, '')}</li>`)
+                .join('');
+            return `\x00BLOCK${blocks.length}\x00${(() => {
+                blocks.push(`<ul>${items}</ul>`);
+                return '';
+            })()}`;
+        });
+        html = html.replace(/((?:^[ \t]*\d+\. .+\n?)+)/gm, match => {
+            const items = match
+                .trim()
+                .split('\n')
+                .filter(l => l.trim())
+                .map(l => `<li>${l.replace(/^[ \t]*\d+\. /, '')}</li>`)
+                .join('');
+            return `\x00BLOCK${blocks.length}\x00${(() => {
+                blocks.push(`<ol>${items}</ol>`);
+                return '';
+            })()}`;
+        });
+        html = html
+            .split(/\n{2,}/)
+            .map(chunk => {
+            const trimmed = chunk.trim();
+            if (!trimmed)
+                return '';
+            if (/^\x00BLOCK\d+\x00$/.test(trimmed))
+                return trimmed;
+            return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
+        })
+            .join('');
+        html = html.replace(/\x00BLOCK(\d+)\x00/g, (_, i) => blocks[parseInt(i, 10)] || '');
+        return html;
+    }
+    getRenderedContent() {
+        if (!this.content)
+            return '';
+        let html = this.parseMarkdown(this.content);
+        return html;
+    }
+    getRelativeTime() {
+        if (!this.timestamp)
+            return '';
+        try {
+            const date = new Date(this.timestamp);
+            if (isNaN(date.getTime()))
+                return this.timestamp;
+            const diffMin = Math.floor((Date.now() - date.getTime()) / 60000);
+            if (diffMin < 1)
+                return 'الآن';
+            if (diffMin < 60)
+                return `منذ ${diffMin} دقيقة`;
+            const hours = Math.floor(diffMin / 60);
+            if (hours < 24)
+                return `منذ ${hours} ساعة`;
+            return `منذ ${Math.floor(hours / 24)} يوم`;
+        }
+        catch {
+            return this.timestamp;
+        }
+    }
+    async handleCopy() {
+        try {
+            await navigator.clipboard.writeText(this.content);
+        }
+        catch (_) { }
+        this.copySuccess = true;
+        this.messageCopy.emit();
+        this.copyTimeout = setTimeout(() => (this.copySuccess = false), 1500);
+    }
+    handleFeedback(val) {
+        this.feedbackValue = this.feedbackValue === val ? null : val;
+        this.messageFeedback.emit(val);
+    }
+    renderActionsBar() {
+        return (h("div", { class: "actions-bar" }, this.enableRegenerate && h("button", { class: 'action-btn', onClick: () => this.messageRegenerate.emit(), title: "\u0625\u0639\u0627\u062F\u0629 \u062A\u062D\u0645\u064A\u0644" }, this.renderIcon('reload', 16)), h("button", { class: `action-btn copy-btn${this.copySuccess ? ' copy-success' : ''}`, onClick: () => this.handleCopy(), title: "\u0646\u0633\u062E" }, this.renderIcon('copy', 16)), h("div", { class: "feedback-group" }, h("button", { class: `feedback-btn thumbs-down-btn${this.feedbackValue === 'down' ? ' active' : ''}`, onClick: () => this.handleFeedback('down'), title: "\u063A\u064A\u0631 \u0645\u0641\u064A\u062F" }, this.renderIcon('thumbs-down', 16)), h("button", { class: `feedback-btn thumbs-up-btn${this.feedbackValue === 'up' ? ' active' : ''}`, onClick: () => this.handleFeedback('up'), title: "\u0645\u0641\u064A\u062F" }, this.renderIcon('thumbs-up', 16)))));
+    }
+    renderUserMessage() {
+        return (h("div", { class: "message-row user-row" }, h("div", { class: "bubble user-bubble" }, h("div", { class: "message-content", ref: el => {
+                if (!el)
+                    return;
+                if (this.format === 'markdown') {
+                    el.innerHTML = this.getRenderedContent();
+                }
+                else {
+                    el.textContent = this.content;
+                }
+            } }))));
+    }
+    renderAgentMessage() {
+        const showActions = this.showActions;
+        return (h("div", { class: "message-row agent-row" }, h("div", { class: "agent-bubble-wrapper" }, h("div", { class: "bubble agent-bubble" }, this.content && (h("div", { class: "message-content", ref: el => {
+                if (!el)
+                    return;
+                if (this.format === 'markdown') {
+                    el.innerHTML = this.getRenderedContent();
+                }
+                else {
+                    el.textContent = this.content;
+                }
+            } })), h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (h("div", { class: "agent-info" }, this.agentName && h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
+    }
+    render() {
+        return h(Host, { key: '77dd0c46a676c211fdfba283d51bd0e0d2594b24' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+    }
+};
+AiChatMessage.style = aiChatMessageCss();
+
+export { AiChatMessage as ai_chat_message };

package/dist/esm/ai-icon.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from './index-7hrZ8FOQ.js';
+import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+
+const aiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center}svg{display:block}`;
+
+const AiIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Icon name from the registry */
+    name;
+    /** Size in pixels for width and height */
+    size = 16;
+    render() {
+        const icon = iconRegistry[this.name];
+        if (!icon)
+            return null;
+        return (h(Host, null, h("svg", { width: this.size, height: this.size, viewBox: icon.viewBox, xmlns: "http://www.w3.org/2000/svg", ref: (el) => el && (el.innerHTML = icon.content), "aria-hidden": "true" })));
+    }
+};
+AiIcon.style = aiIconCss();
+
+export { AiIcon as ai_icon };

package/dist/esm/ai-link.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host } from './index-7hrZ8FOQ.js';
+import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+
+const aiLinkCss = () => `:host{--ai-link-color:var(--ai-accent-dark);--ai-link-color-hover:var(--ai-accent-dark);--ai-link-font-size:14px;--ai-link-font-weight:700;--ai-link-line-height:20px;--ai-link-gap:4px;--ai-link-icon-size:16px;display:flex;align-items:center;gap:var(--ai-link-gap);direction:rtl;font-family:var(--ai-font-family, 'PingARLT', sans-serif)}.link{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--ai-link-gap);color:var(--ai-link-color);font-size:var(--ai-link-font-size);font-weight:var(--ai-link-font-weight);font-family:inherit;line-height:var(--ai-link-line-height);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 0.15s ease;outline:none}.link:hover{color:var(--ai-link-color-hover);text-decoration:underline}.link:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px;border-radius:4px}.link__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ai-link-icon-size);height:var(--ai-link-icon-size);flex-shrink:0;line-height:0}.link__label{color:var(--ai-link-color);font-weight:bold}`;
+
+const AiLink = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Link display label */
+    label = '';
+    /** Href URL */
+    href = '#';
+    /** Link target */
+    target = '_blank';
+    /** Rel attribute — defaults to noopener noreferrer for _blank */
+    rel = '';
+    renderShareIcon() {
+        const icon = iconRegistry['share'];
+        if (!icon)
+            return null;
+        const svg = `<svg width="16" height="16" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "link__icon", innerHTML: svg });
+    }
+    render() {
+        const rel = this.rel || (this.target === '_blank' ? 'noopener noreferrer' : undefined);
+        return (h(Host, { key: '58a742b11ef7dcc1094031e804be6032311cea9d' }, h("span", { key: 'bf45468deb328c2d8ed70ac299d36968c16ababe', class: "link__label" }, this.label, h("slot", { key: 'bd43bc12d120ab806c895922ede0a08d4ec2f882' })), h("a", { key: 'b7c75a59bf18b1f1dc2e713b9e78c045afaa82e2', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
+    }
+};
+AiLink.style = aiLinkCss();
+
+export { AiLink as ai_link };

package/dist/esm/ai-loading.entry.js

@@ -0,0 +1,75 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-7hrZ8FOQ.js';
+import { i as iconRegistry } from './icon-registry-DYv5ef4M.js';
+
+const aiLoadingCss = () => `:host{display:block;direction:rtl}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-card, #FCFCFC);box-shadow:inset 0px 0px 3px 1px rgba(18, 18, 23, 0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.thinking-row{display:inline-flex;align-items:center;gap:8px;flex-direction:row}@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}.shimmer-text{font-size:14px;font-weight:400;line-height:1.5;background:var(--ai-glow-gradient, linear-gradient(90deg, #737373 0%, #c5c5c5 50%, #737373 100%));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}.steps-card{background:var(--ai-bg-card, #ffffff);border:1px solid var(--ai-border-default, #eeeeee);border-radius:16px;box-shadow:0px 1px 2px 0px rgba(18, 18, 23, 0.05);overflow:hidden}.steps-header{padding:16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ai-border-default, #eeeeee)}.steps-header.collapsible{cursor:pointer;user-select:none}.steps-header-center{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.steps-title{font-size:16px;font-weight:500;color:var(--ai-text-primary, #333333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-badge{font-size:12px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap;flex-shrink:0}.collapse-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ai-text-secondary, #737373);flex-shrink:0;transition:transform 0.2s ease;transform:rotate(180deg)}.collapse-btn.expanded{transform:rotate(0deg)}.steps-body{padding:12px 16px;display:flex;flex-direction:column}.step-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:4px 0}.step-row:hover .step-text{color:var(--ai-text-primary, #333333)}.step-text{flex:1;font-size:14px;font-weight:400;color:var(--ai-text-secondary, #737373);line-height:1.5;padding-top:4px}.step-badge-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.step-separator{width:1px;height:16px;background:var(--ai-border-default, #eeeeee);margin:2px 0}.step-badge-outer{padding:2px;border-radius:9999px;background:var(--ai-bg-surface, #f4f4f4);display:inline-flex;align-items:center;justify-content:center}.step-badge-inner{width:26px;height:26px;border-radius:9999px;background:var(--ai-bg-card, #ffffff);box-shadow:0px 0px 2px 1px rgba(18, 18, 23, 0.08);display:flex;align-items:center;justify-content:center;color:var(--ai-text-secondary, #737373)}.step-badge-inner.completed{background:var(--ai-success-bg);color:var(--ai-success-text)}.step-number{font-size:14px;font-weight:500;color:var(--ai-text-secondary, #737373);line-height:1}`;
+
+const AiLoading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggleExpand = createEvent(this, "toggleExpand");
+        this.stepClick = createEvent(this, "stepClick");
+    }
+    /** Main mode switch */
+    mode = 'thinking';
+    /** Thinking mode status text */
+    statusText = 'جاري التفكير...';
+    /** Steps as JSON string array of LoadingStep */
+    steps = '[]';
+    /** Steps mode title */
+    headerTitle = 'خطة التنفيذ';
+    /** Steps mode expand state */
+    expanded = true;
+    /** Whether steps card is collapsible */
+    collapsible = true;
+    toggleExpand;
+    stepClick;
+    _expanded = true;
+    componentWillLoad() {
+        this._expanded = this.expanded;
+    }
+    renderIcon(name, width, height) {
+        const icon = iconRegistry[name];
+        if (!icon)
+            return null;
+        const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
+        return h("span", { class: "icon-wrap", innerHTML: svg });
+    }
+    renderSparkleAvatar() {
+        return h("div", { class: "sparkle-avatar" }, this.renderIcon('sparkle', 14, 14));
+    }
+    renderStepBadge(step, index) {
+        const isCompleted = step.status === 'completed';
+        return (h("div", { class: "step-badge-outer" }, h("div", { class: `step-badge-inner ${isCompleted ? 'completed' : ''}` }, isCompleted ? this.renderIcon('check', 14, 14) : h("span", { class: "step-number" }, index + 1))));
+    }
+    getStepsList() {
+        try {
+            return JSON.parse(this.steps) || [];
+        }
+        catch {
+            return [];
+        }
+    }
+    handleToggle() {
+        if (!this.collapsible)
+            return;
+        this._expanded = !this._expanded;
+        this.expanded = this._expanded;
+        this.toggleExpand.emit(this._expanded);
+    }
+    renderThinkingMode() {
+        return (h("div", { class: "thinking-row" }, this.renderSparkleAvatar(), h("span", { class: "shimmer-text" }, this.statusText)));
+    }
+    renderStepsMode() {
+        const stepsList = this.getStepsList();
+        const completedCount = stepsList.filter(s => s.status === 'completed').length;
+        const total = stepsList.length;
+        const allDone = total > 0 && completedCount === total;
+        return (h("div", { class: "steps-card" }, h("div", { class: `steps-header ${this.collapsible ? 'collapsible' : ''}`, onClick: () => this.handleToggle() }, this.renderSparkleAvatar(), h("div", { class: "steps-header-center" }, h("span", { class: "steps-title" }, this.headerTitle), total > 0 && h("span", { class: "progress-badge" }, allDone ? 'مكتمل' : `${completedCount}/${total}`)), this.collapsible && h("button", { class: `collapse-btn ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('chevron-down', 20, 20))), this._expanded && stepsList.length > 0 && (h("div", { class: "steps-body" }, stepsList.map((step, i) => (h("div", { class: "step-row", onClick: () => this.stepClick.emit(step) }, h("div", { class: "step-badge-col" }, this.renderStepBadge(step, i), i < stepsList.length - 1 && h("div", { class: "step-separator" })), h("span", { class: "step-text" }, step.title))))))));
+    }
+    render() {
+        return h(Host, { key: '8a994758abe21c8a333088eeda498d158631bae6' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
+    }
+};
+AiLoading.style = aiLoadingCss();
+
+export { AiLoading as ai_loading };

package/dist/esm/ai-message-input.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-7hrZ8FOQ.js';
+
+const aiMessageInputCss = () => `:host{display:block;font-family:var(--ai-font-family, "PingARLT", sans-serif);width:100%;--ai-input-bg:var(--ai-bg-input, #ffffff);--ai-input-border-color:var(--ai-border-default, #eeeeee);--ai-input-text-color:var(--ai-text-primary, #333333);--ai-input-placeholder-color:var(--ai-text-secondary, #737373);--ai-voice-button-color:var(--ai-text-secondary, #737373);--ai-send-button-bg:var(--ai-border-default, #eeeeee);--ai-send-button-border:var(--ai-border-default, #eeeeee);--ai-send-button-color:var(--ai-text-secondary, #737373);--ai-send-button-active-color:var(--ai-text-primary, #333333)}.wrapper{position:relative;padding:var(--ai-input-wrapper-padding, 16px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0.9;pointer-events:none}.input-container{position:relative;background-color:var(--ai-input-bg, #ffffff);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-input-border-color, #eeeeee);box-shadow:0 1px 2px 0 var(--ai-input-shadow-color, rgba(18, 18, 23, 0.05));padding:var(--ai-input-padding, 12px);overflow:hidden}.input-row{display:flex;align-items:center;gap:var(--ai-input-gap, 12px)}.actions{display:flex;align-items:center;gap:var(--ai-actions-gap, 8px);flex-shrink:0}.send-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;max-height:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-border, #eeeeee);background-color:var(--ai-send-button-bg, #eeeeee);color:var(--ai-send-button-color, #737373);cursor:not-allowed;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;flex-shrink:0}.send-button.active{background-color:var(--ai-send-button-active-bg, var(--ai-accent));border-color:var(--ai-send-button-active-border, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer}.send-button.active:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}.send-button:focus{outline:none}.voice-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:32px;border:none;background-color:transparent;color:var(--ai-voice-button-color, #737373);cursor:pointer;transition:background-color 0.2s ease,     color 0.2s ease;flex-shrink:0}.voice-button:hover:not(:disabled){background-color:var(--ai-voice-button-hover-bg, rgba(0, 0, 0, 0.06));color:var(--ai-voice-button-hover-color, var(--ai-text-secondary))}.voice-button:disabled{cursor:not-allowed;opacity:0.5}.voice-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.textarea{flex:1;resize:none;outline:none;border:none;background:transparent;font-size:var(--ai-input-font-size, 14px);line-height:var(--ai-input-line-height, 20px);color:var(--ai-input-text-color, #333333);font-family:inherit;min-height:20px;text-align:right;direction:rtl;padding:0;overflow:hidden}.textarea::placeholder{color:var(--ai-input-placeholder-color, #737373)}.textarea:disabled{cursor:not-allowed;opacity:0.6}.input-container:focus-within{border-color:var(--ai-input-focus-border-color, var(--ai-accent));box-shadow:0 0 10px 4px rgba(227, 255, 247, 0.4)}:host([disabled]) .wrapper{opacity:0.6;pointer-events:none}:host([dir='ltr']) .textarea{text-align:left;direction:ltr}`;
+
+const MessageInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sendMessage = createEvent(this, "sendMessage");
+        this.voiceButtonClick = createEvent(this, "voiceButtonClick");
+    }
+    get el() { return getElement(this); }
+    /** Placeholder text for the textarea */
+    placeholder = 'ايش في بالك؟';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Whether to show the voice recording button */
+    showVoiceButton = true;
+    inputValue = '';
+    textareaRef;
+    /** Event emitted when a message is sent */
+    sendMessage;
+    /** Event emitted when the voice button is clicked — caller controls rendering the voice recorder */
+    voiceButtonClick;
+    /** Set the textarea value programmatically (e.g. after speech-to-text transcription) */
+    async setInputValue(value) {
+        this.inputValue = value;
+        if (this.textareaRef) {
+            this.textareaRef.style.height = 'auto';
+            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+            this.textareaRef.focus();
+        }
+    }
+    handleSendMessage = () => {
+        if (!this.inputValue.trim() || this.disabled)
+            return;
+        this.sendMessage.emit(this.inputValue.trim());
+        this.inputValue = '';
+        if (this.textareaRef) {
+            this.textareaRef.style.height = 'auto';
+        }
+    };
+    handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.handleSendMessage();
+        }
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        if (this.textareaRef) {
+            this.textareaRef.style.height = 'auto';
+            this.textareaRef.style.height = `${this.textareaRef.scrollHeight}px`;
+        }
+    };
+    render() {
+        const canSend = !!this.inputValue.trim() && !this.disabled;
+        return (h(Host, { key: '97dfe627b89657d36e4f7281a8bdb708cc913374' }, h("div", { key: 'a3efb2a0b95ec3a86cc5f575d0fdb2bb6dd2eb6c', part: "wrapper", class: "wrapper" }, h("div", { key: '5986fa2946a44757c143999a72b25ea3b6e7c336', part: "glow", class: "glow", "aria-hidden": "true" }), h("div", { key: 'd5b9d346495de00e8b0e0900ef3e766756844626', part: "container", class: "input-container" }, h("div", { key: '8313695b2e4d7557a5362e9b9d2a5c5803a4ec0c', class: "input-row" }, h("div", { key: '9c184f8097e28527b5d18fccf92010fb36b14a9c', class: "actions" }, h("button", { key: '39ad3feb24a53fd5a08e8a8388f7bcee71413a91', part: "send-button", class: `send-button${canSend ? ' active' : ''}`, onClick: this.handleSendMessage, disabled: !canSend, type: "button", "aria-label": "Send message" }, h("ai-icon", { key: '1fe555709288d33551696312fb3329b1c656d063', name: "send", size: 16 })), this.showVoiceButton && !this.inputValue && (h("button", { key: 'a7bcc3b9ca5f5e59c32a34ab33c2fbbd607bb298', part: "voice-button", class: "voice-button", onClick: () => this.voiceButtonClick.emit(), disabled: this.disabled, type: "button", "aria-label": "Record voice" }, h("ai-icon", { key: '98fea04c79e841e4a2b8ee50a480bb554212b055', name: "mic", size: 16 })))), h("textarea", { key: '798af74ca2298a31f37459dfa1c176182d740839', part: "textarea", ref: el => (this.textareaRef = el), value: this.inputValue, onInput: this.handleInputChange, onKeyPress: this.handleKeyPress, disabled: this.disabled, placeholder: this.placeholder, rows: 1, class: "textarea" }))))));
+    }
+};
+MessageInput.style = aiMessageInputCss();
+
+export { MessageInput as ai_message_input };