Add Ask Mento, customer mood, and Pipecat speech-to-text.

Ship assistant answers, contact moods, voice dictation, and the related CRM UI so these can be deployed to production.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/NotesView.vue

@@ -4,7 +4,10 @@ import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import NoteAiSuggestionPanel from '@/components/NoteAiSuggestionPanel.vue';
+import AskMentoPanel from '@/components/AskMentoPanel.vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
+import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
+import { appendSpokenText } from '@/lib/spoken-text';
 import type {
   DealDto,
   NoteAttachmentDto,
@@ -290,6 +293,11 @@ onMounted(load);
       </form>
     </header>
 
+    <AskMentoPanel
+      :person-id="draftPersonId || undefined"
+      placeholder="از منتو بپرس؛ مثلاً آخرین بار درباره قیمت چی گفت؟"
+    />
+
     <div class="type-tabs">
       <button
         type="button"
@@ -332,8 +340,10 @@ onMounted(load);
       />
       <div class="composer-actions">
         <div class="left-actions">
+          <VoiceToTextButton @transcript="(text) => (draftBody = appendSpokenText(draftBody, text))" />
           <button class="linkish" type="button" @click="showExtras = !showExtras">
-            {{ showExtras ? 'بستن جزئیات' : 'شخص / معامله / یادآوری / برچسب' }}
+            <span class="extras-full">{{ showExtras ? 'بستن جزئیات' : 'شخص / معامله / یادآوری / برچسب' }}</span>
+            <span class="extras-short">{{ showExtras ? 'بستن جزئیات' : 'جزئیات بیشتر' }}</span>
           </button>
           <button class="linkish" type="button" @click="fileInput?.click()">
             پیوست فایل
@@ -537,6 +547,13 @@ onMounted(load);
 .page {
   display: grid;
   gap: 1.2rem;
+  min-width: 0;
+  max-width: 100%;
+  padding-bottom: 6rem;
+}
+
+.page > * {
+  min-width: 0;
 }
 
 .page-head {
@@ -563,6 +580,7 @@ h1 {
 .meta,
 .empty {
   color: var(--muted);
+  overflow-wrap: anywhere;
 }
 
 .search {
@@ -570,6 +588,7 @@ h1 {
   gap: 0.5rem;
   flex: 1 1 220px;
   min-width: 0;
+  max-width: 100%;
 }
 
 .search input {
@@ -581,6 +600,7 @@ h1 {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
+  min-width: 0;
   max-width: 100%;
 }
 
@@ -650,6 +670,7 @@ h1 {
 .search input,
 .composer input,
 .composer textarea,
+.composer select,
 .extras input,
 .extras select {
   border: 1px solid var(--line);
@@ -658,6 +679,8 @@ h1 {
   background: #fff;
   font: inherit;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .composer {
@@ -668,6 +691,7 @@ h1 {
   padding: 1rem;
   display: grid;
   gap: 0.7rem;
+  min-width: 0;
 }
 
 .title-input {
@@ -739,6 +763,9 @@ h1 {
   text-align: start;
   text-decoration: underline;
   text-underline-offset: 2px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .att-size {
@@ -758,6 +785,11 @@ h1 {
   color: var(--accent);
   cursor: pointer;
   font: inherit;
+  text-align: start;
+}
+
+.extras-short {
+  display: none;
 }
 
 .extras {
@@ -766,6 +798,17 @@ h1 {
   gap: 0.75rem;
 }
 
+.field {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.field label {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
 .block h2 {
   margin: 0 0 0.75rem;
   font-size: 1rem;
@@ -774,7 +817,7 @@ h1 {
 
 .cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
   gap: 0.85rem;
 }
 
@@ -785,6 +828,8 @@ h1 {
   display: grid;
   gap: 0.55rem;
   background: #fff;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .card header {
@@ -816,6 +861,7 @@ h1 {
 .body {
   margin: 0;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   line-height: 1.6;
 }
 
@@ -872,7 +918,7 @@ h1 {
   background: var(--surface);
 }
 
-@media (max-width: 700px) {
+@media (max-width: 900px) {
   h1 {
     font-size: 1.45rem;
   }
@@ -882,6 +928,10 @@ h1 {
     align-items: stretch;
   }
 
+  .lead {
+    max-width: none;
+  }
+
   .search {
     width: 100%;
     flex: 0 0 auto;
@@ -896,20 +946,55 @@ h1 {
   .type-tabs {
     flex-wrap: nowrap;
     overflow-x: auto;
+    overscroll-behavior-x: contain;
     -webkit-overflow-scrolling: touch;
     padding-bottom: 0.15rem;
+    scrollbar-width: none;
+  }
+
+  .type-tabs::-webkit-scrollbar {
+    display: none;
   }
 
   .extras {
     grid-template-columns: 1fr;
   }
 
+  .extras-full {
+    display: none;
+  }
+
+  .extras-short {
+    display: inline;
+  }
+
   .composer {
     padding: 0.9rem;
   }
 
+  .composer-actions,
+  .left-actions,
+  .right {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .right .btn,
+  .right .btn-ghost {
+    width: 100%;
+  }
+
   .cards {
     grid-template-columns: 1fr;
   }
+
+  .card footer {
+    gap: 0.5rem 0.7rem;
+  }
+
+  .swatches {
+    margin-inline-start: 0;
+    width: 100%;
+  }
 }
 </style>