@kyfe/ai-chat

AIChat 智能聊天框

基础用法

::: details 点击查看代码

<template>
  <div class="at-input-demo">
    <h5>基础用法</h5>

    <AIChat :style="{ height: '100%', width: '100%' }" appCode="CHAT-001" ref="aiChat" title="法务AI助手" v-model="isShow">
      <!-- 右上角操作按钮插槽 (仅弹窗版本支持)-->
      <template slot="toolbar-btn">
        <div class="old-ai-btn" @click="goToOldAI">回到旧版</div>
      </template>
      <!-- 输入框顶部提示栏插槽 -->
      <template slot="input-tips-bar">
        <div class="btn-box">
          <div class="tips-btn">
            <span>热门问题1</span>
          </div>
          <div class="tips-btn">
            <span>热门问题2</span>
          </div>
        </div>
      </template>
    </AIChat>
  </div>
</template>

<script>
import AIChat from '@kyfe/ai-chat' // 注意事项：由于 该 npm 包发布频繁，请锁定版本使用
export default {
  components: {
    AIChat,
  },
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    goToOldAI() {
      this.isShow = false
      this.$router.push('/ency/add-question')
    },
  },
}
</script>

<style lang="less" scoped>
.old-ai-btn {
  position: relative;
  border-radius: 100px;
  line-height: 30px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  font-size: 14px;
  color: #1d1919;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}
</style>

// 根据环境标识获取ai智能体域名
const getNewaiHost = () => {
  let host = 'https://oa-uat.kyeapi.com/'
  if (process.env.VUE_APP_CAS) {
    if (process.env.VUE_APP_CAS.indexOf('stg') > -1) {
      host = 'https://config-stg.kyeapi.com/'
    }
    if (process.env.VUE_APP_CAS.indexOf('prod') > -1) {
      host = 'https://open-h5.ky-express.com/'
    }
  }
  return host
}

// vue.config.js 增加以下配置
proxy: {
  "/newai": {
    target: getNewaiHost(),
    changeOrigin: true,
    pathRewrite: {
      '^/newai': ''
    }
  }
},

::: 📢 注意事项：由于 该 npm 包发布频繁，请锁定版本使用！！！

参数

参数名	说明	类型	默认值
value / v-model	绑定值 (仅弹窗版本支持)	Boolean	-
appCode	智能体标识（以每个产品线为维度,联系郑嘉裕获取）	String	-
title	聊天框 title (仅弹窗版本支持)	String	AI 智能助手
popAttr	van-popup 属性 (仅弹窗版本支持)	Object	-
noPopup	是否无需弹窗（默认为全屏弹窗）	Boolean	false

内置方法 （通过 ref 调用）

方法名	说明	参数
getChatList	获取聊天列表数据	-
sendMsg	发送消息	{msg}

插槽

插槽名	说明
toolbar-btn	弹窗右上角按钮栏插槽 (仅弹窗版本支持)
input-tips-bar	输入框顶部提示栏插槽

升级记录

版本	说明
1.2.0	支持无弹窗版本，增加入参：noPopup
1.2.6	人工解答功能支持配置化
1.2.12	聊天框展示登录人头像
1.2.17	支持上报命中知识库功能