lingji-work-fe/src/views/home/components/history-conversation-drawer/index.vue

<script lang="jsx">
import { Drawer, message } from 'ant-design-vue';
import TextoverTips from '@/components/text-over-tips';
import Conversations from '@/components/xt-chat/xt-conversations';
import SvgIcon from '@/components/svg-icon';
import { Button, Flex, Input } from 'ant-design-vue';
import DeleteChatModal from './delete-chat-modal.vue';
import NoData from '@/components/no-data/index.vue';

import { handleUserHome } from '@/utils/user';
import { useRouter } from 'vue-router';
import { getAgentHistory, postUpdateSessionTitle, postUpdateSessionSort } from '@/api/all/chat';
import { useChatStore } from '@/stores/modules/chat';

export default {
  setup(props, { emit, expose }) {
    const router = useRouter();
    const chatStore = useChatStore();

    const open = ref(false);
    const dataSource = ref([]);
    const activeKey = ref('');
    const deleteChatModalRef = ref(null);

    const showDrawer = (id) => {
      getData();
      open.value = true;
    };
    const getData = async () => {
      const { code, data } = await getAgentHistory(chatStore.agentInfo.agent_id);
      if (code === 200) {
        dataSource.value = data.map((item) => ({
          ...item,
          key: item.id,
          label: item.title,
        }));
      }
    };
    const onPin = async (item) => {
      const { id, sort } = item;
      // sort大于0就是已置顶
      const is_top = sort > 0 ? 0 : 1;
      const { code } = await postUpdateSessionSort({
        id,
        is_top,
        agent_id: chatStore.agentInfo.agent_id,
      });
      if (code === 200) {
        message.success(is_top === 0 ? '取消置顶成功' : '置顶成功');
        getData();
      }
    };
    const onClose = () => {
      activeKey.value = '';
      dataSource.value = [];
      open.value = false;
    };
    const handleMenuClick = async ({ menuInfo, item }) => {
      switch (menuInfo.key) {
        case 'pin':
          onPin(item);
          break;
        case 'rename':
          item.editing = true;
          break;
        case 'delete':
          deleteChatModalRef.value.open(item);
          break;
      }
    };
    const handleRename = async (item) => {
      const { id, label } = item;
      const { code } = await postUpdateSessionTitle({
        id,
        title: label,
      });
      if (code === 200) {
        message.success('重命名成功');
      }
    };
    const handleActiveChange = (item) => {
      const { id } = item;
      handleUserHome({ conversationId: id });
    };

    expose({
      showDrawer,
    });

    return () => (
      <Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
        <header class="header h-40px px-12px flex justify-between items-center">
          <span class="text-16px font-400 color-#211F24 font-family-medium">历史对话</span>
          <icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />
        </header>
        {dataSource.value.length === 0 ? (
          <NoData text="暂无历史对话" />
        ) : (
          <section class="flex-1 overflow-y-auto content p-12px">
            <Conversations
              v-model={activeKey.value}
              dataSource={dataSource.value}
              onMenuClick={handleMenuClick}
              onRename={handleRename}
              onActiveChange={handleActiveChange}
            />
          </section>
        )}

        <DeleteChatModal ref={deleteChatModalRef} />
      </Drawer>
    );
  },
};
</script>

<style lang="scss">
@import './style.scss';
</style>