@tencentcloud/ai-desk-customer-vue 0.1.0

package/interface.ts

@@ -0,0 +1,176 @@
+export interface customerServicePayloadType {
+  chatbotPlugin?: number | string;
+  customerServicePlugin?: number | string;
+  src: string | number;
+  content: any;
+  subtype?: string;
+  isFinished?: number;
+  chunks?: string[];
+  status?:number;
+  nodeStatus?:number;
+}
+
+interface IMenuItem {
+  content: string;
+  id: string;
+}
+
+export interface ratingTemplateType {
+  allowClientSendRating: boolean;
+  effectiveHour: number;
+  head: string;
+  tail: string;
+  type: number;
+  menu: IMenuItem[];
+  expireTime: number;
+  selected?: IMenuItem;
+  sessionId?: string;
+}
+
+export interface TextMessagePayload {
+  text: string;
+}
+
+export interface CustomMessagePayload {
+  data: string;
+  description: string;
+  extension: string;
+}
+
+export interface IMessageModel {
+  ID: string;
+  type: string;
+  payload: any;
+  conversationID: string;
+  conversationType: string;
+  to: string;
+  from: string;
+  flow: string;
+  time: number;
+  status: string;
+  isRevoked: boolean;
+  priority: string;
+  nick: string;
+  avatar: string;
+  isPeerRead: boolean;
+  nameCard: string;
+  atUserList: string[];
+  cloudCustomData: string;
+  isDeleted: boolean;
+  isModified: boolean;
+  needReadReceipt: boolean;
+  readReceiptInfo: any;
+  isBroadcastMessage: boolean;
+  isSupportExtension: boolean;
+  receiverList?: string[];
+  revoker: string;
+  sequence: number;
+  progress: number;
+  revokerInfo: {
+    userID: string;
+    nick: string;
+    avatar: string;
+  };
+  revokeReason: string;
+  hasRiskContent: boolean;
+  [key: string]: any;
+}
+
+export type ToolbarDisplayType = 'emojiPicker' | 'tools' | 'none';
+
+export interface IEmojiGroup {
+  type: string;
+  emojiGroupID: number;
+  url: string;
+  list: string[];
+}
+
+export type IEmojiGroupList = IEmojiGroup[];
+
+export interface IImageMessageContent {
+  showName?: string;
+  url?: string;
+  width?: number;
+  height?: number;
+}
+
+export interface IMergeMessageContent {
+  abstractList: string[];
+  compatibleText: string;
+  downloadKey: string;
+  layersOverLimit: boolean;
+  messageList: Array<{
+    avatar: string;
+    ID: string;
+    cloudCustomData: string;
+    from: string;
+    messageBody: Array<{
+      type: string;
+      payload: Record<string, any>;
+    }>;
+    messageReceiver: string;
+    messageRandom: number;
+    messageSender: string;
+    messageSequence: number;
+    messageTime: number;
+    nick: string;
+    receiverUserID: string;
+    time: number;
+  }>;
+  pbDownloadKey: string;
+  showName: string;
+  title: string;
+  version: number;
+}
+
+export interface IFileMessageContent {
+  name: string;
+  url: string;
+  size: number;
+}
+
+export interface IVideoMessageContent {
+  showName: string; // video message sender name
+  url: string; // video url
+  snapshotUrl: string; // video snapshot url
+  snapshotWidth: number; // video snapshot width
+  snapshotHeight: number; // video snapshot height
+}
+
+export interface IAudioMessageContent {
+  showName: string;
+  url: string;
+  second: number;
+}
+
+export interface IAudioContext {
+  src: string | undefined;
+  startTime: number;
+  duration: number;
+  play: () => void;
+  pause: () => void;
+  stop: () => void;
+  destroy: () => void;
+  onPlay: (callback: (...args: any[]) => void) => void;
+  onPause: (callback: (...args: any[]) => void) => void;
+  onStop: (callback: (...args: any[]) => void) => void;
+  onEnded: (callback: (...args: any[]) => void) => void;
+  onError: (callback: (...args: any[]) => void) => void;
+}
+
+export interface ITipTapEditorContent {
+  type: 'text' | 'image' | 'video' | 'file';
+  payload: {
+    text?: string;
+    file?: File;
+    atUserList?: string[];
+  };
+}
+
+export type InputDisplayType = 'editor' | 'audio';
+
+export interface ISendMessagePayload {
+  text?: string;
+  file?: any;
+  atUserList?: string[];
+}

