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

package/src/components/input/ImagePreviewModal.tsx

@@ -1,118 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { Icon } from '@iconify/react'
-import './ImagePreviewModal.css'
-
-interface ImagePreviewModalProps {
-  visible: boolean
-  images: string[]
-  initialIndex?: number
-  onClose: () => void
-  onIndexChange?: (index: number) => void
-}
-
-export function ImagePreviewModal({
-  visible,
-  images,
-  initialIndex = 0,
-  onClose,
-  onIndexChange,
-}: ImagePreviewModalProps) {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex)
-
-  // 重置索引
-  useEffect(() => {
-    if (visible) {
-      setCurrentIndex(initialIndex)
-    }
-  }, [visible, initialIndex])
-
-  // 通知父组件索引变化
-  useEffect(() => {
-    onIndexChange?.(currentIndex)
-  }, [currentIndex, onIndexChange])
-
-  // 上一张
-  const prev = useCallback(() => {
-    if (currentIndex > 0) {
-      setCurrentIndex(currentIndex - 1)
-    }
-  }, [currentIndex])
-
-  // 下一张
-  const next = useCallback(() => {
-    if (currentIndex < images.length - 1) {
-      setCurrentIndex(currentIndex + 1)
-    }
-  }, [currentIndex, images.length])
-
-  // 键盘导航
-  useEffect(() => {
-    if (!visible) return
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      } else if (e.key === 'ArrowLeft') {
-        prev()
-      } else if (e.key === 'ArrowRight') {
-        next()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [visible, onClose, prev, next])
-
-  if (!visible) return null
-
-  const currentSrc = images[currentIndex] || ''
-
-  return createPortal(
-    <div className="image-preview-modal" onClick={onClose}>
-      {/* 顶部栏 */}
-      <div className="preview-header" onClick={(e) => e.stopPropagation()}>
-        {images.length > 1 && (
-          <div className="preview-counter">
-            {currentIndex + 1} / {images.length}
-          </div>
-        )}
-        <button className="preview-close-btn" title="关闭 (Esc)" onClick={onClose}>
-          <Icon icon="lucide:x" width={18} />
-        </button>
-      </div>
-
-      {/* 左导航 */}
-      {images.length > 1 && (
-        <button
-          className={`preview-nav-btn preview-nav-prev${currentIndex <= 0 ? ' disabled' : ''}`}
-          disabled={currentIndex <= 0}
-          onClick={(e) => {
-            e.stopPropagation()
-            prev()
-          }}
-        >
-          <Icon icon="lucide:chevron-left" width={20} />
-        </button>
-      )}
-
-      {/* 主图片区域 */}
-      <div className="preview-main" onClick={(e) => e.stopPropagation()}>
-        <img src={currentSrc} alt="预览" className="preview-image" />
-      </div>
-
-      {/* 右导航 */}
-      {images.length > 1 && (
-        <button
-          className={`preview-nav-btn preview-nav-next${currentIndex >= images.length - 1 ? ' disabled' : ''}`}
-          disabled={currentIndex >= images.length - 1}
-          onClick={(e) => {
-            e.stopPropagation()
-            next()
-          }}
-        >
-          <Icon icon="lucide:chevron-right" width={20} />
-        </button>
-      )}
-    </div>,
-    document.body
-  )
-}

package/src/components/input/at-views/AtBranchView.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useImperativeHandle } from 'react'
-import { Icon } from '@iconify/react'
-import './AtViewStyles.css'
-
-export interface AtPlaceholderViewProps {
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtPlaceholderViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtBranchView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => null,
-    confirmActive: () => {},
-  }), [])
-
-  return (
-    <div className="at-placeholder-view">
-      <Icon icon="lucide:git-branch" width={32} className="at-placeholder-icon" />
-      <div className="at-placeholder-title">分支差异</div>
-      <div className="at-placeholder-desc">功能待实现</div>
-      <div className="at-placeholder-hint">将支持引用当前分支与主分支的差异</div>
-    </div>
-  )
-})
-
-AtBranchView.displayName = 'AtBranchView'

