AiChat AI 智能聊天框

基础用法

::: details 点击查看代码

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

    <AiChat
      :style="{ height: '100%', width: '100%' }"
      appCode="CHAT-001"
      ref="aiChat"
      title="法务AI助手"
      :devEnvCas="devEnvCas"
      v-model="isShow"
      :popAttr="{
        closeable: false,
      }"
    >
      <!-- 右上角操作按钮插槽 -->
      <template slot="toolbar-btn">
        <div class="old-ai-btn" @click="goToOldAI">回到旧版</div>
      </template>
      <!-- 输入框顶部提示栏插槽 -->
      <template slot="input-tips-bar">
        <div class="manual-solution-tips">
          <div class="tips-label">如有疑问可提交问题至人工解答</div>
          <div class="tips-btn" @click="takeManualSolution">
            <img src="@/assets/imagesV2/tips-icon.png" />
            <span>人工解答</span>
          </div>
        </div>
      </template>
    </AiChat>
  </div>
</template>

<script>
import AiChat from '@kyfe/ai-chat'
export default {
  components: {
    AiChat,
  },
  data() {
    return {
      isShow: false,
      devEnvCas: '',
    }
  },
  created() {
    this.devEnvCas = process.env.VUE_APP_CAS
  },
  methods: {
    goToOldAI() {
      this.isShow = false
      this.$router.push('/ency/add-question')
    },
    takeManualSolution() {
      // 获取聊天列表
      let chatList = this.$refs.aiChat.getChatList()
      console.log('chatList', chatList)
    },
  },
}
</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);
}

.manual-solution-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(90deg, #ecebff 0%, #f4f4ff 84%);
  border-width: 0.5px 0px 0px 0px;
  border-style: solid;
  border-color: #ebedf5;
  .tips-label {
    font-size: 14px;
    color: #333333;
  }
  .tips-btn {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #cac6fe;
    font-size: 12px;
    color: #7972fe;
    > img {
      width: 14px;
      margin-right: 4px;
    }
  }
}
</style>

::: tip 引入 注意事项：本地环境联调使用时需配置代理，避免浏览器因同源策略阻止请求 :::

// 根据环境标识获取ai智能体域名
const getNewaiHost = () => {
  let host = 'http://oa-uat.kyeapi.com/'
  if (process.env.VUE_APP_CAS) {
    if (process.env.VUE_APP_CAS.indexOf('stg') > -1) {
      host = 'http://10.244.249.98:13026/'
    }
    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': ''
    }
  }
},

:::

参数

| 参数名 | 说明 | 类型 | 默认值 | | --------------- | :---------------------------------------------: | ------: | ----------: | | value / v-model | 绑定值 | Boolean | - | | appCode | 智能体标识（以每个产品线为维度,联系郑嘉裕获取） | String | - | | title | 聊天框 title | String | AI 智能助手 | | popAttr | van-popup 属性 | Object | - | | devEnvCas | 开发环境标识（uat/stg） | String | - |

插槽

| 插槽名 | 说明 | | -------------- | :------------------: | | toolbar-btn | 弹窗右上角按钮栏插槽 | | input-tips-bar | 输入框顶部提示栏插槽 |