package/logger/index.ts

@@ -0,0 +1,12 @@
+import Logger from './main';
+
+const logger = new Logger({
+  url: `https://otlp.tccc.qcloud.com/v1/logs`,
+  id: 'tccc',
+  name: 'webCustomerUIKit',
+  attributes: {
+    origin: 'webCustomerUIKit',
+  },
+});
+
+export default logger;

package/logger/main.ts

@@ -0,0 +1,120 @@
+import * as logsAPI from '@opentelemetry/api-logs';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+import { LoggerProvider, BatchLogRecordProcessor } from '@opentelemetry/sdk-logs';
+import { Resource } from '@opentelemetry/resources';
+type LogBody =
+  | string
+  | {
+    msg: string;
+    attributes?: logsAPI.LogAttributes;
+  };
+
+const getLogBody = (args: LogBody, defaultAttributes: logsAPI.LogAttributes) => ({
+  body: typeof args === 'string' ? args : args.msg,
+  attributes:
+    typeof args === 'string'
+      ? defaultAttributes
+      : {
+          ...defaultAttributes,
+          ...args.attributes,
+        },
+});
+
+export default class Logger {
+  logger: logsAPI.Logger;
+  attributes: logsAPI.LogAttributes;
+  logLevel: logsAPI.SeverityNumber;
+  name: string;
+  constructor({
+    name,
+    id,
+    url,
+    version = 'latest',
+    attributes,
+    logLevel = logsAPI.SeverityNumber.ERROR2,
+  }: {
+    name: string;
+    id: string;
+    url: URL | string;
+    version?: string;
+    attributes: logsAPI.LogAttributes;
+    logLevel?: logsAPI.SeverityNumber;
+  }) {
+    this.name = name;
+    this.logLevel = logLevel;
+    const loggerProvider = new LoggerProvider({
+      resource: new Resource({
+        'service.name': name,
+        'tps.tenant.id': id,
+      }),
+    });
+    loggerProvider.addLogRecordProcessor(
+      new BatchLogRecordProcessor(
+        new OTLPLogExporter({
+          url: url.toString(),
+          headers: {
+            'X-Tps-TenantID': id,
+          },
+        }),
+      ),
+    );
+    const logger = loggerProvider.getLogger(name, version);
+    this.attributes = attributes;
+    this.logger = logger;
+  }
+
+  debug = (args: LogBody) => {
+    if (this.logLevel <= logsAPI.SeverityNumber.DEBUG) {
+      console.debug(`[${this.name}]`, args);
+    }
+    this.logger.emit({
+      severityNumber: logsAPI.SeverityNumber.DEBUG,
+      severityText: 'debug',
+      ...getLogBody(args, this.attributes),
+    });
+  };
+
+  info(args: LogBody) {
+    if (this.logLevel <= logsAPI.SeverityNumber.INFO) {
+      console.info(`[${this.name}]`, args);
+    }
+
+    return this.logger.emit({
+      severityNumber: logsAPI.SeverityNumber.INFO,
+      severityText: 'info',
+      ...getLogBody(args, this.attributes),
+    });
+  }
+
+  warn = (args: LogBody) => {
+    if (this.logLevel <= logsAPI.SeverityNumber.WARN) {
+      console.warn(`[${this.name}]`, args);
+    }
+    this.logger.emit({
+      severityNumber: logsAPI.SeverityNumber.WARN,
+      severityText: 'warn',
+      ...getLogBody(args, this.attributes),
+    });
+  };
+
+  error = (args: LogBody) => {
+    if (this.logLevel <= logsAPI.SeverityNumber.ERROR) {
+      console.error(`[${this.name}]`, args);
+    }
+    this.logger.emit({
+      severityNumber: logsAPI.SeverityNumber.ERROR,
+      severityText: 'error',
+      ...getLogBody(args, this.attributes),
+    });
+  };
+
+  setAttribute = (key: string, value: string | number) => {
+    Object.assign(this.attributes, {
+      [key]: value,
+    });
+  };
+
+  setAttributes = (attributes: logsAPI.LogAttributes) => {
+    Object.assign(this.attributes, attributes);
+  };
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tencentcloud/ai-desk-customer-vue",
+  "version": "0.1.0",
+  "description": "chat uikit ai-desk-customer",
+  "main": "index",
+  "keywords": [
+    "uikit",
+    "uni-app",
+    "tencent",
+    "tencentcloud",
+    "messaging",
+    "即时通信",
+    "通信",
+    "WebSocket",
+    "ai-desk-customer",
+    "customer-service"
+  ],
+  "scripts": {
+    "sync": "node ./script/fileCopy.js",
+    "version": "node ./script/syncVersion.js",
+    "publish:vue": "cd ../tui-customer-service-plugin-vue && ls && npm publish --access public",
+    "publish:uniapp": "cd ../tui-customer-service-plugin-uniapp && ls && npm publish --access public"
+  },
+  "dependencies": {
+    "@tencentcloud/chat-uikit-engine": "latest",
+    "@tencentcloud/tui-core": "latest",
+    "@tencentcloud/tui-emoji-plugin": "latest",
+    "@tencentcloud/universal-api": "latest",
+    "@tiptap/core": "2.0.0-beta.220",
+    "@tiptap/extension-document": "2.0.0-beta.220",
+    "@tiptap/extension-image": "2.0.0-beta.220",
+    "@tiptap/extension-mention": "2.0.0-beta.220",
+    "@tiptap/extension-paragraph": "2.0.0-beta.220",
+    "@tiptap/extension-placeholder": "2.0.0-beta.220",
+    "@tiptap/extension-text": "2.0.0-beta.220",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/suggestion": "2.0.0-beta.220",
+    "@types/lodash": "^4.14.202",
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
+    "marked": "4.0.10",
+    "mp-html": "^2.5.0",
+    "vue-clipboard3": "2.0.0"
+  },
+  "peerDependencies": {
+    "@tencentcloud/tui-core": "latest",
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/script/fileCopy.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const path = require('path');
+
+const sourceFolder = '../tui-customer-service-plugin';
+const destinationFolderWeb = '../tui-customer-service-plugin-vue';
+const destinationFolderUniapp = '../tui-customer-service-plugin-uniapp';
+
+// 复制文件夹及其内容
+function copyFolderRecursive(source, destination) {
+  console.log(`copy folder ${source} ${destination}`);
+    
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination);
+  }
+
+  const files = fs.readdirSync(source);
+
+  files.forEach((file) => {
+    const sourcePath = path.join(source, file);
+    const destinationPath = path.join(destination, file);
+
+    if (fs.lstatSync(sourcePath).isDirectory()) {
+        if (file !== 'node_modules' && file !== '.git') {
+            copyFolderRecursive(sourcePath, destinationPath);
+        }
+    } else {
+      fs.copyFileSync(sourcePath, destinationPath);
+    }
+  });
+}
+
+// 过滤文件夹中的文件
+function filterFiles(folder, filterCondition) {
+  const files = fs.readdirSync(folder);
+
+  files.forEach((file) => {
+    const filePath = path.join(folder, file);
+
+    if (fs.lstatSync(filePath).isDirectory()) {
+      if (!file.startsWith('adapter')) {
+        filterFiles(filePath, filterCondition);
+      }
+    } else {
+      if (filterCondition(file)) {
+        console.log(`filter file ${filePath}`);
+        fs.unlinkSync(filePath);
+      }
+    }
+  });
+}
+
+// 复制文件夹 a 到 b 和 c
+copyFolderRecursive(sourceFolder, destinationFolderWeb);
+copyFolderRecursive(sourceFolder, destinationFolderUniapp);
+
+// 在 b 文件夹中去除文件名为 -web 结尾的文件
+filterFiles(destinationFolderWeb, (file) => file.substring(0,file.lastIndexOf('.')).endsWith('-uniapp')&& !file.startsWith('adapter'));
+
+// 在 c 文件夹中去除文件名为 -uniapp 的文件（除了 adapter 开头的文件）
+filterFiles(destinationFolderUniapp, (file) => file.substring(0,file.lastIndexOf('.')).endsWith('-web') && !file.startsWith('adapter'));

