md 自定义渲染前后端定义

数据流自定义渲染

格式: <标签名称 属性1="值1" 属性2="值2" ></标签名称>

// 数据格式
const message = {
  create_time: 1762245477,
  create_date: "2025-11-04T16:37:57.553632",
  id: "e4e32699eaae4b42a1570ef4a9c56d2c",
  message:"",
  reference: [
    {
      content:"",
      content_ltks: ",
      dataset_id: "70fb88e0b2e411f08cd642f7fbc74d6d",
      doc_type_kwd: "",
      document_id: "fbac574ab3ec11f0a06c263bd229e0ad",
      document_keyword: "xxxxx.md",
      highlight:"",
      id: "62dd2c51f7fbff41",
      image_id: "",
      important_keywords: [],
      positions: [[16, 15, 15, 15, 15]],
      similarity: 0.7826310661126571,
      term_similarity: 0.834689687358161,
      vector_similarity: 0.6611609498731482,
    },

  ],
  user_id: "584985146201723731022",
  del_flag: 0,
  params: {
    model_name: "qwen3:32b",
    model_provider: "Ollama",
    web_tag: "1",
    llm_skill: 1,
  },
  sql: "",
  update_time: 1762245477,
  update_date: "2025-11-04T16:37:57.553800",
  prompt: "给我5篇参考文献",
  dialog_id: "8dbbded86a7e432aa0e07df9fdca86d7",
  total_duration: "40404119800",
  web_tag: null,
  additional: { web_show_type: "", candidates: [], candidate_jobs: [] },
  error: {},
};

1. 显示图片

在 md 文档中间部分显示图片

• 示例

  const markdownText = `
        <custom-image  index="0"  pathKey="mdImageList" ></custom-image>
    `;
  

• 属性说明
  • 标签名称： custom-image
  • 属性 index: 数据索引
  • 属性 pathKey : 在 message 哪个字段获取数据 比如 message.mdImageList

2. 参考文献

将文档中的 [1] [2] 这种文献标签改为 弹出层渲染

• 示例

  const markdownText = `
        <custom-reference  index="0" pathKey="reference"  label="[1]"></custom-reference>
    `;
  

• 属性说明
  • 标签名称： custom-reference
  • 属性 index :文件索引 在 message.reference 通过 index 下标获取显示数据
  • 属性 label : 在 label 中显示的文本
  • 属性 pathKey : 在 message 哪个字段获取数据 比如 message.reference