Creating a modal for the assistant

apps/web/src/components/dashboard/HomeAiAssistant.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { RouterLink } from 'vue-router';
 import axios from 'axios';
 import UiIcon from '@/components/UiIcon.vue';
 import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
+import { UiButton, UiModal } from '@/components/ui';
 import { api } from '@/lib/api';
 import { brand, type ActivityType, type AskMentoSourceDto, type PersonDto, type VoiceCommandDraft } from '@mento/shared';
 
@@ -18,6 +19,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:askQuery': [value: string];
   ask: [preset?: string];
+  clear: [];
 }>();
 
 const shortcuts = [
@@ -67,11 +69,23 @@ function looksLikeAction(text: string) {
   return /بساز|بسازید|ثبت کن|ثبت کنید|اضافه کن|ایجاد کن|یک مشتری|مشتری جدید|یک فعالیت|فعالیت جدید/.test(text);
 }
 
+function formatDue(iso: string) {
+  try {
+    return new Intl.DateTimeFormat('fa-IR', {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+
 async function parseCommand(text: string, fallbackToAsk: boolean) {
   voiceBusy.value = true;
   voiceError.value = '';
   voiceDone.value = '';
   draft.value = null;
+  emit('clear');
   try {
     const { data } = await api.post<VoiceCommandDraft>('/ai/voice-command', { text });
     if (data.intent === 'none') {
@@ -148,6 +162,7 @@ async function confirmDraft() {
       voiceDone.value = `فعالیت «${a.title}» ثبت شد.`;
     }
     draft.value = null;
+    emit('clear');
   } catch (e) {
     voiceError.value = apiMessage(e, 'انجام دستور ناموفق بود.');
   } finally {
@@ -156,8 +171,18 @@ async function confirmDraft() {
 }
 
 function cancelDraft() {
+  if (confirming.value) return;
   draft.value = null;
 }
+
+watch(
+  () => props.asking,
+  (active) => {
+    if (!active) return;
+    voiceDone.value = '';
+    voiceError.value = '';
+  },
+);
 </script>
 
 <template>
@@ -194,36 +219,11 @@ function cancelDraft() {
     </div>
 
     <div v-if="voiceBusy" class="ai-answer"><p>در حال فهمیدن دستور…</p></div>
-    <div v-else-if="draft && draft.intent !== 'none'" class="confirm">
-      <p>{{ draft.summary }}</p>
-      <ul v-if="draft.person">
-        <li>نام: {{ draft.person.firstName }} {{ draft.person.lastName }}</li>
-        <li v-if="draft.person.mobile">موبایل: {{ draft.person.mobile }}</li>
-        <li v-if="draft.person.phone">تلفن: {{ draft.person.phone }}</li>
-        <li v-if="draft.person.email">ایمیل: {{ draft.person.email }}</li>
-        <li v-if="draft.person.website">وب‌سایت: {{ draft.person.website }}</li>
-        <li v-if="draft.person.referrer">معرف: {{ draft.person.referrer }}</li>
-      </ul>
-      <ul v-else-if="draft.activity">
-        <li>عنوان: {{ draft.activity.title }}</li>
-        <li>نوع: {{ ACTIVITY_LABEL[draft.activity.type] }}</li>
-        <li v-if="draft.activity.personName">
-          مشتری: {{ draft.activity.personName }}
-          <span v-if="!draft.activity.personId"> (لینک نشد)</span>
-        </li>
-      </ul>
-      <p v-if="draft.missing.length" class="ai-error">ناقص است: {{ draft.missing.join('، ') }}</p>
-      <div class="confirm-actions">
-        <button type="button" class="ok" :disabled="!draft.canConfirm || confirming" @click="confirmDraft">
-          {{ confirming ? 'در حال ثبت…' : 'تأیید و انجام' }}
-        </button>
-        <button type="button" class="no" :disabled="confirming" @click="cancelDraft">انصراف</button>
-      </div>
-    </div>
-    <div v-if="voiceDone" class="ai-answer"><p>{{ voiceDone }}</p></div>
-    <p v-if="voiceError" class="ai-error">{{ voiceError }}</p>
-    <p v-if="error" class="ai-error">{{ error }}</p>
-    <div v-if="asking" class="ai-answer">
+    <div v-else-if="confirming" class="ai-answer"><p>در حال ثبت…</p></div>
+    <div v-else-if="voiceDone" class="ai-answer"><p>{{ voiceDone }}</p></div>
+    <p v-else-if="voiceError" class="ai-error">{{ voiceError }}</p>
+    <p v-else-if="error" class="ai-error">{{ error }}</p>
+    <div v-else-if="asking" class="ai-answer">
       <p>در حال پاسخ…</p>
     </div>
     <div v-else-if="answer" class="ai-answer">
@@ -251,6 +251,44 @@ function cancelDraft() {
         <UiIcon name="send" :size="15" />
       </button>
     </form>
+
+    <UiModal
+      :open="Boolean(draft && draft.intent !== 'none')"
+      :title="draft?.intent === 'create_person' ? 'تأیید ساخت مشتری' : 'تأیید ثبت فعالیت'"
+      @close="cancelDraft"
+    >
+      <p v-if="draft" class="modal-lead">{{ draft.summary }}</p>
+      <dl v-if="draft?.person" class="modal-fields">
+        <div><dt>نام</dt><dd>{{ draft.person.firstName }} {{ draft.person.lastName }}</dd></div>
+        <div v-if="draft.person.mobile"><dt>موبایل</dt><dd dir="ltr">{{ draft.person.mobile }}</dd></div>
+        <div v-if="draft.person.phone"><dt>تلفن</dt><dd dir="ltr">{{ draft.person.phone }}</dd></div>
+        <div v-if="draft.person.email"><dt>ایمیل</dt><dd dir="ltr">{{ draft.person.email }}</dd></div>
+        <div v-if="draft.person.website"><dt>وب‌سایت</dt><dd dir="ltr">{{ draft.person.website }}</dd></div>
+        <div v-if="draft.person.referrer"><dt>معرف</dt><dd>{{ draft.person.referrer }}</dd></div>
+        <div v-if="draft.person.position"><dt>سمت</dt><dd>{{ draft.person.position }}</dd></div>
+        <div v-if="draft.person.notes"><dt>یادداشت</dt><dd>{{ draft.person.notes }}</dd></div>
+      </dl>
+      <dl v-else-if="draft?.activity" class="modal-fields">
+        <div><dt>عنوان</dt><dd>{{ draft.activity.title }}</dd></div>
+        <div><dt>نوع</dt><dd>{{ ACTIVITY_LABEL[draft.activity.type] }}</dd></div>
+        <div v-if="draft.activity.dueAt"><dt>زمان</dt><dd>{{ formatDue(draft.activity.dueAt) }}</dd></div>
+        <div v-if="draft.activity.description"><dt>توضیح</dt><dd>{{ draft.activity.description }}</dd></div>
+        <div v-if="draft.activity.personName">
+          <dt>مشتری</dt>
+          <dd>
+            {{ draft.activity.personName }}
+            <span v-if="!draft.activity.personId" class="warn">بدون لینک به پرونده</span>
+          </dd>
+        </div>
+      </dl>
+      <p v-if="draft?.missing.length" class="ai-error">ناقص است: {{ draft.missing.join('، ') }}</p>
+      <template #footer>
+        <UiButton variant="ghost" :disabled="confirming" @click="cancelDraft">انصراف</UiButton>
+        <UiButton variant="primary" :disabled="!draft?.canConfirm || confirming" :loading="confirming" @click="confirmDraft">
+          تأیید و انجام
+        </UiButton>
+      </template>
+    </UiModal>
   </article>
 </template>
 
@@ -274,57 +312,48 @@ function cancelDraft() {
   gap: 0.5rem;
 }
 
-.confirm {
-  background: #fffbeb;
-  border: 1px solid #fde68a;
-  border-radius: var(--radius);
-  padding: 0.7rem 0.8rem;
-  margin-bottom: 0.75rem;
-}
-
-.confirm p,
-.confirm li {
-  margin: 0;
-  color: #78350f;
-  font-size: 0.8rem;
+.modal-lead {
+  margin: 0 0 0.85rem;
+  color: #334155;
+  font-size: 0.9rem;
   line-height: 1.7;
 }
 
-.confirm ul {
-  margin: 0.35rem 0 0;
-  padding: 0 1rem 0 0;
+.modal-fields {
+  margin: 0;
+  display: grid;
+  gap: 0.45rem;
 }
 
-.confirm-actions {
-  display: flex;
-  gap: 0.4rem;
-  margin-top: 0.55rem;
-}
-
-.confirm-actions button {
-  border: 0;
+.modal-fields div {
+  display: grid;
+  grid-template-columns: 5.5rem 1fr;
+  gap: 0.6rem;
+  align-items: start;
+  padding: 0.55rem 0.7rem;
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
   border-radius: var(--radius);
-  padding: 0.4rem 0.7rem;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 700;
-  cursor: pointer;
 }
 
-.confirm-actions .ok {
-  background: #0f766e;
-  color: #fff;
-}
-
-.confirm-actions .ok:disabled,
-.confirm-actions .no:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.confirm-actions .no {
-  background: transparent;
+.modal-fields dt {
+  margin: 0;
   color: #64748b;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.modal-fields dd {
+  margin: 0;
+  color: #0f172a;
+  font-size: 0.88rem;
+}
+
+.warn {
+  display: inline-block;
+  margin-inline-start: 0.35rem;
+  color: #b45309;
+  font-size: 0.75rem;
 }
 
 h2 {

apps/web/src/views/HomeView.vue

@@ -77,6 +77,12 @@ function formatTrendAmount(value: number) {
   return formatMoney(value, home.value?.currency ?? 'IRR');
 }
 
+function clearAsk() {
+  askAnswer.value = '';
+  askError.value = '';
+  askSources.value = [];
+}
+
 async function submitAsk(preset?: string) {
   const q = (preset || askQuery.value).trim();
   if (!q || asking.value) return;
@@ -181,6 +187,7 @@ onUnmounted(() => {
           :error="askError"
           :sources="askSources"
           @ask="submitAsk"
+          @clear="clearAsk"
         />
       </div>