package/src/components/input/at-views/AtBrowserView.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useImperativeHandle } from 'react'
-import { Icon } from '@iconify/react'
-import './AtViewStyles.css'
-
-export interface AtPlaceholderViewProps {
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtPlaceholderViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtBrowserView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => null,
-    confirmActive: () => {},
-  }), [])
-
-  return (
-    <div className="at-placeholder-view">
-      <Icon icon="lucide:globe" width={32} className="at-placeholder-icon" />
-      <div className="at-placeholder-title">网页</div>
-      <div className="at-placeholder-desc">功能待实现</div>
-      <div className="at-placeholder-hint">将支持引用网页内容、URL 等</div>
-    </div>
-  )
-})
-
-AtBrowserView.displayName = 'AtBrowserView'

package/src/components/input/at-views/AtChatsView.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useImperativeHandle } from 'react'
-import { Icon } from '@iconify/react'
-import './AtViewStyles.css'
-
-export interface AtPlaceholderViewProps {
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtPlaceholderViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtChatsView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => null,
-    confirmActive: () => {},
-  }), [])
-
-  return (
-    <div className="at-placeholder-view">
-      <Icon icon="lucide:message-square" width={32} className="at-placeholder-icon" />
-      <div className="at-placeholder-title">历史对话</div>
-      <div className="at-placeholder-desc">功能待实现</div>
-      <div className="at-placeholder-hint">将支持引用之前的对话记录</div>
-    </div>
-  )
-})
-
-AtChatsView.displayName = 'AtChatsView'

package/src/components/input/at-views/AtDocsView.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useImperativeHandle } from 'react'
-import { Icon } from '@iconify/react'
-import './AtViewStyles.css'
-
-export interface AtPlaceholderViewProps {
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtPlaceholderViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtDocsView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => null,
-    confirmActive: () => {},
-  }), [])
-
-  return (
-    <div className="at-placeholder-view">
-      <Icon icon="lucide:book-open" width={32} className="at-placeholder-icon" />
-      <div className="at-placeholder-title">文档</div>
-      <div className="at-placeholder-desc">功能待实现</div>
-      <div className="at-placeholder-hint">将支持引用项目文档、API 文档等</div>
-    </div>
-  )
-})
-
-AtDocsView.displayName = 'AtDocsView'

package/src/components/input/at-views/AtFilesView.tsx

