lingji-work-fe/src/views/agent/chat/components/HistoryChat.vue

<template>
  <div>
    <div class="logo">
      <img :src="cozeInfo?.icon_url" class="agent-img" />
    </div>

    <a-menu mode="inline" theme="light">
      <a-menu-item key="1">
        <span class="menu-title">{{ cozeInfo.name }}</span>
        <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
        <span style="float: right">{{ cozeInfo.views }}次使用</span>
        <p>{{ cozeInfo.description }}</p>
      </a-menu-item>

      <div v-for="(item, index) in conversations" :key="index">
        <a-dropdown-button>
          <span> {{ item.content }} </span>
          <template #content>
            <a-doption>重命名</a-doption>
            <a-popconfirm
              content="确认删除对话吗？删除后，聊天记录将不可恢复。"
              @ok="delMessage(item.chat_id, item.conversation_id)"
              type="error"
            >
              <a-button>删除</a-button>
            </a-popconfirm>
          </template>
        </a-dropdown-button>
      </div>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';

const props = defineProps({
  cozeInfo: {
    type: Object as () => any,
    default: () => ({}),
  }
});

const delMessage = async (chatId, conversationId) => {
  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
  if (code === 200) {
    console.log(data, 'data');
  }
};

const conversations = ref([]);

const getHistoryChatData = async (botId) => {
  const { code, data } = await getHistoryChat({ bot_id: botId });
  if (code === 200) {
    conversations.value = data.list;
  }
};
const truncateText = (text: string, maxLength = 30) => {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength) + '...';
};

onMounted(() => {
  getHistoryChatData(props.cozeInfo.bot_id);
});
</script>

<style scoped>
.logo {
  margin-bottom: 20px;
}

.menu-title {
  color: var(--Text-1, #211f24);
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  line-height: 26px;
  word-wrap: break-word;
}
.agent-img {
  width: 100%;
  height: 230px;
  border-radius: 4px;
}

</style>