package/script/syncVersion.js

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const os = require('os');
+const newVersion = process.argv[2];
+
+if (!newVersion) {
+  console.log('请传入新版本号，版本号遵循semver规范 .eg: 1.0.0, 1.0.1, 1.1.0');
+  process.exit(1);
+}
+
+const srcPaths = [
+  './package.json',
+  '../tui-customer-service-plugin-vue/package.json',
+  '../tui-customer-service-plugin-uniapp/package.json'
+];
+
+function start() {
+  srcPaths.forEach((src) => {
+    const packageJsonContent = fs.readFileSync(src, 'utf8');
+    const packageJson = JSON.parse(packageJsonContent);
+    const currentVersion = packageJson.version;
+    let currentName = packageJson.name;
+    if(src == '../tui-customer-service-plugin-vue/package.json'){
+        currentName = '@tencentcloud/ai-desk-customer-vue';
+    } else if(src == '../tui-customer-service-plugin-uniapp/package.json'){
+        currentName = '@tencentcloud/ai-desk-customer-uniapp';
+    }
+    // 更新版本号
+    packageJson.version = newVersion;
+    packageJson.name = currentName;
+    fs.writeFileSync(src, JSON.stringify(packageJson, null, 2) + os.EOL);
+    console.log(`${src} 版本号已从 ${currentVersion} 更新为 ${newVersion}`);
+  });
+}
+
+start();

