@salla.sa/ui-ai-kit-core 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ai-agent-error.cjs.entry.js +2 -2
- package/dist/cjs/ai-card.cjs.entry.js +3 -3
- package/dist/cjs/ai-chat-container.cjs.entry.js +29 -3
- package/dist/cjs/ai-chat-header.cjs.entry.js +73 -11
- package/dist/cjs/ai-chat-message.cjs.entry.js +1 -1
- package/dist/cjs/ai-conversation-list.cjs.entry.js +11 -5
- package/dist/cjs/ai-conversation-summary.cjs.entry.js +1 -1
- package/dist/cjs/ai-icon.cjs.entry.js +1 -1
- package/dist/cjs/ai-in-chat-browser.cjs.entry.js +5 -23
- package/dist/cjs/ai-link.cjs.entry.js +2 -2
- package/dist/cjs/ai-loading.cjs.entry.js +2 -2
- package/dist/cjs/ai-message-input.cjs.entry.js +1 -1
- package/dist/cjs/ai-rating.cjs.entry.js +1 -1
- package/dist/cjs/ai-route-decision.cjs.entry.js +2 -2
- package/dist/cjs/ai-suggestion.cjs.entry.js +3 -3
- package/dist/cjs/ai-voice-input.cjs.entry.js +2 -2
- package/dist/cjs/{index-BQ8Az7-D.js → index-Cc05u4ND.js} +15 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/ui-ai-kit.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/ai-agent-error/ai-agent-error.js +1 -1
- package/dist/collection/components/ai-card/ai-card.js +2 -2
- package/dist/collection/components/ai-chat-container/ai-chat-container.js +110 -7
- package/dist/collection/components/ai-chat-header/ai-chat-header.js +204 -33
- package/dist/collection/components/ai-conversation-list/ai-conversation-list.css +20 -0
- package/dist/collection/components/ai-conversation-list/ai-conversation-list.js +29 -3
- package/dist/collection/components/ai-in-chat-browser/ai-in-chat-browser.css +0 -10
- package/dist/collection/components/ai-in-chat-browser/ai-in-chat-browser.js +5 -74
- package/dist/collection/components/ai-link/ai-link.js +1 -1
- package/dist/collection/components/ai-loading/ai-loading.js +1 -1
- package/dist/collection/components/ai-route-decision/ai-route-decision.js +1 -1
- package/dist/collection/components/ai-suggestion/ai-suggestion.js +2 -2
- package/dist/collection/components/ai-voice-input/ai-voice-input.js +1 -1
- package/dist/components/ai-agent-error.js +1 -1
- package/dist/components/ai-card.js +1 -1
- package/dist/components/ai-chat-container.js +1 -1
- package/dist/components/ai-chat-header.js +1 -1
- package/dist/components/ai-chat-message.js +2 -2
- package/dist/components/ai-conversation-list.js +1 -1
- package/dist/components/ai-conversation-summary.js +1 -1
- package/dist/components/ai-icon.js +1 -1
- package/dist/components/ai-in-chat-browser.js +1 -1
- package/dist/components/ai-link.js +1 -1
- package/dist/components/ai-loading.js +1 -1
- package/dist/components/ai-message-input.js +1 -1
- package/dist/components/ai-rating.js +1 -1
- package/dist/components/ai-route-decision.js +1 -1
- package/dist/components/ai-suggestion.js +1 -1
- package/dist/components/ai-voice-input.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-CXJ3iEt8.js → p-BPkf7wZg.js} +1 -1
- package/dist/components/{p-B3gdcdCK.js → p-Ba0urr6Q.js} +1 -1
- package/dist/components/p-CFSr3KcL.js +1 -0
- package/dist/components/{p-C2LB8D3t.js → p-DZuBxUde.js} +1 -1
- package/dist/components/{p-NKAwri_g.js → p-bGFmyIp1.js} +1 -1
- package/dist/esm/ai-agent-error.entry.js +2 -2
- package/dist/esm/ai-card.entry.js +3 -3
- package/dist/esm/ai-chat-container.entry.js +29 -3
- package/dist/esm/ai-chat-header.entry.js +73 -11
- package/dist/esm/ai-chat-message.entry.js +1 -1
- package/dist/esm/ai-conversation-list.entry.js +11 -5
- package/dist/esm/ai-conversation-summary.entry.js +1 -1
- package/dist/esm/ai-icon.entry.js +1 -1
- package/dist/esm/ai-in-chat-browser.entry.js +5 -23
- package/dist/esm/ai-link.entry.js +2 -2
- package/dist/esm/ai-loading.entry.js +2 -2
- package/dist/esm/ai-message-input.entry.js +1 -1
- package/dist/esm/ai-rating.entry.js +1 -1
- package/dist/esm/ai-route-decision.entry.js +2 -2
- package/dist/esm/ai-suggestion.entry.js +3 -3
- package/dist/esm/ai-voice-input.entry.js +2 -2
- package/dist/esm/{index-BSQ0GkzI.js → index-VMEwYfaX.js} +15 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/ui-ai-kit.js +3 -3
- package/dist/types/components/ai-chat-container/ai-chat-container.d.ts +21 -1
- package/dist/types/components/ai-chat-header/ai-chat-header.d.ts +28 -3
- package/dist/types/components/ai-conversation-list/ai-conversation-list.d.ts +2 -0
- package/dist/types/components/ai-in-chat-browser/ai-in-chat-browser.d.ts +1 -10
- package/dist/types/components.d.ts +107 -53
- package/dist/types/index.d.ts +1 -0
- package/dist/ui-ai-kit/{p-1e8e6440.entry.js → p-062cad02.entry.js} +1 -1
- package/dist/ui-ai-kit/p-17e5d542.entry.js +1 -0
- package/dist/ui-ai-kit/{p-b88808a4.entry.js → p-187db371.entry.js} +1 -1
- package/dist/ui-ai-kit/p-1b247096.entry.js +1 -0
- package/dist/ui-ai-kit/p-278895fd.entry.js +1 -0
- package/dist/ui-ai-kit/{p-39a2d4c3.entry.js → p-338d55d3.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-dac67692.entry.js → p-4359a116.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-3a86919b.entry.js → p-5f005ec5.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-849cd7e2.entry.js → p-6a4b66ed.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-47797619.entry.js → p-6b644d32.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-658d8b24.entry.js → p-6bd54e29.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-eb40ffd0.entry.js → p-83f46030.entry.js} +2 -2
- package/dist/ui-ai-kit/{p-c9dca99e.entry.js → p-8fabdbe8.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-BSQ0GkzI.js → p-VMEwYfaX.js} +2 -2
- package/dist/ui-ai-kit/{p-73cbb80b.entry.js → p-cae762e0.entry.js} +1 -1
- package/dist/ui-ai-kit/p-d02f2db5.entry.js +1 -0
- package/dist/ui-ai-kit/{p-78fb4ceb.entry.js → p-e6236df2.entry.js} +1 -1
- package/dist/ui-ai-kit/ui-ai-kit.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-D4mVoP6B.js +0 -1
- package/dist/components/p-DKsh1ZQX.js +0 -1
- package/dist/ui-ai-kit/p-29d84924.entry.js +0 -1
- package/dist/ui-ai-kit/p-77ef8015.entry.js +0 -1
- package/dist/ui-ai-kit/p-8cb807f3.entry.js +0 -1
- package/dist/ui-ai-kit/p-abd68089.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiAgentErrorCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.error-card{background:var(--ai-danger-bg);border:1px solid var(--ai-danger-border);border-radius:16px;box-shadow:var(--ai-shadow-error);overflow:hidden;animation:fade-in 0.3s ease}.error-body{display:flex;align-items:flex-start;gap:12px;padding:16px}.error-icon-wrap{width:36px;height:36px;border-radius:9999px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-danger-text)}.error-content{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.error-headline-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.error-headline{font-size:14px;font-weight:600;color:var(--ai-danger-text);line-height:1.4}.error-code-badge{font-size:11px;font-weight:500;color:var(--ai-danger-text);background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);padding:1px 7px;border-radius:9999px;white-space:nowrap;flex-shrink:0;opacity:0.85}.error-message{margin:0;font-size:13px;font-weight:400;color:var(--ai-text-secondary);line-height:1.5}.dismiss-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;color:var(--ai-danger-text);opacity:0.6;flex-shrink:0;border-radius:6px;transition:opacity 0.15s ease, background 0.15s ease}.dismiss-btn:hover{opacity:1;background:var(--ai-hover-overlay)}.error-footer{padding:0 16px 14px}.retry-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ai-bg-card);border:1px solid var(--ai-danger-border);border-radius:9999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--ai-danger-text);cursor:pointer;transition:box-shadow 0.15s ease, opacity 0.15s ease;font-family:inherit}.retry-btn:hover{box-shadow:var(--ai-shadow-active);opacity:0.9}.retry-btn:active{opacity:0.75}`;
|
|
@@ -33,7 +33,7 @@ const AiAgentError = class {
|
|
|
33
33
|
return index.h("span", { class: "icon-wrap", innerHTML: svg });
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (index.h(index.Host, { key: '
|
|
36
|
+
return (index.h(index.Host, { key: '5cab52b708c10b0cfec5fdd0dfdc85046a7426a2' }, index.h("div", { key: 'b4691b7dfd9cbb98e522af9ed5ad2d2b912471fb', class: "error-card" }, index.h("div", { key: 'e8f5fb9ca5fda7f4cedf09bb4dc9848303d4a339', class: "error-body" }, index.h("div", { key: 'b1f2e61a60fa4a3fba6a98dc67f3531f9164b662', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), index.h("div", { key: 'a1e2e6f6096ed6e593e60eadfd792b11b7b117cd', class: "error-content" }, index.h("div", { key: '5eea71440e7b817732c3aab465f2710a2b198b1a', class: "error-headline-row" }, index.h("span", { key: '61b90ef0186837770ce10642257ee2ea5f1f6c9d', class: "error-headline" }, this.headline), this.errorCode && (index.h("span", { key: '12305a917ae3b479340533335203455c48d1bb24', class: "error-code-badge" }, this.errorCode))), this.message && (index.h("p", { key: 'f400a76fbd2caac0b64799914b9938de3e9eb78c', class: "error-message" }, this.message))), this.dismissible && (index.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 && (index.h("div", { key: 'd2c1f2190383345c6101e70b1499e05d59092653', class: "error-footer" }, index.h("button", { key: '7f8b52b0ac1e2dd4dd4244949e0da9874077f284', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), index.h("span", { key: '321d51fd3b36f23b7e49b05af3ab85346f87f44f' }, this.retryLabel)))))));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
AiAgentError.style = aiAgentErrorCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
|
|
5
5
|
const aiCardCss = () => `:host{--ai-card-border:1px solid var(--ai-border-default);--ai-card-radius:16px;--ai-card-padding:16px;--ai-card-gap:12px;--ai-card-shadow:var(--ai-shadow-sm);display:block}.card{background:var(--ai-bg-card);border:var(--ai-card-border);border-radius:var(--ai-card-radius);padding:var(--ai-card-padding);box-shadow:var(--ai-card-shadow);box-sizing:border-box;overflow:hidden;color:var(--ai-text-primary);width:100%;display:flex;flex-direction:column;gap:var(--ai-card-gap);text-align:start;font-size:14px;line-height:20px}.card--no-padding{padding:0}.card--no-shadow{box-shadow:none}`;
|
|
6
6
|
|
|
@@ -13,11 +13,11 @@ const AiCard = class {
|
|
|
13
13
|
/** Remove the shadow */
|
|
14
14
|
noShadow = false;
|
|
15
15
|
render() {
|
|
16
|
-
return (index.h(index.Host, { key: '
|
|
16
|
+
return (index.h(index.Host, { key: '849dbf8d8eac913c76e71a10cb9b30f9fda3c320' }, index.h("div", { key: '5d9f75428e6d94cf2c3729698e87fd3185c20129', class: {
|
|
17
17
|
card: true,
|
|
18
18
|
'card--no-padding': this.noPadding,
|
|
19
19
|
'card--no-shadow': this.noShadow,
|
|
20
|
-
} }, index.h("slot", { key: '
|
|
20
|
+
} }, index.h("slot", { key: 'f604568228c02514ff0f569cfa4fd706c247652e' }))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
AiCard.style = aiCardCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
|
|
5
5
|
const aiChatContainerCss = () => `:host{display:contents}.chat-container{font-family:var(--ai-font-family);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--ai-container-bg, var(--ai-bg-card));border:1px solid var(--ai-border-default);z-index:50;box-sizing:border-box}.messages-area{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;padding:var(--ai-spacing-2xl, 16px);scrollbar-color:var(--ai-scrollbar-thumb) transparent}.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.chat-container.left,.chat-container.right{position:fixed;top:0;bottom:0;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.chat-container.left{left:0;transform:translateX(-100%)}.chat-container.right{right:0;transform:translateX(100%)}.chat-container.left.open,.chat-container.right.open{transform:translateX(0)}.chat-container.float{position:fixed;border-radius:16px;box-shadow:var(--ai-shadow-float);opacity:0;pointer-events:none;transform:scale(0.95);transform-origin:bottom left;transition:opacity 200ms ease, transform 200ms ease}.chat-container.float.open{opacity:1;pointer-events:auto;transform:scale(1)}.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;width:133px;height:133px}.watermark .watermark-circle-svg{position:absolute;top:0;left:0}.watermark .watermark-star-svg{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.watermark .watermark-circle{fill:var(--ai-watermark-circle, #FCFCFC)}.watermark .watermark-star{fill:var(--ai-watermark-star, #FAFAFA)}:host(.dark) .watermark .watermark-circle{fill:var(--ai-watermark-circle, #222222)}:host(.dark) .watermark .watermark-star{fill:var(--ai-watermark-star, #292B2C)}.chat-container.mobile{width:100% !important}.chat-container.float.mobile{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}@media (max-width: 767px){.chat-container{width:100% !important}.chat-container.float{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;height:100% !important;border-radius:0 !important}}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-messages{display:flex;flex-direction:column;gap:20px;padding:8px 0}.skeleton-row{display:flex;align-items:flex-start;gap:10px}.skeleton-row.agent{flex-direction:row}.skeleton-row.user{flex-direction:row-reverse}.skeleton-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton-bubble{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background-color:var(--ai-bg-surface, #f9fafb);max-width:75%;min-width:120px}.skeleton-row.user .skeleton-bubble{background-color:var(--ai-user-bubble-bg, var(--ai-accent, #004956));border-radius:16px}.skeleton-line{height:12px;border-radius:6px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton-row.user .skeleton-line{background:linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}:host(.dark) .skeleton-avatar{background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}:host(.dark) .skeleton-bubble{background-color:var(--ai-bg-surface, #1f2937)}:host(.dark) .skeleton-line{background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.06) 75%));background-size:200% 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:48px 24px;flex:1}.error-icon{color:var(--ai-text-muted, #9ca3af);opacity:0.7}.error-text{margin:0;font-size:14px;line-height:1.5;color:var(--ai-text-secondary, #6b7280)}.error-retry-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;border-radius:9999px;border:1px solid var(--ai-border-default);background-color:var(--ai-bg-surface, #f9fafb);color:var(--ai-text-primary);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background-color 0.15s ease, border-color 0.15s ease}.error-retry-btn:hover{background-color:var(--ai-hover-overlay, rgba(0, 0, 0, 0.04));border-color:var(--ai-accent, #004956)}.error-retry-btn:focus-visible{outline:2px solid var(--ai-focus-ring-color, var(--ai-focus-ring));outline-offset:2px}:host(.dark) .error-retry-btn{background-color:var(--ai-bg-surface, #1f2937);color:var(--ai-text-primary, #f9fafb)}:host(.dark) .error-retry-btn:hover{background-color:var(--ai-hover-overlay, rgba(255, 255, 255, 0.06))}`;
|
|
6
6
|
|
|
@@ -8,12 +8,13 @@ const ChatContainer = class {
|
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.retryClick = index.createEvent(this, "retryClick");
|
|
11
|
+
this.positionChange = index.createEvent(this, "positionChange");
|
|
11
12
|
}
|
|
12
13
|
get el() { return index.getElement(this); }
|
|
13
14
|
/** Controls visibility of the chat panel */
|
|
14
15
|
isOpen = false;
|
|
15
16
|
/** Position of the panel: 'left', 'right', or 'float' */
|
|
16
|
-
position = '
|
|
17
|
+
position = 'left';
|
|
17
18
|
/** Width of the panel (CSS value, e.g., '400px', '30%', '28rem') */
|
|
18
19
|
width = '28rem';
|
|
19
20
|
/** Enable/disable auto-scroll to latest message */
|
|
@@ -32,8 +33,16 @@ const ChatContainer = class {
|
|
|
32
33
|
errorText = 'تعذّر تحميل المحادثة';
|
|
33
34
|
/** Retry button label */
|
|
34
35
|
retryLabel = 'إعادة المحاولة';
|
|
36
|
+
/**
|
|
37
|
+
* Layout direction set by the host app.
|
|
38
|
+
* - `'rtl'` → valid docked position is `left`; cycle order: left ↔ float
|
|
39
|
+
* - `'ltr'` → valid docked position is `right`; cycle order: right ↔ float
|
|
40
|
+
*/
|
|
41
|
+
direction = 'rtl';
|
|
35
42
|
/** Event emitted when the retry button is clicked */
|
|
36
43
|
retryClick;
|
|
44
|
+
/** Fired when the position changes (via cyclePosition or the header button) */
|
|
45
|
+
positionChange;
|
|
37
46
|
isMobile = false;
|
|
38
47
|
floatLeft = '24px';
|
|
39
48
|
floatTop = '24px';
|
|
@@ -84,6 +93,13 @@ const ChatContainer = class {
|
|
|
84
93
|
document.addEventListener('pointermove', onMove);
|
|
85
94
|
document.addEventListener('pointerup', onUp);
|
|
86
95
|
};
|
|
96
|
+
/**
|
|
97
|
+
* Listen for the composed headerPositionClick event fired by ai-chat-header.
|
|
98
|
+
* Automatically cycles the position so the host app doesn't need to wire it manually.
|
|
99
|
+
*/
|
|
100
|
+
handleHeaderPositionClick() {
|
|
101
|
+
this.cyclePosition();
|
|
102
|
+
}
|
|
87
103
|
componentWillLoad() {
|
|
88
104
|
this.checkMobile();
|
|
89
105
|
}
|
|
@@ -139,6 +155,16 @@ const ChatContainer = class {
|
|
|
139
155
|
this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
|
|
140
156
|
}
|
|
141
157
|
}
|
|
158
|
+
/**
|
|
159
|
+
* Cycle to the next valid position based on the current direction.
|
|
160
|
+
* - RTL: left ↔ float
|
|
161
|
+
* - LTR: right ↔ float
|
|
162
|
+
*/
|
|
163
|
+
async cyclePosition() {
|
|
164
|
+
const docked = this.direction === 'rtl' ? 'left' : 'right';
|
|
165
|
+
this.position = this.position === 'float' ? docked : 'float';
|
|
166
|
+
this.positionChange.emit(this.position);
|
|
167
|
+
}
|
|
142
168
|
handleWindowResize = () => {
|
|
143
169
|
this.checkMobile();
|
|
144
170
|
this.clampFloatPosition();
|
|
@@ -209,7 +235,7 @@ const ChatContainer = class {
|
|
|
209
235
|
return (index.h("div", { class: "error-state", role: "alert" }, index.h("svg", { class: "error-icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "1.5" }), index.h("path", { d: "M12 7v6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }), index.h("circle", { cx: "12", cy: "16.5", r: "0.75", fill: "currentColor" })), index.h("p", { class: "error-text" }, this.errorText), index.h("button", { class: "error-retry-btn", type: "button", onClick: () => this.retryClick.emit() }, this.retryLabel)));
|
|
210
236
|
}
|
|
211
237
|
render() {
|
|
212
|
-
return (index.h(index.Host, { key: '
|
|
238
|
+
return (index.h(index.Host, { key: '6290736307488f10a4ed441e2a8e0b3a2e89af05', class: { dark: this.isDark() } }, index.h("div", { key: '6d6a731d9941457b786c71625243a7dd1e9f11f8', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && !this.loading && !this.error && (index.h("div", { key: '0c2ae5b52f8c30bdf356a3c356d52305451cb19e', class: "watermark" }, index.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" }, index.h("g", { key: '737a3f3d8b7a0f91120258c292d047f9dc90871c', filter: "url(#wm_circle_shadow)" }, index.h("circle", { key: 'a59549c879ddaa2a0007c4fd9645c4382b14e73f', cx: "66.415", cy: "66.415", r: "66.415", class: "watermark-circle" })), index.h("defs", { key: '58d5edc4e05f3dd8a60f7a829b70f154ba85bfc1' }, index.h("filter", { key: 'd2cb7cb5a84bdf1496b56ec5a0c0c79001040670', id: "wm_circle_shadow", x: "0", y: "0", width: "132.83", height: "135.83", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: 'e90404f557fba552a21bd3748ad728470172040f', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: 'ef5aee167a4973c35f8ffaa8ae4a0487de8266ee', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.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" }), index.h("feOffset", { key: '7bef38d885b93711fce4c0efbb719a83417eeefb', dy: "3" }), index.h("feGaussianBlur", { key: '053de38388f049be8db7867b99b53d403de934ca', stdDeviation: "3" }), index.h("feComposite", { key: 'e5f68fbcf0923174a177545bf3364d066a122347', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.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" }), index.h("feBlend", { key: '908299725f9e553c636bd18eab6541c6a7c69fe5', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))), index.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" }, index.h("g", { key: 'e2c431ac6bee320c817a7283e6e356edc4667146', filter: "url(#wm_star_shadow)" }, index.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" })), index.h("defs", { key: '51e7ef185399e3a10d0b19eb399500be3e5384f8' }, index.h("filter", { key: '09f52cd1b7084a8af9488bbce05c277fe07012f9', id: "wm_star_shadow", x: "0", y: "0", width: "77.4844", height: "79.4841", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, index.h("feFlood", { key: '1b055616d714f824dd38a895a5c1a635fefc4a66', "flood-opacity": "0", result: "BackgroundImageFix" }), index.h("feBlend", { key: '044cba9d32d0a1d56fc39d318dfc1cdd0fdc0ae7', mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), index.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" }), index.h("feOffset", { key: '0988514af2fda03cb2ff43e95c1423137351186f', dy: "2" }), index.h("feGaussianBlur", { key: 'c96fb451b890e9bda84043dcd699c2a3f59c195c', stdDeviation: "2" }), index.h("feComposite", { key: '77b2bb3e01eefb08cac5f60a494c2cd15e97db4a', in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), index.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" }), index.h("feBlend", { key: '292a1d370d268312514f1c8fcee2167159c2d4e9', mode: "normal", in2: "shape", result: "effect1_innerShadow" })))))), index.h("slot", { key: '009fd561884a5a70e559d865dc1b1d55937d923c', name: "header" }), index.h("div", { key: 'fde5090720cd70c2b5fe72bcaec95007e7792f4e', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, this.loading ? this.renderSkeleton() : this.error ? this.renderError() : index.h("slot", null)), index.h("slot", { key: '838ea2de9f788af2af70568a7882a08645c6b2ac', name: "footer" }))));
|
|
213
239
|
}
|
|
214
240
|
static get watchers() { return {
|
|
215
241
|
"isOpen": [{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiChatHeaderCss = () => `:host{display:block;position:relative;z-index:10}.header-wrapper{position:relative;display:flex;flex-direction:column}.header-container{display:flex;align-items:center;gap:8px;padding:16px;background:var(--ai-bg-card);border-bottom:1px solid var(--ai-border-light);width:100%;box-sizing:border-box}.drag-btn{cursor:grab;color:var(--ai-text-muted)}.drag-btn:active{cursor:grabbing}.action-btn,.back-btn{width:40px;height:40px;padding:4px;display:flex;align-items:center;justify-content:center;background:var(--ai-bg-card);border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-primary);transition:background 0.15s ease}.action-btn:hover,.back-btn:hover{background:var(--ai-bg-surface)}.action-btn:focus-visible,.back-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.action-btn:active,.back-btn:active{background:var(--ai-bg-surface)}.actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.content{flex:1 0 0;display:flex;align-items:center;justify-content:flex-start;min-width:0}.content.agent{gap:4px;height:40px}.content.human{gap:8px}.content.browser{gap:8px}.dropdown-trigger{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;color:var(--ai-text-primary)}.dropdown-chevron{display:inline-flex;transition:transform 0.2s ease}.dropdown-chevron.open{transform:rotate(180deg)}.dropdown-trigger:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.title{font-size:16px;font-weight:700;color:var(--ai-text-primary);white-space:nowrap;line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}@keyframes title-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.title-skeleton{display:inline-block;width:120px;height:16px;border-radius:8px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%));background-size:200% 100%;animation:title-shimmer 1.6s ease-in-out infinite}.browser-title{font-size:14px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:20px}.browser-link-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--ai-text-secondary)}.browser-link-btn:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);object-fit:cover;display:block}.avatar-fallback{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);background:var(--ai-bg-surface);color:var(--ai-text-primary);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.online-dot{position:absolute;bottom:0;inset-inline-end:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ai-bg-card);}.online-dot.status-online{color:#22c55e;}.online-dot.status-offline{color:#9ca3af;}.online-dot.status-busy{color:#ef4444;}.online-dot.status-away{color:#f59e0b;}.text-block{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0}.agent-name{font-size:14px;font-weight:500;color:var(--ai-text-primary);line-height:20px;white-space:nowrap}.agent-status{font-size:14px;font-weight:400;color:var(--ai-text-secondary);line-height:20px;white-space:nowrap}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-wrap svg{display:block}:host-context([dir='ltr']) .back-btn .icon-wrap,:host([dir='ltr']) .back-btn .icon-wrap{transform:scaleX(-1)}.conversation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:20;height:360px;display:flex;flex-direction:column;background:var(--ai-bg-surface);border-bottom:1px solid var(--ai-border-light);box-shadow:var(--ai-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));animation:slideDown 0.2s ease;overflow:hidden}.conversation-dropdown ai-conversation-list{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}`;
|
|
@@ -9,14 +9,16 @@ const AiChatHeader = class {
|
|
|
9
9
|
constructor(hostRef) {
|
|
10
10
|
index.registerInstance(this, hostRef);
|
|
11
11
|
this.closeClick = index.createEvent(this, "closeClick");
|
|
12
|
-
this.
|
|
12
|
+
this.newChatClick = index.createEvent(this, "newChatClick");
|
|
13
13
|
this.dropdownClick = index.createEvent(this, "dropdownClick");
|
|
14
14
|
this.positionClick = index.createEvent(this, "positionClick");
|
|
15
|
+
this.headerPositionClick = index.createEvent(this, "headerPositionClick");
|
|
15
16
|
this.backClick = index.createEvent(this, "backClick");
|
|
16
17
|
this.headerDragStart = index.createEvent(this, "headerDragStart");
|
|
17
18
|
this.openExternal = index.createEvent(this, "openExternal");
|
|
18
19
|
this.conversationSelect = index.createEvent(this, "conversationSelect");
|
|
19
20
|
this.conversationDelete = index.createEvent(this, "conversationDelete");
|
|
21
|
+
this.conversationRetry = index.createEvent(this, "conversationRetry");
|
|
20
22
|
}
|
|
21
23
|
get el() { return index.getElement(this); }
|
|
22
24
|
/** Layout variant */
|
|
@@ -31,7 +33,6 @@ const AiChatHeader = class {
|
|
|
31
33
|
agentAvatar = '';
|
|
32
34
|
/** Human mode: show the back button */
|
|
33
35
|
showBack = true;
|
|
34
|
-
isDraggable = false;
|
|
35
36
|
/** Human mode: status indicator variant */
|
|
36
37
|
statusIndicator = 'online';
|
|
37
38
|
/** Browser mode: page title shown in the header */
|
|
@@ -44,18 +45,36 @@ const AiChatHeader = class {
|
|
|
44
45
|
conversationActiveId = '';
|
|
45
46
|
/** Conversation list: show skeleton loading state */
|
|
46
47
|
conversationLoading = false;
|
|
48
|
+
/** Conversation list: show error state */
|
|
49
|
+
conversationError = false;
|
|
50
|
+
/** Conversation list: error message text */
|
|
51
|
+
conversationErrorText = 'تعذّر تحميل المحادثات';
|
|
52
|
+
/** Conversation list: retry button label */
|
|
53
|
+
conversationRetryLabel = 'إعادة المحاولة';
|
|
54
|
+
/** Conversation list: empty state label */
|
|
55
|
+
conversationEmptyText = 'لا توجد محادثات';
|
|
56
|
+
/** Conversation list: ID of the conversation currently being deleted — shows a spinner on that item */
|
|
57
|
+
conversationDeletingId = '';
|
|
47
58
|
/** Show a shimmer skeleton in place of the conversation title (e.g. while loading conversation) */
|
|
48
59
|
titleLoading = false;
|
|
49
60
|
avatarError = false;
|
|
50
61
|
dropdownOpen = false;
|
|
62
|
+
/** Internally managed — true when the parent ai-chat-container has position="float" */
|
|
63
|
+
isFloating = false;
|
|
64
|
+
parentPositionObserver = null;
|
|
51
65
|
/** Cancel / close button */
|
|
52
66
|
closeClick;
|
|
53
67
|
/** Pencil-edit button (agent mode) */
|
|
54
|
-
|
|
68
|
+
newChatClick;
|
|
55
69
|
/** Title / chevron click → open conversation list (agent mode) */
|
|
56
70
|
dropdownClick;
|
|
57
|
-
/** More options button */
|
|
71
|
+
/** More options button — also fires a composed event so ai-chat-container can auto-cycle position */
|
|
58
72
|
positionClick;
|
|
73
|
+
/**
|
|
74
|
+
* Composed + bubbling event that ai-chat-container listens to internally
|
|
75
|
+
* to automatically cycle its position. Fires alongside positionClick.
|
|
76
|
+
*/
|
|
77
|
+
headerPositionClick;
|
|
59
78
|
/** Back-arrow button (human mode) */
|
|
60
79
|
backClick;
|
|
61
80
|
/**
|
|
@@ -69,11 +88,50 @@ const AiChatHeader = class {
|
|
|
69
88
|
conversationSelect;
|
|
70
89
|
/** Fired when a conversation delete button is clicked */
|
|
71
90
|
conversationDelete;
|
|
91
|
+
/** Fired when the retry button is clicked in the conversation list error state */
|
|
92
|
+
conversationRetry;
|
|
72
93
|
handleDocumentClick(event) {
|
|
73
94
|
if (this.dropdownOpen && !this.el.contains(event.target)) {
|
|
74
95
|
this.dropdownOpen = false;
|
|
75
96
|
}
|
|
76
97
|
}
|
|
98
|
+
connectedCallback() {
|
|
99
|
+
// Initial sync will happen in componentDidLoad
|
|
100
|
+
}
|
|
101
|
+
componentDidLoad() {
|
|
102
|
+
// By this point, the element is fully in the DOM and parent relationships are established
|
|
103
|
+
// Small delay to ensure parent custom elements are fully upgraded
|
|
104
|
+
requestAnimationFrame(() => {
|
|
105
|
+
this.syncFloatingState();
|
|
106
|
+
this.observeParentPosition();
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
disconnectedCallback() {
|
|
110
|
+
this.parentPositionObserver?.disconnect();
|
|
111
|
+
this.parentPositionObserver = null;
|
|
112
|
+
}
|
|
113
|
+
observeParentPosition() {
|
|
114
|
+
if (this.parentPositionObserver)
|
|
115
|
+
return; // Already observing
|
|
116
|
+
const container = this.el.closest('ai-chat-container');
|
|
117
|
+
if (container) {
|
|
118
|
+
this.parentPositionObserver = new MutationObserver(() => this.syncFloatingState());
|
|
119
|
+
this.parentPositionObserver.observe(container, { attributes: true, attributeFilter: ['position'] });
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
syncFloatingState() {
|
|
123
|
+
const container = this.el.closest('ai-chat-container');
|
|
124
|
+
if (container) {
|
|
125
|
+
const newState = container.getAttribute('position') === 'float';
|
|
126
|
+
if (this.isFloating !== newState) {
|
|
127
|
+
this.isFloating = newState;
|
|
128
|
+
}
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (this.isFloating !== false) {
|
|
132
|
+
this.isFloating = false;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
77
135
|
renderIcon(name, width, height) {
|
|
78
136
|
const icon = iconRegistry.iconRegistry[name];
|
|
79
137
|
if (!icon)
|
|
@@ -91,7 +149,7 @@ const AiChatHeader = class {
|
|
|
91
149
|
} }));
|
|
92
150
|
}
|
|
93
151
|
renderDragBtn() {
|
|
94
|
-
return (this.
|
|
152
|
+
return (this.isFloating && (index.h("button", { class: "action-btn drag-btn", "aria-label": "\u0633\u062D\u0628 / Drag", onPointerDown: (e) => {
|
|
95
153
|
e.preventDefault();
|
|
96
154
|
this.headerDragStart.emit({ clientX: e.clientX, clientY: e.clientY });
|
|
97
155
|
} }, this.renderIcon('drag', 11, 15))));
|
|
@@ -105,10 +163,14 @@ const AiChatHeader = class {
|
|
|
105
163
|
e.stopPropagation();
|
|
106
164
|
this.conversationDelete.emit(e.detail);
|
|
107
165
|
};
|
|
166
|
+
handleConversationRetry = (e) => {
|
|
167
|
+
e.stopPropagation();
|
|
168
|
+
this.conversationRetry.emit();
|
|
169
|
+
};
|
|
108
170
|
renderConversationDropdown() {
|
|
109
171
|
if (!this.dropdownOpen || this.mode !== 'agent')
|
|
110
172
|
return null;
|
|
111
|
-
return (index.h("div", { class: "conversation-dropdown" }, index.h("ai-conversation-list", { items: this.conversationItems, activeId: this.conversationActiveId, loading: this.conversationLoading, onConversationSelect: this.handleConversationSelect, onConversationDelete: this.handleConversationDelete })));
|
|
173
|
+
return (index.h("div", { class: "conversation-dropdown" }, index.h("ai-conversation-list", { items: this.conversationItems, activeId: this.conversationActiveId, loading: this.conversationLoading, error: this.conversationError, errorText: this.conversationErrorText, retryLabel: this.conversationRetryLabel, emptyText: this.conversationEmptyText, deletingId: this.conversationDeletingId, onConversationSelect: this.handleConversationSelect, onConversationDelete: this.handleConversationDelete, onRetryClick: this.handleConversationRetry })));
|
|
112
174
|
}
|
|
113
175
|
renderAgentMode() {
|
|
114
176
|
return [
|
|
@@ -119,25 +181,25 @@ const AiChatHeader = class {
|
|
|
119
181
|
this.dropdownOpen = !this.dropdownOpen;
|
|
120
182
|
this.dropdownClick.emit();
|
|
121
183
|
}, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, this.titleLoading ? (index.h("span", { class: "title-skeleton", "aria-busy": "true", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062A\u062D\u0645\u064A\u0644" })) : (index.h("span", { class: "title" }, this.conversation)), !this.titleLoading && (index.h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24)))),
|
|
122
|
-
index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\
|
|
184
|
+
index.h("div", { class: "actions" }, index.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)), index.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)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
|
|
123
185
|
];
|
|
124
186
|
}
|
|
125
187
|
renderHumanMode() {
|
|
126
188
|
return [
|
|
127
189
|
this.renderDragBtn(),
|
|
128
190
|
index.h("div", { class: "content human" }, this.showBack && (index.h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24))), index.h("div", { class: "avatar-wrapper" }, this.renderAvatar(), index.h("span", { class: `online-dot status-${this.statusIndicator}` }, this.renderIcon('online-dot', 10, 10))), index.h("div", { class: "text-block" }, index.h("span", { class: "agent-name" }, this.agentName), this.agentStatus && index.h("span", { class: "agent-status" }, this.agentStatus))),
|
|
129
|
-
index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
|
|
191
|
+
index.h("div", { class: "actions" }, index.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)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
|
|
130
192
|
];
|
|
131
193
|
}
|
|
132
194
|
renderBrowserMode() {
|
|
133
195
|
return [
|
|
134
196
|
this.renderDragBtn(),
|
|
135
197
|
index.h("div", { class: "content browser" }, index.h("button", { class: "back-btn", "aria-label": "\u0631\u062C\u0648\u0639 / Back", onClick: () => this.backClick.emit() }, this.renderIcon('arrow-right', 24, 24)), index.h("span", { class: "browser-title" }, this.pageTitle), index.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))),
|
|
136
|
-
index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u0627\u0644\u0639\u0631\u0636 / Position", onClick: () => this.positionClick.emit() }, this.renderIcon('hand', 22, 22)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
|
|
198
|
+
index.h("div", { class: "actions" }, index.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)), index.h("button", { class: "action-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642 / Close", onClick: () => this.closeClick.emit() }, this.renderIcon('cancel', 22, 22))),
|
|
137
199
|
];
|
|
138
200
|
}
|
|
139
201
|
render() {
|
|
140
|
-
return (index.h(index.Host, { key: '
|
|
202
|
+
return (index.h(index.Host, { key: '874ee1e0eb62a59a4c9713111856594ef03dd435' }, index.h("div", { key: 'd8887800ad270c7878f41bdc930b2ca6b1280935', class: "header-wrapper" }, index.h("div", { key: 'a4fc7e86851cc1cdce6c686880b9f4ee33342fb7', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.mode === 'human' ? this.renderHumanMode() : this.renderBrowserMode()), this.renderConversationDropdown())));
|
|
141
203
|
}
|
|
142
204
|
};
|
|
143
205
|
AiChatHeader.style = aiChatHeaderCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
|
-
const aiConversationListCss = () => `:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.conversation-list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;background:var(--ai-bg-surface)}.list-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb) transparent}.list-scroll::-webkit-scrollbar{width:3px}.list-scroll::-webkit-scrollbar-track{background:transparent}.list-scroll::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.list-scroll::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.conv-item{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:10px 10px 10px 6px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}.conv-item:hover{background:var(--ai-bg-card)}.conv-item--active{background:var(--ai-bg-card);box-shadow:var(--ai-shadow-sm)}.conv-item__body{flex:1;min-width:0}.conv-item__title{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-item__preview{margin:0 0 5px;font-size:12px;color:var(--ai-text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.conv-item__meta{display:flex;align-items:center;gap:8px}.conv-item__time{font-size:11px;color:var(--ai-text-muted);flex-shrink:0}.rating-dots{display:flex;align-items:center;gap:3px}.rating-dot{width:6px;height:6px;border-radius:50%;background:var(--ai-border-default);transition:background 0.15s}.rating-dot--filled{background:var(--ai-accent-warning, #ffaf44)}.delete-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ai-text-muted);opacity:0;transition:opacity 0.15s, background 0.15s, color 0.15s;margin-block-start:2px}.conv-item:hover .delete-btn,.conv-item--active .delete-btn{opacity:1}.delete-btn:hover{background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444)}.delete-btn .icon-wrap{display:inline-flex;align-items:center;line-height:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.empty-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-bg-card);color:var(--ai-text-muted);line-height:0}.empty-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.empty-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.error-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444);line-height:0}.error-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.error-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state__retry{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ai-text-primary);background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:8px;cursor:pointer;transition:background 0.15s, box-shadow 0.15s}.error-state__retry:hover{box-shadow:var(--ai-shadow-sm)}.error-state__retry .icon-wrap{display:inline-flex;align-items:center;line-height:0}.skeleton-list{display:flex;flex-direction:column;gap:4px}.skeleton-item{padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.skeleton-line{border-radius:6px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.06) 75%));background-size:200% 100%;animation:shimmer 2s linear infinite;height:12px}.skeleton-line--title{width:65%;height:13px}.skeleton-line--preview{width:100%}.skeleton-line--meta{width:35%;height:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
|
|
6
|
+
const aiConversationListCss = () => `:host{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.conversation-list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;background:var(--ai-bg-surface)}.list-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--ai-scrollbar-thumb) transparent}.list-scroll::-webkit-scrollbar{width:3px}.list-scroll::-webkit-scrollbar-track{background:transparent}.list-scroll::-webkit-scrollbar-thumb{background:var(--ai-scrollbar-thumb);border-radius:99px}.list-scroll::-webkit-scrollbar-thumb:hover{background:var(--ai-scrollbar-thumb-hover)}.conv-item{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:10px 10px 10px 6px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}.conv-item:hover{background:var(--ai-bg-card)}.conv-item--active{background:var(--ai-bg-card);box-shadow:var(--ai-shadow-sm)}.conv-item__body{flex:1;min-width:0}.conv-item__title{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-item__preview{margin:0 0 5px;font-size:12px;color:var(--ai-text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.conv-item__meta{display:flex;align-items:center;gap:8px}.conv-item__time{font-size:11px;color:var(--ai-text-muted);flex-shrink:0}.rating-dots{display:flex;align-items:center;gap:3px}.rating-dot{width:6px;height:6px;border-radius:50%;background:var(--ai-border-default);transition:background 0.15s}.rating-dot--filled{background:var(--ai-accent-warning, #ffaf44)}.delete-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--ai-text-muted);opacity:0;transition:opacity 0.15s, background 0.15s, color 0.15s;margin-block-start:2px}.conv-item:hover .delete-btn,.conv-item--active .delete-btn{opacity:1}.delete-btn:hover{background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444)}.delete-btn .icon-wrap{display:inline-flex;align-items:center;line-height:0}.delete-btn--deleting{opacity:1;cursor:default;pointer-events:none}.delete-spinner{display:block;width:12px;height:12px;border:2px solid var(--ai-border-default);border-top-color:var(--ai-text-muted);border-radius:50%;animation:delete-spin 0.7s linear infinite}@keyframes delete-spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.empty-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-bg-card);color:var(--ai-text-muted);line-height:0}.empty-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.empty-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 16px;text-align:center}.error-state__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));color:var(--ai-status-danger, #ef4444);line-height:0}.error-state__icon .icon-wrap{display:inline-flex;align-items:center;line-height:0}.error-state__text{margin:0;font-size:13px;color:var(--ai-text-muted);line-height:1.4}.error-state__retry{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ai-text-primary);background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:8px;cursor:pointer;transition:background 0.15s, box-shadow 0.15s}.error-state__retry:hover{box-shadow:var(--ai-shadow-sm)}.error-state__retry .icon-wrap{display:inline-flex;align-items:center;line-height:0}.skeleton-list{display:flex;flex-direction:column;gap:4px}.skeleton-item{padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:6px}.skeleton-line{border-radius:6px;background:var(--ai-shimmer-gradient, linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.06) 75%));background-size:200% 100%;animation:shimmer 2s linear infinite;height:12px}.skeleton-line--title{width:65%;height:13px}.skeleton-line--preview{width:100%}.skeleton-line--meta{width:35%;height:10px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
|
|
7
7
|
|
|
8
8
|
const AiConversationList = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -26,6 +26,8 @@ const AiConversationList = class {
|
|
|
26
26
|
errorText = 'تعذّر تحميل المحادثات';
|
|
27
27
|
/** Retry button label for error state */
|
|
28
28
|
retryLabel = 'إعادة المحاولة';
|
|
29
|
+
/** ID of the conversation currently being deleted — shows a spinner on that item */
|
|
30
|
+
deletingId = '';
|
|
29
31
|
conversationSelect;
|
|
30
32
|
conversationDelete;
|
|
31
33
|
retryClick;
|
|
@@ -76,7 +78,7 @@ const AiConversationList = class {
|
|
|
76
78
|
}
|
|
77
79
|
render() {
|
|
78
80
|
const showEmpty = !this.loading && !this.error && this.items.length === 0;
|
|
79
|
-
return (index.h(index.Host, { key: '
|
|
81
|
+
return (index.h(index.Host, { key: '8cf17cedd5c41f0d6ffd2d06e557dc370041d1aa' }, index.h("div", { key: '50f5eeb57228f55d72acf517ed5eeb5d79e13a4b', class: "conversation-list" }, index.h("div", { key: '763f7cb557fb9abea75e08379d0ea9090b00ac1e', class: "list-scroll", role: "list" }, this.loading
|
|
80
82
|
? this.renderSkeleton()
|
|
81
83
|
: this.error
|
|
82
84
|
? this.renderError()
|
|
@@ -84,10 +86,14 @@ const AiConversationList = class {
|
|
|
84
86
|
? this.renderEmpty()
|
|
85
87
|
: this.items.map(item => {
|
|
86
88
|
const isActive = item.id === this.activeId;
|
|
87
|
-
return (index.h("div", { key: item.id, class: { 'conv-item': true, 'conv-item--active': isActive }, role: "listitem", "aria-current": isActive ? 'true' : undefined, onClick: () => this.conversationSelect.emit(item.id) }, index.h("div", { class: "conv-item__body" }, index.h("p", { class: "conv-item__title" }, item.title), index.h("p", { class: "conv-item__preview" }, item.preview), index.h("div", { class: "conv-item__meta" }, index.h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), index.h("button", { class:
|
|
89
|
+
return (index.h("div", { key: item.id, class: { 'conv-item': true, 'conv-item--active': isActive }, role: "listitem", "aria-current": isActive ? 'true' : undefined, onClick: () => this.conversationSelect.emit(item.id) }, index.h("div", { class: "conv-item__body" }, index.h("p", { class: "conv-item__title" }, item.title), index.h("p", { class: "conv-item__preview" }, item.preview), index.h("div", { class: "conv-item__meta" }, index.h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), index.h("button", { class: { 'delete-btn': true, 'delete-btn--deleting': this.deletingId === item.id }, "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", disabled: this.deletingId === item.id, onClick: e => {
|
|
88
90
|
e.stopPropagation();
|
|
91
|
+
if (this.deletingId === item.id)
|
|
92
|
+
return;
|
|
89
93
|
this.conversationDelete.emit(item.id);
|
|
90
|
-
} }, this.
|
|
94
|
+
} }, this.deletingId === item.id
|
|
95
|
+
? index.h("span", { class: "delete-spinner", "aria-label": "\u062C\u0627\u0631\u064A \u0627\u0644\u062D\u0630\u0641" })
|
|
96
|
+
: this.renderIcon('cancel', 14, 14))));
|
|
91
97
|
})))));
|
|
92
98
|
}
|
|
93
99
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiConversationSummaryCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.summary-card{background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:16px;box-shadow:var(--ai-shadow-sm);overflow:hidden;animation:fade-in 0.3s ease}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.summary-header{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--ai-border-default)}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-surface);box-shadow:var(--ai-shadow-inner);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.summary-title{font-size:15px;font-weight:500;color:var(--ai-text-primary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-badges{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap}.lang-badge{color:var(--ai-text-secondary);background:var(--ai-bg-surface)}.summary-body{margin:0;padding:12px 16px;font-size:14px;color:var(--ai-text-secondary);line-height:1.6;border-bottom:1px solid var(--ai-border-default)}.summary-slot{padding:12px 16px}.summary-slot:empty{display:none}`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center}svg{display:block}`;
|
|
@@ -1,25 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
|
|
5
|
-
const aiInChatBrowserCss = () => `:host{display:flex;flex-direction:column;width:calc(100% + 2 * var(--ai-spacing-2xl, 16px));height:calc(100% + 2 * var(--ai-spacing-2xl, 16px));margin:calc(-1 * var(--ai-spacing-2xl, 16px))}.browser-
|
|
5
|
+
const aiInChatBrowserCss = () => `:host{display:flex;flex-direction:column;width:calc(100% + 2 * var(--ai-spacing-2xl, 16px));height:calc(100% + 2 * var(--ai-spacing-2xl, 16px));margin:calc(-1 * var(--ai-spacing-2xl, 16px))}.browser-content{flex:1;position:relative;overflow:hidden;background:var(--ai-bg-surface)}.browser-iframe{width:100%;height:100%;border:none;display:block;background:var(--ai-bg-card)}.browser-loading{position:absolute;top:0;left:0;right:0;z-index:2;height:3px;overflow:hidden;background:var(--ai-border-light)}.loading-bar{width:40%;height:100%;background:var(--ai-accent);border-radius:2px;animation:browser-loading-slide 1.2s ease-in-out infinite}@keyframes browser-loading-slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}.browser-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;padding:24px;text-align:center}.error-text{font-size:14px;font-weight:600;color:var(--ai-text-primary)}.error-url{font-size:12px;color:var(--ai-text-muted);word-break:break-all;max-width:280px}`;
|
|
6
6
|
|
|
7
7
|
const AiInChatBrowser = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
|
-
this.browserClose = index.createEvent(this, "browserClose");
|
|
11
|
-
this.browserOpenExternal = index.createEvent(this, "browserOpenExternal");
|
|
12
10
|
}
|
|
13
11
|
/** The URL to display inside the in-chat browser iframe */
|
|
14
12
|
url = '';
|
|
15
|
-
/** Page title
|
|
13
|
+
/** Page title used as the iframe's accessible title. Defaults to the URL hostname when empty. */
|
|
16
14
|
pageTitle = '';
|
|
17
|
-
/** Show the drag handle in the header (for floating containers) */
|
|
18
|
-
isDraggable = false;
|
|
19
|
-
/** Fired when the user clicks the back / close button to dismiss the browser */
|
|
20
|
-
browserClose;
|
|
21
|
-
/** Fired when the user clicks the external-link button */
|
|
22
|
-
browserOpenExternal;
|
|
23
15
|
isLoading = true;
|
|
24
16
|
hasError = false;
|
|
25
17
|
onUrlChange() {
|
|
@@ -30,8 +22,7 @@ const AiInChatBrowser = class {
|
|
|
30
22
|
if (this.pageTitle)
|
|
31
23
|
return this.pageTitle;
|
|
32
24
|
try {
|
|
33
|
-
|
|
34
|
-
return parsed.hostname;
|
|
25
|
+
return new URL(this.url).hostname;
|
|
35
26
|
}
|
|
36
27
|
catch {
|
|
37
28
|
return this.url || '';
|
|
@@ -44,18 +35,9 @@ const AiInChatBrowser = class {
|
|
|
44
35
|
this.isLoading = false;
|
|
45
36
|
this.hasError = true;
|
|
46
37
|
};
|
|
47
|
-
handleBack = () => {
|
|
48
|
-
this.browserClose.emit();
|
|
49
|
-
};
|
|
50
|
-
handleOpenExternal = () => {
|
|
51
|
-
if (this.url) {
|
|
52
|
-
window.open(this.url, '_blank', 'noopener,noreferrer');
|
|
53
|
-
}
|
|
54
|
-
this.browserOpenExternal.emit(this.url);
|
|
55
|
-
};
|
|
56
38
|
render() {
|
|
57
39
|
const displayTitle = this.getDisplayTitle();
|
|
58
|
-
return (index.h(index.Host, { key: '
|
|
40
|
+
return (index.h(index.Host, { key: '2d3bb12516396aaf8ca4df1e63e954cc06b2f01d' }, index.h("div", { key: '3c6f179eb59c982ab299910b5a1941d9b9d17d09', class: "browser-content" }, this.isLoading && (index.h("div", { key: '0228954a8cfaafed42f1efb5eb1ca5f160bc29e0', class: "browser-loading" }, index.h("div", { key: 'ccc49943a0af13afdbf1dcee8be0e3d712ac54d6', class: "loading-bar" }))), this.hasError ? (index.h("div", { class: "browser-error" }, index.h("span", { class: "error-text" }, "\u062A\u0639\u0630\u0651\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629"), index.h("span", { class: "error-url" }, this.url))) : (this.url && (index.h("iframe", { class: "browser-iframe", src: this.url, onLoad: this.handleIframeLoad, onError: this.handleIframeError, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", referrerPolicy: "no-referrer", title: displayTitle }))))));
|
|
59
41
|
}
|
|
60
42
|
static get watchers() { return {
|
|
61
43
|
"url": [{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiLinkCss = () => `:host{--ai-link-font-size:14px;--ai-link-font-weight:700;--ai-link-line-height:20px;--ai-link-gap:4px;--ai-link-icon-size:16px;display:flex;align-items:center;gap:var(--ai-link-gap)}.link{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--ai-link-gap);color:var(--ai-accent-dark);font-size:var(--ai-link-font-size);font-weight:var(--ai-link-font-weight);font-family:inherit;line-height:var(--ai-link-line-height);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color 0.15s ease;outline:none}.link:hover{color:var(--ai-accent-dark);text-decoration:underline}.link:focus-visible{outline:2px solid var(--ai-accent);outline-offset:2px;border-radius:4px}.link__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ai-link-icon-size);height:var(--ai-link-icon-size);flex-shrink:0;line-height:0}.link__label{color:var(--ai-accent-dark);font-weight:bold}`;
|
|
@@ -26,7 +26,7 @@ const AiLink = class {
|
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
28
|
const rel = this.rel || (this.target === '_blank' ? 'noopener noreferrer' : undefined);
|
|
29
|
-
return (index.h(index.Host, { key: '
|
|
29
|
+
return (index.h(index.Host, { key: '98087503b9a0803425b23f7ee00c95025493679d' }, index.h("span", { key: '41495d6375d1c539b777b3cd38e7b7af8fcbbb9b', class: "link__label" }, this.label, index.h("slot", { key: 'f416955b31900039f03b0e7ee2e537a22964d553' })), index.h("a", { key: '4f1d74ff6c600d17fcf80686aeebc5a92a4c7305', class: "link", href: this.href, target: this.target, rel: rel }, this.renderShareIcon())));
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
AiLink.style = aiLinkCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
const aiLoadingCss = () => `:host{display:block}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}.sparkle-avatar-wrap{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}@keyframes sparkle-twinkle{0%,100%{transform:scale(1);opacity:1;filter:brightness(1)}15%{transform:scale(1.4);opacity:0.4;filter:brightness(2)}30%{transform:scale(0.85);opacity:0.9;filter:brightness(0.9)}50%{transform:scale(1.3);opacity:0.5;filter:brightness(1.8)}70%{transform:scale(0.9);opacity:1;filter:brightness(1)}}.sparkle-avatar{width:24px;height:24px;border-radius:9999px;background:var(--ai-bg-card);box-shadow:var(--ai-shadow-inner);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ai-amber)}.sparkle-avatar .icon-wrap{animation:sparkle-twinkle 2.4s ease-in-out infinite;transform-origin:center}.header-agent{font-size:12px;color:var(--ai-text-secondary);white-space:nowrap}.thinking-row{display:inline-flex;align-items:center;gap:8px;flex-direction:row}.thinking-col{display:flex;flex-direction:column;gap:2px}@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}.shimmer-text{font-size:14px;font-weight:400;line-height:1.5;background:var(--ai-glow-gradient);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 2s linear infinite}.shimmer-text.subtext{font-size:12px;opacity:0.75}@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.steps-card{background:var(--ai-bg-card);border:1px solid var(--ai-border-default);border-radius:16px;box-shadow:var(--ai-shadow-sm);overflow:hidden;animation:fade-in 0.3s ease}.steps-header{padding:16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ai-border-default)}.steps-header.collapsible{cursor:pointer;user-select:none}.steps-header-center{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.steps-title{font-size:16px;font-weight:500;color:var(--ai-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-badge{font-size:12px;font-weight:500;color:var(--ai-accent-dark);background:var(--ai-accent-bg);padding:2px 8px;border-radius:9999px;white-space:nowrap;flex-shrink:0}.progress-badge.executing-title{max-width:180px;overflow:hidden;text-overflow:ellipsis}.collapse-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ai-text-secondary);flex-shrink:0;transition:transform 0.2s ease;transform:rotate(180deg)}.collapse-btn.expanded{transform:rotate(0deg)}.steps-body{padding:12px 16px;display:flex;flex-direction:column}.planning-shimmer{padding:4px 0}.step-row{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:4px 0}.step-row:hover .step-text{color:var(--ai-text-primary)}.step-row.pending{opacity:0.5}.step-row.executing .step-text{color:var(--ai-text-primary)}.step-row.failed .step-text{color:var(--ai-error-text, #dc2626)}.step-content{flex:1;display:flex;flex-direction:column;gap:2px;padding-top:4px}.step-text{font-size:14px;font-weight:400;color:var(--ai-text-secondary);line-height:1.5}.step-description{font-size:12px;color:var(--ai-text-secondary);line-height:1.4}.step-duration{font-size:11px;color:var(--ai-text-secondary);opacity:0.7}.agent-chip{display:inline-flex;align-self:flex-start;font-size:11px;padding:1px 6px;border-radius:9999px;border:1px solid var(--ai-border-default);color:var(--ai-text-secondary)}.step-badge-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.step-separator{width:1px;height:16px;background:var(--ai-border-default);margin:2px 0}@keyframes pulse-ring{0%{transform:scale(1);opacity:0.6}100%{transform:scale(2);opacity:0}}.step-badge-outer{padding:2px;border-radius:9999px;background:var(--ai-bg-surface);display:inline-flex;align-items:center;justify-content:center;position:relative}.step-badge-outer.pulse-ring::after{content:'';position:absolute;inset:0;border-radius:9999px;border:2px solid var(--ai-amber);animation:pulse-ring 1.2s ease-out infinite}.step-badge-inner{width:26px;height:26px;border-radius:9999px;background:var(--ai-bg-card);box-shadow:var(--ai-shadow-badge);display:flex;align-items:center;justify-content:center;color:var(--ai-text-secondary)}.step-badge-inner.completed{background:var(--ai-success-bg);color:var(--ai-success-text)}.step-badge-inner.executing{color:var(--ai-amber)}.step-badge-inner.failed{background:var(--ai-error-bg, #fee2e2);color:var(--ai-error-text, #dc2626)}.step-number{font-size:14px;font-weight:500;color:var(--ai-text-secondary);line-height:1}`;
|
|
@@ -82,7 +82,7 @@ const AiLoading = class {
|
|
|
82
82
|
return (index.h("div", { class: "steps-card" }, index.h("div", { class: `steps-header ${this.collapsible ? 'collapsible' : ''}`, onClick: () => this.handleToggle() }, this.renderSparkleAvatar(this.currentAgent || undefined), index.h("div", { class: "steps-header-center" }, index.h("span", { class: "steps-title" }, this.headerTitle), headerBadge()), this.collapsible && index.h("button", { class: `collapse-btn ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('chevron-down', 20, 20))), this._expanded && total === 0 && this.renderPlanningShimmer(), this._expanded && total > 0 && (index.h("div", { class: "steps-body" }, this.steps.map((step, i) => (index.h("div", { class: `step-row ${step.status}`, onClick: () => this.stepClick.emit(step) }, index.h("div", { class: "step-badge-col" }, this.renderStepBadge(step, i), i < this.steps.length - 1 && index.h("div", { class: "step-separator" })), index.h("div", { class: "step-content" }, index.h("span", { class: "step-text" }, step.action), step.reason && index.h("span", { class: "step-description" }, step.reason)))))))));
|
|
83
83
|
}
|
|
84
84
|
render() {
|
|
85
|
-
return index.h(index.Host, { key: '
|
|
85
|
+
return index.h(index.Host, { key: '2053fe1e8a1fcb1ec7441a5d32952ec1f186a5bb' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
AiLoading.style = aiLoadingCss();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
|
|
5
5
|
const aiMessageInputCss = () => `: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.9;pointer-events:none}.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;transition:border-radius 0.15s ease}.input-container.multiline{border-radius:var(--ai-input-border-radius-multiline, 20px)}.input-row{display:flex;align-items:center;gap:var(--ai-input-gap, 12px)}.input-container.multiline .input-row{align-items:flex-end}.actions{display:flex;align-items:center;gap:var(--ai-actions-gap, 8px);flex-shrink:0}.send-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:9999px;border:2px solid var(--ai-border-default);background-color:var(--ai-border-default);color:var(--ai-text-secondary);cursor:not-allowed;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;flex-shrink:0}.send-button.active{background-color:var(--ai-send-button-active-bg, var(--ai-accent));border-color:var(--ai-send-button-active-border, var(--ai-accent));color:var(--ai-accent-text);cursor:pointer}.send-button.active:hover{background-color:var(--ai-send-button-active-hover-bg, var(--ai-accent));border-color:var(--ai-send-button-active-hover-border, var(--ai-accent))}.send-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.voice-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:32px;border:none;background-color:transparent;color:var(--ai-text-secondary);cursor:pointer;transition:background-color 0.2s ease, color 0.2s ease;flex-shrink:0}.voice-button:hover:not(:disabled){background-color:var(--ai-hover-overlay);color:var(--ai-voice-button-hover-color, var(--ai-text-secondary))}.voice-button:disabled{cursor:not-allowed;opacity:0.5}.voice-button:focus{outline:none;box-shadow:0 0 0 2px var(--ai-focus-ring-color, var(--ai-focus-ring))}.textarea{flex:1;resize:none;outline:none;border:none;background:transparent;font-size:var(--ai-input-font-size, 14px);line-height:var(--ai-input-line-height, 20px);color:var(--ai-text-primary);font-family:inherit;min-height:20px;max-height:var(--ai-input-max-height, 120px);overflow-y:hidden;text-align:start;padding:0}.textarea::placeholder{color:var(--ai-text-secondary)}.textarea:disabled{cursor:not-allowed;opacity:0.6}.input-container:focus-within{border-color:var(--ai-input-focus-border-color, var(--ai-accent));box-shadow:var(--ai-input-focus-glow)}:host([disabled]) .wrapper{opacity:0.6;pointer-events:none}:host([disabled]) .glow{display:none}.char-counter{font-size:11px;color:var(--ai-text-secondary);flex-shrink:0;transition:color 0.2s ease}.char-counter.warning{color:var(--ai-voice-timer-warning-color, var(--ai-danger-text))}.voice-recorder-wrapper{position:relative}.voice-dismiss-btn{position:absolute;bottom:25px;inset-inline-end:25px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:2px solid var(--ai-border-default);border-radius:50%;background:var(--ai-border-default);color:var(--ai-text-secondary);font-size:0;cursor:pointer;transition:background 0.15s, border-color 0.15s, color 0.15s;z-index:10}.voice-dismiss-btn:hover{background:var(--ai-bg-surface);border-color:var(--ai-bg-surface);color:var(--ai-status-danger, #ef4444)}.voice-dismiss-btn:focus-visible{outline:2px solid var(--ai-focus-ring-color, var(--ai-focus-ring));outline-offset:1px}`;
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cc05u4ND.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-D-m8GW4D.js');
|
|
5
5
|
|
|
6
6
|
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)}}`;
|