<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="单次对话" name="single">
      <SingleConversation  v-if="activeName === 'single'" ref="singleRef" />
    </el-tab-pane>
    <el-tab-pane label="连续对话" name="multiple">
      <MultipleConversations v-if="activeName === 'multiple'" ref="multipleRef" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import SingleConversation from './SingleConversation/index.vue'
import MultipleConversations from './MultipleConversations/index.vue'
import { ref } from 'vue'

const activeName = ref('single')

const singleRef = ref()
const multipleRef= ref()
</script>

<style>
.demo-tabs {
  width: 100%;

  .el-tabs__header {
    margin: 0;
    padding: 0 12px;
    background: #fff;
  }

  .el-tab-pane {
    height: 100%;
  }
}
</style>