46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const props = defineProps<{
|
||
|
|
draftKey: string
|
||
|
|
draftItemIndex: number
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const { threadIsActive, addThreadItem, threadItems, removeThreadItem } = useThreadComposer(props.draftKey)
|
||
|
|
|
||
|
|
const isRemovableItem = computed(() => threadIsActive.value && props.draftItemIndex < threadItems.value.length - 1)
|
||
|
|
|
||
|
|
function addOrRemoveItem() {
|
||
|
|
if (isRemovableItem.value)
|
||
|
|
removeThreadItem(props.draftItemIndex)
|
||
|
|
|
||
|
|
else
|
||
|
|
addThreadItem()
|
||
|
|
}
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const label = computed(() => {
|
||
|
|
if (!isRemovableItem.value && props.draftItemIndex === 0)
|
||
|
|
return t('tooltip.start_thread')
|
||
|
|
|
||
|
|
return isRemovableItem.value ? t('tooltip.remove_thread_item') : t('tooltip.add_thread_item')
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div flex flex-row rounded-3 :class="{ 'bg-border': threadIsActive }">
|
||
|
|
<div
|
||
|
|
v-if="threadIsActive" dir="ltr" pointer-events-none pe-1 pt-2 pl-2 text-sm tabular-nums text-secondary flex
|
||
|
|
gap="0.5"
|
||
|
|
>
|
||
|
|
{{ draftItemIndex + 1 }}<span text-secondary-light>/</span><span text-secondary-light>{{ threadItems.length
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
<CommonTooltip placement="top" :content="label">
|
||
|
|
<button btn-action-icon :aria-label="label" @click="addOrRemoveItem">
|
||
|
|
<div v-if="isRemovableItem" i-ri:chat-delete-line />
|
||
|
|
<div v-else i-ri:chat-new-line />
|
||
|
|
</button>
|
||
|
|
</CommonTooltip>
|
||
|
|
</div>
|
||
|
|
</template>
|