package/server.ts

@@ -0,0 +1,128 @@
+import TUICore, { TUIConstants, TUILogin } from '@tencentcloud/tui-core';
+import {
+  isCustomerServiceMessage,
+  isMessageInvisible,
+} from './utils/index';
+import { IMessageModel } from './interface';
+import TUIChatEngine, { TUIChatService, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+
+export default class TUICustomerServer {
+  static isInitialized: boolean;
+  static instance: TUICustomerServer;
+  private customerServiceAccounts: any[];
+  constructor() {
+    console.log('TUICustomerServer.init ok');
+    TUICore.registerService(TUIConstants.TUICustomerServicePlugin.SERVICE.NAME, this);
+    TUICore.registerExtension(TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID, this);
+     // TUICore.registerEvent(TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED, TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS, this);
+    this.customerServiceAccounts = ['@customer_service_account'];
+  }
+
+  static getInstance(): TUICustomerServer {
+    if (!TUICustomerServer.instance) {
+      TUICustomerServer.instance = new TUICustomerServer();
+    }
+    return TUICustomerServer.instance;
+  }
+
+  public onNotifyEvent(eventName: string, subKey: string, params?: Record<string, any>) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          const { chat, SDKAppID, userID, userSig } = TUILogin.getContext();
+
+          TUIChatEngine.login({
+            chat,
+            SDKAppID,
+            userID,
+            userSig,
+          });
+          TUIConversationService.switchConversation('C2C@customer_service_account');
+          TUICore.unregisterEvent(TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED, TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS, this);
+          break;
+      }
+    }
+  }
+
+  static loginCustomerUIKit = (sdkappid:number, userid:string, usersig:string) => {
+    TUILogin.login({
+      SDKAppID: sdkappid,
+      userID:userid,
+      userSig:usersig,
+      useUploadPlugin: true,
+    }).then(() => {
+      console.log("login success");
+		  TUIConversationService.switchConversation('C2C@customer_service_account');
+    })
+    .catch((error) => {
+      console.log(error);
+    })
+  }
+
+  /**
+   * init
+   */
+  public static init(sdkappid:number, userid:string, usersig:string) {
+    // Backward compatibility, the new version executes the init operation by default in index.ts
+    if (TUICustomerServer.isInitialized) {
+      return;
+    }
+    TUICustomerServer.isInitialized = true;
+    // Execute call server when native plugin TUICallKit exists
+    this.loginCustomerUIKit(sdkappid, userid, usersig);
+  }
+
+  // Set customer service number
+  public setCustomerServiceAccounts(accounts: any[]) {
+    this.customerServiceAccounts = accounts;
+  }
+
+  // Obtain customer service number
+  public getCustomerServiceAccounts() {
+    return this.customerServiceAccounts;
+  }
+
+  // Determine if the current session is a customer service session
+  public isCustomerConversation(conversationID: string) {
+    const userID = (conversationID && conversationID.slice(3)) || '';
+    return this.customerServiceAccounts.indexOf(userID) > -1;
+  }
+
+  // Determine if the current message is a customer service message
+  public isCustomerServicePluginMessage(message: IMessageModel) {
+    if (!message || !this.isCustomerConversation(message.conversationID)) {
+      return false;
+    }
+    return isCustomerServiceMessage(message) || isMessageInvisible(message);
+  }
+
+  public onGetExtension(extensionID: string) {
+    if (extensionID === TUIConstants.TUIContact.EXTENSION.CONTACT_LIST.EXT_ID) {
+      return [
+        {
+          weight: 0,
+          icon: '',
+          text: '客服号',
+          data: {
+            name: 'customer',
+            accountList: this.customerServiceAccounts,
+          },
+        },
+      ];
+    }
+  }
+
+  public onCall(method: string, params: any) {
+    if (method === TUIConstants.TUICustomerServicePlugin.SERVICE.METHOD.ACTIVE_CONVERSATION) {
+      if (this.isCustomerConversation(params.conversationID)) {
+        TUIChatService.sendCustomMessage({
+          to: params.conversationID.slice(3),
+          conversationType: 'C2C',
+          payload: {
+            data: JSON.stringify({src: '7', customerServicePlugin: 0}),
+          },
+        }, { onlineUserOnly: true});
+      }
+    }
+  }
+}

