****# Intelligent Assistant Zylliondata 智能助手

该智能助手的服务是基于Dify平台

部分UI库采用Ant Design Vue

Installing

$ npm install vue ant-design-vue intelligent-assistant-zylliondata

Usage

<template>
  <div>
    <intelligent-assistant />
  </div>
</template>

<script lang="ts">
import { IntelligentAssistant } from 'intelligent-assistant-zylliondata'
import 'intelligent-assistant-zylliondata/style.css' // Use the automatic import style, ignore this line.
</script>

Custom trigger

<template>
  <div>
    <IntelligentAssistant :icon-props="{ floatable: true }">
      <template #trigger="props">
        <img v-bind="props" src="@/assets/images/ai.png" />
      </template>
    </IntelligentAssistant>
  </div>
</template>

<script lang="ts">
import { IntelligentAssistant } from 'intelligent-assistant-zylliondata'
import 'intelligent-assistant-zylliondata/style.css' // Use the automatic import style, ignore this line.
</script>

Auto import Style

$ npm install vite-plugin-style-import -D

// vite.config.ts
import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
  // ...
  plugins: [
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'intelligent-assistant-zylliondata',
          esModule: true,
          resolveStyle: (name) => {
            return 'intelligent-assistant-zylliondata/dist/style.css'
          },
        },
      ],
    }),
  ],
  // ...
})

Props

| 字段 | 说明 | 类型 | 默认值 | | ------------------------ | ------------------------------------------------------------------------------------ | --------------------------- | ------------------------------------------------------------------------- | | show | 是否显示抽屉 - 支持双向绑定v-model:show | boolean | false | | api-path | API 地址 | string | https://dify.data4industry.com:30843/v1/chat-messages | | api-token | API 访问令牌 | string | app-6nyN2IYINgcGZ3mYBMxj4Htz | | reference-text | 自动给AI的最尾部添加一段文本作为参考，不会显示在用户的输入中 | string | undefined | | username | 用户名 | string | tourist | | user-id | 用户ID | string | tourist | | background | 抽屉背景 | string | linear-gradient(180deg, #EFF5FF 0%, #F2F7FF 49.86%, #F2F7FF 100%), #FFF | | empty-text | 空消息提示 | string | 暂无消息 | | history-split-size | 历史消息 分页大小 也就是每上拉加载history-split-size条，提示load-more-text | number | 20 | | icon-props | 图标属性 | HandleProps | HandleProps | | load-more-text | 上拉加载更多文字 | string | 加载更多 | | new-context | 每次对话是否为新的上下文 | boolean | false | | placeholder | 输入占位符 | string | 请输入您的问题... | | placement | 抽屉方向 | string | right | | send-button-text | 发送按钮文字 | string | 发送 | | send-immediately-clear | 发送并接受完成消息后,是否立即清空输入框内容 | boolean | true | | storage-key | 本地存储的键名:存储上下文 Id 和消息列表 | string | intelligent_assistant_key | | tip-placeholder | AI 提示占位符 | string | 信息由AI生成，仅供参考 | | title | 抽屉标题 | string | 智能BI助手 | | width | 抽屉宽度 | string | 700 | | clearable | 是否显示清空历史记录按钮 | boolean | true | | type | 显示模式,modal暂支持右下角显示 | modal|drawer | drawer | | clear-button-text | 清空历史记录按钮文字 | string | 清空对话 |

Slots

| 名称 | 说明 | 作用域插槽 | | ------- | ----------------------------------------------------------------- | :--------: | | trigger | 自定义触发,请使用#trigger='props'及v-bind='props'接收所有属性 | ✓ | | title | 自定义标题 | × |

Inst

| 属性/方法 | 说明 | 类型 | | ------------ | ---------------- | ------------------------- | | show | 是否显示抽屉 | ShallowRef<boolean> | | open | 打开抽屉 | () => void | | close | 关闭抽屉 | () => void | | toggleShow | 打开/关闭 - 抽屉 | (show: boolean) => void |

HandleProps

| 字段 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------- | ------------------ | ----------- | | width | 图标外容器宽度 | number|string | 64 | | height | 图标外容器高度 | number|string | 64 | | top | 距离页面顶部距离 | number|string | undefined | | right | 距离页面右侧距离 | number|string | 40 | | bottom | 距离页面底部距离 | number|string | 80 | | left | 距离页面左侧距离 | number|string | undefined | | backgroundColor | 背景色 | string | #143968 | | iconColor | 图标颜色 | string | #FFF | | iconWidth | 图标宽度 | number|string | 35 | | iconHeight | 图标高度 | number|string | 35 | | floatable | 可浮动的 | boolean | true | | floatEnterDelay | 鼠标悬浮进入 xxx 毫秒后自动显示 | number | 200 | | floatLeaveDelay | 鼠标悬浮离开 xxx 毫秒后自动隐藏 | number | 2000 |