vanilla-agent 1.20.0 → 1.22.0

package/src/styles/widget.css

@@ -6,6 +6,16 @@
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   line-height: 1.5;
+  
+  /* Theme-aware markdown variables - inherit from theme colors set by JavaScript */
+  --cw-md-code-block-bg: var(--cw-container, #f3f4f6);
+  --cw-md-code-block-border-color: var(--cw-border, #e5e7eb);
+  --cw-md-inline-code-bg: var(--cw-container, #f3f4f6);
+  --cw-md-table-border-color: var(--cw-border, #e5e7eb);
+  --cw-md-table-header-bg: var(--cw-container, #f8fafc);
+  --cw-md-hr-color: var(--cw-divider, #e5e7eb);
+  --cw-md-blockquote-border-color: var(--cw-accent, #3b82f6);
+  --cw-md-blockquote-text-color: var(--cw-muted, #6b7280);
 }
 
 #vanilla-agent-root * {
@@ -86,6 +96,71 @@
   --cw-radius-lg: 1.5rem;
   --cw-launcher-radius: 9999px;
   --cw-button-radius: 9999px;
+
+  /* Markdown Header Variables */
+  --cw-md-h1-size: 1.5rem;
+  --cw-md-h1-weight: 700;
+  --cw-md-h1-margin: 1rem 0 0.5rem;
+  --cw-md-h1-line-height: 1.25;
+  --cw-md-h2-size: 1.25rem;
+  --cw-md-h2-weight: 700;
+  --cw-md-h2-margin: 0.875rem 0 0.5rem;
+  --cw-md-h2-line-height: 1.3;
+  --cw-md-h3-size: 1.125rem;
+  --cw-md-h3-weight: 600;
+  --cw-md-h3-margin: 0.75rem 0 0.375rem;
+  --cw-md-h3-line-height: 1.4;
+  --cw-md-h4-size: 1rem;
+  --cw-md-h4-weight: 600;
+  --cw-md-h4-margin: 0.625rem 0 0.25rem;
+  --cw-md-h4-line-height: 1.5;
+  --cw-md-h5-size: 0.875rem;
+  --cw-md-h5-weight: 600;
+  --cw-md-h5-margin: 0.5rem 0 0.25rem;
+  --cw-md-h5-line-height: 1.5;
+  --cw-md-h6-size: 0.75rem;
+  --cw-md-h6-weight: 600;
+  --cw-md-h6-margin: 0.5rem 0 0.25rem;
+  --cw-md-h6-line-height: 1.5;
+
+  /* Markdown Table Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-table-border-color: #e5e7eb;
+  --cw-md-table-header-bg: #f8fafc;
+  --cw-md-table-header-weight: 600;
+  --cw-md-table-cell-padding: 0.5rem 0.75rem;
+  --cw-md-table-border-radius: 0.375rem;
+
+  /* Markdown Horizontal Rule Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-hr-color: #e5e7eb;
+  --cw-md-hr-height: 1px;
+  --cw-md-hr-margin: 1rem 0;
+
+  /* Markdown Blockquote Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-blockquote-border-color: #3b82f6;
+  --cw-md-blockquote-border-width: 3px;
+  --cw-md-blockquote-padding: 0.5rem 1rem;
+  --cw-md-blockquote-margin: 0.5rem 0;
+  --cw-md-blockquote-bg: transparent;
+  --cw-md-blockquote-text-color: #6b7280;
+  --cw-md-blockquote-font-style: italic;
+
+  /* Markdown Code Block Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-code-block-bg: #f3f4f6;
+  --cw-md-code-block-border-color: #e5e7eb;
+  --cw-md-code-block-text-color: inherit;
+  --cw-md-code-block-padding: 0.75rem;
+  --cw-md-code-block-border-radius: 0.375rem;
+  --cw-md-code-block-font-size: 0.875rem;
+
+  /* Markdown Inline Code Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-inline-code-bg: #f3f4f6;
+  --cw-md-inline-code-padding: 0.125rem 0.375rem;
+  --cw-md-inline-code-border-radius: 0.25rem;
+  --cw-md-inline-code-font-size: 0.875em;
+
+  /* Markdown Strong/Em Variables */
+  --cw-md-strong-weight: 600;
+  --cw-md-em-style: italic;
 }
 
 .tvw-rounded-xl {
@@ -803,13 +878,14 @@ form:focus-within textarea {
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
-  background-color: #f3f4f6;
-  padding: 0.75rem;
-  border-radius: 0.375rem;
+  background-color: var(--cw-md-code-block-bg);
+  color: var(--cw-md-code-block-text-color);
+  padding: var(--cw-md-code-block-padding);
+  border-radius: var(--cw-md-code-block-border-radius);
   margin: 0.5rem 0;
-  font-size: 0.875rem;
+  font-size: var(--cw-md-code-block-font-size);
   line-height: 1.5;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--cw-md-code-block-border-color);
 }
 
 .vanilla-message-bubble code {
@@ -938,3 +1014,389 @@ form:focus-within textarea {
   margin: 0.25rem 0;
   padding-left: 0.25rem;
 }
+
+/* ============================================
+   Markdown Header Styles
+   ============================================ */
+.vanilla-message-bubble h1 {
+  font-size: var(--cw-md-h1-size);
+  font-weight: var(--cw-md-h1-weight);
+  margin: var(--cw-md-h1-margin);
+  line-height: var(--cw-md-h1-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h2 {
+  font-size: var(--cw-md-h2-size);
+  font-weight: var(--cw-md-h2-weight);
+  margin: var(--cw-md-h2-margin);
+  line-height: var(--cw-md-h2-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h3 {
+  font-size: var(--cw-md-h3-size);
+  font-weight: var(--cw-md-h3-weight);
+  margin: var(--cw-md-h3-margin);
+  line-height: var(--cw-md-h3-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h4 {
+  font-size: var(--cw-md-h4-size);
+  font-weight: var(--cw-md-h4-weight);
+  margin: var(--cw-md-h4-margin);
+  line-height: var(--cw-md-h4-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h5 {
+  font-size: var(--cw-md-h5-size);
+  font-weight: var(--cw-md-h5-weight);
+  margin: var(--cw-md-h5-margin);
+  line-height: var(--cw-md-h5-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h6 {
+  font-size: var(--cw-md-h6-size);
+  font-weight: var(--cw-md-h6-weight);
+  margin: var(--cw-md-h6-margin);
+  line-height: var(--cw-md-h6-line-height);
+  color: inherit;
+}
+
+/* Remove top margin on first heading */
+.vanilla-message-bubble h1:first-child,
+.vanilla-message-bubble h2:first-child,
+.vanilla-message-bubble h3:first-child,
+.vanilla-message-bubble h4:first-child,
+.vanilla-message-bubble h5:first-child,
+.vanilla-message-bubble h6:first-child {
+  margin-top: 0;
+}
+
+/* ============================================
+   Markdown Table Styles
+   ============================================ */
+.vanilla-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  overflow: hidden;
+  border-radius: var(--cw-md-table-border-radius);
+  border: 1px solid var(--cw-md-table-border-color);
+}
+
+.vanilla-message-bubble thead {
+  background-color: var(--cw-md-table-header-bg);
+}
+
+.vanilla-message-bubble th {
+  font-weight: var(--cw-md-table-header-weight);
+  text-align: left;
+  padding: var(--cw-md-table-cell-padding);
+  border-bottom: 1px solid var(--cw-md-table-border-color);
+}
+
+.vanilla-message-bubble td {
+  padding: var(--cw-md-table-cell-padding);
+  border-bottom: 1px solid var(--cw-md-table-border-color);
+  text-align: left;
+}
+
+.vanilla-message-bubble tr:last-child td {
+  border-bottom: none;
+}
+
+.vanilla-message-bubble tbody tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* ============================================
+   Markdown Horizontal Rule Styles
+   ============================================ */
+.vanilla-message-bubble hr {
+  border: none;
+  height: var(--cw-md-hr-height);
+  background-color: var(--cw-md-hr-color);
+  margin: var(--cw-md-hr-margin);
+}
+
+/* ============================================
+   Markdown Blockquote Styles
+   ============================================ */
+.vanilla-message-bubble blockquote {
+  border-left: var(--cw-md-blockquote-border-width) solid var(--cw-md-blockquote-border-color);
+  padding: var(--cw-md-blockquote-padding);
+  margin: var(--cw-md-blockquote-margin);
+  background-color: var(--cw-md-blockquote-bg);
+  color: var(--cw-md-blockquote-text-color);
+  font-style: var(--cw-md-blockquote-font-style);
+}
+
+.vanilla-message-bubble blockquote p {
+  margin: 0;
+}
+
+.vanilla-message-bubble blockquote p + p {
+  margin-top: 0.5rem;
+}
+
+/* Nested blockquotes */
+.vanilla-message-bubble blockquote blockquote {
+  margin-left: 0.5rem;
+}
+
+/* ============================================
+   Markdown Inline Code Styles (not in pre)
+   ============================================ */
+.vanilla-message-bubble code:not(pre code) {
+  background-color: var(--cw-md-inline-code-bg);
+  padding: var(--cw-md-inline-code-padding);
+  border-radius: var(--cw-md-inline-code-border-radius);
+  font-size: var(--cw-md-inline-code-font-size);
+}
+
+/* ============================================
+   Markdown Strong/Emphasis Styles
+   ============================================ */
+.vanilla-message-bubble strong,
+.vanilla-message-bubble b {
+  font-weight: var(--cw-md-strong-weight);
+}
+
+.vanilla-message-bubble em,
+.vanilla-message-bubble i {
+  font-style: var(--cw-md-em-style);
+}
+
+/* ============================================
+   User Message Markdown Overrides
+   Ensure styles work in user bubbles too
+   ============================================ */
+.vanilla-message-user-bubble h1,
+.vanilla-message-user-bubble h2,
+.vanilla-message-user-bubble h3,
+.vanilla-message-user-bubble h4,
+.vanilla-message-user-bubble h5,
+.vanilla-message-user-bubble h6 {
+  color: inherit;
+}
+
+.vanilla-message-user-bubble table {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble th,
+.vanilla-message-user-bubble td {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble thead {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vanilla-message-user-bubble tbody tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.vanilla-message-user-bubble hr {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble blockquote {
+  border-left-color: rgba(255, 255, 255, 0.5);
+  color: inherit;
+  opacity: 0.9;
+}
+
+.vanilla-message-user-bubble code:not(pre code) {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ============================================
+   Message Action Buttons (Copy, Upvote, Downvote)
+   ============================================ */
+
+/* Make message bubble position relative for overlay positioning */
+.vanilla-message-bubble {
+  position: relative;
+}
+
+/* Fade-in animation for action buttons */
+@keyframes tvw-message-actions-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Base action bar styles */
+.tvw-message-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--cw-divider, #f1f5f9);
+  /* Fade in when first shown (for "always" visibility) */
+  animation: tvw-message-actions-fade-in 0.3s ease-out;
+}
+
+/* Action bar alignment */
+.tvw-message-actions-left {
+  justify-content: flex-start;
+}
+
+.tvw-message-actions-center {
+  justify-content: center;
+}
+
+.tvw-message-actions-right {
+  justify-content: flex-end;
+}
+
+/* Hover visibility mode - overlay on desktop */
+@media (hover: hover) {
+  .tvw-message-actions-hover {
+    /* Hidden by default */
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease-in-out;
+  }
+
+  /* Pill layout - compact floating pill */
+  .tvw-message-actions-hover.tvw-message-actions-pill {
+    position: absolute;
+    bottom: 0.5rem;
+    margin-top: 0;
+    padding: 0.25rem;
+    border-top: none;
+    width: fit-content;
+    background-color: var(--cw-surface, #ffffff);
+    border: 1px solid var(--cw-divider, #f1f5f9);
+    border-radius: var(--cw-radius-md, 0.75rem);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Pill layout - position based on alignment */
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-left {
+    left: 0.75rem;
+    right: auto;
+  }
+
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-right {
+    right: 0.75rem;
+    left: auto;
+  }
+
+  /* Row layout - full-width bar at bottom */
+  .tvw-message-actions-hover.tvw-message-actions-row {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: 0;
+    padding: 0.5rem 0.75rem;
+    border-top: none;
+    background: linear-gradient(
+      to top,
+      var(--cw-surface, #ffffff) 70%,
+      transparent
+    );
+    border-radius: 0 0 var(--cw-radius-lg, 1.5rem) var(--cw-radius-lg, 1.5rem);
+  }
+
+  .vanilla-message-bubble:hover .tvw-message-actions-hover,
+  .vanilla-message-bubble:focus-within .tvw-message-actions-hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* On touch devices (no hover support), show inline and always visible */
+@media (hover: none) {
+  .tvw-message-actions-hover {
+    /* Keep normal flow positioning on mobile */
+    position: static;
+    opacity: 1;
+  }
+}
+
+/* Action button base styles */
+.tvw-message-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--cw-muted, #6b7280);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
+}
+
+.tvw-message-action-btn:hover {
+  background-color: var(--cw-container, #f8fafc);
+  color: var(--cw-primary, #111827);
+}
+
+.tvw-message-action-btn:active {
+  transform: scale(0.95);
+}
+
+.tvw-message-action-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
+}
+
+.tvw-message-action-btn:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.tvw-message-action-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
+}
+
+/* Active state (voted) */
+.tvw-message-action-btn.tvw-message-action-active {
+  background-color: var(--cw-accent, #1d4ed8);
+  color: #ffffff;
+}
+
+.tvw-message-action-btn.tvw-message-action-active:hover {
+  background-color: var(--cw-accent, #1d4ed8);
+  color: #ffffff;
+  opacity: 0.9;
+}
+
+/* Success state (after copy) */
+.tvw-message-action-btn.tvw-message-action-success {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+.tvw-message-action-btn.tvw-message-action-success:hover {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+/* Icon styling within buttons */
+.tvw-message-action-btn svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}