qianzhi-message/TUIKit-Homemaking/components/TUIChat/message-input-toolbar/index.vue

<template>
  <div
    :class="[
      'message-input-toolbar',
      'message-input-toolbar-h5',
      'message-input-toolbar-uni',
    ]"
  >
    <div v-if="props.displayType === 'emojiPicker'">
      <EmojiPickerDialog />
    </div>
    <div v-else>
      <swiper
        :class="['message-input-toolbar-swiper']"
        :indicator-dots="isSwiperIndicatorDotsEnable"
        :autoplay="false"
        :circular="false"
      >
        <swiper-item
          :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]"
        >
          <ImageUpload imageSourceType="camera" />
          <ImageUpload imageSourceType="album" />
          <!-- <OtgoingCAll></OtgoingCAll> -->
          <!-- <VideoUpload videoSourceType="album" />
          <VideoUpload videoSourceType="camera" /> -->
          <!-- <template v-if="currentExtensionList[0]">
            <div
              v-for="(extension, index) in currentExtensionList.slice(0, 4)"
              :key="index"
            >
              <ToolbarItemContainer
                v-if="extension"
                :iconFile="genExtensionIcon(extension)"
                :title="genExtensionText(extension)"
                iconWidth="25px"
                iconHeight="25px"
                :needDialog="false"
                @onIconClick="onExtensionClick(extension)"
              />
            </div>
          </template> -->
          <!-- <Evaluate
            v-if="currentExtensionList.length < 4"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          /> -->
          <!-- <Words @onDialogPopupShowOrHide="handleSwiperDotShow" />
           -->
          <server :infoData="props.infoData" />
        </swiper-item>
        <swiper-item
          v-if="currentExtensionList[2] && currentExtensionList.length >= 3"
          :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]"
        >
          <div v-for="(extension, index) in currentExtensionList.slice(4)" :key="index">
            <ToolbarItemContainer
              v-if="extension"
              :iconFile="genExtensionIcon(extension)"
              :title="genExtensionText(extension)"
              iconWidth="25px"
              iconHeight="25px"
              :needDialog="false"
              @onIconClick="onExtensionClick(extension)"
            />
          </div>
          <Evaluate
            v-if="currentExtensionList.length >= 4"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
          <Words
            v-if="currentExtensionList.length >= 3"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          />
        </swiper-item>
      </swiper>
    </div>
    <UserSelector
      ref="userSelectorRef"
      :type="selectorShowType"
      :currentConversation="currentConversation"
      :isGroup="isGroup"
      @submit="onUserSelectorSubmit"
      @cancel="onUserSelectorCancel"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onUnmounted, onMounted } from "../../../adapter-vue";
import TUIChatEngine, {
  IConversationModel,
  TUIStore,
  StoreName,
} from "@tencentcloud/chat-uikit-engine";
import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
import ImageUpload from "./image-upload/index.vue";
import VideoUpload from "./video-upload/index.vue";
import OtgoingCAll from "./otgoing-call/index.vue";
import server from "./server/index.vue";
import Evaluate from "./evaluate/index.vue";
import Words from "./words/index.vue";
import ToolbarItemContainer from "./toolbar-item-container/index.vue";
import EmojiPickerDialog from "./emoji-picker/emoji-picker-dialog.vue";
import UserSelector from "./user-selector/index.vue";
import TUIChatConfig from "../config";
import { enableSampleTaskStatus } from "../../../utils/enableSampleTaskStatus";
import { ToolbarDisplayType } from "../../../interface";

interface IProps {
  displayType: ToolbarDisplayType;
  infoData: Object;
}

const props = withDefaults(defineProps<IProps>(), {});

const currentConversation = ref<IConversationModel>();
const isGroup = ref<boolean>(false);
const selectorShowType = ref<string>("");
const userSelectorRef = ref();
const currentUserSelectorExtension = ref<ExtensionInfo | null>();
const currentExtensionList = ref<ExtensionInfo[]>([]);
const isSwiperIndicatorDotsEnable = ref<boolean>(false);

// extensions
const extensionList: ExtensionInfo[] = [
  ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID),
];

const getExtensionList = (conversationID: string) => {
  if (!conversationID) {
    // uniapp build ios app has null in last index need to filter
    return (currentExtensionList.value = extensionList.filter((extension) => extension));
  }
  const chatType = TUIChatConfig.getChatType();
  const options: any = {
    chatType,
  };
  // 向下兼容，callkit 没有chatType 判断时，使用 filterVoice、filterVideo 过滤
  if (chatType === "customerService") {
    options.filterVoice = true;
    options.filterVideo = true;
    enableSampleTaskStatus("customerService");
  }
  // uniapp build ios app has null in last index need to filter
  currentExtensionList.value = [
    ...TUICore.getExtensionList(
      TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID,
      options
    ),
  ].filter((extension) => extension);
};

const onCurrentConversationUpdate = (conversation: IConversationModel) => {
  if (
    conversation?.conversationID &&
    currentConversation.value?.conversationID !== conversation?.conversationID
  ) {
    getExtensionList(conversation?.conversationID);
    if (currentExtensionList.value.length > 2) {
      isSwiperIndicatorDotsEnable.value = true;
    }
  }
  currentConversation.value = conversation;
  if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP) {
    isGroup.value = true;
  } else {
    isGroup.value = false;
  }
};

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdate,
  });
});

// handle extensions onclick
const onExtensionClick = (extension: ExtensionInfo) => {
  // uniapp vue2 build wx lose listener proto
  const extensionModel = currentExtensionList.value.find(
    (targetExtension) => targetExtension?.data?.name === extension?.data?.name
  );
  switch (extensionModel?.data?.name) {
    case "voiceCall":
      onCallExtensionClicked(extensionModel, 1);
      break;
    case "videoCall":
      onCallExtensionClicked(extensionModel, 2);
      break;
    case "search":
      extensionModel?.listener?.onClicked?.();
      break;
    default:
      break;
  }
};

const onCallExtensionClicked = (extension: ExtensionInfo, callType: number) => {
  selectorShowType.value = extension?.data?.name;
  if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
    extension?.listener?.onClicked?.({
      userIDList: [currentConversation?.value?.conversationID?.slice(3)],
      type: callType,
    });
  } else if (isGroup.value) {
    currentUserSelectorExtension.value = extension;
    userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
  }
};

const genExtensionIcon = (extension: any) => {
  return extension?.icon;
};
const genExtensionText = (extension: any) => {
  return extension?.text;
};

const onUserSelectorSubmit = (selectedInfo: any) => {
  currentUserSelectorExtension.value?.listener?.onClicked?.(selectedInfo);
  currentUserSelectorExtension.value = null;
};

const onUserSelectorCancel = () => {
  currentUserSelectorExtension.value = null;
};

const handleSwiperDotShow = (showStatus: boolean) => {
  isSwiperIndicatorDotsEnable.value =
    currentExtensionList.value.length > 2 ? !showStatus : false;
};
</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>
<style lang="scss">
@import "../../../assets/styles/common";
@import "./style/uni";
</style>