Spaces:
Sleeping
Sleeping
File size: 3,368 Bytes
1a25b7f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <template>
<div
class="h-full premium-glass rounded-3xl overflow-hidden flex flex-col shadow-lg"
>
<!-- Header / Tabs (Visible only when ready) -->
<div
v-if="isReady"
class="flex p-1 bg-slate-900/5 backdrop-blur-sm border-b border-white/20 shrink-0"
>
<button
v-for="tab in ['chat', 'quiz']"
:key="tab"
:id="'tab-' + tab"
@click="activeTab = tab"
class="flex-1 py-3 text-sm font-bold uppercase tracking-wider rounded-xl transition-all flex items-center justify-center gap-2"
:class="
activeTab === tab
? 'bg-white shadow-sm text-green-600'
: 'text-slate-500 hover:bg-white/50 hover:text-slate-700'
"
>
<UIcon
:name="
tab === 'chat'
? 'i-lucide-messages-square'
: 'i-lucide-brain-circuit'
"
class="w-4 h-4"
/>
{{ tab === "chat" ? "AI Tutor" : "Quiz" }}
</button>
</div>
<!-- Content Area -->
<div class="flex-1 overflow-hidden relative">
<Transition name="fade-slide" mode="out-in">
<template v-if="isReady">
<ChatInterface v-if="activeTab === 'chat'" :project="project" />
<QuizBuilder v-else :project="project" />
</template>
<div
v-else
class="h-full flex flex-col items-center justify-center p-8 text-center"
>
<div
class="w-20 h-20 rounded-3xl bg-green-50 flex items-center justify-center mb-6 relative"
>
<div
class="absolute inset-0 bg-green-200/30 rounded-3xl animate-ping opacity-20"
></div>
<UIcon
name="i-lucide-lock"
class="w-10 h-10 text-green-600 relative z-10"
/>
</div>
<h3 class="text-xl font-black text-slate-900 mb-3">
Interactivity Preparing
</h3>
<p class="text-slate-500 text-sm leading-relaxed max-w-[280px]">
The AI Tutor and interactive quiz features will be unlocked once the
video generation is complete.
</p>
<div
class="mt-8 flex items-center gap-2 px-4 py-2 bg-slate-900/5 rounded-full border border-slate-900/5"
>
<UIcon
name="i-lucide-loader-2"
class="w-4 h-4 text-green-500 animate-spin"
/>
<span
class="text-[10px] font-bold uppercase tracking-wider text-slate-500"
>Processing Intelligence</span
>
</div>
</div>
</Transition>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import ChatInterface from "./ChatInterface.vue";
import QuizBuilder from "./QuizBuilder.vue";
const props = defineProps({
project: { type: Object, required: true },
});
const activeTab = ref("chat");
const isReady = computed(
() =>
props.project?.status === "completed" ||
props.project?.has_video ||
props.project?.has_combined_video,
);
</script>
<style scoped>
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.3s ease;
}
.fade-slide-enter-from {
opacity: 0;
transform: translateX(10px);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateX(-10px);
}
</style>
|