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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQ8Az7-D.js');
+var index = require('./index-Cc05u4ND.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}`;
 
@@ -279,7 +279,7 @@ const VoiceInput = class {
     };
     render() {
         const remaining = MAX_RECORDING_TIME - this.recordingDuration;
-        return (index.h(index.Host, { key: 'ca20fe9dda634af0da1ef6da59880279f0775a9f' }, index.h("div", { key: 'dc3328cc1ef74e9683bc6c34e1d3279b2ca2ffa2', class: "wrapper" }, index.h("div", { key: 'b4a4d2799b8c541dc03679686107cc486373e76b', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), index.h("div", { key: 'f4fa8c638e68528dffd96db627bd80d4c7103143', class: "input-container" }, this.state === 'idle' ? (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, index.h("ai-icon", { name: "mic", size: 16 })), this.error && (index.h("div", { class: "error-message", role: "alert" }, this.error)))) : (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, index.h("ai-icon", { name: "cancel", size: 14 })), index.h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && index.h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), index.h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, index.h("ai-icon", { name: "arrow-up", size: 14 }))))))));
+        return (index.h(index.Host, { key: '93565ead1262f192811d4783ac4567b8eb7d59de' }, index.h("div", { key: '9317e2a24533435e5ac967f3eddaad3d1f6c4613', class: "wrapper" }, index.h("div", { key: '35631eb88e495be9b2bdabf1b8f15d237d327c4b', class: `glow${this.state === 'recording' ? ' visible' : ''}`, "aria-hidden": "true" }), index.h("div", { key: 'c65050758e58402c5b341c8d24a0ca58f9f53361', class: "input-container" }, this.state === 'idle' ? (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "submit-button", onClick: this.startRecording, disabled: this.disabled, "aria-label": "Start recording" }, index.h("ai-icon", { name: "mic", size: 16 })), this.error && (index.h("div", { class: "error-message", role: "alert" }, this.error)))) : (index.h("div", { class: "recording-row" }, index.h("button", { type: "button", class: "cancel-button", onClick: this.cancelRecording, "aria-label": "Cancel" }, index.h("ai-icon", { name: "cancel", size: 14 })), index.h("div", { class: `timer${remaining <= 5 ? ' warning' : ''}` }, this.formatDuration(this.recordingDuration)), this.showWaveform && index.h("canvas", { ref: el => (this.canvasRef = el), class: "waveform", height: "32" }), index.h("button", { type: "button", class: `submit-button${this.submitPulse ? ' pulse' : ''}`, onClick: this.stopRecording, "aria-label": "Send" }, index.h("ai-icon", { name: "arrow-up", size: 14 }))))))));
     }
 };
 VoiceInput.style = aiVoiceInputCss();

package/dist/cjs/{index-BQ8Az7-D.js → index-Cc05u4ND.js}

@@ -937,6 +937,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)) {
@@ -1331,8 +1339,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;
           })
         ])
