agora-ai/frontend/src/App.vue

<script setup>
import { ref } from 'vue'
import { useCollaborationStore } from './stores/collaboration'
import CollaborativeInput from './components/CollaborativeInput.vue'
import CollaborativeSession from './components/CollaborativeSession.vue'
import NetworkStatus from './components/NetworkStatus.vue'

const collaborationStore = useCollaborationStore()

const showSession = ref(false)
const currentSessionId = ref(null)

function handleCollaborationCreated(session) {
  currentSessionId.value = session.sessionId
  showSession.value = true
}

function startNewCollaboration() {
  collaborationStore.clearCurrentSession()
  showSession.value = false
}
</script>

<template>
  <div class="app">
    <NetworkStatus />

    <!-- Input Mode -->
    <div v-if="!showSession">
      <CollaborativeInput @session-created="handleCollaborationCreated" />
    </div>

    <!-- Session Mode -->
    <div v-else>
      <button @click="startNewCollaboration" class="new-session-btn">
        New Session
      </button>

      <CollaborativeSession
        v-if="currentSessionId"
        :session-id="currentSessionId"
        @session-completed="startNewCollaboration"
      />
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: #2c3e50;
}

#app {
  min-height: 100vh;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes float1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.03;
  }
  25% {
    transform: translate(100px, -100px) rotate(90deg);
    opacity: 0.05;
  }
  50% {
    transform: translate(-50px, 150px) rotate(180deg);
    opacity: 0.03;
  }
  75% {
    transform: translate(-100px, -50px) rotate(270deg);
    opacity: 0.04;
  }
}

@keyframes float2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.04;
  }
  25% {
    transform: translate(-120px, 80px) rotate(-90deg);
    opacity: 0.06;
  }
  50% {
    transform: translate(80px, -120px) rotate(-180deg);
    opacity: 0.04;
  }
  75% {
    transform: translate(120px, 100px) rotate(-270deg);
    opacity: 0.05;
  }
}

@keyframes float3 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.03;
  }
  25% {
    transform: translate(-80px, -80px) rotate(45deg);
    opacity: 0.05;
  }
  50% {
    transform: translate(100px, 100px) rotate(135deg);
    opacity: 0.03;
  }
  75% {
    transform: translate(-100px, 80px) rotate(225deg);
    opacity: 0.04;
  }
}
</style>

<style scoped>
.app {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(
    -45deg,
    #0f0c29 0%,
    #302b63 25%,
    #24243e 50%,
    #302b63 75%,
    #0f0c29 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
  position: relative;
  overflow: hidden;
}

.app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
  animation: float1 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.app::after {
  content: '';
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
  animation: float2 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.app > * {
  position: relative;
  z-index: 1;
}

.new-session-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  padding: 0.75rem 1.5rem;
  background: rgba(102, 126, 234, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.new-session-btn:hover {
  background: rgba(102, 126, 234, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}
</style>