@blueking/ai-blueking 0.2.13 → 0.2.15

package/README.md

@@ -6,6 +6,43 @@
 npm i @blueking/ai-blueking
 ```
 
+## 通过模板字符串渲染特定 html
+
+#### 渲染知识库列表的模板
+
+可以使用类似如下的模板来渲染匹配的知识库列表
+
+```
+<section class="knowledge-tips">
+  <i class="ai-blueking-icon ai-blueking-angle-up"></i>
+  <span class="knowledge-summary">
+    <i class="ai-blueking-icon ai-blueking-help-document"></i>
+    引用 4 篇资料作为参考
+  </span>
+  <a href="xxx" target="_blank" class="knowledge-link">
+    1. vivo 容器平台如何实现资源超卖方案
+    <i class="ai-blueking-icon ai-blueking-cc-jump-link"></i>
+  </a>
+  <a href="xxx" target="_blank" class="knowledge-link">
+    1. vivo 容器平台如何实现资源超卖方案
+    <i class="ai-blueking-icon ai-blueking-cc-jump-link"></i>
+  </a>
+  <a href="xxx" target="_blank" class="knowledge-link">
+    1. vivo 容器平台如何实现资源超卖方案
+    <i class="ai-blueking-icon ai-blueking-cc-jump-link"></i>
+  </a>
+</section>
+```
+
+#### 渲染带有点击交互的html
+
+可以使用类似如下的模板来渲染可点击交互的 html（具有'ai-clickable'的class），点击以后会触发组件的`ai-click`事件，并把 html 标签的`data-ai`的数据传递出来。这样业务可以进行二次处理。比如说把`data-ai`上的字符串赋值到输入框，可以使用`aiRef.value?.setInputMessage(val)`来设置输入框内容。
+
+```
+<button data-ai="{ type: 'button', data: xxx }" class="ai-clickable">可点击的按钮</button>
+<a data-ai="{ type: 'link', data: 'link url' }" class="ai-clickable" href="void">可点击的链接</a>
+```
+
 ## stream 模式
 
 不同框架，组件引入方式不同，具体可参考下面的的例子。这里使用 vue3 项目为例，来展示 stream 模式交互：
@@ -136,6 +173,7 @@ npm i @blueking/ai-blueking
     :scroll-loading-end="scrollLoadingEnd"
     :size-limit="sizeLimit"
     :start-position="startPosition"
+    @ai-click="handleAIClick"
     @choose-prompt="handleChoosePrompt"
     @clear="handleClear"
     @close="handleClose"
@@ -145,7 +183,7 @@ npm i @blueking/ai-blueking
   />
 </template>
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { type ComponentInstance, ref } from 'vue';
 
   import AIBlueking, { type IPrompt, type IMessage, RoleType, MessageStatus } from '@blueking/ai-blueking';
 
@@ -226,6 +264,8 @@ npm i @blueking/ai-blueking
   // 向上滚动加载
   const scrollLoading = ref(false);
   const scrollLoadingEnd = ref(false);
+  // 组件实例
+  const aiRef = ref<ComponentInstance<typeof AIBlueking>>();
 
   const handleClear = () => {
     console.log('trigger clear');
@@ -270,6 +310,10 @@ npm i @blueking/ai-blueking
   const handleChoosePrompt = (prompt: IPrompt) => {
     console.log('choose prompt', prompt);
   };
+
+  const handleAIClick = (val: string) => {
+    aiRef.value?.setInputMessage(val);
+  };
 </script>
 ```
 

package/dist/ai-blueking.vue.d.ts

