Edit a modal for the assistant

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

@@ -54,6 +54,7 @@ const voiceError = ref('');
 const voiceDone = ref('');
 const draft = ref<VoiceCommandDraft | null>(null);
 const confirming = ref(false);
+const answerOpen = ref(false);
 
 function apiMessage(e: unknown, fallback: string) {
   if (!axios.isAxiosError(e)) return fallback;
@@ -69,15 +70,45 @@ 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;
+function refreshDraft() {
+  const current = draft.value;
+  if (!current) return;
+  if (current.intent === 'create_person' && current.person) {
+    current.missing = current.person.firstName.trim() ? [] : ['نام'];
+  } else if (current.intent === 'create_activity' && current.activity) {
+    current.missing = current.activity.title.trim() ? [] : ['عنوان فعالیت'];
   }
+  current.canConfirm = current.missing.length === 0;
+}
+
+function onPersonNameEdit() {
+  refreshDraft();
+}
+
+function onActivityTitleEdit() {
+  refreshDraft();
+}
+
+function onActivityPersonEdit() {
+  if (draft.value?.activity) draft.value.activity.personId = null;
+}
+
+function toLocalInput(iso: string | null) {
+  if (!iso) return '';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '';
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function onDueEdit(value: string) {
+  if (!draft.value?.activity) return;
+  if (!value) {
+    draft.value.activity.dueAt = null;
+    return;
+  }
+  const date = new Date(value);
+  draft.value.activity.dueAt = Number.isNaN(date.getTime()) ? null : date.toISOString();
 }
 
 async function parseCommand(text: string, fallbackToAsk: boolean) {
@@ -175,12 +206,25 @@ function cancelDraft() {
   draft.value = null;
 }
 
+function closeAnswer() {
+  answerOpen.value = false;
+  emit('clear');
+}
+
 watch(
   () => props.asking,
   (active) => {
     if (!active) return;
     voiceDone.value = '';
     voiceError.value = '';
+    answerOpen.value = false;
+  },
+);
+
+watch(
+  () => props.answer,
+  (value) => {
+    answerOpen.value = Boolean(value?.trim());
   },
 );
 </script>
@@ -226,18 +270,6 @@ watch(
     <div v-else-if="asking" class="ai-answer">
       <p>در حال پاسخ…</p>
     </div>
-    <div v-else-if="answer" class="ai-answer">
-      <p>{{ answer }}</p>
-      <div v-if="sources?.length" class="sources">
-        <RouterLink
-          v-for="source in sources"
-          :key="`${source.type}-${source.id}`"
-          :to="sourceTo(source)"
-        >
-          {{ source.label }}
-        </RouterLink>
-      </div>
-    </div>
 
     <form class="ai-input" @submit.prevent="onTypedSubmit">
       <input
@@ -258,29 +290,40 @@ watch(
       @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 class="edit-hint">قبل از تأیید می‌توانید متن را اصلاح کنید.</p>
+      <div v-if="draft?.person" class="modal-fields">
+        <label>نام <input v-model="draft.person.firstName" @input="onPersonNameEdit" /></label>
+        <label>نام خانوادگی <input v-model="draft.person.lastName" /></label>
+        <label>موبایل <input v-model="draft.person.mobile" dir="ltr" /></label>
+        <label>تلفن <input v-model="draft.person.phone" dir="ltr" /></label>
+        <label>ایمیل <input v-model="draft.person.email" dir="ltr" /></label>
+        <label>وب‌سایت <input v-model="draft.person.website" dir="ltr" /></label>
+        <label>معرف <input v-model="draft.person.referrer" /></label>
+        <label>سمت <input v-model="draft.person.position" /></label>
+        <label>یادداشت <textarea v-model="draft.person.notes" rows="2" /></label>
+      </div>
+      <div v-else-if="draft?.activity" class="modal-fields">
+        <label>عنوان <input v-model="draft.activity.title" @input="onActivityTitleEdit" /></label>
+        <label>
+          نوع
+          <select v-model="draft.activity.type">
+            <option v-for="(label, key) in ACTIVITY_LABEL" :key="key" :value="key">{{ label }}</option>
+          </select>
+        </label>
+        <label>
+          زمان
+          <input
+            type="datetime-local"
+            :value="toLocalInput(draft.activity.dueAt)"
+            @input="onDueEdit(($event.target as HTMLInputElement).value)"
+          />
+        </label>
+        <label>مشتری <input v-model="draft.activity.personName" @input="onActivityPersonEdit" /></label>
+        <p v-if="draft.activity.personName && !draft.activity.personId" class="warn">
+          این نام به پرونده‌ای وصل نیست؛ فعالیت بدون لینک ثبت می‌شود.
+        </p>
+        <label>توضیح <textarea v-model="draft.activity.description" rows="2" /></label>
+      </div>
       <p v-if="draft?.missing.length" class="ai-error">ناقص است: {{ draft.missing.join('، ') }}</p>
       <template #footer>
         <UiButton variant="ghost" :disabled="confirming" @click="cancelDraft">انصراف</UiButton>
@@ -289,6 +332,23 @@ watch(
         </UiButton>
       </template>
     </UiModal>
+
+    <UiModal :open="answerOpen && Boolean(answer)" title="پاسخ دستیار" @close="closeAnswer">
+      <p class="modal-lead answer-body">{{ answer }}</p>
+      <div v-if="sources?.length" class="sources">
+        <RouterLink
+          v-for="source in sources"
+          :key="`${source.type}-${source.id}`"
+          :to="sourceTo(source)"
+          @click="closeAnswer"
+        >
+          {{ source.label }}
+        </RouterLink>
+      </div>
+      <template #footer>
+        <UiButton variant="primary" @click="closeAnswer">بستن</UiButton>
+      </template>
+    </UiModal>
   </article>
 </template>
 
@@ -319,34 +379,46 @@ watch(
   line-height: 1.7;
 }
 
-.modal-fields {
-  margin: 0;
-  display: grid;
-  gap: 0.45rem;
+.answer-body {
+  white-space: pre-wrap;
 }
 
-.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);
-}
-
-.modal-fields dt {
-  margin: 0;
+.edit-hint {
+  margin: -0.35rem 0 0.75rem;
   color: #64748b;
   font-size: 0.78rem;
+}
+
+.modal-fields {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.modal-fields label {
+  display: grid;
+  gap: 0.25rem;
+  color: #64748b;
+  font-size: 0.75rem;
   font-weight: 700;
 }
 
-.modal-fields dd {
-  margin: 0;
+.modal-fields input,
+.modal-fields select,
+.modal-fields textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  background: #fff;
   color: #0f172a;
+  font: inherit;
   font-size: 0.88rem;
+  font-weight: 500;
+  padding: 0.5rem 0.65rem;
+}
+
+.modal-fields textarea {
+  resize: vertical;
 }
 
 .warn {