@huyooo/ai-chat-shared 0.2.14 → 0.2.16

package/src/styles.css

@@ -1,757 +0,0 @@
-/**
- * Markdown 渲染样式
- * 参考 VitePress 和 GitHub 风格，优化显示效果
- * 统一的样式，供 React 和 Vue 版本使用
- */
-
-/* Markdown 容器 - VitePress 风格 */
-.markdown-content {
-  font-size: 15px;
-  line-height: 1.75;
-  color: var(--chat-text, #e4e4e7);
-  word-break: break-word;
-  overflow-wrap: break-word;
-  letter-spacing: 0.01em;
-}
-
-/* 段落 - 优化间距 */
-.markdown-content p {
-  margin: 1em 0;
-  line-height: 1.75;
-}
-
-.markdown-content p:first-child {
-  margin-top: 0;
-}
-
-.markdown-content p:last-child {
-  margin-bottom: 0;
-}
-
-/* 标题 - 统一的间距规则 */
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--chat-text, #e4e4e7);
-  letter-spacing: -0.01em;
-}
-
-/* 第一个标题不需要上边距 */
-.markdown-content h1:first-child,
-.markdown-content h2:first-child,
-.markdown-content h3:first-child,
-.markdown-content h4:first-child,
-.markdown-content h5:first-child,
-.markdown-content h6:first-child {
-  margin-top: 0;
-}
-
-/* 标题字体大小 */
-.markdown-content h1 {
-  font-size: 2em;
-  font-weight: 700;
-}
-
-.markdown-content h2 {
-  font-size: 1.5em;
-}
-
-.markdown-content h3 {
-  font-size: 1.25em;
-}
-
-.markdown-content h4 {
-  font-size: 1.1em;
-}
-
-.markdown-content h5 {
-  font-size: 1em;
-}
-
-.markdown-content h6 {
-  font-size: 0.9em;
-  color: var(--chat-text-muted, #a1a1aa);
-}
-
-/* 列表 - GitHub 风格，更好的缩进 */
-.markdown-content ul,
-.markdown-content ol {
-  margin: 1em 0;
-  padding-left: 2em;
-  line-height: 1.75;
-}
-
-.markdown-content li {
-  margin: 0.4em 0;
-  line-height: 1.75;
-}
-
-.markdown-content li > p {
-  margin: 0.4em 0;
-}
-
-.markdown-content ul {
-  list-style-type: disc;
-}
-
-.markdown-content ol {
-  list-style-type: decimal;
-}
-
-.markdown-content ul ul,
-.markdown-content ol ol,
-.markdown-content ul ol,
-.markdown-content ol ul {
-  margin: 0.3em 0;
-}
-
-/* 嵌套列表样式 */
-.markdown-content ul ul {
-  list-style-type: circle;
-}
-
-.markdown-content ul ul ul {
-  list-style-type: square;
-}
-
-/* 代码 - 更现代的样式 */
-.markdown-content code {
-  background: var(--chat-muted, #2a2a2a);
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
-  font-size: 0.9em;
-  color: var(--chat-code-text, #f4f4f5);
-  font-weight: 500;
-}
-
-.markdown-content pre {
-  background: transparent;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  padding: 16px;
-  overflow-x: auto;
-  margin: 1em 0;
-  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  position: relative;
-}
-
-/* 统一滚动条样式 */
-.markdown-content pre::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.markdown-content pre::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.markdown-content pre::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.markdown-content pre::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-.markdown-content pre code {
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-  color: inherit;
-  border: none;
-  font-weight: normal;
-}
-
-.markdown-code-block {
-  background: transparent;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  padding: 16px;
-  overflow-x: auto;
-  margin: 1em 0;
-  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
-  font-size: 14px;
-  line-height: 1.6;
-  position: relative;
-}
-
-/* 统一滚动条样式 */
-.markdown-code-block::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.markdown-code-block::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.markdown-code-block::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.markdown-code-block::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-.markdown-code-block code {
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-  color: var(--chat-code-text, #f4f4f5);
-  border: none;
-  font-weight: normal;
-}
-
-/* 代码高亮样式 - One Dark Pro 主题 */
-.markdown-code-block .hljs-keyword {
-  color: #c678dd;
-}
-.markdown-code-block .hljs-string {
-  color: #98c379;
-}
-.markdown-code-block .hljs-number {
-  color: #d19a66;
-}
-.markdown-code-block .hljs-comment {
-  color: #5c6370;
-  font-style: italic;
-}
-.markdown-code-block .hljs-function {
-  color: #61afef;
-}
-.markdown-code-block .hljs-class {
-  color: #e5c07b;
-}
-.markdown-code-block .hljs-variable {
-  color: #e06c75;
-}
-.markdown-code-block .hljs-operator {
-  color: #56b6c2;
-}
-.markdown-code-block .hljs-punctuation {
-  color: #abb2bf;
-}
-.markdown-code-block .hljs-property {
-  color: #e06c75;
-}
-.markdown-code-block .hljs-attr {
-  color: #d19a66;
-}
-.markdown-code-block .hljs-built_in {
-  color: #e5c07b;
-}
-.markdown-code-block .hljs-title {
-  color: #61afef;
-}
-.markdown-code-block .hljs-params {
-  color: #abb2bf;
-}
-.markdown-code-block .hljs-literal {
-  color: #56b6c2;
-}
-.markdown-code-block .hljs-type {
-  color: #e5c07b;
-}
-
-/* 引用 - VitePress 风格，更明显的视觉区分 */
-.markdown-content blockquote {
-  margin: 1em 0;
-  padding: 0.5em 1em;
-  border-left: 4px solid var(--chat-primary, #3b82f6);
-  background: var(--chat-muted, #2a2a2a);
-  border-radius: 0 4px 4px 0;
-  color: var(--chat-text, #e4e4e7);
-}
-
-.markdown-content blockquote p {
-  margin: 0.5em 0;
-}
-
-.markdown-content blockquote p:first-child {
-  margin-top: 0;
-}
-
-.markdown-content blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-/* 表格容器 - 支持横向滚动 */
-.markdown-content .markdown-table-wrapper {
-  width: 100%;
-  overflow-x: auto;
-  margin: 1em 0;
-  border-radius: 8px;
-  /* 确保滚动条始终可见（内容超出时） */
-  scrollbar-gutter: stable;
-}
-
-/* 统一滚动条样式 */
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-/* 表格（仅在 markdown 容器内生效，避免影响业务里其它同名 class） */
-.markdown-content .markdown-table {
-  min-width: 100%;
-  width: max-content;
-  border-collapse: separate;
-  border-spacing: 0;
-  margin: 0;
-  font-size: 0.95em;
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-/* 表头样式 */
-.markdown-content .markdown-table thead {
-  display: table-header-group;
-}
-
-.markdown-content .markdown-table th {
-  padding: 0.875em 1em;
-  text-align: left;
-  font-weight: 600;
-  color: var(--chat-text, #ccc);
-  border-bottom: 1px solid var(--chat-border, #333);
-  border-right: 1px solid var(--chat-border, #333);
-  border-top: none;
-  background: transparent;
-}
-
-.markdown-content .markdown-table th:last-child {
-  border-right: none;
-}
-
-/* 表格内容样式 */
-.markdown-content .markdown-table tbody {
-  display: table-row-group;
-}
-
-.markdown-content .markdown-table td {
-  padding: 0.875em 1em;
-  text-align: left;
-  color: var(--chat-text, #ccc);
-  border-bottom: 1px solid var(--chat-border, #333);
-  border-right: 1px solid var(--chat-border, #333);
-  border-top: none;
-  vertical-align: top;
-}
-
-.markdown-content .markdown-table td:last-child {
-  border-right: none;
-}
-
-.markdown-content .markdown-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* 表格行悬停效果（可选，保持简洁） */
-.markdown-content .markdown-table tbody tr {
-  transition: opacity 0.15s ease;
-}
-
-/* 表格中的图标和特殊内容 */
-.markdown-content .markdown-table td img,
-.markdown-content .markdown-table td svg,
-.markdown-content .markdown-table th img,
-.markdown-content .markdown-table th svg {
-  vertical-align: middle;
-  margin-right: 0.5em;
-  display: inline-block;
-}
-
-/* 表格中的进度条、星级等 */
-.markdown-content .markdown-table td .progress,
-.markdown-content .markdown-table td .stars {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25em;
-}
-
-/* 表格中的代码块 */
-.markdown-content .markdown-table td code,
-.markdown-content .markdown-table th code {
-  font-size: 0.85em;
-  padding: 0.15em 0.35em;
-}
-
-/* 表格响应式 */
-@media (max-width: 768px) {
-  .markdown-content .markdown-table {
-    font-size: 13px;
-    border-radius: 6px;
-  }
-
-  .markdown-content .markdown-table th,
-  .markdown-content .markdown-table td {
-    padding: 0.6em 0.8em;
-  }
-}
-
-/* 链接 - VitePress 风格 */
-.markdown-link {
-  color: var(--chat-link, #60a5fa);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  transition: all 0.2s ease;
-  font-weight: 500;
-}
-
-.markdown-link:hover {
-  color: var(--chat-link, #3b82f6);
-  border-bottom-color: var(--chat-link, #3b82f6);
-}
-
-/* 图片 - 优化显示 */
-.markdown-content img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-  margin: 1em 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* 水平线 - 更优雅 */
-.markdown-content hr {
-  border: none;
-  border-top: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  margin: 1em 0;
-  height: 0;
-}
-
-/* 强调 */
-.markdown-content strong {
-  font-weight: 600;
-  color: var(--chat-text, #e4e4e7);
-}
-
-.markdown-content em {
-  font-style: italic;
-  color: var(--chat-text, #e4e4e7);
-}
-
-.markdown-content u {
-  text-decoration: underline;
-  text-decoration-color: var(--chat-text-muted, #a1a1aa);
-  text-underline-offset: 0.15em;
-}
-
-.markdown-content s {
-  text-decoration: line-through;
-  opacity: 0.7;
-  color: var(--chat-text-muted, #a1a1aa);
-}
-
-/* 任务列表 - checkbox 显示为文本 */
-.markdown-content .markdown-task-item {
-  list-style-type: disc;
-}
-
-.markdown-content .markdown-task-checkbox {
-  font-size: 1em;
-  color: var(--chat-text, #e4e4e7);
-  user-select: none;
-}
-
-/* 定义列表 */
-.markdown-content dl {
-  margin: 1em 0;
-}
-
-.markdown-content dt {
-  font-weight: 600;
-  margin-top: 0.8em;
-  color: var(--chat-text, #e4e4e7);
-}
-
-.markdown-content dd {
-  margin: 0.4em 0 0.8em 2em;
-  color: var(--chat-text-muted, #a1a1aa);
-}
-
-/* 代码块中的行号（如果使用） */
-.markdown-code-block .line-numbers {
-  padding-right: 1em;
-  border-right: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  margin-right: 1em;
-  user-select: none;
-  opacity: 0.5;
-}
-
-/* ============================================
-   LaTeX 数学公式样式
-   ============================================ */
-
-/* 块级公式 */
-.latex-block {
-  display: block;
-  margin: 1em 0;
-  padding: 0.75em 1em;
-  overflow-x: auto;
-  background: var(--chat-latex-bg, rgba(255, 255, 255, 0.02));
-  border-radius: 8px;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
-}
-
-/* LaTeX fenced 代码块渲染：嵌在代码块容器内时由外层负责卡片与 padding，避免套娃 */
-.code-block-wrapper .latex-rendered {
-  margin: 0;
-  padding: 14px 18px;
-}
-
-.code-block-wrapper .latex-rendered .latex-block {
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-}
-
-.latex-block .katex-display {
-  margin: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-align: left;
-}
-
-.latex-block .katex {
-  text-align: left;
-}
-
-/* 行内公式 */
-.latex-inline {
-  display: inline;
-  padding: 0 0.15em;
-}
-
-/* 公式错误提示 */
-.latex-error {
-  color: var(--chat-error, #ef4444);
-  background: rgba(239, 68, 68, 0.1);
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.9em;
-}
-
-/* KaTeX 样式覆盖 - 适配暗色主题 */
-.katex {
-  font-size: 1.1em;
-  color: var(--chat-text, #e5e7eb);
-}
-
-.katex .mord,
-.katex .mop,
-.katex .mrel,
-.katex .mbin,
-.katex .mpunct,
-.katex .mopen,
-.katex .mclose,
-.katex .minner {
-  color: inherit;
-}
-
-/* KaTeX 分数线颜色 */
-.katex .frac-line {
-  background: var(--chat-text, #e5e7eb);
-}
-
-/* KaTeX 根号 */
-.katex .sqrt > .sqrt-sign {
-  color: var(--chat-text, #e5e7eb);
-}
-
-/* KaTeX 矩阵边框 */
-.katex .mord.mtight,
-.katex .delimsizing {
-  color: var(--chat-text, #e5e7eb);
-}
-
-/* ==================== Markdown 滚动条样式（与系统 chat-scrollbar 对齐） ==================== */
-/* 说明：
- * - table/pre/code/latex/mermaid 等在 markdown 中都会产生横向/纵向滚动
- * - 这里统一使用系统变量 --chat-scrollbar / --chat-scrollbar-hover
- */
-
-.markdown-content pre::-webkit-scrollbar,
-.text-block pre::-webkit-scrollbar,
-.markdown-code-block::-webkit-scrollbar,
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar,
-.text-block .markdown-table-wrapper::-webkit-scrollbar,
-.latex-block::-webkit-scrollbar,
-.mermaid-rendered::-webkit-scrollbar,
-.mermaid-source::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.markdown-content pre::-webkit-scrollbar-track,
-.text-block pre::-webkit-scrollbar-track,
-.markdown-code-block::-webkit-scrollbar-track,
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-track,
-.text-block .markdown-table-wrapper::-webkit-scrollbar-track,
-.latex-block::-webkit-scrollbar-track,
-.mermaid-rendered::-webkit-scrollbar-track,
-.mermaid-source::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.markdown-content pre::-webkit-scrollbar-thumb,
-.text-block pre::-webkit-scrollbar-thumb,
-.markdown-code-block::-webkit-scrollbar-thumb,
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb,
-.text-block .markdown-table-wrapper::-webkit-scrollbar-thumb,
-.latex-block::-webkit-scrollbar-thumb,
-.mermaid-rendered::-webkit-scrollbar-thumb,
-.mermaid-source::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.markdown-content pre::-webkit-scrollbar-thumb:hover,
-.text-block pre::-webkit-scrollbar-thumb:hover,
-.markdown-code-block::-webkit-scrollbar-thumb:hover,
-.markdown-content .markdown-table-wrapper::-webkit-scrollbar-thumb:hover,
-.text-block .markdown-table-wrapper::-webkit-scrollbar-thumb:hover,
-.latex-block::-webkit-scrollbar-thumb:hover,
-.mermaid-rendered::-webkit-scrollbar-thumb:hover,
-.mermaid-source::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-/* ==================== Mermaid 图表样式 ==================== */
-
-/* Mermaid 占位符（加载中） */
-.mermaid-placeholder {
-  margin: 1em 0;
-  padding: 2em;
-  background: var(--chat-muted, #2a2a2a);
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  border-radius: 8px;
-  text-align: center;
-}
-
-.mermaid-loading {
-  color: var(--chat-text-muted, #888);
-  font-size: 0.9em;
-}
-
-/* Mermaid 嵌在代码块容器内时：外层已有边框/圆角，这里只做内容区对齐 */
-.code-block-wrapper .mermaid-placeholder,
-.code-block-wrapper .mermaid-rendered,
-.code-block-wrapper .mermaid-error-container {
-  margin: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  padding: 14px 18px;
-}
-
-/* 错误态仍然需要明显提示 */
-.code-block-wrapper .mermaid-error-container {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-/* Mermaid 渲染后容器 */
-.mermaid-rendered {
-  /* Mermaid 通常嵌在消息的代码块容器里，外层已有卡片/边框。
-     这里保持最小必要样式：只负责滚动与尺寸适配，避免“套娃边框/多余背景”。 */
-  margin: 0.75em 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  overflow-x: auto;
-}
-
-.mermaid-rendered svg {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-}
-
-/* Mermaid 错误状态 */
-.mermaid-error-container {
-  margin: 1em 0;
-  padding: 1em;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 8px;
-}
-
-.mermaid-error {
-  color: #ef4444;
-  font-size: 0.9em;
-  margin-bottom: 0.5em;
-}
-
-.mermaid-source {
-  margin: 0;
-  padding: 0.75em;
-  background: var(--chat-muted, #1a1a1a);
-  border-radius: 4px;
-  font-size: 0.8em;
-  color: var(--chat-text-muted, #888);
-  white-space: pre-wrap;
-  word-break: break-all;
-  max-height: 200px;
-  overflow: auto;
-}
-
-/* Mermaid 深色主题覆盖 */
-.mermaid-rendered .node rect,
-.mermaid-rendered .node circle,
-.mermaid-rendered .node ellipse,
-.mermaid-rendered .node polygon,
-.mermaid-rendered .node path {
-  fill: var(--chat-muted, #3a3a3a);
-  stroke: var(--chat-border, #555);
-}
-
-.mermaid-rendered .node .label {
-  color: var(--chat-text, #e4e4e7);
-}
-
-.mermaid-rendered .edgeLabel {
-  background-color: var(--chat-muted, #2a2a2a);
-  color: var(--chat-text, #e4e4e7);
-}
-
-.mermaid-rendered .edgePath path {
-  stroke: var(--chat-text-muted, #888);
-}
-
-.mermaid-rendered .marker {
-  fill: var(--chat-text-muted, #888);
-  stroke: var(--chat-text-muted, #888);
-}