Edit the artificial intelligence of the Mentact assistant

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

@@ -37,7 +37,7 @@ function pick(label: string) {
 </script>
 
 <template>
-  <article class="panel">
+  <article id="home-ai-assistant" class="panel">
     <header class="panel-head">
       <h2>
         <span class="spark"><UiIcon name="sparkle" :size="15" /></span>
@@ -62,6 +62,9 @@ function pick(label: string) {
     </div>
 
     <p v-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">
       <p>{{ answer }}</p>
       <div v-if="sources?.length" class="sources">

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

@@ -12,6 +12,9 @@ const props = defineProps<{
   userInitial: string;
   alerts: HomeDashboardAlertDto[];
   askQuery: string;
+  asking?: boolean;
+  askAnswer?: string;
+  askError?: string;
 }>();
 
 const emit = defineEmits<{
@@ -77,6 +80,12 @@ function alertIcon(tone: string) {
   if (tone === 'success') return 'trend' as const;
   return 'sparkle' as const;
 }
+
+const shortcutLabel = computed(() =>
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform)
+    ? '⌘K'
+    : 'Ctrl+K',
+);
 </script>
 
 <template>
@@ -114,16 +123,26 @@ function alertIcon(tone: string) {
         </RouterLink>
       </div>
 
-      <form class="hero-ask" @submit.prevent="emit('ask')">
-        <UiIcon name="sparkle" :size="18" class="ask-ico" />
-        <input
-          :value="askQuery"
-          type="search"
-          :placeholder="brand.askPlaceholderFa"
-          @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
-        />
-        <kbd>⌘K</kbd>
-      </form>
+      <div class="hero-ask-wrap">
+        <form class="hero-ask" @submit.prevent="emit('ask')">
+          <UiIcon name="sparkle" :size="18" class="ask-ico" />
+          <input
+            id="home-hero-ask"
+            :value="askQuery"
+            type="search"
+            :placeholder="brand.askPlaceholderFa"
+            :disabled="asking"
+            @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
+          />
+          <kbd>{{ shortcutLabel }}</kbd>
+          <button type="submit" class="ask-send" aria-label="ارسال" :disabled="asking">
+            <UiIcon name="send" :size="15" />
+          </button>
+        </form>
+        <p v-if="asking" class="hero-ask-status">در حال پاسخ…</p>
+        <p v-else-if="askError" class="hero-ask-status err">{{ askError }}</p>
+        <p v-else-if="askAnswer" class="hero-ask-status">{{ askAnswer }}</p>
+      </div>
     </div>
 
     <MentoAiAvatar class="hero-bot" :size="156" />
@@ -333,16 +352,22 @@ function alertIcon(tone: string) {
   color: #16a34a;
 }
 
+.hero-ask-wrap {
+  display: grid;
+  gap: 0.45rem;
+  max-width: 520px;
+  width: 100%;
+}
+
 .hero-ask {
   display: flex;
   align-items: center;
   gap: 0.55rem;
-  max-width: 520px;
   width: 100%;
   background: #fff;
   color: #0f172a;
   border-radius: 999px;
-  padding: 0.55rem 0.9rem;
+  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
 }
 
@@ -374,6 +399,40 @@ function alertIcon(tone: string) {
   flex-shrink: 0;
 }
 
+.ask-send {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.ask-send:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.hero-ask-status {
+  margin: 0;
+  padding: 0.55rem 0.85rem;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+  font-size: 0.82rem;
+  line-height: 1.7;
+  max-height: 7.5rem;
+  overflow: auto;
+}
+
+.hero-ask-status.err {
+  background: rgba(185, 28, 28, 0.28);
+}
+
 .hero-bot {
   position: relative;
   z-index: 1;