95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { brand } from '@mento/shared';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
size?: number;
|
|
bubble?: string;
|
|
showBubble?: boolean;
|
|
}>(),
|
|
{
|
|
size: 170,
|
|
bubble: 'من دستیار هوشمند\nسیستم هستم 👋',
|
|
showBubble: true,
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mento-bot" :style="{ '--bot-size': `${size}px` }">
|
|
<div v-if="showBubble" class="popup">
|
|
<span>من دستیار هوشمند</span>
|
|
<span>سیستم هستم 👋</span>
|
|
<svg class="tail" viewBox="0 0 10 14" width="10" height="14" aria-hidden="true">
|
|
<path d="M10 0 L0 7 L10 14 Z" fill="#fff" />
|
|
</svg>
|
|
</div>
|
|
<img
|
|
class="bot-img"
|
|
src="/brand/mento-ai-avatar.png"
|
|
:alt="brand.aiNameFa"
|
|
:width="size"
|
|
:height="size"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mento-bot {
|
|
position: relative;
|
|
width: var(--bot-size);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.bot-img {
|
|
width: var(--bot-size);
|
|
height: auto;
|
|
display: block;
|
|
object-fit: contain;
|
|
background: transparent;
|
|
filter: drop-shadow(0 10px 22px rgba(34, 211, 238, 0.45));
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.popup {
|
|
position: absolute;
|
|
/* کمی پایینتر نسبت به بالای ربات */
|
|
top: 1.1rem;
|
|
left: calc(100% + 6px);
|
|
z-index: 2;
|
|
width: max-content;
|
|
max-width: 118px;
|
|
padding: 0.48rem 0.65rem 0.55rem;
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
color: #0f172a;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
text-align: right;
|
|
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
|
|
display: grid;
|
|
gap: 0.06rem;
|
|
}
|
|
|
|
.popup span {
|
|
display: block;
|
|
}
|
|
|
|
/* فلش روی ضلع چپ، کمی پایینتر از وسط */
|
|
.tail {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 62%;
|
|
width: 10px;
|
|
height: 14px;
|
|
transform: translate(-100%, -50%);
|
|
filter: drop-shadow(-1px 1px 1px rgba(15, 23, 42, 0.08));
|
|
pointer-events: none;
|
|
}
|
|
</style>
|