@huyooo/ai-chat-shared 0.2.3

package/dist/styles.css

@@ -0,0 +1,505 @@
+/**
+ * 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;
+}
+
+/* 统一滚动条样式 */
+.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-table {
+  width: 100%;
+  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-table thead {
+  display: table-header-group;
+}
+
+.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-table th:last-child {
+  border-right: none;
+}
+
+/* 表格内容样式 */
+.markdown-table tbody {
+  display: table-row-group;
+}
+
+.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-table td:last-child {
+  border-right: none;
+}
+
+.markdown-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* 表格行悬停效果（可选，保持简洁） */
+.markdown-table tbody tr {
+  transition: opacity 0.15s ease;
+}
+
+/* 表格中的图标和特殊内容 */
+.markdown-table td img,
+.markdown-table td svg,
+.markdown-table th img,
+.markdown-table th svg {
+  vertical-align: middle;
+  margin-right: 0.5em;
+  display: inline-block;
+}
+
+/* 表格中的进度条、星级等 */
+.markdown-table td .progress,
+.markdown-table td .stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+/* 表格中的代码块 */
+.markdown-table td code,
+.markdown-table th code {
+  font-size: 0.85em;
+  padding: 0.15em 0.35em;
+}
+
+/* 表格响应式 */
+@media (max-width: 768px) {
+  .markdown-table {
+    font-size: 13px;
+    border-radius: 6px;
+  }
+
+  .markdown-table th,
+  .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;
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@huyooo/ai-chat-shared",
+  "version": "0.2.3",
+  "description": "AI Chat 共享模块 - 内容解析器、类型定义",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "highlight.js": "^11.11.1",
+    "marked": "^12.0.0",
+    "dompurify": "^3.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "@types/dompurify": "^3.0.5"
+  },
+  "peerDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/highlighter.ts

@@ -0,0 +1,80 @@
+/**
+ * 代码高亮工具
+ * 使用 highlight.js 提供代码语法高亮
+ */
+
+import hljs from 'highlight.js'
+
+/** 支持的语言别名映射 */
+const LANGUAGE_ALIASES: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  jsx: 'javascript',
+  py: 'python',
+  rb: 'ruby',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  md: 'markdown',
+}
+
+/**
+ * 高亮代码
+ * @param code 代码内容
+ * @param language 语言标识
+ * @returns 高亮后的 HTML
+ */
+export function highlightCode(code: string, language?: string): string {
+  if (!language) {
+    // 无语言指定，尝试自动检测
+    try {
+      const result = hljs.highlightAuto(code)
+      return result.value
+    } catch {
+      return escapeHtml(code)
+    }
+  }
+
+  // 处理语言别名
+  const normalizedLang = LANGUAGE_ALIASES[language.toLowerCase()] || language.toLowerCase()
+
+  try {
+    if (hljs.getLanguage(normalizedLang)) {
+      return hljs.highlight(code, { language: normalizedLang }).value
+    }
+    // 语言不支持，返回转义后的原文
+    return escapeHtml(code)
+  } catch {
+    return escapeHtml(code)
+  }
+}
+
+/** HTML 转义 */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+/**
+ * 获取语言显示名称
+ * @param language 语言标识
+ * @returns 显示名称
+ */
+export function getLanguageDisplayName(language?: string): string {
+  if (!language) return 'Plain Text'
+  
+  const normalizedLang = LANGUAGE_ALIASES[language.toLowerCase()] || language.toLowerCase()
+  const langDef = hljs.getLanguage(normalizedLang)
+  
+  if (langDef) {
+    // 首字母大写
+    return normalizedLang.charAt(0).toUpperCase() + normalizedLang.slice(1)
+  }
+  
+  return language
+}

package/src/index.ts

@@ -0,0 +1,46 @@
+/**
+ * @huyooo/ai-chat-shared
+ * 
+ * AI Chat 共享模块
+ * - 内容解析器
+ * - 代码高亮
+ * - 共享类型定义
+ */
+
+// 类型导出
+export type {
+  // 内容块类型
+  ContentBlockType,
+  ContentBlockBase,
+  TextBlock,
+  CodeBlock,
+  ContentBlock,
+  // 工具渲染器类型
+  ToolRendererProps,
+  // 内置数据类型
+  WeatherData,
+  WeatherForecastItem,
+  SearchResultItem,
+  CodeExecutionResult,
+  FileOperationResult,
+} from './types'
+
+// 解析器导出
+export {
+  parseContent,
+  createStreamParseState,
+  parseContentStream,
+  finishStreamParse,
+} from './parser'
+export type { StreamParseState } from './parser'
+
+// 高亮工具导出
+export {
+  highlightCode,
+  getLanguageDisplayName,
+} from './highlighter'
+
+// Markdown 渲染工具导出
+export {
+  renderMarkdown,
+} from './markdown'