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

package/src/components/message/ToolResultRenderer.tsx

@@ -1,21 +0,0 @@
-/**
- * 工具结果渲染器
- * 根据工具名称选择合适的渲染组件
- */
-
-import { FC, useContext, useMemo, type ComponentType } from 'react'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
-import { ToolRenderersContext } from '../../context/RenderersContext'
-import { DefaultToolResult } from './tool-results'
-
-export const ToolResultRenderer: FC<ToolRendererProps> = (props) => {
-  // 从上层获取自定义工具渲染器
-  const customRenderers = useContext(ToolRenderersContext)
-
-  // 解析使用哪个组件
-  const Component = useMemo<ComponentType<ToolRendererProps>>(() => {
-    return customRenderers[props.toolName] || DefaultToolResult
-  }, [customRenderers, props.toolName])
-
-  return <Component {...props} />
-}

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

@@ -1,60 +0,0 @@
-/**
- * 代码块组件
- */
-
-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

@@ -1,15 +0,0 @@
-/**
- * 文本块组件
- */
-
-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

@@ -1,141 +0,0 @@
-/**
- * 内容块共享样式
- */
-
-.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

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

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

@@ -1,96 +0,0 @@
-import { useState, useContext, useMemo, type FC, type ComponentType } from 'react'
-import { Icon } from '@iconify/react'
-import { ToolRenderersContext } from '../../../context/RenderersContext'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
-import type { StepsExpandedType } from '../../../types'
-import './ToolResultPart.css'
-
-interface ToolResultPartProps {
-  id: string
-  name: string
-  args?: Record<string, unknown>
-  result: unknown
-  status: 'done' | 'error' | 'cancelled' | 'skipped'
-  expandedType?: StepsExpandedType
-}
-
-export const ToolResultPart: FC<ToolResultPartProps> = ({ 
-  name, 
-  args, 
-  result, 
-  status,
-  expandedType = 'auto'
-}) => {
-  const toolRenderers = useContext(ToolRenderersContext)
-  
-  // 根据模式计算初始状态（工具结果完成后默认折叠，除非 mode 是 open）
-  const getInitialExpanded = () => {
-    if (expandedType === 'open') return true
-    return false // close 和 auto 模式下默认折叠
-  }
-  
-  const [expanded, setExpanded] = useState(getInitialExpanded)
-
-  // 获取自定义渲染器
-  const CustomRenderer = useMemo(() => {
-    return toolRenderers[name] as ComponentType<ToolRendererProps> | undefined
-  }, [toolRenderers, name])
-
-  // 格式化结果
-  const formattedResult = useMemo(() => {
-    if (typeof result === 'string') {
-      return result
-    }
-    return JSON.stringify(result, null, 2)
-  }, [result])
-
-  // 将 ToolResultPart 的 status 映射到 ToolRendererProps 的 status
-  const rendererStatus = useMemo((): 'running' | 'completed' | 'error' => {
-    if (status === 'error') return 'error'
-    if (status === 'cancelled') return 'error'
-    // 'done' 和 'skipped' 都映射为 'completed'
-    return 'completed'
-  }, [status])
-
-  // 如果有自定义渲染器，使用它
-  if (CustomRenderer) {
-    return (
-      <div className="tool-result-part">
-        <CustomRenderer 
-          toolName={name}
-          toolArgs={args || {}}
-          toolResult={result}
-          status={rendererStatus}
-        />
-      </div>
-    )
-  }
-
-  // 默认渲染：可折叠的 JSON
-  return (
-    <div className="tool-result-part">
-      <div className={`default-result ${expanded ? 'expanded' : ''}`}>
-        <div className="result-header" onClick={() => setExpanded(!expanded)}>
-          <div className="result-icon">
-            {status === 'error' ? (
-              <Icon icon="lucide:x-circle" width={14} className="error" />
-            ) : (
-              <Icon icon="lucide:check-circle" width={14} className="success" />
-            )}
-          </div>
-          <span className="result-name">{name}</span>
-          <Icon 
-            icon={expanded ? 'lucide:chevron-up' : 'lucide:chevron-down'} 
-            width={14} 
-            className="result-chevron"
-          />
-        </div>
-        {expanded && (
-          <div className="result-content">
-            <pre>{formattedResult}</pre>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/message/tool-results/DefaultToolResult.tsx

@@ -1,26 +0,0 @@
-/**
- * 默认工具结果渲染器
- */
-
-import { FC, useMemo } from 'react'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
-import './tool-results.css'
-
-export const DefaultToolResult: FC<ToolRendererProps> = ({ toolResult }) => {
-  const formattedResult = useMemo(() => {
-    if (typeof toolResult === 'string') {
-      return toolResult
-    }
-    try {
-      return JSON.stringify(toolResult, null, 2)
-    } catch {
-      return String(toolResult)
-    }
-  }, [toolResult])
-
-  return (
-    <div className="default-tool-result">
-      <pre className="result-content">{formattedResult}</pre>
-    </div>
-  )
-}

package/src/components/message/tool-results/SearchResults.tsx

@@ -1,69 +0,0 @@
-/**
- * 搜索结果渲染器
- */
-
-import { FC, useMemo, useCallback } from 'react'
-import { Icon } from '@iconify/react'
-import type { ToolRendererProps, SearchResultItem } from '@huyooo/ai-chat-shared'
-import './tool-results.css'
-
-export const SearchResults: FC<ToolRendererProps> = ({ toolResult }) => {
-  const results = useMemo<SearchResultItem[]>(() => {
-    if (Array.isArray(toolResult)) {
-      return toolResult as SearchResultItem[]
-    }
-    if (typeof toolResult === 'object' && toolResult !== null && 'results' in toolResult) {
-      return (toolResult as { results: SearchResultItem[] }).results
-    }
-    return []
-  }, [toolResult])
-
-  /** 获取域名 */
-  const getDomain = useCallback((url: string): string => {
-    try {
-      return new URL(url).hostname
-    } catch {
-      return url
-    }
-  }, [])
-
-  /** 打开外部链接 */
-  const openExternal = useCallback((url: string) => {
-    const bridge = (window as { aiChatBridge?: { openExternal: (url: string) => Promise<void> } })
-      .aiChatBridge
-    if (bridge?.openExternal) {
-      bridge.openExternal(url)
-    } else {
-      window.open(url, '_blank')
-    }
-  }, [])
-
-  return (
-    <div className="search-results-card">
-      <div className="search-header">
-        <Icon icon="lucide:search" width={16} />
-        <span>搜索结果</span>
-        <span className="search-count">{results.length} 条</span>
-      </div>
-      <div className="search-list">
-        {results.map((item, index) => (
-          <a
-            key={index}
-            href={item.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="search-item"
-            onClick={(e) => {
-              e.preventDefault()
-              openExternal(item.url)
-            }}
-          >
-            <div className="item-title">{item.title}</div>
-            {item.snippet && <div className="item-snippet">{item.snippet}</div>}
-            <div className="item-url">{getDomain(item.url)}</div>
-          </a>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/components/message/tool-results/WeatherCard.tsx

@@ -1,63 +0,0 @@
-/**
- * 天气卡片渲染器
- */
-
-import { FC, useMemo } from 'react'
-import { Icon } from '@iconify/react'
-import type { ToolRendererProps, WeatherData } from '@huyooo/ai-chat-shared'
-import './tool-results.css'
-
-export const WeatherCard: FC<ToolRendererProps> = ({ toolResult }) => {
-  const weather = useMemo<WeatherData>(() => {
-    if (typeof toolResult === 'object' && toolResult !== null) {
-      return toolResult as WeatherData
-    }
-    return {
-      city: '未知',
-      temperature: 0,
-      condition: '未知',
-    }
-  }, [toolResult])
-
-  return (
-    <div className="weather-card">
-      <div className="weather-header">
-        <Icon icon="lucide:cloud-sun" width={24} className="weather-icon" />
-        <div className="weather-location">{weather.city}</div>
-      </div>
-      <div className="weather-main">
-        <div className="weather-temp">{weather.temperature}°</div>
-        <div className="weather-condition">{weather.condition}</div>
-      </div>
-      {(weather.humidity || weather.wind) && (
-        <div className="weather-details">
-          {weather.humidity && (
-            <div className="weather-detail">
-              <Icon icon="lucide:droplets" width={14} />
-              <span>{weather.humidity}%</span>
-            </div>
-          )}
-          {weather.wind && (
-            <div className="weather-detail">
-              <Icon icon="lucide:wind" width={14} />
-              <span>{weather.wind}</span>
-            </div>
-          )}
-        </div>
-      )}
-      {weather.forecast?.length ? (
-        <div className="weather-forecast">
-          {weather.forecast.map((item) => (
-            <div key={item.date} className="forecast-item">
-              <div className="forecast-date">{item.date}</div>
-              <div className="forecast-temp">
-                {item.low}° / {item.high}°
-              </div>
-              <div className="forecast-condition">{item.condition}</div>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  )
-}

package/src/components/message/tool-results/index.ts

@@ -1,7 +0,0 @@
-/**
- * 工具结果渲染组件导出
- */
-
-export { DefaultToolResult } from './DefaultToolResult'
-export { WeatherCard } from './WeatherCard'
-export { SearchResults } from './SearchResults'

package/src/components/message/tool-results/tool-results.css

@@ -1,181 +0,0 @@
-/**
- * 工具结果渲染器共享样式
- */
-
-/* 默认工具结果 */
-.default-tool-result {
-  background: var(--chat-bg, #1e1e1e);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.result-content {
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--chat-code-text, var(--chat-text, #999));
-  font-family: "SF Mono", Monaco, monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-  background: var(--chat-code-bg);
-  border-top: 1px solid var(--chat-border);
-}
-
-/* 天气卡片 */
-.weather-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px;
-  padding: 16px;
-  color: #fff;
-  min-width: 200px;
-}
-
-.weather-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.weather-icon {
-  opacity: 0.9;
-}
-
-.weather-location {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.weather-main {
-  margin-bottom: 12px;
-}
-
-.weather-temp {
-  font-size: 48px;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.weather-condition {
-  font-size: 14px;
-  opacity: 0.9;
-  margin-top: 4px;
-}
-
-.weather-details {
-  display: flex;
-  gap: 16px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.weather-detail {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  opacity: 0.9;
-}
-
-.weather-forecast {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-}
-
-.forecast-item {
-  text-align: center;
-  min-width: 60px;
-}
-
-.forecast-date {
-  font-size: 12px;
-  opacity: 0.8;
-  margin-bottom: 4px;
-}
-
-.forecast-temp {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.forecast-condition {
-  font-size: 11px;
-  opacity: 0.8;
-  margin-top: 2px;
-}
-
-/* 搜索结果卡片 */
-.search-results-card {
-  background: var(--chat-muted, #2d2d2d);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--chat-text-muted, #888);
-  font-size: 13px;
-}
-
-.search-count {
-  margin-left: auto;
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-.search-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.search-item {
-  display: block;
-  padding: 10px 12px;
-  text-decoration: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  transition: background 0.15s;
-}
-
-.search-item:last-child {
-  border-bottom: none;
-}
-
-.search-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.item-title {
-  font-size: 14px;
-  color: var(--chat-text, #ccc);
-  font-weight: 500;
-  margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.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;
-}
-
-.item-url {
-  font-size: 11px;
-  color: var(--chat-text-muted, #666);
-}