在检索增强生成里AI 的每一次输出dou应当有根儿可循。Ru果用户只Nengkan到模型说了什么却找不到背后的文档，那信任感几乎为零。本文从“为什么要展示来源”说起，接着拆解前后端实现细节，并给出一套Neng直接落地的 UI 示例，让你的产品从 Demo 级别跃升为「可信」级别。

一、透明背后的价值：不只是炫技

可信度提升——用户Ke以点开引用，核对原文是否真的支撑答案。

降低幻觉风险——当模型凭空编造信息时缺失的引用会立刻暴露问题。

调试利器——开发者Neng够快速定位是检索阶段还是生成阶段出现偏差。

合规需求——在金融、医疗等行业，必须记录信息来源才Neng满足监管。

一句话概括：答案有据可查，用户才会放心使用。

二、后端：把“源头”送到前端 1. 检索层返回结构约定

Dify在流式 SSE 中会把检索结果塞进 metadata.retriever_resources 字段。我们需要把它抽取出来并统一转成前端友好的 JSON：

// src/types/chat.ts
export type RetrieverResource = {
    dataset_name?: string;
    document_name?: string;
    content?: string;
};
export type Source = {
    datasetName?: string;
    documentName?: string;
    snippet?: string;
};

随后在流式解析函数里加入以下逻辑：

if  {
    const rawSources = data.metadata?.retriever_resources || ;
    if  {
        const formatted = rawSources.map(s => ({
            datasetName: s.dataset_name,
            documentName: s.document_name,
            snippet: s.content,
        }));
        callbacks.onSources?.;
    }
}

这样，无论前端是 React、Vue 还是 Svelte，douNeng通过统一回调拿到一个干净的数组。

2. 边缘情况处理

检索不到任何文档：返回空数组即可，UI 会自动隐藏引用块。

SSE 丢失片段：用 try/catch 包裹解析，防止整条流因单行异常而中断。

多轮对话的上下文关联：把每轮的 sources 与对应的 AI 消息绑定，在本地状态树里保存。

三、前端：让引用自然融入聊天气泡 a) 基础组件 – SourceList

下面是一段极简版的 React 组件，实现「只要有来源就渲染」：

import type { Source } from '../types/chat';
type Props = { sources: Source };
export function SourceList {
    if  return null;
    return (
        

            
引用来源
            

                {sources.map => (
                    

                        {s.documentName || '未知文档'}
                        {/* 可选：展示相似度或片段 */}
                    
                ))}
            

        
    );
}

配合 CSS，它会出现在每条 AI 气泡的底部，kan起来像「脚注」一样自然。

b) 在 ChatMessage 中嵌入 SourceList

type ChatMessageProps = {
   role: 'user' | 'assistant';
   content: string;
   sources?: Source;
};
export function ChatMessage {
   return (
       
 
           
{content}
           {role === 'assistant' && }
       
   );
}

关键点是同一条消息只插入一次来源列表——否则用户会kan到重复的脚注。

C) 小细节，让体验geng友好

# 折叠/展开： 点击文档名弹出完整片段或跳转原链接；使用 CSS 的 :focus-within.

# 高亮匹配词： 把检索出的关键句子用 `` 包装，让用户一眼kan到「命中点」。

# 多语言兼容： Ru果你的系统支持英文/中文混排，请在渲染时检测字符集并适配字体。

# 性Neng优化： 大量引用时只渲染前 3 条，其余折叠在「查kangeng多」按钮里。

四、提示词技巧：让模型主动标记出处

A good prompt can save you a ton of post‑processing work. 给 LLM 明确指示：「请在回答末尾列出所有参考文档，每条前加 ‘’」；或者使用链式提示，让模型先输出正文，再输出 JSON 格式的 citations。示例：

下面是一组检索到的文档摘要，请根据它们回答用户的问题。
- 每条摘要后面dou有对应的文件名。
请先给出完整答案，然后以以下格式列出引用：
{
  "references": 
}

这样，即使后端没有自动返回 `retriever_resources`，前端也Neng通过正则捕获并渲染出来。

五、展望：从「可视」到「交互」的进阶路线图

内联引用: 直接在句子旁边打上小号数字，点击弹窗展示对应片段；类似学术论文脚注体验。

SLA 驱动监控: 后台记录每次检索命中率、引用覆盖率，用仪表盘实时展示给运营团队。

A/B 测试: 对比带/不带来源页面的转化率、满意度评分，以数据说话决定是否全量上线。

多模态 : 图片、表格甚至音频也Ke以作为 citation，对应 UI 用缩略图或播放器嵌入。

合规审计日志: 将每一次 “答案 + 来源” 持久化到审计库，为法规遵从提供铁证。

六、收官小结 —— 把透明写进产品基因

实现「答案来源透明可见」并不是加几个 HTML 标签那么简单，它牵涉到后端协议约定、流式解析细节以及 UI/UX 的精心雕琢。但只要按上面三层结构——后端标准化 → 前端组件化 → 提示词引导 —— 来逐步落地，你就Neng让 RAG 系统从“kan不见背后”变成“让人放心依赖”。当用户点开那行小小的引用链接，kan见真实文档时那份安心感往往比千言万语geng有说服力。

祝你玩得开心，也别忘了给每个答案贴上可靠的小标签哦！🚀

# 启动本地开发环境
npm run dev
# 查kan SSE 流
curl -N http://localhost/api/chat/stream?msg=前端架构

© 2026 AI 文案 工作室 | 保留所有权利

---