消息分享

AI 小鲸 v2.0 提供了完整的消息分享能力，支持用户选择对话中的消息并生成分享链接。分享功能由 ShareBusinessManager 负责业务逻辑，UIStateManager 管理选择模式的 UI 状态。

ChatBot 独立模式

在 ChatBot 独立使用时，内置了完整的分享流程，开箱即用。

分享流程

使用方法

vue

<template>
  <ChatBot
    ref="chatBotRef"
    url="/api/ai/assistant/"
    :enable-selection="isSelecting"
    :share-loading="isShareLoading"
    @request-share="onRequestShare"
    @confirm-share="onConfirmShare"
    @cancel-share="onCancelShare"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ChatBot } from '@blueking/ai-blueking';
import type { Message } from '@blueking/chat-x';

const chatBotRef = ref<InstanceType<typeof ChatBot> | null>(null);
const isSelecting = ref(false);
const isShareLoading = ref(false);

// 用户请求进入分享模式（来自 message-tools 的分享按钮）
const onRequestShare = () => {
  isSelecting.value = true;
};

// 用户确认分享
const onConfirmShare = async (messages: Message[]) => {
  isShareLoading.value = true;
  try {
    // 获取 chatHelper 实例调用分享 API
    const chatHelper = chatBotRef.value?.getChatHelper();
    if (!chatHelper) return;

    const sessionCode = chatHelper.session.current.value?.sessionCode;
    if (!sessionCode) return;

    const result = await chatHelper.message.shareMessages(sessionCode, messages);
    if (result) {
      const shareUrl = `${result.share_page}share-page/${result.share_token}`;
      await navigator.clipboard.writeText(shareUrl);
      console.log('分享链接已复制:', shareUrl);
    }
  } finally {
    isShareLoading.value = false;
    isSelecting.value = false;
  }
};

// 用户取消分享
const onCancelShare = () => {
  isSelecting.value = false;
};
</script>

AIBlueking 集成模式

在 AIBlueking 组件中，分享功能由 UIStateManager 和 ShareBusinessManager 协调工作，提供两个入口。

分享入口

Header 下拉菜单：通过 Header 的「更多」菜单中的「分享」选项触发
消息工具栏：每条消息右侧的工具栏中的「分享」按钮

使用方法

vue

<template>
  <AIBlueking
    :url="apiUrl"
    :dropdown-menu-config="{ showShare: true }"
    @share="onShare"
    @share-messages="onShareMessages"
    @transfer-messages="onTransferMessages"
  />
</template>

<script lang="ts" setup>
import AIBlueking from '@blueking/ai-blueking';
import '@blueking/ai-blueking/dist/vue3/style.css';

const apiUrl = '/api/ai/assistant/';

// Header 分享按钮点击
const onShare = () => {
  console.log('用户触发了分享操作');
};

// 分享消息完成（包含分享的消息 ID 列表）
const onShareMessages = (messageIds: string[]) => {
  console.log('分享的消息 IDs:', messageIds);
};

// 转发消息（用于跨会话转发场景）
const onTransferMessages = (messageIds: string[]) => {
  console.log('转发的消息 IDs:', messageIds);
};
</script>

内部协调流程

原子模式

如果需要完全自定义分享流程，可以手动管理选择状态和分享逻辑。

vue

<template>
  <div>
    <div class="toolbar">
      <button @click="enterShareMode">选择消息</button>
      <button v-if="isSelecting" @click="confirmShare" :disabled="selectedCount === 0">
        确认分享 ({{ selectedCount }})
      </button>
      <button v-if="isSelecting" @click="cancelShare">取消</button>
    </div>

    <ChatBot
      ref="chatBotRef"
      url="/api/ai/assistant/"
      :enable-selection="isSelecting"
      :share-loading="isShareLoading"
      @confirm-share="handleConfirmShare"
      @cancel-share="handleCancelShare"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ChatBot } from '@blueking/ai-blueking';
import type { Message } from '@blueking/chat-x';

const chatBotRef = ref<InstanceType<typeof ChatBot> | null>(null);
const isSelecting = ref(false);
const isShareLoading = ref(false);
const selectedMessages = ref<Message[]>([]);

const selectedCount = computed(() => selectedMessages.value.length);

const enterShareMode = () => {
  isSelecting.value = true;
};

const confirmShare = () => {
  // 触发 ChatBot 的确认分享流程
  // ChatBot 会 emit confirm-share 事件，携带选中的消息
};

const handleConfirmShare = async (messages: Message[]) => {
  selectedMessages.value = messages;
  isShareLoading.value = true;

  try {
    const chatHelper = chatBotRef.value?.getChatHelper();
    if (!chatHelper) return;

    const sessionCode = chatHelper.session.current.value?.sessionCode;
    if (!sessionCode) return;

    // 调用分享 API
    const result = await chatHelper.message.shareMessages(sessionCode, messages);
    if (result) {
      const shareUrl = `${result.share_page}share-page/${result.share_token}`;
      // 自定义分享行为（如弹窗展示、复制到剪贴板等）
      await navigator.clipboard.writeText(shareUrl);
      alert(`分享链接已复制: ${shareUrl}`);
    }
  } finally {
    isShareLoading.value = false;
    isSelecting.value = false;
    selectedMessages.value = [];
  }
};

const handleCancelShare = () => {
  isSelecting.value = false;
  selectedMessages.value = [];
};

const cancelShare = () => {
  isSelecting.value = false;
  selectedMessages.value = [];
};
</script>

Props

Prop	类型	默认值	说明
`enableSelection`	`boolean`	`false`	是否启用消息选择模式，启用后消息列表显示勾选框
`shareLoading`	`boolean`	`false`	分享操作是否正在加载中，用于显示加载状态

Events

事件	参数	说明
`request-share`	—	用户从消息工具栏点击分享按钮，请求进入选择模式
`confirm-share`	`messages: Message[]`	用户确认分享，携带选中的消息列表
`cancel-share`	—	用户取消分享，退出选择模式
`share-messages`	`messageIds: string[]`	（AIBlueking）分享完成，携带分享的消息 ID 列表
`transfer-messages`	`messageIds: string[]`	（AIBlueking）转发消息，携带消息 ID 列表
`share`	—	（AIBlueking）Header 分享按钮点击

ShareBusinessManager

ShareBusinessManager 是分享业务管理器，封装了分享的核心逻辑：

typescript

class ShareBusinessManager {
  constructor(messageModule: IMessageModule, sessionModule: ISessionModule);

  /**
   * 分享消息
   * @param messages 要分享的消息列表
   * @returns 分享结果 { shareUrl, userMessageIds }
   */
  async shareMessages(messages: IMessage[]): Promise<ShareResult>;
}

interface ShareResult {
  shareUrl: string;           // 分享链接
  userMessageIds: string[];   // 分享的用户消息 ID 列表
}

注意事项：

ShareBusinessManager 只负责调用 API 和构造分享链接，不管理 UI 状态（loading、Toast 等）
UI 状态由调用方（组件层）负责管理
分享 API 会在 chat-helper 层自动过滤只保留 role === User 的消息 ID

消息分享 ​

ChatBot 独立模式 ​

分享流程 ​

使用方法 ​

AIBlueking 集成模式 ​

分享入口 ​

使用方法 ​

内部协调流程 ​

原子模式 ​

Props ​

Events ​

ShareBusinessManager ​

消息分享

ChatBot 独立模式

分享流程

使用方法

AIBlueking 集成模式

分享入口

使用方法

内部协调流程

原子模式

Props

Events

ShareBusinessManager