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;

apps/web/src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
@@ -89,6 +89,10 @@ async function submitAsk(preset?: string) {
     const { data } = await api.post<AskMentoResponse>('/ai/ask', { question: q });
     askAnswer.value = data.answer;
     askSources.value = data.sources ?? [];
+    await nextTick();
+    document
+      .getElementById('home-ai-assistant')
+      ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   } catch (e) {
     if (axios.isAxiosError(e)) {
       const msg = (e.response?.data as { message?: string | string[] })?.message;
@@ -101,7 +105,18 @@ async function submitAsk(preset?: string) {
   }
 }
 
+function onAskHotkey(e: KeyboardEvent) {
+  if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'k') return;
+  const tag = (e.target as HTMLElement | null)?.tagName;
+  if (tag === 'TEXTAREA' || (tag === 'INPUT' && (e.target as HTMLInputElement).id !== 'home-hero-ask')) {
+    return;
+  }
+  e.preventDefault();
+  document.getElementById('home-hero-ask')?.focus();
+}
+
 onMounted(async () => {
+  window.addEventListener('keydown', onAskHotkey);
   loading.value = true;
   try {
     const [homeRes, actRes, boardRes] = await Promise.all([
@@ -120,6 +135,10 @@ onMounted(async () => {
     loading.value = false;
   }
 });
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onAskHotkey);
+});
 </script>
 
 <template>
@@ -129,6 +148,9 @@ onMounted(async () => {
       :first-name="firstName"
       :user-initial="userInitial"
       :alerts="home?.alerts ?? []"
+      :asking="asking"
+      :ask-answer="askAnswer"
+      :ask-error="askError"
       v-model:ask-query="askQuery"
       @ask="submitAsk"
     />
@@ -152,6 +174,7 @@ onMounted(async () => {
         />
         <HomeSourcesChart :sources="home?.sources ?? []" />
         <HomeAiAssistant
+          id="home-ai-assistant"
           v-model:ask-query="askQuery"
           :asking="asking"
           :answer="askAnswer"