@blueking/ai-ui-sdk 0.0.15-beta.4 → 0.0.15-beta.40

package/dist/assets/svg/picture-fail.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><g ><path fill="#979BA5" d="M208 198.88l168 0-7.84 86.08 51.68 87.36L382.4 486.72l114.88-98.4 7.84-112 41.76-78.08H824.64a56 56 0 0 1 51.68 52.8V721.6L747.04 555.36a40.96 40.96 0 0 0-67.36-5.12l-145.76 146.88L384 502.56c-16-20.96-41.76-20.96-62.56 0L150.56 712.96 152 252.48A54.4 54.4 0 0 1 208 198.88M823.84 145.44l-315.04 0-48 134.4 10.08 96.8L416 432l32.96-64-37.28-96 33.76-128-242.56 1.44A106.24 106.24 0 0 0 96 248.16l2.08 524.8A104.64 104.64 0 0 0 200.16 880h624A104.64 104.64 0 0 0 928 775.2V250.24a104.96 104.96 0 0 0-104.16-104.8"/><path fill="#979BA5" d="M569.28 405.44a88.32 88.32 0 0 0 43.04 75.52 84.64 84.64 0 0 0 86.88 0 86.72 86.72 0 0 0 43.04-75.52 88.64 88.64 0 0 0-43.04-75.52 85.44 85.44 0 0 0-86.88 0 88.64 88.64 0 0 0-43.04 75.52"/></g></svg>

package/dist/common/util.d.ts

@@ -51,3 +51,13 @@ export declare const processPromptTemplate: (prompt: string, selectedText: strin
  * @returns 全屏的父元素
  */
 export declare const getFullScreenWrap: (target: HTMLElement) => HTMLElement | null;
+/**
+ * 获取用户头像
+ * @param username 用户名
+ * @returns 头像地址
+ */
+export declare function getUserImageUrl(username?: string): any;
+/**
+ * 处理头像加载失败的场景
+ */
+export declare function handleImageError(event: Event): void;

package/dist/common/util.js

@@ -1,4 +1,7 @@
 import { Message } from 'bkui-vue';
+import { emitEvent } from '../event/index.js';
+import { EventType } from '../types/enum.js';
+import userImageUrl from '../assets/images/user.png';
 /**
 * 节流，每隔一段时间执行
 * @param {*} fn 需要执行的函数
@@ -141,3 +144,34 @@ export const handleCopy = (text)=>{
     }
     return parentElement;
 };
+/**
+ * 获取用户头像
+ * @param username 用户名
+ * @returns 头像地址
+ */ export function getUserImageUrl(username = '') {
+    var _window_BK_USER_IMAGE_URL;
+    if (username === 'admin') {
+        return userImageUrl;
+    }
+    return ((_window_BK_USER_IMAGE_URL = window.BK_USER_IMAGE_URL) === null || _window_BK_USER_IMAGE_URL === void 0 ? void 0 : _window_BK_USER_IMAGE_URL.replace('{placeholder}', username)) || userImageUrl;
+}
+/**
+ * 处理头像加载失败的场景
+ */ export function handleImageError(event) {
+    const { target } = event;
+    if (target.naturalWidth === 0) {
+        // 使用fetch API检查图片URL
+        fetch(target.src, {
+            method: 'HEAD',
+            credentials: 'include',
+            redirect: 'manual'
+        }).then((response)=>{
+            if (response.type === 'opaqueredirect') {
+                // 检测到重定向，调用登录方法
+                emitEvent(EventType.Unlogin);
+            }
+        }).catch((error)=>{
+            console.error('Failed to check image status:', error);
+        });
+    }
+}

package/dist/component/render-image/index.script.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = [
+    "src"
+];
+import fallbackPng from '../../assets/svg/picture-fail.svg';
+export default /*@__PURE__*/ _defineComponent({
+    props: {
+        url: {},
+        size: {}
+    },
+    setup (__props) {
+        const handleImageError = (e)=>{
+            const target = e.target;
+            target.src = fallbackPng;
+        };
+        return (_ctx, _cache)=>{
+            return /http(s)?:\/\//.test(_ctx.url) ? (_openBlock(), _createElementBlock("img", _mergeProps({
+                key: 0
+            }, _ctx.$attrs, {
+                src: _ctx.url,
+                style: {
+                    width: `${_ctx.size}px`,
+                    height: `${_ctx.size}px`
+                },
+                onError: handleImageError
+            }), null, 16 /* FULL_PROPS */ , _hoisted_1)) : (_openBlock(), _createElementBlock("i", _mergeProps({
+                key: 1
+            }, _ctx.$attrs, {
+                class: `ai-ui-sdk-icon ai-ui-sdk-${_ctx.url}`,
+                style: {
+                    fontSize: `${_ctx.size}px`
+                }
+            }), null, 16 /* FULL_PROPS */ ));
+        };
+    }
+});

