<template>
    <div class="chat-page">
        <div class="chat-container">
        <ChatModeSelector @mode-changed="handleModeChange" />
        <div class="chat-wrapper">
            <keep-alive>
                <ChatInterface :key="currentMode.id" :chatMode="currentMode" />
            </keep-alive>
        </div>
        </div>
    </div>
</template>
<script setup>
import ChatInterface from './ChatInterface.vue'
import ChatModeSelector from './ChatModeSelector.vue'
import { ref } from 'vue'

const currentMode = ref({
  id: 'training',
  token: 'app-88ae2GN49aUyNO6qGg7tbTfX'
})

const handleModeChange = (mode) => {
  currentMode.value = mode
}
</script>



<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

.chat-page {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--el-bg-color-page);
}

.chat-container {
  height: 100%;
  display: flex;
  overflow: hidden;
}

.chat-wrapper {
  flex: 1;
  height: 100%;
  overflow: hidden;
  background-color: var(--el-bg-color-page);
  position: relative;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .chat-container {
    position: relative;
  }

  .chat-wrapper {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
}
</style>
