alighasami
3d5eaf9445
Security: Sync from Public / sync-from-public (push) Has been cancelled
Test: Benchmark Nightly / build (push) Has been cancelled
Test: Benchmark Nightly / Notify Cats on failure (push) Has been cancelled
CI: Python / Checks (push) Has been cancelled
Test: Evals Python / Workflow Comparison Python (push) Has been cancelled
Util: Check Docs URLs / check-docs-urls (push) Has been cancelled
Test: Visual Storybook / Cloudflare Pages (push) Has been cancelled
Test: E2E Performance / build-and-test-performance (push) Has been cancelled
Test: Workflows Nightly / Run Workflow Tests (push) Has been cancelled
Util: Cleanup CI Docker Images / Delete stale CI images (push) Has been cancelled
Test: Benchmark Destroy Env / build (push) Has been cancelled
Util: Update Node Popularity / update-popularity (push) Has been cancelled
Test: E2E Coverage Weekly / Coverage Tests (push) Has been cancelled
98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
import { useI18n } from '../../composables/useI18n';
|
|
import AssistantIcon from '../AskAssistantIcon/AssistantIcon.vue';
|
|
import AssistantText from '../AskAssistantText/AssistantText.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const hovering = ref(false);
|
|
|
|
const props = defineProps<{ unreadCount?: number; type?: 'assistant' | 'builder' }>();
|
|
|
|
const emit = defineEmits<{
|
|
click: [e: MouseEvent];
|
|
}>();
|
|
|
|
const onClick = (e: MouseEvent) => emit('click', e);
|
|
|
|
function onMouseEnter() {
|
|
hovering.value = true;
|
|
}
|
|
|
|
function onMouseLeave() {
|
|
hovering.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="$style.button"
|
|
@mouseenter="onMouseEnter"
|
|
@mouseleave="onMouseLeave"
|
|
@click="onClick"
|
|
>
|
|
<div v-if="props.unreadCount" :class="$style.num">
|
|
{{ props.unreadCount }}
|
|
</div>
|
|
<AssistantIcon v-else size="large" :theme="hovering ? 'blank' : 'default'" />
|
|
<div v-show="hovering" :class="$style.text">
|
|
<div>
|
|
<AssistantText
|
|
:text="
|
|
type === 'builder'
|
|
? t('assistantChat.builder.name')
|
|
: t('askAssistantButton.askAssistant')
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.button {
|
|
border: var(--border);
|
|
background: var(--color--foreground--tint-2);
|
|
border-radius: var(--radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 42px;
|
|
width: 42px;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: var(--assistant--color--highlight-gradient--reverse);
|
|
|
|
> div {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.num {
|
|
color: var(--color--neutral-white);
|
|
background: var(--assistant--color--highlight-gradient--reverse);
|
|
border-radius: 50%;
|
|
width: var(--spacing--sm);
|
|
height: var(--spacing--sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size--3xs);
|
|
}
|
|
|
|
.text {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: end;
|
|
width: 100px;
|
|
right: 48px;
|
|
}
|
|
</style>
|