@@ -1,168 +0,0 @@
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from 'react'
-import { Icon } from '@iconify/react'
-import type { ChatAdapter } from '../../../adapter'
-
-interface FileInfo {
-  name: string
-  path: string
-  isDirectory: boolean
-}
-import { getFileIcon } from '../../../utils/fileIcon'
-import './AtViewStyles.css'
-
-export interface AtFilesViewProps {
-  adapter: ChatAdapter
-  initialDir?: string
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtFilesViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtFilesView = forwardRef<AtFilesViewHandle, AtFilesViewProps>(({
-  adapter,
-  initialDir,
-  query,
-  activeIndex,
-  onSelect,
-  onSetActive,
-  onUpdateCount,
-}, ref) => {
-  const [loading, setLoading] = useState(false)
-  const [currentPath, setCurrentPath] = useState('')
-  const [entries, setEntries] = useState<FileInfo[]>([])
-  const initializedRef = useRef(false)
-
-  // 过滤后的文件列表
-  const filteredEntries = useMemo(() => {
-    const q = query.trim().toLowerCase()
-    if (!q) return entries
-    return entries.filter((f) => f.name.toLowerCase().includes(q))
-  }, [entries, query])
-
-  // 通知父组件条目数量变化
-  useEffect(() => {
-    onUpdateCount(filteredEntries.length)
-  }, [filteredEntries.length, onUpdateCount])
-
-  // 加载目录
-  const loadDir = useCallback(async (dir: string) => {
-    if (!adapter.listDir) return
-    setLoading(true)
-    try {
-      const resolved = (await adapter.resolvePath?.(dir)) || dir
-      const list = await adapter.listDir(resolved)
-      const sorted = [...list].sort((a, b) => {
-        if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1
-        return a.name.localeCompare(b.name)
-      })
-      setEntries(sorted)
-      setCurrentPath(resolved)
-      onSetActive(-1)
-    } finally {
-      setLoading(false)
-    }
-  }, [adapter, onSetActive])
-
-  // 返回上级目录
-  const goUp = useCallback(async () => {
-    if (!adapter.parentDir) return
-    const parent = await adapter.parentDir(currentPath)
-    if (parent && parent !== currentPath) {
-      await loadDir(parent)
-    }
-  }, [adapter, currentPath, loadDir])
-
-  // 返回主目录
-  const goHome = useCallback(async () => {
-    if (!adapter.homeDir) return
-    const home = await adapter.homeDir()
-    await loadDir(home)
-  }, [adapter, loadDir])
-
-  // 点击条目
-  const handleEntryClick = useCallback((f: FileInfo) => {
-    if (f.isDirectory) {
-      loadDir(f.path)
-      return
-    }
-    onSelect(f.path)
-  }, [loadDir, onSelect])
-
-  // 暴露给父组件的方法
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => {
-      if (activeIndex < 0) return null
-      return filteredEntries[activeIndex]?.path || null
-    },
-    confirmActive: () => {
-      const entry = filteredEntries[activeIndex]
-      if (entry) {
-        handleEntryClick(entry)
-      }
-    },
-  }), [activeIndex, filteredEntries, handleEntryClick])
-
-  // 初始加载
-  useEffect(() => {
-    if (initializedRef.current) return
-    initializedRef.current = true
-    
-    const init = async () => {
-      const dir = initialDir || (adapter.homeDir ? await adapter.homeDir() : '')
-      if (dir) await loadDir(dir)
-    }
-    init()
-  }, [adapter, initialDir, loadDir])
-
-  return (
-    <div className="at-files-view">
-      <div className="at-view-section-title">文件和文件夹</div>
-
-      {/* 路径栏 */}
-      <div className="at-view-pathbar">
-        <button className="at-view-pathbtn" title="返回上级" onClick={goUp}>
-          <Icon icon="lucide:arrow-up" width={12} />
-        </button>
-        <button className="at-view-pathbtn" title="主目录" onClick={goHome}>
-          <Icon icon="lucide:home" width={12} />
-        </button>
-        <div className="at-view-pathtext" title={currentPath || ''}>
-          {currentPath || '-'}
-        </div>
-      </div>
-
-      {/* 文件列表 */}
-      <div className="at-view-list">
-        {loading ? (
-          <div className="at-view-empty">加载中...</div>
-        ) : filteredEntries.length === 0 ? (
-          <div className="at-view-empty">
-            {query.trim() ? '没有找到匹配项' : '目录为空'}
-          </div>
-        ) : (
-          filteredEntries.map((f, i) => (
-            <button
-              key={f.path}
-              className={`at-view-item${activeIndex === i ? ' active' : ''}`}
-              onMouseEnter={() => onSetActive(i)}
-              onClick={() => handleEntryClick(f)}
-            >
-              <Icon icon={f.isDirectory ? 'lucide:folder' : getFileIcon(f.name)} width={14} className="at-view-item-icon" />
-              <span className="at-view-item-name">{f.name}</span>
-              <span className="at-view-item-path">{f.path}</span>
-            </button>
-          ))
-        )}
-      </div>
-    </div>
-  )
-})
-
-AtFilesView.displayName = 'AtFilesView'

