@huyooo/ai-chat-shared 0.2.3

package/src/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/src/types.ts

@@ -0,0 +1,90 @@
+/**
+ * AI Chat 共享类型定义
+ */
+
+// ============ 内容块类型 ============
+
+/** 内容块类型 */
+export type ContentBlockType = 'text' | 'code'
+
+/** 内容块基础接口 */
+export interface ContentBlockBase {
+  id: string
+  type: ContentBlockType
+}
+
+/** 文本块 */
+export interface TextBlock extends ContentBlockBase {
+  type: 'text'
+  content: string
+}
+
+/** 代码块 */
+export interface CodeBlock extends ContentBlockBase {
+  type: 'code'
+  content: string
+  language?: string
+  filename?: string
+}
+
+/** 内容块联合类型 */
+export type ContentBlock = TextBlock | CodeBlock
+
+// ============ 工具渲染器类型 ============
+
+/** 工具渲染器 Props */
+export interface ToolRendererProps {
+  /** 工具名称 */
+  toolName: string
+  /** 工具参数 */
+  toolArgs: Record<string, unknown>
+  /** 工具返回结果 */
+  toolResult: unknown
+  /** 执行状态 */
+  status: 'running' | 'completed' | 'error'
+}
+
+// ============ 内置工具结果数据类型 ============
+
+/** 天气数据 */
+export interface WeatherData {
+  city: string
+  temperature: number
+  condition: string
+  humidity?: number
+  wind?: string
+  icon?: string
+  forecast?: WeatherForecastItem[]
+}
+
+/** 天气预报项 */
+export interface WeatherForecastItem {
+  date: string
+  high: number
+  low: number
+  condition: string
+  icon?: string
+}
+
+/** 搜索结果项 */
+export interface SearchResultItem {
+  title: string
+  url: string
+  snippet?: string
+}
+
+/** 代码执行结果 */
+export interface CodeExecutionResult {
+  output: string
+  exitCode: number
+  error?: string
+}
+
+/** 文件操作结果 */
+export interface FileOperationResult {
+  success: boolean
+  path: string
+  operation: 'read' | 'write' | 'delete' | 'create' | 'move'
+  content?: string
+  error?: string
+}