@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/components/message/parts/SearchPart.tsx

@@ -1,63 +0,0 @@
-import { useState, useEffect, type FC } from 'react'
-import { CollapsibleCard } from './CollapsibleCard'
-import type { SearchResult, StepsExpandedType } from '../../../types'
-import './SearchPart.css'
-
-interface SearchPartProps {
-  query?: string
-  results?: SearchResult[]
-  status: 'running' | 'done'
-  expandedType?: StepsExpandedType
-}
-
-export const SearchPart: FC<SearchPartProps> = ({ 
-  results, 
-  status,
-  expandedType = 'auto'
-}) => {
-  // 根据模式计算初始状态
-  const getInitialExpanded = () => {
-    if (expandedType === 'open') return true
-    if (expandedType === 'close') return false
-    // auto: 运行时展开
-    return status === 'running'
-  }
-  
-  const [expanded, setExpanded] = useState(getInitialExpanded)
-  
-  // auto 模式下：状态变化时自动折叠/展开
-  useEffect(() => {
-    if (expandedType === 'auto') {
-      setExpanded(status === 'running')
-    }
-  }, [status, expandedType])
-
-  return (
-    <CollapsibleCard
-      icon="lucide:search"
-      iconColor="var(--chat-accent, #3b82f6)"
-      title={status === 'running' ? '搜索中...' : `搜索完成 (${results?.length || 0} 条结果)`}
-      spinning={status === 'running'}
-      expanded={expanded}
-      onExpandedChange={setExpanded}
-    >
-      {results && results.length > 0 && (
-        <div className="search-results">
-          {results.map((item, i) => (
-            <a 
-              key={i} 
-              href={item.url} 
-              target="_blank"
-              rel="noopener noreferrer"
-              className="search-item"
-            >
-              <div className="search-item-title">{item.title}</div>
-              <div className="search-item-snippet">{item.snippet}</div>
-              <div className="search-item-url">{item.url}</div>
-            </a>
-          ))}
-        </div>
-      )}
-    </CollapsibleCard>
-  )
-}

package/src/components/message/parts/TextPart.css

