🐛 Improve speech

argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue

@@ -149,8 +149,8 @@ export default {
       await this.saveAsDraft(this.record);
     },
   },
-  setup() {
-    return useFocusAnnotationViewModel();
+  setup(props) {
+    return useFocusAnnotationViewModel(props);
   },
 };
 </script>

argilla-frontend/components/features/annotation/container/mode/useFocusAnnotationViewModel.ts

@@ -1,17 +1,47 @@
 import { useResolve } from "ts-injecty";
-import { ref } from "vue-demi";
+import { ref, getCurrentInstance, onMounted, computed } from "vue-demi";
 import { Record } from "~/v1/domain/entities/record/Record";
 import { DiscardRecordUseCase } from "~/v1/domain/usecases/discard-record-use-case";
 import { SubmitRecordUseCase } from "~/v1/domain/usecases/submit-record-use-case";
 import { SaveDraftUseCase } from "~/v1/domain/usecases/save-draft-use-case";
+import { useSpeech } from "~/v1/infrastructure/services/useSpeech";
+import { RecordCriteria } from "~/v1/domain/entities/record/RecordCriteria";
+import { Records } from "~/v1/domain/entities/record/Records";
 
-export const useFocusAnnotationViewModel = () => {
+export const useFocusAnnotationViewModel = ({
+  recordCriteria,
+  records,
+}: {
+  recordCriteria: RecordCriteria;
+  records: Records;
+}) => {
   const isDraftSaving = ref(false);
   const isDiscarding = ref(false);
   const isSubmitting = ref(false);
   const discardUseCase = useResolve(DiscardRecordUseCase);
   const submitUseCase = useResolve(SubmitRecordUseCase);
   const saveDraftUseCase = useResolve(SaveDraftUseCase);
+  const instance = getCurrentInstance().proxy;
+  const speech = useSpeech();
+
+  const record = computed(() =>
+    records.getRecordOn(recordCriteria.committed.page)
+  );
+
+  onMounted(() => {
+    speech.waitCommands({
+      SelectOption: (optionNumber) => {
+        record.value.questions.forEach((question) => {
+          question.answerByIndex(optionNumber - 1);
+        });
+      },
+      Submit: () => {
+        submit(record.value);
+
+        instance.$emit("on-submit-responses");
+      },
+    });
+  });
 
   const discard = async (record: Record) => {
     try {

argilla-frontend/package.json

@@ -45,7 +45,8 @@
     "vue-demi": "0.14.10",
     "vue-svgicon": "3.3.2",
     "vue-template-compiler": "2.7.16",
-    "vuedraggable": "2.24.3"
+    "vuedraggable": "2.24.3",
+    "words-to-numbers": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

argilla-frontend/pages/index.vue

@@ -29,7 +29,6 @@
     </template>
     <template v-slot:page-content>
       <BaseLoading v-if="isLoadingDatasets" />
-      <button @click="listen">Listen</button>
       <DatasetList
         :workspaces="workspaces"
         :datasets="datasets.datasets"

argilla-frontend/pages/useHomeViewModel.ts

@@ -83,20 +83,7 @@ export const useHomeViewModel = () => {
     speech.explainCommands();
   });
 
-  const listen = async () => {
-    speech.speechCollect((text: string) => {
-      speech.textToSpeech(text);
-    });
-
-    speech.waitCommands({
-      OpenDatasets: () => {
-        console.log("go to datasets");
-      },
-    });
-  };
-
   return {
-    listen,
     speech,
     datasets,
     workspaces,