@huyooo/ai-chat-frontend-react 0.1.6 → 0.2.0

package/src/components/message/blocks/CodeBlock.tsx

@@ -0,0 +1,60 @@
+/**
+ * 代码块组件
+ */
+
+import { FC, useState, useCallback, useMemo } from 'react'
+import { Icon } from '@iconify/react'
+import { highlightCode, getLanguageDisplayName } from '@huyooo/ai-chat-shared'
+import type { CodeBlock as CodeBlockType } from '@huyooo/ai-chat-shared'
+import './blocks.css'
+
+interface CodeBlockProps {
+  block: CodeBlockType
+  onCopy?: (code: string) => void
+}
+
+export const CodeBlock: FC<CodeBlockProps> = ({ block, onCopy }) => {
+  const [copied, setCopied] = useState(false)
+
+  // 语言显示名称
+  const languageDisplay = useMemo(
+    () => getLanguageDisplayName(block.language),
+    [block.language]
+  )
+
+  // 高亮后的代码
+  const highlightedCode = useMemo(
+    () => highlightCode(block.content, block.language),
+    [block.content, block.language]
+  )
+
+  /** 复制代码 */
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(block.content)
+      setCopied(true)
+      onCopy?.(block.content)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('复制失败:', err)
+    }
+  }, [block.content, onCopy])
+
+  return (
+    <div className="code-block">
+      {/* 头部：语言 + 操作按钮 */}
+      <div className="code-header">
+        <span className="code-language">{languageDisplay}</span>
+        <div className="code-actions">
+          <button className="code-action-btn" title="复制代码" onClick={handleCopy}>
+            <Icon icon={copied ? 'lucide:check' : 'lucide:copy'} width={14} />
+          </button>
+        </div>
+      </div>
+      {/* 代码内容 */}
+      <pre className="code-content">
+        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      </pre>
+    </div>
+  )
+}

package/src/components/message/blocks/TextBlock.tsx

@@ -0,0 +1,15 @@
+/**
+ * 文本块组件
+ */
+
+import { FC } from 'react'
+import type { TextBlock as TextBlockType } from '@huyooo/ai-chat-shared'
+import './blocks.css'
+
+interface TextBlockProps {
+  block: TextBlockType
+}
+
+export const TextBlock: FC<TextBlockProps> = ({ block }) => {
+  return <div className="text-block">{block.content}</div>
+}

package/src/components/message/blocks/blocks.css

@@ -0,0 +1,141 @@
+/**
+ * 内容块共享样式
+ */
+
+.text-block {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--chat-text, #ccc);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.code-block {
+  background: var(--chat-code-bg, #1f2937);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.code-language {
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  font-family: "SF Mono", Monaco, monospace;
+}
+
+.code-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.code-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.code-action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #ccc);
+}
+
+.code-content {
+  margin: 0;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: "SF Mono", Monaco, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-code-text, #e5e7eb);
+}
+
+/* 统一滚动条样式 */
+.code-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.code-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-content::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.code-content::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+
+.code-content code {
+  font-family: inherit;
+}
+
+/* highlight.js 主题 */
+.code-content .hljs-keyword {
+  color: #c678dd;
+}
+.code-content .hljs-string {
+  color: #98c379;
+}
+.code-content .hljs-number {
+  color: #d19a66;
+}
+.code-content .hljs-comment {
+  color: #5c6370;
+  font-style: italic;
+}
+.code-content .hljs-function {
+  color: #61afef;
+}
+.code-content .hljs-class {
+  color: #e5c07b;
+}
+.code-content .hljs-variable {
+  color: #e06c75;
+}
+.code-content .hljs-operator {
+  color: #56b6c2;
+}
+.code-content .hljs-punctuation {
+  color: #abb2bf;
+}
+.code-content .hljs-property {
+  color: #e06c75;
+}
+.code-content .hljs-attr {
+  color: #d19a66;
+}
+.code-content .hljs-built_in {
+  color: #e5c07b;
+}
+.code-content .hljs-title {
+  color: #61afef;
+}
+.code-content .hljs-params {
+  color: #abb2bf;
+}
+.code-content .hljs-literal {
+  color: #56b6c2;
+}
+.code-content .hljs-type {
+  color: #e5c07b;
+}

package/src/components/message/blocks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 内容块组件导出
+ */
+
+export { TextBlock } from './TextBlock'
+export { CodeBlock } from './CodeBlock'

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

