@yushaw/sanqian-chat 0.1.1 → 0.2.1

package/src/renderer/styles/variables.css

@@ -0,0 +1,704 @@
+/**
+ * @yushaw/sanqian-chat CSS Variables
+ *
+ * Design tokens for chat UI theming.
+ * Based on Sanqian Notes design system for consistency.
+ *
+ * Usage in Tailwind:
+ * - bg-chat-bg, text-chat-text, border-chat-border, etc.
+ */
+
+/* ========================================
+   Code Font
+   ======================================== */
+code {
+  font-family: 'Iosevka Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+:root {
+  /* ========================================
+     Background Colors
+     ======================================== */
+  --chat-bg: #f5f5f7;
+  --chat-surface: #fbfbfd;
+  --chat-card: #ffffff;
+
+  /* ========================================
+     Border Colors
+     ======================================== */
+  --chat-border: #e5e5ea;
+  --chat-divider: #e5e5ea;
+  --chat-border-focus: rgba(0, 0, 0, 0.12);
+  --chat-hover: rgba(0, 0, 0, 0.05);
+
+  /* ========================================
+     Text Colors
+     ======================================== */
+  --chat-text: #1d1d1f;
+  --chat-muted: #6e6e73;
+
+  /* ========================================
+     Accent Colors
+     ======================================== */
+  --chat-accent: #e85d75;
+  --chat-accent-soft: #fad0da;
+  --chat-selection: #fbe7ec;
+
+  /* ========================================
+     Status Colors
+     ======================================== */
+  --chat-success: #34c759;
+  --chat-error: #ff3b30;
+  --chat-warning: #ff9500;
+  --chat-info: #007aff;
+
+  /* ========================================
+     Shadows
+     ======================================== */
+  --chat-shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 4px rgba(15, 23, 42, 0.03);
+  --chat-shadow-elevated: 0 10px 26px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
+
+  /* ========================================
+     Scrollbar
+     ======================================== */
+  --chat-scrollbar: rgba(0, 0, 0, 0.18);
+
+  /* ========================================
+     Message Bubbles
+     ======================================== */
+  --chat-bubble-user: #3b82f6;
+  --chat-bubble-user-text: #ffffff;
+  --chat-bubble-assistant: var(--chat-surface);
+  --chat-bubble-assistant-text: var(--chat-text);
+
+  /* ========================================
+     Code Blocks
+     ======================================== */
+  --chat-code-bg: rgba(0, 0, 0, 0.03);
+  --chat-code-border: var(--chat-border);
+
+  /* ========================================
+     Sanqian Aliases (for shared prose styles)
+     ======================================== */
+  --color-bg: var(--chat-bg);
+  --color-card: var(--chat-card);
+  --color-card-solid: var(--chat-card);
+  --color-surface: var(--chat-surface);
+  --color-border: var(--chat-border);
+  --color-divider: var(--chat-divider);
+  --color-selection: var(--chat-selection);
+  --color-accent: var(--chat-accent);
+  --color-accent-soft: var(--chat-accent-soft);
+  --color-text: var(--chat-text);
+  --color-muted: var(--chat-muted);
+  --shadow-soft: var(--chat-shadow-soft);
+  --shadow-elevated: var(--chat-shadow-elevated);
+}
+
+/* ========================================
+   Dark Mode
+   ======================================== */
+.dark,
+:root.dark {
+  --chat-bg: #1a1a1a;
+  --chat-surface: #2d2d2d;
+  --chat-card: #242424;
+
+  --chat-border: #333333;
+  --chat-divider: #333333;
+  --chat-border-focus: rgba(255, 255, 255, 0.12);
+  --chat-hover: rgba(255, 255, 255, 0.08);
+
+  --chat-text: #ffffff;
+  --chat-muted: #aeaeb2;
+
+  --chat-accent: #e85d75;
+  --chat-accent-soft: #4a2a32;
+  --chat-selection: #3a2028;
+
+  --chat-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
+  --chat-shadow-elevated: 0 10px 26px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
+
+  --chat-scrollbar: rgba(255, 255, 255, 0.18);
+
+  --chat-bubble-user: #3b82f6;
+  --chat-bubble-user-text: #ffffff;
+  --chat-bubble-assistant: var(--chat-surface);
+  --chat-bubble-assistant-text: var(--chat-text);
+
+  --chat-code-bg: rgba(255, 255, 255, 0.05);
+  --chat-code-border: var(--chat-border);
+}
+
+/* ========================================
+   Scrollbar Styling
+   ======================================== */
+.chat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.chat-scrollbar:hover {
+  scrollbar-color: var(--chat-scrollbar) transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.chat-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar);
+}
+
+/* ========================================
+   Animations
+   ======================================== */
+@keyframes chat-cursor-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+@keyframes chat-cursor-breathing {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.chat-cursor-blink {
+  animation: chat-cursor-blink 1s step-end infinite;
+}
+
+.chat-cursor-breathing {
+  animation: chat-cursor-breathing 1s ease-in-out infinite;
+}
+
+@keyframes chat-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.chat-fade-in {
+  animation: chat-fade-in 0.2s ease-out;
+}
+
+/* ========================================
+   Prose Overrides
+   ======================================== */
+.prose {
+  --tw-prose-body: currentColor !important;
+  --tw-prose-headings: currentColor !important;
+  --tw-prose-lead: currentColor !important;
+  --tw-prose-links: var(--chat-accent) !important;
+  --tw-prose-bold: currentColor !important;
+  --tw-prose-counters: var(--chat-muted) !important;
+  --tw-prose-bullets: var(--chat-muted) !important;
+  --tw-prose-hr: var(--chat-divider) !important;
+  --tw-prose-quotes: var(--chat-muted) !important;
+  --tw-prose-quote-borders: var(--chat-accent) !important;
+  --tw-prose-captions: var(--chat-muted) !important;
+  --tw-prose-code: currentColor !important;
+  --tw-prose-pre-code: currentColor !important;
+  --tw-prose-pre-bg: var(--chat-code-bg) !important;
+  --tw-prose-th-borders: var(--chat-divider) !important;
+  --tw-prose-td-borders: var(--chat-divider) !important;
+}
+
+/* Override streamdown's default space-y-4 for compact layout */
+.prose .space-y-4 > * + * {
+  margin-top: 0.25rem !important;
+}
+
+.prose .space-y-4 {
+  --tw-space-y-reverse: 0 !important;
+}
+
+/* Force list bullets to display */
+.prose ul {
+  list-style-type: disc !important;
+  padding-left: 1.25rem !important;
+}
+
+.prose ol {
+  list-style-type: decimal !important;
+  padding-left: 1.25rem !important;
+}
+
+.prose li {
+  display: list-item !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+/* ========================================
+   Markdown Layout Parity (Sanqian)
+   ======================================== */
+.prose :is(p, li, h1, h2, h3, h4, h5, h6):last-child {
+  color: inherit;
+}
+
+.prose p:has(img:nth-child(2)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.prose p:has(img:nth-child(2)) img {
+  max-width: calc(50% - 0.25rem);
+  height: auto;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.prose p:has(img:nth-child(3)) img {
+  max-width: calc(33.333% - 0.333rem);
+}
+
+/* ========================================
+   Streamdown Code Block (Sanqian)
+   ======================================== */
+[data-streamdown="code-block"] {
+  position: relative;
+  border: none !important;
+  border-radius: 6px !important;
+  overflow: visible !important;
+  background: transparent !important;
+  margin: 6px 0 !important;
+}
+
+[data-streamdown="code-block-header"] {
+  position: absolute !important;
+  top: 14px !important;
+  right: 8px !important;
+  z-index: 10;
+  padding: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+[data-streamdown="code-block"]:hover [data-streamdown="code-block-header"] {
+  opacity: 1;
+}
+
+[data-streamdown="code-block-header"] > span:first-child {
+  font-size: 11px;
+  color: var(--color-muted);
+  text-transform: lowercase;
+  margin-right: 8px;
+}
+
+[data-streamdown="code-block-header"] > div {
+  display: flex;
+  gap: 4px;
+}
+
+[data-streamdown="code-block-header"] button {
+  padding: 4px !important;
+  border-radius: 4px !important;
+  background: var(--color-surface) !important;
+  opacity: 0.7;
+}
+
+[data-streamdown="code-block-header"] button:hover {
+  opacity: 1;
+  background: var(--color-border) !important;
+}
+
+[data-streamdown="code-block-header"] svg {
+  color: var(--color-muted) !important;
+  width: 12px !important;
+  height: 12px !important;
+}
+
+[data-streamdown="code-block-header"] button:hover svg {
+  color: var(--color-text) !important;
+}
+
+[data-streamdown="code-block-body"] {
+  padding: 8px 12px !important;
+  background: rgba(0, 0, 0, 0.02) !important;
+  border-radius: 6px !important;
+  font-size: 13px !important;
+  line-height: 1.5 !important;
+  white-space: pre !important;
+  overflow-x: auto !important;
+}
+
+[data-streamdown="code-block-body"] code {
+  white-space: pre !important;
+  display: block !important;
+}
+
+.dark [data-streamdown="code-block-body"],
+:root.dark [data-streamdown="code-block-body"] {
+  background: rgba(255, 255, 255, 0.03) !important;
+}
+
+[data-streamdown="code-block-body"] code span::before {
+  display: none !important;
+}
+
+[data-streamdown="code-block-body"],
+[data-streamdown="code-block-body"] code {
+  color: var(--color-text) !important;
+  opacity: 0.85;
+}
+
+[data-streamdown="code-block-body"] code span[style] {
+  background-color: transparent !important;
+}
+
+.dark [data-streamdown="code-block-body"] code span[style],
+:root.dark [data-streamdown="code-block-body"] code span[style] {
+  color: var(--shiki-dark) !important;
+}
+
+/* ========================================
+   Streamdown Table (Sanqian)
+   ======================================== */
+[data-streamdown="table-wrapper"].my-4 {
+  position: relative !important;
+  margin: 0 !important;
+  gap: 0 !important;
+}
+
+[data-streamdown="table-wrapper"].my-4 > .flex.items-center.justify-end.gap-1 {
+  position: absolute !important;
+  top: -8px !important;
+  right: 4px !important;
+  z-index: 10;
+  opacity: 0 !important;
+  transition: opacity 150ms ease;
+  margin: 0 !important;
+}
+
+[data-streamdown="table-wrapper"].my-4:hover > .flex.items-center.justify-end.gap-1 {
+  opacity: 1 !important;
+}
+
+[data-streamdown="table-wrapper"] .absolute.top-full {
+  border: 1px solid var(--color-divider) !important;
+  background: var(--color-card) !important;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+[data-streamdown="table-wrapper"] .absolute.top-full button {
+  color: var(--color-text) !important;
+  opacity: 0.8;
+}
+
+[data-streamdown="table-wrapper"] .absolute.top-full button:hover {
+  background: var(--color-surface) !important;
+  opacity: 1;
+}
+
+/* ========================================
+   Chat Input Styling (Sanqian style)
+   Layout: [Input box (flex-1)] [Send button]
+   ======================================== */
+
+/* Form container - flex row */
+.chat-input-form {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Input box container - takes remaining space */
+.chat-input-box {
+  flex: 1;
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+/* Hidden replica for auto-height */
+.chat-input-replica {
+  grid-area: 1 / 1 / 2 / 2;
+  visibility: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding-top: 0.625em;
+  padding-bottom: 0.625em;
+  min-height: 2.75em;
+  max-height: 200px;
+  pointer-events: none;
+  border: 1px solid transparent;
+  border-radius: 1rem;
+}
+
+/* Actual textarea - matches Sanqian's .smart-textarea-editor .ProseMirror */
+.chat-input-textarea {
+  grid-area: 1 / 1 / 2 / 2;
+  width: 100%;
+  min-height: 2.75em;
+  max-height: 200px;
+  padding-top: 0.625em;
+  padding-bottom: 0.625em;
+  border-radius: 1rem;
+  border: 1px solid var(--chat-border);
+  background: var(--chat-card);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  box-shadow: var(--chat-shadow-elevated);
+  color: var(--chat-text);
+  overflow-y: auto;
+  outline: none;
+  resize: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.chat-input-textarea::placeholder {
+  color: var(--chat-muted);
+}
+
+.chat-input-textarea:focus {
+  border-color: var(--chat-border-focus);
+}
+
+.chat-input-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Left slot - inside input box (matches Sanqian's left-1 bottom-[0.25em]) */
+.chat-input-left-slot {
+  position: absolute;
+  left: 0.25rem;
+  bottom: 0.25em;
+  z-index: 10;
+}
+
+/* Right slot - inside input box (matches Sanqian's right-1 bottom-[0.25em]) */
+.chat-input-right-slot {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25em;
+  z-index: 10;
+}
+
+/* Send button - OUTSIDE input box */
+.chat-input-send-btn {
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--chat-accent);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  box-shadow: var(--chat-shadow-soft);
+}
+
+.chat-input-send-btn:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: var(--chat-shadow-elevated);
+}
+
+.chat-input-send-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.chat-input-send-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.chat-input-send-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Header visuals */
+.chat-header-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.5rem;
+  color: var(--chat-muted);
+  background: transparent;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.chat-header-icon-btn:hover {
+  color: var(--chat-text);
+  background: var(--chat-hover);
+}
+
+.chat-header-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.chat-header-logo {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  object-fit: contain;
+  display: block;
+}
+
+.dark .chat-header-logo,
+:root.dark .chat-header-logo {
+  filter: invert(1);
+}
+
+.chat-logo-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-logo-wrapper > * {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.chat-logo-default {
+  opacity: 0.9;
+}
+
+.dark .chat-logo-default,
+:root.dark .chat-logo-default {
+  filter: invert(1);
+}
+
+.chat-empty-logo {
+  width: 5rem;
+  height: 5rem;
+  object-fit: contain;
+  display: block;
+}
+
+.chat-divider-border {
+  border-color: var(--chat-divider);
+}
+
+/* ========================================
+   Floating Window Container
+   For transparent Electron windows
+   Uses CSS variables set by CompactChat for tinted backgrounds
+   ======================================== */
+.chat-window-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--chat-window-bg, #FAFAF9);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--chat-window-border, rgba(0, 0, 0, 0.1));
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 8px 40px rgba(0, 0, 0, 0.12);
+}
+
+.dark .chat-window-container,
+:root.dark .chat-window-container {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.05),
+    0 8px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Send wrapper + stop tooltip (aligned with Sanqian stop affordance) */
+
+.chat-input-send-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.chat-input-stop-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--chat-divider);
+  background: var(--chat-card);
+  color: var(--chat-text);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  box-shadow: var(--chat-shadow-soft);
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.chat-input-stop-hotkey {
+  color: var(--chat-muted);
+  font-size: 0.7rem;
+  line-height: 1.1;
+}
+
+.chat-input-send-wrapper:hover .chat-input-stop-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ========================================
+   Tooltip (for header buttons)
+   ======================================== */
+.chat-tooltip-wrapper {
+  position: relative;
+}
+
+.chat-tooltip {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 100%;
+  margin-top: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--chat-card);
+  color: var(--chat-text);
+  font-size: 0.75rem;
+  line-height: 1.3;
+  white-space: nowrap;
+  text-align: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  box-shadow: var(--chat-shadow-soft);
+  border: 1px solid var(--chat-border);
+  z-index: 50;
+  transition: opacity 100ms ease, visibility 100ms ease;
+}
+
+.chat-tooltip-wrapper:hover .chat-tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.chat-tooltip-shortcut {
+  color: var(--chat-muted);
+  font-size: 0.7rem;
+}