<template>
  <Transition name="fade" mode="out-in">
    <WelcomeScreen
      v-if="showWelcome"
      key="welcome"
      @toggle-sidebar="$emit('toggleSidebar')"
    />
    <ChatArea
      v-else
      key="chat"
      @toggle-sidebar="$emit('toggleSidebar')"
      @toggle-artifacts="$emit('toggleArtifacts')"
    />
  </Transition>
</template>

<script setup>
import { computed } from 'vue'
import { useSessionsStore } from '@/stores/sessions'
import { useChatStore } from '@/stores/chat'
import WelcomeScreen from '@/components/ui/WelcomeScreen.vue'
import ChatArea from '@/components/chat/ChatArea.vue'

const sessionsStore = useSessionsStore()
const chatStore = useChatStore()

defineEmits(['toggleSidebar', 'toggleArtifacts'])

const showWelcome = computed(
  () => (sessionsStore.sessions.length === 0 || chatStore.currentId === null) && !sessionsStore.loading
)
</script>