@@ -1,53 +1,40 @@
 import type { IMessage, IPrompt, IPositionLimit, ISize, IStartPosition, IModel } from './types';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+interface IProps {
     messages: IMessage[];
-    prompts?: IPrompt[] | undefined;
-    loading?: boolean | undefined;
-    headBackground?: string | undefined;
-    background?: string | undefined;
-    positionLimit?: IPositionLimit | undefined;
-    sizeLimit?: ISize | undefined;
-    startPosition?: IStartPosition | undefined;
-    userPhoto?: string | undefined;
-    name?: string | undefined;
-    placeholder?: string | undefined;
-    logo?: string | undefined;
-    scrollLoading?: boolean | undefined;
-    scrollLoadingEnd?: boolean | undefined;
-    alert?: string | undefined;
-    models?: IModel[] | undefined;
-    model?: string | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prompts?: IPrompt[];
+    loading?: boolean;
+    headBackground?: string;
+    background?: string;
+    positionLimit?: IPositionLimit;
+    sizeLimit?: ISize;
+    startPosition?: IStartPosition;
+    userPhoto?: string;
+    name?: string;
+    placeholder?: string;
+    logo?: string;
+    scrollLoading?: boolean;
+    scrollLoadingEnd?: boolean;
+    alert?: string;
+    models?: IModel[];
+    model?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<IProps>, {
+    setInputMessage: (val: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
     stop: () => void;
     clear: () => void;
     "scroll-load": () => void;
+    "ai-click": (val: string) => void;
     send: (val: string) => void;
     "update:model": (val: string) => void;
     "choose-prompt": (prompt: IPrompt) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    messages: IMessage[];
-    prompts?: IPrompt[] | undefined;
-    loading?: boolean | undefined;
-    headBackground?: string | undefined;
-    background?: string | undefined;
-    positionLimit?: IPositionLimit | undefined;
-    sizeLimit?: ISize | undefined;
-    startPosition?: IStartPosition | undefined;
-    userPhoto?: string | undefined;
-    name?: string | undefined;
-    placeholder?: string | undefined;
-    logo?: string | undefined;
-    scrollLoading?: boolean | undefined;
-    scrollLoadingEnd?: boolean | undefined;
-    alert?: string | undefined;
-    models?: IModel[] | undefined;
-    model?: string | undefined;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<IProps>>> & {
     "onChoose-prompt"?: ((prompt: IPrompt) => any) | undefined;
     onClear?: (() => any) | undefined;
     onStop?: (() => any) | undefined;
     onSend?: ((val: string) => any) | undefined;
+    "onAi-click"?: ((val: string) => any) | undefined;
     "onScroll-load"?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
     "onUpdate:model"?: ((val: string) => any) | undefined;

package/dist/components/render-content.vue.d.ts

@@ -1,39 +1,34 @@
 import type { IMessage, IPrompt } from '../types/index';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+interface IProps {
     messages: IMessage[];
-    prompts?: IPrompt[] | undefined;
-    loading?: boolean | undefined;
-    background?: string | undefined;
-    userPhoto?: string | undefined;
-    placeholder?: string | undefined;
-    scrollLoading?: boolean | undefined;
-    scrollLoadingEnd?: boolean | undefined;
-    alert?: string | undefined;
-}>, {
+    prompts?: IPrompt[];
+    loading?: boolean;
+    background?: string;
+    userPhoto?: string;
+    placeholder?: string;
+    scrollLoading?: boolean;
+    scrollLoadingEnd?: boolean;
+    alert?: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
     background: string;
     scrollLoadingEnd: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    setInputMessage: (val: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "ai-click": (userInput: string) => void;
     send: (userInput: string) => void;
     "choose-prompt": (prompt: IPrompt) => void;
     stop: () => void;
     "scroll-load": () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
-    messages: IMessage[];
-    prompts?: IPrompt[] | undefined;
-    loading?: boolean | undefined;
-    background?: string | undefined;
-    userPhoto?: string | undefined;
-    placeholder?: string | undefined;
-    scrollLoading?: boolean | undefined;
-    scrollLoadingEnd?: boolean | undefined;
-    alert?: string | undefined;
-}>, {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
     background: string;
     scrollLoadingEnd: boolean;
 }>>> & {
     "onChoose-prompt"?: ((prompt: IPrompt) => any) | undefined;
     onStop?: (() => any) | undefined;
     onSend?: ((userInput: string) => any) | undefined;
+    "onAi-click"?: ((userInput: string) => any) | undefined;
     "onScroll-load"?: (() => any) | undefined;
 }, {
     background: string;