109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { formInjectionKey } from '~/constants/injection-keys'
|
|
|
|
export interface ResearchInputData {
|
|
query: string
|
|
breadth: number
|
|
depth: number
|
|
numQuestions: number
|
|
}
|
|
|
|
defineProps<{
|
|
isLoadingFeedback: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'submit'): void
|
|
}>()
|
|
|
|
const form = inject(formInjectionKey)!
|
|
|
|
const isSubmitButtonDisabled = computed(
|
|
() =>
|
|
!form.value.query ||
|
|
!form.value.breadth ||
|
|
!form.value.depth ||
|
|
!form.value.numQuestions,
|
|
)
|
|
|
|
function handleSubmit() {
|
|
emit('submit')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="font-bold">{{ $t('researchTopic.title') }}</h2>
|
|
</template>
|
|
<div class="flex flex-col gap-2">
|
|
<UFormField :label="$t('researchTopic.inputTitle')" required>
|
|
<UTextarea
|
|
class="w-full"
|
|
v-model="form.query"
|
|
:rows="3"
|
|
:placeholder="$t('researchTopic.placeholder')"
|
|
required
|
|
/>
|
|
</UFormField>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<UFormField :label="$t('researchTopic.numOfQuestions')" required>
|
|
<template #help>
|
|
{{ $t('researchTopic.numOfQuestionsHelp') }}
|
|
</template>
|
|
<UInput
|
|
v-model="form.numQuestions"
|
|
class="w-full"
|
|
type="number"
|
|
:min="1"
|
|
:max="5"
|
|
:step="1"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField :label="$t('researchTopic.depth')" required>
|
|
<template #help>{{ $t('researchTopic.depthHelp') }}</template>
|
|
<UInput
|
|
v-model="form.depth"
|
|
class="w-full"
|
|
type="number"
|
|
:min="1"
|
|
:max="5"
|
|
:step="1"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField :label="$t('researchTopic.breadth')" required>
|
|
<template #help>{{ $t('researchTopic.breadthHelp') }}</template>
|
|
<UInput
|
|
v-model="form.breadth"
|
|
class="w-full"
|
|
type="number"
|
|
:min="1"
|
|
:max="5"
|
|
:step="1"
|
|
/>
|
|
</UFormField>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
type="submit"
|
|
color="primary"
|
|
:loading="isLoadingFeedback"
|
|
:disabled="isSubmitButtonDisabled"
|
|
block
|
|
@click="handleSubmit"
|
|
>
|
|
{{
|
|
isLoadingFeedback
|
|
? $t('researchTopic.researching')
|
|
: $t('researchTopic.start')
|
|
}}
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</template>
|