<template>
    <div class="input-tools-panel">
        <div class="input-tools-list">
            <SendImg :session-id="sessionId" @sent="handleSent" />
            <SendFile :session-id="sessionId" @sent="handleSent" />
            <SendEvaluate v-if="!isInnerSession" :session-id="sessionId" @sent="handleSent" />
            <QuickReply ref="quickReplyRef" :session-id="sessionId" @append-text="handleAppendText"
                @sent="handleSent" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SendEvaluate from './sendEvaluate/index.vue';
import SendFile from './sendFile/index.vue';
import SendImg from './sendImg/index.vue';
import QuickReply from './quickReply/index.vue';

const props = defineProps<{
    sessionId: string;
    isInnerSession?: boolean;
}>();

const emit = defineEmits<{
    (event: 'sent'): void;
    (event: 'append-text', text: string): void;
}>();

const quickReplyRef = ref<InstanceType<typeof QuickReply> | null>(null);

const openQuickReply = () => {
    return quickReplyRef.value?.open();
};

defineExpose({
    openQuickReply,
});

const handleSent = () => {
    if (!props.sessionId) {
        return;
    }

    emit('sent');
};

const handleAppendText = (text: string) => {
    if (!props.sessionId || !text) {
        return;
    }

    emit('append-text', text);
    emit('sent');
};
</script>

<style scoped>
.input-tools-panel {
    margin-top: 8px;
}

.input-tools-list {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
</style>