<script setup>
import ChatInterface from './components/ChatInterface.vue'
import ChatModeSelector from './components/ChatModeSelector.vue'
import { ref } from 'vue'

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

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

<template>
  <div class="app">
    <div class="app-container">
      <ChatModeSelector @mode-changed="handleModeChange" />
      <div class="chat-wrapper">
        <ChatInterface :chatMode="currentMode" />
      </div>
    </div>
  </div>
</template>

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

.app {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

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

.chat-wrapper {
  flex: 1;
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  position: relative;
}
</style>
