@nhan0510/ui 0.0.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/index.d.ts +159 -0
- package/dist/index.mjs +485 -0
- package/package.json +28 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { CSSResult } from 'lit';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import { TemplateResult } from 'lit-html';
|
|
4
|
+
|
|
5
|
+
export declare const ChatIcon: ({ className, color }?: IconProps) => TemplateResult<1>;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Data structure for a single chat message.
|
|
9
|
+
*/
|
|
10
|
+
export declare interface ChatMessage {
|
|
11
|
+
/**
|
|
12
|
+
* Unique identifier for the message.
|
|
13
|
+
* Used as a key for list rendering optimization.
|
|
14
|
+
*/
|
|
15
|
+
id: string | number;
|
|
16
|
+
/**
|
|
17
|
+
* Text content of the message.
|
|
18
|
+
*/
|
|
19
|
+
content: string;
|
|
20
|
+
/**
|
|
21
|
+
* Determines the message direction/alignment:
|
|
22
|
+
* - true: Outgoing message (User). Displayed on the right with primary color.
|
|
23
|
+
* - false: Incoming message (Bot/Others). Displayed on the left with neutral background.
|
|
24
|
+
*/
|
|
25
|
+
isMine: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Timestamp of the message.
|
|
28
|
+
* Only displayed if the showTimestamp prop is enabled in the widget.
|
|
29
|
+
*/
|
|
30
|
+
timestamp?: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Payload detail for the onSubmit custom event.
|
|
35
|
+
* Emitted when the user presses Enter or clicks the Send button.
|
|
36
|
+
*/
|
|
37
|
+
export declare interface ChatSubmitDetail {
|
|
38
|
+
/**
|
|
39
|
+
* Text content of the submitted message.
|
|
40
|
+
*/
|
|
41
|
+
text: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Payload detail for the onToggle custom event.
|
|
46
|
+
* Emitted when the user clicks the launcher button.
|
|
47
|
+
*/
|
|
48
|
+
export declare interface ChatToggleDetail {
|
|
49
|
+
/**
|
|
50
|
+
* Whether the chat window is open.
|
|
51
|
+
*/
|
|
52
|
+
isOpen: boolean;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* ChatWidget component - A complete chat interface with launcher and window.
|
|
57
|
+
*
|
|
58
|
+
* @element chat-widget
|
|
59
|
+
* @fires submit - Fired when a message is submitted
|
|
60
|
+
* @fires toggle - Fired when the chat window is opened/closed
|
|
61
|
+
*/
|
|
62
|
+
export declare class ChatWidget extends LitElement {
|
|
63
|
+
static styles: (CSSResult | CSSResult[])[];
|
|
64
|
+
title: string;
|
|
65
|
+
placeholder: string;
|
|
66
|
+
size: WidgetSize;
|
|
67
|
+
showTimestamp: boolean;
|
|
68
|
+
launcherShape: LauncherShape;
|
|
69
|
+
messages: ChatMessage[];
|
|
70
|
+
emptyText: string;
|
|
71
|
+
headerIcon: string;
|
|
72
|
+
launcherIcon: string;
|
|
73
|
+
launcherCloseIcon: string;
|
|
74
|
+
locale?: string;
|
|
75
|
+
private inputElement;
|
|
76
|
+
private messageListElement;
|
|
77
|
+
private isOpen;
|
|
78
|
+
private inputValue;
|
|
79
|
+
/** Resolves widget size to a valid config key, fallback to 'medium'. */
|
|
80
|
+
private get effectiveSize();
|
|
81
|
+
/** Resolves launcher shape CSS class based on the 'launcher-shape' prop. */
|
|
82
|
+
private get shapeClass();
|
|
83
|
+
private handleToggle;
|
|
84
|
+
private handleClose;
|
|
85
|
+
private handleInput;
|
|
86
|
+
private handleKeyDown;
|
|
87
|
+
/**
|
|
88
|
+
* Handles message submission.
|
|
89
|
+
* Dispatches 'submit' event. If not prevented, executes default echo logic.
|
|
90
|
+
*/
|
|
91
|
+
private submit;
|
|
92
|
+
private dispatchToggle;
|
|
93
|
+
private clearAndFocusInput;
|
|
94
|
+
protected updated(changedProperties: any): void;
|
|
95
|
+
private scrollToBottom;
|
|
96
|
+
private focusInput;
|
|
97
|
+
private formatTime;
|
|
98
|
+
private renderHeader;
|
|
99
|
+
private renderMessage;
|
|
100
|
+
private renderMessageList;
|
|
101
|
+
private renderInput;
|
|
102
|
+
private renderWindow;
|
|
103
|
+
private renderLauncher;
|
|
104
|
+
render(): TemplateResult<1>;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Interface defining all available props for the Chat Widget.
|
|
109
|
+
* Use this to understand what can be configured.
|
|
110
|
+
*/
|
|
111
|
+
export declare interface ChatWidgetProps {
|
|
112
|
+
/** Title displayed in the header of the chat window */
|
|
113
|
+
title?: string;
|
|
114
|
+
/** Placeholder text for the input field */
|
|
115
|
+
placeholder?: string;
|
|
116
|
+
/** Size of the widget (launcher and window) */
|
|
117
|
+
size?: WidgetSize;
|
|
118
|
+
/** Whether to show timestamps below messages */
|
|
119
|
+
showTimestamp?: boolean;
|
|
120
|
+
/** Shape of the launcher button */
|
|
121
|
+
launcherShape?: LauncherShape;
|
|
122
|
+
/** Array of messages to display */
|
|
123
|
+
messages?: ChatMessage[];
|
|
124
|
+
/** Text to display when there are no messages */
|
|
125
|
+
emptyText?: string;
|
|
126
|
+
/** URL for the image displayed in the header */
|
|
127
|
+
headerIcon?: string;
|
|
128
|
+
/** URL for the custom icon displayed when the launcher is closed */
|
|
129
|
+
launcherIcon?: string;
|
|
130
|
+
/** URL for the custom icon displayed when the launcher is open */
|
|
131
|
+
launcherCloseIcon?: string;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
export declare const CloseIcon: ({ className, color }?: IconProps) => TemplateResult<1>;
|
|
135
|
+
|
|
136
|
+
declare interface IconProps {
|
|
137
|
+
className?: string;
|
|
138
|
+
color?: string;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Supported shapes for the Chat Launcher button.
|
|
143
|
+
* - circle: Fully circular button (Default).
|
|
144
|
+
* - square: Square button with sharp corners.
|
|
145
|
+
* - rounded: Square button with slightly rounded corners.
|
|
146
|
+
*/
|
|
147
|
+
export declare type LauncherShape = 'circle' | 'square' | 'rounded';
|
|
148
|
+
|
|
149
|
+
export declare const SendIcon: ({ className, color }?: IconProps) => TemplateResult<1>;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Supported sizes for the Chat Widget.
|
|
153
|
+
* - small: Compact view.
|
|
154
|
+
* - medium: Standard view (Default).
|
|
155
|
+
* - large: Expanded view.
|
|
156
|
+
*/
|
|
157
|
+
export declare type WidgetSize = 'small' | 'medium' | 'large';
|
|
158
|
+
|
|
159
|
+
export { }
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,485 @@
|
|
|
1
|
+
import { unsafeCSS as t, css as m, html as n, LitElement as v } from "lit";
|
|
2
|
+
import { property as s, query as w, state as f, customElement as x } from "lit/decorators.js";
|
|
3
|
+
const y = `@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-bold:700;--tracking-wide:.025em;--radius-lg:.5rem;--radius-xl:.75rem;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#26a69a;--color-secondary:#26a69a;--color-accent:#9c27b0;--color-info:#31ccec;--color-warning:#f2c037;--color-success:#21ba45;--color-error:#ef4135}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000)#0000}}@property --radialprogress{syntax: "<percentage>"; inherits: true; initial-value: 0%;}:root:not(span){overflow:var(--page-overflow)}:root{background:var(--page-scroll-bg,var(--root-bg));--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000),var(--root-bg,#0000))var(--root-bg,#0000)}@supports (color:color-mix(in lab,red,red)){:root{--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000),var(--root-bg,#0000))color-mix(in srgb,var(--root-bg,#0000),oklch(0% 0 0) calc(var(--page-has-backdrop,0)*40%))}}:root{--page-scroll-transition-on:background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter,unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter,unset); else: unset)}@keyframes set-page-has-scroll{0%,to{--page-has-scroll:1}}:root,[data-theme]{background:var(--page-scroll-bg,var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg:var(--color-base-100)}}@layer components;@layer utilities{@layer daisyui.l1.l2.l3{:where(.btn){width:unset}.btn{cursor:pointer;text-align:center;vertical-align:middle;outline-offset:2px;webkit-user-select:none;-webkit-user-select:none;user-select:none;padding-inline:var(--btn-p);color:var(--btn-fg);--tw-prose-links:var(--btn-fg);height:var(--size);font-size:var(--fontsize,.875rem);outline-color:var(--btn-color,var(--color-base-content));background-color:var(--btn-bg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--btn-noise);border-width:var(--border);border-style:solid;border-color:var(--btn-border);text-shadow:0 .5px oklch(100% 0 0/calc(var(--depth)*.15));touch-action:manipulation;box-shadow:0 .5px 0 .5px oklch(100% 0 0/calc(var(--depth)*6%)) inset,var(--btn-shadow);--size:calc(var(--size-field,.25rem)*10);--btn-bg:var(--btn-color,var(--color-base-200));--btn-fg:var(--color-base-content);--btn-p:1rem;--btn-border:var(--btn-bg);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-weight:600;transition-property:color,background-color,border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex}@supports (color:color-mix(in lab,red,red)){.btn{--btn-border:color-mix(in oklab,var(--btn-bg),#000 calc(var(--depth)*5%))}}.btn{--btn-shadow:0 3px 2px -2px var(--btn-bg),0 4px 3px -2px var(--btn-bg)}@supports (color:color-mix(in lab,red,red)){.btn{--btn-shadow:0 3px 2px -2px color-mix(in oklab,var(--btn-bg)calc(var(--depth)*30%),#0000),0 4px 3px -2px color-mix(in oklab,var(--btn-bg)calc(var(--depth)*30%),#0000)}}.btn{--btn-noise:var(--fx-noise)}@media(hover:hover){.btn:hover{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab,red,red)){.btn:hover{--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%)}}}.btn:focus-visible,.btn:has(:focus-visible){isolation:isolate;outline-width:2px;outline-style:solid}.btn:active:not(.btn-active){--btn-bg:var(--btn-color,var(--color-base-200));translate:0 .5px}@supports (color:color-mix(in lab,red,red)){.btn:active:not(.btn-active){--btn-bg:color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 5%)}}.btn:active:not(.btn-active){--btn-border:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab,red,red)){.btn:active:not(.btn-active){--btn-border:color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%)}}.btn:active:not(.btn-active){--btn-shadow:0 0 0 0 oklch(0% 0 0/0),0 0 0 0 oklch(0% 0 0/0)}.btn:is(input[type=checkbox],input[type=radio]){appearance:none}.btn:is(input[type=checkbox],input[type=radio])[aria-label]:after{--tw-content:attr(aria-label);content:var(--tw-content)}.btn:where(input:checked:not(.filter .btn)){--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content);isolation:isolate}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem)*6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.list{flex-direction:column;font-size:.875rem;display:flex}.list .list-row{--list-grid-cols:minmax(0,auto)1fr;border-radius:var(--radius-box);word-break:break-word;grid-auto-flow:column;grid-template-columns:var(--list-grid-cols);gap:1rem;padding:1rem;display:grid;position:relative}:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{content:"";border-bottom:var(--border)solid;inset-inline:var(--radius-box);border-color:var(--color-base-content);position:absolute;bottom:0}@supports (color:color-mix(in lab,red,red)){:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{border-color:color-mix(in oklab,var(--color-base-content)5%,transparent)}}.toggle{border:var(--border)solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p),var(--radius-selector-max)) + min(var(--border),var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab,red,red)){.toggle{box-shadow:0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab,red,red)){.toggle{--input-color:color-mix(in oklab,var(--color-base-content)50%,#0000)}}.toggle{--toggle-p:calc(var(--size)*.125);--size:calc(var(--size-selector,.25rem)*6);width:calc((var(--size)*2) - (var(--border) + var(--toggle-p))*2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media(forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:none}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:none}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);height:100%;box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab,red,red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0/calc(var(--depth)*.1)) inset,0 8px 0 -4px oklch(100% 0 0/calc(var(--depth)*.1)) inset,0 1px color-mix(in oklab,currentColor calc(var(--depth)*10%),#0000)}}.toggle:before{background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise)}@media(forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:-1px;outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border)solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border)solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem),.875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab,red,red)){.input{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000) inset,0 -1px oklch(100% 0 0/calc(var(--depth)*.1)) inset}}.input{--size:calc(var(--size-field,.25rem)*10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input{--input-color:color-mix(in oklab,var(--color-base-content)20%,#0000)}}.input:where(input){display:inline-flex}.input :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media(forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-flex}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab,red,red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab,var(--input-color)calc(var(--depth)*10%),#0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate;z-index:1}@media(pointer:coarse){@supports (-webkit-touch-callout:none){.input:focus,.input:focus-within{--font-size:1rem}}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{color:color-mix(in oklab,var(--color-base-content)40%,transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:color-mix(in oklab,var(--color-base-content)20%,transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.input:has(>input[type=date]) :where(input[type=date]){webkit-appearance:none;appearance:none;display:inline-flex}.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}.chat-bubble{border-radius:var(--radius-field);background-color:var(--color-base-300);width:fit-content;color:var(--color-base-content);grid-row-end:3;min-width:2.5rem;max-width:90%;min-height:2rem;padding-block:.5rem;padding-inline:1rem;display:block;position:relative}.chat-bubble:before{background-color:inherit;content:"";width:.75rem;height:.75rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--mask-chat);mask-image:var(--mask-chat);position:absolute;bottom:0;-webkit-mask-position:0 -1px;mask-position:0 -1px;-webkit-mask-size:.8125rem;mask-size:.8125rem}.card{border-radius:var(--radius-box);outline-offset:2px;outline:0 solid #0000;flex-direction:column;transition:outline .2s ease-in-out;display:flex;position:relative}.card:focus{--tw-outline-style:none;outline-style:none}@media(forced-colors:active){.card:focus{outline-offset:2px;outline:2px solid #0000}}.card:focus-visible{outline-color:currentColor}.card :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}.card :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}.card figure{justify-content:center;align-items:center;display:flex}.card:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;-webkit-user-select:none;user-select:none}.card:has(>:checked){outline:2px solid}.chat-footer{grid-row-start:3;gap:.25rem;font-size:.6875rem;display:flex}.chat{--mask-chat:url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");grid-auto-rows:min-content;column-gap:.75rem;padding-block:.25rem;display:grid}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}}@layer daisyui.l1.l2{.btn:disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.btn:disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent)}}.btn:disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn:disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.btn:disabled{--btn-fg:color-mix(in oklch,var(--color-base-content)20%,#0000)}}.btn[disabled]:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.btn[disabled]:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab,var(--color-base-content)10%,transparent)}}.btn[disabled]:not(.btn-link,.btn-ghost){box-shadow:none}.btn[disabled]{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.btn[disabled]{--btn-fg:color-mix(in oklch,var(--color-base-content)20%,#0000)}}.list .list-row:has(.list-col-grow:first-child){--list-grid-cols:1fr}.list .list-row:has(.list-col-grow:nth-child(2)){--list-grid-cols:minmax(0,auto)1fr}.list .list-row:has(.list-col-grow:nth-child(3)){--list-grid-cols:minmax(0,auto)minmax(0,auto)1fr}.list .list-row:has(.list-col-grow:nth-child(4)){--list-grid-cols:minmax(0,auto)minmax(0,auto)minmax(0,auto)1fr}.list .list-row:has(.list-col-grow:nth-child(5)){--list-grid-cols:minmax(0,auto)minmax(0,auto)minmax(0,auto)minmax(0,auto)1fr}.list .list-row:has(.list-col-grow:nth-child(6)){--list-grid-cols:minmax(0,auto)minmax(0,auto)minmax(0,auto)minmax(0,auto)minmax(0,auto)1fr}.list .list-row>*{grid-row-start:1}.chat-end{grid-template-columns:1fr auto;place-items:end}.chat-end .chat-header,.chat-end .chat-footer{grid-column-start:1}.chat-end .chat-image{grid-column-start:2}.chat-end .chat-bubble{border-end-end-radius:0;grid-column-start:1}.chat-end .chat-bubble:before{inset-inline-start:100%;transform:rotateY(180deg)}[dir=rtl] :is(.chat-end .chat-bubble):before{transform:rotateY(0)}.chat-start{grid-template-columns:auto 1fr;place-items:start}.chat-start .chat-header,.chat-start .chat-footer{grid-column-start:2}.chat-start .chat-image{grid-column-start:1}.chat-start .chat-bubble{border-end-start-radius:0;grid-column-start:2}.chat-start .chat-bubble:before{inset-inline-start:-.75rem;transform:rotateY(0)}[dir=rtl] :is(.chat-start .chat-bubble):before{transform:rotateY(180deg)}.chat-bubble-primary{background-color:var(--color-primary);color:var(--color-primary-content)}}.pointer-events-none{pointer-events:none}.relative{position:relative}.static{position:static}.z-10{z-index:10}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-3{margin-right:calc(var(--spacing)*3)}.mr-4{margin-right:calc(var(--spacing)*4)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.flex{display:flex}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-12{width:calc(var(--spacing)*12)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.flex-1{flex:1}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-90{rotate:90deg}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing)*3)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-base-300{border-color:var(--color-base-300)}.bg-base-100,.bg-base-100\\/10{background-color:var(--color-base-100)}@supports (color:color-mix(in lab,red,red)){.bg-base-100\\/10{background-color:color-mix(in oklab,var(--color-base-100)10%,transparent)}}.bg-base-200\\/50{background-color:var(--color-base-200)}@supports (color:color-mix(in lab,red,red)){.bg-base-200\\/50{background-color:color-mix(in oklab,var(--color-base-200)50%,transparent)}}.bg-base-300{background-color:var(--color-base-300)}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-4{padding:calc(var(--spacing)*4)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.font-sans{font-family:var(--font-sans)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\\[10px\\]{font-size:10px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-words{overflow-wrap:break-word}.text-base-content,.text-base-content\\/60{color:var(--color-base-content)}@supports (color:color-mix(in lab,red,red)){.text-base-content\\/60{color:color-mix(in oklab,var(--color-base-content)60%,transparent)}}.text-primary{color:var(--color-primary)}.text-primary-content{color:var(--color-primary-content)}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\\:bg-primary\\/10:hover{background-color:#26a69a1a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/10:hover{background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.hover\\:bg-white\\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-white\\/20:hover{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.hover\\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\\:bg-base-100:focus{background-color:var(--color-base-100)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-primary\\/20:focus{--tw-ring-color:#26a69a33}@supports (color:color-mix(in lab,red,red)){.focus\\:ring-primary\\/20:focus{--tw-ring-color:color-mix(in oklab,var(--color-primary)20%,transparent)}}.focus\\:ring-white\\/50:focus{--tw-ring-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.focus\\:ring-white\\/50:focus{--tw-ring-color:color-mix(in oklab,var(--color-white)50%,transparent)}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:scale-90:active{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}@media(hover:hover){.disabled\\:hover\\:bg-transparent:disabled:hover{background-color:#0000}}}:host{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,sans-serif;line-height:1.5;display:block}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes rotator{89.9999%,to{--first-item-position:0 0%}90%,99.9999%{--first-item-position:0 calc(var(--items)*100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`, o = {
|
|
4
|
+
// Primary - #0050a4 (LOGI VietFrance Blue)
|
|
5
|
+
primary: "oklch(0.42 0.12 250)",
|
|
6
|
+
primaryContent: "oklch(1 0 0)",
|
|
7
|
+
// Secondary - #26a69a (Teal)
|
|
8
|
+
secondary: "oklch(0.62 0.1 180)",
|
|
9
|
+
secondaryContent: "oklch(1 0 0)",
|
|
10
|
+
// Accent - #9c27b0 (Purple)
|
|
11
|
+
accent: "oklch(0.45 0.2 320)",
|
|
12
|
+
accentContent: "oklch(1 0 0)",
|
|
13
|
+
// Neutral - #3d4451
|
|
14
|
+
neutral: "oklch(0.35 0.02 250)",
|
|
15
|
+
neutralContent: "oklch(1 0 0)",
|
|
16
|
+
// Base
|
|
17
|
+
base100: "oklch(1 0 0)",
|
|
18
|
+
base200: "oklch(0.96 0 0)",
|
|
19
|
+
base300: "oklch(0.92 0 0)",
|
|
20
|
+
baseContent: "oklch(0.2 0 0)",
|
|
21
|
+
// Semantic colors
|
|
22
|
+
info: "oklch(0.76 0.12 210)",
|
|
23
|
+
success: "oklch(0.65 0.2 145)",
|
|
24
|
+
warning: "oklch(0.83 0.15 85)",
|
|
25
|
+
error: "oklch(0.58 0.22 25)"
|
|
26
|
+
}, k = m`
|
|
27
|
+
:host {
|
|
28
|
+
/* System colors*/
|
|
29
|
+
--color-primary: ${t(o.primary)};
|
|
30
|
+
--color-primary-content: ${t(o.primaryContent)};
|
|
31
|
+
|
|
32
|
+
--color-secondary: ${t(o.secondary)};
|
|
33
|
+
--color-secondary-content: ${t(o.secondaryContent)};
|
|
34
|
+
|
|
35
|
+
--color-accent: ${t(o.accent)};
|
|
36
|
+
--color-accent-content: ${t(o.accentContent)};
|
|
37
|
+
|
|
38
|
+
--color-neutral: ${t(o.neutral)};
|
|
39
|
+
--color-neutral-content: ${t(o.neutralContent)};
|
|
40
|
+
|
|
41
|
+
--color-base-100: ${t(o.base100)};
|
|
42
|
+
--color-base-200: ${t(o.base200)};
|
|
43
|
+
--color-base-300: ${t(o.base300)};
|
|
44
|
+
--color-base-content: ${t(o.baseContent)};
|
|
45
|
+
|
|
46
|
+
--color-info: ${t(o.info)};
|
|
47
|
+
--color-success: ${t(o.success)};
|
|
48
|
+
--color-warning: ${t(o.warning)};
|
|
49
|
+
--color-error: ${t(o.error)};
|
|
50
|
+
|
|
51
|
+
/* DaisyUI Internal variables */
|
|
52
|
+
--p: ${t(o.primary)}; // primary
|
|
53
|
+
--pc: ${t(o.primaryContent)}; // primary content
|
|
54
|
+
--b1: ${t(o.base100)}; // base 100
|
|
55
|
+
--b2: ${t(o.base200)}; // base 200
|
|
56
|
+
--b3: ${t(o.base300)}; // base 300
|
|
57
|
+
--bc: ${t(o.baseContent)}; // base content
|
|
58
|
+
--n: ${t(o.neutral)}; // neutral
|
|
59
|
+
--nc: ${t(o.neutralContent)}; // neutral content
|
|
60
|
+
--rounded-box: 1rem;
|
|
61
|
+
--rounded-btn: 0.5rem;
|
|
62
|
+
--rounded-badge: 1.9rem;
|
|
63
|
+
--animation-btn: 0.25s;
|
|
64
|
+
--animation-input: 0.2s;
|
|
65
|
+
--btn-focus-scale: 0.95;
|
|
66
|
+
--border-btn: 1px;
|
|
67
|
+
--tab-border: 1px;
|
|
68
|
+
--tab-radius: 0.5rem;
|
|
69
|
+
|
|
70
|
+
/* Tailwind CSS variables */
|
|
71
|
+
--tw-shadow: 0 0 #0000;
|
|
72
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
73
|
+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
|
74
|
+
--tw-ring-offset-width: 0px;
|
|
75
|
+
--tw-ring-offset-color: #fff;
|
|
76
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
77
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
78
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
79
|
+
--tw-inset-shadow: 0 0 #0000;
|
|
80
|
+
--tw-inset-ring-shadow: 0 0 #0000;
|
|
81
|
+
--tw-scale-x: 1;
|
|
82
|
+
--tw-scale-y: 1;
|
|
83
|
+
--tw-scale-z: 1;
|
|
84
|
+
--tw-translate-x: 0;
|
|
85
|
+
--tw-translate-y: 0;
|
|
86
|
+
--tw-border-style: solid;
|
|
87
|
+
--tw-border-opacity: 1;
|
|
88
|
+
|
|
89
|
+
/* Element reset */
|
|
90
|
+
*,
|
|
91
|
+
::before,
|
|
92
|
+
::after {
|
|
93
|
+
box-sizing: border-box;
|
|
94
|
+
border-style: solid;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
img, svg, video, canvas, audio, iframe, embed, object {
|
|
98
|
+
display: block;
|
|
99
|
+
}
|
|
100
|
+
`, C = y.replace(/:root/g, ":host"), z = [t(C), k], $ = ({
|
|
101
|
+
className: e = "w-6 h-6",
|
|
102
|
+
color: r
|
|
103
|
+
} = {}) => n`
|
|
104
|
+
<svg
|
|
105
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
106
|
+
viewBox="0 0 24 24"
|
|
107
|
+
fill="currentColor"
|
|
108
|
+
class="${e}"
|
|
109
|
+
width="24"
|
|
110
|
+
height="24"
|
|
111
|
+
style="${r ? `color: ${r}` : ""}"
|
|
112
|
+
aria-hidden="true"
|
|
113
|
+
>
|
|
114
|
+
<path
|
|
115
|
+
d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"
|
|
116
|
+
/>
|
|
117
|
+
</svg>
|
|
118
|
+
`, b = ({
|
|
119
|
+
className: e = "w-6 h-6",
|
|
120
|
+
color: r
|
|
121
|
+
} = {}) => n`
|
|
122
|
+
<svg
|
|
123
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
124
|
+
viewBox="0 0 24 24"
|
|
125
|
+
fill="currentColor"
|
|
126
|
+
class="${e}"
|
|
127
|
+
width="24"
|
|
128
|
+
height="24"
|
|
129
|
+
style="${r ? `color: ${r}` : ""}"
|
|
130
|
+
aria-hidden="true"
|
|
131
|
+
>
|
|
132
|
+
<path
|
|
133
|
+
fill-rule="evenodd"
|
|
134
|
+
d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
|
|
135
|
+
clip-rule="evenodd"
|
|
136
|
+
/>
|
|
137
|
+
</svg>
|
|
138
|
+
`, g = ({
|
|
139
|
+
className: e = "w-6 h-6",
|
|
140
|
+
color: r
|
|
141
|
+
} = {}) => n`
|
|
142
|
+
<svg
|
|
143
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
144
|
+
viewBox="0 0 24 24"
|
|
145
|
+
fill="currentColor"
|
|
146
|
+
class="${e}"
|
|
147
|
+
width="24"
|
|
148
|
+
height="24"
|
|
149
|
+
style="${r ? `color: ${r}` : ""}"
|
|
150
|
+
aria-hidden="true"
|
|
151
|
+
>
|
|
152
|
+
<path
|
|
153
|
+
fill-rule="evenodd"
|
|
154
|
+
d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97Z"
|
|
155
|
+
clip-rule="evenodd"
|
|
156
|
+
/>
|
|
157
|
+
</svg>
|
|
158
|
+
`;
|
|
159
|
+
var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, r, l, d) => {
|
|
160
|
+
for (var c = d > 1 ? void 0 : d ? S(r, l) : r, p = e.length - 1, u; p >= 0; p--)
|
|
161
|
+
(u = e[p]) && (c = (d ? u(r, l, c) : u(c)) || c);
|
|
162
|
+
return d && c && E(r, l, c), c;
|
|
163
|
+
};
|
|
164
|
+
const h = {
|
|
165
|
+
window: {
|
|
166
|
+
small: "width: 280px; height: 360px;",
|
|
167
|
+
medium: "width: 360px; height: 480px;",
|
|
168
|
+
large: "width: 420px; height: 560px;"
|
|
169
|
+
},
|
|
170
|
+
launcher: {
|
|
171
|
+
small: "w-12 h-12",
|
|
172
|
+
medium: "w-14 h-14",
|
|
173
|
+
large: "w-16 h-16"
|
|
174
|
+
},
|
|
175
|
+
icon: {
|
|
176
|
+
small: "w-5 h-5",
|
|
177
|
+
medium: "w-6 h-6",
|
|
178
|
+
large: "w-7 h-7"
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
let a = class extends v {
|
|
182
|
+
constructor() {
|
|
183
|
+
super(...arguments), this.title = "Chat Window", this.placeholder = "Type a message...", this.size = "medium", this.showTimestamp = !1, this.launcherShape = "circle", this.messages = [], this.emptyText = "Start a conversation...", this.headerIcon = "", this.launcherIcon = "", this.launcherCloseIcon = "", this.isOpen = !1, this.inputValue = "";
|
|
184
|
+
}
|
|
185
|
+
//#endregion
|
|
186
|
+
//#region Computed Properties
|
|
187
|
+
/** Resolves widget size to a valid config key, fallback to 'medium'. */
|
|
188
|
+
get effectiveSize() {
|
|
189
|
+
return Object.prototype.hasOwnProperty.call(h.window, this.size) ? this.size : "medium";
|
|
190
|
+
}
|
|
191
|
+
/** Resolves launcher shape CSS class based on the 'launcher-shape' prop. */
|
|
192
|
+
get shapeClass() {
|
|
193
|
+
switch (this.launcherShape) {
|
|
194
|
+
case "square":
|
|
195
|
+
return "";
|
|
196
|
+
case "rounded":
|
|
197
|
+
return "rounded-lg";
|
|
198
|
+
case "circle":
|
|
199
|
+
default:
|
|
200
|
+
return "rounded-full";
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
//#endregion
|
|
204
|
+
//#region Event Handlers
|
|
205
|
+
handleToggle() {
|
|
206
|
+
this.isOpen = !this.isOpen, this.dispatchToggle();
|
|
207
|
+
}
|
|
208
|
+
handleClose() {
|
|
209
|
+
this.isOpen = !1, this.dispatchToggle();
|
|
210
|
+
}
|
|
211
|
+
handleInput(e) {
|
|
212
|
+
this.inputValue = e.target.value;
|
|
213
|
+
}
|
|
214
|
+
handleKeyDown(e) {
|
|
215
|
+
e.key === "Enter" && !e.shiftKey && (e.preventDefault(), this.submit());
|
|
216
|
+
}
|
|
217
|
+
/**
|
|
218
|
+
* Handles message submission.
|
|
219
|
+
* Dispatches 'submit' event. If not prevented, executes default echo logic.
|
|
220
|
+
*/
|
|
221
|
+
submit() {
|
|
222
|
+
const e = this.inputValue.trim();
|
|
223
|
+
if (!e) return;
|
|
224
|
+
const r = { text: e }, l = new CustomEvent("submit", {
|
|
225
|
+
detail: r,
|
|
226
|
+
bubbles: !0,
|
|
227
|
+
composed: !0,
|
|
228
|
+
cancelable: !0
|
|
229
|
+
});
|
|
230
|
+
this.dispatchEvent(l), this.clearAndFocusInput();
|
|
231
|
+
}
|
|
232
|
+
//#endregion
|
|
233
|
+
//#region Internal Logic & Helpers
|
|
234
|
+
dispatchToggle() {
|
|
235
|
+
const e = { isOpen: this.isOpen };
|
|
236
|
+
this.dispatchEvent(
|
|
237
|
+
new CustomEvent("toggle", {
|
|
238
|
+
detail: e,
|
|
239
|
+
bubbles: !0,
|
|
240
|
+
composed: !0
|
|
241
|
+
})
|
|
242
|
+
);
|
|
243
|
+
}
|
|
244
|
+
clearAndFocusInput() {
|
|
245
|
+
this.inputValue = "", this.inputElement && (this.inputElement.value = "", this.inputElement.focus());
|
|
246
|
+
}
|
|
247
|
+
updated(e) {
|
|
248
|
+
super.updated(e), e.has("messages") && this.isOpen ? this.scrollToBottom(!0) : e.has("isOpen") && this.isOpen && (this.scrollToBottom(!1), this.focusInput());
|
|
249
|
+
}
|
|
250
|
+
scrollToBottom(e = !1) {
|
|
251
|
+
this.updateComplete.then(() => {
|
|
252
|
+
this.messageListElement && this.messageListElement.scrollTo({
|
|
253
|
+
top: this.messageListElement.scrollHeight,
|
|
254
|
+
behavior: e ? "smooth" : "auto"
|
|
255
|
+
});
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
focusInput() {
|
|
259
|
+
this.updateComplete.then(() => {
|
|
260
|
+
this.inputElement && this.inputElement.focus({ preventScroll: !0 });
|
|
261
|
+
});
|
|
262
|
+
}
|
|
263
|
+
formatTime(e) {
|
|
264
|
+
if (!e) return "";
|
|
265
|
+
try {
|
|
266
|
+
return new Date(e).toLocaleTimeString(this.locale, {
|
|
267
|
+
hour: "2-digit",
|
|
268
|
+
minute: "2-digit"
|
|
269
|
+
});
|
|
270
|
+
} catch {
|
|
271
|
+
return e;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
//#endregion
|
|
275
|
+
//#region Render Methods
|
|
276
|
+
renderHeader() {
|
|
277
|
+
return n`
|
|
278
|
+
<div
|
|
279
|
+
class="flex items-center px-4 py-3 shadow-lg relative z-10 bg-primary text-primary-content"
|
|
280
|
+
>
|
|
281
|
+
${this.headerIcon ? n`
|
|
282
|
+
<img
|
|
283
|
+
src="${this.headerIcon}"
|
|
284
|
+
alt="Header Icon"
|
|
285
|
+
loading="lazy"
|
|
286
|
+
class="w-12 h-12 rounded-full mr-3 object-cover bg-base-100/10"
|
|
287
|
+
/>
|
|
288
|
+
` : ""}
|
|
289
|
+
<span
|
|
290
|
+
class="font-bold text-lg tracking-wide truncate mr-4 select-none flex-1"
|
|
291
|
+
>
|
|
292
|
+
${this.title}
|
|
293
|
+
</span>
|
|
294
|
+
<button
|
|
295
|
+
@click=${this.handleClose}
|
|
296
|
+
class="flex items-center justify-center w-8 h-8 rounded-full hover:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/50 cursor-pointer"
|
|
297
|
+
aria-label="Close chat"
|
|
298
|
+
>
|
|
299
|
+
${b({ className: "w-5 h-5 pointer-events-none" })}
|
|
300
|
+
</button>
|
|
301
|
+
</div>
|
|
302
|
+
`;
|
|
303
|
+
}
|
|
304
|
+
renderMessage(e) {
|
|
305
|
+
const { content: r, isMine: l, timestamp: d } = e;
|
|
306
|
+
return n`
|
|
307
|
+
<div class="chat ${l ? "chat-end" : "chat-start"} mb-1">
|
|
308
|
+
<div class="chat-bubble ${l ? "chat-bubble-primary text-primary-content shadow-md" : "bg-base-300 text-base-content"} py-1.5 px-3 text-sm min-h-0 break-words">
|
|
309
|
+
${r}
|
|
310
|
+
</div>
|
|
311
|
+
${this.showTimestamp && d ? n`
|
|
312
|
+
<div class="chat-footer opacity-50 text-[10px] mt-1">
|
|
313
|
+
${this.formatTime(d)}
|
|
314
|
+
</div>
|
|
315
|
+
` : ""}
|
|
316
|
+
</div>
|
|
317
|
+
`;
|
|
318
|
+
}
|
|
319
|
+
renderMessageList() {
|
|
320
|
+
return this.messages.length === 0 ? n`
|
|
321
|
+
<div class="flex flex-col items-center justify-center h-full gap-3">
|
|
322
|
+
<slot name="empty-state">
|
|
323
|
+
${g({ className: "w-16 h-16 text-primary opacity-20" })}
|
|
324
|
+
<span
|
|
325
|
+
class="bg-base-200/50 px-4 py-1.5 rounded-full text-sm font-medium text-base-content/60"
|
|
326
|
+
>
|
|
327
|
+
${this.emptyText}
|
|
328
|
+
</span>
|
|
329
|
+
</slot>
|
|
330
|
+
</div>
|
|
331
|
+
` : this.messages.map((e) => this.renderMessage(e));
|
|
332
|
+
}
|
|
333
|
+
renderInput() {
|
|
334
|
+
const e = !this.inputValue.trim();
|
|
335
|
+
return n`
|
|
336
|
+
<div class="flex items-center gap-3 px-4 py-2 border-t border-base-300">
|
|
337
|
+
<input
|
|
338
|
+
type="text"
|
|
339
|
+
.placeholder=${this.placeholder}
|
|
340
|
+
.value=${this.inputValue}
|
|
341
|
+
@input=${this.handleInput}
|
|
342
|
+
@keydown=${this.handleKeyDown}
|
|
343
|
+
class="flex-1 bg-base-300 focus:bg-base-100 focus:ring-2 focus:ring-primary/20 rounded-full h-9 px-4 text-sm transition-all duration-200 outline-none"
|
|
344
|
+
/>
|
|
345
|
+
<button
|
|
346
|
+
@click=${this.submit}
|
|
347
|
+
@mousedown=${(r) => r.preventDefault()}
|
|
348
|
+
?disabled=${e}
|
|
349
|
+
class="flex items-center justify-center w-9 h-9 rounded-full text-primary hover:bg-primary/10 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 active:scale-95 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent"
|
|
350
|
+
aria-label="Send message"
|
|
351
|
+
>
|
|
352
|
+
${$({ className: "w-6 h-6 ml-0.5" })}
|
|
353
|
+
</button>
|
|
354
|
+
</div>
|
|
355
|
+
`;
|
|
356
|
+
}
|
|
357
|
+
renderWindow() {
|
|
358
|
+
const e = h.window[this.effectiveSize];
|
|
359
|
+
return n`
|
|
360
|
+
<div
|
|
361
|
+
class="card shadow-2xl bg-base-100 flex flex-col overflow-hidden rounded-xl font-sans"
|
|
362
|
+
style="${e}"
|
|
363
|
+
>
|
|
364
|
+
${this.renderHeader()}
|
|
365
|
+
<div
|
|
366
|
+
class="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-base-300"
|
|
367
|
+
>
|
|
368
|
+
${this.renderMessageList()}
|
|
369
|
+
</div>
|
|
370
|
+
${this.renderInput()}
|
|
371
|
+
</div>
|
|
372
|
+
`;
|
|
373
|
+
}
|
|
374
|
+
renderLauncher() {
|
|
375
|
+
const e = this.effectiveSize, r = h.launcher[e], l = h.icon[e];
|
|
376
|
+
return n`
|
|
377
|
+
<button
|
|
378
|
+
@click=${this.handleToggle}
|
|
379
|
+
class="btn btn-primary shadow-lg hover:shadow-2xl ${r} ${this.shapeClass} transition-all duration-300 ease-out hover:scale-110 hover:-translate-y-1 active:scale-90 p-0 overflow-hidden"
|
|
380
|
+
aria-label="${this.isOpen ? "Close chat" : "Open chat"}"
|
|
381
|
+
>
|
|
382
|
+
<div
|
|
383
|
+
class="transition-transform duration-300 w-full h-full flex items-center justify-center ${this.isOpen ? "rotate-90 scale-90" : ""}"
|
|
384
|
+
>
|
|
385
|
+
${this.isOpen ? this.launcherCloseIcon ? n`<img
|
|
386
|
+
src="${this.launcherCloseIcon}"
|
|
387
|
+
loading="lazy"
|
|
388
|
+
class="w-full h-full object-cover"
|
|
389
|
+
alt="Close"
|
|
390
|
+
/>` : b({ className: l }) : this.launcherIcon ? n`<img
|
|
391
|
+
src="${this.launcherIcon}"
|
|
392
|
+
loading="lazy"
|
|
393
|
+
class="w-full h-full object-cover"
|
|
394
|
+
alt="Chat"
|
|
395
|
+
/>` : g({ className: l })}
|
|
396
|
+
</div>
|
|
397
|
+
</button>
|
|
398
|
+
`;
|
|
399
|
+
}
|
|
400
|
+
//#endregion
|
|
401
|
+
render() {
|
|
402
|
+
return n`
|
|
403
|
+
<div class="chat-container bg-transparent">
|
|
404
|
+
${this.isOpen ? this.renderWindow() : ""} ${this.renderLauncher()}
|
|
405
|
+
</div>
|
|
406
|
+
`;
|
|
407
|
+
}
|
|
408
|
+
};
|
|
409
|
+
a.styles = [
|
|
410
|
+
z,
|
|
411
|
+
m`
|
|
412
|
+
:host {
|
|
413
|
+
display: block;
|
|
414
|
+
position: absolute;
|
|
415
|
+
bottom: 1rem;
|
|
416
|
+
right: 1rem;
|
|
417
|
+
z-index: 50;
|
|
418
|
+
background-color: transparent !important;
|
|
419
|
+
}
|
|
420
|
+
.chat-container {
|
|
421
|
+
display: flex;
|
|
422
|
+
flex-direction: column;
|
|
423
|
+
align-items: flex-end;
|
|
424
|
+
gap: 1rem;
|
|
425
|
+
pointer-events: none;
|
|
426
|
+
}
|
|
427
|
+
.chat-container > * {
|
|
428
|
+
pointer-events: auto;
|
|
429
|
+
}
|
|
430
|
+
`
|
|
431
|
+
];
|
|
432
|
+
i([
|
|
433
|
+
s({ type: String })
|
|
434
|
+
], a.prototype, "title", 2);
|
|
435
|
+
i([
|
|
436
|
+
s({ type: String })
|
|
437
|
+
], a.prototype, "placeholder", 2);
|
|
438
|
+
i([
|
|
439
|
+
s({ type: String })
|
|
440
|
+
], a.prototype, "size", 2);
|
|
441
|
+
i([
|
|
442
|
+
s({ type: Boolean, attribute: "show-timestamp" })
|
|
443
|
+
], a.prototype, "showTimestamp", 2);
|
|
444
|
+
i([
|
|
445
|
+
s({ type: String, attribute: "launcher-shape" })
|
|
446
|
+
], a.prototype, "launcherShape", 2);
|
|
447
|
+
i([
|
|
448
|
+
s({ type: Array })
|
|
449
|
+
], a.prototype, "messages", 2);
|
|
450
|
+
i([
|
|
451
|
+
s({ type: String, attribute: "empty-text" })
|
|
452
|
+
], a.prototype, "emptyText", 2);
|
|
453
|
+
i([
|
|
454
|
+
s({ type: String, attribute: "header-icon" })
|
|
455
|
+
], a.prototype, "headerIcon", 2);
|
|
456
|
+
i([
|
|
457
|
+
s({ type: String, attribute: "launcher-icon" })
|
|
458
|
+
], a.prototype, "launcherIcon", 2);
|
|
459
|
+
i([
|
|
460
|
+
s({ type: String, attribute: "launcher-close-icon" })
|
|
461
|
+
], a.prototype, "launcherCloseIcon", 2);
|
|
462
|
+
i([
|
|
463
|
+
s({ type: String })
|
|
464
|
+
], a.prototype, "locale", 2);
|
|
465
|
+
i([
|
|
466
|
+
w("input")
|
|
467
|
+
], a.prototype, "inputElement", 2);
|
|
468
|
+
i([
|
|
469
|
+
w(".overflow-y-auto")
|
|
470
|
+
], a.prototype, "messageListElement", 2);
|
|
471
|
+
i([
|
|
472
|
+
f()
|
|
473
|
+
], a.prototype, "isOpen", 2);
|
|
474
|
+
i([
|
|
475
|
+
f()
|
|
476
|
+
], a.prototype, "inputValue", 2);
|
|
477
|
+
a = i([
|
|
478
|
+
x("chat-widget")
|
|
479
|
+
], a);
|
|
480
|
+
export {
|
|
481
|
+
g as ChatIcon,
|
|
482
|
+
a as ChatWidget,
|
|
483
|
+
b as CloseIcon,
|
|
484
|
+
$ as SendIcon
|
|
485
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nhan0510/ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"main": "./dist/index.mjs",
|
|
5
|
+
"module": "./dist/index.mjs",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.mjs",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
},
|
|
12
|
+
"./src": {
|
|
13
|
+
"import": "./src/index.ts",
|
|
14
|
+
"types": "./src/index.ts"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev:watch": "vite build --watch",
|
|
22
|
+
"build": "vite build"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"lit": "^3.3.1"
|
|
26
|
+
},
|
|
27
|
+
"sideEffects": false
|
|
28
|
+
}
|