

<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { getMessages } from '@/api/new-ai/conversation';
import Message from '@/views/ai/chat/new-chat/message/Message.vue';

const messageRef = ref();
const contentRef = ref();
const loading = ref(true);
const dialogVisible = ref(false);
const info = ref<any>({});
const messages = ref<any>([]);

async function show(row: any) {
  dialogVisible.value = true;
  await nextTick();

  info.value = row;
  messages.value = await getMessages(row.id);
  loading.value = false;
}

async function handleDelete(row) {
  console.log('del', row);
}

defineExpose({ show });
</script>

<template>
  <el-drawer
    v-model="dialogVisible"
    :title="info.title"
    size="1000px"
    direction="rtl"
  >
    <template #default>
      <div ref="contentRef" class="drawer-content">
        <el-scrollbar ref="messageRef" height="calc(100vh - 180px)">
          <Message
            v-for="(item, index) of messages"
            :key="index"
            :date-time="item.createTime"
            :error="false"
            :inversion="item.role !== 'assistant'"
            :loading="loading"
            :text="item.message"
            @delete="handleDelete(item)"
          />
        </el-scrollbar>
      </div>
      <el-empty v-if="messages.length === 0" description="此会话还没有聊天信息" class="mt-5" />
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.drawer-content {
  height: 100%;
  padding: 0 20px;
}
</style>