@@ -0,0 +1,78 @@
+.collapsible-card {
+  margin: 8px 0;
+  border-radius: 8px;
+  background: var(--chat-muted, #2a2a2a);
+  border: 1px solid var(--chat-border, #333);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  user-select: none;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  cursor: pointer;
+}
+
+.card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.card-title {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+}
+
+.card-subtitle {
+  font-size: 12px;
+  color: var(--chat-text-muted, #666);
+}
+
+.card-chevron {
+  color: var(--chat-text-muted, #666);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.collapsible-card.expanded .card-chevron {
+  transform: rotate(180deg);
+}
+
+.card-content {
+  padding: 12px;
+  min-width: 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,77 @@
+import type { FC, ReactNode } from 'react'
+import { Icon } from '@iconify/react'
+import './CollapsibleCard.css'
+
+interface CollapsibleCardProps {
+  /** 图标名称 */
+  icon: string
+  /** 图标颜色 */
+  iconColor?: string
+  /** 标题 */
+  title: string
+  /** 标题颜色 */
+  titleColor?: string
+  /** 副标题 */
+  subtitle?: string
+  /** 是否展开 */
+  expanded: boolean
+  /** 展开状态变化回调 */
+  onExpandedChange: (expanded: boolean) => void
+  /** 图标是否旋转（加载状态） */
+  spinning?: boolean
+  /** 是否可折叠（显示 chevron） */
+  collapsible?: boolean
+  /** 子内容 */
+  children?: ReactNode
+  /** Header 操作按钮 */
+  headerActions?: ReactNode
+}
+
+export const CollapsibleCard: FC<CollapsibleCardProps> = ({
+  icon,
+  iconColor = 'var(--chat-accent, #3b82f6)',
+  title,
+  titleColor,
+  subtitle,
+  expanded,
+  onExpandedChange,
+  spinning = false,
+  collapsible = true,
+  children,
+  headerActions,
+}) => {
+  return (
+    <div className={`collapsible-card ${expanded ? 'expanded' : ''}`}>
+      <div className="card-header">
+        <div className="card-header-left" onClick={() => onExpandedChange(!expanded)}>
+          <div className="card-icon" style={{ color: iconColor }}>
+            {spinning ? (
+              <Icon icon="lucide:loader-2" width={14} className="spinning" />
+            ) : (
+              <Icon icon={icon} width={14} />
+            )}
+          </div>
+          <span className="card-title" style={titleColor ? { color: titleColor } : undefined}>
+            {title}
+          </span>
+          {subtitle && <span className="card-subtitle">{subtitle}</span>}
+        </div>
+        <div className="card-header-right">
+          {headerActions}
+          {collapsible && (
+            <Icon
+              icon={expanded ? 'lucide:chevron-up' : 'lucide:chevron-down'}
+              width={14}
+              className="card-chevron"
+              onClick={(e) => {
+                e.stopPropagation()
+                onExpandedChange(!expanded)
+              }}
+            />
+          )}
+        </div>
+      </div>
+      {expanded && <div className="card-content">{children}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+.error-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  margin: 0;
+}

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

@@ -0,0 +1,40 @@
+import { useState, type FC } from 'react'
+import { CollapsibleCard } from './CollapsibleCard'
+import './ErrorPart.css'
+
+interface ErrorPartProps {
+  message: string
+  category?: string
+  retryable?: boolean
+}
+
+/** 分类标签映射 */
+const categoryLabels: Record<string, string> = {
+  api: 'API 错误',
+  network: '网络错误',
+  timeout: '请求超时',
+  auth: '认证失败',
+  rate_limit: '请求限流',
+  server: '服务器错误',
+  unknown: '未知错误',
+}
+
+export const ErrorPart: FC<ErrorPartProps> = ({ message, category }) => {
+  // 默认展开显示错误信息
+  const [expanded, setExpanded] = useState(true)
+  
+  const categoryLabel = categoryLabels[category || 'unknown'] || category || '请求失败'
+
+  return (
+    <CollapsibleCard
+      icon="lucide:alert-circle"
+      iconColor="var(--chat-error, #ef4444)"
+      title={categoryLabel}
+      titleColor="var(--chat-error, #ef4444)"
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+    >
+      <div className="error-content">{message}</div>
+    </CollapsibleCard>
+  )
+}

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

@@ -0,0 +1,50 @@
+.image-part {
+  position: relative;
+  margin: 8px 0;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.image-content {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.image-content:hover {
+  opacity: 0.9;
+}
+
+.image-loading,
+.image-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 8px;
+  color: var(--chat-text-muted, #888);
+  min-width: 200px;
+  min-height: 150px;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.image-error span {
+  font-size: 13px;
+}

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

@@ -0,0 +1,54 @@
+import { useState, type FC } from 'react'
+import { Icon } from '@iconify/react'
+import './ImagePart.css'
+
+interface ImagePartProps {
+  url: string
+  alt?: string
+}
+
+export const ImagePart: FC<ImagePartProps> = ({ url, alt }) => {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  const handleLoad = () => {
+    setLoading(false)
+    setError(false)
+  }
+
+  const handleError = () => {
+    setLoading(false)
+    setError(true)
+  }
+
+  const openPreview = () => {
+    window.open(url, '_blank')
+  }
+
+  return (
+    <div className="image-part">
+      {!error && (
+        <img 
+          src={url} 
+          alt={alt || '图片'}
+          className="image-content"
+          onClick={openPreview}
+          onLoad={handleLoad}
+          onError={handleError}
+          style={{ display: loading ? 'none' : 'block' }}
+        />
+      )}
+      {loading && !error && (
+        <div className="image-loading">
+          <Icon icon="lucide:loader-2" width={24} className="spinning" />
+        </div>
+      )}
+      {error && (
+        <div className="image-error">
+          <Icon icon="lucide:image-off" width={24} />
+          <span>图片加载失败</span>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,44 @@
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.search-item {
+  display: block;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--chat-bg, #1e1e1e);
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.search-item:hover {
+  background: var(--chat-hover, #333);
+}
+
+.search-item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-accent, #3b82f6);
+  margin-bottom: 4px;
+}
+
+.search-item-snippet {
+  font-size: 12px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.4;
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.search-item-url {
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,10 @@
+/* 导入 Markdown 渲染样式 */
+@import '@huyooo/ai-chat-shared/styles';
+
+.text-part {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--chat-text, #ccc);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,20 @@
+import type { FC } from 'react'
+import { renderMarkdown } from '@huyooo/ai-chat-shared'
+import './TextPart.css'
+
+interface TextPartProps {
+  text: string
+}
+
+export const TextPart: FC<TextPartProps> = ({ text }) => {
+  if (!text) return null
+  
+  const html = renderMarkdown(text)
+  
+  return (
+    <div 
+      className="text-part markdown-content" 
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

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

@@ -0,0 +1,9 @@
+.thinking-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  margin: 0;
+}