@designbasekorea/ui-wc 0.5.6 → 0.6.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/chunks/lottie-35a9b0f5.js +1 -0
- package/dist/esm/components/animation-background/canvas-controller.js +1 -121
- package/dist/esm/components/animation-background/controls.js +1 -180
- package/dist/esm/components/animation-background/graphite-controller.js +1 -196
- package/dist/esm/components/animation-background/graphite-presets.js +1 -42
- package/dist/esm/components/animation-background/graphite-shader.js +1 -111
- package/dist/esm/components/animation-background/layers.js +1 -369
- package/dist/esm/components/animation-background/lumina-presets.js +1 -53
- package/dist/esm/components/animation-background/lumina-shaders.js +1 -181
- package/dist/esm/components/animation-background/lumina-utils.js +1 -60
- package/dist/esm/components/animation-background/particle-defaults.js +1 -36
- package/dist/esm/components/animation-background/renderers.js +1 -167
- package/dist/esm/components/animation-background/shader-controller.js +1 -154
- package/dist/esm/components/color-picker-utils.js +1 -134
- package/dist/esm/components/date-picker-utils.js +1 -140
- package/dist/esm/components/db-accordion.js +1 -304
- package/dist/esm/components/db-ad-banner.js +1 -455
- package/dist/esm/components/db-ai-chat-list.d.ts +43 -0
- package/dist/esm/components/db-ai-chat-list.js +1 -0
- package/dist/esm/components/db-ai-chat.d.ts +159 -0
- package/dist/esm/components/db-ai-chat.js +1 -0
- package/dist/esm/components/db-alert.js +1 -149
- package/dist/esm/components/db-animation-background.js +1 -486
- package/dist/esm/components/db-animation-text.js +1 -601
- package/dist/esm/components/db-app-badge.js +1 -88
- package/dist/esm/components/db-audio-player.js +1 -752
- package/dist/esm/components/db-avatar.js +1 -188
- package/dist/esm/components/db-backdrop.js +1 -139
- package/dist/esm/components/db-badge.js +1 -91
- package/dist/esm/components/db-banner.js +1 -188
- package/dist/esm/components/db-bottom-navigation.js +1 -146
- package/dist/esm/components/db-bottom-sheet.js +1 -481
- package/dist/esm/components/db-breadcrumbs.js +1 -329
- package/dist/esm/components/db-button.js +1 -316
- package/dist/esm/components/db-calendar.js +1 -675
- package/dist/esm/components/db-card.js +1 -265
- package/dist/esm/components/db-carousel.js +1 -264
- package/dist/esm/components/db-chat-composer.d.ts +134 -0
- package/dist/esm/components/db-chat-composer.js +1 -0
- package/dist/esm/components/db-chat-list.d.ts +47 -0
- package/dist/esm/components/db-chat-list.js +1 -0
- package/dist/esm/components/db-chat-message.d.ts +39 -0
- package/dist/esm/components/db-chat-message.js +1 -0
- package/dist/esm/components/db-chat-orb.d.ts +99 -0
- package/dist/esm/components/db-chat-orb.js +1 -0
- package/dist/esm/components/db-chat-room.d.ts +71 -0
- package/dist/esm/components/db-chat-room.js +1 -0
- package/dist/esm/components/db-chat-suggestions.d.ts +44 -0
- package/dist/esm/components/db-chat-suggestions.js +1 -0
- package/dist/esm/components/db-chat-typing.d.ts +22 -0
- package/dist/esm/components/db-chat-typing.js +1 -0
- package/dist/esm/components/db-chat-welcome.d.ts +32 -0
- package/dist/esm/components/db-chat-welcome.js +1 -0
- package/dist/esm/components/db-chat-widget.d.ts +146 -0
- package/dist/esm/components/db-chat-widget.js +1 -0
- package/dist/esm/components/db-checkbox.js +1 -202
- package/dist/esm/components/db-chip.js +1 -104
- package/dist/esm/components/db-code-block.js +1 -304
- package/dist/esm/components/db-color-picker.js +1 -746
- package/dist/esm/components/db-confirm.js +1 -191
- package/dist/esm/components/db-container.js +1 -39
- package/dist/esm/components/db-context-menu.js +1 -265
- package/dist/esm/components/db-countdown.js +1 -146
- package/dist/esm/components/db-cursor-follower.js +1 -173
- package/dist/esm/components/db-date-picker.js +1 -837
- package/dist/esm/components/db-divider.js +1 -66
- package/dist/esm/components/db-download-progress.d.ts +89 -0
- package/dist/esm/components/db-download-progress.js +1 -0
- package/dist/esm/components/db-drawer.js +1 -245
- package/dist/esm/components/db-dropdown.js +1 -493
- package/dist/esm/components/db-dropzone.js +1 -266
- package/dist/esm/components/db-email-verify.d.ts +64 -0
- package/dist/esm/components/db-email-verify.js +1 -0
- package/dist/esm/components/db-empty-state.js +1 -97
- package/dist/esm/components/db-file-uploader.js +1 -256
- package/dist/esm/components/db-floating-action-button.js +1 -139
- package/dist/esm/components/db-footer.js +1 -385
- package/dist/esm/components/db-form.js +1 -566
- package/dist/esm/components/db-gantt.js +1 -882
- package/dist/esm/components/db-gradient.js +1 -133
- package/dist/esm/components/db-grid-background.js +1 -909
- package/dist/esm/components/db-grid.js +1 -73
- package/dist/esm/components/db-icons.d.ts +3 -0
- package/dist/esm/components/db-icons.js +1 -82
- package/dist/esm/components/db-image-list.js +1 -214
- package/dist/esm/components/db-image-placeholder.js +1 -96
- package/dist/esm/components/db-image.js +1 -289
- package/dist/esm/components/db-indicator.js +1 -517
- package/dist/esm/components/db-input.js +1 -420
- package/dist/esm/components/db-kanban.js +1 -538
- package/dist/esm/components/db-label.js +1 -66
- package/dist/esm/components/db-lightbox.js +1 -372
- package/dist/esm/components/db-list.js +1 -340
- package/dist/esm/components/db-logo-svg.js +1 -72
- package/dist/esm/components/db-logo.js +1 -106
- package/dist/esm/components/db-lottie.js +1 -109
- package/dist/esm/components/db-markdown-editor.js +1 -458
- package/dist/esm/components/db-marquee.js +1 -402
- package/dist/esm/components/db-masonry.js +1 -94
- package/dist/esm/components/db-menu-item.js +1 -211
- package/dist/esm/components/db-modal.js +1 -522
- package/dist/esm/components/db-navbar.js +1 -680
- package/dist/esm/components/db-onboarding-modal.js +1 -322
- package/dist/esm/components/db-otp-input.d.ts +53 -0
- package/dist/esm/components/db-otp-input.js +1 -0
- package/dist/esm/components/db-page-header.js +1 -312
- package/dist/esm/components/db-pagination.js +1 -271
- package/dist/esm/components/db-phone-verify.d.ts +63 -0
- package/dist/esm/components/db-phone-verify.js +1 -0
- package/dist/esm/components/db-popover.js +1 -580
- package/dist/esm/components/db-progress-step.js +1 -166
- package/dist/esm/components/db-progress.js +1 -171
- package/dist/esm/components/db-progressbar.js +1 -72
- package/dist/esm/components/db-radio.js +1 -172
- package/dist/esm/components/db-random-gradient.js +1 -121
- package/dist/esm/components/db-range-slider.js +1 -811
- package/dist/esm/components/db-rating.js +1 -325
- package/dist/esm/components/db-reorder.js +1 -286
- package/dist/esm/components/db-resizable-panels.js +1 -282
- package/dist/esm/components/db-scroll-area.js +1 -126
- package/dist/esm/components/db-search-bar.js +1 -668
- package/dist/esm/components/db-section-app-download.js +1 -101
- package/dist/esm/components/db-section-contact.js +1 -102
- package/dist/esm/components/db-section-cta.js +1 -150
- package/dist/esm/components/db-section-faq.js +1 -120
- package/dist/esm/components/db-section-feature-grid.js +1 -137
- package/dist/esm/components/db-section-feature.js +1 -179
- package/dist/esm/components/db-section-hero.js +1 -243
- package/dist/esm/components/db-section-logo-cloud.js +1 -138
- package/dist/esm/components/db-section-pricing.js +1 -166
- package/dist/esm/components/db-section-stats.js +1 -129
- package/dist/esm/components/db-section-testimonials.js +1 -252
- package/dist/esm/components/db-section.js +1 -385
- package/dist/esm/components/db-segment-control.js +1 -231
- package/dist/esm/components/db-select.js +1 -571
- package/dist/esm/components/db-share-icons.js +1 -40
- package/dist/esm/components/db-share.js +1 -489
- package/dist/esm/components/db-sidebar.d.ts +20 -0
- package/dist/esm/components/db-sidebar.js +1 -1068
- package/dist/esm/components/db-skeleton.js +1 -94
- package/dist/esm/components/db-spinner.js +1 -102
- package/dist/esm/components/db-split-view.js +1 -297
- package/dist/esm/components/db-stack.js +1 -46
- package/dist/esm/components/db-stat.js +1 -218
- package/dist/esm/components/db-stepper.js +1 -398
- package/dist/esm/components/db-table.js +1 -412
- package/dist/esm/components/db-tabs.js +1 -335
- package/dist/esm/components/db-testimonial.d.ts +2 -0
- package/dist/esm/components/db-testimonial.js +1 -162
- package/dist/esm/components/db-textarea.js +1 -233
- package/dist/esm/components/db-time-picker.js +1 -523
- package/dist/esm/components/db-timeline.js +1 -174
- package/dist/esm/components/db-toast.js +1 -158
- package/dist/esm/components/db-toggle.js +1 -162
- package/dist/esm/components/db-toolbar.js +1 -94
- package/dist/esm/components/db-tooltip.js +1 -440
- package/dist/esm/components/db-top-banner.js +1 -121
- package/dist/esm/components/db-tutorial.js +1 -324
- package/dist/esm/components/db-two-factor.d.ts +71 -0
- package/dist/esm/components/db-two-factor.js +1 -0
- package/dist/esm/components/db-video-player.js +1 -503
- package/dist/esm/components/db-youtube-player.js +1 -194
- package/dist/esm/components/highlight-code.js +1 -65
- package/dist/esm/components/input-validation.js +1 -50
- package/dist/esm/components/marketing-block-host-utils.js +1 -9
- package/dist/esm/components/number-scrub.js +1 -117
- package/dist/esm/components/random-gradient-palettes.js +1 -67
- package/dist/esm/components/section-block-header-utils.js +1 -48
- package/dist/esm/helpers/confirm.js +1 -52
- package/dist/esm/helpers/toast.js +1 -73
- package/dist/esm/index.d.ts +16 -0
- package/dist/esm/index.js +1 -111
- package/dist/esm/node_modules/prismjs/components/prism-bash.js +1 -235
- package/dist/esm/node_modules/prismjs/components/prism-clike.js +1 -31
- package/dist/esm/node_modules/prismjs/components/prism-css.js +1 -64
- package/dist/esm/node_modules/prismjs/components/prism-javascript.js +1 -172
- package/dist/esm/node_modules/prismjs/components/prism-json.js +1 -27
- package/dist/esm/node_modules/prismjs/components/prism-jsx.js +1 -143
- package/dist/esm/node_modules/prismjs/components/prism-markup.js +1 -186
- package/dist/esm/node_modules/prismjs/components/prism-scss.js +1 -81
- package/dist/esm/node_modules/prismjs/components/prism-tsx.js +1 -15
- package/dist/esm/node_modules/prismjs/components/prism-typescript.js +1 -60
- package/dist/index.cjs +1 -55414
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1125 -2
- package/dist/index.esm.js +1 -38284
- package/dist/react/chunks/lottie-14e7addb.js +1 -0
- package/dist/react/index.cjs +1 -56503
- package/dist/react/index.d.ts +1637 -21
- package/dist/react/index.esm.js +1 -39373
- package/package.json +2 -2
- package/dist/chunks/lottie-e273b936.js +0 -17032
- package/dist/react/chunks/lottie-72a4c6d4.js +0 -17032
package/dist/index.d.ts
CHANGED
|
@@ -1698,11 +1698,19 @@ interface DbSidebarItem {
|
|
|
1698
1698
|
disabled?: boolean;
|
|
1699
1699
|
badge?: string | number;
|
|
1700
1700
|
badgeColor?: string;
|
|
1701
|
+
/** 프로필 메뉴 우측에 표시할 현재 값 (예: "System", "한국어") */
|
|
1702
|
+
value?: string;
|
|
1703
|
+
/** 2depth 선택 상태. 선택된 항목에는 체크 아이콘이 표시됩니다. */
|
|
1704
|
+
selected?: boolean;
|
|
1705
|
+
/** 프로필 메뉴에서 이 항목 앞에 구분선을 표시합니다. */
|
|
1706
|
+
dividerBefore?: boolean;
|
|
1701
1707
|
children?: DbSidebarItem[];
|
|
1702
1708
|
}
|
|
1703
1709
|
interface DbSidebarSection {
|
|
1704
1710
|
id: string;
|
|
1705
1711
|
title?: string;
|
|
1712
|
+
/** 이전 섹션과의 간격 */
|
|
1713
|
+
gap?: 'none' | 's' | 'm' | 'l';
|
|
1706
1714
|
items: DbSidebarItem[];
|
|
1707
1715
|
}
|
|
1708
1716
|
interface DbSidebarUserProfile {
|
|
@@ -1733,7 +1741,9 @@ declare class DbSidebar extends HTMLElement {
|
|
|
1733
1741
|
private userMenuOpen;
|
|
1734
1742
|
private projectMenuOpen;
|
|
1735
1743
|
private flyoutItemId;
|
|
1744
|
+
private userFlyoutItemId;
|
|
1736
1745
|
private flyoutCloseTimer;
|
|
1746
|
+
private userFlyoutCloseTimer;
|
|
1737
1747
|
private outsideHandler;
|
|
1738
1748
|
static get observedAttributes(): string[];
|
|
1739
1749
|
connectedCallback(): void;
|
|
@@ -1768,6 +1778,12 @@ declare class DbSidebar extends HTMLElement {
|
|
|
1768
1778
|
set bottomSections(value: DbSidebarSection[] | string);
|
|
1769
1779
|
get promoBanner(): DbSidebarPromoBanner | null;
|
|
1770
1780
|
set promoBanner(value: DbSidebarPromoBanner | string | null);
|
|
1781
|
+
get headerType(): 'default' | 'back';
|
|
1782
|
+
set headerType(value: 'default' | 'back');
|
|
1783
|
+
get backLabel(): string;
|
|
1784
|
+
set backLabel(value: string);
|
|
1785
|
+
get backHref(): string;
|
|
1786
|
+
set backHref(value: string);
|
|
1771
1787
|
private parseSections;
|
|
1772
1788
|
private parseUserMenuItems;
|
|
1773
1789
|
private parseUserProfile;
|
|
@@ -1783,9 +1799,13 @@ declare class DbSidebar extends HTMLElement {
|
|
|
1783
1799
|
private cancelFlyoutClose;
|
|
1784
1800
|
private showFlyout;
|
|
1785
1801
|
private scheduleFlyoutClose;
|
|
1802
|
+
private cancelUserFlyoutClose;
|
|
1803
|
+
private setUserFlyout;
|
|
1804
|
+
private scheduleUserFlyoutClose;
|
|
1786
1805
|
private syncHostClasses;
|
|
1787
1806
|
private dispatchItemClick;
|
|
1788
1807
|
private dispatchUserMenuItemClick;
|
|
1808
|
+
private dispatchBackClick;
|
|
1789
1809
|
private dispatchProjectChange;
|
|
1790
1810
|
private dispatchProjectManage;
|
|
1791
1811
|
private dispatchPromoCtaClick;
|
|
@@ -3405,6 +3425,8 @@ declare class DbTestimonial extends HTMLElement {
|
|
|
3405
3425
|
private built;
|
|
3406
3426
|
private innerEl?;
|
|
3407
3427
|
private quoteEl?;
|
|
3428
|
+
private backgroundEl?;
|
|
3429
|
+
private logoEl?;
|
|
3408
3430
|
private footerEl?;
|
|
3409
3431
|
private extraEl?;
|
|
3410
3432
|
private avatarWrapEl?;
|
|
@@ -4181,6 +4203,1107 @@ declare global {
|
|
|
4181
4203
|
}
|
|
4182
4204
|
}
|
|
4183
4205
|
|
|
4206
|
+
declare const STATUSES: readonly ["downloading", "paused", "error", "complete"];
|
|
4207
|
+
type DownloadStatus = (typeof STATUSES)[number];
|
|
4208
|
+
declare const POSITIONS$1: readonly ["bottom-right", "bottom-left", "bottom-center", "top-right", "top-left", "top-center"];
|
|
4209
|
+
type DownloadPosition = (typeof POSITIONS$1)[number];
|
|
4210
|
+
/**
|
|
4211
|
+
* 우측 하단(기본)에 떠 있는 다운로드 진행률 위젯.
|
|
4212
|
+
*
|
|
4213
|
+
* 진행 바는 `<db-progressbar>`, 액션 버튼은 `<db-button>` 을 그대로 재사용합니다.
|
|
4214
|
+
* 같은 위치에 여러 개가 뜨면 `stack-mode`에 따라 위로 쌓이거나(deck) 세로로 쌓입니다.
|
|
4215
|
+
*
|
|
4216
|
+
* @example
|
|
4217
|
+
* const dl = document.createElement('db-download-progress');
|
|
4218
|
+
* dl.setAttribute('file-name', 'ui-kit-icons.figma');
|
|
4219
|
+
* dl.setAttribute('value', '43');
|
|
4220
|
+
* dl.setAttribute('auto-remove', '');
|
|
4221
|
+
* document.body.appendChild(dl);
|
|
4222
|
+
* dl.setProgress(80);
|
|
4223
|
+
* dl.setStatus('complete');
|
|
4224
|
+
*/
|
|
4225
|
+
declare class DbDownloadProgress extends HTMLElement {
|
|
4226
|
+
static get observedAttributes(): string[];
|
|
4227
|
+
private built;
|
|
4228
|
+
private renderedStatus;
|
|
4229
|
+
private closeTimerId;
|
|
4230
|
+
private resizeObserver;
|
|
4231
|
+
private registeredPosition;
|
|
4232
|
+
closed: boolean;
|
|
4233
|
+
private iconEl;
|
|
4234
|
+
private labelEl;
|
|
4235
|
+
private fileEl;
|
|
4236
|
+
private subtitleEl;
|
|
4237
|
+
private inlinePercentEl;
|
|
4238
|
+
private percentEl;
|
|
4239
|
+
private remainingEl;
|
|
4240
|
+
private metaDotEl;
|
|
4241
|
+
private toggleBtn;
|
|
4242
|
+
private closeBtn;
|
|
4243
|
+
private actionsEl;
|
|
4244
|
+
private mainRow;
|
|
4245
|
+
private bodyBar;
|
|
4246
|
+
private edgeBar;
|
|
4247
|
+
get value(): number;
|
|
4248
|
+
set value(v: number);
|
|
4249
|
+
get max(): number;
|
|
4250
|
+
set max(v: number);
|
|
4251
|
+
get status(): DownloadStatus;
|
|
4252
|
+
set status(v: DownloadStatus);
|
|
4253
|
+
get fileName(): string;
|
|
4254
|
+
set fileName(v: string);
|
|
4255
|
+
get position(): DownloadPosition;
|
|
4256
|
+
set position(v: DownloadPosition);
|
|
4257
|
+
get minimized(): boolean;
|
|
4258
|
+
set minimized(v: boolean);
|
|
4259
|
+
/** `stack` = 세로로 위로 쌓기(기본), `deck` = 스케일·z-index 카드 덱 */
|
|
4260
|
+
get stackMode(): 'stack' | 'deck';
|
|
4261
|
+
set stackMode(v: 'stack' | 'deck');
|
|
4262
|
+
connectedCallback(): void;
|
|
4263
|
+
disconnectedCallback(): void;
|
|
4264
|
+
attributeChangedCallback(name: string): void;
|
|
4265
|
+
private registerStack;
|
|
4266
|
+
private unregisterStack;
|
|
4267
|
+
private build;
|
|
4268
|
+
private sync;
|
|
4269
|
+
private renderActions;
|
|
4270
|
+
private handleMainClick;
|
|
4271
|
+
private handleToggleClick;
|
|
4272
|
+
private handleCloseClick;
|
|
4273
|
+
minimize(): void;
|
|
4274
|
+
expand(): void;
|
|
4275
|
+
toggle(): void;
|
|
4276
|
+
setProgress(value: number): void;
|
|
4277
|
+
setStatus(status: DownloadStatus): void;
|
|
4278
|
+
/**
|
|
4279
|
+
* 닫기(슬라이드 아웃).
|
|
4280
|
+
* React 등 호스트가 DOM을 소유할 때는 `auto-remove` 없이 `db-close`만 받고 언마운트하세요.
|
|
4281
|
+
* body에 직접 append한 경우 `auto-remove`를 주면 DOM에서 제거됩니다.
|
|
4282
|
+
*/
|
|
4283
|
+
close(): void;
|
|
4284
|
+
}
|
|
4285
|
+
declare global {
|
|
4286
|
+
interface HTMLElementTagNameMap {
|
|
4287
|
+
'db-download-progress': DbDownloadProgress;
|
|
4288
|
+
}
|
|
4289
|
+
}
|
|
4290
|
+
|
|
4291
|
+
/**
|
|
4292
|
+
* ui-wc — db-otp-input (수동 작성, 자동 동기화 대상 아님)
|
|
4293
|
+
*
|
|
4294
|
+
* 분할 자릿수 OTP/PIN 입력. 붙여넣기·화살표·백스페이스를 지원합니다.
|
|
4295
|
+
*/
|
|
4296
|
+
declare const SIZES$4: readonly ["s", "m", "l"];
|
|
4297
|
+
type OtpSize = (typeof SIZES$4)[number];
|
|
4298
|
+
declare class DbOtpInput extends HTMLElement {
|
|
4299
|
+
static formAssociated: boolean;
|
|
4300
|
+
static get observedAttributes(): string[];
|
|
4301
|
+
private internals;
|
|
4302
|
+
private built;
|
|
4303
|
+
private digits;
|
|
4304
|
+
private errorEl?;
|
|
4305
|
+
private suppressSync;
|
|
4306
|
+
private initialValue;
|
|
4307
|
+
private lastCompleteValue;
|
|
4308
|
+
get length(): number;
|
|
4309
|
+
set length(v: number);
|
|
4310
|
+
get value(): string;
|
|
4311
|
+
set value(v: string);
|
|
4312
|
+
get size(): OtpSize;
|
|
4313
|
+
set size(v: OtpSize);
|
|
4314
|
+
get disabled(): boolean;
|
|
4315
|
+
set disabled(v: boolean);
|
|
4316
|
+
get readOnly(): boolean;
|
|
4317
|
+
set readOnly(v: boolean);
|
|
4318
|
+
connectedCallback(): void;
|
|
4319
|
+
attributeChangedCallback(name: string): void;
|
|
4320
|
+
focus(): void;
|
|
4321
|
+
clear(): void;
|
|
4322
|
+
formResetCallback(): void;
|
|
4323
|
+
formDisabledCallback(disabled: boolean): void;
|
|
4324
|
+
private build;
|
|
4325
|
+
private sync;
|
|
4326
|
+
private emit;
|
|
4327
|
+
private setValueAttribute;
|
|
4328
|
+
private syncFormValue;
|
|
4329
|
+
private focusFirstEmpty;
|
|
4330
|
+
private focusAt;
|
|
4331
|
+
private applyValue;
|
|
4332
|
+
private onDigitFocus;
|
|
4333
|
+
private onDigitInput;
|
|
4334
|
+
private onDigitKeydown;
|
|
4335
|
+
private onPaste;
|
|
4336
|
+
}
|
|
4337
|
+
declare global {
|
|
4338
|
+
interface HTMLElementTagNameMap {
|
|
4339
|
+
'db-otp-input': DbOtpInput;
|
|
4340
|
+
}
|
|
4341
|
+
}
|
|
4342
|
+
|
|
4343
|
+
/**
|
|
4344
|
+
* ui-wc — db-phone-verify (수동 작성, 자동 동기화 대상 아님)
|
|
4345
|
+
*
|
|
4346
|
+
* 한국형 휴대폰 본인인증: 통신사 → 번호 → 인증번호 발송 → OTP + 타이머/재전송.
|
|
4347
|
+
*/
|
|
4348
|
+
|
|
4349
|
+
declare const SIZES$3: readonly ["s", "m", "l"];
|
|
4350
|
+
type Size$2 = (typeof SIZES$3)[number];
|
|
4351
|
+
declare class DbPhoneVerify extends HTMLElement {
|
|
4352
|
+
static get observedAttributes(): string[];
|
|
4353
|
+
private built;
|
|
4354
|
+
private timerId;
|
|
4355
|
+
private remaining;
|
|
4356
|
+
private carrierSelect;
|
|
4357
|
+
private phoneInput;
|
|
4358
|
+
private sendBtn;
|
|
4359
|
+
private otpInput;
|
|
4360
|
+
private timerEl;
|
|
4361
|
+
private resendBtn;
|
|
4362
|
+
private verifyBtn;
|
|
4363
|
+
private codeBlock;
|
|
4364
|
+
private errorEl;
|
|
4365
|
+
get size(): Size$2;
|
|
4366
|
+
set size(v: Size$2);
|
|
4367
|
+
get step(): 'phone' | 'code' | 'verified';
|
|
4368
|
+
set step(v: 'phone' | 'code' | 'verified');
|
|
4369
|
+
get phone(): string;
|
|
4370
|
+
set phone(v: string);
|
|
4371
|
+
get carrier(): string;
|
|
4372
|
+
set carrier(v: string);
|
|
4373
|
+
get code(): string;
|
|
4374
|
+
set code(v: string);
|
|
4375
|
+
get countdown(): number;
|
|
4376
|
+
set countdown(v: number);
|
|
4377
|
+
connectedCallback(): void;
|
|
4378
|
+
disconnectedCallback(): void;
|
|
4379
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
4380
|
+
/** 인증번호 발송 단계로 전환하고 타이머를 시작합니다. */
|
|
4381
|
+
startCodeStep(): void;
|
|
4382
|
+
/** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
|
|
4383
|
+
restartCountdown(): void;
|
|
4384
|
+
/** 인증 완료 상태로 전환합니다. */
|
|
4385
|
+
markVerified(): void;
|
|
4386
|
+
private clearTimer;
|
|
4387
|
+
private startTimer;
|
|
4388
|
+
private renderTimer;
|
|
4389
|
+
private build;
|
|
4390
|
+
private sync;
|
|
4391
|
+
private isPhoneValid;
|
|
4392
|
+
private requestVerify;
|
|
4393
|
+
}
|
|
4394
|
+
declare global {
|
|
4395
|
+
interface HTMLElementTagNameMap {
|
|
4396
|
+
'db-phone-verify': DbPhoneVerify;
|
|
4397
|
+
}
|
|
4398
|
+
}
|
|
4399
|
+
|
|
4400
|
+
/**
|
|
4401
|
+
* ui-wc — db-email-verify (수동 작성, 자동 동기화 대상 아님)
|
|
4402
|
+
*
|
|
4403
|
+
* 이메일 인증: code(OTP) 모드 / confirm(메일함 확인) 모드.
|
|
4404
|
+
*/
|
|
4405
|
+
|
|
4406
|
+
declare const SIZES$2: readonly ["s", "m", "l"];
|
|
4407
|
+
type Size$1 = (typeof SIZES$2)[number];
|
|
4408
|
+
declare class DbEmailVerify extends HTMLElement {
|
|
4409
|
+
static get observedAttributes(): string[];
|
|
4410
|
+
private built;
|
|
4411
|
+
private timerId;
|
|
4412
|
+
private remaining;
|
|
4413
|
+
private emailInput;
|
|
4414
|
+
private sendBtn;
|
|
4415
|
+
private otpInput;
|
|
4416
|
+
private timerEl;
|
|
4417
|
+
private resendBtn;
|
|
4418
|
+
private verifyBtn;
|
|
4419
|
+
private confirmBtn;
|
|
4420
|
+
private codeBlock;
|
|
4421
|
+
private confirmBlock;
|
|
4422
|
+
private verifiedBlock;
|
|
4423
|
+
private emailRow;
|
|
4424
|
+
private errorEl;
|
|
4425
|
+
private closeBtn?;
|
|
4426
|
+
get mode(): 'code' | 'confirm';
|
|
4427
|
+
set mode(v: 'code' | 'confirm');
|
|
4428
|
+
get size(): Size$1;
|
|
4429
|
+
set size(v: Size$1);
|
|
4430
|
+
get step(): 'email' | 'code' | 'sent' | 'verified';
|
|
4431
|
+
set step(v: 'email' | 'code' | 'sent' | 'verified');
|
|
4432
|
+
get email(): string;
|
|
4433
|
+
set email(v: string);
|
|
4434
|
+
get countdown(): number;
|
|
4435
|
+
set countdown(v: number);
|
|
4436
|
+
connectedCallback(): void;
|
|
4437
|
+
disconnectedCallback(): void;
|
|
4438
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
4439
|
+
startCodeStep(): void;
|
|
4440
|
+
/** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
|
|
4441
|
+
restartCountdown(): void;
|
|
4442
|
+
markSent(): void;
|
|
4443
|
+
markVerified(): void;
|
|
4444
|
+
private clearTimer;
|
|
4445
|
+
private startTimer;
|
|
4446
|
+
private renderTimer;
|
|
4447
|
+
private build;
|
|
4448
|
+
private sync;
|
|
4449
|
+
private isEmailValid;
|
|
4450
|
+
private requestVerify;
|
|
4451
|
+
private setEmphasizedText;
|
|
4452
|
+
}
|
|
4453
|
+
declare global {
|
|
4454
|
+
interface HTMLElementTagNameMap {
|
|
4455
|
+
'db-email-verify': DbEmailVerify;
|
|
4456
|
+
}
|
|
4457
|
+
}
|
|
4458
|
+
|
|
4459
|
+
/**
|
|
4460
|
+
* ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)
|
|
4461
|
+
*
|
|
4462
|
+
* 2단계 인증(2FA): 인증앱 / SMS / 이메일 방식 + OTP.
|
|
4463
|
+
*/
|
|
4464
|
+
|
|
4465
|
+
declare const METHODS: readonly [{
|
|
4466
|
+
readonly value: "app";
|
|
4467
|
+
readonly label: "인증 앱";
|
|
4468
|
+
}, {
|
|
4469
|
+
readonly value: "sms";
|
|
4470
|
+
readonly label: "SMS";
|
|
4471
|
+
}, {
|
|
4472
|
+
readonly value: "email";
|
|
4473
|
+
readonly label: "이메일";
|
|
4474
|
+
}];
|
|
4475
|
+
declare const SIZES$1: readonly ["s", "m", "l"];
|
|
4476
|
+
type Size = (typeof SIZES$1)[number];
|
|
4477
|
+
type Method = (typeof METHODS)[number]['value'];
|
|
4478
|
+
declare class DbTwoFactor extends HTMLElement {
|
|
4479
|
+
static get observedAttributes(): string[];
|
|
4480
|
+
private built;
|
|
4481
|
+
private timerId;
|
|
4482
|
+
private remaining;
|
|
4483
|
+
private segment;
|
|
4484
|
+
private otpInput;
|
|
4485
|
+
private hintEl;
|
|
4486
|
+
private timerEl;
|
|
4487
|
+
private codeHead;
|
|
4488
|
+
private resendBtn;
|
|
4489
|
+
private verifyBtn;
|
|
4490
|
+
private backupBtn;
|
|
4491
|
+
private errorEl;
|
|
4492
|
+
private channelActions;
|
|
4493
|
+
private resendStatus;
|
|
4494
|
+
private backupBlock;
|
|
4495
|
+
private backupInput;
|
|
4496
|
+
private backupCancelBtn;
|
|
4497
|
+
private backupMode;
|
|
4498
|
+
private resendCount;
|
|
4499
|
+
get method(): Method;
|
|
4500
|
+
set method(v: Method);
|
|
4501
|
+
get size(): Size;
|
|
4502
|
+
set size(v: Size);
|
|
4503
|
+
get countdown(): number;
|
|
4504
|
+
set countdown(v: number);
|
|
4505
|
+
get maxResends(): number;
|
|
4506
|
+
connectedCallback(): void;
|
|
4507
|
+
disconnectedCallback(): void;
|
|
4508
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
4509
|
+
/** 수동 제어 모드에서 코드 발송 성공 후 카운트다운을 시작합니다. */
|
|
4510
|
+
restartCountdown(): void;
|
|
4511
|
+
private clearTimer;
|
|
4512
|
+
private startTimer;
|
|
4513
|
+
private renderTimer;
|
|
4514
|
+
private build;
|
|
4515
|
+
private sync;
|
|
4516
|
+
private requestVerify;
|
|
4517
|
+
}
|
|
4518
|
+
declare global {
|
|
4519
|
+
interface HTMLElementTagNameMap {
|
|
4520
|
+
'db-two-factor': DbTwoFactor;
|
|
4521
|
+
}
|
|
4522
|
+
}
|
|
4523
|
+
|
|
4524
|
+
declare const SIZES: readonly ["xs", "s", "m", "l", "xl"];
|
|
4525
|
+
declare const VARIANTS: readonly ["aurora", "ocean", "emerald", "violet", "mono"];
|
|
4526
|
+
declare const STATES: readonly ["idle", "thinking", "listening"];
|
|
4527
|
+
declare const THEMES: readonly ["auto", "light", "dark"];
|
|
4528
|
+
type OrbSize = (typeof SIZES)[number];
|
|
4529
|
+
type OrbVariant = (typeof VARIANTS)[number];
|
|
4530
|
+
type OrbState = (typeof STATES)[number];
|
|
4531
|
+
type OrbTheme = (typeof THEMES)[number];
|
|
4532
|
+
/**
|
|
4533
|
+
* AI 어시스턴트를 상징하는 캔버스 기반 애니메이션 오브(구체).
|
|
4534
|
+
* 광택 있는 3D 구체 위에 유체처럼 흐르는 내부 광원 + 프레넬 림 라이트 + 스페큘러 하이라이트로
|
|
4535
|
+
* 고품질 오브를 렌더링합니다. `state` 에 따라 모양(진폭·난류)·색(밝기)·인터랙션(리플)이 바뀌며,
|
|
4536
|
+
* 포인터를 올리면 하이라이트와 내부 광원이 살짝 따라옵니다. 순수 장식이라 `aria-hidden` 입니다.
|
|
4537
|
+
*
|
|
4538
|
+
* @example
|
|
4539
|
+
* <db-chat-orb variant="aurora" state="thinking"></db-chat-orb>
|
|
4540
|
+
*
|
|
4541
|
+
* @example
|
|
4542
|
+
* const orb = document.querySelector('db-chat-orb');
|
|
4543
|
+
* orb.state = 'listening';
|
|
4544
|
+
* orb.minScale = 0.86;
|
|
4545
|
+
* orb.maxScale = 1.2;
|
|
4546
|
+
* orb.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
4547
|
+
*/
|
|
4548
|
+
declare class DbChatOrb extends HTMLElement {
|
|
4549
|
+
static get observedAttributes(): string[];
|
|
4550
|
+
private canvas;
|
|
4551
|
+
private ctx;
|
|
4552
|
+
private dpr;
|
|
4553
|
+
private cssW;
|
|
4554
|
+
private cssH;
|
|
4555
|
+
private t0;
|
|
4556
|
+
private lastFrame;
|
|
4557
|
+
private resizeObs;
|
|
4558
|
+
private io;
|
|
4559
|
+
private themeObserver;
|
|
4560
|
+
private themeMedia;
|
|
4561
|
+
private visible;
|
|
4562
|
+
private hover;
|
|
4563
|
+
private ripples;
|
|
4564
|
+
private lastAutoRipple;
|
|
4565
|
+
private lastVoiceRipple;
|
|
4566
|
+
private previousVoiceLevel;
|
|
4567
|
+
private displayedVoiceLevel;
|
|
4568
|
+
private inputStream;
|
|
4569
|
+
private audioContext;
|
|
4570
|
+
private audioSource;
|
|
4571
|
+
private analyser;
|
|
4572
|
+
private analyserData;
|
|
4573
|
+
get size(): OrbSize;
|
|
4574
|
+
set size(v: OrbSize);
|
|
4575
|
+
get variant(): OrbVariant;
|
|
4576
|
+
set variant(v: OrbVariant);
|
|
4577
|
+
get state(): OrbState;
|
|
4578
|
+
set state(v: OrbState);
|
|
4579
|
+
get theme(): OrbTheme;
|
|
4580
|
+
set theme(v: OrbTheme);
|
|
4581
|
+
/** 외부 오디오 분석기가 전달하는 정규화 음성 레벨(0–1). */
|
|
4582
|
+
get voiceLevel(): number;
|
|
4583
|
+
set voiceLevel(v: number);
|
|
4584
|
+
/** listening 무음 구간의 최소 구체 배율. */
|
|
4585
|
+
get minScale(): number;
|
|
4586
|
+
set minScale(v: number);
|
|
4587
|
+
/** listening 최대 음량 구간의 최대 구체 배율. */
|
|
4588
|
+
get maxScale(): number;
|
|
4589
|
+
set maxScale(v: number);
|
|
4590
|
+
/**
|
|
4591
|
+
* 실제 마이크/통화 MediaStream. 내부 AnalyserNode로 RMS를 계산하며 오디오를 재생하거나
|
|
4592
|
+
* 전달받은 트랙을 stop()하지 않습니다. null을 할당하면 분석만 해제합니다.
|
|
4593
|
+
*/
|
|
4594
|
+
get audioStream(): MediaStream | null;
|
|
4595
|
+
set audioStream(stream: MediaStream | null);
|
|
4596
|
+
connectedCallback(): void;
|
|
4597
|
+
disconnectedCallback(): void;
|
|
4598
|
+
attributeChangedCallback(name: string): void;
|
|
4599
|
+
private setVisible;
|
|
4600
|
+
private syncClasses;
|
|
4601
|
+
private build;
|
|
4602
|
+
private onPointerMove;
|
|
4603
|
+
private onPointerLeave;
|
|
4604
|
+
private onPointerDown;
|
|
4605
|
+
private addRipple;
|
|
4606
|
+
private observeTheme;
|
|
4607
|
+
private onThemeChange;
|
|
4608
|
+
private isDarkContext;
|
|
4609
|
+
private startAudioAnalysis;
|
|
4610
|
+
private stopAudioAnalysis;
|
|
4611
|
+
private sampleVoiceLevel;
|
|
4612
|
+
private resize;
|
|
4613
|
+
/** 공유 틱커가 호출 — 한 프레임 렌더 */
|
|
4614
|
+
frame(now: number): void;
|
|
4615
|
+
}
|
|
4616
|
+
declare global {
|
|
4617
|
+
interface HTMLElementTagNameMap {
|
|
4618
|
+
'db-chat-orb': DbChatOrb;
|
|
4619
|
+
}
|
|
4620
|
+
}
|
|
4621
|
+
|
|
4622
|
+
/**
|
|
4623
|
+
* 채팅 시작 전 화면의 히어로 블록.
|
|
4624
|
+
* 오브(또는 로고 이미지) + 인사말 + 타이틀 + 서브타이틀을 렌더링합니다.
|
|
4625
|
+
* 타이틀의 `highlight` 부분은 그라디언트로 강조됩니다.
|
|
4626
|
+
*
|
|
4627
|
+
* 컴포저(`db-chat-composer`)와 추천(`db-chat-suggestions`)은 형제 요소로 배치합니다.
|
|
4628
|
+
*
|
|
4629
|
+
* @example
|
|
4630
|
+
* <db-chat-welcome
|
|
4631
|
+
* greeting="안녕하세요"
|
|
4632
|
+
* title="오늘은 무엇을 도와드릴까요?"
|
|
4633
|
+
* highlight="도와드릴까요"
|
|
4634
|
+
* orb-variant="aurora">
|
|
4635
|
+
* </db-chat-welcome>
|
|
4636
|
+
*/
|
|
4637
|
+
declare class DbChatWelcome extends HTMLElement {
|
|
4638
|
+
static get observedAttributes(): string[];
|
|
4639
|
+
connectedCallback(): void;
|
|
4640
|
+
attributeChangedCallback(): void;
|
|
4641
|
+
private render;
|
|
4642
|
+
/** 타이틀에서 highlight 구간만 그라디언트 span 으로 감싼다. */
|
|
4643
|
+
private appendTitle;
|
|
4644
|
+
}
|
|
4645
|
+
declare global {
|
|
4646
|
+
interface HTMLElementTagNameMap {
|
|
4647
|
+
'db-chat-welcome': DbChatWelcome;
|
|
4648
|
+
}
|
|
4649
|
+
}
|
|
4650
|
+
|
|
4651
|
+
type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
|
|
4652
|
+
|
|
4653
|
+
interface DbChatTool {
|
|
4654
|
+
/** 고유 id (이벤트 detail 로 전달) */
|
|
4655
|
+
id: string;
|
|
4656
|
+
/** 표시 라벨 */
|
|
4657
|
+
label: string;
|
|
4658
|
+
/** 시작 아이콘 (DbIconName) */
|
|
4659
|
+
icon?: DbIconName;
|
|
4660
|
+
/** 활성 여부 */
|
|
4661
|
+
active?: boolean;
|
|
4662
|
+
}
|
|
4663
|
+
interface DbChatAttachOption {
|
|
4664
|
+
/** 고유 id (예: 'image', 'file', 'camera') */
|
|
4665
|
+
id: string;
|
|
4666
|
+
/** 표시 라벨 */
|
|
4667
|
+
label: string;
|
|
4668
|
+
/** 메뉴 아이콘 (DbIconName) */
|
|
4669
|
+
icon?: DbIconName;
|
|
4670
|
+
/** 파일 선택 시 accept 값. 지정하면 파일 선택창을 엽니다. 없으면 db-attach 이벤트만 발행 */
|
|
4671
|
+
accept?: string;
|
|
4672
|
+
/** 카메라/캡처 (모바일). 'user' | 'environment' */
|
|
4673
|
+
capture?: 'user' | 'environment';
|
|
4674
|
+
/** 다중 선택 허용 */
|
|
4675
|
+
multiple?: boolean;
|
|
4676
|
+
/** 보조 설명 (선택) */
|
|
4677
|
+
description?: string;
|
|
4678
|
+
}
|
|
4679
|
+
interface DbChatAttachment {
|
|
4680
|
+
id: string;
|
|
4681
|
+
name: string;
|
|
4682
|
+
/** 바이트 크기 */
|
|
4683
|
+
size: number;
|
|
4684
|
+
/** MIME 타입 */
|
|
4685
|
+
mime: string;
|
|
4686
|
+
/** 표시 종류 (아이콘 결정) */
|
|
4687
|
+
kind: 'image' | 'video' | 'file';
|
|
4688
|
+
/** 원본 File (파일 선택 시) */
|
|
4689
|
+
file?: File;
|
|
4690
|
+
/** 이미지 미리보기 objectURL */
|
|
4691
|
+
preview?: string;
|
|
4692
|
+
}
|
|
4693
|
+
/**
|
|
4694
|
+
* AI 채팅 입력 컴포저. 채팅 시작 전/중 모두에서 사용합니다.
|
|
4695
|
+
* 자동 높이 textarea + 툴바(첨부·툴 토글·음성·전송)로 구성되며,
|
|
4696
|
+
* 전송 버튼은 `db-button`, 툴 토글·첨부 미리보기는 `db-chip` 을 재사용합니다.
|
|
4697
|
+
*
|
|
4698
|
+
* - 툴 토글: `db-chip` 의 `default`↔`primary` variant 로 선택 상태를 표현합니다.
|
|
4699
|
+
* - 첨부: 첨부 버튼을 누르면 드롭다운이 열려 이미지·동영상·파일·카메라 등
|
|
4700
|
+
* 여러 종류를 선택할 수 있고, 고른 파일은 삭제 가능한 칩으로 미리보기됩니다.
|
|
4701
|
+
* - 전송 중(`streaming`)에는 전송 버튼이 정지 버튼으로 바뀝니다.
|
|
4702
|
+
*
|
|
4703
|
+
* @example
|
|
4704
|
+
* const c = document.querySelector('db-chat-composer');
|
|
4705
|
+
* c.tools = [{ id:'reason', label:'추론', icon:'bulb' }];
|
|
4706
|
+
* c.addEventListener('db-send', (e) => console.log(e.detail.value, e.detail.attachments));
|
|
4707
|
+
*/
|
|
4708
|
+
declare class DbChatComposer extends HTMLElement {
|
|
4709
|
+
static get observedAttributes(): string[];
|
|
4710
|
+
private built;
|
|
4711
|
+
private _tools;
|
|
4712
|
+
private _attachOptions;
|
|
4713
|
+
private _attachments;
|
|
4714
|
+
private attachMenuOpen;
|
|
4715
|
+
private field;
|
|
4716
|
+
private attachmentsEl;
|
|
4717
|
+
private toolsEl;
|
|
4718
|
+
private attachWrap;
|
|
4719
|
+
private attachBtn;
|
|
4720
|
+
private attachMenu;
|
|
4721
|
+
private fileInput;
|
|
4722
|
+
private micBtn;
|
|
4723
|
+
private sendBtn;
|
|
4724
|
+
get value(): string;
|
|
4725
|
+
set value(v: string);
|
|
4726
|
+
get streaming(): boolean;
|
|
4727
|
+
set streaming(v: boolean);
|
|
4728
|
+
get disabled(): boolean;
|
|
4729
|
+
set disabled(v: boolean);
|
|
4730
|
+
/** 툴 토글 목록 (JSON 프로퍼티) */
|
|
4731
|
+
get tools(): DbChatTool[];
|
|
4732
|
+
set tools(list: DbChatTool[]);
|
|
4733
|
+
/** 첨부 드롭다운 옵션 목록 */
|
|
4734
|
+
get attachOptions(): DbChatAttachOption[];
|
|
4735
|
+
set attachOptions(list: DbChatAttachOption[]);
|
|
4736
|
+
/** 현재 첨부 목록 (읽기 전용 복사본) */
|
|
4737
|
+
get attachments(): DbChatAttachment[];
|
|
4738
|
+
connectedCallback(): void;
|
|
4739
|
+
disconnectedCallback(): void;
|
|
4740
|
+
attributeChangedCallback(name: string): void;
|
|
4741
|
+
private build;
|
|
4742
|
+
private makeIconButton;
|
|
4743
|
+
private sync;
|
|
4744
|
+
private renderTools;
|
|
4745
|
+
private renderAttachMenu;
|
|
4746
|
+
private renderAttachments;
|
|
4747
|
+
private renderSendButton;
|
|
4748
|
+
private syncSendState;
|
|
4749
|
+
private autoGrow;
|
|
4750
|
+
private handleAttachClick;
|
|
4751
|
+
private openAttachMenu;
|
|
4752
|
+
private closeAttachMenu;
|
|
4753
|
+
private handleOutsideClick;
|
|
4754
|
+
private chooseAttachOption;
|
|
4755
|
+
private handleFilePicked;
|
|
4756
|
+
private addFile;
|
|
4757
|
+
private attachmentMeta;
|
|
4758
|
+
private handleInput;
|
|
4759
|
+
private handleKeyDown;
|
|
4760
|
+
private handleSendClick;
|
|
4761
|
+
private submit;
|
|
4762
|
+
/** 입력 필드를 비웁니다. */
|
|
4763
|
+
clear(): void;
|
|
4764
|
+
/** 첨부를 하나 제거합니다. */
|
|
4765
|
+
removeAttachment(id: string): void;
|
|
4766
|
+
/** 모든 첨부를 제거합니다. */
|
|
4767
|
+
clearAttachments(): void;
|
|
4768
|
+
/** 프로그램적으로 첨부를 추가합니다(파일 또는 메타). */
|
|
4769
|
+
addAttachment(input: File | Omit<DbChatAttachment, 'id' | 'kind'>): void;
|
|
4770
|
+
/** 입력 필드에 포커스합니다. */
|
|
4771
|
+
focusInput(): void;
|
|
4772
|
+
/** 전송 중(정지 버튼) 상태를 설정합니다. */
|
|
4773
|
+
setStreaming(streaming: boolean): void;
|
|
4774
|
+
}
|
|
4775
|
+
declare global {
|
|
4776
|
+
interface HTMLElementTagNameMap {
|
|
4777
|
+
'db-chat-composer': DbChatComposer;
|
|
4778
|
+
}
|
|
4779
|
+
}
|
|
4780
|
+
|
|
4781
|
+
interface DbChatSuggestion {
|
|
4782
|
+
/** 고유 id */
|
|
4783
|
+
id?: string;
|
|
4784
|
+
/** 제목 (카드/칩 라벨) */
|
|
4785
|
+
title: string;
|
|
4786
|
+
/** 설명 (카드 레이아웃에서만 표시) */
|
|
4787
|
+
description?: string;
|
|
4788
|
+
/** 아이콘 (DbIconName) */
|
|
4789
|
+
icon?: DbIconName;
|
|
4790
|
+
/** 선택 시 전달될 값 (기본값: title) */
|
|
4791
|
+
value?: string;
|
|
4792
|
+
}
|
|
4793
|
+
/**
|
|
4794
|
+
* 채팅 시작 화면의 추천 프롬프트 목록.
|
|
4795
|
+
* `layout="card"` 는 아이콘·제목·설명이 있는 카드 그리드,
|
|
4796
|
+
* `layout="chip"` 은 클릭 가능한 칩(db-chip 재사용) 행으로 렌더링합니다.
|
|
4797
|
+
*
|
|
4798
|
+
* @example
|
|
4799
|
+
* const s = document.querySelector('db-chat-suggestions');
|
|
4800
|
+
* s.items = [{ title:'Write Copy', description:'...', icon:'edit' }];
|
|
4801
|
+
* s.addEventListener('db-select', (e) => console.log(e.detail.value));
|
|
4802
|
+
*/
|
|
4803
|
+
declare class DbChatSuggestions extends HTMLElement {
|
|
4804
|
+
static get observedAttributes(): string[];
|
|
4805
|
+
private _items;
|
|
4806
|
+
get items(): DbChatSuggestion[];
|
|
4807
|
+
set items(list: DbChatSuggestion[]);
|
|
4808
|
+
get layout(): string;
|
|
4809
|
+
connectedCallback(): void;
|
|
4810
|
+
attributeChangedCallback(): void;
|
|
4811
|
+
private select;
|
|
4812
|
+
private render;
|
|
4813
|
+
}
|
|
4814
|
+
declare global {
|
|
4815
|
+
interface HTMLElementTagNameMap {
|
|
4816
|
+
'db-chat-suggestions': DbChatSuggestions;
|
|
4817
|
+
}
|
|
4818
|
+
}
|
|
4819
|
+
|
|
4820
|
+
declare const ROLES: readonly ["user", "assistant", "system"];
|
|
4821
|
+
type Role = (typeof ROLES)[number];
|
|
4822
|
+
/**
|
|
4823
|
+
* 채팅 메시지 한 줄. 본문은 라이트 DOM 자식으로 전달하며 컴포넌트가 감쌉니다.
|
|
4824
|
+
* 아바타는 `db-avatar` 를 재사용합니다.
|
|
4825
|
+
*
|
|
4826
|
+
* @example
|
|
4827
|
+
* <db-chat-message role="assistant" name="Orion" actions="copy,regenerate,like,dislike">
|
|
4828
|
+
* 안녕하세요! 무엇을 도와드릴까요?
|
|
4829
|
+
* </db-chat-message>
|
|
4830
|
+
*/
|
|
4831
|
+
declare class DbChatMessage extends HTMLElement {
|
|
4832
|
+
static get observedAttributes(): string[];
|
|
4833
|
+
private built;
|
|
4834
|
+
private contentEl;
|
|
4835
|
+
private avatarWrap;
|
|
4836
|
+
private headerEl;
|
|
4837
|
+
private nameEl;
|
|
4838
|
+
private timeEl;
|
|
4839
|
+
private actionsEl;
|
|
4840
|
+
get role(): Role;
|
|
4841
|
+
set role(v: Role);
|
|
4842
|
+
connectedCallback(): void;
|
|
4843
|
+
attributeChangedCallback(name: string): void;
|
|
4844
|
+
private build;
|
|
4845
|
+
private sync;
|
|
4846
|
+
private renderAvatar;
|
|
4847
|
+
private renderActions;
|
|
4848
|
+
private handleAction;
|
|
4849
|
+
}
|
|
4850
|
+
declare global {
|
|
4851
|
+
interface HTMLElementTagNameMap {
|
|
4852
|
+
'db-chat-message': DbChatMessage;
|
|
4853
|
+
}
|
|
4854
|
+
}
|
|
4855
|
+
|
|
4856
|
+
/**
|
|
4857
|
+
* AI 응답 대기(생성 중) 표시. 3점 바운스 인디케이터.
|
|
4858
|
+
* 아바타는 `db-avatar` 를 재사용합니다.
|
|
4859
|
+
*
|
|
4860
|
+
* @example
|
|
4861
|
+
* <db-chat-typing name="Orion" label="생각 중…"></db-chat-typing>
|
|
4862
|
+
*/
|
|
4863
|
+
declare class DbChatTyping extends HTMLElement {
|
|
4864
|
+
static get observedAttributes(): string[];
|
|
4865
|
+
connectedCallback(): void;
|
|
4866
|
+
attributeChangedCallback(): void;
|
|
4867
|
+
private render;
|
|
4868
|
+
}
|
|
4869
|
+
declare global {
|
|
4870
|
+
interface HTMLElementTagNameMap {
|
|
4871
|
+
'db-chat-typing': DbChatTyping;
|
|
4872
|
+
}
|
|
4873
|
+
}
|
|
4874
|
+
|
|
4875
|
+
declare const VIEWS: readonly ["home", "messages", "conversation", "help"];
|
|
4876
|
+
type ChatView = (typeof VIEWS)[number];
|
|
4877
|
+
declare const POSITIONS: readonly ["bottom-right", "bottom-left"];
|
|
4878
|
+
type ChatPosition = (typeof POSITIONS)[number];
|
|
4879
|
+
interface DbChatWidgetMessage {
|
|
4880
|
+
id?: string;
|
|
4881
|
+
/** `assistant`(상담원/봇) 또는 `user` */
|
|
4882
|
+
role?: 'assistant' | 'user';
|
|
4883
|
+
text: string;
|
|
4884
|
+
name?: string;
|
|
4885
|
+
time?: string;
|
|
4886
|
+
avatarSrc?: string;
|
|
4887
|
+
avatarInitials?: string;
|
|
4888
|
+
/** 말풍선 액션 (예: 'copy,like,dislike') — db-chat-message 로 전달 */
|
|
4889
|
+
actions?: string;
|
|
4890
|
+
}
|
|
4891
|
+
interface DbChatWidgetConversation {
|
|
4892
|
+
id?: string;
|
|
4893
|
+
name: string;
|
|
4894
|
+
avatarSrc?: string;
|
|
4895
|
+
avatarInitials?: string;
|
|
4896
|
+
preview?: string;
|
|
4897
|
+
time?: string;
|
|
4898
|
+
unread?: number;
|
|
4899
|
+
online?: boolean;
|
|
4900
|
+
}
|
|
4901
|
+
/**
|
|
4902
|
+
* FAB 로 열고 닫는 우측 하단 채팅 상담 위젯(껍데기).
|
|
4903
|
+
*
|
|
4904
|
+
* 홈·메시지·대화·도움말 4개 화면을 하단 탭으로 전환하며, 본문은 AI 채팅 프리미티브
|
|
4905
|
+
* (`db-chat-welcome` · `db-chat-message` · `db-chat-typing` · `db-chat-composer`
|
|
4906
|
+
* · `db-chat-suggestions` · `db-chat-orb`)를 조합해 구성합니다. 실제 백엔드 연동
|
|
4907
|
+
* 없이 UI 골격만 제공하고, 상호작용은 이벤트로 위임합니다.
|
|
4908
|
+
*
|
|
4909
|
+
* @fires db-open - 패널 열림
|
|
4910
|
+
* @fires db-close - 패널 닫힘
|
|
4911
|
+
* @fires db-toggle - FAB 토글 (detail: { open })
|
|
4912
|
+
* @fires db-view-change - 화면 전환 (detail: { view })
|
|
4913
|
+
* @fires db-send - 메시지 전송 (detail: { text })
|
|
4914
|
+
* @fires db-menu-select - 홈 메뉴 선택 (detail: { id, value })
|
|
4915
|
+
* @fires db-quick-reply - 빠른 답변 선택 (detail: { id, value })
|
|
4916
|
+
* @fires db-article-select - 도움말 문서 선택 (detail: { id, title })
|
|
4917
|
+
* @fires db-conversation-select - 대화 목록 선택 (detail: { id })
|
|
4918
|
+
* @fires db-message-action - 말풍선 액션 (detail: { action, text })
|
|
4919
|
+
*
|
|
4920
|
+
* @example
|
|
4921
|
+
* const chat = document.createElement('db-chat-widget');
|
|
4922
|
+
* chat.setAttribute('agent-name', '디지털 상담원');
|
|
4923
|
+
* chat.setAttribute('unread', '2');
|
|
4924
|
+
* document.body.appendChild(chat);
|
|
4925
|
+
* chat.addEventListener('db-send', (e) => {
|
|
4926
|
+
* chat.setTyping(true);
|
|
4927
|
+
* setTimeout(() => {
|
|
4928
|
+
* chat.setTyping(false);
|
|
4929
|
+
* chat.addMessage({ role: 'assistant', text: '확인했어요!' });
|
|
4930
|
+
* }, 900);
|
|
4931
|
+
* });
|
|
4932
|
+
*/
|
|
4933
|
+
declare class DbChatWidget extends HTMLElement {
|
|
4934
|
+
static get observedAttributes(): string[];
|
|
4935
|
+
private built;
|
|
4936
|
+
private typing;
|
|
4937
|
+
private _messages;
|
|
4938
|
+
private _conversations;
|
|
4939
|
+
private _menuItems;
|
|
4940
|
+
private _quickReplies;
|
|
4941
|
+
private _articles;
|
|
4942
|
+
private launcher;
|
|
4943
|
+
private launcherBadge;
|
|
4944
|
+
private panel;
|
|
4945
|
+
private headerEl;
|
|
4946
|
+
private bodyEl;
|
|
4947
|
+
private footerEl;
|
|
4948
|
+
private navEl;
|
|
4949
|
+
private composer;
|
|
4950
|
+
private threadEl;
|
|
4951
|
+
get open(): boolean;
|
|
4952
|
+
set open(v: boolean);
|
|
4953
|
+
get view(): ChatView;
|
|
4954
|
+
set view(v: ChatView);
|
|
4955
|
+
get position(): ChatPosition;
|
|
4956
|
+
set position(v: ChatPosition);
|
|
4957
|
+
get unread(): number;
|
|
4958
|
+
set unread(v: number);
|
|
4959
|
+
set messages(v: DbChatWidgetMessage[]);
|
|
4960
|
+
get messages(): DbChatWidgetMessage[];
|
|
4961
|
+
set conversations(v: DbChatWidgetConversation[]);
|
|
4962
|
+
get conversations(): DbChatWidgetConversation[];
|
|
4963
|
+
set menuItems(v: DbChatSuggestion[]);
|
|
4964
|
+
get menuItems(): DbChatSuggestion[];
|
|
4965
|
+
set quickReplies(v: DbChatSuggestion[]);
|
|
4966
|
+
get quickReplies(): DbChatSuggestion[];
|
|
4967
|
+
set articles(v: DbChatSuggestion[]);
|
|
4968
|
+
get articles(): DbChatSuggestion[];
|
|
4969
|
+
connectedCallback(): void;
|
|
4970
|
+
attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
|
|
4971
|
+
private hydrateFromAttributes;
|
|
4972
|
+
private build;
|
|
4973
|
+
private sync;
|
|
4974
|
+
private syncOpenState;
|
|
4975
|
+
private renderBadge;
|
|
4976
|
+
private renderHeader;
|
|
4977
|
+
private iconButton;
|
|
4978
|
+
private renderBody;
|
|
4979
|
+
private renderHome;
|
|
4980
|
+
private renderMessages;
|
|
4981
|
+
private renderConversation;
|
|
4982
|
+
private renderHelp;
|
|
4983
|
+
private buildMessage;
|
|
4984
|
+
private buildTyping;
|
|
4985
|
+
private buildEmpty;
|
|
4986
|
+
private renderFooter;
|
|
4987
|
+
private renderNav;
|
|
4988
|
+
private scrollThreadToEnd;
|
|
4989
|
+
private nowLabel;
|
|
4990
|
+
private dispatch;
|
|
4991
|
+
openWidget(): void;
|
|
4992
|
+
close(): void;
|
|
4993
|
+
toggle(): void;
|
|
4994
|
+
setView(view: ChatView): void;
|
|
4995
|
+
/** 스레드에 메시지를 추가하고 대화 화면으로 전환/렌더 */
|
|
4996
|
+
addMessage(msg: DbChatWidgetMessage): void;
|
|
4997
|
+
/** 챗봇 입력중(...) 표시 토글 */
|
|
4998
|
+
setTyping(on: boolean): void;
|
|
4999
|
+
/** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
|
|
5000
|
+
setStreaming(on: boolean): void;
|
|
5001
|
+
/** 스레드 전체 교체 */
|
|
5002
|
+
setMessages(messages: DbChatWidgetMessage[]): void;
|
|
5003
|
+
}
|
|
5004
|
+
declare global {
|
|
5005
|
+
interface HTMLElementTagNameMap {
|
|
5006
|
+
'db-chat-widget': DbChatWidget;
|
|
5007
|
+
}
|
|
5008
|
+
}
|
|
5009
|
+
|
|
5010
|
+
interface DbArtifactOptions {
|
|
5011
|
+
/** 패널 헤더 제목 */
|
|
5012
|
+
title?: string;
|
|
5013
|
+
/** 헤더 부제(선택) */
|
|
5014
|
+
subtitle?: string;
|
|
5015
|
+
/** 본문 HTML (setArtifactContent 로 요소를 직접 넣을 수도 있음) */
|
|
5016
|
+
html?: string;
|
|
5017
|
+
/** 인라인 카드와 동기화할 id (toggle 용) */
|
|
5018
|
+
id?: string;
|
|
5019
|
+
}
|
|
5020
|
+
/** 채팅 스레드 안에 노출되는 결과물(아티팩트) 카드 */
|
|
5021
|
+
interface DbChatArtifactRef {
|
|
5022
|
+
id?: string;
|
|
5023
|
+
title: string;
|
|
5024
|
+
subtitle?: string;
|
|
5025
|
+
icon?: string;
|
|
5026
|
+
html?: string;
|
|
5027
|
+
}
|
|
5028
|
+
interface DbChatMessageData {
|
|
5029
|
+
id?: string;
|
|
5030
|
+
role?: 'user' | 'assistant' | 'system';
|
|
5031
|
+
/** 평문 본문 */
|
|
5032
|
+
text?: string;
|
|
5033
|
+
/** HTML 본문 (text 대신) */
|
|
5034
|
+
html?: string;
|
|
5035
|
+
name?: string;
|
|
5036
|
+
time?: string;
|
|
5037
|
+
avatarSrc?: string;
|
|
5038
|
+
avatarInitials?: string;
|
|
5039
|
+
/** 말풍선 액션 (예: 'copy,regenerate,like,dislike') */
|
|
5040
|
+
actions?: string;
|
|
5041
|
+
status?: 'sending' | 'error';
|
|
5042
|
+
variant?: 'bubble' | 'plain';
|
|
5043
|
+
/** 스레드 인라인 결과물 카드 — 클릭 시 우측 아티팩트 패널 토글 */
|
|
5044
|
+
artifact?: DbChatArtifactRef;
|
|
5045
|
+
}
|
|
5046
|
+
/**
|
|
5047
|
+
* 전체 대화형 AI 채팅 화면. 시작 전(빈 상태)과 대화 중을 하나로 통합한 최상위 컴포넌트로,
|
|
5048
|
+
* 채팅 프리미티브(`db-chat-welcome` · `db-chat-suggestions` · `db-chat-message`
|
|
5049
|
+
* · `db-chat-typing` · `db-chat-composer`)를 조합합니다.
|
|
5050
|
+
*
|
|
5051
|
+
* - 메시지가 없으면 히어로(인사말 + 추천)를 중앙에 보여주고,
|
|
5052
|
+
* - 메시지가 생기면 스크롤 스레드로 전환하며, 컴포저는 항상 하단에 고정됩니다.
|
|
5053
|
+
*
|
|
5054
|
+
* @fires db-send - 전송 (detail: { value, attachments })
|
|
5055
|
+
* @fires db-stop - 생성 중지
|
|
5056
|
+
* @fires db-tool-toggle - 툴 토글 (detail: { id, active })
|
|
5057
|
+
* @fires db-attach - 첨부 종류 선택 (detail: { type })
|
|
5058
|
+
* @fires db-attach-files - 파일 선택 (detail: { type, files })
|
|
5059
|
+
* @fires db-voice - 음성 입력
|
|
5060
|
+
* @fires db-suggestion-select - 추천 선택 (detail: { id, title, value })
|
|
5061
|
+
* @fires db-message-action - 말풍선 액션 (detail: { action, text })
|
|
5062
|
+
*
|
|
5063
|
+
* @example
|
|
5064
|
+
* const chat = document.querySelector('db-chat');
|
|
5065
|
+
* chat.suggestions = [{ title:'카피 작성', icon:'edit' }];
|
|
5066
|
+
* chat.tools = [{ id:'reason', label:'Reasoning', icon:'bulb' }];
|
|
5067
|
+
* chat.addEventListener('db-send', (e) => {
|
|
5068
|
+
* chat.addMessage({ role:'user', text: e.detail.value });
|
|
5069
|
+
* chat.setTyping(true);
|
|
5070
|
+
* });
|
|
5071
|
+
*/
|
|
5072
|
+
declare class DbAiChat extends HTMLElement {
|
|
5073
|
+
static get observedAttributes(): string[];
|
|
5074
|
+
private built;
|
|
5075
|
+
private typing;
|
|
5076
|
+
private _messages;
|
|
5077
|
+
private _suggestions;
|
|
5078
|
+
private _tools;
|
|
5079
|
+
private _attachOptions;
|
|
5080
|
+
private mainEl;
|
|
5081
|
+
private scrollEl;
|
|
5082
|
+
private dockEl;
|
|
5083
|
+
private composer;
|
|
5084
|
+
private threadEl;
|
|
5085
|
+
private artifactEl;
|
|
5086
|
+
private artifactTitleEl;
|
|
5087
|
+
private artifactSubtitleEl;
|
|
5088
|
+
private artifactBodyEl;
|
|
5089
|
+
private activeArtifactId;
|
|
5090
|
+
private artifactSeq;
|
|
5091
|
+
set messages(v: DbChatMessageData[]);
|
|
5092
|
+
get messages(): DbChatMessageData[];
|
|
5093
|
+
set suggestions(v: DbChatSuggestion[]);
|
|
5094
|
+
get suggestions(): DbChatSuggestion[];
|
|
5095
|
+
set tools(v: DbChatTool[]);
|
|
5096
|
+
get tools(): DbChatTool[];
|
|
5097
|
+
set attachOptions(v: DbChatAttachOption[]);
|
|
5098
|
+
get attachOptions(): DbChatAttachOption[];
|
|
5099
|
+
connectedCallback(): void;
|
|
5100
|
+
attributeChangedCallback(name: string): void;
|
|
5101
|
+
private build;
|
|
5102
|
+
private buildArtifact;
|
|
5103
|
+
private sync;
|
|
5104
|
+
private syncArtifact;
|
|
5105
|
+
private syncComposerToggles;
|
|
5106
|
+
private renderContent;
|
|
5107
|
+
private renderHero;
|
|
5108
|
+
private renderThread;
|
|
5109
|
+
private buildMessage;
|
|
5110
|
+
private ensureArtifactId;
|
|
5111
|
+
private buildArtifactCard;
|
|
5112
|
+
private syncArtifactCardStates;
|
|
5113
|
+
private toggleArtifactFromCard;
|
|
5114
|
+
private buildTyping;
|
|
5115
|
+
private renderDock;
|
|
5116
|
+
private onSend;
|
|
5117
|
+
private onSuggestionSelect;
|
|
5118
|
+
private relay;
|
|
5119
|
+
private scrollToEnd;
|
|
5120
|
+
/** 메시지를 추가하고 스레드로 전환/스크롤. 추가된 메시지 id 반환 */
|
|
5121
|
+
addMessage(msg: DbChatMessageData): string;
|
|
5122
|
+
/** 특정 메시지 본문/속성 갱신 */
|
|
5123
|
+
updateMessage(id: string, patch: Partial<DbChatMessageData>): void;
|
|
5124
|
+
/** 스트리밍용: 마지막(또는 지정) 메시지 본문에 청크 이어붙이기 */
|
|
5125
|
+
appendToMessage(id: string, chunk: string): void;
|
|
5126
|
+
/** 전체 메시지 교체 */
|
|
5127
|
+
setMessages(list: DbChatMessageData[]): void;
|
|
5128
|
+
/** 대화를 비우고 히어로(빈 상태)로 복귀 */
|
|
5129
|
+
clear(): void;
|
|
5130
|
+
/** 생각 중(…) 표시 토글 */
|
|
5131
|
+
setTyping(on: boolean): void;
|
|
5132
|
+
/** 전송 중(정지 버튼) 상태 — 컴포저에 위임 */
|
|
5133
|
+
setStreaming(on: boolean): void;
|
|
5134
|
+
/** 입력창 포커스 */
|
|
5135
|
+
focusInput(): void;
|
|
5136
|
+
/** 컴포저 인스턴스 접근 */
|
|
5137
|
+
getComposer(): DbChatComposer;
|
|
5138
|
+
get artifactOpen(): boolean;
|
|
5139
|
+
set artifactOpen(v: boolean);
|
|
5140
|
+
/**
|
|
5141
|
+
* 우측 아티팩트 패널을 엽니다(내용 지정 시 함께 세팅).
|
|
5142
|
+
* 열리면 채팅 본문이 좌측으로 밀립니다.
|
|
5143
|
+
* `id` 를 넘기면 스레드 인라인 카드 활성 상태가 동기화됩니다.
|
|
5144
|
+
*/
|
|
5145
|
+
openArtifact(opts?: DbArtifactOptions): void;
|
|
5146
|
+
/** 아티팩트 패널을 닫습니다. */
|
|
5147
|
+
closeArtifact(): void;
|
|
5148
|
+
/** 아티팩트 열림/닫힘 토글. */
|
|
5149
|
+
toggleArtifact(): void;
|
|
5150
|
+
/** 아티팩트 본문 요소(커스텀 콘텐츠를 직접 마운트할 때). */
|
|
5151
|
+
getArtifactBody(): HTMLElement;
|
|
5152
|
+
/** 아티팩트 본문을 요소로 교체합니다. */
|
|
5153
|
+
setArtifactContent(node: Node): void;
|
|
5154
|
+
}
|
|
5155
|
+
declare global {
|
|
5156
|
+
interface HTMLElementTagNameMap {
|
|
5157
|
+
'db-ai-chat': DbAiChat;
|
|
5158
|
+
}
|
|
5159
|
+
}
|
|
5160
|
+
|
|
5161
|
+
interface DbAiChatItem {
|
|
5162
|
+
id: string;
|
|
5163
|
+
/** 대화 제목 */
|
|
5164
|
+
title: string;
|
|
5165
|
+
/** 그룹 라벨 (예: '오늘', '어제', '지난 7일'). 없으면 '최근 항목' */
|
|
5166
|
+
group?: string;
|
|
5167
|
+
/** 행 아이콘(선택) */
|
|
5168
|
+
icon?: DbIconName;
|
|
5169
|
+
}
|
|
5170
|
+
/**
|
|
5171
|
+
* AI 대화 이력 목록. 상단 '새 대화' 버튼 + 그룹별 최근 대화 리스트로 구성됩니다.
|
|
5172
|
+
* (사람 간 대화 목록은 `db-chat-list` 를 사용하세요.)
|
|
5173
|
+
*
|
|
5174
|
+
* @fires db-new - 새 대화 시작
|
|
5175
|
+
* @fires db-select - 대화 선택 (detail: { id, title })
|
|
5176
|
+
*
|
|
5177
|
+
* @example
|
|
5178
|
+
* const list = document.querySelector('db-ai-chat-list');
|
|
5179
|
+
* list.items = [{ id:'1', title:'다운로드 진행바 컴포넌트', group:'오늘' }];
|
|
5180
|
+
* list.addEventListener('db-new', () => {});
|
|
5181
|
+
* list.addEventListener('db-select', (e) => console.log(e.detail.id));
|
|
5182
|
+
*/
|
|
5183
|
+
declare class DbAiChatList extends HTMLElement {
|
|
5184
|
+
static get observedAttributes(): string[];
|
|
5185
|
+
private _items;
|
|
5186
|
+
get items(): DbAiChatItem[];
|
|
5187
|
+
set items(v: DbAiChatItem[]);
|
|
5188
|
+
get selectedId(): string;
|
|
5189
|
+
set selectedId(v: string);
|
|
5190
|
+
connectedCallback(): void;
|
|
5191
|
+
attributeChangedCallback(): void;
|
|
5192
|
+
private render;
|
|
5193
|
+
}
|
|
5194
|
+
declare global {
|
|
5195
|
+
interface HTMLElementTagNameMap {
|
|
5196
|
+
'db-ai-chat-list': DbAiChatList;
|
|
5197
|
+
}
|
|
5198
|
+
}
|
|
5199
|
+
|
|
5200
|
+
interface DbChatListItem {
|
|
5201
|
+
id: string;
|
|
5202
|
+
/** 상대(대화방) 이름 */
|
|
5203
|
+
name: string;
|
|
5204
|
+
avatarSrc?: string;
|
|
5205
|
+
avatarInitials?: string;
|
|
5206
|
+
/** 마지막 메시지 미리보기 */
|
|
5207
|
+
preview?: string;
|
|
5208
|
+
/** 시간 라벨 (예: '방금', '어제') */
|
|
5209
|
+
time?: string;
|
|
5210
|
+
/** 안 읽은 수 */
|
|
5211
|
+
unread?: number;
|
|
5212
|
+
/** 온라인 표시 */
|
|
5213
|
+
online?: boolean;
|
|
5214
|
+
}
|
|
5215
|
+
/**
|
|
5216
|
+
* 사람 간 대화(메신저) 목록. 아바타 + 이름 + 미리보기 + 시간 + 안읽음 배지의 행 리스트로,
|
|
5217
|
+
* 아바타는 `db-avatar` 를 재사용합니다. AI 대화 이력은 `db-ai-chat-list` 를 쓰세요.
|
|
5218
|
+
*
|
|
5219
|
+
* @fires db-select - 대화 선택 (detail: { id })
|
|
5220
|
+
*
|
|
5221
|
+
* @example
|
|
5222
|
+
* const list = document.querySelector('db-chat-list');
|
|
5223
|
+
* list.items = [{ id:'1', name:'디지털 상담원', preview:'무엇을 도와드릴까요?', time:'방금', unread:1, online:true }];
|
|
5224
|
+
* list.addEventListener('db-select', (e) => console.log(e.detail.id));
|
|
5225
|
+
*/
|
|
5226
|
+
declare class DbChatList extends HTMLElement {
|
|
5227
|
+
static get observedAttributes(): string[];
|
|
5228
|
+
private _items;
|
|
5229
|
+
get items(): DbChatListItem[];
|
|
5230
|
+
set items(v: DbChatListItem[]);
|
|
5231
|
+
get selectedId(): string;
|
|
5232
|
+
set selectedId(v: string);
|
|
5233
|
+
connectedCallback(): void;
|
|
5234
|
+
attributeChangedCallback(): void;
|
|
5235
|
+
private render;
|
|
5236
|
+
}
|
|
5237
|
+
declare global {
|
|
5238
|
+
interface HTMLElementTagNameMap {
|
|
5239
|
+
'db-chat-list': DbChatList;
|
|
5240
|
+
}
|
|
5241
|
+
}
|
|
5242
|
+
|
|
5243
|
+
interface DbChatRoomMessage {
|
|
5244
|
+
id?: string;
|
|
5245
|
+
/** 내가 보낸 메시지면 true(우측 정렬). 아니면 상대(좌측) */
|
|
5246
|
+
mine?: boolean;
|
|
5247
|
+
text?: string;
|
|
5248
|
+
html?: string;
|
|
5249
|
+
time?: string;
|
|
5250
|
+
/** 상대 이름(그룹 채팅에서 유용) */
|
|
5251
|
+
name?: string;
|
|
5252
|
+
avatarSrc?: string;
|
|
5253
|
+
avatarInitials?: string;
|
|
5254
|
+
}
|
|
5255
|
+
/**
|
|
5256
|
+
* 사람 간 1:1/그룹 대화 화면. 상단 헤더(상대 정보) + 메시지 스레드 + 하단 컴포저.
|
|
5257
|
+
* 메시지·아바타·입력창은 `db-chat-message` · `db-avatar` · `db-chat-composer` 를 재사용합니다.
|
|
5258
|
+
* AI 대화 화면은 `db-ai-chat` 을 쓰세요.
|
|
5259
|
+
*
|
|
5260
|
+
* @fires db-send - 전송 (detail: { value, attachments })
|
|
5261
|
+
* @fires db-back - 뒤로가기
|
|
5262
|
+
*
|
|
5263
|
+
* @example
|
|
5264
|
+
* const room = document.querySelector('db-chat-room');
|
|
5265
|
+
* room.setAttribute('peer-name', '디지털 상담원');
|
|
5266
|
+
* room.messages = [{ mine:false, text:'무엇을 도와드릴까요?', time:'오후 2:31' }];
|
|
5267
|
+
* room.addEventListener('db-send', (e) => room.addMessage({ mine:true, text:e.detail.value }));
|
|
5268
|
+
*/
|
|
5269
|
+
declare class DbChatRoom extends HTMLElement {
|
|
5270
|
+
static get observedAttributes(): string[];
|
|
5271
|
+
private built;
|
|
5272
|
+
private typing;
|
|
5273
|
+
private _messages;
|
|
5274
|
+
private headerEl;
|
|
5275
|
+
private scrollEl;
|
|
5276
|
+
private threadEl;
|
|
5277
|
+
private dockEl;
|
|
5278
|
+
private composer;
|
|
5279
|
+
set messages(v: DbChatRoomMessage[]);
|
|
5280
|
+
get messages(): DbChatRoomMessage[];
|
|
5281
|
+
connectedCallback(): void;
|
|
5282
|
+
attributeChangedCallback(): void;
|
|
5283
|
+
private build;
|
|
5284
|
+
private sync;
|
|
5285
|
+
private renderHeader;
|
|
5286
|
+
private renderThread;
|
|
5287
|
+
private buildMessage;
|
|
5288
|
+
private buildTyping;
|
|
5289
|
+
private scrollToEnd;
|
|
5290
|
+
/** 메시지 추가. 추가된 id 반환 */
|
|
5291
|
+
addMessage(msg: DbChatRoomMessage): string;
|
|
5292
|
+
/** 전체 메시지 교체 */
|
|
5293
|
+
setMessages(list: DbChatRoomMessage[]): void;
|
|
5294
|
+
/** 상대 입력중(…) 표시 토글 */
|
|
5295
|
+
setTyping(on: boolean): void;
|
|
5296
|
+
/** 입력창 포커스 */
|
|
5297
|
+
focusInput(): void;
|
|
5298
|
+
/** 컴포저 인스턴스 접근 */
|
|
5299
|
+
getComposer(): DbChatComposer;
|
|
5300
|
+
}
|
|
5301
|
+
declare global {
|
|
5302
|
+
interface HTMLElementTagNameMap {
|
|
5303
|
+
'db-chat-room': DbChatRoom;
|
|
5304
|
+
}
|
|
5305
|
+
}
|
|
5306
|
+
|
|
4184
5307
|
/**
|
|
4185
5308
|
* 명령형 toast() 헬퍼 — 컨테이너/스택/제거를 자동 관리합니다.
|
|
4186
5309
|
*
|
|
@@ -4261,5 +5384,5 @@ interface DbConfirmOptions {
|
|
|
4261
5384
|
/** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
|
|
4262
5385
|
declare function confirm(options: DbConfirmOptions): Promise<boolean>;
|
|
4263
5386
|
|
|
4264
|
-
export { DbAccordion, DbAdBanner, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDrawer, DbDropdown, DbDropzone, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbPageHeader, DbPagination, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbVideoPlayer, DbYouTubePlayer, confirm, confirm as dbConfirm, toast as dbToast, showToast, toast };
|
|
4265
|
-
export type { CalendarEventData, CalendarEventType, DbAlertAction, DbBannerAction, DbBottomNavigationItem, DbConfirmOptions, DbConfirmVariant, DbFooterCompanyInfo, DbFooterFamilySite, DbFooterLink, DbFooterLinkColumn, DbFooterSocialLink, DbFormFieldData, DbGanttAssignee, DbGanttGroup, DbGanttItem, DbGanttItemStatus, DbGanttRow, DbImageListItem, DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };
|
|
5387
|
+
export { DbAccordion, DbAdBanner, DbAiChat, DbAiChatList, DbAlert, DbAnimationBackground, DbAnimationText, DbAppBadge, DbAudioPlayer, DbAvatar, DbBackdrop, DbBadge, DbBanner, DbBottomNavigation, DbBottomSheet, DbBreadcrumbs, DbButton, DbCalendar, DbCard, DbCarousel, DbChatComposer, DbChatList, DbChatMessage, DbChatOrb, DbChatRoom, DbChatSuggestions, DbChatTyping, DbChatWelcome, DbChatWidget, DbCheckbox, DbChip, DbCodeBlock, DbColorPicker, DbConfirm, DbContainer, DbContextMenu, DbCountdown, DbCursorFollower, DbDatePicker, DbDivider, DbDownloadProgress, DbDrawer, DbDropdown, DbDropzone, DbEmailVerify, DbEmptyState, DbFileUploader, DbFloatingActionButton, DbFooter, DbForm, DbGantt, DbGradient, DbGrid, DbGridBackground, DbGridItem, DbImage, DbImageList, DbImagePlaceholder, DbIndicator, DbInput, DbKanban, DbLabel, DbLightbox, DbList, DbLogo, DbLottie, DbMarkdownEditor, DbMarquee, DbMasonry, DbMenuItem, DbModal, DbNavbar, DbOnboardingModal, DbOtpInput, DbPageHeader, DbPagination, DbPhoneVerify, DbPopover, DbProgress, DbProgressStep, DbProgressbar, DbRadio, DbRandomGradient, DbRangeSlider, DbRating, DbReorder, DbResizablePanels, DbScrollArea, DbSearchBar, DbSection, DbSectionAppDownload, DbSectionContact, DbSectionCta, DbSectionFaq, DbSectionFeature, DbSectionFeatureGrid, DbSectionHero, DbSectionLogoCloud, DbSectionPricing, DbSectionStats, DbSectionTestimonials, DbSegmentControl, DbSelect, DbShare, DbSidebar, DbSkeleton, DbSpinner, DbSplitView, DbStack, DbStat, DbStepper, DbTable, DbTabs, DbTestimonial, DbTextarea, DbTimePicker, DbTimeline, DbToast, DbToggle, DbToolbar, DbTooltip, DbTopBanner, DbTutorial, DbTwoFactor, DbVideoPlayer, DbYouTubePlayer, confirm, confirm as dbConfirm, toast as dbToast, showToast, toast };
|
|
5388
|
+
export type { CalendarEventData, CalendarEventType, DbAiChatItem, DbAlertAction, DbArtifactOptions, DbBannerAction, DbBottomNavigationItem, DbChatArtifactRef, DbChatAttachOption, DbChatListItem, DbChatMessageData, DbChatRoomMessage, DbChatSuggestion, DbChatTool, DbChatWidgetConversation, DbChatWidgetMessage, DbConfirmOptions, DbConfirmVariant, DbFooterCompanyInfo, DbFooterFamilySite, DbFooterLink, DbFooterLinkColumn, DbFooterSocialLink, DbFormFieldData, DbGanttAssignee, DbGanttGroup, DbGanttItem, DbGanttItemStatus, DbGanttRow, DbImageListItem, DbKanbanAssignee, DbKanbanCard, DbKanbanColumn, DbKanbanPriority, DbKanbanTag, DbLightboxImage, DbNavbarItem, DbNavbarUserProfile, DbPageHeaderTabItem, DbSharePlatform, DbShareVariant, DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile, DbStatChange, DbTimelineItem, DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };
|