@vunk/plus 1.2.2 → 1.3.1

package/components/chat-independent/index.css

@@ -0,0 +1,47 @@
+.vk-chat-independent-main__bubbles {
+   padding: 8px 8px 0 12px;
+   height: 100%;
+}
+.vk-chat-independent-main .el-bubble-content-wrapper .el-bubble-content-borderless{
+  border: none;
+}
+.vk-chat-independent-footer{
+  display: flex;
+  align-items: center;
+  padding: var(--gap-s, 6px);
+  background: var(--el-fill-color);
+}
+.vk-chat-independent-footer .vk-recorder-container{
+  flex-basis: 100%;
+}
+.vk-chat-independent-footer .el-avatar{
+  cursor: pointer;
+  align-self: flex-end;
+}
+.vk-chat-independent-footer .ant-sender{
+  border-radius: var(--el-border-radius-base, 4px);
+}
+.vk-chat-independent-footer .ant-sender-content{
+  padding: 4px;
+  /* border-radius: 0; */
+}
+.vk-chat-independent{
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.vk-chat-independent-main__duplex{
+  height: 100%;
+}
+.vk-chat-independent-main{
+  z-index: 1;
+  inset: 0;
+  position: absolute;
+}
+.vk-chat-independent-background{
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}

package/components/chat-independent/index.d.ts

@@ -0,0 +1,4 @@
+import VkChatIndependent from './src/index.vue';
+export * as __VkChatIndependent from './src/types';
+export { VkChatIndependent, };
+export default VkChatIndependent;

package/components/chat-independent/index.mjs

@@ -0,0 +1,184 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, withDirectives, vShow, renderSlot, nextTick } from 'vue';
+import { useAgentChat } from '@vunk/plus/components/agent-chat-provider';
+import { VkBubbleList } from '@vunk/plus/components/bubble-list';
+import { VkRecorderButton } from '@vunk/plus/components/recorder-button';
+import { VkSender } from '@vunk/plus/components/sender';
+import { VkKeyboardAvatar } from '@vunk/plus/icons/keyboard';
+import { VkVoiceAvatar } from '@vunk/plus/icons/voice';
+import { VkDuplex } from '@vunk/core';
+import { VkRendererData } from '@vunk/core/components/renderer-data';
+import { useDataComputed, useDeferred } from '@vunk/core/composables';
+
+var InputType = /* @__PURE__ */ ((InputType2) => {
+  InputType2["Voice"] = "voice";
+  InputType2["Text"] = "text";
+  return InputType2;
+})(InputType || {});
+
+const props = {
+  /**
+   * @description BubbleList渲染时数据, 受控于setData
+   */
+  data: {
+    type: Object
+  },
+  speechToText: {
+    type: Function
+  },
+  textToSpeech: {
+    type: Function
+  }
+};
+const emits = {
+  setData: (e) => e
+};
+
+const _hoisted_1 = { class: "vk-chat-independent" };
+const _hoisted_2 = { class: "vk-chat-independent-main__bubbles" };
+const _hoisted_3 = { class: "vk-chat-independent-footer" };
+const _hoisted_4 = { class: "vk-chat-independent-background" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkChatIndependent"
+  },
+  __name: "index",
+  props: props,
+  emits: emits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const [bubbleData, setBubbleData] = useDataComputed({}, props, emit);
+    const mainRef = ref();
+    const inputType = ref(InputType.Text);
+    const content = ref("");
+    const bubbleListDef = useDeferred();
+    const bubbleListReslove = bubbleListDef.resolve;
+    const { simplicity } = useAgentChat();
+    const { items: bubbleItems, onRequest } = simplicity;
+    const lastBubbleData = computed(() => {
+      const key = bubbleItems.value.at(-1)?.key;
+      if (key && bubbleData.value[key]) {
+        return bubbleData.value[key];
+      }
+      return {};
+    });
+    const senderDisabled = computed(() => {
+      if (lastBubbleData.value.error === true) {
+        return false;
+      }
+      return bubbleItems.value.at(-1)?.loading === true || lastBubbleData.value.completed === false;
+    });
+    function onSubmit(nextContent) {
+      if (!nextContent)
+        return;
+      onRequest(nextContent);
+      nextTick(() => {
+        content.value = "";
+      });
+      setTimeout(() => {
+        bubbleListDef.value?.scrollToBottom();
+      }, 400);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode(
+          "div",
+          {
+            ref_key: "mainRef",
+            ref: mainRef,
+            class: "vk-chat-independent-main"
+          },
+          [
+            createVNode(unref(VkDuplex), {
+              "with-flex": "one",
+              class: "vk-chat-independent-main__duplex"
+            }, {
+              one: withCtx(() => [
+                createVNode(unref(VkRendererData), {
+                  data: unref(bubbleData),
+                  onSetData: unref(setBubbleData)
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_2, [
+                      createVNode(unref(VkBubbleList), {
+                        "el-ref": unref(bubbleListReslove),
+                        items: unref(bubbleItems),
+                        "text-to-speech": _ctx.textToSpeech
+                      }, null, 8, ["el-ref", "items", "text-to-speech"])
+                    ])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["data", "onSetData"])
+              ]),
+              two: withCtx(() => [
+                createElementVNode("div", _hoisted_3, [
+                  withDirectives(createVNode(
+                    unref(VkKeyboardAvatar),
+                    {
+                      size: 40,
+                      onClick: _cache[0] || (_cache[0] = ($event) => inputType.value = unref(InputType).Text)
+                    },
+                    null,
+                    512
+                    /* NEED_PATCH */
+                  ), [
+                    [vShow, inputType.value === unref(InputType).Voice]
+                  ]),
+                  withDirectives(createVNode(
+                    unref(VkVoiceAvatar),
+                    {
+                      size: 40,
+                      onClick: _cache[1] || (_cache[1] = ($event) => inputType.value = unref(InputType).Voice)
+                    },
+                    null,
+                    512
+                    /* NEED_PATCH */
+                  ), [
+                    [vShow, inputType.value === unref(InputType).Text]
+                  ]),
+                  withDirectives(createVNode(unref(VkRecorderButton), {
+                    "append-to": mainRef.value,
+                    disabled: senderDisabled.value,
+                    "speech-to-text": _ctx.speechToText,
+                    "submit-to-text": true,
+                    onSubmitText: onSubmit
+                  }, null, 8, ["append-to", "disabled", "speech-to-text"]), [
+                    [vShow, inputType.value === unref(InputType).Voice]
+                  ]),
+                  withDirectives(createVNode(unref(VkSender), {
+                    modelValue: content.value,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => content.value = $event),
+                    "auto-size": true,
+                    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+                    disabled: senderDisabled.value,
+                    onSubmit
+                  }, null, 8, ["modelValue", "disabled"]), [
+                    [vShow, inputType.value === unref(InputType).Text]
+                  ])
+                ])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          512
+          /* NEED_PATCH */
+        ),
+        createElementVNode("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "background")
+        ])
+      ]);
+    };
+  }
+});
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+_sfc_main.install = (app) => {
+  app.component(_sfc_main.name || "VkChatIndependent", _sfc_main);
+};
+
+export { _sfc_main as VkChatIndependent, types as __VkChatIndependent, _sfc_main as default };

package/components/chat-independent/src/const.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 输入的两种方式 语音和文本
+ */
+export declare enum InputType {
+    /**
+     * 语音
+     */
+    Voice = "voice",
+    /**
+     * 文本
+     */
+    Text = "text"
+}

package/components/chat-independent/src/ctx.d.ts

@@ -0,0 +1,20 @@
+import type { __VkBubbleList } from '@vunk/plus/components/bubble-list';
+import type { SetDataEvent } from '@vunk/core';
+import type { PropType } from 'vue';
+export declare const props: {
+    /**
+     * @description BubbleList渲染时数据, 受控于setData
+     */
+    data: {
+        type: PropType<import("../../bubble-templates/src/types").RenderData>;
+    };
+    speechToText: {
+        type: PropType<import("./types").SpeechToText>;
+    };
+    textToSpeech: {
+        type: PropType<import("./types").TextToSpeech>;
+    };
+};
+export declare const emits: {
+    setData: (e: SetDataEvent) => SetDataEvent;
+};