@@ -1,579 +0,0 @@
-/* ============================================
-   Vercel + GitHub 混合风格 Markdown 主题
-   ============================================ */
-
-.text-part {
-  max-width: 100%;
-}
-
-/* 文本块基础样式 */
-.text-block {
-  font-size: 14px;
-  line-height: 1.75;
-  color: var(--chat-text, #e5e7eb);
-  word-break: break-word;
-  letter-spacing: 0.01em;
-}
-
-/* 段落 */
-.text-block p {
-  margin: 0.75em 0;
-}
-
-.text-block p:first-child {
-  margin-top: 0;
-}
-
-.text-block p:last-child {
-  margin-bottom: 0;
-}
-
-/* 标题 - GitHub 风格层级 + Vercel 现代感 */
-.text-block h1 {
-  font-size: 1.5em;
-  font-weight: 700;
-  margin: 1.5em 0 0.75em;
-  padding-bottom: 0.4em;
-  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  color: var(--chat-text-strong, #fff);
-  letter-spacing: -0.02em;
-}
-
-.text-block h2 {
-  font-size: 1.3em;
-  font-weight: 600;
-  margin: 1.25em 0 0.6em;
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
-  color: var(--chat-text-strong, #fff);
-  letter-spacing: -0.01em;
-}
-
-.text-block h3 {
-  font-size: 1.15em;
-  font-weight: 600;
-  margin: 1em 0 0.5em;
-  color: var(--chat-text-strong, #fff);
-}
-
-.text-block h4,
-.text-block h5,
-.text-block h6 {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 0.8em 0 0.4em;
-  color: var(--chat-text, #e5e7eb);
-}
-
-.text-block h1:first-child,
-.text-block h2:first-child,
-.text-block h3:first-child {
-  margin-top: 0;
-}
-
-/* 列表 */
-.text-block ul,
-.text-block ol {
-  margin: 0.75em 0;
-  padding-left: 1.5em;
-}
-
-.text-block li {
-  margin: 0.4em 0;
-  line-height: 1.6;
-}
-
-.text-block li::marker {
-  color: var(--chat-text-muted, #9ca3af);
-}
-
-/* 嵌套列表 */
-.text-block li ul,
-.text-block li ol {
-  margin: 0.25em 0;
-}
-
-/* 任务列表 */
-.text-block .markdown-task-item {
-  list-style: none;
-  margin-left: -1.5em;
-  padding-left: 0;
-}
-
-.text-block .markdown-task-checkbox {
-  display: inline-block;
-  width: 1.2em;
-  margin-right: 0.4em;
-  font-family: "Monaco", "Menlo", monospace;
-  font-size: 0.85em;
-  color: var(--chat-accent, #60a5fa);
-}
-
-/* 链接 - Vercel 风格下划线动画 */
-.text-block a {
-  color: var(--chat-accent, #60a5fa);
-  text-decoration: none;
-  background-image: linear-gradient(var(--chat-accent, #60a5fa), var(--chat-accent, #60a5fa));
-  background-size: 0% 1px;
-  background-position: 0 100%;
-  background-repeat: no-repeat;
-  transition: background-size 0.25s ease-out;
-}
-
-.text-block a:hover {
-  background-size: 100% 1px;
-}
-
-/* 粗体和斜体 */
-.text-block strong {
-  font-weight: 600;
-  color: var(--chat-text-strong, #fff);
-}
-
-.text-block em {
-  font-style: italic;
-  color: var(--chat-text, #e5e7eb);
-}
-
-/* 删除线 */
-.text-block s,
-.text-block del {
-  text-decoration: line-through;
-  color: var(--chat-text-muted, #9ca3af);
-}
-
-/* 行内代码 - 突出显示 */
-.text-block code {
-  font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", "Consolas", monospace;
-  font-size: 0.875em;
-  background: var(--chat-inline-code-bg, rgba(110, 118, 129, 0.25));
-  padding: 0.2em 0.45em;
-  border-radius: 6px;
-  color: var(--chat-inline-code-text, #f472b6);
-  font-weight: 500;
-}
-
-/* 引用块 - VitePress 风格 */
-.text-block blockquote {
-  margin: 1em 0;
-  padding: 0.75em 1em;
-  border-left: 4px solid var(--chat-accent, #60a5fa);
-  background: var(--chat-blockquote-bg, rgba(96, 165, 250, 0.08));
-  border-radius: 0 8px 8px 0;
-  color: var(--chat-text-muted, #d1d5db);
-}
-
-.text-block blockquote p {
-  margin: 0.25em 0;
-}
-
-.text-block blockquote p:first-child {
-  margin-top: 0;
-}
-
-.text-block blockquote p:last-child {
-  margin-bottom: 0;
-}
-
-/* 分隔线 - 渐变效果 */
-.text-block hr {
-  border: none;
-  height: 1px;
-  margin: 1.5em 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--chat-border, rgba(255, 255, 255, 0.15)) 20%,
-    var(--chat-border, rgba(255, 255, 255, 0.15)) 80%,
-    transparent
-  );
-}
-
-/* 表格 - GitHub 风格 + 现代感 */
-.text-block .markdown-table-wrapper {
-  margin: 1em 0;
-  overflow-x: auto;
-  border-radius: 8px;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  scrollbar-gutter: stable;
-}
-
-.text-block .markdown-table {
-  min-width: 100%;
-  width: max-content;
-  border-collapse: collapse;
-  font-size: 0.9em;
-}
-
-.text-block .markdown-table th {
-  background: var(--chat-table-header-bg, rgba(255, 255, 255, 0.06));
-  font-weight: 600;
-  text-align: left;
-  padding: 0.75em 1em;
-  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  color: var(--chat-text-strong, #fff);
-}
-
-.text-block .markdown-table td {
-  padding: 0.65em 1em;
-  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.06));
-}
-
-.text-block .markdown-table tr:last-child td {
-  border-bottom: none;
-}
-
-.text-block .markdown-table tbody tr:hover {
-  background: var(--chat-table-row-hover-bg, rgba(255, 255, 255, 0.05));
-}
-
-/* 图片 */
-.text-block img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 0.75em 0;
-}
-
-/* ============================================
-   代码块样式 - 简洁边框风格
-   ============================================ */
-
-.code-block-wrapper {
-  margin: 1em 0;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.15));
-  background: transparent;
-}
-
-.code-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
-}
-
-.code-language {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #8b949e);
-  text-transform: lowercase;
-  letter-spacing: 0.03em;
-}
-
-/* 按钮组容器 */
-.code-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* 统一的操作按钮样式 */
-.code-action-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #8b949e);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  line-height: 1;
-  transition: all 0.15s ease;
-}
-
-.code-action-btn:hover {
-  color: var(--chat-text, #e5e7eb);
-  background: var(--chat-hover-bg, rgba(255, 255, 255, 0.08));
-  border-color: var(--chat-border, rgba(255, 255, 255, 0.1));
-}
-
-.code-action-btn:active {
-  transform: scale(0.97);
-}
-
-.code-action-btn svg {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-}
-
-.code-block {
-  margin: 0;
-  padding: 14px 18px;
-  overflow-x: auto;
-  font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", "Consolas", monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--chat-code-text, #e6edf3);
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  -webkit-font-smoothing: antialiased;
-}
-
-.code-block code {
-  display: block;
-  white-space: pre;
-  tab-size: 2;
-}
-
-/* 代码块滚动条 */
-.code-block::-webkit-scrollbar {
-  height: 6px;
-}
-
-.code-block::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.code-block::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.code-block::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-/* ============================================
-   代码高亮主题 - 跟随主题变化
-   使用 CSS 变量，支持浅色/深色主题
-   ============================================ */
-
-/* 关键字: if, const, function, return, import, export 等 */
-.code-block .hljs-keyword,
-.code-block .hljs-selector-tag {
-  color: var(--chat-hljs-keyword, #ff7b72);
-}
-
-/* 内置: console, document, window, Array, Object 等 */
-.code-block .hljs-built_in {
-  color: var(--chat-hljs-built-in, #ffa657);
-}
-
-/* 类型: string, number, boolean, interface, type 等 */
-.code-block .hljs-type,
-.code-block .hljs-class {
-  color: var(--chat-hljs-type, #ffa657);
-}
-
-/* 函数名 */
-.code-block .hljs-title,
-.code-block .hljs-title.function_,
-.code-block .hljs-function {
-  color: var(--chat-hljs-function, #d2a8ff);
-}
-
-/* 字符串 */
-.code-block .hljs-string,
-.code-block .hljs-template-variable {
-  color: var(--chat-hljs-string, #a5d6ff);
-}
-
-/* 数字 */
-.code-block .hljs-number {
-  color: var(--chat-hljs-number, #79c0ff);
-}
-
-/* 布尔值、null、undefined */
-.code-block .hljs-literal,
-.code-block .hljs-null {
-  color: var(--chat-hljs-literal, #79c0ff);
-}
-
-/* 注释 */
-.code-block .hljs-comment,
-.code-block .hljs-quote {
-  color: var(--chat-hljs-comment, #8b949e);
-  font-style: italic;
-}
-
-/* 变量 */
-.code-block .hljs-variable,
-.code-block .hljs-template-tag {
-  color: var(--chat-hljs-variable, #ffa657);
-}
-
-/* 属性 */
-.code-block .hljs-attr,
-.code-block .hljs-attribute {
-  color: var(--chat-hljs-attr, #79c0ff);
-}
-
-/* 对象属性名 */
-.code-block .hljs-property {
-  color: var(--chat-hljs-property, #7ee787);
-}
-
-/* 操作符 */
-.code-block .hljs-operator {
-  color: var(--chat-hljs-operator, #ff7b72);
-}
-
-/* 标点符号 */
-.code-block .hljs-punctuation {
-  color: var(--chat-hljs-punctuation, #e6edf3);
-}
-
-/* 参数 */
-.code-block .hljs-params {
-  color: var(--chat-hljs-params, #e6edf3);
-}
-
-/* 正则表达式 */
-.code-block .hljs-regexp {
-  color: var(--chat-hljs-regexp, #7ee787);
-}
-
-/* 选择器 (CSS) */
-.code-block .hljs-selector-class,
-.code-block .hljs-selector-id {
-  color: var(--chat-hljs-selector, #7ee787);
-}
-
-/* 标签 (HTML/XML) */
-.code-block .hljs-tag {
-  color: var(--chat-hljs-tag, #7ee787);
-}
-
-.code-block .hljs-name {
-  color: var(--chat-hljs-name, #7ee787);
-}
-
-/* 删除 (diff) */
-.code-block .hljs-deletion {
-  color: var(--chat-hljs-deletion, #ffa198);
-  background: var(--chat-hljs-deletion-bg, rgba(248, 81, 73, 0.15));
-}
-
-/* 添加 (diff) */
-.code-block .hljs-addition {
-  color: var(--chat-hljs-addition, #7ee787);
-  background: var(--chat-hljs-addition-bg, rgba(46, 160, 67, 0.15));
-}
-
-/* meta 信息 */
-.code-block .hljs-meta {
-  color: var(--chat-hljs-meta, #8b949e);
-}
-
-/* 链接 */
-.code-block .hljs-link {
-  color: var(--chat-hljs-link, #a5d6ff);
-  text-decoration: underline;
-}
-
-/* 符号 */
-.code-block .hljs-symbol {
-  color: var(--chat-hljs-symbol, #79c0ff);
-}
-
-/* 子字符串 (模板字符串中的 ${}) */
-.code-block .hljs-subst {
-  color: var(--chat-hljs-subst, #e6edf3);
-}
-
-/* section (markdown 标题等) */
-.code-block .hljs-section {
-  color: var(--chat-hljs-section, #79c0ff);
-  font-weight: bold;
-}
-
-/* bullet (markdown 列表) */
-.code-block .hljs-bullet {
-  color: var(--chat-hljs-bullet, #ffa657);
-}
-
-/* emphasis */
-.code-block .hljs-emphasis {
-  font-style: italic;
-}
-
-/* strong */
-.code-block .hljs-strong {
-  font-weight: bold;
-}
-
-/* ============================================
-   LaTeX 数学公式样式
-   ============================================ */
-
-/* 块级公式 */
-.text-block .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));
-}
-
-.text-block .latex-block .katex-display {
-  margin: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-align: left;
-}
-
-.text-block .latex-block .katex {
-  text-align: left;
-}
-
-/* 行内公式 */
-.text-block .latex-inline {
-  display: inline;
-  padding: 0 0.15em;
-}
-
-/* 公式错误提示 */
-.text-block .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 样式覆盖 - 适配暗色主题 */
-.text-block .katex {
-  font-size: 1.1em;
-  color: var(--chat-text, #e5e7eb);
-}
-
-/* KaTeX 分数线颜色 */
-.text-block .katex .frac-line {
-  background: var(--chat-text, #e5e7eb);
-}
-
-/* KaTeX 根号 */
-.text-block .katex .sqrt > .sqrt-sign {
-  color: var(--chat-text, #e5e7eb);
-}
-
-/* 滚动条样式 */
-.text-block .latex-block::-webkit-scrollbar {
-  height: 6px;
-}
-
-.text-block .latex-block::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.text-block .latex-block::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.text-block .latex-block::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}