后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载Checkpoint 是 ai-elements 组件库提供的一个轻量级对话组件用于在会话历史中标记关键节点并允许用户将聊天一键恢复至之前的任意状态。本文基于本仓库内置的 ai-elements 技能文档checkpoint.md完整讲解其安装、组合方式、Props 契约并结合 AI SDK 的useChat状态管理给出手动打点、自动打点与分支对话三种实战方案帮助你在 Agent 类应用中落地回到过去的对话体验。背景Checkpoint 组件是什么Checkpoint是一个用于标记对话历史节点、并把聊天恢复到先前状态的基础组件。它借鉴了 VSCode Copilot 的 checkpoint 功能用户可以在对话中途立一个路标之后随时点击恢复把会话拉回到该节点同时通过清晰的视觉分隔线区分不同会话片段。在本仓库中ai-elements 以 skill 的形式随项目一起分发见 skills-lock.json 中的vercel/ai-elements条目其组件文档、示例脚本与技能说明分别位于.agents/skills/ai-elements/references/checkpoint.mdCheckpoint 组件参考文档本文主体.agents/skills/ai-elements/scripts/checkpoint.tsx可直接运行的完整示例.agents/skills/ai-elements/SKILL.mdai-elements 技能总览包含安装前提、CLI 用法与排障指南。安装在项目根目录package.json所在目录执行npx ai-elementslatest add checkpoint按 SKILL.md 的说明组件默认安装到/components/ai-elements/目录具体取决于你的 shadcn 组件配置。CLI 会把组件源码直接写入你的代码库而不是隐藏在某个库中因此安装后可以像项目自身组件一样直接导入、修改样式或扩展逻辑。如果项目使用 pnpm 或 bun请将命令替换为pnpm dlx ai-elementslatest add checkpoint或bunx --bun ai-elementslatest add checkpoint。安装前提Node.js 18 及以上已安装 AI SDK 的 Next.js 项目组件示例依赖ai-sdk/react的useChat项目中已配置 shadcn/ui未安装时 CLI 会自动安装。特性概览按文档Checkpoint 组件具备以下开箱即用的能力简洁的 flex 布局由图标icon、触发按钮trigger和分隔线separator三部分组成视觉分隔线在对话流中制造清晰的断点观感将不同会话段分开可点击的恢复按钮一键回滚到指定检查点可自定义图标默认使用 lucide-react 的BookmarkIcon键盘可达与无障碍支持具备正确的 ARIA 标签响应式设计适配不同屏幕尺寸无缝的明暗主题集成与 shadcn/ui 的主题系统保持一致。与 AI SDK 集成完整示例文档给出了一套可直接照搬的聊天界面实现在消息流中渲染检查点标记点击 Restore checkpoint 时把useChat的消息数组截断到检查点位置同时清理该点之后的所有检查点。将下面组件添加到前端use client; import { useState, Fragment } from react; import { useChat } from ai-sdk/react; import { Checkpoint, CheckpointIcon, CheckpointTrigger, } from /components/ai-elements/checkpoint; import { Message, MessageContent, MessageResponse, } from /components/ai-elements/message; import { Conversation, ConversationContent, } from /components/ai-elements/conversation; type CheckpointType { id: string; messageIndex: number; timestamp: Date; messageCount: number; }; const CheckpointDemo () { const { messages, setMessages } useChat(); const [checkpoints, setCheckpoints] useStateCheckpointType[]([]); const createCheckpoint (messageIndex: number) { const checkpoint: CheckpointType { id: nanoid(), messageIndex, timestamp: new Date(), messageCount: messageIndex 1, }; setCheckpoints([...checkpoints, checkpoint]); }; const restoreToCheckpoint (messageIndex: number) { // Restore messages to checkpoint state setMessages(messages.slice(0, messageIndex 1)); // Remove checkpoints after this point setCheckpoints(checkpoints.filter((cp) cp.messageIndex messageIndex)); }; return ( div classNamemax-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px] Conversation ConversationContent {messages.map((message, index) { const checkpoint checkpoints.find( (cp) cp.messageIndex index ); return ( Fragment key{message.id} Message from{message.role} MessageContent MessageResponse{message.content}/MessageResponse /MessageContent /Message {checkpoint ( Checkpoint CheckpointIcon / CheckpointTrigger onClick{() restoreToCheckpoint(checkpoint.messageIndex) } Restore checkpoint /CheckpointTrigger /Checkpoint )} /Fragment ); })} /ConversationContent /Conversation /div ); }; export default CheckpointDemo;实现要点拆解状态建模CheckpointType用messageIndex关联到具体某条消息messageCount记录检查点处的消息总数timestamp用于展示或排序渲染位置检查点不是独立列表而是通过checkpoints.find((cp) cp.messageIndex index)在消息流内联渲染——这决定了它在视觉上精确卡在两条消息之间恢复逻辑核心只有两行——setMessages(messages.slice(0, messageIndex 1))截断消息setCheckpoints(checkpoints.filter(...))丢弃检查点之后的全部检查点。恢复后若再发送新消息本质上就是在该节点派生出一条新的对话分支组合关系Checkpoint内部默认会渲染图标、触发器并在末尾自动追加分隔线Separator因此你不需要手动添加任何分隔元素。仓库中的示例脚本 .agents/skills/ai-elements/scripts/checkpoint.tsx 给出了同样的组合方式它用memouseCallback把单个检查点封装成CheckpointItem并通过checkpoints.find((cp) cp.messageCount index 1)注意这里用的是 1 基的messageCount定位检查点onRestore回调执行setMessages(initialMessages.slice(0, messageCount))完成回滚。这种将检查点封装成独立 memo 子组件、并通过回调上抛恢复事件的做法适合消息列表较长、需要避免整体重渲染的聊天场景。三种典型使用场景手动检查点允许用户在自己认为重要的对话节点手动创建检查点例如在关键结论、代码方案定稿处按下按钮Button onClick{() createCheckpoint(messages.length - 1)} Create Checkpoint /Button这里传入的是messages.length - 1即当前最后一条消息的下标确保检查点正好标记在对话末尾。自动检查点在达到显著的对话里程碑后自动创建检查点例如每 5 条消息打一个点无需用户干预useEffect(() { // Create checkpoint every 5 messages if (messages.length 0 messages.length % 5 0) { createCheckpoint(messages.length - 1); } }, [messages.length]);依赖数组为messages.length因此每次消息数变化都会触发判断% 5 0的取模条件让检查点自动落在第 5、10、15… 条消息之后。分支对话利用检查点实现对话分支用户可以在同一会话里先保存当前分支例如保存为草稿或快照再回退到检查点探索另一条路径之后还能恢复原分支继续const restoreAndBranch (messageIndex: number) { // Save current branch const currentBranch messages.slice(messageIndex 1); saveBranch(currentBranch); // Restore to checkpoint restoreToCheckpoint(messageIndex); };saveBranch是你的业务实现如存入本地状态、IndexedDB 或服务端restoreToCheckpoint复用前面定义的截断逻辑。这一模式很适合 AI 助手类产品的多方案对比让用户先看到 A 方案的推导过程回退检查点后尝试 B 方案两种路径互不干扰。Props 参考Checkpoint /Prop类型默认值说明childrenReact.ReactNode-检查点图标与触发器组件末尾会自动附带一个 Separator 分隔线...propsReact.HTMLAttributesHTMLDivElement-其余属性透传给根 divchildren默认自动追加 Separator这是组件保持清晰会话断点观感的关键设计——你只需提供图标与触发器分隔线由组件自身完成。CheckpointIcon /Prop类型默认值说明childrenReact.ReactNode-自定义图标内容未提供时默认渲染 lucide-react 的 BookmarkIcon...propsLucideProps-其余属性透传给 BookmarkIcon 组件想换成其他图标如HistoryIcon、FlagIcon直接以 children 传入即可如果只想调整尺寸或颜色也可以通过...props覆盖。CheckpointTrigger /Prop类型默认值说明childrenReact.ReactNode-触发器按钮内展示的文本或内容tooltipstring-悬停时显示的提示文字variantstring-按钮变体样式sizestring-按钮尺寸...propsReact.ComponentPropstypeof Button-其余属性透传给底层 shadcn/ui Button 组件variant与size直接复用 shadcn/ui Button 的取值如ghost、outline、sm等这意味着触发器按钮的样式、点击处理onClick、禁用状态等都可以按 shadcn/ui Button 的惯例配置。仓库示例中即通过tooltipRestores workspace and chat to this point为恢复按钮补充了悬停说明。接入本项目的实践建议本仓库Comp AI CRMAgent 优先的开源 CRM在apps/app/components/crm/下实现了大量 Agent 对话界面例如 agent-conversations.tsx 中基于tanstack/react-query tRPC 的会话列表与消息管理。在接入 Checkpoint 时可以针对这类真实聊天应用做如下适配消息来源替换ai-elements 文档示例基于useChat的messages/setMessages而 CRM 场景的消息可能来自服务端持久化如conversations路由返回的数据恢复逻辑可改为截断本地消息列表 调用后端接口删除后续消息核心的slice思想不变检查点持久化CheckpointType的id、timestamp字段使其天然可序列化可将检查点连同messageIndex存入库表实现刷新页面后仍可恢复恢复粒度示例按消息粒度回滚若业务需要精确到单条消息内的部分内容如撤销某次工具调用结果可以扩展CheckpointType在messageIndex之外增加partIndex或内容哈希字段。需要注意的是本仓库当前并未在apps/app源码中直接使用ai-elements组件Checkpoint相关内容仅存在于 .agents/skills/ai-elements/ 的文档与示例中因此上述接入建议属于基于文档与仓库现状的可行方案推演而非对现有代码行为的描述。小结Checkpoint 用极小的 API 面三个组件 若干透传 Props解决了 AI 聊天产品中会话回滚这一高价值需求Checkpoint负责布局与分隔线CheckpointIcon提供可替换的图标CheckpointTrigger复用 shadcn/ui Button 承担交互。配合useChat的setMessages截断与checkpoints.filter清理即可在十余行代码内实现手动打点、自动打点与分支探索三种能力。其代码进入你的代码库的安装方式也让你能随时按业务需求改造分隔样式、恢复逻辑甚至扩展持久化能力。赞分享后端前端CRM人工智能AI Agent【免费下载链接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.项目地址https://gitcode.com/gh_mirrors/crm48/crm点击查看免费下载相关推荐Higress AI 历史对话插件ai-history配置与实践指南Higress AI 历史对话插件ai history配置与实践指南 本篇技术指南围绕 Higress 内置的 AI 历史对话插件ai historyAPI网关后端云原生LLM 网关人工智能MCP 服务Gemini CLI 会话管理实战恢复、浏览、分叉与回滚你的对话历史Gemini CLI 会话管理实战恢复、浏览、分叉与回滚你的对话历史 本篇指南聚焦 Gemini CLI 的会话session管理机制如何从断点恢复上次人工智能AI Agent交互助手CLIMCP ClientsOpenPlayground对话历史管理全攻略轻松找回每一段AI对话OpenPlayground对话历史管理全攻略轻松找回每一段AI对话 还在为找不到之前的AI对话记录而烦恼吗OpenPlayground内置的对话历史功能让AI 应用大模型交互助手上一篇5分钟全面掌握B站视频解析高效获取高清视频地址的实用指南下一篇免费终极音乐解锁工具3分钟解决所有加密音乐播放问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
