Source: components/chat-toolbar.vue

<template>
    <div>
        <div class="row">
            <autocomplete :options="options.models" v-model="options.selectedModel" :label="$t('Model')"
                style="width:250px;" :searchable="false" :clearable="false" :bg-color="bgColor" />
        </div>
        <div class="row">
            <q-checkbox class="q-pa-none q-ml-sm" v-model="options.saveMessages" :label="$t('Save messages')" left-label
                dense />
        </div>
        <div class="row">
            <a @click="deleteAllMessages" class="q-ml-sm" style="cursor:pointer;">{{ $t('Delete all messages') }}</a>
        </div>
    </div>
</template>

<script lang='js'>
/**
 * Represents the toolbar component for the chat feature.
 * 
 * @component
 * @name ChatToolbar
 * @async
 * @example 
 * <chat-toolbar :data="data" :bg-color="bgColor" />
 */

import Autocomplete from "./autocomplete.vue";

export default {
    name: "ChatToolbar",
    components: {
        Autocomplete
    },
    props: {
        data: {},
        bgColor: { type: String, default: "white" },
    },
    data() {
        return {
            options: {},
        }
    },
    async mounted() {
        this.options = this.data;
    },
    methods: {

        /**
         * Deletes all messages in the chat.
         * 
         * @async
         * @returns {Promise<void>} A promise that resolves when all messages are deleted.
         */
        async deleteAllMessages() {
            if (await this.confirmDialog(this.$t('Are you sure you want to delete all messages?'))) {
                this.post("Chat/DeleteAllMessages");
            }
            this.options.messages = [];
        },
    }
}

</script>