Add Smart Notes AI analysis and Mento Memory with user approval.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 14:29:34 +03:30
parent 4d9f3c04cd
commit d152d1c19f
20 changed files with 1577 additions and 9 deletions
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import type { MemoryItemDto, PaginatedResponse } from '@mento/shared';
+
+const props = defineProps<{
+  personId: string;
+}>();
+
+const loading = ref(false);
+const saving = ref(false);
+const error = ref('');
+const items = ref<MemoryItemDto[]>([]);
+const draft = ref('');
+const editingId = ref<string | null>(null);
+const editContent = ref('');
+
+const sourceLabel: Record<string, string> = {
+  note: 'از یادداشت',
+  manual: 'دستی',
+};
+
+async function load() {
+  if (!props.personId) return;
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<PaginatedResponse<MemoryItemDto>>('/memory', {
+      params: { personId: props.personId, limit: 100 },
+    });
+    items.value = data.items;
+  } catch {
+    error.value = 'بارگذاری حافظه مشتری ناموفق بود';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function addItem() {
+  if (!draft.value.trim()) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    await api.post('/memory', {
+      personId: props.personId,
+      content: draft.value.trim(),
+    });
+    draft.value = '';
+    await load();
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const msg = (e.response?.data as { message?: string | string[] })?.message;
+      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
+    } else {
+      error.value = 'ذخیره ناموفق بود';
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+
+function startEdit(item: MemoryItemDto) {
+  editingId.value = item.id;
+  editContent.value = item.content;
+}
+
+function cancelEdit() {
+  editingId.value = null;
+  editContent.value = '';
+}
+
+async function saveEdit(id: string) {
+  if (!editContent.value.trim()) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    await api.patch(`/memory/${id}`, { content: editContent.value.trim() });
+    cancelEdit();
+    await load();
+  } catch {
+    error.value = 'ویرایش ناموفق بود';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function removeItem(id: string) {
+  if (!confirm('این مورد از حافظه حذف شود؟')) return;
+  try {
+    await api.delete(`/memory/${id}`);
+    if (editingId.value === id) cancelEdit();
+    await load();
+  } catch {
+    error.value = 'حذف ناموفق بود';
+  }
+}
+
+function formatWhen(value: string) {
+  try {
+    return new Intl.DateTimeFormat('fa-IR', {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(value));
+  } catch {
+    return value;
+  }
+}
+
+const hasItems = computed(() => items.value.length > 0);
+
+watch(() => props.personId, load, { immediate: true });
+onMounted(load);
+</script>
+
+<template>
+  <section class="memory-panel">
+    <header>
+      <div>
+        <p class="eyebrow">Mento Memory</p>
+        <h2>حافظه مشتری</h2>
+        <p class="lead">نکات پایدار درباره این شخص — فقط با تأیید شما ذخیره می‌شود.</p>
+      </div>
+    </header>
+
+    <form class="add-form" @submit.prevent="addItem">
+      <textarea
+        v-model="draft"
+        rows="2"
+        placeholder="مثلاً: بودجه تا ۵۰۰ میلیون · ترجیح تماس صبح‌ها"
+      />
+      <button class="btn btn-ghost" type="submit" :disabled="saving || !draft.trim()">
+        افزودن
+      </button>
+    </form>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
+    <p v-else-if="!hasItems" class="muted">هنوز موردی در حافظه ثبت نشده.</p>
+
+    <ul v-else class="items">
+      <li v-for="item in items" :key="item.id">
+        <template v-if="editingId === item.id">
+          <textarea v-model="editContent" rows="2" />
+          <div class="row-actions">
+            <button type="button" class="btn" :disabled="saving" @click="saveEdit(item.id)">
+              ذخیره
+            </button>
+            <button type="button" class="btn btn-ghost" @click="cancelEdit">انصراف</button>
+          </div>
+        </template>
+        <template v-else>
+          <p class="content">{{ item.content }}</p>
+          <p class="meta">
+            <span>{{ sourceLabel[item.sourceType] ?? item.sourceType }}</span>
+            <span v-if="item.confirmedBy"> · {{ item.confirmedBy.fullName }}</span>
+            <span> · {{ formatWhen(item.updatedAt) }}</span>
+          </p>
+          <div class="row-actions">
+            <button type="button" @click="startEdit(item)">ویرایش</button>
+            <button type="button" class="danger" @click="removeItem(item.id)">حذف</button>
+          </div>
+        </template>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.memory-panel {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--accent);
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+h2 {
+  margin: 0.15rem 0 0;
+  font-size: 1.15rem;
+}
+
+.lead {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.add-form {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.6rem;
+  align-items: start;
+}
+
+textarea {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.75rem 0.9rem;
+  background: #fff;
+  font: inherit;
+  width: 100%;
+  resize: vertical;
+}
+
+.items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.items li {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.75rem 0.85rem;
+  background: #fff;
+}
+
+.content {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.meta {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.row-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.row-actions button {
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+}
+
+.row-actions button.danger {
+  color: #b42318;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.error {
+  color: #b42318;
+}
+</style>
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import type { NoteAiPayloadDto, NoteAiSuggestionDto } from '@mento/shared';
+
+const props = defineProps<{
+  noteId: string;
+  hasPerson: boolean;
+}>();
+
+const emit = defineEmits<{
+  applied: [];
+  dismissed: [];
+}>();
+
+const loading = ref(false);
+const applying = ref(false);
+const error = ref('');
+const suggestion = ref<NoteAiSuggestionDto | null>(null);
+const applyNextAction = ref(true);
+const selectedMemory = reactive<Record<number, boolean>>({});
+const nextTitle = ref('');
+const nextDueAt = ref('');
+const memoryEdits = reactive<Record<number, string>>({});
+
+const payload = computed(() => suggestion.value?.payload ?? null);
+const isPending = computed(() => suggestion.value?.status === 'pending');
+const memoryItems = computed(() => payload.value?.memoryItems ?? []);
+
+watch(
+  () => props.noteId,
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
+
+watch(payload, (value) => {
+  if (!value) return;
+  applyNextAction.value = Boolean(value.nextAction);
+  nextTitle.value = value.nextAction?.title ?? '';
+  nextDueAt.value = value.nextAction?.dueAt
+    ? value.nextAction.dueAt.slice(0, 16)
+    : '';
+  value.memoryItems.forEach((item, index) => {
+    selectedMemory[index] = true;
+    memoryEdits[index] = item.content;
+  });
+});
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<NoteAiSuggestionDto | null>(
+      `/notes/${props.noteId}/ai-suggestion`,
+    );
+    suggestion.value = data;
+  } catch {
+    suggestion.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function analyze() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.post<NoteAiSuggestionDto>(
+      `/notes/${props.noteId}/analyze`,
+    );
+    suggestion.value = data;
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const msg = (e.response?.data as { message?: string | string[] })?.message;
+      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'تحلیل ناموفق بود');
+    } else {
+      error.value = 'تحلیل ناموفق بود';
+    }
+    await load();
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function apply() {
+  if (!payload.value || !isPending.value) return;
+  applying.value = true;
+  error.value = '';
+  try {
+    const memoryIndices = memoryItems.value
+      .map((_, index) => index)
+      .filter((index) => selectedMemory[index]);
+
+    await api.post(`/notes/${props.noteId}/ai-suggestion/apply`, {
+      applyNextAction: applyNextAction.value && Boolean(nextTitle.value.trim()),
+      memoryIndices: props.hasPerson ? memoryIndices : [],
+      nextAction: applyNextAction.value
+        ? {
+            title: nextTitle.value.trim(),
+            description: payload.value.nextAction?.description,
+            dueAt: nextDueAt.value
+              ? new Date(nextDueAt.value).toISOString()
+              : null,
+          }
+        : undefined,
+      memoryItems: memoryIndices.map((index) => ({
+        index,
+        content: memoryEdits[index]?.trim() || memoryItems.value[index]?.content,
+      })),
+    });
+    await load();
+    emit('applied');
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const msg = (e.response?.data as { message?: string | string[] })?.message;
+      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'اعمال پیشنهاد ناموفق بود');
+    } else {
+      error.value = 'اعمال پیشنهاد ناموفق بود';
+    }
+  } finally {
+    applying.value = false;
+  }
+}
+
+async function dismiss() {
+  applying.value = true;
+  error.value = '';
+  try {
+    await api.post(`/notes/${props.noteId}/ai-suggestion/dismiss`);
+    await load();
+    emit('dismissed');
+  } catch {
+    error.value = 'رد پیشنهاد ناموفق بود';
+  } finally {
+    applying.value = false;
+  }
+}
+
+function formatPayloadSummary(value: NoteAiPayloadDto | null) {
+  if (!value?.summary) return '';
+  return value.summary;
+}
+</script>
+
+<template>
+  <section class="ai-panel">
+    <header>
+      <strong>پیشنهاد Mento AI</strong>
+      <button
+        v-if="!isPending"
+        type="button"
+        class="link"
+        :disabled="loading"
+        @click="analyze"
+      >
+        {{ loading ? '…' : 'تحلیل مجدد' }}
+      </button>
+      <button
+        v-else-if="!suggestion"
+        type="button"
+        class="link"
+        :disabled="loading"
+        @click="analyze"
+      >
+        {{ loading ? 'در حال تحلیل…' : 'تحلیل با AI' }}
+      </button>
+    </header>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !suggestion" class="muted">در حال تحلیل یادداشت…</p>
+    <p v-else-if="suggestion?.status === 'failed'" class="error">
+      {{ suggestion.errorMessage || 'تحلیل ناموفق بود' }}
+      <button type="button" class="link" @click="analyze">تلاش دوباره</button>
+    </p>
+    <p v-else-if="!suggestion" class="muted">
+      <button type="button" class="link" :disabled="loading" @click="analyze">
+        تحلیل این یادداشت با AI
+      </button>
+    </p>
+
+    <template v-else-if="isPending && payload">
+      <p v-if="formatPayloadSummary(payload)" class="summary">{{ formatPayloadSummary(payload) }}</p>
+
+      <div v-if="payload.nextAction" class="block">
+        <label class="check">
+          <input v-model="applyNextAction" type="checkbox" />
+          کار بعدی
+        </label>
+        <input v-model="nextTitle" type="text" placeholder="عنوان کار بعدی" />
+        <input v-model="nextDueAt" type="datetime-local" />
+      </div>
+
+      <div v-if="memoryItems.length" class="block">
+        <p class="block-title">حافظه مشتری (با تأیید شما ذخیره می‌شود)</p>
+        <p v-if="!hasPerson" class="warn">برای ذخیره حافظه، یادداشت باید به یک شخص متصل باشد.</p>
+        <label
+          v-for="(_, index) in memoryItems"
+          :key="index"
+          class="memory-row"
+        >
+          <input
+            v-model="selectedMemory[index]"
+            type="checkbox"
+            :disabled="!hasPerson"
+          />
+          <textarea v-model="memoryEdits[index]" rows="2" />
+        </label>
+      </div>
+
+      <div class="actions">
+        <button type="button" class="btn" :disabled="applying" @click="apply">
+          {{ applying ? '…' : 'اعمال انتخاب‌شده' }}
+        </button>
+        <button type="button" class="btn btn-ghost" :disabled="applying" @click="dismiss">
+          رد کردن
+        </button>
+      </div>
+    </template>
+
+    <p v-else-if="suggestion?.status === 'applied'" class="muted ok">پیشنهاد اعمال شد.</p>
+    <p v-else-if="suggestion?.status === 'dismissed'" class="muted">پیشنهاد رد شد.</p>
+  </section>
+</template>
+
+<style scoped>
+.ai-panel {
+  margin-top: 0.75rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px dashed var(--accent);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.65);
+  display: grid;
+  gap: 0.6rem;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.link {
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+}
+
+.block {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.block-title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.check {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.memory-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.45rem;
+  align-items: start;
+}
+
+input[type='text'],
+input[type='datetime-local'],
+textarea {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  width: 100%;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.summary {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.muted {
+  margin: 0;
+  color: var(--muted);
+}
+
+.ok {
+  color: #067647;
+}
+
+.warn {
+  margin: 0;
+  color: #b54708;
+  font-size: 0.88rem;
+}
+
+.error {
+  margin: 0;
+  color: #b42318;
+}
+</style>