rag/resources/js/Pages/Chat.vue

<script setup lang="ts">
import AppLayout from "@/Layouts/AppLayout.vue"
import {ArrowUpIcon} from "lucide-vue-next"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger
} from "@/Packages/Shadcn/Components/ui/dropdown-menu"
import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupText,
    InputGroupTextarea
} from "@/Packages/Shadcn/Components/ui/input-group"
import {Separator} from "@/Packages/Shadcn/Components/ui/separator"
import {nextTick, reactive, ref} from "vue";
import {useForm} from "@inertiajs/vue3";

const messages = reactive<Array<string>>([])
const form = useForm({
    message: null
})

const submit = function () {
    messages.push({from: 'user', text: form.message})
    messages.push({from: 'ai', text: form.message})
    form.reset()
}

const handleEnter = function (e) {
    if (e.metaKey || e.ctrlKey) {
        const {selectionStart, selectionEnd, value} = e.target
        form.message = value.slice(0, selectionStart) + '\n' + value.slice(selectionEnd)
        nextTick(() => {
            const pos = selectionStart + 1
            e.target.setSelectionRange(pos, pos)
        })
    } else submit()
}

</script>

<template>
    <AppLayout page-class="!py-0">
        <div class="max-w-4xl mx-auto flex flex-col h-full">
            <div class="overflow-y-auto duration-500" :class="{'grow mt-2': messages.length !== 0}">
                <div v-for="message in messages">
                    <div class="flex" v-if="message.from === 'user'">
                        <div class="ml-auto border bg-card text-card-foreground p-2 rounded-lg max-w-[75%]">
                            {{ message.text }}
                        </div>
                    </div>
                    <div v-else>{{ message.text }}</div>
                </div>
                <!--                <div class=""></div>-->
            </div>

            <div class="my-auto pb-2" :class="{'sticky bottom-0': messages.length !== 0}">
                <InputGroup class="!bg-card">
                    <InputGroupTextarea placeholder="Ask, Search or Chat..." v-model="form.message"
                                        @keydown.enter.prevent="handleEnter"/>
                    <InputGroupAddon align="block-end">
                        <!--                <InputGroupButton-->
                        <!--                    variant="outline"-->
                        <!--                    class="rounded-full"-->
                        <!--                    size="icon-xs"-->
                        <!--                >-->
                        <!--                    <PlusIcon class="size-4"/>-->
                        <!--                </InputGroupButton>-->
                        <DropdownMenu>
                            <DropdownMenuTrigger as-child>
                                <InputGroupButton variant="ghost">
                                    Модель 1
                                </InputGroupButton>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent side="top" align="start">
                                <DropdownMenuItem>Модель 1</DropdownMenuItem>
                                <DropdownMenuItem>Модель 2</DropdownMenuItem>
                                <DropdownMenuItem>Модель 3</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        <InputGroupText class="ml-auto">
                            123 токенов
                        </InputGroupText>
                        <Separator orientation="vertical" class="!h-4"/>
                        <InputGroupButton class="cursor-pointer" variant="default" size="icon-xs"
                                          @click="() => submit()">
                            <ArrowUpIcon class="size-4"/>
                            <span class="sr-only">Отправить</span>
                        </InputGroupButton>
                    </InputGroupAddon>
                </InputGroup>
            </div>
        </div>
    </AppLayout>
</template>

<style scoped>

</style>