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

package/src/components/message/WelcomeMessage.css

@@ -1,221 +0,0 @@
-.welcome-message {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 28px;
-  padding: 40px 24px;
-  max-width: 640px;
-  margin: 0 auto;
-  min-height: 100%;
-}
-
-/* 标题区域 */
-.welcome-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 8px;
-}
-
-.welcome-title-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.welcome-icon {
-  color: var(--chat-text-muted, #888);
-}
-
-.welcome-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--chat-text, #fff);
-  margin: 0;
-}
-
-.welcome-subtitle {
-  font-size: 13px;
-  color: var(--chat-text-muted, #888);
-  margin: 0;
-}
-
-/* 区域标题 */
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 12px;
-  padding-left: 2px;
-}
-
-.section-icon {
-  color: var(--chat-text-muted, #666);
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #888);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* 能力标签 */
-.features-section {
-  width: 100%;
-}
-
-.features-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-}
-
-.feature-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: var(--chat-muted, #2a2a2a);
-  border: 1px solid var(--chat-border, #3a3a3a);
-  border-radius: 20px;
-  font-size: 12px;
-  color: var(--chat-text, #ccc);
-  transition: all 0.15s;
-}
-
-.feature-tag:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.15);
-}
-
-.feature-icon {
-  color: var(--chat-text-muted, #888);
-}
-
-/* 快捷操作 */
-.tasks-section {
-  width: 100%;
-}
-
-.tasks-grid {
-  display: grid;
-  gap: 10px;
-}
-
-/* 单个任务：居中显示 */
-.tasks-single {
-  grid-template-columns: minmax(200px, 320px);
-  justify-content: center;
-}
-
-/* 两个任务：两列 */
-.tasks-two {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-/* 三个任务：三列 */
-.tasks-three {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-/* 多个任务：两列自动换行 */
-.tasks-multi {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.task-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 14px;
-  background: var(--chat-muted, #2a2a2a);
-  border: 1px solid var(--chat-border, #3a3a3a);
-  border-radius: 10px;
-  color: var(--chat-text, #ccc);
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.task-card:hover {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(59, 130, 246, 0.5);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.task-icon {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(59, 130, 246, 0.15);
-  border-radius: 8px;
-  color: #60a5fa;
-}
-
-.task-card:hover .task-icon {
-  background: rgba(59, 130, 246, 0.25);
-}
-
-.task-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.task-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--chat-text, #fff);
-  margin-bottom: 2px;
-}
-
-.task-desc {
-  font-size: 11px;
-  color: var(--chat-text-muted, #888);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.task-arrow {
-  flex-shrink: 0;
-  color: var(--chat-text-muted, #666);
-  opacity: 0;
-  transform: translateX(-4px);
-  transition: all 0.2s;
-}
-
-.task-card:hover .task-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-/* 响应式 */
-@media (max-width: 540px) {
-  .welcome-message {
-    padding: 32px 16px;
-    gap: 24px;
-  }
-
-  .welcome-title {
-    font-size: 24px;
-  }
-
-  .tasks-two,
-  .tasks-three,
-  .tasks-multi {
-    grid-template-columns: 1fr;
-  }
-
-  .task-arrow {
-    display: none;
-  }
-}

package/src/components/message/WelcomeMessage.tsx

@@ -1,93 +0,0 @@
-/**
- * WelcomeMessage Component
- * 与 Vue 版本 WelcomeMessage.vue 保持一致
- */
-
-import { type FC, useMemo } from 'react'
-import './WelcomeMessage.css'
-import { Icon } from '@iconify/react'
-import { type WelcomeConfig, defaultWelcomeConfig } from './welcome-types'
-
-interface WelcomeMessageProps {
-  /** 欢迎页配置（可部分配置，未配置项使用默认值） */
-  config?: Partial<WelcomeConfig>
-  /** 快捷操作回调 */
-  onQuickAction: (text: string) => void
-}
-
-export const WelcomeMessage: FC<WelcomeMessageProps> = ({ config: propsConfig, onQuickAction }) => {
-  // 合并配置
-  const config = useMemo<WelcomeConfig>(() => ({
-    title: propsConfig?.title ?? defaultWelcomeConfig.title,
-    subtitle: propsConfig?.subtitle ?? defaultWelcomeConfig.subtitle,
-    icon: propsConfig?.icon ?? defaultWelcomeConfig.icon,
-    features: propsConfig?.features ?? defaultWelcomeConfig.features,
-    tasks: propsConfig?.tasks ?? defaultWelcomeConfig.tasks,
-  }), [propsConfig])
-
-  // 根据任务数量动态选择网格布局
-  const tasksGridClass = useMemo(() => {
-    const count = config.tasks.length
-    if (count === 1) return 'tasks-grid tasks-single'
-    if (count === 2) return 'tasks-grid tasks-two'
-    if (count === 3) return 'tasks-grid tasks-three'
-    return 'tasks-grid tasks-multi'
-  }, [config.tasks.length])
-
-  return (
-    <div className="welcome-message">
-      {/* 标题区域 */}
-      <div className="welcome-header">
-        <div className="welcome-title-row">
-          <Icon icon={config.icon} width={28} className="welcome-icon" />
-          <h2 className="welcome-title">{config.title}</h2>
-        </div>
-        <p className="welcome-subtitle">{config.subtitle}</p>
-      </div>
-
-      {/* 能力标签 */}
-      {config.features.length > 0 && (
-        <div className="features-section">
-          <div className="section-header">
-            <Icon icon="lucide:zap" width={14} className="section-icon" />
-            <span className="section-title">支持的能力</span>
-          </div>
-          <div className="features-list">
-            {config.features.map((feature) => (
-              <div key={feature.name} className="feature-tag">
-                <Icon icon={feature.icon} width={14} className="feature-icon" />
-                <span>{feature.name}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* 快捷操作 */}
-      {config.tasks.length > 0 && (
-        <div className="tasks-section">
-          <div className="section-header">
-            <Icon icon="lucide:rocket" width={14} className="section-icon" />
-            <span className="section-title">快捷操作</span>
-          </div>
-          <div className={tasksGridClass}>
-            {config.tasks.map((task) => (
-              <button
-                key={task.name}
-                className="task-card"
-                onClick={() => onQuickAction(task.prompt)}
-              >
-                <Icon icon={task.icon} width={18} className="task-icon" />
-                <div className="task-content">
-                  <div className="task-name">{task.name}</div>
-                  <div className="task-desc">{task.desc}</div>
-                </div>
-                <Icon icon="lucide:arrow-right" width={14} className="task-arrow" />
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,80 +0,0 @@
-.collapsible-card {
-  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;
-}
-
-.card-header-left.clickable {
-  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: 0 12px 12px;
-  min-width: 0;
-  overflow: hidden;
-}

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

@@ -1,80 +0,0 @@
-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 ${collapsible ? 'clickable' : ''}`} 
-          onClick={() => collapsible && 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

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

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

@@ -1,49 +0,0 @@
-.image-part {
-  position: relative;
-  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

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

@@ -1,44 +0,0 @@
-.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;
-}