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 | 智能体标识（以每个产品线为维度,在【HROA 系统>智能体管理】获取） | 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 | 支持上报命中知识库功能 |

技术方案文档链接

https://doc.ky-tech.com.cn/docs/3481a3224dbc47d48f3ccc9756744eaa