fix: jenkins build failed (#91)

package.json

@@ -85,5 +85,8 @@
     "vite-plugin-vue-devtools": "^7.0.25",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "2.1.6"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.27.4"
   }
 }

src/components/layout/quizzfly/AICreateButton.vue

@@ -21,7 +21,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { useQuestionsStore } from '@/stores/quizzfly/question'
 import { showToast } from '@/utils/toast'
-import { createQuizUseAIApi } from '@/services/gemini'
+import { createQuizUseAIApi, getModelList, type Model } from '@/services/ai'
 import { useForm } from 'vee-validate'
 import * as yup from 'yup'
 import { createMultipleQuizApi } from '@/services/quizzes'
@@ -41,7 +41,15 @@ interface Option {
   quizTypes: string[]
 }
 
+onBeforeMount(async () => {
+  const data = await getModelList()
+  modelAI.value = data
+  model.value = data[0].value
+})
+
+const modelAI = ref<Model[]>([])
 const language = ref('Vietnamese')
+const model = ref()
 const option = ref<Option>({
   theme: '',
   numberOfQuestion: 1,
@@ -60,7 +68,7 @@ const isLoading = ref(false)
 const handleCreateWithAI = handleSubmit(async (value) => {
   isLoading.value = true
   try {
-    const quizzes = await createQuizUseAIApi(language.value, {
+    const quizzes = await createQuizUseAIApi(model.value, language.value, {
       ...option.value,
       theme: value.theme,
     })
@@ -191,6 +199,33 @@ const handleCreateWithAI = handleSubmit(async (value) => {
           Free plan only supports creating 5 quiz at a time
         </p>
 
+        <p class="mt-5 mb-1 font-medium">Model <span class="text-red-500">*</span></p>
+        <Select v-model="model">
+          <SelectTrigger>
+            <SelectValue placeholder="Model AI" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem
+                v-for="(modelItem, index) in modelAI"
+                :key="index"
+                :value="modelItem.value"
+                :disabled="modelItem.premium"
+              >
+                <div class="flex items-center gap-2">
+                  <img
+                    class="w-5 h-5 rounded-sm object-cover"
+                    :src="modelItem.logo"
+                    alt=""
+                  />
+                  {{ modelItem.name }}
+                  <span v-if="modelItem.premium">👑</span>
+                </div>
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
         <div class="mt-5 flex justify-end gap-3">
           <Button
             class="flex gap-2 text-xs w-full rounded-lg"

src/components/room/ModalStartHostLive.vue

@@ -49,9 +49,9 @@ const handleStartClick = () => {
     :initial="{ opacity: 0, y: 100 }"
     :enter="{ opacity: 1, y: 0, scale: 1 }"
     :delay="200"
-    class="w-full rounded-xl p-20 flex gap-12 justify-between bg-[rgba(5,39,69,0.8)] backdrop-blur-[12px] box-border"
+    class="w-full max-md:p-5 max-md:flex-col rounded-xl p-20 flex gap-12 justify-between bg-[rgba(5,39,69,0.8)] backdrop-blur-[12px] box-border"
   >
-    <div class="w-2/4">
+    <div class="max-md:w-full w-2/4">
       <img
         v-if="quizzflyInfo.cover_image"
         v-motion
@@ -72,7 +72,7 @@ const handleStartClick = () => {
         class="rounded-xl w-4/5"
       />
     </div>
-    <div class="w-2/4 flex flex-col gap-16">
+    <div class="max-md:w-full w-2/4 flex flex-col gap-16">
       <div class="flex flex-col gap-3">
         <div
           v-motion
@@ -88,7 +88,7 @@ const handleStartClick = () => {
           :initial="{ opacity: 0, x: 100 }"
           :enter="{ opacity: 1, x: 0, scale: 1 }"
           :delay="500"
-          class="text-white font-medium text-lg"
+          class="max-md:text-sm text-white font-medium text-lg"
         >
           Bring friendly competition to this Quizzfly. Players go head-to-head and compete for a top
           spot on the podium. Players who answer the quickest and get the most correct answers will