<template>
    <pre class="prompt-tag"><span class="prompt-tag-text" style="padding-left: 10px;padding-right: 10px;text-align: center;">{{ promptTag }}</span></pre>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { useGlobalStore } from "@/store/global";
import _, { compact } from "lodash";
const { chatQWeb, updateActivityColor, updateTheme, updateFont } = useGlobalStore()

const promptTag = computed ( () => {
    return props.promptTag
})

const props = defineProps(['promptTag'])
const emit = defineEmits([''])
defineExpose({})
</script>

<style lang="scss" scoped>
.prompt-tag{
    border-radius: 4px;
    // border: 1px solid rgb(60, 169, 241);
    background-color: var(--activityColorPromptTag);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--activityColor);
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 20px;
    cursor: pointer;

}

.dark{
    .prompt-tag-text{
        filter: brightness(1.5);
    }
}
</style>