LangChain-ai/open-canvas 项目中实现聊天反馈功能的技术解析

在LangChain-ai/open-canvas项目中，最近实现了一个重要的用户反馈功能——在聊天界面中添加点赞/点踩的交互元素。这个功能的实现涉及前后端协作，是一个典型的全栈开发案例。

功能需求分析

该功能的核心目标是让用户能够对AI生成的回答进行简单的质量评价。具体来说：

1. 在每条AI消息下方显示点赞和点踩按钮
2. 用户点击后，将评价结果记录到LangSmith系统中
3. 每个运行(Run)只允许评价一次
4. 评价后显示感谢信息并隐藏按钮

技术实现方案

前端实现

最初考虑使用工具UI组件的方式实现(类似LangSmith分享URL的方式)，但经过讨论后认为将反馈按钮放在消息底部更符合用户直觉。最终采用了ActionBarPrimitive组件来创建反馈界面。

实现要点包括：

• 从useGraph获取并传递runId
• 设计直观的点赞/点踩按钮UI
• 处理用户交互后的状态变化
• 评价后显示感谢信息并禁用进一步操作

后端数据交互

评价数据通过LangSmith客户端提交，具体参数为：

• 反馈键名：feedback
• 评分值：0(点踩)或1(点赞)
• 关联到特定的runId

技术挑战与解决方案

1. 状态管理：需要确保每个运行只被评价一次。解决方案是在前端记录已评价状态，并在UI上反映出来。

2. 数据一致性：评价数据需要准确关联到对应的AI运行记录。通过正确传递和使用runId解决了这个问题。

3. 用户体验：即时反馈对用户操作很重要。在提交评价后立即更新UI，显示感谢信息，增强了交互体验。

实现效果

最终实现的效果是：

• 在每条AI消息下方显示简洁的反馈按钮
• 用户点击后，评价数据被可靠地记录
• 界面响应迅速，状态变化清晰可见
• 防止了重复评价的可能

这个功能的实现不仅提升了产品的用户体验，也为后续的AI模型优化提供了宝贵的人工反馈数据。