目录

TEN Agent Playground 前端项目目录分析

配置文件

  • .dockerignore: 指定Docker构建时要忽略的文件，减小镜像大小
  • .gitignore: 指定Git版本控制忽略的文件（如node_modules, .next等）
  • .prettierrc.json: Prettier代码格式化工具配置
  • components.json: shadcn/ui组件库配置，设置样式、别名和图标库
  • next-env.d.ts: Next.js类型声明文件
  • next.config.mjs: Next.js配置，包含构建输出、SVG处理等设置
  • postcss.config.js: PostCSS配置，包含Tailwind和移动端视口适配

  • Dockerfile: 多阶段Docker构建配置，优化了依赖安装和构建过程
  • LICENSE: MIT许可证
  • README.md: 项目说明，包含架构、开发环境和运行指南
  • package.json: 项目依赖、脚本和元数据

src目录结构

src/app

    src/common (通用工具和配置)

    • index.ts: 导出通用模块的入口文件
    • constant.ts: 定义常量，如URL、选项、颜色和默认配置
    • graph.ts: 图形编辑器工具，用于操作模块连接图
    • hooks.ts: 自定义React hooks，包括Redux绑定和音频处理
    • mock.ts: 生成模拟数据的工具函数
    • moduleConfig.ts: 模块注册表，定义了各种模块类型和兼容性配置

    • Agent/AudioVisualizer.tsx: 音频可视化组件，显示音频频率波形
    • Agent/AvatarTrulience.tsx: AI代理的头像组件
    • icons/cam/index.tsx: 相机图标组件，显示摄像头状态

    核心功能模块

    模块系统 (moduleConfig.ts)

    定义了多种模块类型的注册表：

      图形编辑工具 (graph.ts)

      提供了一个API用于:

      • 添加/移除节点
      • 创建/移除节点之间的连接
      • 修改节点属性
      • 链接工具到LLM模块

      通过Redux管理应用状态，提供自定义hooks:

      • 音频频率分析和可视化
      • 自动滚动聊天
      • 图形状态管理

      用户界面组件

      • 响应式布局，支持桌面和移动设备
      • 实时音频/视频通信
      • 聊天界面
      • 代理音频可视化