Updated code samples to use AI Assistant

Author: mnocon

code_samples/ai_actions/assets/js/addAudioModule.js

@@ -1,4 +1,4 @@
-import { addModule } from '../../vendor/ibexa/connector-ai/src/bundle/Resources/public/js/core/create.ai.module';
+import { addModule } from '@ibexa-connector-ai/src/bundle/Resources/public/js/core/create.ai.module';
 import TranscribeAudio from './transcribe.audio';
 
 addModule(TranscribeAudio);

code_samples/ai_actions/assets/js/transcribe.audio.js

@@ -1,13 +1,20 @@
-import BaseAIComponent from '../../vendor/ibexa/connector-ai/src/bundle/Resources/public/js/core/base.ai.component';
+import BaseAIAssistantComponent from '@ibexa-connector-ai/src/bundle/Resources/public/js/core/base.ai.assistant.component';
+import Textarea from '@ibexa-connector-ai-modules/ai-assistant/fields/textarea/textarea.js';
 
-export default class TranscribeAudio extends BaseAIComponent {
-    constructor(mainElement, config) {
-        super(mainElement, config);
+export default class TranscribeAudio extends BaseAIAssistantComponent {
+
+    constructor(mainElement, extraConfig) {
+        super(mainElement, extraConfig);
 
         this.requestHeaders = {
             Accept: 'application/vnd.ibexa.api.ai.AudioText+json',
             'Content-Type': 'application/vnd.ibexa.api.ai.TranscribeAudio+json',
         };
+
+        this.getRequestBody = this.getRequestBody.bind(this);
+        this.getResponseValue = this.getResponseValue.bind(this);
+
+        this.replacedField = Textarea;
     }
 
     getAudioInBase64() {
@@ -18,16 +25,15 @@ export default class TranscribeAudio extends BaseAIComponent {
 
         if (request.status === 200) {
             return this.convertToBase64(request.responseText);
-        } else {
-            this.processError('Error occured when decoding the file.');
         }
     }
 
     getRequestBody() {
+        const inputValue = this.getInputValue();
         const body = {
             TranscribeAudio: {
                 Audio: {
-                    base64: this.getAudioInBase64(),
+                    base64: inputValue,
                 },
                 RuntimeContext: {},
             },
@@ -40,20 +46,6 @@ export default class TranscribeAudio extends BaseAIComponent {
         return JSON.stringify(body);
     }
 
-    afterFetchData(response) {
-        super.afterFetchData();
-
-        if (response) {
-            this.outputElement.value = response.AudioText.Text.text[0];
-        }
-    }
-
-    toggle(forceEnabled) {
-        super.toggle(forceEnabled);
-
-        this.outputElement.disabled = !forceEnabled || !this.outputElement.disabled;
-    }
-
     convertToBase64(data) {
         let binary = '';
 
@@ -63,4 +55,15 @@ export default class TranscribeAudio extends BaseAIComponent {
 
         return btoa(binary);
     }
+
+    getResponseValue(response) {
+        return response.AudioText.Text.text[0];
+    }
+
+    handleAIDialogConfirm(responseText) {
+        this.outputElement.value = responseText;
+        this.outputElement.dispatchEvent(new Event('input'));
+
+        super.handleAIDialogClose(responseText);
+    }
 }

code_samples/ai_actions/config/packages/ibexa_admin_ui.yaml

@@ -4,4 +4,4 @@ ibexa:
             admin_ui_forms:
                 content_edit:
                     form_templates:
-                        - { template: '@ibexadesign/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig', priority: -10 } }
+                        - { template: '@ibexadesign/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig', priority: -10 }

code_samples/ai_actions/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig

@@ -3,23 +3,27 @@
 {% block ezbinaryfile_preview %}
     {{ parent() }}
 
+    {% import '@ibexadesign/connector_ai/ui/ai_module/macros.html.twig' as ai_macros %}
+
     {% set transcriptFieldIdentifier = 'transcript' %}
     {% set fieldTypeIdentifiers = form.parent.parent.vars.value|keys %}
 
     {% if transcriptFieldIdentifier in fieldTypeIdentifiers %}
-        {% set module_id = 'TranscribeAudio' %}
-        {% set ai_config_id = 'transcribe_audio' %}
-        {% set container_selector = '.ibexa-edit-content' %}
-        {% set input_selector = '.ibexa-field-edit-preview__action--preview' %}
-        {% set output_selector = '#ezplatform_content_forms_content_edit_fieldsData_transcript_value' %}
-        {% set cancel_wrapper_selector = '.ibexa-field-edit-preview__media-wrapper' %}
-
-        {% embed '@ibexadesign/connector_ai/ui/ai_module/ai_component.html.twig' with {
-            ai_config_id,
-            container_selector,
-            input_selector,
-            output_selector,
+        {% set use_ai_btn_attr = {
+            class: 'btn ibexa-btn ibexa-btn--secondary ibexa-ai-component--custom-btn',
+            module_id: 'TranscribeAudio',
+            scroll_selector: '.ibexa-edit-content',
+            container_selector: '.ibexa-edit-content',
+            input_selector: '.ibexa-field-edit-preview__action--preview',
+            output_selector: '#ezplatform_content_forms_content_edit_fieldsData_transcript_value',
+            ai_config_id: 'transcribe_audio',
         } %}
-        {% endembed %}
+
+        <button {{ ai_macros.attributes(use_ai_btn_attr) }}>
+            <svg class="ibexa-icon ibexa-icon--small ibexa-icon--primary">
+                <use xlink:href="{{ ibexa_icon_path('explore') }}"></use>
+            </svg>
+            {{ 'ibexa_connector_ai.use_ai.label'|trans({}, 'ibexa_connector_ai')|desc('Use AI') }}
+        </button>
     {% endif %}
 {% endblock %}