AI智能体聊天卡片组件

百科搜索框场景下的 AI 问答卡片，自包含组件，可嵌入任意页面，一行调用即可发起 AI 对话。

快速上手

<template>
  <AgentChatCard ref="agentChatCard"
                 appCode="CHAT-002"
                 v-show="isShowCard"
                 @showMore="onShowMore" />
</template>

<script>
import AgentChatCard from '@kyfe/ai-agent-chat-card' // 注意事项：由于该 npm 包发布频繁，请锁定版本使用

export default {
  components: { AgentChatCard },
  data () {
    return { isShowCard: false }
  },
  methods: {
    ask (question) {
      this.isShowCard = true
      this.$refs.agentChatCard.sendMsg({ msg: question })
    },
    onShowMore ({ answerItem, sessionParams }) {
      this.$router.push({
        name: 'AIAgentPage',
        query: { question: '这里传问题内容', answerItem, sessionParams }
      })
    }
  }
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | appCode | String | 'CHAT-002' | AI 应用标识，决定后端会话创建的应用类型 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | showMore | { answerItem, sessionParams } | 用户点击"查看更多"时触发，携带当前答案和会话信息，由外部监听处理跳转等逻辑 |

Methods（通过 ref 调用）

sendMsg({ msg, callback })

发起一次 AI 问答，完整流程：创建会话 → SSE 流式获取答案 → 上报问答记录。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | msg | String | 是 | 用户提问内容 | | callback | Function | 否 | 会话创建成功后的回调 |

this.$refs.agentChatCard.sendMsg({
  msg: '年假怎么请？',
  callback: () => console.log('会话已创建')
})

升级记录

| 版本 | 说明 | | ------ | ----------------------- | | 1.0.0 | 发布 AgentChatCard 组件 | | 1.0.1 | 去掉highlight.js代码高亮，优化包体积 |