QuickBot 多剧本对话应用前端基于 Angular 15 的生成式 AI 聊天界面开发与工程化指南【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai本指南以 conversational-app-multi-playbook/frontend/README.md 为核心系统讲解 QuickBot 多剧本对话应用前端工程Angular 15 TypeScript的本地开发、代码脚手架、构建、测试与代码规范落地方法。文中将结合仓库内真实源码与配置说明该前端如何对接后端 FastAPI 服务与 Vertex AI Conversation Agent帮助读者掌握一套可直接复用的 AI 聊天前端开发与质量保障实践。一、项目背景QuickBot 前端在整体架构中的位置QuickBot 是一个基于 Google Cloud 的对话式应用模板后端使用自定义 Cloud Function 提供 RAG检索增强生成能力并与 Google Cloud Agent BuilderVertex AI Conversation协同跨多个可配置 playbook剧本管理对话流程。其整体结构见 项目根 README包含backend/Python 后端FastAPI/Uvicorn负责对话路由与 Agent 交互frontend/TypeScript 前端Angular即本文主体functions/Google Cloud Functions 源码如create-intentdocker-compose.yml一键编排前后端服务的容器配置。前端由 Angular CLIAngular 15.x 全家桶、Angular Material、Angular Flex-Layout、ngx-markdown渲染对话中的 Markdown、marked、prismjs代码高亮、clipboard复制代码、Firebase 认证集成以及 Ionic 组件库。二、环境准备与依赖安装在进入具体命令之前先确认本机具备以下环境依据项目根 README 的前置条件Node.js 与 npm或 yarnAngular CLI 15 需 Node.js 版本与 npm 配合使用Python 3.x后端开发非 Docker 方式时使用Docker 与 Docker Compose v2容器化部署可通过docker compose version验证版本Google Cloud SDKgcloud CLI用于认证与云服务交互。安装前端依赖在frontend/目录下cd frontend npm install该工程的package.json中定义了postinstall: ngcc钩子npm install完成时会自动执行 Angular 的兼容性编译ngcc因此安装后即可直接启动开发服务器无需额外手工步骤。三、开发服务器ng serve在frontend/目录下运行ng serve开发服务器默认地址为http://localhost:4200/修改任何源文件后应用会自动热重载live reload若使用代理或需指定端口可用ng serve --port port等参数。package.json中对应的快捷命令为start: ng serve所以也可直接运行npm start。工程中配置了src/environments/environment.ts其中backendURL: http://localhost:8080/api指向本机后端 API 根路径chatbotName: My New Agent等字段用于界面展示。启动前端前请确保后端uvicorn main:app --reload --port 8080参见 根 README已运行或按需修改此环境文件。四、代码脚手架ng generate使用 Angular CLI 生成新代码ng generate component component-name也可以生成其他类型ng generate directive|pipe|service|class|guard|interface|enum|module本仓库src/app/下的模块组织即是很好的脚手架范例见 src/app 目录结构components/按elements/、footer/、header/、login/、main/chat/chatbar/、manage-intent/、shared/等拆分 UI 组件每个组件均含.ts/.html/.scss/.spec.ts四件套dialogue-box/对话气泡展示组件models/TypeScript 数据模型chat.model.ts、messegeType.model.tsservices/业务服务层如chat.service.ts、intent.service.ts、speech-to-text.ts等。这种“组件四件套 模型 服务”的规范组织便于团队并行开发与后续维护建议新生成的组件遵循同样的目录约定。五、构建ng build运行ng build构建产物默认输出到dist/目录本工程为dist/quick-bot-app-frontend见 angular.json 中outputPath配置。工程在 package.json 中预置了多套构建脚本build:prod: ng build --configuration production --aot --output-hashingall, build:dev: ng build --configuration development, build:staging: ng build --configuration staging, build: ng build, watch: ng build --watch --configuration development其中production配置angular.json中configurations.production默认开启 AOT 编译、outputHashing: all并设置资源体积预算initial 警告 4mb / 报错 10mb任意组件样式警告 20kb / 报错 50kbdevelopment配置则关闭优化、开启 sourceMap 与 namedChunks便于调试。该前端还内置了生产构建后的静态服务能力Dockerfile 采用两阶段构建——先在node:18.17.1中执行npm ci与npm run build:prod再将产物复制进nginx:alpine配合 nginx.conf 中try_files $uri $uri/ /index.html的 SPA 回退配置监听 8080 端口对外提供服务。六、单元测试ng test运行ng test单元测试通过 Karma 执行angular.json中testbuilder 为angular-devkit/build-angular:karma配 Jasmine Karma 全家桶karma-chrome-launcher、karma-coverage、karma-jasmine、karma-jasmine-html-reporter。工程在package.json中把测试与质量检查串成流水线pretest: npm run compile, test: ng test, posttest: npm run lint即每次测试前先执行tsc编译测试后自动执行 lint 检查。仓库内所有组件与服务都配套了*.spec.ts测试文件例如 chat.service.spec.ts、auth.guard.spec.ts 等可作为编写新测试时的参考。七、端到端测试ng e2e运行ng e2e端到端测试通过你选择的平台执行如 Cypress 等。在使用此命令之前你需要先添加一个实现了端到端测试能力的 npm 包当前工程的package.json未内置 e2e runnerAngular CLI 默认不再捆绑 Protractor因此需要按提示自行接入。八、进一步帮助ng help如需查看 Angular CLI 的全部命令与参数ng help或查阅 Angular CLI 官方 Overview 与 Command Reference 文档。九、代码规范与提交约定Code Styling Commit Guidelines为保证代码质量与一致性工程制定了如下规范与根 README 保持一致TypeScript前端遵循 Angular 编码风格指南借助 Google 的 TypeScript 风格指南工具gtsGoogle TypeScript Style内置格式化、lint 与自动修复能力Python后端遵循 Google Python 风格指南使用pylint与black做 lint 与格式化提交信息建议遵循 Angular 的 Commit Message Guidelines写出清晰、可描述性的提交信息。9.1 前端TypeScript 使用gtsgts已作为 devDependency 引入gts: ^5.3.1并在 package.json 中注册了lint、fix、clean、compile等脚本。步骤 1初始化gts若工程中尚未配置在frontend/目录下运行npx gts init它会完成gts的初始化并生成必要的配置文件如tsconfig.json。务必确保tsconfig.json或相关的gts配置文件如.gtsrc包含对gts默认配置的扩展典型写法为{ extends: ./node_modules/gts/tsconfig-google.json }仓库的 tsconfig.json 正是采用此写法并在此基础上开启了strictTemplates、strictInjectionParameters等 Angular 严格模板检查以及noImplicitOverride、noPropertyAccessFromIndexSignature等 TypeScript 严格选项。步骤 2检查 lint 问题npm run lint即gts lintpackage.json中lint: gts lint。步骤 3自动修复 lint 问题npm run fix即gts fix可自动修复大部分可机械修正的风格问题。9.2 后端Python 使用pylint与black步骤 1安装依赖在backend/requirements.txt中追加pylint black然后在虚拟环境中安装pip install pylint black # 或 pip install -r requirements.txt步骤 2配置pylint建议在backend/目录放置.pylintrc以配置规则可通过生成标准配置后按需修改pylint --generate-rcfile .pylintrc步骤 3用pylint检查在backend/目录下运行pylint . # 或指定模块pylint your_module_name步骤 4用black格式化python -m black . --line-length80即对当前目录及子目录下所有 Python 文件按 Google Python Style 风格、行宽 80 进行自动格式化。十、源码级细节前端如何与 AI 后端交互为便于读者理解前端工程的实战价值这里补充几处可直接验证的源码要点均来自本仓库对话请求ChatService.postChat()在发送前会执行query.replace(/\s/g, ).trim()清洗用户输入然后 POST 到${environment.backendURL}/chats请求体为{text: query}见 chat.service.ts语音输入SpeechToTextService.transcribeAudio()将录音 Blob 以audio.wav字段封装为FormDataPOST 到${environment.backendURL}/audio_chat实现语音转文字见 speech-to-text.ts意图管理manage-intent/模块提供了多剧本场景下的意图创建/编辑界面create-intent-form、intent-form组件对应functions/create-intent云函数用于动态扩展对话剧本Markdown 渲染与代码高亮构建配置中注入了marked.min.js、prism.js及prism-csharp、prism-css语言组件与clipboard.min.js见 angular.json 的scripts数组使 AI 返回的 Markdown 与代码块能在对话气泡中友好呈现并一键复制会话与登录services/login/auth.service.ts、auth.guard.ts与services/user/session.service.ts负责认证与会话管理environment.ts中的requiredLogin字段可控制是否需要登录。这些实现共同构成了“输入清洗 → 后端 /chats 或 /audio_chat → 多剧本 Agent 路由 → RAG 检索生成 → Markdown 渲染展示”的完整链路与 项目根 README 描述的架构一一对应。十一、容器化运行方式前端视角若想以最快方式体验完整应用可使用项目根目录的 docker-compose.yml# 首次部署自动创建 Agent 与示例 playbook docker compose build --build-arg IS_FIRST_DEPLOYMENTTrue docker compose up前端容器将宿主机4200端口映射到容器内8080nginx 服务端口访问http://localhost:4200即可前端环境变量通过src/environments/environment.ts修改compose 文件中注释也指明“To change the env variables in the frontend, change the environment.ts file”前端目录以 volume 挂载且使用匿名卷隔离node_modules避免宿主机 node_modules 干扰镜像构建。若需修改前端环境配置如后端地址、机器人名称、是否要求登录编辑 environment.ts 后按需重新构建即可。十二、小结本文完整继承了 frontend/README.md 的全部操作要点开发服务器、脚手架、构建、单元/端到端测试、gts与pylint/black代码规范并结合仓库源码补充了环境配置、多环境构建脚本、容器化部署、SPA 回退配置与前后端交互链路等纵深细节。按此流程读者可以快速在本地启动 QuickBot 前端、规范地扩展新组件并将工程质量控制lint、单测、格式化无缝纳入日常开发。【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