@@ -1536,6 +1548,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/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BQ8Az7-D.js');
+var index = require('./index-Cc05u4ND.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ai-in-chat-browser.cjs",[[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.cjs",[[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.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-agent-error.cjs",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container.cjs",[[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.cjs",[[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.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[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.cjs",[[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.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-conversation-list.cjs",[[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.cjs",[[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.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input.cjs",[[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.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]]], options);
+  return index.bootstrapLazy([["ai-message-input.cjs",[[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.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-chat-header.cjs",[[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.cjs",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container.cjs",[[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.cjs",[[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.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-in-chat-browser.cjs",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1,"page-title"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[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.cjs",[[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.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-voice-input.cjs",[[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.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-conversation-list.cjs",[[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.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQ8Az7-D.js');
+var index = require('./index-Cc05u4ND.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["ai-in-chat-browser.cjs",[[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.cjs",[[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.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-agent-error.cjs",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container.cjs",[[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.cjs",[[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.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[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.cjs",[[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.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-conversation-list.cjs",[[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.cjs",[[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.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]],["ai-voice-input.cjs",[[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.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]]], options);
+  return index.bootstrapLazy([["ai-message-input.cjs",[[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.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"successMessage":[1,"success-message"],"value":[1026],"disabled":[4],"hovered":[32],"submitted":[32]}]]],["ai-chat-header.cjs",[[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.cjs",[[513,"ai-agent-error",{"headline":[1],"message":[1],"errorCode":[1,"error-code"],"retryable":[4],"retryLabel":[1,"retry-label"],"dismissible":[4]}]]],["ai-chat-container.cjs",[[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.cjs",[[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.cjs",[[769,"ai-conversation-summary",{"conversation":[1],"summary":[1],"messageCount":[2,"message-count"],"language":[1]}]]],["ai-in-chat-browser.cjs",[[513,"ai-in-chat-browser",{"url":[1],"pageTitle":[1,"page-title"],"isLoading":[32],"hasError":[32]},null,{"url":[{"onUrlChange":0}]}]]],["ai-link.cjs",[[769,"ai-link",{"label":[1],"href":[1],"target":[1],"rel":[1]}]]],["ai-loading.cjs",[[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.cjs",[[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.cjs",[[769,"ai-suggestion",{"label":[1],"disabled":[4]}]]],["ai-voice-input.cjs",[[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.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["ai-conversation-list.cjs",[[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.cjs",[[513,"ai-icon",{"name":[1],"size":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,11 +1,11 @@
 {
   "entries": [
+    "components/ai-chat-container/ai-chat-container.js",
     "components/ai-conversation-list/ai-conversation-list.js",
     "components/ai-loading/ai-loading.js",
     "components/ai-rating/ai-rating.js",
     "components/ai-agent-error/ai-agent-error.js",
     "components/ai-card/ai-card.js",
-    "components/ai-chat-container/ai-chat-container.js",
     "components/ai-chat-header/ai-chat-header.js",
     "components/ai-chat-message/ai-chat-message.js",
     "components/ai-conversation-summary/ai-conversation-summary.js",

package/dist/collection/components/ai-agent-error/ai-agent-error.js

@@ -23,7 +23,7 @@ export class AiAgentError {
         return h("span", { class: "icon-wrap", innerHTML: svg });
     }
     render() {
-        return (h(Host, { key: '58e3dfec84f2fcea2f53657dc2b7d16344ada0c2' }, h("div", { key: 'c85a02edecb0919d664a01468b4318b3258e126c', class: "error-card" }, h("div", { key: '9336d8a342877b2cccc08f1e52aa981d5ecb7e4b', class: "error-body" }, h("div", { key: '0e472ff1f226635242feb969b6c897b5a8eb57b8', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), h("div", { key: 'bec21585c826378a01a30a1e2c347289fa968b6d', class: "error-content" }, h("div", { key: '04030863e65ad1551abd0941709cbc61ef36b4f4', class: "error-headline-row" }, h("span", { key: '6044558b93d6e9be50cbf3f251bf8cd615014a2b', class: "error-headline" }, this.headline), this.errorCode && (h("span", { key: '33c20307ceb7d55d6b0dd1a2b583456fdb50a947', class: "error-code-badge" }, this.errorCode))), this.message && (h("p", { key: '911f62b72bc8b61a2d6bd444d6e6304c6e4adaed', class: "error-message" }, this.message))), this.dismissible && (h("button", { key: '76fcb3b7e964f7f1fdebb422c9b056d1631df666', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (h("div", { key: '670e28d12c27dcfc9ce9c017ae06278fb07906cd', class: "error-footer" }, h("button", { key: '2cf7655d43e1d68c6befde8a48b72b10c1077f68', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), h("span", { key: 'e28ca18eba500c9d50d7d690889777ad312b9e62' }, this.retryLabel)))))));
+        return (h(Host, { key: '5cab52b708c10b0cfec5fdd0dfdc85046a7426a2' }, h("div", { key: 'b4691b7dfd9cbb98e522af9ed5ad2d2b912471fb', class: "error-card" }, h("div", { key: 'e8f5fb9ca5fda7f4cedf09bb4dc9848303d4a339', class: "error-body" }, h("div", { key: 'b1f2e61a60fa4a3fba6a98dc67f3531f9164b662', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), h("div", { key: 'a1e2e6f6096ed6e593e60eadfd792b11b7b117cd', class: "error-content" }, h("div", { key: '5eea71440e7b817732c3aab465f2710a2b198b1a', class: "error-headline-row" }, h("span", { key: '61b90ef0186837770ce10642257ee2ea5f1f6c9d', class: "error-headline" }, this.headline), this.errorCode && (h("span", { key: '12305a917ae3b479340533335203455c48d1bb24', class: "error-code-badge" }, this.errorCode))), this.message && (h("p", { key: 'f400a76fbd2caac0b64799914b9938de3e9eb78c', class: "error-message" }, this.message))), this.dismissible && (h("button", { key: 'f2fa1b1fb86fad249404e5b66ba72f2937c4eb67', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (h("div", { key: 'd2c1f2190383345c6101e70b1499e05d59092653', class: "error-footer" }, h("button", { key: '7f8b52b0ac1e2dd4dd4244949e0da9874077f284', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), h("span", { key: '321d51fd3b36f23b7e49b05af3ab85346f87f44f' }, this.retryLabel)))))));
     }
     static get is() { return "ai-agent-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-card/ai-card.js

@@ -5,11 +5,11 @@ export class AiCard {
     /** Remove the shadow */
     noShadow = false;
     render() {
-        return (h(Host, { key: '1bdd14661b995f51378e67676a44c92730626ffe' }, h("div", { key: 'fa15c03048be26793d36bfb8c6a7325b21b04d5c', class: {
+        return (h(Host, { key: '849dbf8d8eac913c76e71a10cb9b30f9fda3c320' }, h("div", { key: '5d9f75428e6d94cf2c3729698e87fd3185c20129', class: {
                 card: true,
                 'card--no-padding': this.noPadding,
                 'card--no-shadow': this.noShadow,
-            } }, h("slot", { key: 'a1d77664d0754f5d71c75ebc658a74c581111091' }))));
+            } }, h("slot", { key: 'f604568228c02514ff0f569cfa4fd706c247652e' }))));
     }
     static get is() { return "ai-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-chat-container/ai-chat-container.js

@@ -4,7 +4,7 @@ export class ChatContainer {
     /** Controls visibility of the chat panel */
     isOpen = false;
     /** Position of the panel: 'left', 'right', or 'float' */
-    position = 'right';
+    position = 'left';
     /** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
     width = '28rem';
     /** Enable/disable auto-scroll to latest message */
@@ -23,8 +23,16 @@ export class ChatContainer {
     errorText = 'تعذّر تحميل المحادثة';
     /** Retry button label */
     retryLabel = 'إعادة المحاولة';
+    /**
+     * 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';
     /** Event emitted when the retry button is clicked */
     retryClick;
+    /** Fired when the position changes (via cyclePosition or the header button) */
+    positionChange;
     isMobile = false;
     floatLeft = '24px';
     floatTop = '24px';
@@ -75,6 +83,13 @@ export class ChatContainer {
         document.addEventListener('pointermove', onMove);
         document.addEventListener('pointerup', onUp);
     };
+    /**
+     * 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() {
+        this.cyclePosition();
+    }
     componentWillLoad() {
         this.checkMobile();
     }
@@ -130,6 +145,16 @@ export class ChatContainer {
             this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
         }
     }
+    /**
+     * Cycle to the next valid position based on the current direction.
+     * - RTL: left ↔ float
+     * - LTR: right ↔ float
+     */
+    async cyclePosition() {
+        const docked = this.direction === 'rtl' ? 'left' : 'right';
+        this.position = this.position === 'float' ? docked : 'float';
+        this.positionChange.emit(this.position);
+    }
     handleWindowResize = () => {
         this.checkMobile();
         this.clampFloatPosition();
@@ -200,7 +225,7 @@ export class ChatContainer {
         return (h("div", { class: "error-state", role: "alert" }, h("svg", { class: "error-icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "1.5" }), h("path", { d: "M12 7v6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }), h("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })), h("p", { class: "error-text" }, this.errorText), h("button", { class: "error-retry-btn", type: "button", onClick: () => this.retryClick.emit() }, this.retryLabel)));
     }
     render() {
-        return (h(Host, { key: '146842c18b30c96eff709262d14f0026b3c0b5f2', class: { dark: this.isDark() } }, h("div", { key: '6d138b05c08cf3c01645d2832b9df847ae8fb34e', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: 'ef54afa1cec6e7589aa559938792429eb0fe76b6', class: "watermark" }, h("svg", { key: 'eb5dc8d17a48b73ed28c23d50a77939995efe818', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'c2f60242842b2788cfc577a96da595a6588d5dac', filter: "url(#wm_circle_shadow)" }, h("circle", { key: '9681bf0e38334eea7978e16854f7572bfc702a7d', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: 'dfb531e4137c54ae2cb3cd67fc4f48cff578bbd6' }, h("filter", { key: '61c6a2e8a4ad2726280fdecea7f416f160e1388c', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'e001abcfa7ea700a4c9df12f7edb2d77f41a681a', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ab42b31ddffdafbcd0d8b3a1ac3638cad08422de', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: 'dbe6cee1b694612115237fe7ba631962b299c17e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '6e4df9fac567a782676e6ee11124405856e2d216', dy: "3" }), h("feGaussianBlur", { key: 'cf3eccf07988f8d35fc22db8dc8acd7efafb9f28', stdDeviation: "3" }), h("feComposite", { key: '8ede441bedbc49e505402977ab4787b7f80b8c17', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '4d6286fd6303c018d7c9e37258bc3fe746d716c0', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '137f322f9922e682873b3f7c3f44b714793d80bc', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '5ed41b236f120a820e138829fdd86d6d7517953b', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'bd4a4b26cf740bccb6dfa44c185e1c6ce9281407', filter: "url(#wm_star_shadow)" }, h("path", { key: '7b0769a6ef62e35206e0057da58ae0b2187a5aad', d: "M38.7421 0C39.5691 0 40.2689 0.286272 40.8414 0.858815C41.414 1.43136 41.7002 2.13113 41.7002 2.95814C41.7002 8.87442 43.1952 14.3772 46.1851 19.4665C49.1115 24.4285 53.0557 28.3727 58.0177 31.299C63.107 34.289 68.6097 35.7839 74.526 35.7839C75.353 35.7839 76.0528 36.0702 76.6254 36.6428C77.1979 37.2153 77.4842 37.9151 77.4842 38.7421C77.4842 39.5691 77.1979 40.2689 76.6254 40.8414C76.0528 41.414 75.353 41.7002 74.526 41.7002C68.6097 41.7002 63.107 43.1952 58.0177 46.1851C53.0557 49.1115 49.1115 53.0557 46.1851 58.0177C43.1952 63.107 41.7002 68.6097 41.7002 74.526C41.7002 75.353 41.414 76.0528 40.8414 76.6254C40.2689 77.1979 39.5691 77.4842 38.7421 77.4842C37.9151 77.4842 37.2153 77.1979 36.6428 76.6254C36.0702 76.0528 35.7839 75.353 35.7839 74.526C35.7839 68.6097 34.289 63.107 31.299 58.0177C28.3727 53.0557 24.4285 49.1115 19.4665 46.1851C14.3772 43.1952 8.87442 41.7002 2.95814 41.7002C2.13113 41.7002 1.43136 41.414 0.858815 40.8414C0.286272 40.2689 0 39.5691 0 38.7421C0 37.9151 0.286272 37.2153 0.858815 36.6428C1.43136 36.0702 2.13113 35.7839 2.95814 35.7839C8.87442 35.7839 14.3772 34.289 19.4665 31.299C24.4285 28.3727 28.3727 24.4285 31.299 19.4665C34.289 14.3772 35.7839 8.87442 35.7839 2.95814C35.7839 2.13113 36.0702 1.43136 36.6428 0.858815C37.2153 0.286272 37.9151 0 38.7421 0Z", class: "watermark-star" })), h("defs", { key: 'a004811963ac78b6c13df187333f3ba525c18f55' }, h("filter", { key: '734877af85b6554e27f24720e06bcd59b707362b', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'bfa384407eb019aa79be662411bea47097744323', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: '7cd90c875f8bce1780a4eaa899bc222b8cd5991e', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '3edcb0bb26efba7f93e6ea125cc1b21f885cc75e', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '2e18721ab747cedc0a6ae4d422a6b2991e37ed80', dy: "2" }), h("feGaussianBlur", { key: '0772cc52ba154b42d7f780d5e9bf16bd2293dee9', stdDeviation: "2" }), h("feComposite", { key: '739a5b26667c1745e8d42c33aadedf56b3530a52', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '23ca07f2d016d14aa95a64b581f8804cc43469fb', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '66e8b6a28ba77465df00123176f40e9b53a171c0', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: 'd24884b15dfa86c3ccc353587f8bf5b1b0e00bc6', name: "header" }), h("div", { key: '4bafceed191d908bebf24a838e5277707831042a', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: 'ea962c2d9a6cb59c50b785c42e5b9d2103ac8848', name: "footer" }))));
+        return (h(Host, { key: '6290736307488f10a4ed441e2a8e0b3a2e89af05', class: { dark: this.isDark() } }, h("div", { key: '6d6a731d9941457b786c71625243a7dd1e9f11f8', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (h("div", { key: '0c2ae5b52f8c30bdf356a3c356d52305451cb19e', class: "watermark" }, h("svg", { key: '36076d8dd514f5736050228d22b9a03d5d48ce28', class: "watermark-circle-svg", width: "133", height: "133", viewBox: "0 0 133 133", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '737a3f3d8b7a0f91120258c292d047f9dc90871c', filter: "url(#wm_circle_shadow)" }, h("circle", { key: 'a59549c879ddaa2a0007c4fd9645c4382b14e73f', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), h("defs", { key: '58d5edc4e05f3dd8a60f7a829b70f154ba85bfc1' }, h("filter", { key: 'd2cb7cb5a84bdf1496b56ec5a0c0c79001040670', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'e90404f557fba552a21bd3748ad728470172040f', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: 'ef5aee167a4973c35f8ffaa8ae4a0487de8266ee', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: 'e0869202bc43610b91abce92e85e8e5264cda999', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '7bef38d885b93711fce4c0efbb719a83417eeefb', dy: "3" }), h("feGaussianBlur", { key: '053de38388f049be8db7867b99b53d403de934ca', stdDeviation: "3" }), h("feComposite", { key: 'e5f68fbcf0923174a177545bf3364d066a122347', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: '62dc924cbdc92ce4adc0ec81be851c1d40e7a5b0', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '908299725f9e553c636bd18eab6541c6a7c69fe5', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), h("svg", { key: '2a6ce2364bfd667c4eba56d859a1326f70a82901', class: "watermark-star-svg", width: "78", height: "78", viewBox: "0 0 78 78", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'e2c431ac6bee320c817a7283e6e356edc4667146', filter: "url(#wm_star_shadow)" }, h("path", { key: 'd87d0313e649527f5909ac1b08f7af2979760d79', d: "M38.7421 0C39.5691 0 40.2689 0.286272 40.8414 0.858815C41.414 1.43136 41.7002 2.13113 41.7002 2.95814C41.7002 8.87442 43.1952 14.3772 46.1851 19.4665C49.1115 24.4285 53.0557 28.3727 58.0177 31.299C63.107 34.289 68.6097 35.7839 74.526 35.7839C75.353 35.7839 76.0528 36.0702 76.6254 36.6428C77.1979 37.2153 77.4842 37.9151 77.4842 38.7421C77.4842 39.5691 77.1979 40.2689 76.6254 40.8414C76.0528 41.414 75.353 41.7002 74.526 41.7002C68.6097 41.7002 63.107 43.1952 58.0177 46.1851C53.0557 49.1115 49.1115 53.0557 46.1851 58.0177C43.1952 63.107 41.7002 68.6097 41.7002 74.526C41.7002 75.353 41.414 76.0528 40.8414 76.6254C40.2689 77.1979 39.5691 77.4842 38.7421 77.4842C37.9151 77.4842 37.2153 77.1979 36.6428 76.6254C36.0702 76.0528 35.7839 75.353 35.7839 74.526C35.7839 68.6097 34.289 63.107 31.299 58.0177C28.3727 53.0557 24.4285 49.1115 19.4665 46.1851C14.3772 43.1952 8.87442 41.7002 2.95814 41.7002C2.13113 41.7002 1.43136 41.414 0.858815 40.8414C0.286272 40.2689 0 39.5691 0 38.7421C0 37.9151 0.286272 37.2153 0.858815 36.6428C1.43136 36.0702 2.13113 35.7839 2.95814 35.7839C8.87442 35.7839 14.3772 34.289 19.4665 31.299C24.4285 28.3727 28.3727 24.4285 31.299 19.4665C34.289 14.3772 35.7839 8.87442 35.7839 2.95814C35.7839 2.13113 36.0702 1.43136 36.6428 0.858815C37.2153 0.286272 37.9151 0 38.7421 0Z", class: "watermark-star" })), h("defs", { key: '51e7ef185399e3a10d0b19eb399500be3e5384f8' }, h("filter", { key: '09f52cd1b7084a8af9488bbce05c277fe07012f9', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '1b055616d714f824dd38a895a5c1a635fefc4a66', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feBlend", { key: '044cba9d32d0a1d56fc39d318dfc1cdd0fdc0ae7', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), h("feColorMatrix", { key: '4bf50b36bd6b1ae90d29a95290762ef52dbfff7a', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feOffset", { key: '0988514af2fda03cb2ff43e95c1423137351186f', dy: "2" }), h("feGaussianBlur", { key: 'c96fb451b890e9bda84043dcd699c2a3f59c195c', stdDeviation: "2" }), h("feComposite", { key: '77b2bb3e01eefb08cac5f60a494c2cd15e97db4a', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), h("feColorMatrix", { key: 'aef785066c732cc5cbc16689f2e57a7df7d18bc5', type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" }), h("feBlend", { key: '292a1d370d268312514f1c8fcee2167159c2d4e9', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), h("slot", { key: '009fd561884a5a70e559d865dc1b1d55937d923c', name: "header" }), h("div", { key: 'fde5090720cd70c2b5fe72bcaec95007e7792f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : h("slot", null)), h("slot", { key: '838ea2de9f788af2af70568a7882a08645c6b2ac', name: "footer" }))));
     }
     static get is() { return "ai-chat-container"; }
     static get encapsulation() { return "shadow"; }
@@ -238,11 +263,17 @@ export class ChatContainer {
             },
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "'left' | 'right' | 'float'",
+                    "original": "ChatPosition",
                     "resolved": "\"float\" | \"left\" | \"right\"",
-                    "references": {}
+                    "references": {
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -252,9 +283,9 @@ export class ChatContainer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "position",
-                "defaultValue": "'right'"
+                "defaultValue": "'left'"
             },
             "width": {
                 "type": "string",
@@ -435,6 +466,26 @@ export class ChatContainer {
                 "reflect": false,
                 "attribute": "retry-label",
                 "defaultValue": "'\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rtl' | 'ltr'",
+                    "resolved": "\"ltr\" | \"rtl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction set by the host app.\n- `'rtl'` \u2192 valid docked position is `left`; cycle order: left \u2194 float\n- `'ltr'` \u2192 valid docked position is `right`; cycle order: right \u2194 float"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "direction",
+                "defaultValue": "'rtl'"
             }
         };
     }
@@ -461,6 +512,27 @@ export class ChatContainer {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "positionChange",
+                "name": "positionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the position changes (via cyclePosition or the header button)"
+                },
+                "complexType": {
+                    "original": "ChatPosition",
+                    "resolved": "\"float\" | \"left\" | \"right\"",
+                    "references": {
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -481,6 +553,28 @@ export class ChatContainer {
                     "text": "Programmatically scroll the messages area to the bottom",
                     "tags": []
                 }
+            },
+            "cyclePosition": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ChatPosition": {
+                            "location": "local",
+                            "path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-chat-container/ai-chat-container.tsx",
+                            "id": "src/components/ai-chat-container/ai-chat-container.tsx::ChatPosition"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cycle to the next valid position based on the current direction.\n- RTL: left \u2194 float\n- LTR: right \u2194 float",
+                    "tags": []
+                }
             }
         };
     }
@@ -494,4 +588,13 @@ export class ChatContainer {
                 "methodName": "positionChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "headerPositionClick",
+                "method": "handleHeaderPositionClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/ai-chat-header/ai-chat-header.js

@@ -14,7 +14,6 @@ export class AiChatHeader {
     agentAvatar = '';
     /** Human mode: show the back button */
     showBack = true;
-    isDraggable = false;
     /** Human mode: status indicator variant */
     statusIndicator = 'online';
     /** Browser mode: page title shown in the header */
@@ -31,14 +30,22 @@ export class AiChatHeader {
     titleLoading = false;
     avatarError = false;
     dropdownOpen = false;
+    /** Internally managed — true when the parent ai-chat-container has position="float" */
+    isFloating = false;
+    parentPositionObserver = null;
     /** Cancel / close button */
     closeClick;
     /** Pencil-edit button (agent mode) */
-    editClick;
+    newChatClick;
     /** Title / chevron click → open conversation list (agent mode) */
     dropdownClick;
-    /** More options button */
+    /** More options button — also fires a composed event so ai-chat-container can auto-cycle position */
     positionClick;
+    /**
+     * Composed + bubbling event that ai-chat-container listens to internally
+     * to automatically cycle its position. Fires alongside positionClick.
+     */
+    headerPositionClick;
     /** Back-arrow button (human mode) */
     backClick;
     /**
@@ -57,6 +64,43 @@ export class AiChatHeader {
             this.dropdownOpen = false;
         }
     }
+    connectedCallback() {
+        // Initial sync will happen in componentDidLoad
+    }
+    componentDidLoad() {
+        // By this point, the element is fully in the DOM and parent relationships are established
+        // Small delay to ensure parent custom elements are fully upgraded
+        requestAnimationFrame(() => {
+            this.syncFloatingState();
+            this.observeParentPosition();
+        });
+    }
+    disconnectedCallback() {
+        this.parentPositionObserver?.disconnect();
+        this.parentPositionObserver = null;
+    }
+    observeParentPosition() {
+        if (this.parentPositionObserver)
+            return; // Already observing
+        const container = this.el.closest('ai-chat-container');
+        if (container) {
+            this.parentPositionObserver = new MutationObserver(() => this.syncFloatingState());
+            this.parentPositionObserver.observe(container, { attributes: true, attributeFilter: ['position'] });
+        }
+    }
+    syncFloatingState() {
+        const container = this.el.closest('ai-chat-container');
+        if (container) {
+            const newState = container.getAttribute('position') === 'float';
+            if (this.isFloating !== newState) {
+                this.isFloating = newState;
+            }
+            return;
+        }
+        if (this.isFloating !== false) {
+            this.isFloating = false;
+        }
+    }
     renderIcon(name, width, height) {
         const icon = iconRegistry[name];
         if (!icon)
@@ -74,7 +118,7 @@ export class AiChatHeader {
             } }));
     }
     renderDragBtn() {
-        return (this.isDraggable && (h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
+        return (this.isFloating && (h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
                 e.preventDefault();
                 this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
             } }, this.renderIcon('drag', 11, 15))));
@@ -102,25 +146,25 @@ export class AiChatHeader {
                     this.dropdownOpen = !this.dropdownOpen;
                     this.dropdownClick.emit();
                 }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, this.titleLoading ? (h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (h("span", { class: "title" }, this.conversation)), !this.titleLoading && (h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0645\u062D\u0627\u062F\u062B\u0629 \u062C\u062F\u064A\u062F\u0629 / New Chat", onClick: () => this.newChatClick.emit() }, this.renderIcon('pencil-edit', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
     renderHumanMode() {
         return [
             this.renderDragBtn(),
             h("div", { class: "content human" }, this.showBack && (h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), h("div", { class: "avatar-wrapper" }, this.renderAvatar(), h("span", { class: `online-dot status-${this.statusIndicator}` }, this.renderIcon('online-dot', 10, 10))), h("div", { class: "text-block" }, h("span", { class: "agent-name" }, this.agentName), this.agentStatus && h("span", { class: "agent-status" }, this.agentStatus))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
     renderBrowserMode() {
         return [
             this.renderDragBtn(),
             h("div", { class: "content browser" }, h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24)), h("span", { class: "browser-title" }, this.pageTitle), h("button", { class: "browser-link-btn", "aria-label": "\u0641\u062A\u062D \u0641\u064A \u0646\u0627\u0641\u0630\u0629 \u062C\u062F\u064A\u062F\u0629 / Open externally", onClick: () => this.openExternal.emit(this.pageUrl) }, this.renderIcon('link', 14, 14))),
-            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
+            h("div", { class: "actions" }, h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => { this.positionClick.emit(); this.headerPositionClick.emit(); } }, this.renderIcon('hand', 22, 22)), h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
         ];
     }
     render() {
-        return (h(Host, { key: '8e1fe67030a0cb1eb94327f093327fb23d4faf01' }, h("div", { key: '14766bd663e5fe027f1a3320bd3f16d79e9feb45', class: "header-wrapper" }, h("div", { key: 'bef30f621ba3b148f4af055347eb707bc8f64b15', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
+        return (h(Host, { key: 'b11b4d03d7f1980ec91b0fdba7db314971b7e7d3' }, h("div", { key: '47f40b54a6861b69adee00bea45ab8a6691c13f2', class: "header-wrapper" }, h("div", { key: 'dcc18d4cb88457c2eb959bfccb2c8d72655d610a', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
     }
     static get is() { return "ai-chat-header"; }
     static get encapsulation() { return "shadow"; }
@@ -256,26 +300,6 @@ export class AiChatHeader {
                 "attribute": "show-back",
                 "defaultValue": "true"
             },
-            "isDraggable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-draggable",
-                "defaultValue": "false"
-            },
             "statusIndicator": {
                 "type": "string",
                 "mutable": false,
@@ -426,7 +450,8 @@ export class AiChatHeader {
     static get states() {
         return {
             "avatarError": {},
-            "dropdownOpen": {}
+            "dropdownOpen": {},
+            "isFloating": {}
         };
     }
     static get events() {
@@ -446,8 +471,8 @@ export class AiChatHeader {
                     "references": {}
                 }
             }, {
-                "method": "editClick",
-                "name": "editClick",
+                "method": "newChatClick",
+                "name": "newChatClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -483,7 +508,22 @@ export class AiChatHeader {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "More options button"
+                    "text": "More options button \u2014 also fires a composed event so ai-chat-container can auto-cycle position"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "headerPositionClick",
+                "name": "headerPositionClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Composed + bubbling event that ai-chat-container listens to internally\nto automatically cycle its position. Fires alongside positionClick."
                 },
                 "complexType": {
                     "original": "void",