<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    userLang="en"
  />
</template>

<template>
  <CustomerServiceChat 
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :key="locale"
    :userLang="locale"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted, ref } from "vue";

const locale = ref('en');

const changeLanguage = (language: string) => {
  TUICustomerServer.changeLanguage(language).then(() => {
    locale.value = language;
  });
}
</script>
<style scoped lang="scss">
</style>

TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: '张三 1852010****',
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
})

<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :toolbarButtonList="toolbarButtonList"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted } from 'vue';

const toolbarButtonList = [
  {"title":"人工服务","icon":"https://tccc-im-agent-avatar-1258344699.cos.ap-nanjing.myqcloud.com/toolbar_button_1.png","type":1,"content":"","isPreset":1,"presetId":"humanService","isEnabled":1},
  {"title":"服务评价","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_2.png","type":1,"content":"","isPreset":1,"presetId":"serviceRating","isEnabled":1},
  {"title":"结束对话","icon":"https://tccc-im-agent-avatar-sg-1258344699.cos.ap-singapore.myqcloud.com/toolbar_button_3.png","type":1,"content":"","isPreset":1,"presetId":"endHumanService","isEnabled":1},
  // 发送普通文本
  {"title":"智能客服","type":1,"content":"智能客服","isPreset":0,"isEnabled":1},
  // 触发指定任务流，taskFlowID 为任务流 ID, 如果 description 为空则不会显示在消息列表中
  {"title":"触发指定任务流","type":3,"content":{"taskFlowID":3226, "description":"your description"},"isPreset":0,"isEnabled":1},
  // 转指定的人工坐席，specificMemberList 为人工坐席账号列表
  {"title":"转指定坐席","type":4,"content":{"specificMemberList":["agent_01@email.com"], "description":"your description"},"isPreset":0,"isEnabled":1},
  // 转指定的客服分组，groupID 为客服分组 ID
  {"title":"转指定客服分组","type":4,"content":{"groupID":111, "description":"your description"},"isPreset":0,"isEnabled":1}
];

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style scoped>
</style>

<template>
  <CustomerServiceChat
    :style="{ width: '600px', height: '80vh', margin: '10px auto', boxShadow: '0 11px 20px #ccc' }"
    :bottomQuickOrder="bottomQuickOrder"
  />
</template>
<script setup lang="ts">
import TUICustomerServer, { CustomerServiceChat } from './ai-desk-customer-vue';
import { onMounted } from 'vue';

const bottomQuickOrder = {
  header: "高级版智能客服（包含3个客服许可）",
  desc: "¥3000/月",
  pic: "https://static.cloudcachetci.com/qcloud/portal/kit/images/presale.a4955999.jpeg",
  url: 'https://your_url.com',
  customField: [
    {
      name: '订单号',
      value: '11111111111111111111'
    },
    {
      name: '下单时间',
      value: '2025-07-02 16:23'
    }
  ]
};

onMounted(() => {
  const SDKAppID = 0; // Your SDKAppID，即开通了智能客服 Desk 的应用 ID
  const userID = ''; // Your userID，可复用您 app 的账号体系，或随机生成
  const userSig = ''; // Your userSig，接入阶段可控制台生成，生产阶段请务必由服务端生成
  TUICustomerServer.init(SDKAppID, userID, userSig);
});
</script>
<style scoped>
</style>

TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: '张三 1852010****',
  avatar: 'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_3.png'
}).then(() => {
  TUICustomerServer.transferToTaskFlow({
    taskFlowID: 0, // 请替换为您应用的任务流 ID
    description: 'your description'
  });
});

// 1. 初始化前将业务侧自定义的客服号 ID 传递给 UIKit
TUICustomerServer.setCustomerServiceIDList(['customerServiceID_001', 'customerServiceID_002', 'customerServiceID_003']);
// 2. 初始化时，带上要发起会话的客服号 ID，比如 'customerServiceID_002'
// 如果不带上要发起会话的客服号 ID，则 UIKit 默认使用多客服号列表的第 1 个元素
TUICustomerServer.initWithProfile({
  SDKAppID,
  userID,
  userSig,
  nickName: '张三 1562010****',
  avatar: 'your avatar url',
  customerServiceID: 'customerServiceID_002',
});

TUICustomerServer.sendCustomMessage({
  to: '@customer_service_account',
  conversationType: 'C2C',
  payload: {
    data: JSON.stringify({
      src: '27',
      customerServicePlugin: 0,
    }),
  },
}, { onlineUserOnly: true });

npm i marked@5.1.2 --legacy-peer-deps

npm i marked@6.0.0 --legacy-peer-deps