package/dist/component/render-image/index.vue.d.ts

@@ -0,0 +1,6 @@
+interface IProps {
+    url: string;
+    size: number;
+}
+declare const _default: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/component/render-image/index.vue.js

@@ -0,0 +1,3 @@
+import script from './index.script.vue.js';
+script.__file = "./src/component/render-image/index.vue";
+export default script;

package/dist/component/render-input/index.script.vue.js

@@ -0,0 +1,210 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { normalizeClass as _normalizeClass, createVNode as _createVNode, createElementVNode as _createElementVNode, unref as _unref, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+    class: "quill-container"
+};
+import { bkTooltips as vBkTooltips } from 'bkui-vue';
+import { Close } from 'bkui-vue/lib/icon';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import RenderDrag from './render-drag.vue.js';
+import RenderQuill from './render-quill.vue.js';
+import { SessionContentRole } from '../../types/enum.js';
+export default /*@__PURE__*/ _defineComponent({
+    props: {
+        isChatting: {
+            type: Boolean
+        },
+        width: {},
+        dragPosition: {},
+        id: {},
+        supportTools: {
+            type: Boolean
+        },
+        supportImage: {
+            type: Boolean
+        },
+        sessionId: {},
+        placeholder: {},
+        sessionContents: {}
+    },
+    emits: [
+        "send"
+    ],
+    setup (__props, { expose: __expose, emit: __emit }) {
+        const props = __props;
+        const emit = __emit;
+        const quillRef = ref();
+        const textHeight = ref(120);
+        const defaultHeight = ref(120);
+        const prompt = ref('');
+        const isUploadingImage = ref(false);
+        const disableTips = computed(()=>{
+            if (!prompt.value) {
+                return '请输入 Prompt 后再发送';
+            }
+            if (!prompt.value.trim()) {
+                return '输入的 Prompt 不能只包含空格';
+            }
+            if (props.isChatting) {
+                return '当前会话进行中，请等待会话结束后再发送';
+            }
+            if (isUploadingImage.value) {
+                return '正在上传图片，请等待图片上传完成后再发送';
+            }
+            return '';
+        });
+        const placeholder = computed(()=>{
+            let placeholder = '请输入 Prompt';
+            if (props.supportImage) {
+                placeholder += '\n您可以粘贴并发送图片，以查询图片相关问题';
+            }
+            if (props.supportTools) {
+                placeholder += '\n您可以键入“@”来快速获取该会话绑定的“知识和工具”名称来进行问答';
+            }
+            if (props.placeholder) {
+                placeholder = props.placeholder;
+            }
+            return placeholder;
+        });
+        const autoFocus = ()=>{
+            nextTick(()=>{
+                var _quillRef_value;
+                (_quillRef_value = quillRef.value) === null || _quillRef_value === void 0 ? void 0 : _quillRef_value.focus();
+            });
+        };
+        const handleChangeTextHeight = ()=>{
+            nextTick(()=>{
+                const elm = document.querySelector('.send-prompt-container .ql-editor');
+                if ((elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > defaultHeight.value && prompt.value) {
+                    textHeight.value = elm.scrollHeight <= 400 ? elm.scrollHeight : 400;
+                } else {
+                    textHeight.value = defaultHeight.value;
+                }
+            });
+        };
+        // 从历史里面选择文本
+        const handleChooseHistory = ()=>{
+            var _props_sessionContents;
+            const userSessionContents = ((_props_sessionContents = props.sessionContents) === null || _props_sessionContents === void 0 ? void 0 : _props_sessionContents.filter((sessionContent)=>[
+                    SessionContentRole.User,
+                    SessionContentRole.Role,
+                    SessionContentRole.UserImage
+                ].includes(sessionContent.role))) || [];
+            const { content } = userSessionContents[userSessionContents.length - 1];
+            if (content !== prompt.value) {
+                var _quillRef_value;
+                (_quillRef_value = quillRef.value) === null || _quillRef_value === void 0 ? void 0 : _quillRef_value.setText(content);
+            }
+        };
+        const handleKeyDown = (event)=>{
+            var _props_sessionContents;
+            // 数据
+            const isEmpty = prompt.value === '' || prompt.value === undefined;
+            // 状态
+            const isSpecialEnter = event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.isComposing;
+            const isShowUpHistory = event.key === 'ArrowUp' && ((_props_sessionContents = props.sessionContents) === null || _props_sessionContents === void 0 ? void 0 : _props_sessionContents.length) && isEmpty;
+            if (isSpecialEnter) {
+                event.preventDefault();
+                handleSendPrompt();
+            }
+            if (isShowUpHistory) {
+                handleChooseHistory();
+            }
+        };
+        const handleChangeInput = (val)=>{
+            prompt.value = val;
+        };
+        const handleClearUserPrompt = ()=>{
+            var _quillRef_value;
+            (_quillRef_value = quillRef.value) === null || _quillRef_value === void 0 ? void 0 : _quillRef_value.setText('');
+        };
+        const handleSetPrompt = (val)=>{
+            var _quillRef_value;
+            (_quillRef_value = quillRef.value) === null || _quillRef_value === void 0 ? void 0 : _quillRef_value.setText(val);
+        };
+        const handleSendPrompt = ()=>{
+            var // 清空
+            _quillRef_value;
+            // 没内容或执行中不做操作
+            if (disableTips.value) return;
+            // 发送
+            emit('send', prompt.value);
+            (_quillRef_value = quillRef.value) === null || _quillRef_value === void 0 ? void 0 : _quillRef_value.setText('');
+        };
+        watch(()=>prompt.value, (val)=>{
+            handleChangeTextHeight();
+        });
+        onMounted(autoFocus);
+        __expose({
+            handleSetPrompt
+        });
+        return (_ctx, _cache)=>{
+            return _openBlock(), _createElementBlock("section", {
+                class: _normalizeClass([
+                    'send-prompt-container',
+                    _ctx.$attrs.class
+                ]),
+                style: _normalizeStyle({
+                    '--text-height': textHeight.value + 'px',
+                    '--default-height': defaultHeight.value + 'px',
+                    '--textarea-bottom': -textHeight.value + 'px'
+                })
+            }, [
+                _createElementVNode("section", _hoisted_1, [
+                    _createVNode(RenderQuill, {
+                        "is-uploading-image": isUploadingImage.value,
+                        "onUpdate:isUploadingImage": _cache[0] || (_cache[0] = ($event)=>isUploadingImage.value = $event),
+                        value: prompt.value,
+                        placeholder: placeholder.value,
+                        "session-id": _ctx.sessionId,
+                        "support-image": _ctx.supportImage,
+                        class: _normalizeClass({
+                            'send-prompt': true
+                        }),
+                        ref_key: "quillRef",
+                        ref: quillRef,
+                        onKeydown: handleKeyDown,
+                        onChange: handleChangeInput
+                    }, null, 8 /* PROPS */ , [
+                        "is-uploading-image",
+                        "value",
+                        "placeholder",
+                        "session-id",
+                        "support-image"
+                    ])
+                ]),
+                _withDirectives(_createElementVNode("i", {
+                    class: _normalizeClass({
+                        'ai-ui-sdk-icon ai-ui-sdk-fasong': true,
+                        'disable': disableTips.value
+                    }),
+                    onMousedown: handleSendPrompt
+                }, null, 34 /* CLASS, NEED_HYDRATION */ ), [
+                    [
+                        _unref(vBkTooltips),
+                        {
+                            content: disableTips.value,
+                            disabled: !disableTips.value
+                        }
+                    ]
+                ]),
+                prompt.value ? (_openBlock(), _createBlock(_unref(Close), {
+                    key: 0,
+                    class: "show-clear-only-hover bk-input--clear-icon bk-input--suffix-icon clear-icon",
+                    onClick: handleClearUserPrompt
+                })) : _createCommentVNode("v-if", true),
+                _createVNode(RenderDrag, {
+                    "default-height": defaultHeight.value,
+                    "onUpdate:defaultHeight": _cache[1] || (_cache[1] = ($event)=>defaultHeight.value = $event),
+                    "text-height": textHeight.value,
+                    "onUpdate:textHeight": _cache[2] || (_cache[2] = ($event)=>textHeight.value = $event),
+                    position: _ctx.dragPosition
+                }, null, 8 /* PROPS */ , [
+                    "default-height",
+                    "text-height",
+                    "position"
+                ])
+            ], 6 /* CLASS, STYLE */ );
+        };
+    }
+});

package/dist/component/render-input/index.vue.css

@@ -0,0 +1,124 @@
+
+.send-prompt-container[data-v-27s3rhz4] {
+  width: 800px;
+  z-index: 1501;
+  overflow: visible;
+  position: relative;
+}
+.send-prompt-container[data-v-27s3rhz4] .textarea-list {
+    bottom: var(--textarea-bottom);
+}
+.send-prompt-container:hover .clear-icon[data-v-27s3rhz4] {
+      display: inline-flex !important;
+}
+.quill-container[data-v-27s3rhz4] {
+  background: #fff;
+  box-shadow: 0 0 6px 0 #0000001a;
+  border-radius: 4px;
+  box-sizing: border-box !important;
+  border: 1px solid transparent;
+}
+.quill-container.active[data-v-27s3rhz4] {
+    border: 1px solid #3A84FF !important;
+}
+.quill-container[data-v-27s3rhz4]:has(.ql-editor:focus) {
+    border: 1px solid #3A84FF !important;
+}
+.send-prompt[data-v-27s3rhz4] {
+  width: 800px;
+  border: 1px solid transparent;
+  flex-direction: row;
+  height: var(--default-height);
+  min-height: 50px;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid transparent !important;
+}
+.send-prompt[data-v-27s3rhz4] .content-input-wrapper {
+    padding: 0 !important;
+    height: 100% !important;
+}
+.send-prompt[data-v-27s3rhz4] .auto-textarea-wrapper {
+    height: 100% !important;
+}
+.send-prompt[data-v-27s3rhz4] .v-note-panel {
+    border-radius: 4px;
+}
+.send-prompt[data-v-27s3rhz4] .scroll-style {
+    overflow-y: hidden !important;
+}
+.send-prompt[data-v-27s3rhz4] .auto-textarea-block {
+    display: none;
+}
+.send-prompt[data-v-27s3rhz4]:has(.ql-editor:focus) {
+    height: var(--text-height);
+}
+.ai-ui-sdk-fasong[data-v-27s3rhz4] {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  border-radius: 2px;
+  font-size: 20px;
+  cursor: pointer;
+  color: #979BA5;
+  position: absolute;
+  right: 6px;
+  bottom: 35px;
+  text-align: center;
+  z-index: 1501;
+}
+.ai-ui-sdk-fasong[data-v-27s3rhz4]:hover {
+    background: #F0F5FF;
+    color: #3a84ff;
+}
+.ai-ui-sdk-fasong.disable[data-v-27s3rhz4] {
+    color: #dcdee5;
+    cursor: not-allowed;
+}
+.clear-icon[data-v-27s3rhz4] {
+  display: none !important;
+  position: absolute;
+  bottom: 42px;
+  right: 28px;
+  height: 14px;
+  z-index: 1501;
+}
+
+
+.input-search {
+  margin: 8px 12px 0;
+  width: calc(100% - 24px);
+  position: relative;
+  border-bottom: 1px solid #eaebf0 !important;
+}
+.input-search:before {
+    content: '';
+    position: absolute;
+    left: -13px;
+    top: -9px;
+    height: 42px;
+    width: 1px;
+    background-color: #DCDEE5;
+}
+.input-search::after {
+    content: '';
+    position: absolute;
+    right: -13px;
+    top: -9px;
+    height: 42px;
+    width: 1px;
+    background-color: #DCDEE5;
+}
+.input-search.is-focused, .input-search:hover {
+  background-color: transparent !important;
+}
+.input-search.is-focused .bk-input--text, .input-search:hover .bk-input--text {
+    background-color: transparent !important;
+}
+.search-icon {
+  font-size: 18px;
+  color: #979BA5;
+}
+.prompt-tips {
+  max-width: 300px;
+}

package/dist/component/render-input/index.vue.d.ts

@@ -0,0 +1,20 @@
+import type { ISessionContent } from '@/types/session';
+interface IProps {
+    isChatting: boolean;
+    width: number | string;
+    dragPosition?: string;
+    id: number | string;
+    supportTools: boolean;
+    supportImage: boolean;
+    sessionId: string;
+    placeholder?: string;
+    sessionContents?: ISessionContent[];
+}
+declare const _default: import("vue").DefineComponent<IProps, {
+    handleSetPrompt: (val: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    send: (prompt: string) => any;
+}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{
+    onSend?: ((prompt: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/component/render-input/index.vue.js

@@ -0,0 +1,5 @@
+import script from './index.script.vue.js';
+script.__scopeId = "data-v-27s3rhz4";
+script.__file = "./src/component/render-input/index.vue";
+import './index.vue.css';
+export default script;

package/dist/component/render-input/render-drag.script.vue.js

@@ -0,0 +1,61 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { useMouseDrag } from '../../hooks/use-mouse-drag.js';
+export default /*@__PURE__*/ _defineComponent({
+    props: {
+        defaultHeight: {},
+        textHeight: {},
+        position: {}
+    },
+    emits: [
+        "update:defaultHeight",
+        "update:textHeight"
+    ],
+    setup (__props, { emit: __emit }) {
+        const props = __props;
+        const emits = __emit;
+        const handleMouseDrag = (positionInfo)=>{
+            let defaultHeight = props.position === 'bottom' ? props.defaultHeight + positionInfo.singleMoveDistance.y : props.defaultHeight - positionInfo.singleMoveDistance.y;
+            if (defaultHeight >= 400) {
+                defaultHeight = 400;
+            }
+            if (defaultHeight <= 84) {
+                defaultHeight = 84;
+            }
+            emits('update:defaultHeight', defaultHeight);
+            emits('update:textHeight', defaultHeight);
+        };
+        const { isDragging } = useMouseDrag([
+            'send-tool-container',
+            'ai-ui-sdk-gengduo'
+        ], handleMouseDrag);
+        return (_ctx, _cache)=>{
+            return _ctx.position === 'bottom' ? (_openBlock(), _createElementBlock("span", {
+                key: 0,
+                class: _normalizeClass([
+                    'send-tool-container',
+                    'bottom',
+                    {
+                        'is-dragging': _unref(isDragging)
+                    }
+                ])
+            }, _cache[0] || (_cache[0] = [
+                _createElementVNode("i", {
+                    class: "ai-ui-sdk-icon ai-ui-sdk-gengduo"
+                }, null, -1 /* HOISTED */ )
+            ]), 2 /* CLASS */ )) : (_openBlock(), _createElementBlock("span", {
+                key: 1,
+                class: _normalizeClass([
+                    'send-tool-container',
+                    {
+                        'is-dragging': _unref(isDragging)
+                    }
+                ])
+            }, _cache[1] || (_cache[1] = [
+                _createElementVNode("i", {
+                    class: "ai-ui-sdk-icon ai-ui-sdk-gengduo"
+                }, null, -1 /* HOISTED */ )
+            ]), 2 /* CLASS */ ));
+        };
+    }
+});

package/dist/component/render-input/render-drag.vue.css

@@ -0,0 +1,28 @@
+
+.send-tool-container[data-v-i732o63a] {
+  position: absolute;
+  left: 50%;
+  top: 16px;
+  transform: translateX(-50%);
+  height: 1.5px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 14px;
+  cursor: row-resize;
+  z-index: 15001;
+}
+.send-tool-container.bottom[data-v-i732o63a] {
+    bottom: 0;
+    top: auto;
+}
+.send-tool-container.bottom .ai-ui-sdk-gengduo[data-v-i732o63a] {
+      margin-top: -10px;
+}
+.send-tool-container[data-v-i732o63a]:hover, .send-tool-container.is-dragging[data-v-i732o63a] {
+    background: #3A84FF;
+}
+.send-tool-container .ai-ui-sdk-gengduo[data-v-i732o63a] {
+    margin-top: -2px;
+    color: #63656E;
+}

package/dist/component/render-input/render-drag.vue.d.ts

@@ -0,0 +1,13 @@
+interface IProps {
+    defaultHeight: number;
+    textHeight: number;
+    position?: string;
+}
+declare const _default: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:defaultHeight": (defaultHeight: number) => any;
+    "update:textHeight": (textHeight: number) => any;
+}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{
+    "onUpdate:defaultHeight"?: ((defaultHeight: number) => any) | undefined;
+    "onUpdate:textHeight"?: ((textHeight: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/component/render-input/render-drag.vue.js

@@ -0,0 +1,5 @@
+import script from './render-drag.script.vue.js';
+script.__scopeId = "data-v-i732o63a";
+script.__file = "./src/component/render-input/render-drag.vue";
+import './render-drag.vue.css';
+export default script;