package/styles/common.scss

@@ -0,0 +1,116 @@
+@import "../components/common/common.scss";
+// button
+@mixin btn {
+  border-radius: 5px;
+  padding: 13px 0;
+  cursor: pointer;
+}
+@mixin btn-default {
+  @include btn;
+  background: #006eff;
+  border: 1px solid #006eff;
+  color: #fff;
+}
+@mixin btn-error {
+  @include btn;
+  border: 1px solid #e54545;
+  color: #e54545;
+  background: #fff;
+}
+@mixin btn-normal {
+  @include btn;
+  background: #fff;
+  border: 1px solid #ddd;
+  color: #000;
+}
+
+// flex
+// flex布局 默认 纵向垂直居中水平居中
+@mixin flex($direction: column, $js: center, $al: center) {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $js;
+  align-items: $al;
+  border: 0px solid black;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+// 文本超出隐藏 ...隐藏文本
+@mixin single-line-ellipsis($width: 100%) {
+  width: $width;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 文本最多(n)行，超出部分用...表示
+@mixin line($num) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+// position居中
+@mixin positionCenter {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.container {
+  @include flex;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  .box {
+    @include flex;
+    border-radius: 0.5rem;
+    background: #fff;
+    overflow: hidden;
+    color: #000;
+  }
+  .box-h5 {
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    border-radius: 0px;
+    justify-content: flex-start;
+    .title {
+      @include flex;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 15px 18px;
+      position: relative;
+      .title-back {
+        position: absolute;
+        left: 18px;
+      }
+      .title-name {
+        font-size: 18px;
+        font-weight: 500;
+        font-family: PingFangSC-Medium;
+      }
+    }
+  }
+}