@salla.sa/ui-ai-kit-core 2.2.0 → 2.2.1

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BSQ0GkzI.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-VMEwYfaX.js';
 import { i as iconRegistry } from './icon-registry-DlD8m3rf.js';
 
 const aiRatingCss = () => `:host{--ai-rating-question-size:16px;--ai-rating-subtitle-size:14px;--ai-rating-gap:8px;--ai-rating-emoji-size:24px;--ai-rating-btn-padding:6px;--ai-rating-btn-border:1px solid var(--ai-border-light);--ai-rating-btn-radius:9999px;--ai-rating-btn-bg-hover:var(--ai-bg-surface);--ai-rating-btn-border-hover:1px solid var(--ai-border-default);--ai-rating-btn-bg-active:var(--ai-warning-bg);--ai-rating-btn-border-active:1px solid var(--ai-warning-border);--ai-rating-btn-shadow-active:var(--ai-shadow-active);--ai-rating-label-size:16px;display:block}.rating{display:flex;flex-direction:column;align-items:center;gap:var(--ai-rating-gap);width:100%}.rating__text{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;text-align:center}.rating__question{margin:0;font-size:var(--ai-rating-question-size);font-weight:500;line-height:24px;color:var(--ai-text-primary)}.rating__subtitle{margin:0;font-size:var(--ai-rating-subtitle-size);font-weight:400;line-height:20px;color:var(--ai-text-secondary)}.rating__icons{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;flex-wrap:wrap}.emoji-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--ai-rating-btn-padding);border:var(--ai-rating-btn-border);border-radius:var(--ai-rating-btn-radius);background:transparent;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;outline:none}.emoji-btn:focus-visible{outline:2px solid var(--ai-warning-border);outline-offset:2px}.emoji-btn:hover:not(:disabled),.emoji-btn--hovered{background:var(--ai-rating-btn-bg-hover);border:var(--ai-rating-btn-border-hover);transform:scale(1.1)}.emoji-btn--active{background:var(--ai-rating-btn-bg-active) !important;border:var(--ai-rating-btn-border-active) !important;box-shadow:var(--ai-rating-btn-shadow-active);transform:scale(1.18) !important}.emoji-btn--disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.emoji-btn__icon{font-size:var(--ai-rating-emoji-size);line-height:1;display:inline-flex;align-items:center;justify-content:center;width:var(--ai-rating-emoji-size);height:var(--ai-rating-emoji-size);pointer-events:none}.rating__hover-label{margin:0;font-size:var(--ai-rating-label-size);font-weight:500;line-height:24px;color:var(--ai-text-primary);text-align:center;width:100%;animation:fadeIn 0.15s ease}.rating--success{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 0;animation:fadeIn 0.2s ease}.rating__success-message{margin:0;font-size:var(--ai-rating-question-size);font-weight:500;line-height:24px;color:var(--ai-text-primary);text-align:center}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;

package/dist/esm/ai-route-decision.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BSQ0GkzI.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-VMEwYfaX.js';
 import { i as iconRegistry } from './icon-registry-DlD8m3rf.js';
 
 const aiRouteDecisionCss = () => `:host{display:inline-block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.route-pill{display:inline-flex;flex-direction:column;background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:9999px;box-shadow:var(--ai-shadow-sm);overflow:hidden;transition:border-radius 0.2s ease}.route-pill.expanded{border-radius:12px}.route-pill-main{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:none;border:none;cursor:pointer;color:var(--ai-text-primary);font-size:13px;font-weight:500;white-space:nowrap;width:100%}.route-icon{color:var(--ai-accent-dark);display:inline-flex;flex-shrink:0}.agent-label{display:inline-flex;align-items:center;gap:4px}.agent-emoji{font-size:14px;line-height:1}.confidence-badge{font-size:11px;font-weight:600;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:1px 6px;border-radius:9999px}.expand-icon{display:inline-flex;margin-inline-start:auto;color:var(--ai-text-secondary);transition:transform 0.2s ease;transform:rotate(0deg)}.expand-icon.expanded{transform:rotate(90deg)}.route-details{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;border-top:1px solid var(--ai-border-default);animation:fade-in 0.2s ease}@keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.reason-text{margin:0;font-size:12px;color:var(--ai-text-secondary);line-height:1.5}.confidence-bar-wrap{height:4px;border-radius:9999px;background:var(--ai-border-default);overflow:hidden}.confidence-bar{height:100%;border-radius:9999px;background:var(--ai-accent-dark);transition:width 0.4s ease}.meta-row{display:inline-flex;align-items:center;gap:4px;color:var(--ai-text-secondary)}.lang-chip{font-size:11px;color:var(--ai-text-secondary)}`;
@@ -38,7 +38,7 @@ const AiRouteDecision = class {
         this.routeExpand.emit(this._expanded);
     }
     render() {
-        return (h(Host, { key: 'f12718d142cff27d62c0a0299b029be2e2d88b86' }, h("div", { key: '4fcef90f887300c4884cd981737bf8ce8b796eca', class: `route-pill ${this._expanded ? 'expanded' : ''}` }, h("button", { key: '09eadc07b41b96fb56b4bcd937165de92507ac84', class: "route-pill-main", onClick: () => this.handleToggle() }, h("span", { key: 'd13744692a45c74976f89b582142ae09339015f5', class: "route-icon" }, this.renderIcon('route', 14, 14)), h("span", { key: '4f995cc09a72ba74310df17cf78735c27a910314', class: "agent-label" }, this.agentIcon && h("span", { key: '272dd78f38bbbb4ef845b7a41530d205368faf7e', class: "agent-emoji", "aria-hidden": "true" }, this.agentIcon), this.selectedAgent), this.confidence > 0 && (h("span", { key: 'a061317c9d5b8dad243dce0bb80e927eae04eb3d', class: "confidence-badge" }, this.confidence, "%")), h("span", { key: '4342bdf38aa85a5c5d6bd054504c91bccc7901e9', class: `expand-icon ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('arrow-right', 12, 12))), this._expanded && (h("div", { key: 'ab5340148e832baafdd38e17a748a52b83b25c96', class: "route-details" }, this.reason && h("p", { key: '7854838ea405c5fdb5ebe11fb3df36a9898be445', class: "reason-text" }, this.reason), this.confidence > 0 && (h("div", { key: 'baf946426ad7cda94d2acfbb9f8945b5b40a823c', class: "confidence-bar-wrap" }, h("div", { key: 'a6e08f412706ce18e16030dd4d475d57befdd9e7', class: "confidence-bar", style: { width: `${this.confidence}%` } }))), this.detectedLanguage && (h("div", { key: '58af2dbca56082dcf2910cc44ac553d6f2af015a', class: "meta-row" }, this.renderIcon('list', 12, 12), h("span", { key: '63517ed8802764542de330897372c6a01348d0a6', class: "lang-chip" }, this.detectedLanguage))))))));
+        return (h(Host, { key: 'fa9b966cf28225fa458fb00d1114fade995258c5' }, h("div", { key: '5263c969fd1672e1d302f06173dcdbe4450b162e', class: `route-pill ${this._expanded ? 'expanded' : ''}` }, h("button", { key: 'bf7800e828b0b61174f75343fcf9bca3134dfb2a', class: "route-pill-main", onClick: () => this.handleToggle() }, h("span", { key: '8531aeab0872f59417a37294e780d46962b21ead', class: "route-icon" }, this.renderIcon('route', 14, 14)), h("span", { key: '754529860d90a3ceb4f226ff85b1aecb40f4649e', class: "agent-label" }, this.agentIcon && h("span", { key: '39682d3a761d2cd6fae794fcb6036b0044f8f2dc', class: "agent-emoji", "aria-hidden": "true" }, this.agentIcon), this.selectedAgent), this.confidence > 0 && (h("span", { key: '36b3a921ab75c1faa0ece5f286703bf1b0aaca16', class: "confidence-badge" }, this.confidence, "%")), h("span", { key: 'c5199e986bf35d187cad16027f23e62addc45ecb', class: `expand-icon ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('arrow-right', 12, 12))), this._expanded && (h("div", { key: '2a18ae8297ad0d71b14d01d250e15cff452c4b07', class: "route-details" }, this.reason && h("p", { key: '55f5123399929c590fc5c2122fd7220209e5ecac', class: "reason-text" }, this.reason), this.confidence > 0 && (h("div", { key: 'fbc69e8cb7820c87764f46630af8f4a77d2d879b', class: "confidence-bar-wrap" }, h("div", { key: '1db1d454ef64dcf9e4c673d0a26780bd55f563d2', class: "confidence-bar", style: { width: `${this.confidence}%` } }))), this.detectedLanguage && (h("div", { key: '8553d1a20678252b8d4f9a1e9f8b64ce3f509ae5', class: "meta-row" }, this.renderIcon('list', 12, 12), h("span", { key: 'ec104948a04498d06ed73be89778c5b6d84582a2', class: "lang-chip" }, this.detectedLanguage))))))));
     }
 };
 AiRouteDecision.style = aiRouteDecisionCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BSQ0GkzI.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-VMEwYfaX.js';
 
 const aiSuggestionCss = () => `:host{--ai-suggestion-border:1px solid var(--ai-accent);--ai-suggestion-border-hover:1px solid var(--ai-accent);--ai-suggestion-radius:9999px;--ai-suggestion-padding:8px 12px;--ai-suggestion-gap:4px;--ai-suggestion-font-size:14px;--ai-suggestion-line-height:20px;display:inline-block}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--ai-suggestion-gap);background:var(--ai-bg-card);border:var(--ai-suggestion-border);border-radius:var(--ai-suggestion-radius);padding:var(--ai-suggestion-padding);color:var(--ai-accent-dark);font-size:var(--ai-suggestion-font-size);font-weight:400;line-height:var(--ai-suggestion-line-height);font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;outline:none;text-align:start}.chip:hover:not(:disabled){background:var(--ai-accent-bg);border:var(--ai-suggestion-border-hover)}.chip:active:not(:disabled){background:var(--ai-accent-bg)}.chip:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px}.chip--disabled,.chip:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.chip__label{display:inline-flex;align-items:center;gap:var(--ai-suggestion-gap)}`;
 
@@ -18,10 +18,10 @@ const AiSuggestion = class {
         this.suggestionClick.emit(this.label);
     }
     render() {
-        return (h(Host, { key: 'c2eb388d152586755e9cc10ac57b519e8ff84b4d' }, h("button", { key: '0b9f6ec6d8c57365e2c29bfe1bfc33993d3cb498', class: {
+        return (h(Host, { key: '510e649f8778e2298270d320f0555c4d960fb056' }, h("button", { key: 'a4ee17cbd432596804279d8a852635608125452a', class: {
                 chip: true,
                 'chip--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: 'd4fabc4c8176cd6837e609bad369e8edfc779855', class: "chip__label" }, this.label, h("slot", { key: 'a1074453e53982f10fd2115c2b15d7a7b20eda07' })))));
+            }, disabled: this.disabled, onClick: () => this.handleClick() }, h("span", { key: 'cb2d97459b0dd6effe83bbfb81a0af9144759477', class: "chip__label" }, this.label, h("slot", { key: 'ce84f07883f24c216c45da9266af5160baea9cdc' })))));
     }
 };
 AiSuggestion.style = aiSuggestionCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BSQ0GkzI.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-VMEwYfaX.js';
 
 const aiVoiceInputCss = () => `:host{display:block;width:100%}.wrapper{position:relative;padding:var(--Spacing-Sizes-lg, 12px)}.glow{position:absolute;bottom:20px;left:39px;right:39px;height:29px;border-radius:9999px;background:var(--ai-input-glow);filter:blur(20px);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.glow.visible{opacity:0.9}.input-container{position:relative;background-color:var(--ai-bg-input);border-radius:var(--ai-input-border-radius, 9999px);border:1px solid var(--ai-border-default);box-shadow:var(--ai-shadow-sm);padding:var(--ai-input-padding, 12px);overflow:hidden}.recording-row{display:flex;align-items:center;gap:var(--ai-input-gap, 10px)}.cancel-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-border-default);background-color:var(--ai-border-default);color:var(--ai-text-secondary);cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.cancel-button:hover{background-color:var(--ai-bg-surface);border-color:var(--ai-bg-surface)}.submit-button{display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;min-width:32px;padding:4px 8px;border-radius:32px;border:2px solid var(--ai-send-button-active-border, var(--ai-accent));background-color:var(--ai-send-button-active-bg, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer;flex-shrink:0;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.submit-button: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))}@keyframes pulse-once{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}.submit-button.pulse{animation:pulse-once 0.35s ease}.timer{font-size:13px;font-weight:500;color:var(--ai-text-secondary);min-width:36px;text-align:center;flex-shrink:0}.timer.warning{color:var(--ai-voice-timer-warning-color, var(--ai-danger-text))}.waveform{flex:1;min-width:0;height:32px}.error-message{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);background:var(--ai-voice-error-bg, var(--ai-danger-bg));color:var(--ai-voice-error-color, var(--ai-danger-text));font-size:11px;padding:6px 12px;border-radius:6px;white-space:nowrap;box-shadow:var(--ai-shadow-error);border:1px solid var(--ai-voice-error-border, var(--ai-danger-border));z-index:10}`;
 
@@ -277,7 +277,7 @@ const VoiceInput = class {
     };
     render() {
         const remaining = MAX_RECORDING_TIME - this.recordingDuration;
-        return (h(Host, { key: 'ca20fe9dda634af0da1ef6da59880279f0775a9f' }, h("div", { key: 'dc3328cc1ef74e9683bc6c34e1d3279b2ca2ffa2', class: "wrapper" }, h("div", { key: 'b4a4d2799b8c541dc03679686107cc486373e76b', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), h("div", { key: 'f4fa8c638e68528dffd96db627bd80d4c7103143', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
+        return (h(Host, { key: '93565ead1262f192811d4783ac4567b8eb7d59de' }, h("div", { key: '9317e2a24533435e5ac967f3eddaad3d1f6c4613', class: "wrapper" }, h("div", { key: '35631eb88e495be9b2bdabf1b8f15d237d327c4b', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), h("div", { key: 'c65050758e58402c5b341c8d24a0ca58f9f53361', class: "input-container" }, this.state === 'idle' ? (h("div", { class: "recording-row" }, h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, h("ai-icon", { name: "mic", size: 16 })), this.error && (h("div", { class: "error-message", role: "alert" }, this.error)))) : (h("div", { class: "recording-row" }, h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, h("ai-icon", { name: "cancel", size: 14 })), h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, h("ai-icon", { name: "arrow-up", size: 14 }))))))));
     }
 };
 VoiceInput.style = aiVoiceInputCss();

package/dist/esm/{index-BSQ0GkzI.js → index-VMEwYfaX.js}

@@ -935,6 +935,14 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1329,8 +1337,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1534,6 +1546,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
         cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-BSQ0GkzI.js';
-export { s as setNonce } from './index-BSQ0GkzI.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-VMEwYfaX.js';
+export { s as setNonce } from './index-VMEwYfaX.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ai-in-chat-browser",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1025,"page-title"],"isDraggable":[4,"is-draggable"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-message-input",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-agent-error",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"loading":[4],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-chat-message",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-route-decision",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-conversation-list",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4],"emptyText":[1,"empty-text"],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"]}]]],["ai-chat-header",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"],"statusIndicator":[1,"status-indicator"],"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"conversationItems":[16],"conversationActiveId":[1,"conversation-active-id"],"conversationLoading":[4,"conversation-loading"],"titleLoading":[4,"title-loading"],"avatarError":[32],"dropdownOpen":[32]},[[4,"click","handleDocumentClick"]]]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]]], options);
+  return bootstrapLazy([["ai-message-input",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-chat-header",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"statusIndicator":[1,"status-indicator"],"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"conversationItems":[16],"conversationActiveId":[1,"conversation-active-id"],"conversationLoading":[4,"conversation-loading"],"titleLoading":[4,"title-loading"],"avatarError":[32],"dropdownOpen":[32],"isFloating":[32]},[[4,"click","handleDocumentClick"]]]]],["ai-agent-error",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1537],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"loading":[4],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"],"direction":[513],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64],"cyclePosition":[64]},[[0,"headerPositionClick","handleHeaderPositionClick"]],{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-chat-message",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-in-chat-browser",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1,"page-title"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-route-decision",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-conversation-list",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4],"emptyText":[1,"empty-text"],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/ui-ai-kit.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-BSQ0GkzI.js';
-export { s as setNonce } from './index-BSQ0GkzI.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-VMEwYfaX.js';
+export { s as setNonce } from './index-VMEwYfaX.js';
 
 /*
  Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ai-in-chat-browser",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1025,"page-title"],"isDraggable":[4,"is-draggable"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-message-input",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-agent-error",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"loading":[4],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-chat-message",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-route-decision",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-conversation-list",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4],"emptyText":[1,"empty-text"],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"]}]]],["ai-chat-header",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"isDraggable":[4,"is-draggable"],"statusIndicator":[1,"status-indicator"],"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"conversationItems":[16],"conversationActiveId":[1,"conversation-active-id"],"conversationLoading":[4,"conversation-loading"],"titleLoading":[4,"title-loading"],"avatarError":[32],"dropdownOpen":[32]},[[4,"click","handleDocumentClick"]]]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]]], options);
+  return bootstrapLazy([["ai-message-input",[[513,"ai-message-input",{"placeholder":[1],"disabled":[4],"showVoiceButton":[4,"show-voice-button"],"maxLength":[2,"max-length"],"isRecording":[4,"is-recording"],"inputValue":[32],"showVoiceRecorder":[32],"isMultiline":[32],"setInputValue":[64]},null,{"isRecording":[{"onIsRecordingChange":0}]}]]],["ai-rating",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-chat-header",[[513,"ai-chat-header",{"mode":[1],"conversation":[1],"agentName":[1,"agent-name"],"agentStatus":[1,"agent-status"],"agentAvatar":[1,"agent-avatar"],"showBack":[4,"show-back"],"statusIndicator":[1,"status-indicator"],"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"conversationItems":[16],"conversationActiveId":[1,"conversation-active-id"],"conversationLoading":[4,"conversation-loading"],"titleLoading":[4,"title-loading"],"avatarError":[32],"dropdownOpen":[32],"isFloating":[32]},[[4,"click","handleDocumentClick"]]]]],["ai-agent-error",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container",[[769,"ai-chat-container",{"isOpen":[4,"is-open"],"position":[1537],"width":[1],"autoScroll":[4,"auto-scroll"],"showWatermark":[4,"show-watermark"],"floatHeight":[1,"float-height"],"theme":[1],"loading":[4],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"],"direction":[513],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64],"cyclePosition":[64]},[[0,"headerPositionClick","handleHeaderPositionClick"]],{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["ai-chat-message",[[769,"ai-chat-message",{"role":[1],"content":[1],"format":[1],"agentName":[1,"agent-name"],"timestamp":[1],"showActions":[4,"show-actions"],"enableRegenerate":[4,"enable-regenerate"],"feedbackValue":[1025,"feedback-value"],"copySuccess":[32]}]]],["ai-conversation-summary",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-in-chat-browser",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1,"page-title"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-link",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading",[[513,"ai-loading",{"mode":[1],"statusText":[1,"status-text"],"thinkingSubtext":[1,"thinking-subtext"],"steps":[16],"headerTitle":[1,"header-title"],"currentAgent":[1,"current-agent"],"showAgentBadges":[4,"show-agent-badges"],"expanded":[1028],"collapsible":[4],"_expanded":[32]}]]],["ai-route-decision",[[513,"ai-route-decision",{"selectedAgent":[1,"selected-agent"],"agentIcon":[1,"agent-icon"],"reason":[1],"confidence":[2],"detectedLanguage":[1,"detected-language"],"expanded":[1028],"_expanded":[32]}]]],["ai-suggestion",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-voice-input",[[513,"ai-voice-input",{"disabled":[4],"showWaveform":[4,"show-waveform"],"autoStart":[4,"auto-start"],"errorText":[1,"error-text"],"waveformColor":[1,"waveform-color"],"state":[32],"error":[32],"recordingDuration":[32],"submitPulse":[32]}]]],["ai-card",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-conversation-list",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4],"emptyText":[1,"empty-text"],"error":[4],"errorText":[1,"error-text"],"retryLabel":[1,"retry-label"]}]]],["ai-icon",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
 });

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

@@ -1,10 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export type ChatPosition = 'left' | 'right' | 'float';
 export declare class ChatContainer {
     el: HTMLElement;
     /** Controls visibility of the chat panel */
     isOpen: boolean;
     /** Position of the panel: 'left', 'right', or 'float' */
-    position: 'left' | 'right' | 'float';
+    position: ChatPosition;
     /** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
     width: string;
     /** Enable/disable auto-scroll to latest message */
@@ -23,8 +24,16 @@ export declare class ChatContainer {
     errorText: string;
     /** Retry button label */
     retryLabel: string;
+    /**
+     * Layout direction set by the host app.
+     * - `'rtl'` → valid docked position is `left`; cycle order: left ↔ float
+     * - `'ltr'` → valid docked position is `right`; cycle order: right ↔ float
+     */
+    direction: 'rtl' | 'ltr';
     /** Event emitted when the retry button is clicked */
     retryClick: EventEmitter<void>;
+    /** Fired when the position changes (via cyclePosition or the header button) */
+    positionChange: EventEmitter<ChatPosition>;
     isMobile: boolean;
     floatLeft: string;
     floatTop: string;
@@ -34,6 +43,11 @@ export declare class ChatContainer {
     private mutationObserver;
     private resizeObserver;
     private dragListener;
+    /**
+     * Listen for the composed headerPositionClick event fired by ai-chat-header.
+     * Automatically cycles the position so the host app doesn't need to wire it manually.
+     */
+    handleHeaderPositionClick(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     isOpenChanged(newVal: boolean): void;
@@ -41,6 +55,12 @@ export declare class ChatContainer {
     disconnectedCallback(): void;
     /** Programmatically scroll the messages area to the bottom */
     scrollToBottom(): Promise<void>;
+    /**
+     * Cycle to the next valid position based on the current direction.
+     * - RTL: left ↔ float
+     * - LTR: right ↔ float
+     */
+    cyclePosition(): Promise<void>;
     private handleWindowResize;
     private checkMobile;
     /** Re-clamp float position so the panel never ends up off-screen after resize */

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

@@ -14,7 +14,6 @@ export declare class AiChatHeader {
     agentAvatar: string;
     /** Human mode: show the back button */
     showBack: boolean;
-    isDraggable: boolean;
     /** Human mode: status indicator variant */
     statusIndicator: 'online' | 'offline' | 'busy' | 'away';
     /** Browser mode: page title shown in the header */
@@ -31,14 +30,22 @@ export declare class AiChatHeader {
     titleLoading: boolean;
     private avatarError;
     private dropdownOpen;
+    /** Internally managed — true when the parent ai-chat-container has position="float" */
+    private isFloating;
+    private parentPositionObserver;
     /** Cancel / close button */
     closeClick: EventEmitter<void>;
     /** Pencil-edit button (agent mode) */
-    editClick: EventEmitter<void>;
+    newChatClick: EventEmitter<void>;
     /** Title / chevron click → open conversation list (agent mode) */
     dropdownClick: EventEmitter<void>;
-    /** More options button */
+    /** More options button — also fires a composed event so ai-chat-container can auto-cycle position */
     positionClick: EventEmitter<void>;
+    /**
+     * Composed + bubbling event that ai-chat-container listens to internally
+     * to automatically cycle its position. Fires alongside positionClick.
+     */
+    headerPositionClick: EventEmitter<void>;
     /** Back-arrow button (human mode) */
     backClick: EventEmitter<void>;
     /**
@@ -56,6 +63,11 @@ export declare class AiChatHeader {
     /** Fired when a conversation delete button is clicked */
     conversationDelete: EventEmitter<string>;
     handleDocumentClick(event: Event): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private observeParentPosition;
+    private syncFloatingState;
     private renderIcon;
     private renderAvatar;
     private renderDragBtn;

package/dist/types/components/ai-in-chat-browser/ai-in-chat-browser.d.ts

@@ -1,22 +1,13 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 export declare class AiInChatBrowser {
     /** The URL to display inside the in-chat browser iframe */
     url: string;
-    /** Page title shown in the browser header. Defaults to the URL hostname when empty. */
+    /** Page title used as the iframe's accessible title. Defaults to the URL hostname when empty. */
     pageTitle: string;
-    /** Show the drag handle in the header (for floating containers) */
-    isDraggable: boolean;
-    /** Fired when the user clicks the back / close button to dismiss the browser */
-    browserClose: EventEmitter<void>;
-    /** Fired when the user clicks the external-link button */
-    browserOpenExternal: EventEmitter<string>;
     private isLoading;
     private hasError;
     onUrlChange(): void;
     private getDisplayTitle;
     private handleIframeLoad;
     private handleIframeError;
-    private handleBack;
-    private handleOpenExternal;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -5,11 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ChatPosition } from "./components/ai-chat-container/ai-chat-container";
 import { ConversationItem } from "./components/ai-conversation-list/ai-conversation-list";
 import { ConversationItem as ConversationItem1 } from "./components/ai-conversation-list/ai-conversation-list";
 import { IconName } from "./utils/icon-registry";
 import { LoadingStep } from "./components/ai-loading/ai-loading";
 import { RatingValue } from "./components/ai-rating/ai-rating";
+export { ChatPosition } from "./components/ai-chat-container/ai-chat-container";
 export { ConversationItem } from "./components/ai-conversation-list/ai-conversation-list";
 export { ConversationItem as ConversationItem1 } from "./components/ai-conversation-list/ai-conversation-list";
 export { IconName } from "./utils/icon-registry";
@@ -66,6 +68,15 @@ export namespace Components {
           * @default true
          */
         "autoScroll": boolean;
+        /**
+          * Cycle to the next valid position based on the current direction. - RTL: left ↔ float - LTR: right ↔ float
+         */
+        "cyclePosition": () => Promise<void>;
+        /**
+          * Layout direction set by the host app. - `'rtl'` → valid docked position is `left`; cycle order: left ↔ float - `'ltr'` → valid docked position is `right`; cycle order: right ↔ float
+          * @default 'rtl'
+         */
+        "direction": 'rtl' | 'ltr';
         /**
           * Show error state (e.g. failed to load conversation)
           * @default false
@@ -93,9 +104,9 @@ export namespace Components {
         "loading": boolean;
         /**
           * Position of the panel: 'left', 'right', or 'float'
-          * @default 'right'
+          * @default 'left'
          */
-        "position": 'left' | 'right' | 'float';
+        "position": ChatPosition;
         /**
           * Retry button label
           * @default 'إعادة المحاولة'
@@ -157,10 +168,6 @@ export namespace Components {
           * @default false
          */
         "conversationLoading": boolean;
-        /**
-          * @default false
-         */
-        "isDraggable": boolean;
         /**
           * Layout variant
           * @default 'agent'
@@ -298,12 +305,7 @@ export namespace Components {
     }
     interface AiInChatBrowser {
         /**
-          * Show the drag handle in the header (for floating containers)
-          * @default false
-         */
-        "isDraggable": boolean;
-        /**
-          * Page title shown in the browser header. Defaults to the URL hostname when empty.
+          * Page title used as the iframe's accessible title. Defaults to the URL hostname when empty.
           * @default ''
          */
         "pageTitle": string;
@@ -532,10 +534,6 @@ export interface AiConversationListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAiConversationListElement;
 }
-export interface AiInChatBrowserCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAiInChatBrowserElement;
-}
 export interface AiLoadingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAiLoadingElement;
@@ -587,6 +585,7 @@ declare global {
     };
     interface HTMLAiChatContainerElementEventMap {
         "retryClick": void;
+        "positionChange": ChatPosition;
     }
     interface HTMLAiChatContainerElement extends Components.AiChatContainer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLAiChatContainerElementEventMap>(type: K, listener: (this: HTMLAiChatContainerElement, ev: AiChatContainerCustomEvent<HTMLAiChatContainerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -604,9 +603,10 @@ declare global {
     };
     interface HTMLAiChatHeaderElementEventMap {
         "closeClick": void;
-        "editClick": void;
+        "newChatClick": void;
         "dropdownClick": void;
         "positionClick": void;
+        "headerPositionClick": void;
         "backClick": void;
         "headerDragStart": { clientX: number; clientY: number };
         "openExternal": string;
@@ -677,19 +677,7 @@ declare global {
         prototype: HTMLAiIconElement;
         new (): HTMLAiIconElement;
     };
-    interface HTMLAiInChatBrowserElementEventMap {
-        "browserClose": void;
-        "browserOpenExternal": string;
-    }
     interface HTMLAiInChatBrowserElement extends Components.AiInChatBrowser, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAiInChatBrowserElementEventMap>(type: K, listener: (this: HTMLAiInChatBrowserElement, ev: AiInChatBrowserCustomEvent<HTMLAiInChatBrowserElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAiInChatBrowserElementEventMap>(type: K, listener: (this: HTMLAiInChatBrowserElement, ev: AiInChatBrowserCustomEvent<HTMLAiInChatBrowserElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLAiInChatBrowserElement: {
         prototype: HTMLAiInChatBrowserElement;
@@ -878,6 +866,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "autoScroll"?: boolean;
+        /**
+          * Layout direction set by the host app. - `'rtl'` → valid docked position is `left`; cycle order: left ↔ float - `'ltr'` → valid docked position is `right`; cycle order: right ↔ float
+          * @default 'rtl'
+         */
+        "direction"?: 'rtl' | 'ltr';
         /**
           * Show error state (e.g. failed to load conversation)
           * @default false
@@ -903,15 +896,19 @@ declare namespace LocalJSX {
           * @default false
          */
         "loading"?: boolean;
+        /**
+          * Fired when the position changes (via cyclePosition or the header button)
+         */
+        "onPositionChange"?: (event: AiChatContainerCustomEvent<ChatPosition>) => void;
         /**
           * Event emitted when the retry button is clicked
          */
         "onRetryClick"?: (event: AiChatContainerCustomEvent<void>) => void;
         /**
           * Position of the panel: 'left', 'right', or 'float'
-          * @default 'right'
+          * @default 'left'
          */
-        "position"?: 'left' | 'right' | 'float';
+        "position"?: ChatPosition;
         /**
           * Retry button label
           * @default 'إعادة المحاولة'
@@ -969,10 +966,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "conversationLoading"?: boolean;
-        /**
-          * @default false
-         */
-        "isDraggable"?: boolean;
         /**
           * Layout variant
           * @default 'agent'
@@ -998,20 +991,24 @@ declare namespace LocalJSX {
           * Title / chevron click → open conversation list (agent mode)
          */
         "onDropdownClick"?: (event: AiChatHeaderCustomEvent<void>) => void;
-        /**
-          * Pencil-edit button (agent mode)
-         */
-        "onEditClick"?: (event: AiChatHeaderCustomEvent<void>) => void;
         /**
           * Fired on pointerdown of the drag handle. Composed + bubbling so ai-chat-container can receive it across shadow roots.
          */
         "onHeaderDragStart"?: (event: AiChatHeaderCustomEvent<{ clientX: number; clientY: number }>) => void;
+        /**
+          * Composed + bubbling event that ai-chat-container listens to internally to automatically cycle its position. Fires alongside positionClick.
+         */
+        "onHeaderPositionClick"?: (event: AiChatHeaderCustomEvent<void>) => void;
+        /**
+          * Pencil-edit button (agent mode)
+         */
+        "onNewChatClick"?: (event: AiChatHeaderCustomEvent<void>) => void;
         /**
           * Open-external button (browser mode)
          */
         "onOpenExternal"?: (event: AiChatHeaderCustomEvent<string>) => void;
         /**
-          * More options button
+          * More options button — also fires a composed event so ai-chat-container can auto-cycle position
          */
         "onPositionClick"?: (event: AiChatHeaderCustomEvent<void>) => void;
         /**
@@ -1152,20 +1149,7 @@ declare namespace LocalJSX {
     }
     interface AiInChatBrowser {
         /**
-          * Show the drag handle in the header (for floating containers)
-          * @default false
-         */
-        "isDraggable"?: boolean;
-        /**
-          * Fired when the user clicks the back / close button to dismiss the browser
-         */
-        "onBrowserClose"?: (event: AiInChatBrowserCustomEvent<void>) => void;
-        /**
-          * Fired when the user clicks the external-link button
-         */
-        "onBrowserOpenExternal"?: (event: AiInChatBrowserCustomEvent<string>) => void;
-        /**
-          * Page title shown in the browser header. Defaults to the URL hostname when empty.
+          * Page title used as the iframe's accessible title. Defaults to the URL hostname when empty.
           * @default ''
          */
         "pageTitle"?: string;
@@ -1405,7 +1389,7 @@ declare namespace LocalJSX {
     }
     interface AiChatContainerAttributes {
         "isOpen": boolean;
-        "position": 'left' | 'right' | 'float';
+        "position": ChatPosition;
         "width": string;
         "autoScroll": boolean;
         "showWatermark": boolean;
@@ -1415,6 +1399,7 @@ declare namespace LocalJSX {
         "error": boolean;
         "errorText": string;
         "retryLabel": string;
+        "direction": 'rtl' | 'ltr';
     }
     interface AiChatHeaderAttributes {
         "mode": 'agent' | 'human' | 'browser';
@@ -1423,7 +1408,6 @@ declare namespace LocalJSX {
         "agentStatus": string;
         "agentAvatar": string;
         "showBack": boolean;
-        "isDraggable": boolean;
         "statusIndicator": 'online' | 'offline' | 'busy' | 'away';
         "pageTitle": string;
         "pageUrl": string;
@@ -1462,7 +1446,6 @@ declare namespace LocalJSX {
     interface AiInChatBrowserAttributes {
         "url": string;
         "pageTitle": string;
-        "isDraggable": boolean;
     }
     interface AiLinkAttributes {
         "label": string;

package/dist/types/index.d.ts

@@ -10,4 +10,5 @@
 export { format } from './utils/utils';
 export type * from './components.d.ts';
 export type { LoadingStep } from './components/ai-loading/ai-loading';
+export type { ChatPosition } from './components/ai-chat-container/ai-chat-container';
 export type { IconName } from './utils/icon-registry';

package/dist/ui-ai-kit/{p-1e8e6440.entry.js → p-062cad02.entry.js}

@@ -1 +1 @@
-import{r as i,c as e,h as a,H as s}from"./p-BSQ0GkzI.js";const t=class{constructor(a){i(this,a),this.suggestionClick=e(this,"suggestionClick")}label="";disabled=!1;suggestionClick;handleClick(){this.disabled||this.suggestionClick.emit(this.label)}render(){return a(s,{key:"c2eb388d152586755e9cc10ac57b519e8ff84b4d"},a("button",{key:"0b9f6ec6d8c57365e2c29bfe1bfc33993d3cb498",class:{chip:!0,"chip--disabled":this.disabled},disabled:this.disabled,onClick:()=>this.handleClick()},a("span",{key:"d4fabc4c8176cd6837e609bad369e8edfc779855",class:"chip__label"},this.label,a("slot",{key:"a1074453e53982f10fd2115c2b15d7a7b20eda07"}))))}};t.style=":host{--ai-suggestion-border:1px solid var(--ai-accent);--ai-suggestion-border-hover:1px solid var(--ai-accent);--ai-suggestion-radius:9999px;--ai-suggestion-padding:8px 12px;--ai-suggestion-gap:4px;--ai-suggestion-font-size:14px;--ai-suggestion-line-height:20px;display:inline-block}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--ai-suggestion-gap);background:var(--ai-bg-card);border:var(--ai-suggestion-border);border-radius:var(--ai-suggestion-radius);padding:var(--ai-suggestion-padding);color:var(--ai-accent-dark);font-size:var(--ai-suggestion-font-size);font-weight:400;line-height:var(--ai-suggestion-line-height);font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;outline:none;text-align:start}.chip:hover:not(:disabled){background:var(--ai-accent-bg);border:var(--ai-suggestion-border-hover)}.chip:active:not(:disabled){background:var(--ai-accent-bg)}.chip:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px}.chip--disabled,.chip:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.chip__label{display:inline-flex;align-items:center;gap:var(--ai-suggestion-gap)}";export{t as ai_suggestion}
+import{r as i,c as e,h as a,H as s}from"./p-VMEwYfaX.js";const t=class{constructor(a){i(this,a),this.suggestionClick=e(this,"suggestionClick")}label="";disabled=!1;suggestionClick;handleClick(){this.disabled||this.suggestionClick.emit(this.label)}render(){return a(s,{key:"510e649f8778e2298270d320f0555c4d960fb056"},a("button",{key:"a4ee17cbd432596804279d8a852635608125452a",class:{chip:!0,"chip--disabled":this.disabled},disabled:this.disabled,onClick:()=>this.handleClick()},a("span",{key:"cb2d97459b0dd6effe83bbfb81a0af9144759477",class:"chip__label"},this.label,a("slot",{key:"ce84f07883f24c216c45da9266af5160baea9cdc"}))))}};t.style=":host{--ai-suggestion-border:1px solid var(--ai-accent);--ai-suggestion-border-hover:1px solid var(--ai-accent);--ai-suggestion-radius:9999px;--ai-suggestion-padding:8px 12px;--ai-suggestion-gap:4px;--ai-suggestion-font-size:14px;--ai-suggestion-line-height:20px;display:inline-block}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--ai-suggestion-gap);background:var(--ai-bg-card);border:var(--ai-suggestion-border);border-radius:var(--ai-suggestion-radius);padding:var(--ai-suggestion-padding);color:var(--ai-accent-dark);font-size:var(--ai-suggestion-font-size);font-weight:400;line-height:var(--ai-suggestion-line-height);font-family:inherit;white-space:nowrap;cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;outline:none;text-align:start}.chip:hover:not(:disabled){background:var(--ai-accent-bg);border:var(--ai-suggestion-border-hover)}.chip:active:not(:disabled){background:var(--ai-accent-bg)}.chip:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px}.chip--disabled,.chip:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}.chip__label{display:inline-flex;align-items:center;gap:var(--ai-suggestion-gap)}";export{t as ai_suggestion}