@sales-bot-llm/sdk 0.2.0

package/src/widget/styles.ts

@@ -0,0 +1,350 @@
+/**
+ * CSS injected into the shadow root.
+ *
+ * Every visual property is driven by a CSS custom property on `:host`, so
+ * integrators can override anything through the typed `theme` option (which
+ * sets these vars at runtime on the shadow host's inline style) or through
+ * the raw-CSS escape hatch `customCss`.
+ *
+ * Class names (sb-launcher, sb-panel, …) are intentionally exposed for
+ * `customCss` selectors, but treat them as v1 surface — they may change.
+ */
+export const WIDGET_CSS = `
+:host {
+  /* ─── Colors ─────────────────────────────────────────────────────────── */
+  --sb-primary: #2563eb;
+  --sb-primary-hover: #1d4ed8;
+  --sb-primary-text: #ffffff;
+  --sb-text: #111827;
+  --sb-text-light: #6b7280;
+  --sb-bg: #ffffff;
+  --sb-bg-user: var(--sb-primary);
+  --sb-bg-assistant: #f3f4f6;
+  --sb-bg-error: #fef2f2;
+  --sb-text-error: #dc2626;
+  --sb-border: #e5e7eb;
+  --sb-focus-ring: rgba(37,99,235,0.4);
+
+  /* ─── Layout & sizing ────────────────────────────────────────────────── */
+  --sb-radius: 12px;
+  --sb-message-radius: 16px;
+  --sb-input-radius: 20px;
+  --sb-z: 9999;
+  --sb-launcher-size: 56px;
+  --sb-send-size: 38px;
+  --sb-panel-width: 380px;
+  --sb-panel-height: 560px;
+  --sb-panel-max-height: 80vh;
+  --sb-bottom-offset: 24px;
+  --sb-side-offset: 24px;
+  --sb-panel-gap: 12px;
+
+  /* ─── Typography ─────────────────────────────────────────────────────── */
+  --sb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --sb-font-size: 14px;
+  --sb-font-size-header: 15px;
+  --sb-font-size-small: 13px;
+
+  /* ─── Effects ────────────────────────────────────────────────────────── */
+  --sb-shadow: 0 4px 24px rgba(0,0,0,0.15);
+  --sb-transition: 0.15s ease;
+
+  all: initial;
+  display: block;
+  position: fixed;
+  bottom: var(--sb-bottom-offset);
+  right: var(--sb-side-offset);
+  z-index: var(--sb-z);
+  font-family: var(--sb-font-family);
+}
+
+:host(.sb-position--bottom-left) {
+  right: auto;
+  left: var(--sb-side-offset);
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Launcher button */
+.sb-launcher {
+  width: var(--sb-launcher-size);
+  height: var(--sb-launcher-size);
+  border-radius: 50%;
+  background: var(--sb-primary);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--sb-shadow);
+  transition: background var(--sb-transition), transform var(--sb-transition);
+  color: var(--sb-primary-text);
+  font-size: 24px;
+  outline: none;
+}
+
+.sb-launcher:hover {
+  background: var(--sb-primary-hover);
+  transform: scale(1.05);
+}
+
+.sb-launcher:focus-visible {
+  box-shadow: 0 0 0 3px var(--sb-focus-ring);
+}
+
+/* Panel */
+.sb-panel {
+  display: none;
+  position: absolute;
+  bottom: calc(var(--sb-launcher-size) + var(--sb-panel-gap));
+  right: 0;
+  width: var(--sb-panel-width);
+  height: var(--sb-panel-height);
+  max-height: var(--sb-panel-max-height);
+  background: var(--sb-bg);
+  border-radius: var(--sb-radius);
+  box-shadow: var(--sb-shadow);
+  border: 1px solid var(--sb-border);
+  flex-direction: column;
+  overflow: hidden;
+}
+
+:host(.sb-position--bottom-left) .sb-panel {
+  right: auto;
+  left: 0;
+}
+
+.sb-panel--open {
+  display: flex !important;
+}
+
+/* Header */
+.sb-header {
+  padding: 16px 20px;
+  background: var(--sb-primary);
+  color: var(--sb-primary-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.sb-header-title {
+  font-weight: 600;
+  font-size: var(--sb-font-size-header);
+  margin: 0;
+}
+
+.sb-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sb-close-btn,
+.sb-new-chat-btn {
+  background: none;
+  border: none;
+  color: var(--sb-primary-text);
+  cursor: pointer;
+  padding: 6px;
+  line-height: 1;
+  opacity: 0.8;
+  transition: opacity var(--sb-transition), background var(--sb-transition);
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sb-close-btn { font-size: 20px; padding: 0 6px; }
+
+.sb-close-btn:hover,
+.sb-new-chat-btn:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* Messages */
+.sb-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sb-message {
+  max-width: 80%;
+  padding: 10px 14px;
+  border-radius: var(--sb-message-radius);
+  font-size: var(--sb-font-size);
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.sb-message--user {
+  align-self: flex-end;
+  background: var(--sb-bg-user);
+  color: var(--sb-primary-text);
+  border-bottom-right-radius: 4px;
+}
+
+.sb-message--assistant {
+  align-self: flex-start;
+  background: var(--sb-bg-assistant);
+  color: var(--sb-text);
+  border-bottom-left-radius: 4px;
+}
+
+.sb-message--error {
+  align-self: center;
+  background: var(--sb-bg-error);
+  color: var(--sb-text-error);
+  border: 1px solid var(--sb-text-error);
+  font-size: var(--sb-font-size-small);
+}
+
+/* Typing indicator */
+.sb-thinking {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 12px 14px;
+}
+
+.sb-thinking span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sb-text-light);
+  animation: sb-bounce 1.2s infinite;
+}
+
+.sb-thinking span:nth-child(2) { animation-delay: 0.2s; }
+.sb-thinking span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes sb-bounce {
+  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Input row */
+.sb-input-row {
+  padding: 12px 16px;
+  border-top: 1px solid var(--sb-border);
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.sb-input {
+  flex: 1;
+  padding: 10px 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-input-radius);
+  font-size: var(--sb-font-size);
+  font-family: inherit;
+  outline: none;
+  resize: none;
+  line-height: 1.4;
+  max-height: 100px;
+  background: var(--sb-bg);
+  color: var(--sb-text);
+  transition: border-color var(--sb-transition);
+}
+
+.sb-input:focus {
+  border-color: var(--sb-primary);
+}
+
+.sb-input::placeholder {
+  color: var(--sb-text-light);
+}
+
+.sb-send {
+  width: var(--sb-send-size);
+  height: var(--sb-send-size);
+  border-radius: 50%;
+  background: var(--sb-primary);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sb-primary-text);
+  font-size: 16px;
+  flex-shrink: 0;
+  transition: background var(--sb-transition);
+}
+
+.sb-send:hover { background: var(--sb-primary-hover); }
+.sb-send:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Markdown content */
+.sb-message strong { font-weight: 700; }
+.sb-message em { font-style: italic; }
+.sb-message code {
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  background: rgba(0,0,0,0.08);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.sb-message--user code {
+  background: rgba(255,255,255,0.2);
+}
+.sb-message a {
+  color: var(--sb-primary);
+  text-decoration: underline;
+}
+.sb-message--user a {
+  color: rgba(255,255,255,0.9);
+}
+.sb-message p {
+  margin: 0;
+}
+.sb-message p + p {
+  margin-top: 0.6em;
+}
+.sb-message ul,
+.sb-message ol {
+  margin: 0.4em 0 0.4em 0;
+  padding-left: 1.4em;
+}
+.sb-message li + li {
+  margin-top: 2px;
+}
+.sb-message--user ul,
+.sb-message--user ol {
+  padding-left: 1.2em;
+}
+
+/* ─── Sales-workflow status pills ──────────────────────────────────────── */
+.sb-sales-pill {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  margin: 4px 0;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--sb-pill-bg, rgba(0, 0, 0, 0.05));
+  color: var(--sb-pill-fg, rgba(0, 0, 0, 0.7));
+  font-size: 12px;
+  line-height: 1.3;
+  animation: sb-sales-pill-pulse 1.8s ease-in-out infinite;
+}
+.sb-sales-pill-error {
+  background: var(--sb-pill-error-bg, rgba(255, 69, 58, 0.12));
+  color: var(--sb-pill-error-fg, rgba(155, 28, 28, 0.95));
+  animation: none;
+}
+@keyframes sb-sales-pill-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+`