@composy/chat-core 0.0.1

package/lib/renderer/style-manager.cjs

@@ -0,0 +1,646 @@
+/*!
+* ***********************************
+* @composy/chat-core v0.0.1       *
+* Built with rollup               *
+* Build time: 2024-08-17 11:30:32 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dom = require("../constants/dom.cjs");
+//#region src/renderer/style-manager.ts
+const styleRefs = /* @__PURE__ */ new Map();
+function injectStyles(tokens, prefix = require_dom.DEFAULT_CLASS_PREFIX) {
+	const normalizedPrefix = require_dom.normalizeClassPrefix(prefix);
+	const styleId = require_dom.getStyleElementId(normalizedPrefix);
+	styleRefs.set(styleId, (styleRefs.get(styleId) ?? 0) + 1);
+	upsertStyle(styleId, generateCSS(tokens, normalizedPrefix));
+}
+function updateStyles(tokens, prefix = require_dom.DEFAULT_CLASS_PREFIX) {
+	const normalizedPrefix = require_dom.normalizeClassPrefix(prefix);
+	upsertStyle(require_dom.getStyleElementId(normalizedPrefix), generateCSS(tokens, normalizedPrefix));
+}
+function removeStyles(prefix = require_dom.DEFAULT_CLASS_PREFIX) {
+	const styleId = require_dom.getStyleElementId(prefix);
+	const refs = styleRefs.get(styleId) ?? 0;
+	if (refs > 1) {
+		styleRefs.set(styleId, refs - 1);
+		return;
+	}
+	styleRefs.delete(styleId);
+	document.getElementById(styleId)?.remove();
+}
+function cls(prefix, ...parts) {
+	const normalizedPrefix = require_dom.normalizeClassPrefix(prefix);
+	return parts.map((part) => `${normalizedPrefix}-${part}`).join(" ");
+}
+const clsx = require_dom.cx;
+function upsertStyle(styleId, cssText) {
+	let style = document.getElementById(styleId);
+	if (!style) {
+		style = document.createElement("style");
+		style.id = styleId;
+		style.dataset.ldesignChat = "true";
+		document.head.appendChild(style);
+	}
+	style.textContent = cssText;
+}
+function tokenVars(t) {
+	const vars = {
+		bgPrimary: t.bgPrimary,
+		bgSecondary: t.bgSecondary,
+		bgBubbleOutgoing: t.bgBubbleOutgoing,
+		bgBubbleIncoming: t.bgBubbleIncoming,
+		bgInput: t.bgInput,
+		bgMention: t.bgMention,
+		bgMentionHover: t.bgMentionHover,
+		bgMentionActive: t.bgMentionActive,
+		bgLoadMore: t.bgLoadMore,
+		bgSystemMessage: t.bgSystemMessage,
+		bgDropOverlay: t.bgDropOverlay,
+		bgDangerSoft: t.bgDangerSoft,
+		textPrimary: t.textPrimary,
+		textSecondary: t.textSecondary,
+		textBubbleOutgoing: t.textBubbleOutgoing,
+		textBubbleIncoming: t.textBubbleIncoming,
+		textMention: t.textMention,
+		textMentionTag: t.textMentionTag,
+		textTimestamp: t.textTimestamp,
+		textSystem: t.textSystem,
+		textPlaceholder: t.textPlaceholder,
+		borderPrimary: t.borderPrimary,
+		borderInput: t.borderInput,
+		borderInputFocus: t.borderInputFocus,
+		borderMention: t.borderMention,
+		colorSending: t.colorSending,
+		colorSent: t.colorSent,
+		colorDelivered: t.colorDelivered,
+		colorRead: t.colorRead,
+		colorFailed: t.colorFailed,
+		colorLink: t.colorLink,
+		shadowPanel: t.shadowPanel,
+		shadowMention: t.shadowMention,
+		avatarBg: t.avatarBg,
+		avatarText: t.avatarText,
+		btnPrimaryBg: t.btnPrimaryBg,
+		btnPrimaryText: t.btnPrimaryText,
+		btnPrimaryHover: t.btnPrimaryHover,
+		scrollbarThumb: t.scrollbarThumb,
+		scrollbarTrack: t.scrollbarTrack,
+		bgToolbar: t.bgToolbar,
+		borderToolbar: t.borderToolbar,
+		toolbarIconColor: t.toolbarIconColor,
+		toolbarIconHover: t.toolbarIconHover,
+		toolbarVoiceActive: t.toolbarVoiceActive
+	};
+	return Object.entries(vars).map(([key, value]) => `  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-${toKebab(key)}: ${value};`).join("\n");
+}
+function sizeVars() {
+	return `
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-size: var(--size-font-base);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-size-sm: var(--size-font-sm);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-size-xs: var(--size-font-xs);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-size-lg: var(--size-font-lg);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-weight-regular: var(--size-font-weight-regular);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-weight-medium: var(--size-font-weight-medium);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-font-weight-semibold: var(--size-font-weight-semibold);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-line-height: var(--size-line-normal);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-line-height-bubble: var(--size-line-relaxed);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-1: var(--size-1);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-2: var(--size-2);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-3: var(--size-3);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-4: var(--size-4);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-5: var(--size-5);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-6: var(--size-6);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-space-8: var(--size-8);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-avatar-size: var(--size-11);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-mention-avatar-size: var(--size-9);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-toolbar-button-size: var(--size-9);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-input-button-size: var(--size-11);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-file-icon-size: var(--size-12);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-image-max-size: calc(var(--size-13) * 5);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-panel-max-height: calc(var(--size-24) + var(--size-4));
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-textarea-min-height: var(--size-11);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-textarea-max-height: calc(var(--size-12) * 3);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-message-max-width: 65%;
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-system-message-max-width: 80%;
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-file-bubble-min-width: calc(var(--size-24) + var(--size-4));
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-border-width: var(--size-border-width-thin);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-border-width-drop: var(--size-border-width-medium);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-xs: var(--size-radius-sm);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-sm: var(--size-radius-md);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-md: var(--size-radius-lg);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-lg: var(--size-radius-xl);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-pill: var(--size-radius-full);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-radius-circle: var(--size-radius-circle);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-transition-fast: var(--size-duration-fast) var(--size-ease-out);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-transition-normal: var(--size-duration-normal) var(--size-ease-out);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-z-overlay: var(--size-z-dropdown);
+  ${require_dom.COMPONENT_CSS_VAR_PREFIX}-z-mention: var(--size-z-popover);
+`;
+}
+function generateCSS(tokens, p) {
+	return `
+/* @composy/chat-core styles */
+.${p}-container,
+.${p}-container * {
+  box-sizing: border-box;
+}
+
+.${p}-container {
+${tokenVars(tokens)}
+${sizeVars()}
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  background: ${v("bg-primary")};
+  color: ${v("text-primary")};
+  font-family: ${v("font-family")};
+  font-size: ${v("font-size")};
+  line-height: ${v("line-height")};
+  border: ${v("border-width")} solid ${v("border-primary")};
+  border-radius: ${v("radius-md")};
+  box-shadow: ${v("shadow-panel")};
+}
+
+.${p}-message-list {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: ${v("space-6")};
+  scroll-behavior: smooth;
+}
+
+.${p}-message-list::-webkit-scrollbar {
+  width: var(--size-3);
+}
+
+.${p}-message-list::-webkit-scrollbar-thumb {
+  background: ${v("scrollbar-thumb")};
+  border-radius: ${v("radius-pill")};
+}
+
+.${p}-message-list::-webkit-scrollbar-track {
+  background: ${v("scrollbar-track")};
+}
+
+.${p}-load-more {
+  margin-bottom: ${v("space-5")};
+  padding: ${v("space-5")};
+  text-align: center;
+  color: ${v("color-link")};
+  font-size: ${v("font-size-sm")};
+  background: ${v("bg-load-more")};
+  border-radius: ${v("radius-sm")};
+  cursor: pointer;
+  user-select: none;
+  transition: opacity ${v("transition-fast")}, background ${v("transition-fast")};
+}
+
+.${p}-load-more:hover {
+  background: ${v("bg-mention-hover")};
+}
+
+.${p}-load-more--loading {
+  cursor: default;
+  opacity: .6;
+}
+
+.${p}-time-divider {
+  padding: ${v("space-4")} 0;
+  color: ${v("text-timestamp")};
+  font-size: ${v("font-size-sm")};
+  text-align: center;
+  user-select: none;
+}
+
+.${p}-time-divider span {
+  padding: ${v("space-1")} ${v("space-5")};
+  background: ${v("bg-secondary")};
+  border-radius: ${v("radius-pill")};
+}
+
+.${p}-message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: ${v("space-4")};
+  margin-bottom: ${v("space-5")};
+}
+
+.${p}-message-row--outgoing {
+  flex-direction: row-reverse;
+}
+
+.${p}-message-row--system {
+  justify-content: center;
+}
+
+.${p}-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("avatar-size")};
+  height: ${v("avatar-size")};
+  overflow: hidden;
+  flex-shrink: 0;
+  color: ${v("avatar-text")};
+  background: ${v("avatar-bg")};
+  border-radius: ${v("radius-circle")};
+  font-size: ${v("font-size")};
+  font-weight: ${v("font-weight-semibold")};
+}
+
+.${p}-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.${p}-message-body {
+  display: flex;
+  flex-direction: column;
+  max-width: ${v("message-max-width")};
+  min-width: 0;
+}
+
+.${p}-message-row--outgoing .${p}-message-body {
+  align-items: flex-end;
+}
+
+.${p}-nickname {
+  margin-bottom: ${v("space-2")};
+  padding: 0 ${v("space-2")};
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size-sm")};
+}
+
+.${p}-bubble {
+  position: relative;
+  max-width: 100%;
+  padding: ${v("space-5")} ${v("space-6")};
+  border-radius: ${v("radius-lg")};
+  word-break: break-word;
+  overflow-wrap: unknownwhere;
+  white-space: pre-wrap;
+  line-height: ${v("line-height-bubble")};
+}
+
+.${p}-bubble--incoming {
+  color: ${v("text-bubble-incoming")};
+  background: ${v("bg-bubble-incoming")};
+  border-top-left-radius: ${v("radius-xs")};
+}
+
+.${p}-bubble--outgoing {
+  color: ${v("text-bubble-outgoing")};
+  background: ${v("bg-bubble-outgoing")};
+  border-top-right-radius: ${v("radius-xs")};
+}
+
+.${p}-bubble--image {
+  padding: ${v("space-2")};
+  background: unset;
+}
+
+.${p}-bubble--image img {
+  display: block;
+  max-width: ${v("image-max-size")};
+  max-height: ${v("image-max-size")};
+  border-radius: ${v("radius-md")};
+  cursor: pointer;
+}
+
+.${p}-bubble--file {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-5")};
+  min-width: ${v("file-bubble-min-width")};
+}
+
+.${p}-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("file-icon-size")};
+  height: ${v("file-icon-size")};
+  flex-shrink: 0;
+  background: ${v("bg-secondary")};
+  border-radius: ${v("radius-sm")};
+  font-size: ${v("font-size-lg")};
+}
+
+.${p}-file-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.${p}-file-name {
+  overflow: hidden;
+  font-size: ${v("font-size")};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.${p}-file-size {
+  margin-top: ${v("space-1")};
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size-sm")};
+}
+
+.${p}-system-message {
+  max-width: ${v("system-message-max-width")};
+  padding: ${v("space-2")} ${v("space-6")};
+  color: ${v("text-system")};
+  background: ${v("bg-system-message")};
+  border-radius: ${v("radius-pill")};
+  font-size: ${v("font-size-sm")};
+  text-align: center;
+}
+
+.${p}-message-footer {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-3")};
+  margin-top: ${v("space-1")};
+  padding: 0 ${v("space-2")};
+}
+
+.${p}-message-row--outgoing .${p}-message-footer {
+  flex-direction: row-reverse;
+}
+
+.${p}-timestamp,
+.${p}-status {
+  font-size: ${v("font-size-xs")};
+}
+
+.${p}-timestamp {
+  color: ${v("text-timestamp")};
+}
+
+.${p}-status--sending { color: ${v("color-sending")}; }
+.${p}-status--sent { color: ${v("color-sent")}; }
+.${p}-status--delivered { color: ${v("color-delivered")}; }
+.${p}-status--read { color: ${v("color-read")}; }
+.${p}-status--failed {
+  color: ${v("color-failed")};
+  cursor: pointer;
+}
+
+.${p}-mention-tag,
+.${p}-link {
+  color: ${v("text-mention-tag")};
+  font-weight: ${v("font-weight-medium")};
+}
+
+.${p}-mention-tag {
+  cursor: pointer;
+}
+
+.${p}-mention-tag:hover,
+.${p}-link:hover {
+  text-decoration: underline;
+}
+
+.${p}-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: ${v("space-4")};
+  position: relative;
+  padding: ${v("space-5")} ${v("space-6")};
+  border-top: ${v("border-width")} solid ${v("border-primary")};
+  background: ${v("bg-input")};
+}
+
+.${p}-input-wrapper {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.${p}-textarea {
+  width: 100%;
+  min-height: ${v("textarea-min-height")};
+  max-height: ${v("textarea-max-height")};
+  padding: ${v("space-4")} ${v("space-5")};
+  overflow-y: auto;
+  resize: none;
+  outline: none;
+  color: ${v("text-primary")};
+  background: ${v("bg-primary")};
+  border: ${v("border-width")} solid ${v("border-input")};
+  border-radius: ${v("radius-md")};
+  font-family: inherit;
+  font-size: ${v("font-size")};
+  line-height: ${v("line-height")};
+  transition: border-color ${v("transition-fast")}, box-shadow ${v("transition-fast")};
+}
+
+.${p}-textarea:focus {
+  border-color: ${v("border-input-focus")};
+  box-shadow: 0 0 0 ${v("border-width-drop")} ${v("bg-drop-overlay")};
+}
+
+.${p}-textarea::placeholder {
+  color: ${v("text-placeholder")};
+}
+
+.${p}-send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("input-button-size")};
+  height: ${v("input-button-size")};
+  flex-shrink: 0;
+  color: ${v("btn-primary-text")};
+  background: ${v("btn-primary-bg")};
+  border: 0;
+  border-radius: ${v("radius-md")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")}, opacity ${v("transition-fast")};
+}
+
+.${p}-send-btn:hover {
+  background: ${v("btn-primary-hover")};
+}
+
+.${p}-send-btn:disabled {
+  cursor: default;
+  opacity: .5;
+}
+
+.${p}-send-btn svg {
+  width: var(--size-7);
+  height: var(--size-7);
+}
+
+.${p}-mention-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  z-index: ${v("z-mention")};
+  max-height: ${v("panel-max-height")};
+  margin-bottom: ${v("space-2")};
+  overflow-y: auto;
+  background: ${v("bg-mention")};
+  border: ${v("border-width")} solid ${v("border-mention")};
+  border-radius: ${v("radius-md")};
+  box-shadow: ${v("shadow-mention")};
+}
+
+.${p}-mention-item {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-4")};
+  padding: ${v("space-4")} ${v("space-5")};
+  color: ${v("text-mention")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")};
+}
+
+.${p}-mention-item:hover {
+  background: ${v("bg-mention-hover")};
+}
+
+.${p}-mention-item--active {
+  background: ${v("bg-mention-active")};
+}
+
+.${p}-mention-item-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("mention-avatar-size")};
+  height: ${v("mention-avatar-size")};
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${v("avatar-text")};
+  background: ${v("avatar-bg")};
+  border-radius: ${v("radius-circle")};
+  font-size: ${v("font-size-sm")};
+  font-weight: ${v("font-weight-semibold")};
+}
+
+.${p}-mention-item-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.${p}-mention-item-name {
+  font-size: ${v("font-size")};
+}
+
+.${p}-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size")};
+}
+
+.${p}-toolbar {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-1")};
+  padding: ${v("space-3")} ${v("space-4")};
+  background: ${v("bg-toolbar")};
+  border-bottom: ${v("border-width")} solid ${v("border-toolbar")};
+  border-radius: ${v("radius-md")} ${v("radius-md")} 0 0;
+}
+
+.${p}-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("toolbar-button-size")};
+  height: ${v("toolbar-button-size")};
+  flex-shrink: 0;
+  padding: 0;
+  color: ${v("toolbar-icon-color")};
+  background: unset;
+  border: 0;
+  border-radius: ${v("radius-sm")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")}, color ${v("transition-fast")};
+}
+
+.${p}-toolbar-btn svg {
+  width: var(--size-6);
+  height: var(--size-6);
+}
+
+.${p}-toolbar-btn:hover {
+  color: ${v("toolbar-icon-hover")};
+  background: ${v("bg-drop-overlay")};
+}
+
+.${p}-toolbar-btn--active {
+  color: ${v("toolbar-voice-active")};
+  background: ${v("bg-danger-soft")};
+}
+
+.${p}-toolbar-btn--active:hover {
+  color: ${v("toolbar-voice-active")};
+  background: ${v("bg-danger-soft")};
+}
+
+.${p}-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: ${v("z-overlay")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: ${v("bg-drop-overlay")};
+  border: ${v("border-width-drop")} dashed ${v("toolbar-icon-hover")};
+  border-radius: ${v("radius-md")};
+}
+
+.${p}-drop-overlay span {
+  color: ${v("toolbar-icon-hover")};
+  font-size: ${v("font-size-sm")};
+  font-weight: ${v("font-weight-medium")};
+}
+
+@keyframes ${p}-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.${p}-bubble--streaming::after {
+  content: '';
+  display: inline-block;
+  width: ${v("border-width-drop")};
+  height: 1em;
+  margin-left: ${v("space-1")};
+  vertical-align: text-bottom;
+  background: currentColor;
+  animation: ${p}-blink 800ms infinite;
+}
+`;
+}
+function v(name) {
+	return `var(${require_dom.COMPONENT_CSS_VAR_PREFIX}-${name})`;
+}
+function toKebab(key) {
+	return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+//#endregion
+exports.cls = cls;
+exports.clsx = clsx;
+exports.injectStyles = injectStyles;
+exports.removeStyles = removeStyles;
+exports.updateStyles = updateStyles;
+/*! End of @composy/chat-core | Powered by @composy/builder */
+//# sourceMappingURL=style-manager.cjs.map