@huyooo/ai-chat-frontend-react 0.1.4 → 0.1.8

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

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

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

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

@@ -0,0 +1,143 @@
+/* 子视图共享样式 */
+
+.at-files-view {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-view-section-title {
+  font-size: 11px;
+  color: #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 rgba(255, 255, 255, 0.1);
+  color: #999;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.at-view-pathbtn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #ccc;
+}
+
+.at-view-pathtext {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  color: #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: #ccc;
+  width: 100%;
+}
+
+.at-view-item:hover {
+  background: 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: #999;
+  flex-shrink: 0;
+}
+
+.at-view-item-name {
+  font-size: 13px;
+  color: #ddd;
+  flex-shrink: 0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.at-view-item-path {
+  font-size: 11px;
+  color: #555;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.at-view-empty {
+  padding: 12px 10px;
+  color: #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: #555;
+  margin-bottom: 12px;
+}
+
+.at-placeholder-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.at-placeholder-desc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.at-placeholder-hint {
+  font-size: 11px;
+  color: #555;
+}

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

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

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

package/src/components/message/ContentRenderer.tsx

@@ -0,0 +1,63 @@
+/**
+ * 内容渲染器
+ * 将原始文本解析为内容块并渲染
+ */
+
+import { FC, useMemo, useContext, type ComponentType } from 'react'
+import { parseContent } from '@huyooo/ai-chat-shared'
+import type { ContentBlock } from '@huyooo/ai-chat-shared'
+import { TextBlock, CodeBlock } from './blocks'
+import { BlockRenderersContext } from '../../context/RenderersContext'
+import './ContentRenderer.css'
+
+interface ContentRendererProps {
+  /** 原始文本内容 */
+  content: string
+  /** 预解析的块列表（可选，用于流式更新） */
+  blocks?: ContentBlock[]
+  /** 代码复制事件 */
+  onCodeCopy?: (code: string) => void
+}
+
+export const ContentRenderer: FC<ContentRendererProps> = ({
+  content,
+  blocks: preBlocks,
+  onCodeCopy,
+}) => {
+  // 从上层获取自定义块渲染器
+  const customRenderers = useContext(BlockRenderersContext)
+
+  // 解析后的内容块
+  const blocks = useMemo(() => {
+    // 优先使用预解析的块
+    if (preBlocks?.length) {
+      return preBlocks
+    }
+    // 否则解析原始内容
+    return parseContent(content)
+  }, [content, preBlocks])
+
+  if (!blocks.length) return null
+
+  return (
+    <div className="content-renderer">
+      {blocks.map((block) => {
+        // 自定义块渲染器
+        const CustomRenderer = customRenderers[block.type] as ComponentType<{ block: ContentBlock }>
+        if (CustomRenderer) {
+          return <CustomRenderer key={block.id} block={block} />
+        }
+
+        // 内置渲染器
+        switch (block.type) {
+          case 'text':
+            return <TextBlock key={block.id} block={block} />
+          case 'code':
+            return <CodeBlock key={block.id} block={block} onCopy={onCodeCopy} />
+          default:
+            return null
+        }
+      })}
+    </div>
+  )
+}

package/src/components/message/MessageBubble.css

@@ -0,0 +1,190 @@
+/**
+ * MessageBubble 组件样式
+ * 与 Vue 版本 MessageBubble.vue 保持一致
+ */
+
+.message-bubble {
+  padding: 8px 0;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 用户消息 */
+.message-bubble.user {
+  width: 100%;
+}
+
+.user-content {
+  width: 100%;
+  background: var(--chat-muted, #2d2d2d);
+  color: var(--chat-text, #ccc);
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--chat-border, #444);
+}
+
+.user-text {
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.user-images {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.user-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.user-image:hover {
+  transform: scale(1.05);
+}
+
+/* 助手消息 */
+.message-bubble.assistant {
+  position: relative;
+}
+
+.assistant-content {
+  max-width: 100%;
+}
+
+/* 加载提示 - 等待状态时 */
+.loading-indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px 16px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.loading-text {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  position: relative;
+  z-index: 1;
+}
+
+.loading-shimmer {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.08) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+/* 操作按钮 */
+.message-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.message-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.model-name {
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  background: var(--chat-muted, #2a2a2a);
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--chat-border, #333);
+}
+
+.mode-badge {
+  font-size: 10px;
+  color: var(--chat-text-muted, #888);
+  background: var(--chat-muted, #2a2a2a);
+  padding: 2px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--chat-border, #333);
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--chat-text-muted, #666);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.action-btn:hover {
+  background: var(--chat-muted, #3c3c3c);
+  color: var(--chat-text, #ccc);
+}
+
+.action-btn.copied {
+  color: #22c55e;
+}
+
+/* 消息时间 */
+.message-time {
+  font-size: 12px;
+  color: var(--chat-text-muted, #666);
+}
+
+.user-time {
+  text-align: right;
+  margin-top: 8px;
+}
+
+.assistant-time {
+  margin-right: 8px;
+}