@designbasekorea/ui-wc 0.8.12 → 0.9.0
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/CHANGELOG.md +56 -0
- package/LICENSE-PAYMENT-LOGOS.md +437 -0
- package/README.md +61 -23
- package/dist/esm/components/db-achievement-list.d.ts +31 -0
- package/dist/esm/components/db-achievement-list.js +1 -0
- package/dist/esm/components/db-achievement-modal.d.ts +38 -0
- package/dist/esm/components/db-achievement-modal.js +1 -0
- package/dist/esm/components/db-ai-chain-of-thought.d.ts +14 -0
- package/dist/esm/components/db-ai-chain-of-thought.js +1 -0
- package/dist/esm/components/db-ai-chat.js +1 -1
- package/dist/esm/components/db-ai-checkpoint.d.ts +14 -0
- package/dist/esm/components/db-ai-checkpoint.js +1 -0
- package/dist/esm/components/db-ai-confirmation.d.ts +14 -0
- package/dist/esm/components/db-ai-confirmation.js +1 -0
- package/dist/esm/components/db-ai-context.d.ts +15 -0
- package/dist/esm/components/db-ai-context.js +1 -0
- package/dist/esm/components/db-ai-conversation.d.ts +21 -0
- package/dist/esm/components/db-ai-conversation.js +1 -0
- package/dist/esm/components/db-ai-execution-quote.d.ts +41 -0
- package/dist/esm/components/db-ai-execution-quote.js +1 -0
- package/dist/esm/components/db-ai-file-tree.d.ts +14 -0
- package/dist/esm/components/db-ai-file-tree.js +1 -0
- package/dist/esm/components/db-ai-glow.d.ts +1 -1
- package/dist/esm/components/db-ai-inline-citation.d.ts +16 -0
- package/dist/esm/components/db-ai-inline-citation.js +1 -0
- package/dist/esm/components/db-ai-message.d.ts +19 -0
- package/dist/esm/components/db-ai-message.js +1 -0
- package/dist/esm/components/db-ai-model-select.d.ts +36 -0
- package/dist/esm/components/db-ai-model-select.js +1 -0
- package/dist/esm/components/db-ai-plan.d.ts +14 -0
- package/dist/esm/components/db-ai-plan.js +1 -0
- package/dist/esm/components/db-ai-queue.d.ts +14 -0
- package/dist/esm/components/db-ai-queue.js +1 -0
- package/dist/esm/components/db-ai-reasoning.d.ts +14 -0
- package/dist/esm/components/db-ai-reasoning.js +1 -0
- package/dist/esm/components/db-ai-sources.d.ts +14 -0
- package/dist/esm/components/db-ai-sources.js +1 -0
- package/dist/esm/components/db-ai-stack-trace.d.ts +14 -0
- package/dist/esm/components/db-ai-stack-trace.js +1 -0
- package/dist/esm/components/db-ai-subagent.d.ts +14 -0
- package/dist/esm/components/db-ai-subagent.js +1 -0
- package/dist/esm/components/db-ai-task-status.d.ts +26 -0
- package/dist/esm/components/db-ai-task-status.js +1 -0
- package/dist/esm/components/db-ai-task.d.ts +14 -0
- package/dist/esm/components/db-ai-task.js +1 -0
- package/dist/esm/components/db-ai-terminal.d.ts +14 -0
- package/dist/esm/components/db-ai-terminal.js +1 -0
- package/dist/esm/components/db-ai-test-results.d.ts +14 -0
- package/dist/esm/components/db-ai-test-results.js +1 -0
- package/dist/esm/components/db-ai-tool.d.ts +14 -0
- package/dist/esm/components/db-ai-tool.js +1 -0
- package/dist/esm/components/db-attachment-list.d.ts +38 -0
- package/dist/esm/components/db-attachment-list.js +1 -0
- package/dist/esm/components/db-bento-card.d.ts +55 -0
- package/dist/esm/components/db-bento-card.js +1 -0
- package/dist/esm/components/db-bento-grid.d.ts +25 -0
- package/dist/esm/components/db-bento-grid.js +1 -0
- package/dist/esm/components/db-boarding-pass-stack.d.ts +49 -0
- package/dist/esm/components/db-boarding-pass-stack.js +1 -0
- package/dist/esm/components/db-boarding-pass.d.ts +32 -0
- package/dist/esm/components/db-boarding-pass.js +1 -0
- package/dist/esm/components/db-border-beam.d.ts +52 -0
- package/dist/esm/components/db-border-beam.js +1 -0
- package/dist/esm/components/db-button.d.ts +1 -1
- package/dist/esm/components/db-button.js +1 -1
- package/dist/esm/components/db-chat-composer.d.ts +2 -0
- package/dist/esm/components/db-chat-composer.js +1 -1
- package/dist/esm/components/db-chat-message.d.ts +1 -1
- package/dist/esm/components/db-chat-orb.d.ts +1 -1
- package/dist/esm/components/db-chat-widget.d.ts +1 -1
- package/dist/esm/components/db-color-picker.d.ts +1 -0
- package/dist/esm/components/db-color-picker.js +1 -1
- package/dist/esm/components/db-confetti.d.ts +90 -0
- package/dist/esm/components/db-confetti.js +1 -0
- package/dist/esm/components/db-context-bar.d.ts +13 -0
- package/dist/esm/components/db-context-bar.js +1 -0
- package/dist/esm/components/db-credit-balance.d.ts +17 -0
- package/dist/esm/components/db-credit-balance.js +1 -0
- package/dist/esm/components/db-credit-card.d.ts +51 -0
- package/dist/esm/components/db-credit-card.js +1 -0
- package/dist/esm/components/db-credit-dropdown.d.ts +31 -0
- package/dist/esm/components/db-credit-dropdown.js +1 -0
- package/dist/esm/components/db-credit-history.d.ts +31 -0
- package/dist/esm/components/db-credit-history.js +1 -0
- package/dist/esm/components/db-credit-recharge-modal.d.ts +35 -0
- package/dist/esm/components/db-credit-recharge-modal.js +1 -0
- package/dist/esm/components/db-credit-recharge.d.ts +39 -0
- package/dist/esm/components/db-credit-recharge.js +1 -0
- package/dist/esm/components/db-design-canvas.d.ts +137 -0
- package/dist/esm/components/db-design-canvas.js +1 -0
- package/dist/esm/components/db-design-toolbar.d.ts +60 -0
- package/dist/esm/components/db-design-toolbar.js +1 -0
- package/dist/esm/components/db-device-mockup.d.ts +100 -0
- package/dist/esm/components/db-device-mockup.js +1 -0
- package/dist/esm/components/db-download-progress.d.ts +1 -1
- package/dist/esm/components/db-drawer.js +1 -1
- package/dist/esm/components/db-dropdown.d.ts +2 -0
- package/dist/esm/components/db-dropdown.js +1 -1
- package/dist/esm/components/db-email-verify.d.ts +1 -1
- package/dist/esm/components/db-file-uploader.d.ts +10 -0
- package/dist/esm/components/db-filter-bar.d.ts +34 -0
- package/dist/esm/components/db-filter-bar.js +1 -0
- package/dist/esm/components/db-flight-status.d.ts +33 -0
- package/dist/esm/components/db-flight-status.js +1 -0
- package/dist/esm/components/db-floating-action-button.d.ts +24 -14
- package/dist/esm/components/db-floating-action-button.js +1 -1
- package/dist/esm/components/db-footer.d.ts +3 -0
- package/dist/esm/components/db-footer.js +1 -1
- package/dist/esm/components/db-form.js +1 -1
- package/dist/esm/components/db-glyph-matrix.d.ts +58 -0
- package/dist/esm/components/db-glyph-matrix.js +1 -0
- package/dist/esm/components/db-icons.d.ts +1 -1
- package/dist/esm/components/db-icons.js +1 -1
- package/dist/esm/components/db-menu-item.d.ts +2 -0
- package/dist/esm/components/db-menu-item.js +1 -1
- package/dist/esm/components/db-modal.d.ts +1 -1
- package/dist/esm/components/db-modal.js +1 -1
- package/dist/esm/components/db-navbar.d.ts +3 -1
- package/dist/esm/components/db-navbar.js +1 -1
- package/dist/esm/components/db-navigation-rail.d.ts +1 -1
- package/dist/esm/components/db-node.d.ts +83 -0
- package/dist/esm/components/db-node.js +1 -0
- package/dist/esm/components/db-notification-dropdown.d.ts +30 -0
- package/dist/esm/components/db-notification-dropdown.js +1 -0
- package/dist/esm/components/db-notification-inbox.d.ts +25 -0
- package/dist/esm/components/db-notification-inbox.js +1 -0
- package/dist/esm/components/db-otp-input.d.ts +1 -1
- package/dist/esm/components/db-phone-verify.d.ts +1 -1
- package/dist/esm/components/db-plan-overview.d.ts +26 -0
- package/dist/esm/components/db-plan-overview.js +1 -0
- package/dist/esm/components/db-popover.js +1 -1
- package/dist/esm/components/db-progressive-blur.d.ts +35 -0
- package/dist/esm/components/db-progressive-blur.js +1 -0
- package/dist/esm/components/db-receipt.d.ts +37 -0
- package/dist/esm/components/db-receipt.js +1 -0
- package/dist/esm/components/db-search-bar.js +1 -1
- package/dist/esm/components/db-segment-control.js +1 -1
- package/dist/esm/components/db-select.js +1 -1
- package/dist/esm/components/db-sidebar.d.ts +14 -1
- package/dist/esm/components/db-sidebar.js +1 -1
- package/dist/esm/components/db-split-view.d.ts +2 -0
- package/dist/esm/components/db-split-view.js +1 -1
- package/dist/esm/components/db-textarea.js +1 -1
- package/dist/esm/components/db-ticket.d.ts +18 -0
- package/dist/esm/components/db-ticket.js +1 -0
- package/dist/esm/components/db-time-picker.d.ts +1 -1
- package/dist/esm/components/db-tool-button.d.ts +57 -0
- package/dist/esm/components/db-tool-button.js +1 -0
- package/dist/esm/components/db-tweet-card.d.ts +101 -0
- package/dist/esm/components/db-tweet-card.js +1 -0
- package/dist/esm/components/db-two-factor.d.ts +1 -1
- package/dist/esm/components/db-voice-control.d.ts +25 -0
- package/dist/esm/components/db-voice-control.js +1 -0
- package/dist/esm/components/db-workspace-invite-modal.d.ts +51 -0
- package/dist/esm/components/db-workspace-invite-modal.js +1 -0
- package/dist/esm/components/db-workspace-members.d.ts +36 -0
- package/dist/esm/components/db-workspace-members.js +1 -0
- package/dist/esm/components/device-mockup-style.js +1 -0
- package/dist/esm/components/flight-route.js +1 -0
- package/dist/esm/components/node-style.js +1 -0
- package/dist/esm/components/paper-card.d.ts +26 -0
- package/dist/esm/components/paper-card.js +1 -0
- package/dist/esm/components/random-gradient-palettes.d.ts +4 -0
- package/dist/esm/core/ai-element.d.ts +47 -0
- package/dist/esm/core/ai-element.js +1 -0
- package/dist/esm/core/credit-ui.js +1 -0
- package/dist/esm/core/i18n.d.ts +153 -0
- package/dist/esm/core/i18n.js +1 -1
- package/dist/esm/core/notification-ui.d.ts +17 -0
- package/dist/esm/core/notification-ui.js +1 -0
- package/dist/esm/helpers/payment-brands.d.ts +56 -0
- package/dist/esm/helpers/payment-brands.js +1 -0
- package/dist/esm/helpers/toast.d.ts +2 -3
- package/dist/esm/index.d.ts +62 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/node_modules/@designbasekorea/ui-contracts/dist/components.js +1 -1
- package/dist/esm/ui-contracts/dist/components.d.d.ts +76 -0
- package/dist/esm/ui-contracts/dist/primitives.d.d.ts +21 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2149 -23
- package/dist/index.esm.js +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.ts +786 -6727
- package/dist/react/index.esm.js +1 -1
- package/package.json +13 -7
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import { DbAchievementItem } from './db-achievement-list.js';
|
|
3
|
+
import './db-modal.js';
|
|
4
|
+
import './db-confetti.js';
|
|
5
|
+
import './db-button.js';
|
|
6
|
+
|
|
7
|
+
/** Controlled presentation; no award or receipt writes. Effects stay inside this modal. */
|
|
8
|
+
declare class DbAchievementModal extends DbElement {
|
|
9
|
+
private data;
|
|
10
|
+
private modal?;
|
|
11
|
+
private body?;
|
|
12
|
+
private confetti?;
|
|
13
|
+
private frame;
|
|
14
|
+
private viewKey;
|
|
15
|
+
private presentationKey;
|
|
16
|
+
private readonly descriptionId;
|
|
17
|
+
private readonly headingId;
|
|
18
|
+
static get observedAttributes(): string[];
|
|
19
|
+
get items(): DbAchievementItem[];
|
|
20
|
+
set items(value: DbAchievementItem[]);
|
|
21
|
+
get open(): boolean;
|
|
22
|
+
set open(value: boolean);
|
|
23
|
+
connectedCallback(): void;
|
|
24
|
+
disconnectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(): void;
|
|
26
|
+
private dismiss;
|
|
27
|
+
private stopEffects;
|
|
28
|
+
private ensureView;
|
|
29
|
+
private stage;
|
|
30
|
+
private sync;
|
|
31
|
+
}
|
|
32
|
+
declare global {
|
|
33
|
+
interface HTMLElementTagNameMap {
|
|
34
|
+
'db-achievement-modal': DbAchievementModal;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { DbAchievementModal };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditAction as i,replaceView as s}from"../core/credit-ui.js";import{dbUid as a}from"../core/uid.js";import{achievementItems as n,achievementMedallion as o}from"./db-achievement-list.js";import"./db-modal.js";import"./db-confetti.js";import"./db-button.js";class DbAchievementModal extends t{constructor(){super(...arguments),this.data=[],this.frame=null,this.viewKey="",this.presentationKey="",this.descriptionId=a("achievement-description"),this.headingId=a("achievement-heading")}static get observedAttributes(){return["open","mode","loading","error","confirm-label"]}get items(){return this.data.map(t=>({...t}))}set items(t){this.data=n(t),this.isConnected&&this.sync()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){this.toggleAttribute("open",t)}connectedCallback(){this.upgradeProperties(["items","open"]),this.ensureView(),this.cleanups.listen(this.modal,"db-close",t=>{t.stopPropagation(),this.dismiss(),queueMicrotask(()=>{this.isConnected&&this.open&&this.modal&&!this.modal.open&&(this.modal.open=!0)})}),this.cleanups.listen(this.body,"db-click",t=>{t.target instanceof HTMLElement&&["acknowledge","dismiss"].includes(t.target.dataset.action||"")&&this.dismiss()}),this.cleanups.listen(window.matchMedia("(prefers-reduced-motion: reduce)"),"change",()=>{this.stopEffects(),this.viewKey="",this.sync()}),this.sync()}disconnectedCallback(){this.stopEffects(),this.modal?.remove(),this.modal=void 0,this.viewKey="",this.presentationKey="",super.disconnectedCallback()}attributeChangedCallback(){this.isConnected&&this.sync()}dismiss(){!this.hasAttribute("loading")&&this.open&&this.dbEmit("dismiss",{ids:this.data.map(t=>t.id)})}stopEffects(){null!==this.frame&&cancelAnimationFrame(this.frame),this.frame=null,this.confetti?.remove(),this.confetti=void 0}ensureView(){this.modal||(this.modal=document.createElement("db-modal"),this.modal.setAttribute("size","s"),this.body=e("div","designbase-wc-achievement-modal__body",""),this.body.setAttribute("data-modal-part","body"),this.modal.append(this.body),this.append(this.modal))}stage(t){const i=e("div","designbase-wc-achievement-modal__stage","");i.setAttribute("aria-hidden","true"),this.open&&"earned"===t.state&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches&&(this.confetti=document.createElement("db-confetti"),this.confetti.setAttribute("trigger","manual"),i.append(this.confetti));const s=e("div","designbase-wc-achievement-modal__coin","");s.dataset.state=t.state;for(let t=-5;t<=5;t++){const i=e("span","designbase-wc-achievement-modal__edge","");i.style.transform=`translateZ(${t}px)`,s.append(i)}const a=o(t);a.classList.add("designbase-wc-achievement-modal__face","designbase-wc-achievement-modal__face--front");const n=o(t);return n.classList.add("designbase-wc-achievement-modal__face","designbase-wc-achievement-modal__face--back"),s.append(a,n),i.append(s),i}sync(){if(!this.modal||!this.body)return;const t=this.data[0],a="detail"!==this.getAttribute("mode");this.modal.removeAttribute("title"),this.modal.setAttribute("describedby",this.descriptionId),this.modal.setAttribute("show-close-button","false");for(const t of["close-on-escape","close-on-outside-click"])this.modal.setAttribute(t,String(!this.hasAttribute("loading")));const n=JSON.stringify([this.data,a,this.open,this.hasAttribute("loading"),this.getAttribute("error"),this.getAttribute("confirm-label")]);if(n!==this.viewKey){this.viewKey=n,this.stopEffects();const o=document.createElement("div"),d=i("dismiss","",this.hasAttribute("loading"));if(d.classList.add("designbase-wc-achievement-modal__close"),d.setAttribute("variant","ghost"),d.setAttribute("start-icon","close"),d.setAttribute("icon-only",""),d.setAttribute("aria-label","모달 닫기"),o.append(d),t){o.append(this.stage(t),e("span","designbase-wc-achievement-modal__eyebrow","locked"===t.state?"아직 획득하지 못한 뱃지":"needs_review"===t.state?"기록 확인 필요":a?"새로운 순간을 모았어요":"나의 컬렉션"));const i=e("h3","",t.title);i.id=this.headingId,o.append(i);const s=e("p","designbase-wc-achievement-modal__description",t.description);if(s.id=this.descriptionId,o.append(s),t.earnedLabel&&"earned"===t.state&&o.append(e("p","designbase-wc-achievement-list__date",t.earnedLabel)),this.data.length>1){const t=e("div","designbase-wc-achievement-modal__related","함께 받은 뱃지 "+(this.data.length-1)+"개");for(const i of this.data.slice(1))t.append(e("span","",i.title));o.append(t)}}else{const t=e("p","","표시할 뱃지가 없어요");t.id=this.descriptionId,o.append(t)}const c=e("p","designbase-wc-achievement-modal__error",this.getAttribute("error")||"");c.setAttribute("role","alert"),c.hidden=!c.textContent,o.append(c);const r=this.getAttribute("confirm-label")||("locked"===t?.state?"아직 획득하지 못했어요":"확인"),h=i("acknowledge",r,this.hasAttribute("loading"));h.setAttribute("variant","locked"===t?.state?"secondary":"primary"),h.setAttribute("size","m"),h.toggleAttribute("loading",this.hasAttribute("loading")),o.append(h),s(this.body,...Array.from(o.childNodes))}this.modal.open!==this.open&&(this.modal.open=this.open);const o=this.body.closest('[role="dialog"]');o?.classList.add("designbase-wc-achievement-modal__panel"),t&&o?.setAttribute("aria-labelledby",this.headingId);const d=JSON.stringify([this.data.map(t=>[t.id,t.state]),a]);this.open?this.presentationKey!==d&&(this.presentationKey=d,this.frame=requestAnimationFrame(()=>{if(this.frame=null,this.open&&this.isConnected&&this.confetti)for(const[t,e]of[[.08,65],[.92,115]])this.confetti.fire({particleCount:42,origin:{x:t,y:.88},angle:e,spread:75,startVelocity:26,ticks:140,scalar:.75,disableForReducedMotion:!0})})):(this.presentationKey="",this.stopEffects())}}customElements.get("db-achievement-modal")||customElements.define("db-achievement-modal",DbAchievementModal);export{DbAchievementModal};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: chain-of-thought. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiChainOfThought extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-chain-of-thought': DbAiChainOfThought;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiChainOfThought };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiChainOfThought extends t{static get observedAttributes(){return["items","label","status","open"]}view(){const t=e("div","designbase-wc-ai__timeline","");return t.append(...this.rows.map(t=>this.itemLine(t))),[this.disclosure("root",this.attr("label","running"===this.state?"researching":"researched"),this.state,[t],this.hasAttribute("open")||"running"===this.state)]}}customElements.get("db-ai-chain-of-thought")||customElements.define("db-ai-chain-of-thought",DbAiChainOfThought);export{DbAiChainOfThought};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHtmlFragment as i}from"../core/safe-html.js";const s="designbase-wc-ai-chat";let a=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${a+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?"voice"!==t&&"attach"!==t?"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.syncComposerToggles():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(s),this.replaceChildren(),this.mainEl=el("div",`${s}__main`),this.scrollEl=el("div",`${s}__scroll`),this.dockEl=el("div",`${s}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${s}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${s}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${s}__artifact-panel`),i=el("div",`${s}__artifact-header`),a=el("div",`${s}__artifact-titles`);this.artifactTitleEl=el("div",`${s}__artifact-title`),this.artifactSubtitleEl=el("div",`${s}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${s}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),i.append(a,r),this.artifactBodyEl=el("div",`${s}__artifact-body`),e.append(i,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${s}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${s}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${s}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${s}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${s}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${s}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${s}__turn`);e.dataset.id=t.id||"";const a=el("db-chat-message");return a.dataset.id=t.id||"",a.setAttribute("role",t.role||"assistant"),t.name&&a.setAttribute("name",t.name),t.time&&a.setAttribute("timestamp",t.time),t.avatarSrc&&a.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&a.setAttribute("avatar-initials",t.avatarInitials),t.actions&&a.setAttribute("actions",t.actions),t.status&&a.setAttribute("status",t.status),t.variant&&a.setAttribute("variant",t.variant),null!=t.html?a.replaceChildren(i(t.html)):a.textContent=t.text||"",a.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(a),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(i){const a=this.ensureArtifactId(i),r=el("button",`${s}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${i.title} 아티팩트 열기`);const n=el("span",`${s}__artifact-card-icon`),c=i.icon&&e(i.icon)?i.icon:"code";n.append(t(c,18));const l=el("div",`${s}__artifact-card-meta`);l.append(el("div",`${s}__artifact-card-title`,i.title)),i.subtitle&&l.append(el("div",`${s}__artifact-card-subtitle`,i.subtitle));const o=el("span",`${s}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(n,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(i)),r}syncArtifactCardStates(){this.querySelectorAll(`.${s}__artifact-card`).forEach(t=>{const e=t,i=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${s}__artifact-card--active`,i),e.setAttribute("aria-pressed",String(i))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${s}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${s}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${a+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const a=this._messages.find(e=>e.id===t);if(!a)return;Object.assign(a,e);const r=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!r)return;const n=r.querySelector(".designbase-wc-chat-message__content");if(!n||null==e.html&&null==e.text||(null!=e.html?n.replaceChildren(i(e.html)):n.textContent=e.text||""),e.status&&r.setAttribute("status",e.status),void 0!==e.artifact){const t=r.closest(`.${s}__turn`)||r.parentElement;t?.querySelector(`.${s}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&this.artifactBodyEl.replaceChildren(i(t.html)),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};
|
|
1
|
+
import"./db-chat-welcome.js";import"./db-chat-suggestions.js";import"./db-chat-message.js";import"./db-chat-typing.js";import"./db-chat-composer.js";import{createDbIcon as t,isDbIconName as e}from"./db-icons.js";import{sanitizeHtmlFragment as i}from"../core/safe-html.js";const s="designbase-wc-ai-chat";let a=0;function el(t,e,i){const s=document.createElement(t);return e&&(s.className=e),null!=i&&(s.textContent=i),s}class DbAiChat extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.typing=!1,this._messages=[],this._suggestions=[],this._tools=[],this._attachOptions=null,this.threadEl=null,this.activeArtifactId=null,this.artifactSeq=0,this.onSend=t=>{t.stopPropagation();const e=t.detail;this.dispatchEvent(new CustomEvent("db-send",{detail:e,bubbles:!0,composed:!0}))},this.onSuggestionSelect=t=>{t.stopPropagation();const e=t.detail,i=new CustomEvent("db-suggestion-select",{detail:e,bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(i)&&(this.composer.value=e.value,this.composer.focusInput())}}static get observedAttributes(){return["greeting","title","highlight","subtitle","placeholder","orb-variant","suggestions-layout","suggestions-columns","disclaimer","voice","voice-state","voice-message","voice-disabled","attach","max-width","artifact-open","artifact-title"]}set messages(t){this._messages=Array.isArray(t)?t.map(t=>({id:`m${a+=1}`,...t})):[],this.built&&this.renderContent()}get messages(){return this._messages}set suggestions(t){this._suggestions=Array.isArray(t)?t:[],this.built&&0===this._messages.length&&this.renderContent()}get suggestions(){return this._suggestions}set tools(t){this._tools=Array.isArray(t)?t:[],this.built&&(this.composer.tools=this._tools)}get tools(){return this._tools}set attachOptions(t){this._attachOptions=Array.isArray(t)?t:null,this.built&&this._attachOptions&&(this.composer.attachOptions=this._attachOptions)}get attachOptions(){return this._attachOptions??this.composer?.attachOptions??[]}connectedCallback(){this.built||this.build(),this.sync()}attributeChangedCallback(t){this.built&&("placeholder"!==t?["voice","attach","voice-state","voice-message","voice-disabled"].includes(t)?this.syncComposerToggles():"disclaimer"!==t?"artifact-open"!==t?"artifact-title"!==t?this.sync():this.artifactTitleEl.textContent=this.getAttribute("artifact-title")||"":this.syncArtifact(!0):this.renderDock():this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||""))}build(){this.built=!0,this.classList.add(s),this.replaceChildren(),this.mainEl=el("div",`${s}__main`),this.scrollEl=el("div",`${s}__scroll`),this.dockEl=el("div",`${s}__dock`),this.composer=document.createElement("db-chat-composer"),this.composer.className=`${s}__composer`,this.composer.addEventListener("db-send",this.onSend),this.composer.addEventListener("db-stop",t=>this.relay(t,"db-stop")),this.composer.addEventListener("db-tool-toggle",t=>this.relay(t,"db-tool-toggle")),this.composer.addEventListener("db-attach",t=>this.relay(t,"db-attach")),this.composer.addEventListener("db-attach-files",t=>this.relay(t,"db-attach-files")),this.composer.addEventListener("db-voice",t=>this.relay(t,"db-voice")),this.mainEl.append(this.scrollEl,this.dockEl),this.buildArtifact(),this.append(this.mainEl,this.artifactEl)}buildArtifact(){this.artifactEl=el("aside",`${s}__artifact`),this.artifactEl.setAttribute("aria-hidden","true");const e=el("div",`${s}__artifact-panel`),i=el("div",`${s}__artifact-header`),a=el("div",`${s}__artifact-titles`);this.artifactTitleEl=el("div",`${s}__artifact-title`),this.artifactSubtitleEl=el("div",`${s}__artifact-subtitle`),this.artifactSubtitleEl.hidden=!0,a.append(this.artifactTitleEl,this.artifactSubtitleEl);const r=el("button",`${s}__artifact-close`);r.type="button",r.setAttribute("aria-label","아티팩트 닫기"),r.append(t("close",18)),r.addEventListener("click",()=>this.closeArtifact()),i.append(a,r),this.artifactBodyEl=el("div",`${s}__artifact-body`),e.append(i,this.artifactBodyEl),this.artifactEl.append(e)}sync(){const t=this.getAttribute("max-width")||"100%";this.style.setProperty("--dbchat-max",t),this.syncComposerToggles(),this.composer.setAttribute("placeholder",this.getAttribute("placeholder")||"무엇이든 물어보세요…"),this._tools.length&&(this.composer.tools=this._tools),this._attachOptions&&(this.composer.attachOptions=this._attachOptions);const e=this.getAttribute("artifact-title");null!=e&&(this.artifactTitleEl.textContent=e),this.renderContent(),this.renderDock(),this.syncArtifact(!1)}syncArtifact(t){const e=this.hasAttribute("artifact-open");this.classList.toggle(`${s}--artifact-open`,e),this.artifactEl.setAttribute("aria-hidden",String(!e)),this.artifactEl.toggleAttribute("inert",!e),e||(this.activeArtifactId=null),this.syncArtifactCardStates(),t&&this.dispatchEvent(new CustomEvent(e?"db-artifact-open":"db-artifact-close",{detail:e?{id:this.activeArtifactId}:{id:null},bubbles:!0,composed:!0}))}syncComposerToggles(){this.composer.toggleAttribute("voice",this.hasAttribute("voice")),this.composer.setAttribute("voice-state",this.getAttribute("voice-state")||"idle"),this.composer.setAttribute("voice-message",this.getAttribute("voice-message")||""),this.composer.toggleAttribute("voice-disabled",this.hasAttribute("voice-disabled")),this.composer.toggleAttribute("attach","false"!==this.getAttribute("attach"))}renderContent(){this.scrollEl.replaceChildren(),this.threadEl=null;const t=0===this._messages.length;this.classList.toggle(`${s}--empty`,t),t?this.renderHero():this.renderThread()}renderHero(){const t=el("div",`${s}__hero`),e=document.createElement("db-chat-welcome");if(e.className=`${s}__welcome`,this.getAttribute("greeting")&&e.setAttribute("greeting",this.getAttribute("greeting")),e.setAttribute("title",this.getAttribute("title")||"무엇을 도와드릴까요?"),this.getAttribute("highlight")&&e.setAttribute("highlight",this.getAttribute("highlight")),this.getAttribute("subtitle")&&e.setAttribute("subtitle",this.getAttribute("subtitle")),e.setAttribute("orb-variant",this.getAttribute("orb-variant")||"aurora"),e.setAttribute("align","center"),t.append(e),this._suggestions.length){const e=document.createElement("db-chat-suggestions");e.className=`${s}__suggestions`,e.setAttribute("layout",this.getAttribute("suggestions-layout")||"card"),e.setAttribute("columns",this.getAttribute("suggestions-columns")||"3"),e.items=this._suggestions,e.addEventListener("db-select",this.onSuggestionSelect),t.append(e)}this.scrollEl.append(t)}renderThread(){const t=el("div",`${s}__thread`);this._messages.forEach(e=>t.append(this.buildMessage(e))),this.threadEl=t,this.scrollEl.append(t),this.typing&&t.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())}buildMessage(t){const e=el("div",`${s}__turn`);e.dataset.id=t.id||"";const a=el("db-chat-message");return a.dataset.id=t.id||"",a.setAttribute("role",t.role||"assistant"),t.name&&a.setAttribute("name",t.name),t.time&&a.setAttribute("timestamp",t.time),t.avatarSrc&&a.setAttribute("avatar-src",t.avatarSrc),t.avatarInitials&&a.setAttribute("avatar-initials",t.avatarInitials),t.actions&&a.setAttribute("actions",t.actions),t.status&&a.setAttribute("status",t.status),t.variant&&a.setAttribute("variant",t.variant),null!=t.html?a.replaceChildren(i(t.html)):a.textContent=t.text||"",a.addEventListener("db-action",t=>this.relay(t,"db-message-action")),e.append(a),t.artifact&&(this.ensureArtifactId(t.artifact),e.append(this.buildArtifactCard(t.artifact))),e}ensureArtifactId(t){return t.id||(t.id=`art-${this.artifactSeq+=1}`),t.id}buildArtifactCard(i){const a=this.ensureArtifactId(i),r=el("button",`${s}__artifact-card`);r.type="button",r.dataset.artifactId=a,r.setAttribute("aria-pressed","false"),r.setAttribute("aria-label",`${i.title} 아티팩트 열기`);const c=el("span",`${s}__artifact-card-icon`),n=i.icon&&e(i.icon)?i.icon:"code";c.append(t(n,18));const l=el("div",`${s}__artifact-card-meta`);l.append(el("div",`${s}__artifact-card-title`,i.title)),i.subtitle&&l.append(el("div",`${s}__artifact-card-subtitle`,i.subtitle));const o=el("span",`${s}__artifact-card-chevron`);return o.append(t("chevron-right",16)),r.append(c,l,o),r.addEventListener("click",()=>this.toggleArtifactFromCard(i)),r}syncArtifactCardStates(){this.querySelectorAll(`.${s}__artifact-card`).forEach(t=>{const e=t,i=this.artifactOpen&&e.dataset.artifactId===this.activeArtifactId;e.classList.toggle(`${s}__artifact-card--active`,i),e.setAttribute("aria-pressed",String(i))})}toggleArtifactFromCard(t){const e=this.ensureArtifactId(t);this.artifactOpen&&this.activeArtifactId===e?this.closeArtifact():this.openArtifact({id:e,title:t.title,subtitle:t.subtitle,html:t.html})}buildTyping(){const t=el("db-chat-typing",`${s}__typing`),e=this.getAttribute("title")||"AI";return t.setAttribute("name",this.getAttribute("agent-name")||e),t.setAttribute("label","생각 중…"),t.setAttribute("avatar-initials","AI"),t}renderDock(){this.dockEl.replaceChildren(),this.dockEl.append(this.composer);const t=this.getAttribute("disclaimer");t&&this.dockEl.append(el("p",`${s}__disclaimer`,t))}relay(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent(e,{detail:t.detail,bubbles:!0,composed:!0}))}scrollToEnd(){this.scrollEl.scrollTop=this.scrollEl.scrollHeight}addMessage(t){const e={id:`m${a+=1}`,...t},i=0===this._messages.length;if(this._messages.push(e),i||!this.threadEl)this.renderContent();else{const t=this.threadEl.querySelector("db-chat-typing"),i=this.buildMessage(e);t?this.threadEl.insertBefore(i,t):this.threadEl.append(i),requestAnimationFrame(()=>this.scrollToEnd())}return e.id}updateMessage(t,e){const a=this._messages.find(e=>e.id===t);if(!a)return;Object.assign(a,e);const r=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`);if(!r)return;const c=r.querySelector(".designbase-wc-chat-message__content");if(!c||null==e.html&&null==e.text||(null!=e.html?c.replaceChildren(i(e.html)):c.textContent=e.text||""),e.status&&r.setAttribute("status",e.status),void 0!==e.artifact){const t=r.closest(`.${s}__turn`)||r.parentElement;t?.querySelector(`.${s}__artifact-card`)?.remove(),e.artifact&&t&&(this.ensureArtifactId(e.artifact),t.append(this.buildArtifactCard(e.artifact)),this.syncArtifactCardStates())}requestAnimationFrame(()=>this.scrollToEnd())}appendToMessage(t,e){const i=this._messages.find(e=>e.id===t);if(!i)return;i.text=(i.text||"")+e;const s=this.threadEl?.querySelector(`db-chat-message[data-id="${t}"]`),a=s?.querySelector(".designbase-wc-chat-message__content");a&&(a.textContent=i.text),requestAnimationFrame(()=>this.scrollToEnd())}setMessages(t){this.messages=t}clear(){this._messages=[],this.typing=!1,this.closeArtifact(),this.built&&this.renderContent()}setTyping(t){if(this.typing=Boolean(t),!this.built||!this.threadEl)return;const e=this.threadEl.querySelector("db-chat-typing");this.typing&&!e?(this.threadEl.append(this.buildTyping()),requestAnimationFrame(()=>this.scrollToEnd())):!this.typing&&e&&e.remove()}setStreaming(t){this.composer?.setStreaming(Boolean(t))}focusInput(){this.composer?.focusInput()}getComposer(){return this.composer}get artifactOpen(){return this.hasAttribute("artifact-open")}set artifactOpen(t){this.toggleAttribute("artifact-open",t)}openArtifact(t={}){null!=t.title&&(this.artifactTitleEl.textContent=t.title),null!=t.subtitle&&(this.artifactSubtitleEl.textContent=t.subtitle,this.artifactSubtitleEl.hidden=!t.subtitle),null!=t.html&&this.artifactBodyEl.replaceChildren(i(t.html)),null!=t.id&&(this.activeArtifactId=t.id);const e=this.artifactOpen;this.artifactOpen=!0,e&&this.syncArtifactCardStates()}closeArtifact(){this.activeArtifactId=null;const t=this.artifactOpen;this.artifactOpen=!1,t||this.syncArtifactCardStates()}toggleArtifact(){this.artifactOpen?this.closeArtifact():this.artifactOpen=!0}getArtifactBody(){return this.artifactBodyEl}setArtifactContent(t){this.artifactBodyEl.replaceChildren(t)}}customElements.get("db-ai-chat")||customElements.define("db-ai-chat",DbAiChat);export{DbAiChat};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: checkpoint. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiCheckpoint extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-checkpoint': DbAiCheckpoint;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiCheckpoint };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as t,aiIcon as i}from"../core/ai-element.js";class DbAiCheckpoint extends e{static get observedAttributes(){return["item-id","label","action-label","disabled"]}view(){const e=t("div","designbase-wc-ai__checkpoint","");return e.append(i("clock"),t("span","designbase-wc-ai__label",this.attr("label","checkpoint")),this.button("restore",this.attr("action-label","restore"),"refresh")),[e]}}customElements.get("db-ai-checkpoint")||customElements.define("db-ai-checkpoint",DbAiCheckpoint);export{DbAiCheckpoint};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: confirmation. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiConfirmation extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-confirmation': DbAiConfirmation;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiConfirmation };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as t,aiCode as i}from"../core/ai-element.js";import{t as a}from"../core/i18n.js";class DbAiConfirmation extends e{static get observedAttributes(){return["item-id","label","description","code","language","decision","disabled"]}view(){const e=t("div","designbase-wc-ai__approval","");e.append(this.itemLine({id:"request",label:this.attr("label","confirmation"),status:"approval"})),this.attr("description")&&e.append(t("p","designbase-wc-ai__description",this.attr("description"))),this.attr("code")&&e.append(i(this.attr("code"),this.attr("language")||"text"));const n=this.attr("decision");if("accepted"===n||"rejected"===n)e.append(t("p","designbase-wc-ai__decision",a(`aiElement.${n}`)));else{const i=t("div","designbase-wc-ai__actions",""),n=this.button("confirm",a("aiElement.allow"),"done");n.setAttribute("variant","primary"),i.append(this.button("reject",a("aiElement.reject"),"close"),n),e.append(i)}return[e]}}customElements.get("db-ai-confirmation")||customElements.define("db-ai-confirmation",DbAiConfirmation);export{DbAiConfirmation};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
import './db-progressbar.js';
|
|
3
|
+
|
|
4
|
+
/** AI Elements: context. App-owned data and actions; no provider calls. */
|
|
5
|
+
declare class DbAiContext extends DbAiDataElement {
|
|
6
|
+
static get observedAttributes(): string[];
|
|
7
|
+
protected view(): Node[];
|
|
8
|
+
}
|
|
9
|
+
declare global {
|
|
10
|
+
interface HTMLElementTagNameMap {
|
|
11
|
+
'db-ai-context': DbAiContext;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { DbAiContext };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";import"./db-progressbar.js";class DbAiContext extends t{static get observedAttributes(){return["items","label","used","limit","cost-label","open"]}view(){const t=Number(this.getAttribute("used")),s=Number(this.getAttribute("limit")),n=this.hasAttribute("used")&&this.hasAttribute("limit")&&Number.isFinite(t)&&Number.isFinite(s)&&t>=0&&s>0,o=n?Math.min(100,Math.round(t/s*100)):null,r=e("div","designbase-wc-ai__context-body","");if(n){const n=document.createElement("db-progressbar");n.setAttribute("value",String(o)),n.setAttribute("label",this.attr("label","context")),n.setAttribute("full-width",""),r.append(n),r.append(e("p","designbase-wc-ai__description",`${t.toLocaleString()} / ${s.toLocaleString()} ${i("aiElement.tokens")}`))}else r.append(e("p","designbase-wc-ai__description",i("aiElement.unknown")));for(const t of this.rows)r.append(this.itemLine(t));return this.attr("cost-label")&&r.append(e("p","designbase-wc-ai__description",this.attr("cost-label"))),[this.disclosure("root",`${this.attr("label","context")} · ${null===o?"—":`${o}%`}`,"complete",[r],this.hasAttribute("open"),"doughnut-chart")]}}customElements.get("db-ai-context")||customElements.define("db-ai-context",DbAiContext);export{DbAiContext};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import './db-button.js';
|
|
3
|
+
|
|
4
|
+
/** Follows updates only at the live edge. Reading older content never forces a jump. */
|
|
5
|
+
declare class DbAiConversation extends DbElement {
|
|
6
|
+
static get observedAttributes(): string[];
|
|
7
|
+
private viewport?;
|
|
8
|
+
private jump?;
|
|
9
|
+
private atEnd;
|
|
10
|
+
connectedCallback(): void;
|
|
11
|
+
attributeChangedCallback(): void;
|
|
12
|
+
private toEnd;
|
|
13
|
+
private sync;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface HTMLElementTagNameMap {
|
|
17
|
+
'db-ai-conversation': DbAiConversation;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { DbAiConversation };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as t}from"../core/base-element.js";import{aiNode as i}from"../core/ai-element.js";import{t as e}from"../core/i18n.js";import"./db-button.js";class DbAiConversation extends t{constructor(){super(...arguments),this.atEnd=!0}static get observedAttributes(){return["label","auto-scroll"]}connectedCallback(){if(!this.viewport){this.classList.add("designbase-wc-ai","designbase-wc-ai-conversation");const t=this.querySelector(":scope > [data-ai-conversation-content]");this.viewport=t||i("div","designbase-wc-ai-conversation__viewport",""),this.viewport.classList.add("designbase-wc-ai-conversation__viewport"),this.viewport.setAttribute("role","log"),this.viewport.setAttribute("aria-live","polite"),this.viewport.tabIndex=0,t||this.viewport.append(...Array.from(this.childNodes)),this.jump=document.createElement("db-button"),this.jump.setAttribute("size","s"),this.jump.setAttribute("variant","secondary"),this.jump.setAttribute("start-icon","chevron-down"),this.jump.textContent=e("aiElement.latest"),this.jump.hidden=!0,this.append(this.viewport,this.jump)}this.cleanups.listen(this.viewport,"scroll",()=>{this.atEnd=this.viewport.scrollHeight-this.viewport.scrollTop-this.viewport.clientHeight<48,this.jump.hidden=this.atEnd}),this.cleanups.listen(this.jump,"db-click",()=>this.toEnd());const t=new MutationObserver(()=>{this.atEnd&&this.hasAttribute("auto-scroll")?this.toEnd():this.jump.hidden=this.atEnd});t.observe(this.viewport,{childList:!0,subtree:!0,characterData:!0}),this.cleanups.add(()=>t.disconnect());const s=new MutationObserver(t=>{for(const i of t)for(const t of i.addedNodes)t.parentNode===this&&t!==this.viewport&&t!==this.jump&&this.viewport.append(t)});s.observe(this,{childList:!0}),this.cleanups.add(()=>s.disconnect()),this.sync()}attributeChangedCallback(){this.sync()}toEnd(){this.viewport&&(this.viewport.scrollTop=this.viewport.scrollHeight,this.atEnd=!0,this.jump.hidden=!0)}sync(){this.viewport?.setAttribute("aria-label",this.getAttribute("label")||e("aiElement.conversation"))}}customElements.get("db-ai-conversation")||customElements.define("db-ai-conversation",DbAiConversation);export{DbAiConversation};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import './db-button.js';
|
|
3
|
+
|
|
4
|
+
interface DbAiQuoteView {
|
|
5
|
+
id: string;
|
|
6
|
+
modelId: string;
|
|
7
|
+
reservedCredits: number;
|
|
8
|
+
pricingVersion: string;
|
|
9
|
+
expiresAt: string;
|
|
10
|
+
/** Product-formatted deadline; expiresAt remains authoritative for UI expiry. */
|
|
11
|
+
expiresLabel?: string;
|
|
12
|
+
/** Already formatted by the app. Omit when provider cost is unknown. */
|
|
13
|
+
providerCostLabel?: string;
|
|
14
|
+
}
|
|
15
|
+
interface DbAiQuoteExecution {
|
|
16
|
+
quoteId: string;
|
|
17
|
+
modelId: string;
|
|
18
|
+
}
|
|
19
|
+
/** Displays a server quote and emits intent. No reservations, API requests or price calculation. */
|
|
20
|
+
declare class DbAiExecutionQuote extends DbElement {
|
|
21
|
+
private quoteData;
|
|
22
|
+
private expiryTimer?;
|
|
23
|
+
static get observedAttributes(): string[];
|
|
24
|
+
get quote(): DbAiQuoteView | null;
|
|
25
|
+
set quote(value: DbAiQuoteView | null);
|
|
26
|
+
connectedCallback(): void;
|
|
27
|
+
disconnectedCallback(): void;
|
|
28
|
+
attributeChangedCallback(): void;
|
|
29
|
+
private busy;
|
|
30
|
+
private expired;
|
|
31
|
+
private canExecute;
|
|
32
|
+
private render;
|
|
33
|
+
}
|
|
34
|
+
declare global {
|
|
35
|
+
interface HTMLElementTagNameMap {
|
|
36
|
+
'db-ai-execution-quote': DbAiExecutionQuote;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { DbAiExecutionQuote };
|
|
41
|
+
export type { DbAiQuoteExecution, DbAiQuoteView };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as t}from"../core/base-element.js";import{creditNumber as e,textNode as i,creditText as s,creditAction as r,replaceView as a}from"../core/credit-ui.js";import{t as o}from"../core/i18n.js";import"./db-button.js";class DbAiExecutionQuote extends t{constructor(){super(...arguments),this.quoteData=null}static get observedAttributes(){return["available","label","unit","loading","executing","disabled","stale","error"]}get quote(){return this.quoteData?{...this.quoteData}:null}set quote(t){this.quoteData=!(t&&"string"==typeof t.id&&t.id&&"string"==typeof t.modelId&&t.modelId&&Number.isSafeInteger(t.reservedCredits)&&t.reservedCredits>=0&&"string"==typeof t.pricingVersion&&t.pricingVersion&&"string"==typeof t.expiresAt&&Number.isFinite(Date.parse(t.expiresAt)))||void 0!==t.expiresLabel&&"string"!=typeof t.expiresLabel||void 0!==t.providerCostLabel&&"string"!=typeof t.providerCostLabel?null:{...t},this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["quote"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement)||this.busy()||this.hasAttribute("disabled"))return;const e=t.target.dataset.action;"refresh"===e&&this.dbEmit("refresh"),"execute"===e&&this.canExecute()&&this.quoteData&&this.dbEmit("execute",{quoteId:this.quoteData.id,modelId:this.quoteData.modelId})}),this.render()}disconnectedCallback(){window.clearTimeout(this.expiryTimer),super.disconnectedCallback()}attributeChangedCallback(){this.isConnected&&this.render()}busy(){return this.hasAttribute("loading")||this.hasAttribute("executing")}expired(){return!!this.quoteData&&Date.parse(this.quoteData.expiresAt)<=Date.now()}canExecute(){const t=e(this.getAttribute("available"));return!!this.quoteData&&null!==t&&t>=this.quoteData.reservedCredits&&!this.expired()&&!this.busy()&&!this.hasAttribute("stale")&&!this.hasAttribute("error")&&!this.hasAttribute("disabled")}render(){if(window.clearTimeout(this.expiryTimer),this.quoteData&&!this.expired()){const t=Date.parse(this.quoteData.expiresAt)-Date.now();this.expiryTimer=window.setTimeout(()=>{this.isConnected&&this.render()},Math.min(t+1,2147483647))}const t="designbase-wc-ai-execution-quote";this.classList.add(t),this.setAttribute("aria-busy",String(this.busy()));const u=[i("h3",`${t}__title`,this.getAttribute("label")||o("aiQuote.title"))],n=this.quoteData,d=e(this.getAttribute("available")),h=this.getAttribute("error");if(n&&!this.hasAttribute("loading")){const e=i("div",`${t}__amount`,s(n.reservedCredits));e.append(i("span","",this.getAttribute("unit")||o("credits.unit"))),u.push(i("p",`${t}__eyebrow`,o("aiQuote.reserved")),e);const r=i("dl",`${t}__meta`,"");for(const[t,e]of[[o("credits.available"),s(d)],[o("aiQuote.providerCost"),n.providerCostLabel||o("aiQuote.unknown")],[o("aiQuote.pricingVersion"),n.pricingVersion]])r.append(i("dt","",t),i("dd","",e));const a=document.createElement("time");a.dateTime=n.expiresAt,a.textContent=n.expiresLabel||new Date(n.expiresAt).toISOString();const h=i("dd","","");h.append(a),r.append(i("dt","",o("aiQuote.expires")),h),u.push(r)}let c=o("aiQuote.idle");this.hasAttribute("executing")?c=o("aiQuote.executing"):this.hasAttribute("loading")?c=o("aiQuote.loading"):h?c=h:this.hasAttribute("stale")?c=o("aiQuote.stale"):this.expired()?c=o("aiQuote.expired"):n&&null===d?c=o("aiQuote.balanceUnknown"):n&&null!==d&&d<n.reservedCredits?c=`${o("aiQuote.insufficient")} ${s(n.reservedCredits-d)} ${this.getAttribute("unit")||o("credits.unit")}`:n&&(c=o("aiQuote.ready"));const l=i("p",`${t}__status`,c);l.setAttribute("role",h?"alert":"status"),l.setAttribute("aria-atomic","true"),u.push(l);const b=i("div",`${t}__actions`,""),p=r("refresh",o(n?"aiQuote.refresh":"aiQuote.request"),this.busy()||this.hasAttribute("disabled")),g=r("execute",o("aiQuote.execute"),!this.canExecute());g.setAttribute("variant","primary"),g.setAttribute("size","m"),g.toggleAttribute("loading",this.hasAttribute("executing")),b.append(p,g),u.push(b),a(this,...u)}}customElements.get("db-ai-execution-quote")||customElements.define("db-ai-execution-quote",DbAiExecutionQuote);export{DbAiExecutionQuote};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: file-tree. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiFileTree extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-file-tree': DbAiFileTree;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiFileTree };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"../core/i18n.js";import{DbAiDataElement as i,aiNode as t}from"../core/ai-element.js";class DbAiFileTree extends i{static get observedAttributes(){return["label","items","disabled"]}view(){const build=(i,s=[])=>{const l=t("ul","designbase-wc-ai__files","");for(const e of i){const i=document.createElement("li");if(e.children){const t=this.disclosure(`folder:${[...s,e.id].map(encodeURIComponent).join("/")}`,e.label,"complete",[build(e.children,[...s,e.id])],!0,"folder"),l=t.querySelector(".designbase-wc-ai__icon");l?.removeAttribute("aria-label"),l?.setAttribute("aria-hidden","true");const r=t.querySelector("summary"),n=r.lastElementChild;n.classList.add("designbase-wc-ai__folder-chevron"),r.prepend(n),i.append(t)}else i.append(this.button("file-open",e.label,"file-new",e.id));l.append(i)}return i.length||l.append(t("li","designbase-wc-ai__empty-folder",e("aiElement.emptyFolder"))),l};if(!this.rows.length)return[t("p","designbase-wc-ai__description",e("aiElement.noFiles"))];const i=t("div","designbase-wc-ai__file-tree","");return i.setAttribute("aria-label",this.attr("label","files")),i.append(build(this.rows)),[i]}}customElements.get("db-ai-file-tree")||customElements.define("db-ai-file-tree",DbAiFileTree);export{DbAiFileTree};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES } from '
|
|
1
|
+
import { AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES } from '../ui-contracts/dist/components.d.js';
|
|
2
2
|
import { DbElement } from '../core/base-element.js';
|
|
3
3
|
|
|
4
4
|
type GlowSize = (typeof AI_GLOW_SIZES)[number];
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: inline-citation. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiInlineCitation extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
connectedCallback(): void;
|
|
7
|
+
private place;
|
|
8
|
+
protected view(): Node[];
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface HTMLElementTagNameMap {
|
|
12
|
+
'db-ai-inline-citation': DbAiInlineCitation;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export { DbAiInlineCitation };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as t,aiLink as i}from"../core/ai-element.js";class DbAiInlineCitation extends e{static get observedAttributes(){return["items","label","open"]}connectedCallback(){super.connectedCallback(),this.cleanups.listen(this,"toggle",()=>this.place(),!0),this.cleanups.listen(window,"resize",()=>this.place()),this.cleanups.listen(document,"scroll",()=>this.place(),!0),this.cleanups.listen(document,"pointerdown",e=>{if(e.target instanceof Node&&!this.contains(e.target)){const e=this.querySelector("details");e&&this.closeDisclosure(e)}}),this.cleanups.listen(document,"keydown",e=>{if(!(e instanceof KeyboardEvent)||"Escape"!==e.key)return;const t=this.querySelector("details");t?.open&&this.closeDisclosure(t,this.contains(document.activeElement))})}place(){const e=this.querySelector("details"),t=e?.querySelector(":scope > .designbase-wc-ai__detail");if(!t)return;if(!e?.open)return void(t.matches(":popover-open")&&t.hidePopover());t.setAttribute("popover","manual"),t.matches(":popover-open")||t.showPopover(),t.style.width="min(var(--db-ai-citation-width, 280px), calc(100vw - 2 * var(--db-ai-citation-inset, 16px)))",t.style.maxHeight="calc(100dvh - 2 * var(--db-ai-citation-inset, 16px))",t.style.margin="0";const i=parseFloat(getComputedStyle(t).scrollMarginTop)||16,n=t.getBoundingClientRect().width,s=e.querySelector("summary").getBoundingClientRect();t.style.left=`${Math.max(i,Math.min(s.left,window.innerWidth-n-i))}px`,t.style.top=`${Math.max(i,Math.min(s.bottom+6,window.innerHeight-t.offsetHeight-i))}px`}view(){const e=t("div","designbase-wc-ai__citation-content","");for(const n of this.rows)e.append(i(n)),n.description&&e.append(t("p","designbase-wc-ai__description",n.description));return[this.disclosure("root",this.attr("label","citation"),"complete",[e],this.hasAttribute("open"),"globe")]}}customElements.get("db-ai-inline-citation")||customElements.define("db-ai-inline-citation",DbAiInlineCitation);export{DbAiInlineCitation};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import './db-button.js';
|
|
3
|
+
|
|
4
|
+
/** Lightweight conversation turn. Native content/React children remain owned by the caller. */
|
|
5
|
+
declare class DbAiMessage extends DbElement {
|
|
6
|
+
static get observedAttributes(): string[];
|
|
7
|
+
private content?;
|
|
8
|
+
private footer?;
|
|
9
|
+
connectedCallback(): void;
|
|
10
|
+
attributeChangedCallback(): void;
|
|
11
|
+
private sync;
|
|
12
|
+
}
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'db-ai-message': DbAiMessage;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { DbAiMessage };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as t}from"../core/base-element.js";import{aiNode as e}from"../core/ai-element.js";import{t as s}from"../core/i18n.js";import"./db-button.js";class DbAiMessage extends t{static get observedAttributes(){return["from","label","streaming","actions","disabled"]}connectedCallback(){if(!this.content){const t=this.querySelector(":scope > [data-ai-message-body]");this.content=t||e("div","designbase-wc-ai-message__content",""),t||this.content.append(...Array.from(this.childNodes)),this.content.classList.add("designbase-wc-ai-message__content"),this.footer=e("div","designbase-wc-ai-message__actions",""),this.append(this.content,this.footer)}this.cleanups.listen(this,"db-click",t=>{const e=t.target;if(!(e instanceof HTMLElement)||e.closest("db-ai-message")!==this||this.hasAttribute("disabled"))return;const s=e.dataset.messageAction;if(s)if(t.stopPropagation(),"copy"===s){const t=this.content?.innerText||"";if(!navigator.clipboard)return void this.dbEmit("copy-error",{text:t});navigator.clipboard.writeText(t).then(()=>this.dbEmit("copy",{text:t}),()=>this.dbEmit("copy-error",{text:t}))}else this.dbEmit(s)}),this.sync()}attributeChangedCallback(){this.isConnected&&this.sync()}sync(){if(this.content&&this.footer){this.classList.add("designbase-wc-ai","designbase-wc-ai-message"),this.dataset.from="user"===this.getAttribute("from")?"user":"assistant",this.setAttribute("aria-label",this.getAttribute("label")||s(`aiElement.${this.dataset.from}`)),this.setAttribute("aria-busy",String(this.hasAttribute("streaming"))),this.footer.replaceChildren();for(const t of(this.getAttribute("actions")||"").split(",").map(t=>t.trim())){const e={copy:"copy",regenerate:"refresh",like:"thumb-up",dislike:"thumb-down"}[t];if(!e)continue;const i=document.createElement("db-button");i.dataset.messageAction=t,i.setAttribute("size","s"),i.setAttribute("variant","ghost"),i.setAttribute("start-icon",e),i.setAttribute("icon-only",""),i.setAttribute("aria-label",s(`aiElement.${t}`)),i.toggleAttribute("disabled",this.hasAttribute("disabled")||this.hasAttribute("streaming")),this.footer.append(i)}}}}customElements.get("db-ai-message")||customElements.define("db-ai-message",DbAiMessage);export{DbAiMessage};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import './db-select.js';
|
|
3
|
+
|
|
4
|
+
interface DbAiModelOption {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
description: string;
|
|
8
|
+
capabilities: string[];
|
|
9
|
+
usageLabel: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
disabledReason?: string;
|
|
12
|
+
}
|
|
13
|
+
interface DbAiModelSelection {
|
|
14
|
+
modelId: string;
|
|
15
|
+
}
|
|
16
|
+
/** Product-supplied catalog, not an authorization or provider registry. */
|
|
17
|
+
declare class DbAiModelSelect extends DbElement {
|
|
18
|
+
private modelData;
|
|
19
|
+
private select?;
|
|
20
|
+
private details?;
|
|
21
|
+
static get observedAttributes(): string[];
|
|
22
|
+
get models(): DbAiModelOption[];
|
|
23
|
+
set models(value: DbAiModelOption[]);
|
|
24
|
+
connectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(): void;
|
|
26
|
+
private blocked;
|
|
27
|
+
private render;
|
|
28
|
+
}
|
|
29
|
+
declare global {
|
|
30
|
+
interface HTMLElementTagNameMap {
|
|
31
|
+
'db-ai-model-select': DbAiModelSelect;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { DbAiModelSelect };
|
|
36
|
+
export type { DbAiModelOption, DbAiModelSelection };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as e}from"../core/base-element.js";import{textNode as t}from"../core/credit-ui.js";import{t as i}from"../core/i18n.js";import"./db-select.js";class DbAiModelSelect extends e{constructor(){super(...arguments),this.modelData=[]}static get observedAttributes(){return["selected-id","label","loading","disabled","error"]}get models(){return this.modelData.map(e=>({...e,capabilities:[...e.capabilities]}))}set models(e){const t=new Set;this.modelData=Array.isArray(e)?e.filter(e=>!(!(e&&"string"==typeof e.id&&e.id&&!t.has(e.id)&&"string"==typeof e.label&&"string"==typeof e.description&&"string"==typeof e.usageLabel&&Array.isArray(e.capabilities)&&e.capabilities.every(e=>"string"==typeof e))||void 0!==e.disabled&&"boolean"!=typeof e.disabled||void 0!==e.disabledReason&&"string"!=typeof e.disabledReason)&&(t.add(e.id),!0)).map(e=>({...e,capabilities:[...e.capabilities]})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["models"]),this.select||(this.classList.add("designbase-wc-ai-model-select"),this.select=document.createElement("db-select"),this.select.setAttribute("full-width",""),this.select.setAttribute("show-clear-button","false"),this.details=t("div","designbase-wc-ai-model-select__details",""),this.append(this.select,this.details)),this.cleanups.listen(this.select,"db-change",e=>{if(e.target!==this.select)return;e.stopPropagation();const t=e.detail,i=t&&"object"==typeof t&&"value"in t?t.value:null,s=this.modelData.find(e=>e.id===i&&!e.disabled);s&&!this.blocked()&&this.dbEmit("model-change",{modelId:s.id}),this.render()}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("disabled")||this.hasAttribute("loading")||this.hasAttribute("error")}render(){if(!this.select||!this.details)return;this.setAttribute("aria-busy",String(this.hasAttribute("loading")));const e=this.modelData.find(e=>e.id===this.getAttribute("selected-id")&&!e.disabled),s={label:this.getAttribute("label")||i("aiModel.label"),placeholder:this.hasAttribute("loading")?i("loading"):i("aiModel.choose"),options:JSON.stringify(this.modelData.map(e=>({value:e.id,label:e.disabledReason?`${e.label} · ${e.disabledReason}`:e.label,disabled:e.disabled}))),value:e?.id||""};for(const[e,t]of Object.entries(s))this.select.getAttribute(e)!==t&&this.select.setAttribute(e,t);this.select.toggleAttribute("disabled",this.blocked()||!this.modelData.length),this.details.replaceChildren();const a=this.getAttribute("error");if(a){const e=t("p","",a);e.setAttribute("role","alert"),this.details.append(e)}else if(!this.hasAttribute("loading"))if(this.modelData.length){if(e){this.details.append(t("p","",e.description));const s=t("div","designbase-wc-ai-model-select__meta","");s.append(t("span","",`${i("aiModel.capabilities")} ${e.capabilities.join(" · ")}`)),s.append(t("span","",`${i("aiModel.usage")} ${e.usageLabel}`)),this.details.append(s)}}else this.details.append(t("p","",i("aiModel.empty")))}}customElements.get("db-ai-model-select")||customElements.define("db-ai-model-select",DbAiModelSelect);export{DbAiModelSelect};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: plan. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiPlan extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-plan': DbAiPlan;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiPlan };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiPlan extends t{static get observedAttributes(){return["items","label","status","open","disabled","action-label"]}view(){const t=this.rows.filter(t=>"complete"===t.status).length,s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t)));const a=this.disclosure("root",this.attr("label","plan"),this.state,[s],this.hasAttribute("open"),"documentation");return a.querySelector("summary .designbase-wc-ai__label")?.append(e("span","designbase-wc-ai__meta",` ${t}/${this.rows.length}`)),this.hasAttribute("action-label")&&a.append(this.button("execute",this.attr("action-label"),"play")),[a]}}customElements.get("db-ai-plan")||customElements.define("db-ai-plan",DbAiPlan);export{DbAiPlan};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: queue. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiQueue extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-queue': DbAiQueue;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiQueue };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as t}from"../core/ai-element.js";import{t as i}from"../core/i18n.js";class DbAiQueue extends e{static get observedAttributes(){return["items","label","open","disabled"]}view(){const e=t("div","designbase-wc-ai__queue","");for(const s of this.rows){const o=t("div","designbase-wc-ai__queue-row","");o.append(this.itemLine(s),this.button("remove",i("aiElement.remove"),"close",s.id)),e.append(o)}return this.rows.length||e.append(t("p","designbase-wc-ai__description",i("aiElement.queueEmpty"))),[this.disclosure("root",`${this.attr("label","queue")} · ${this.rows.length}`,this.state,[e],this.hasAttribute("open"))]}}customElements.get("db-ai-queue")||customElements.define("db-ai-queue",DbAiQueue);export{DbAiQueue};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: reasoning. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiReasoning extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-reasoning': DbAiReasoning;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiReasoning };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiReasoning extends t{static get observedAttributes(){return["label","description","status","open"]}view(){const t=e("p","designbase-wc-ai__reasoning-text",this.attr("description"));return[this.disclosure("root",this.attr("label","running"===this.state?"thinking":"reasoning"),this.state,[t],this.hasAttribute("open")||"running"===this.state,"bulb")]}}customElements.get("db-ai-reasoning")||customElements.define("db-ai-reasoning",DbAiReasoning);export{DbAiReasoning};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: sources. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiSources extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-sources': DbAiSources;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiSources };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as s,aiIcon as t,aiLink as o}from"../core/ai-element.js";class DbAiSources extends e{static get observedAttributes(){return["items","label","open"]}view(){const e=s("div","designbase-wc-ai__source-list","");for(const i of this.rows){const r=s("div","designbase-wc-ai__source-row","");r.append(t("globe"),o(i)),i.description&&r.append(s("span","designbase-wc-ai__meta",i.description)),e.append(r)}return[this.disclosure("root",`${this.attr("label","sources")} · ${this.rows.length}`,"complete",[e],this.hasAttribute("open"),"globe")]}}customElements.get("db-ai-sources")||customElements.define("db-ai-sources",DbAiSources);export{DbAiSources};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: stack-trace. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiStackTrace extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-stack-trace': DbAiStackTrace;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiStackTrace };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as e,aiNode as t,aiCode as s}from"../core/ai-element.js";class DbAiStackTrace extends e{static get observedAttributes(){return["items","label","description","open","disabled"]}view(){const e=[];this.attr("description")&&e.push(t("p","designbase-wc-ai__error",this.attr("description")));for(const a of this.rows){const i=t("div","designbase-wc-ai__stack-frame","");i.append(this.button("file-open",a.label,"code",a.id)),a.meta&&i.append(t("span","designbase-wc-ai__meta",a.meta)),a.code&&i.append(s(a.code,a.language)),e.push(i)}return[this.disclosure("root",this.attr("label","stackTrace"),"error",e,this.hasAttribute("open"),"error-filled")]}}customElements.get("db-ai-stack-trace")||customElements.define("db-ai-stack-trace",DbAiStackTrace);export{DbAiStackTrace};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: subagent. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiSubagent extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-subagent': DbAiSubagent;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiSubagent };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as e}from"../core/ai-element.js";class DbAiSubagent extends t{static get observedAttributes(){return["items","label","description","status","open","action-label","disabled"]}view(){const t=[];this.attr("description")&&t.push(e("p","designbase-wc-ai__description",this.attr("description")));const s=e("div","designbase-wc-ai__timeline","");s.append(...this.rows.map(t=>this.itemLine(t))),t.push(s);const i=this.disclosure("root",this.attr("label","subagent"),this.state,t,this.hasAttribute("open"),"bulb");return this.hasAttribute("action-label")&&i.append(this.button("cancel",this.attr("action-label"),"close")),[i]}}customElements.get("db-ai-subagent")||customElements.define("db-ai-subagent",DbAiSubagent);export{DbAiSubagent};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { DbElement } from '../core/base-element.js';
|
|
2
|
+
import './db-button.js';
|
|
3
|
+
import './db-progressbar.js';
|
|
4
|
+
import './db-spinner.js';
|
|
5
|
+
|
|
6
|
+
type DbAiTaskState = 'idle' | 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled' | 'needs_attention';
|
|
7
|
+
interface DbAiTaskAction {
|
|
8
|
+
taskId: string;
|
|
9
|
+
}
|
|
10
|
+
/** Display state comes from the app. No fake percentages, automatic retries or refunds. */
|
|
11
|
+
declare class DbAiTaskStatus extends DbElement {
|
|
12
|
+
static get observedAttributes(): string[];
|
|
13
|
+
connectedCallback(): void;
|
|
14
|
+
attributeChangedCallback(): void;
|
|
15
|
+
private state;
|
|
16
|
+
private actions;
|
|
17
|
+
private render;
|
|
18
|
+
}
|
|
19
|
+
declare global {
|
|
20
|
+
interface HTMLElementTagNameMap {
|
|
21
|
+
'db-ai-task-status': DbAiTaskStatus;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { DbAiTaskStatus };
|
|
26
|
+
export type { DbAiTaskAction, DbAiTaskState };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditText as s,creditNumber as i,creditAction as a,replaceView as r}from"../core/credit-ui.js";import{aiStatus as n}from"../core/ai-element.js";import{t as d}from"../core/i18n.js";import"./db-button.js";import"./db-progressbar.js";import"./db-spinner.js";const u=["idle","queued","running","succeeded","failed","cancelled","needs_attention"];class DbAiTaskStatus extends t{static get observedAttributes(){return["state","task-id","label","status-label","description","progress","reserved","charged","unit","cancel-label","retry-label","refresh-label","disabled","loading"]}connectedCallback(){this.cleanups.listen(this,"db-click",t=>{if(this.hasAttribute("disabled")||this.hasAttribute("loading"))return;const e=t.target,s=e instanceof HTMLElement?e.dataset.action:void 0;s&&this.actions().includes(s)&&this.dbEmit(s,{taskId:this.getAttribute("task-id")||""})}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}state(){const t=this.getAttribute("state");return u.includes(t)?t:"idle"}actions(){const t=this.state();return[...["queued","running"].includes(t)&&this.getAttribute("cancel-label")?["cancel"]:[],..."failed"===t&&this.getAttribute("retry-label")?["retry"]:[],...this.getAttribute("refresh-label")?["refresh"]:[]]}render(){const t="designbase-wc-ai-task-status";this.classList.add(t);const u=this.state();this.dataset.state=u;const l=e("div",`${t}__header`,""),c=e("div",`${t}__status`,this.getAttribute("status-label")||d(`aiTask.${u}`));c.setAttribute("role","status"),c.setAttribute("aria-atomic","true"),l.append(n("running"===u||"queued"===u?"running":"succeeded"===u?"complete":"failed"===u?"error":"pending"),e("strong",`${t}__title`,this.getAttribute("label")||d("aiTask.title")),c);const o=e("div",`${t}__body`,""),b=["queued","running"].includes(u);o.setAttribute("aria-busy",String(b));const h=this.getAttribute("description")||("needs_attention"===u?d("aiTask.attentionDescription"):"");h&&o.append(e("p",`${t}__description`,h));const g=this.getAttribute("progress"),p=null===g||""===g.trim()?NaN:Number(g);if("running"===u&&Number.isFinite(p)){const t=document.createElement("db-progressbar");t.setAttribute("value",String(Math.max(0,Math.min(100,p)))),t.setAttribute("label",this.getAttribute("label")||d("aiTask.title")),t.setAttribute("show-label",""),t.setAttribute("full-width",""),t.setAttribute("variant","primary"),o.append(t)}const m=e("div",`${t}__meta`,"");for(const[t,a]of[["reserved","credits.held"],["charged","credits.charged"]])this.hasAttribute(t)&&m.append(e("span","",`${d(a)} ${s(i(this.getAttribute(t)))} ${this.getAttribute("unit")||d("credits.unit")}`));o.append(m);const A=e("div",`${t}__actions`,"");for(const t of this.actions())A.append(a(t,this.getAttribute(`${t}-label`)||"",this.hasAttribute("disabled")||this.hasAttribute("loading")));r(this,l,o,A)}}customElements.get("db-ai-task-status")||customElements.define("db-ai-task-status",DbAiTaskStatus);export{DbAiTaskStatus};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DbAiDataElement } from '../core/ai-element.js';
|
|
2
|
+
|
|
3
|
+
/** AI Elements: task. App-owned data and actions; no provider calls. */
|
|
4
|
+
declare class DbAiTask extends DbAiDataElement {
|
|
5
|
+
static get observedAttributes(): string[];
|
|
6
|
+
protected view(): Node[];
|
|
7
|
+
}
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'db-ai-task': DbAiTask;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { DbAiTask };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{DbAiDataElement as t,aiNode as s}from"../core/ai-element.js";class DbAiTask extends t{static get observedAttributes(){return["items","label","description","status","open"]}view(){const t=s("div","designbase-wc-ai__timeline","");t.append(...this.rows.map(t=>this.itemLine(t)));const e=[];return this.attr("description")&&e.push(s("p","designbase-wc-ai__description",this.attr("description"))),e.push(t),[this.disclosure("root",this.attr("label","task"),this.state,e,this.hasAttribute("open")||"running"===this.state)]}}customElements.get("db-ai-task")||customElements.define("db-ai-task",DbAiTask);export{DbAiTask};
|