@salla.sa/ui-ai-kit-core 2.1.0 → 2.1.1
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 +1 -1
- package/dist/cjs/ai-card.cjs.entry.js +2 -2
- package/dist/cjs/ai-chat-container.cjs.entry.js +12 -1
- package/dist/cjs/ai-chat-header.cjs.entry.js +4 -3
- package/dist/cjs/ai-chat-message.cjs.entry.js +1 -1
- package/dist/cjs/ai-conversation-list.cjs.entry.js +3 -12
- package/dist/cjs/ai-loading.cjs.entry.js +1 -1
- package/dist/cjs/ai-rating.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ui-ai-kit.cjs.js +1 -1
- 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 +12 -1
- package/dist/collection/components/ai-chat-header/ai-chat-header.css +9 -0
- package/dist/collection/components/ai-chat-header/ai-chat-header.js +5 -3
- package/dist/collection/components/ai-chat-message/ai-chat-message.js +1 -1
- package/dist/collection/components/ai-conversation-list/ai-conversation-list.js +14 -19
- package/dist/collection/components/ai-loading/ai-loading.js +1 -1
- package/dist/collection/components/ai-rating/ai-rating.js +2 -2
- 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 +1 -1
- package/dist/components/ai-conversation-list.js +1 -1
- package/dist/components/ai-loading.js +1 -1
- package/dist/components/ai-rating.js +1 -1
- package/dist/esm/ai-agent-error.entry.js +1 -1
- package/dist/esm/ai-card.entry.js +2 -2
- package/dist/esm/ai-chat-container.entry.js +12 -1
- package/dist/esm/ai-chat-header.entry.js +4 -3
- package/dist/esm/ai-chat-message.entry.js +1 -1
- package/dist/esm/ai-conversation-list.entry.js +3 -12
- package/dist/esm/ai-loading.entry.js +1 -1
- package/dist/esm/ai-rating.entry.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ui-ai-kit.js +1 -1
- package/dist/types/components/ai-chat-container/ai-chat-container.d.ts +1 -0
- package/dist/types/components/ai-chat-header/ai-chat-header.d.ts +1 -0
- package/dist/types/components/ai-conversation-list/ai-conversation-list.d.ts +1 -2
- package/dist/types/components.d.ts +6 -5
- package/dist/ui-ai-kit/{p-9a4b8c7e.entry.js → p-0da537b1.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-2342431f.entry.js → p-210b11dc.entry.js} +1 -1
- package/dist/ui-ai-kit/p-70836960.entry.js +1 -0
- package/dist/ui-ai-kit/{p-6b9b1022.entry.js → p-72c6e3d1.entry.js} +1 -1
- package/dist/ui-ai-kit/p-8f721843.entry.js +1 -0
- package/dist/ui-ai-kit/p-95b50b7b.entry.js +1 -0
- package/dist/ui-ai-kit/{p-a424e69b.entry.js → p-c9ec615f.entry.js} +1 -1
- package/dist/ui-ai-kit/{p-3268aa48.entry.js → p-cf6caba5.entry.js} +1 -1
- package/dist/ui-ai-kit/ui-ai-kit.esm.js +1 -1
- package/package.json +1 -1
- package/dist/ui-ai-kit/p-1e7608ee.entry.js +0 -1
- package/dist/ui-ai-kit/p-2a49ee93.entry.js +0 -1
- package/dist/ui-ai-kit/p-6b61d00f.entry.js +0 -1
|
@@ -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: '0376a351dfcff6612ddbbf9ec38afd90b51e4a42' }, index.h("div", { key: '4085f93755a8cd3b74ec182ebe510bb8a6626133', class: "error-card" }, index.h("div", { key: '61d42da5ed3d8bbc69cd9604e600437fc241edb0', class: "error-body" }, index.h("div", { key: '0d98c6ad7bfc320164ba5308b8f1f8f5557eccf2', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), index.h("div", { key: '7b75d807a6227d335b26965cd959471c7ae8f20b', class: "error-content" }, index.h("div", { key: 'd46f618bb685bb3ce20ba11fb59f524e4ffe6238', class: "error-headline-row" }, index.h("span", { key: '6ee0b1d651d6a037073e6ad8917b2fe5495d0ee0', class: "error-headline" }, this.headline), this.errorCode && (index.h("span", { key: 'b541eee2462ff33791e3975102841845297335d4', class: "error-code-badge" }, this.errorCode))), this.message && (index.h("p", { key: '34d133731a7512ebe16a873bf52eb97120463335', class: "error-message" }, this.message))), this.dismissible && (index.h("button", { key: '0e3bc48998e3e7e2379557e2c6c7503d5c021a42', 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: 'f1865b3e69d946be9833943b66e1b8de046d343d', class: "error-footer" }, index.h("button", { key: '11c72fbbfbaabf60e5da178ac07177185c0046b8', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), index.h("span", { key: 'fafdec1b9bc0aa727ada94d011bd1e66da53df0e' }, this.retryLabel)))))));
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
AiAgentError.style = aiAgentErrorCss();
|
|
@@ -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: 'b9af2e825faa2dc3ba5a0c145a9c9399a75e048a' }, index.h("div", { key: 'f698c538583908fc84f4987e574c9f6740047791', 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: '8012eba0a43945d4354f51f97badf87df072e0ea' }))));
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
23
|
AiCard.style = aiCardCss();
|
|
@@ -26,6 +26,7 @@ const ChatContainer = class {
|
|
|
26
26
|
containerRef;
|
|
27
27
|
messagesAreaRef;
|
|
28
28
|
dragState = null;
|
|
29
|
+
mutationObserver = null;
|
|
29
30
|
// Named arrow so we can reliably add/remove it without leaking
|
|
30
31
|
dragListener = (e) => {
|
|
31
32
|
const container = this.containerRef;
|
|
@@ -81,6 +82,15 @@ const ChatContainer = class {
|
|
|
81
82
|
this.setupDrag();
|
|
82
83
|
}
|
|
83
84
|
}
|
|
85
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
86
|
+
if (this.autoScroll && this.messagesAreaRef) {
|
|
87
|
+
requestAnimationFrame(() => {
|
|
88
|
+
this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
// Observe light DOM (this.el) — slotted content lives here, not inside shadow messagesAreaRef
|
|
93
|
+
this.mutationObserver.observe(this.el, { childList: true, subtree: true });
|
|
84
94
|
}
|
|
85
95
|
isOpenChanged(newVal) {
|
|
86
96
|
if (newVal && this.autoScroll && this.messagesAreaRef) {
|
|
@@ -97,6 +107,7 @@ const ChatContainer = class {
|
|
|
97
107
|
disconnectedCallback() {
|
|
98
108
|
window.removeEventListener('resize', this.checkMobile);
|
|
99
109
|
this.el.removeEventListener('headerDragStart', this.dragListener);
|
|
110
|
+
this.mutationObserver?.disconnect();
|
|
100
111
|
}
|
|
101
112
|
/** Programmatically scroll the messages area to the bottom */
|
|
102
113
|
async scrollToBottom() {
|
|
@@ -149,7 +160,7 @@ const ChatContainer = class {
|
|
|
149
160
|
return false;
|
|
150
161
|
}
|
|
151
162
|
render() {
|
|
152
|
-
return (index.h(index.Host, { key: '
|
|
163
|
+
return (index.h(index.Host, { key: 'fb25617bfba35681e5190cec602ad17f8a8e53ef', class: { dark: this.isDark() } }, index.h("div", { key: '463a07a473470a497212948fa601cd677d1f266b', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (index.h("div", { key: '40c3fa4a496a848950dba73372acacd14b4c5dda', class: "watermark" }, index.h("ai-icon", { key: '7467301453bce43c8d3eaca7efe83800a9e4bc8b', name: "watermark", size: 133 }))), index.h("slot", { key: 'c082990d1e7829d5d879a1c176dd0b57a3b3a244', name: "header" }), index.h("div", { key: '13b9ccd90f1e1e26794c8e780a5e8e89a4de43d2', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, index.h("slot", { key: '247cb11401e834b41d220515b88d5e202f40e8e8' })), index.h("slot", { key: '8115183cbe55bc3ba472fed0e368a811e5232b47', name: "footer" }))));
|
|
153
164
|
}
|
|
154
165
|
static get watchers() { return {
|
|
155
166
|
"isOpen": [{
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-Bs23yVuF.js');
|
|
4
4
|
var iconRegistry = require('./icon-registry-BKb9-2Nt.js');
|
|
5
5
|
|
|
6
|
-
const aiChatHeaderCss = () => `:host{display:block}.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}.dropdown-trigger{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;color:var(--ai-text-primary)}.dropdown-trigger:focus-visible{outline:2px solid var(--ai-focus-ring);outline-offset:2px}.title{font-size:16px;font-weight:700;color:var(--ai-text-primary);white-space:nowrap;line-height:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.avatar{width:40px;height:40px;border-radius:9999px;border:1px solid var(--ai-border-default);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)}`;
|
|
6
|
+
const aiChatHeaderCss = () => `:host{display:block}.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}.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}.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)}`;
|
|
7
7
|
|
|
8
8
|
const AiChatHeader = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -31,6 +31,7 @@ const AiChatHeader = class {
|
|
|
31
31
|
/** Human mode: status indicator variant */
|
|
32
32
|
statusIndicator = 'online';
|
|
33
33
|
avatarError = false;
|
|
34
|
+
dropdownOpen = false;
|
|
34
35
|
/** Cancel / close button */
|
|
35
36
|
closeClick;
|
|
36
37
|
/** Pencil-edit button (agent mode) */
|
|
@@ -69,7 +70,7 @@ const AiChatHeader = class {
|
|
|
69
70
|
renderAgentMode() {
|
|
70
71
|
return [
|
|
71
72
|
this.renderDragBtn(),
|
|
72
|
-
index.h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => this.dropdownClick.emit(), "aria-haspopup": "listbox", "aria-expanded":
|
|
73
|
+
index.h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => { this.dropdownOpen = !this.dropdownOpen; this.dropdownClick.emit(); }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, index.h("span", { class: "title" }, this.conversation), index.h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24))),
|
|
73
74
|
index.h("div", { class: "actions" }, index.h("button", { class: "action-btn", "aria-label": "\u062A\u0639\u062F\u064A\u0644 / Edit", onClick: () => this.editClick.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.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))),
|
|
74
75
|
];
|
|
75
76
|
}
|
|
@@ -81,7 +82,7 @@ const AiChatHeader = class {
|
|
|
81
82
|
];
|
|
82
83
|
}
|
|
83
84
|
render() {
|
|
84
|
-
return (index.h(index.Host, { key: '
|
|
85
|
+
return (index.h(index.Host, { key: 'e7384f8737db6d63472fb458ebb0e1090438c03e' }, index.h("div", { key: 'b1b5fcc22aeca94649cc972042c3e9de75ddbdb7', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
|
|
85
86
|
}
|
|
86
87
|
};
|
|
87
88
|
AiChatHeader.style = aiChatHeaderCss();
|
|
@@ -1591,7 +1591,7 @@ const AiChatMessage = class {
|
|
|
1591
1591
|
} })), index.h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (index.h("div", { class: "agent-info" }, this.agentName && index.h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && index.h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
|
|
1592
1592
|
}
|
|
1593
1593
|
render() {
|
|
1594
|
-
return index.h(index.Host, { key: '
|
|
1594
|
+
return index.h(index.Host, { key: '004ac6918ec7ec7e960ca6fd3f75edb13529bf71' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
|
|
1595
1595
|
}
|
|
1596
1596
|
};
|
|
1597
1597
|
AiChatMessage.style = aiChatMessageCss();
|
|
@@ -12,7 +12,7 @@ const AiConversationList = class {
|
|
|
12
12
|
this.conversationDelete = index.createEvent(this, "conversationDelete");
|
|
13
13
|
}
|
|
14
14
|
/** JSON array of ConversationItem */
|
|
15
|
-
items =
|
|
15
|
+
items = [];
|
|
16
16
|
/** ID of the currently active conversation */
|
|
17
17
|
activeId = '';
|
|
18
18
|
/** Show skeleton loading state */
|
|
@@ -26,14 +26,6 @@ const AiConversationList = class {
|
|
|
26
26
|
const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
|
|
27
27
|
return index.h("span", { class: "icon-wrap", innerHTML: svg });
|
|
28
28
|
}
|
|
29
|
-
getItems() {
|
|
30
|
-
try {
|
|
31
|
-
return JSON.parse(this.items) || [];
|
|
32
|
-
}
|
|
33
|
-
catch {
|
|
34
|
-
return [];
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
29
|
formatRelativeTime(timestamp) {
|
|
38
30
|
try {
|
|
39
31
|
const date = new Date(timestamp);
|
|
@@ -63,10 +55,9 @@ const AiConversationList = class {
|
|
|
63
55
|
return (index.h("div", { class: "skeleton-list" }, [1, 2, 3, 4].map(i => (index.h("div", { key: i, class: "skeleton-item" }, index.h("div", { class: "skeleton-line skeleton-line--title" }), index.h("div", { class: "skeleton-line skeleton-line--preview" }), index.h("div", { class: "skeleton-line skeleton-line--meta" }))))));
|
|
64
56
|
}
|
|
65
57
|
render() {
|
|
66
|
-
|
|
67
|
-
return (index.h(index.Host, { key: '8c3d6b60fbd6fbc9e073d5dcada95a04bf6b22eb' }, index.h("div", { key: 'e11e29b8fb0247617b00fca7ab5d76bd547efc69', class: "conversation-list" }, index.h("div", { key: 'a24920fd77797e113fe91c96fe033c8301f01d58', class: "list-scroll", role: "list" }, this.loading
|
|
58
|
+
return (index.h(index.Host, { key: 'b67df60c8d758fdf42afec98e4322b3560abc212' }, index.h("div", { key: '13a7d396f253ba185edb3ad3cc97a7468d5209dc', class: "conversation-list" }, index.h("div", { key: 'efacc2632ca9ae8b5b3b68f3751b390879517e06', class: "list-scroll", role: "list" }, this.loading
|
|
68
59
|
? this.renderSkeleton()
|
|
69
|
-
:
|
|
60
|
+
: this.items.map(item => {
|
|
70
61
|
const isActive = item.id === this.activeId;
|
|
71
62
|
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", "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", onClick: e => {
|
|
72
63
|
e.stopPropagation();
|
|
@@ -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: 'f4523c26d9ce0d9bf14b313e4b10cadd2fc2b95f' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
AiLoading.style = aiLoadingCss();
|
|
@@ -40,7 +40,7 @@ const AiRating = class {
|
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
42
|
const label = this.selectedLabel;
|
|
43
|
-
return (index.h(index.Host, { key: '
|
|
43
|
+
return (index.h(index.Host, { key: 'b34d22060e8a0dd5af3efec715527638647022d4' }, index.h("div", { key: 'ebeb552ec0da2f395e57d58b099818ee1eb83c00', class: "rating" }, index.h("div", { key: 'df43846972875f6ef125caaa471942c223c6a913', class: "rating__text" }, index.h("p", { key: 'c6041201154f8b79d6c04a215e6b187b1128e3f1', class: "rating__question" }, this.question), index.h("p", { key: 'f15cf6fc176eb9ef9f278fee8be46f4cfb550cec', class: "rating__subtitle" }, this.subtitle)), index.h("div", { key: 'f6ce1f6600e05ff3ea8abc684e1d4d9cd773b6e7', class: "rating__icons", role: "group", "aria-label": this.question }, EMOJI_OPTIONS.map(opt => {
|
|
44
44
|
const isActive = this.value === opt.value;
|
|
45
45
|
const isHovered = this.hovered === opt.value;
|
|
46
46
|
return (index.h("button", { key: opt.value, class: {
|
|
@@ -49,7 +49,7 @@ const AiRating = class {
|
|
|
49
49
|
'emoji-btn--hovered': isHovered && !isActive,
|
|
50
50
|
'emoji-btn--disabled': this.disabled,
|
|
51
51
|
}, "aria-label": opt.label, "aria-pressed": isActive ? 'true' : 'false', disabled: this.disabled, onClick: () => this.select(opt.value), onMouseEnter: () => (this.hovered = opt.value), onMouseLeave: () => (this.hovered = null) }, index.h("span", { class: "emoji-btn__icon", "aria-hidden": "true" }, opt.emoji)));
|
|
52
|
-
})), label && index.h("p", { key: '
|
|
52
|
+
})), label && index.h("p", { key: '4d946cca51034b00d8dfc875ac188a6929c8b813', class: "rating__selected-label" }, label))));
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
AiRating.style = aiRatingCss();
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ var index = require('./index-Bs23yVuF.js');
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await index.globalScripts();
|
|
8
|
-
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-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],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["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-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["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"],"avatarError":[32]}]]],["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-list.cjs",[[513,"ai-conversation-list",{"items":[
|
|
8
|
+
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-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],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["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-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["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"],"avatarError":[32],"dropdownOpen":[32]}]]],["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-list.cjs",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4]}]]],["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-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[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-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]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
exports.setNonce = index.setNonce;
|
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
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-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],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["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-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["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"],"avatarError":[32]}]]],["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-list.cjs",[[513,"ai-conversation-list",{"items":[
|
|
21
|
+
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-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],"isMobile":[32],"floatLeft":[32],"floatTop":[32],"scrollToBottom":[64]},null,{"isOpen":[{"isOpenChanged":0}],"position":[{"positionChanged":0}]}]]],["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-card.cjs",[[769,"ai-card",{"noPadding":[4,"no-padding"],"noShadow":[4,"no-shadow"]}]]],["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"],"avatarError":[32],"dropdownOpen":[32]}]]],["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-list.cjs",[[513,"ai-conversation-list",{"items":[16],"activeId":[1,"active-id"],"loading":[4]}]]],["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-rating.cjs",[[513,"ai-rating",{"question":[1],"subtitle":[1],"value":[1026],"disabled":[4],"hovered":[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-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]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
|
+
"components/ai-conversation-list/ai-conversation-list.js",
|
|
3
4
|
"components/ai-loading/ai-loading.js",
|
|
4
5
|
"components/ai-rating/ai-rating.js",
|
|
5
6
|
"components/ai-agent-error/ai-agent-error.js",
|
|
@@ -7,7 +8,6 @@
|
|
|
7
8
|
"components/ai-chat-container/ai-chat-container.js",
|
|
8
9
|
"components/ai-chat-header/ai-chat-header.js",
|
|
9
10
|
"components/ai-chat-message/ai-chat-message.js",
|
|
10
|
-
"components/ai-conversation-list/ai-conversation-list.js",
|
|
11
11
|
"components/ai-conversation-summary/ai-conversation-summary.js",
|
|
12
12
|
"components/ai-icon/ai-icon.js",
|
|
13
13
|
"components/ai-link/ai-link.js",
|
|
@@ -23,7 +23,7 @@ export class AiAgentError {
|
|
|
23
23
|
return h("span", { class: "icon-wrap", innerHTML: svg });
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: '0376a351dfcff6612ddbbf9ec38afd90b51e4a42' }, h("div", { key: '4085f93755a8cd3b74ec182ebe510bb8a6626133', class: "error-card" }, h("div", { key: '61d42da5ed3d8bbc69cd9604e600437fc241edb0', class: "error-body" }, h("div", { key: '0d98c6ad7bfc320164ba5308b8f1f8f5557eccf2', class: "error-icon-wrap" }, this.renderIcon('warning', 20, 20)), h("div", { key: '7b75d807a6227d335b26965cd959471c7ae8f20b', class: "error-content" }, h("div", { key: 'd46f618bb685bb3ce20ba11fb59f524e4ffe6238', class: "error-headline-row" }, h("span", { key: '6ee0b1d651d6a037073e6ad8917b2fe5495d0ee0', class: "error-headline" }, this.headline), this.errorCode && (h("span", { key: 'b541eee2462ff33791e3975102841845297335d4', class: "error-code-badge" }, this.errorCode))), this.message && (h("p", { key: '34d133731a7512ebe16a873bf52eb97120463335', class: "error-message" }, this.message))), this.dismissible && (h("button", { key: '0e3bc48998e3e7e2379557e2c6c7503d5c021a42', class: "dismiss-btn", "aria-label": "\u0625\u063A\u0644\u0627\u0642", onClick: () => this.dismissClick.emit() }, this.renderIcon('cancel', 16, 16)))), this.retryable && (h("div", { key: 'f1865b3e69d946be9833943b66e1b8de046d343d', class: "error-footer" }, h("button", { key: '11c72fbbfbaabf60e5da178ac07177185c0046b8', class: "retry-btn", onClick: () => this.retryClick.emit() }, this.renderIcon('reload', 16, 16), h("span", { key: 'fafdec1b9bc0aa727ada94d011bd1e66da53df0e' }, this.retryLabel)))))));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "ai-agent-error"; }
|
|
29
29
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,11 +5,11 @@ export class AiCard {
|
|
|
5
5
|
/** Remove the shadow */
|
|
6
6
|
noShadow = false;
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'b9af2e825faa2dc3ba5a0c145a9c9399a75e048a' }, h("div", { key: 'f698c538583908fc84f4987e574c9f6740047791', class: {
|
|
9
9
|
card: true,
|
|
10
10
|
'card--no-padding': this.noPadding,
|
|
11
11
|
'card--no-shadow': this.noShadow,
|
|
12
|
-
} }, h("slot", { key: '
|
|
12
|
+
} }, h("slot", { key: '8012eba0a43945d4354f51f97badf87df072e0ea' }))));
|
|
13
13
|
}
|
|
14
14
|
static get is() { return "ai-card"; }
|
|
15
15
|
static get encapsulation() { return "shadow"; }
|
|
@@ -21,6 +21,7 @@ export class ChatContainer {
|
|
|
21
21
|
containerRef;
|
|
22
22
|
messagesAreaRef;
|
|
23
23
|
dragState = null;
|
|
24
|
+
mutationObserver = null;
|
|
24
25
|
// Named arrow so we can reliably add/remove it without leaking
|
|
25
26
|
dragListener = (e) => {
|
|
26
27
|
const container = this.containerRef;
|
|
@@ -75,6 +76,15 @@ export class ChatContainer {
|
|
|
75
76
|
this.setupDrag();
|
|
76
77
|
}
|
|
77
78
|
}
|
|
79
|
+
this.mutationObserver = new MutationObserver(() => {
|
|
80
|
+
if (this.autoScroll && this.messagesAreaRef) {
|
|
81
|
+
requestAnimationFrame(() => {
|
|
82
|
+
this.messagesAreaRef.scrollTop = this.messagesAreaRef.scrollHeight;
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
// Observe light DOM (this.el) — slotted content lives here, not inside shadow messagesAreaRef
|
|
87
|
+
this.mutationObserver.observe(this.el, { childList: true, subtree: true });
|
|
78
88
|
}
|
|
79
89
|
isOpenChanged(newVal) {
|
|
80
90
|
if (newVal && this.autoScroll && this.messagesAreaRef) {
|
|
@@ -91,6 +101,7 @@ export class ChatContainer {
|
|
|
91
101
|
disconnectedCallback() {
|
|
92
102
|
window.removeEventListener('resize', this.checkMobile);
|
|
93
103
|
this.el.removeEventListener('headerDragStart', this.dragListener);
|
|
104
|
+
this.mutationObserver?.disconnect();
|
|
94
105
|
}
|
|
95
106
|
/** Programmatically scroll the messages area to the bottom */
|
|
96
107
|
async scrollToBottom() {
|
|
@@ -143,7 +154,7 @@ export class ChatContainer {
|
|
|
143
154
|
return false;
|
|
144
155
|
}
|
|
145
156
|
render() {
|
|
146
|
-
return (h(Host, { key: '
|
|
157
|
+
return (h(Host, { key: 'fb25617bfba35681e5190cec602ad17f8a8e53ef', class: { dark: this.isDark() } }, h("div", { key: '463a07a473470a497212948fa601cd677d1f266b', class: this.getContainerClasses(), style: this.getContainerStyle(), ref: el => (this.containerRef = el) }, this.showWatermark && (h("div", { key: '40c3fa4a496a848950dba73372acacd14b4c5dda', class: "watermark" }, h("ai-icon", { key: '7467301453bce43c8d3eaca7efe83800a9e4bc8b', name: "watermark", size: 133 }))), h("slot", { key: 'c082990d1e7829d5d879a1c176dd0b57a3b3a244', name: "header" }), h("div", { key: '13b9ccd90f1e1e26794c8e780a5e8e89a4de43d2', class: "messages-area", ref: el => (this.messagesAreaRef = el) }, h("slot", { key: '247cb11401e834b41d220515b88d5e202f40e8e8' })), h("slot", { key: '8115183cbe55bc3ba472fed0e368a811e5232b47', name: "footer" }))));
|
|
147
158
|
}
|
|
148
159
|
static get is() { return "ai-chat-container"; }
|
|
149
160
|
static get encapsulation() { return "shadow"; }
|
|
@@ -96,6 +96,15 @@
|
|
|
96
96
|
color: var(--ai-text-primary);
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
.dropdown-chevron {
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
transition: transform 0.2s ease;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.dropdown-chevron.open {
|
|
105
|
+
transform: rotate(180deg);
|
|
106
|
+
}
|
|
107
|
+
|
|
99
108
|
.dropdown-trigger:focus-visible {
|
|
100
109
|
outline: 2px solid var(--ai-focus-ring);
|
|
101
110
|
outline-offset: 2px;
|
|
@@ -17,6 +17,7 @@ export class AiChatHeader {
|
|
|
17
17
|
/** Human mode: status indicator variant */
|
|
18
18
|
statusIndicator = 'online';
|
|
19
19
|
avatarError = false;
|
|
20
|
+
dropdownOpen = false;
|
|
20
21
|
/** Cancel / close button */
|
|
21
22
|
closeClick;
|
|
22
23
|
/** Pencil-edit button (agent mode) */
|
|
@@ -55,7 +56,7 @@ export class AiChatHeader {
|
|
|
55
56
|
renderAgentMode() {
|
|
56
57
|
return [
|
|
57
58
|
this.renderDragBtn(),
|
|
58
|
-
h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => this.dropdownClick.emit(), "aria-haspopup": "listbox", "aria-expanded":
|
|
59
|
+
h("div", { class: "content agent dropdown-trigger", role: "button", onClick: () => { this.dropdownOpen = !this.dropdownOpen; this.dropdownClick.emit(); }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen, "aria-label": `${this.conversation}, افتح قائمة المحادثات` }, h("span", { class: "title" }, this.conversation), h("span", { class: `dropdown-chevron${this.dropdownOpen ? ' open' : ''}` }, this.renderIcon('chevron-down', 24, 24))),
|
|
59
60
|
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))),
|
|
60
61
|
];
|
|
61
62
|
}
|
|
@@ -67,7 +68,7 @@ export class AiChatHeader {
|
|
|
67
68
|
];
|
|
68
69
|
}
|
|
69
70
|
render() {
|
|
70
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: 'e7384f8737db6d63472fb458ebb0e1090438c03e' }, h("div", { key: 'b1b5fcc22aeca94649cc972042c3e9de75ddbdb7', class: "header-container" }, this.mode === 'agent' ? this.renderAgentMode() : this.renderHumanMode())));
|
|
71
72
|
}
|
|
72
73
|
static get is() { return "ai-chat-header"; }
|
|
73
74
|
static get encapsulation() { return "shadow"; }
|
|
@@ -247,7 +248,8 @@ export class AiChatHeader {
|
|
|
247
248
|
}
|
|
248
249
|
static get states() {
|
|
249
250
|
return {
|
|
250
|
-
"avatarError": {}
|
|
251
|
+
"avatarError": {},
|
|
252
|
+
"dropdownOpen": {}
|
|
251
253
|
};
|
|
252
254
|
}
|
|
253
255
|
static get events() {
|
|
@@ -195,7 +195,7 @@ export class AiChatMessage {
|
|
|
195
195
|
} })), h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (h("div", { class: "agent-info" }, this.agentName && h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
|
|
196
196
|
}
|
|
197
197
|
render() {
|
|
198
|
-
return h(Host, { key: '
|
|
198
|
+
return h(Host, { key: '004ac6918ec7ec7e960ca6fd3f75edb13529bf71' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
|
|
199
199
|
}
|
|
200
200
|
static get is() { return "ai-chat-message"; }
|
|
201
201
|
static get encapsulation() { return "shadow"; }
|
|
@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
import { iconRegistry } from "../../utils/icon-registry";
|
|
3
3
|
export class AiConversationList {
|
|
4
4
|
/** JSON array of ConversationItem */
|
|
5
|
-
items =
|
|
5
|
+
items = [];
|
|
6
6
|
/** ID of the currently active conversation */
|
|
7
7
|
activeId = '';
|
|
8
8
|
/** Show skeleton loading state */
|
|
@@ -16,14 +16,6 @@ export class AiConversationList {
|
|
|
16
16
|
const svg = `<svg width="${width}" height="${height}" viewBox="${icon.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${icon.content}</svg>`;
|
|
17
17
|
return h("span", { class: "icon-wrap", innerHTML: svg });
|
|
18
18
|
}
|
|
19
|
-
getItems() {
|
|
20
|
-
try {
|
|
21
|
-
return JSON.parse(this.items) || [];
|
|
22
|
-
}
|
|
23
|
-
catch {
|
|
24
|
-
return [];
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
19
|
formatRelativeTime(timestamp) {
|
|
28
20
|
try {
|
|
29
21
|
const date = new Date(timestamp);
|
|
@@ -53,10 +45,9 @@ export class AiConversationList {
|
|
|
53
45
|
return (h("div", { class: "skeleton-list" }, [1, 2, 3, 4].map(i => (h("div", { key: i, class: "skeleton-item" }, h("div", { class: "skeleton-line skeleton-line--title" }), h("div", { class: "skeleton-line skeleton-line--preview" }), h("div", { class: "skeleton-line skeleton-line--meta" }))))));
|
|
54
46
|
}
|
|
55
47
|
render() {
|
|
56
|
-
|
|
57
|
-
return (h(Host, { key: '8c3d6b60fbd6fbc9e073d5dcada95a04bf6b22eb' }, h("div", { key: 'e11e29b8fb0247617b00fca7ab5d76bd547efc69', class: "conversation-list" }, h("div", { key: 'a24920fd77797e113fe91c96fe033c8301f01d58', class: "list-scroll", role: "list" }, this.loading
|
|
48
|
+
return (h(Host, { key: 'b67df60c8d758fdf42afec98e4322b3560abc212' }, h("div", { key: '13a7d396f253ba185edb3ad3cc97a7468d5209dc', class: "conversation-list" }, h("div", { key: 'efacc2632ca9ae8b5b3b68f3751b390879517e06', class: "list-scroll", role: "list" }, this.loading
|
|
58
49
|
? this.renderSkeleton()
|
|
59
|
-
:
|
|
50
|
+
: this.items.map(item => {
|
|
60
51
|
const isActive = item.id === this.activeId;
|
|
61
52
|
return (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) }, h("div", { class: "conv-item__body" }, h("p", { class: "conv-item__title" }, item.title), h("p", { class: "conv-item__preview" }, item.preview), h("div", { class: "conv-item__meta" }, h("span", { class: "conv-item__time" }, this.formatRelativeTime(item.timestamp)), item.rating != null && this.renderRatingDots(item.rating))), h("button", { class: "delete-btn", "aria-label": "\u062D\u0630\u0641 \u0627\u0644\u0645\u062D\u0627\u062F\u062B\u0629", onClick: e => {
|
|
62
53
|
e.stopPropagation();
|
|
@@ -79,12 +70,18 @@ export class AiConversationList {
|
|
|
79
70
|
static get properties() {
|
|
80
71
|
return {
|
|
81
72
|
"items": {
|
|
82
|
-
"type": "
|
|
73
|
+
"type": "unknown",
|
|
83
74
|
"mutable": false,
|
|
84
75
|
"complexType": {
|
|
85
|
-
"original": "
|
|
86
|
-
"resolved": "
|
|
87
|
-
"references": {
|
|
76
|
+
"original": "ConversationItem[]",
|
|
77
|
+
"resolved": "ConversationItem[]",
|
|
78
|
+
"references": {
|
|
79
|
+
"ConversationItem": {
|
|
80
|
+
"location": "local",
|
|
81
|
+
"path": "/home/ahmed/Desktop/Salla/Dev/multi-agent/ui-ai-kit/packages/core/src/components/ai-conversation-list/ai-conversation-list.tsx",
|
|
82
|
+
"id": "src/components/ai-conversation-list/ai-conversation-list.tsx::ConversationItem"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
88
85
|
},
|
|
89
86
|
"required": false,
|
|
90
87
|
"optional": false,
|
|
@@ -94,9 +91,7 @@ export class AiConversationList {
|
|
|
94
91
|
},
|
|
95
92
|
"getter": false,
|
|
96
93
|
"setter": false,
|
|
97
|
-
"
|
|
98
|
-
"attribute": "items",
|
|
99
|
-
"defaultValue": "'[]'"
|
|
94
|
+
"defaultValue": "[]"
|
|
100
95
|
},
|
|
101
96
|
"activeId": {
|
|
102
97
|
"type": "string",
|
|
@@ -72,7 +72,7 @@ export class AiLoading {
|
|
|
72
72
|
return (h("div", { class: "steps-card" }, h("div", { class: `steps-header ${this.collapsible ? 'collapsible' : ''}`, onClick: () => this.handleToggle() }, this.renderSparkleAvatar(this.currentAgent || undefined), h("div", { class: "steps-header-center" }, h("span", { class: "steps-title" }, this.headerTitle), headerBadge()), this.collapsible && h("button", { class: `collapse-btn ${this._expanded ? 'expanded' : ''}` }, this.renderIcon('chevron-down', 20, 20))), this._expanded && total === 0 && this.renderPlanningShimmer(), this._expanded && total > 0 && (h("div", { class: "steps-body" }, this.steps.map((step, i) => (h("div", { class: `step-row ${step.status}`, onClick: () => this.stepClick.emit(step) }, h("div", { class: "step-badge-col" }, this.renderStepBadge(step, i), i < this.steps.length - 1 && h("div", { class: "step-separator" })), h("div", { class: "step-content" }, h("span", { class: "step-text" }, step.action), step.reason && h("span", { class: "step-description" }, step.reason)))))))));
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return h(Host, { key: '
|
|
75
|
+
return h(Host, { key: 'f4523c26d9ce0d9bf14b313e4b10cadd2fc2b95f' }, this.mode === 'thinking' ? this.renderThinkingMode() : this.renderStepsMode());
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "ai-loading"; }
|
|
78
78
|
static get encapsulation() { return "shadow"; }
|
|
@@ -31,7 +31,7 @@ export class AiRating {
|
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
33
|
const label = this.selectedLabel;
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: 'b34d22060e8a0dd5af3efec715527638647022d4' }, h("div", { key: 'ebeb552ec0da2f395e57d58b099818ee1eb83c00', class: "rating" }, h("div", { key: 'df43846972875f6ef125caaa471942c223c6a913', class: "rating__text" }, h("p", { key: 'c6041201154f8b79d6c04a215e6b187b1128e3f1', class: "rating__question" }, this.question), h("p", { key: 'f15cf6fc176eb9ef9f278fee8be46f4cfb550cec', class: "rating__subtitle" }, this.subtitle)), h("div", { key: 'f6ce1f6600e05ff3ea8abc684e1d4d9cd773b6e7', class: "rating__icons", role: "group", "aria-label": this.question }, EMOJI_OPTIONS.map(opt => {
|
|
35
35
|
const isActive = this.value === opt.value;
|
|
36
36
|
const isHovered = this.hovered === opt.value;
|
|
37
37
|
return (h("button", { key: opt.value, class: {
|
|
@@ -40,7 +40,7 @@ export class AiRating {
|
|
|
40
40
|
'emoji-btn--hovered': isHovered && !isActive,
|
|
41
41
|
'emoji-btn--disabled': this.disabled,
|
|
42
42
|
}, "aria-label": opt.label, "aria-pressed": isActive ? 'true' : 'false', disabled: this.disabled, onClick: () => this.select(opt.value), onMouseEnter: () => (this.hovered = opt.value), onMouseLeave: () => (this.hovered = null) }, h("span", { class: "emoji-btn__icon", "aria-hidden": "true" }, opt.emoji)));
|
|
43
|
-
})), label && h("p", { key: '
|
|
43
|
+
})), label && h("p", { key: '4d946cca51034b00d8dfc875ac188a6929c8b813', class: "rating__selected-label" }, label))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "ai-rating"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,t as r,H as a,c as i,h as s,d as t}from"./p-CAnlgwx0.js";import{i as o}from"./p-SJZ6Ujn9.js";const
|
|
1
|
+
import{p as e,t as r,H as a,c as i,h as s,d as t}from"./p-CAnlgwx0.js";import{i as o}from"./p-SJZ6Ujn9.js";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.retryClick=i(this,"retryClick"),this.dismissClick=i(this,"dismissClick")}headline="حدث خطأ أثناء التنفيذ";message="";errorCode="";retryable=!0;retryLabel="إعادة المحاولة";dismissible=!1;retryClick;dismissClick;renderIcon(e,r,a){const i=o[e];return i?s("span",{class:"icon-wrap",innerHTML:`<svg width="${r}" height="${a}" viewBox="${i.viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">${i.content}</svg>`}):null}render(){return s(t,{key:"0376a351dfcff6612ddbbf9ec38afd90b51e4a42"},s("div",{key:"4085f93755a8cd3b74ec182ebe510bb8a6626133",class:"error-card"},s("div",{key:"61d42da5ed3d8bbc69cd9604e600437fc241edb0",class:"error-body"},s("div",{key:"0d98c6ad7bfc320164ba5308b8f1f8f5557eccf2",class:"error-icon-wrap"},this.renderIcon("warning",20,20)),s("div",{key:"7b75d807a6227d335b26965cd959471c7ae8f20b",class:"error-content"},s("div",{key:"d46f618bb685bb3ce20ba11fb59f524e4ffe6238",class:"error-headline-row"},s("span",{key:"6ee0b1d651d6a037073e6ad8917b2fe5495d0ee0",class:"error-headline"},this.headline),this.errorCode&&s("span",{key:"b541eee2462ff33791e3975102841845297335d4",class:"error-code-badge"},this.errorCode)),this.message&&s("p",{key:"34d133731a7512ebe16a873bf52eb97120463335",class:"error-message"},this.message)),this.dismissible&&s("button",{key:"0e3bc48998e3e7e2379557e2c6c7503d5c021a42",class:"dismiss-btn","aria-label":"إغلاق",onClick:()=>this.dismissClick.emit()},this.renderIcon("cancel",16,16))),this.retryable&&s("div",{key:"f1865b3e69d946be9833943b66e1b8de046d343d",class:"error-footer"},s("button",{key:"11c72fbbfbaabf60e5da178ac07177185c0046b8",class:"retry-btn",onClick:()=>this.retryClick.emit()},this.renderIcon("reload",16,16),s("span",{key:"fafdec1b9bc0aa727ada94d011bd1e66da53df0e"},this.retryLabel)))))}static get style(){return":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}"}},[513,"ai-agent-error",{headline:[1],message:[1],errorCode:[1,"error-code"],retryable:[4],retryLabel:[1,"retry-label"],dismissible:[4]}]),d=n,c=function(){"undefined"!=typeof customElements&&["ai-agent-error"].forEach((e=>{"ai-agent-error"===e&&(customElements.get(r(e))||customElements.define(r(e),n))}))};export{d as AiAgentError,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,H as d,h as r,d as o,t as i}from"./p-CAnlgwx0.js";const e=a(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}noPadding=!1;noShadow=!1;render(){return r(o,{key:"
|
|
1
|
+
import{p as a,H as d,h as r,d as o,t as i}from"./p-CAnlgwx0.js";const e=a(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}noPadding=!1;noShadow=!1;render(){return r(o,{key:"b9af2e825faa2dc3ba5a0c145a9c9399a75e048a"},r("div",{key:"f698c538583908fc84f4987e574c9f6740047791",class:{card:!0,"card--no-padding":this.noPadding,"card--no-shadow":this.noShadow}},r("slot",{key:"8012eba0a43945d4354f51f97badf87df072e0ea"})))}static get style(){return":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}"}},[769,"ai-card",{noPadding:[4,"no-padding"],noShadow:[4,"no-shadow"]}]),s=e,n=function(){"undefined"!=typeof customElements&&["ai-card"].forEach((a=>{"ai-card"===a&&(customElements.get(i(a))||customElements.define(i(a),e))}))};export{s as AiCard,n as defineCustomElement}
|