vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ai-create): show character counter under the AI prompt field

Browse source 
The AI post prompt is validated with `max:2000` on the backend, but the
create form gave no hint of the limit — users could write past it and only
find out via a validation error on submit.

Add a live `X/2000` counter below the "What is this post about?" textarea.
It turns red (`text-destructive`) once the prompt exceeds the limit, and the
generate button is disabled while over it (`canSubmit` now checks
`length <= PROMPT_MAX`), so the limit is caught before the request.
This commit is contained in:
Paulo Sérgio Dantas 2026-07-01 01:22:54 -03:00
parent bfa018a4cd
commit ffd7b45eb3
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
resources/js/components/posts/create/AiPostWizard.vue
View file

@ -63,6 +63,8 @@ const selectedAccountId = ref<string | null>(null);
const includeImages = ref(true);
const imageCount = ref(2);
const promptText = ref('');
// Mirrors the backend validation (`prompt` max:2000) so the limit is visible in the UI.
const PROMPT_MAX = 2000;
const submitting = ref(false);
@ -160,7 +162,8 @@ const submittedImageCount = computed(() => {
const canSubmit = computed(() =>
selectedFormat.value !== null &&
selectedAccountId.value !== null &&
promptText.value.trim().length >= 3,
promptText.value.trim().length >= 3 &&
promptText.value.length <= PROMPT_MAX,
);
// Auto-pick the only account when format has exactly one match.
@ -358,6 +361,12 @@ const startGeneration = async () => {
:placeholder="$t('posts.create.steps.prompt_placeholder')"
class="min-h-[140px] resize-none"
/>
<p
class="text-right text-xs tabular-nums"
:class="promptText.length > PROMPT_MAX ? 'font-semibold text-destructive' : 'text-muted-foreground'"
>
{{ promptText.length }}/{{ PROMPT_MAX }}
</p>
</div>
<!-- Generate -->