added support for discussions on applications
This commit is contained in:
71
ui/src/components/application/ApplicationChat.vue
Normal file
71
ui/src/components/application/ApplicationChat.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import { Form } from 'vee-validate'
|
||||
import {
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import Textarea from '@/components/ui/textarea/Textarea.vue'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
|
||||
const props = defineProps<{
|
||||
messages: Array<Record<string, any>>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'post', text: string): void
|
||||
}>()
|
||||
|
||||
const commentSchema = toTypedSchema(
|
||||
z.object({
|
||||
text: z.string().trim().min(1, 'Required').max(2000, 'Max 2000 characters'),
|
||||
})
|
||||
)
|
||||
|
||||
// vee-validate passes (values, actions) to @submit
|
||||
function onSubmit(values: { text: string }, { resetForm }: { resetForm: () => void }) {
|
||||
emit('post', values.text.trim())
|
||||
resetForm()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<Form :validation-schema="commentSchema" @submit="onSubmit">
|
||||
<FormField name="text" v-slot="{ componentField }">
|
||||
<FormItem>
|
||||
<FormLabel class="sr-only">Comment</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
v-bind="componentField"
|
||||
rows="3"
|
||||
placeholder="Write a comment…"
|
||||
class="bg-neutral-800 resize-none w-full"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Button below, right-aligned -->
|
||||
<div class="mt-2 flex justify-end">
|
||||
<Button type="submit">Post</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<!-- Existing posts -->
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="(m, i) in props.messages"
|
||||
:key="m.id ?? i"
|
||||
class="rounded-md border border-neutral-800 p-3"
|
||||
>
|
||||
<p class="text-sm whitespace-pre-wrap">{{ m.text ?? m.message ?? '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user