package/src/components/input/at-views/AtTerminalsView.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useImperativeHandle } from 'react'
-import { Icon } from '@iconify/react'
-import './AtViewStyles.css'
-
-export interface AtPlaceholderViewProps {
-  query: string
-  activeIndex: number
-  onSelect: (path: string) => void
-  onSetActive: (index: number) => void
-  onUpdateCount: (count: number) => void
-}
-
-export interface AtPlaceholderViewHandle {
-  getActivePath: () => string | null
-  confirmActive: () => void
-}
-
-export const AtTerminalsView = forwardRef<AtPlaceholderViewHandle, AtPlaceholderViewProps>((_, ref) => {
-  useImperativeHandle(ref, () => ({
-    getActivePath: () => null,
-    confirmActive: () => {},
-  }), [])
-
-  return (
-    <div className="at-placeholder-view">
-      <Icon icon="lucide:terminal" width={32} className="at-placeholder-icon" />
-      <div className="at-placeholder-title">终端</div>
-      <div className="at-placeholder-desc">功能待实现</div>
-      <div className="at-placeholder-hint">将支持引用终端输出、命令历史等</div>
-    </div>
-  )
-})
-
-AtTerminalsView.displayName = 'AtTerminalsView'

package/src/components/input/at-views/AtViewStyles.css

@@ -1,143 +0,0 @@
-/* 子视图共享样式 */
-
-.at-files-view {
-  display: flex;
-  flex-direction: column;
-}
-
-.at-view-section-title {
-  font-size: 11px;
-  color: var(--chat-text-muted, #888);
-  padding: 6px 8px 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.at-view-pathbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px 8px;
-}
-
-.at-view-pathbtn {
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  background: transparent;
-  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
-  color: var(--chat-text-muted, #999);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.at-view-pathbtn:hover {
-  background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
-  color: var(--chat-text, #ccc);
-}
-
-.at-view-pathtext {
-  flex: 1;
-  min-width: 0;
-  font-size: 11px;
-  color: var(--chat-text-muted, #777);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.at-view-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.at-view-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  text-align: left;
-  padding: 7px 10px;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  background: transparent;
-  cursor: pointer;
-  color: var(--chat-text, #ccc);
-  width: 100%;
-}
-
-.at-view-item:hover {
-  background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
-}
-
-.at-view-item.active {
-  background: rgba(59, 130, 246, 0.15);
-  border-color: rgba(59, 130, 246, 0.3);
-}
-
-.at-view-item-icon {
-  color: var(--chat-text-muted, #999);
-  flex-shrink: 0;
-}
-
-.at-view-item-name {
-  font-size: 13px;
-  color: var(--chat-text, #ddd);
-  flex-shrink: 0;
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.at-view-item-path {
-  font-size: 11px;
-  color: var(--chat-text-muted, #555);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.at-view-empty {
-  padding: 12px 10px;
-  color: var(--chat-text-muted, #666);
-  font-size: 12px;
-  text-align: center;
-}
-
-/* 占位视图样式 */
-.at-placeholder-view {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  text-align: center;
-}
-
-.at-placeholder-icon {
-  color: var(--chat-text-muted, #555);
-  margin-bottom: 12px;
-}
-
-.at-placeholder-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #888);
-  margin-bottom: 8px;
-}
-
-.at-placeholder-desc {
-  font-size: 13px;
-  color: var(--chat-text-muted, #666);
-  margin-bottom: 4px;
-}
-
-.at-placeholder-hint {
-  font-size: 11px;
-  color: var(--chat-text-muted, #555);
-}

package/src/components/input/at-views/index.ts

@@ -1,9 +0,0 @@
-export { AtFilesView } from './AtFilesView'
-export type { AtFilesViewProps, AtFilesViewHandle } from './AtFilesView'
-
-export { AtDocsView } from './AtDocsView'
-export { AtTerminalsView } from './AtTerminalsView'
-export { AtChatsView } from './AtChatsView'
-export { AtBranchView } from './AtBranchView'
-export { AtBrowserView } from './AtBrowserView'
-export type { AtPlaceholderViewProps, AtPlaceholderViewHandle } from './AtDocsView'

package/src/components/message/ContentRenderer.css

@@ -1,9 +0,0 @@
-/**
- * ContentRenderer 样式
- */
-
-.content-renderer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}