Add Ask Mento, customer mood, and Pipecat speech-to-text.
Ship assistant answers, contact moods, voice dictation, and the related CRM UI so these can be deployed to production. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,437 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import type { RouteLocationRaw } from 'vue-router';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const FAB_SIZE = 56;
|
||||
const FAB_MARGIN = 20;
|
||||
const POS_KEY = 'mento.quickCreateFab';
|
||||
|
||||
type FabPos = { left: number; top: number };
|
||||
|
||||
type ItemIcon = 'user' | 'building' | 'dollar' | 'calendar-plus' | 'document';
|
||||
|
||||
const items: Array<{
|
||||
key: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: ItemIcon;
|
||||
tone: string;
|
||||
to: RouteLocationRaw;
|
||||
}> = [
|
||||
{
|
||||
key: 'person',
|
||||
title: 'افزودن شخص',
|
||||
desc: 'مخاطب جدید را ثبت کنید',
|
||||
icon: 'user',
|
||||
tone: 'person',
|
||||
to: { name: 'person-new' },
|
||||
},
|
||||
{
|
||||
key: 'company',
|
||||
title: 'افزودن شرکت',
|
||||
desc: 'شرکت یا سازمان جدید اضافه کنید',
|
||||
icon: 'building',
|
||||
tone: 'company',
|
||||
to: { name: 'company-new' },
|
||||
},
|
||||
{
|
||||
key: 'deal',
|
||||
title: 'افزودن معامله',
|
||||
desc: 'فرصت یا معامله جدید ایجاد کنید',
|
||||
icon: 'dollar',
|
||||
tone: 'deal',
|
||||
to: { name: 'deal-new' },
|
||||
},
|
||||
{
|
||||
key: 'activity',
|
||||
title: 'افزودن فعالیت',
|
||||
desc: 'تماس، جلسه، ایمیل و ... ثبت کنید',
|
||||
icon: 'calendar-plus',
|
||||
tone: 'activity',
|
||||
to: { name: 'activity-new' },
|
||||
},
|
||||
{
|
||||
key: 'note',
|
||||
title: 'افزودن کارت (یادداشت)',
|
||||
desc: 'یادداشت یا کارت جدید ایجاد کنید',
|
||||
icon: 'document',
|
||||
tone: 'note',
|
||||
to: { name: 'notes' },
|
||||
},
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const hidden = computed(() => route.name === 'person-detail');
|
||||
const isQuickCreateOpen = ref(false);
|
||||
const ready = ref(false);
|
||||
const fabPos = ref<FabPos>({ left: FAB_MARGIN, top: FAB_MARGIN });
|
||||
const viewport = ref({ w: 1280, h: 800 });
|
||||
const dragging = ref(false);
|
||||
let dragMoved = false;
|
||||
let dragOffsetX = 0;
|
||||
let dragOffsetY = 0;
|
||||
|
||||
function defaultPos(): FabPos {
|
||||
return {
|
||||
left: FAB_MARGIN,
|
||||
top: Math.max(FAB_MARGIN, viewport.value.h - FAB_MARGIN - FAB_SIZE),
|
||||
};
|
||||
}
|
||||
|
||||
function clampPos(pos: FabPos): FabPos {
|
||||
const margin = 8;
|
||||
return {
|
||||
left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
|
||||
top: Math.min(Math.max(margin, pos.top), viewport.value.h - FAB_SIZE - margin),
|
||||
};
|
||||
}
|
||||
|
||||
function loadPos() {
|
||||
try {
|
||||
const raw = localStorage.getItem(POS_KEY);
|
||||
if (!raw) {
|
||||
fabPos.value = defaultPos();
|
||||
return;
|
||||
}
|
||||
const parsed = JSON.parse(raw) as FabPos;
|
||||
if (typeof parsed.left !== 'number' || typeof parsed.top !== 'number') {
|
||||
fabPos.value = defaultPos();
|
||||
return;
|
||||
}
|
||||
fabPos.value = clampPos(parsed);
|
||||
} catch {
|
||||
fabPos.value = defaultPos();
|
||||
}
|
||||
}
|
||||
|
||||
function savePos() {
|
||||
localStorage.setItem(POS_KEY, JSON.stringify(fabPos.value));
|
||||
}
|
||||
|
||||
function onFabPointerDown(ev: PointerEvent) {
|
||||
if (ev.button !== 0) return;
|
||||
dragMoved = false;
|
||||
dragOffsetX = ev.clientX - fabPos.value.left;
|
||||
dragOffsetY = ev.clientY - fabPos.value.top;
|
||||
(ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId);
|
||||
}
|
||||
|
||||
function onFabPointerMove(ev: PointerEvent) {
|
||||
if (!((ev.currentTarget as HTMLElement).hasPointerCapture?.(ev.pointerId))) return;
|
||||
const next = clampPos({
|
||||
left: ev.clientX - dragOffsetX,
|
||||
top: ev.clientY - dragOffsetY,
|
||||
});
|
||||
if (
|
||||
Math.abs(next.left - fabPos.value.left) > 4 ||
|
||||
Math.abs(next.top - fabPos.value.top) > 4
|
||||
) {
|
||||
dragMoved = true;
|
||||
dragging.value = true;
|
||||
}
|
||||
if (dragMoved) fabPos.value = next;
|
||||
}
|
||||
|
||||
function onFabPointerUp(ev: PointerEvent) {
|
||||
(ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
|
||||
if (dragMoved) {
|
||||
fabPos.value = clampPos(fabPos.value);
|
||||
savePos();
|
||||
dragging.value = false;
|
||||
return;
|
||||
}
|
||||
dragging.value = false;
|
||||
toggle();
|
||||
}
|
||||
|
||||
function syncViewport() {
|
||||
viewport.value = { w: window.innerWidth, h: window.innerHeight };
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
syncViewport();
|
||||
fabPos.value = clampPos(fabPos.value);
|
||||
}
|
||||
|
||||
const fabStyle = computed(() => ({
|
||||
left: `${fabPos.value.left}px`,
|
||||
top: `${fabPos.value.top}px`,
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
}));
|
||||
|
||||
const panelStyle = computed(() => {
|
||||
const gap = 18;
|
||||
const width = Math.min(390, viewport.value.w - 32);
|
||||
let left = fabPos.value.left;
|
||||
left = Math.min(left, viewport.value.w - width - 16);
|
||||
left = Math.max(16, left);
|
||||
const spaceAbove = fabPos.value.top;
|
||||
const placeAbove = spaceAbove > 360;
|
||||
if (placeAbove) {
|
||||
return {
|
||||
left: `${left}px`,
|
||||
right: 'auto',
|
||||
bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
|
||||
top: 'auto',
|
||||
width: `${width}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: `${left}px`,
|
||||
right: 'auto',
|
||||
top: `${fabPos.value.top + FAB_SIZE + gap}px`,
|
||||
bottom: 'auto',
|
||||
width: `${width}px`,
|
||||
};
|
||||
});
|
||||
|
||||
function close() {
|
||||
isQuickCreateOpen.value = false;
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
isQuickCreateOpen.value = !isQuickCreateOpen.value;
|
||||
}
|
||||
|
||||
function go(to: RouteLocationRaw) {
|
||||
close();
|
||||
void router.push(to);
|
||||
}
|
||||
|
||||
function onKeydown(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape' && isQuickCreateOpen.value) {
|
||||
ev.preventDefault();
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
watch(isQuickCreateOpen, (value) => {
|
||||
document.body.style.overflow = value ? 'hidden' : '';
|
||||
});
|
||||
|
||||
watch(hidden, (value) => {
|
||||
if (value) close();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
close();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
syncViewport();
|
||||
loadPos();
|
||||
ready.value = true;
|
||||
window.addEventListener('resize', onResize);
|
||||
window.addEventListener('keydown', onKeydown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
window.removeEventListener('keydown', onKeydown);
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="!hidden" class="qc" dir="rtl">
|
||||
<button
|
||||
v-if="isQuickCreateOpen"
|
||||
class="overlay"
|
||||
type="button"
|
||||
aria-label="بستن ایجاد سریع"
|
||||
@click="close"
|
||||
/>
|
||||
|
||||
<section
|
||||
v-if="isQuickCreateOpen"
|
||||
class="panel"
|
||||
aria-labelledby="qc-title"
|
||||
:style="panelStyle"
|
||||
>
|
||||
<h2 id="qc-title">ایجاد سریع</h2>
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
class="item"
|
||||
type="button"
|
||||
@click="go(item.to)"
|
||||
>
|
||||
<span class="ico" :class="item.tone">
|
||||
<UiIcon :name="item.icon" :size="26" />
|
||||
</span>
|
||||
<span class="copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<small>{{ item.desc }}</small>
|
||||
</span>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<button
|
||||
v-if="ready"
|
||||
class="fab"
|
||||
type="button"
|
||||
:class="{ dragging }"
|
||||
:style="fabStyle"
|
||||
:aria-expanded="isQuickCreateOpen"
|
||||
:aria-label="isQuickCreateOpen ? 'بستن ایجاد سریع' : 'ایجاد سریع'"
|
||||
@pointerdown="onFabPointerDown"
|
||||
@pointermove="onFabPointerMove"
|
||||
@pointerup="onFabPointerUp"
|
||||
@pointercancel="onFabPointerUp"
|
||||
>
|
||||
<UiIcon :name="isQuickCreateOpen ? 'x' : 'plus'" :size="22" />
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qc {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: fixed;
|
||||
z-index: 92;
|
||||
width: 390px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 28px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0 0 16px;
|
||||
text-align: right;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #eef1f2;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
|
||||
font: inherit;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ico {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ico.person {
|
||||
background: #0d9488;
|
||||
}
|
||||
|
||||
.ico.company {
|
||||
background: #22d3ee;
|
||||
}
|
||||
|
||||
.ico.deal {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.ico.activity {
|
||||
background: #f97316;
|
||||
}
|
||||
|
||||
.ico.note {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.copy strong {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.copy small {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
z-index: 93;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #14b8a6;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
line-height: 0;
|
||||
direction: ltr;
|
||||
box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.fab :deep(.ico) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
stroke-width: 1.75;
|
||||
}
|
||||
|
||||
.fab.dragging {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 8px 18px rgba(13, 148, 136, 0.34);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user