AI assistant

[mnocon]

Target: master, 4.6

Things done: documentation for the AI Assistant

1. Improved the code samples to use the new AI Assistant
2. Mentioned the new supported field types (Text block, text line). Only the online editor supports working on passages of text, so this mention is removed to avoid any confusion
3. Updated screenshot

[github-actions]

Preview of modified Markdown:

• docs/ai_actions/ai_actions_guide.md

[github-actions]

code_samples/ change report

Before (on target branch)	After (in current PR)
code_samples/ai_actions/assets/js/addAudioModule.js docs/ai_actions/extend_ai_actions.md@361:``` js docs/ai_actions/extend_ai_actions.md@362:[[= include_file('code_samples/ai_actions/assets/js/addAudioModule.js') =]] docs/ai_actions/extend_ai_actions.md@363:```	code_samples/ai_actions/assets/js/addAudioModule.js docs/ai_actions/extend_ai_actions.md@361:``` js docs/ai_actions/extend_ai_actions.md@362:[[= include_file('code_samples/ai_actions/assets/js/addAudioModule.js') =]] docs/ai_actions/extend_ai_actions.md@363:```
001⫶import { addModule } from '../../vendor/ibexa/connector-ai/src/bundle/Resources/public/js/core/create.ai.module';	001⫶import { addModule } from '@ibexa-connector-ai/src/bundle/Resources/public/js/core/create.ai.module';
002⫶import TranscribeAudio from './transcribe.audio'; 003⫶ 004⫶addModule(TranscribeAudio); code_samples/ai_actions/assets/js/transcribe.audio.js docs/ai_actions/extend_ai_actions.md@353:``` js docs/ai_actions/extend_ai_actions.md@354:[[= include_file('code_samples/ai_actions/assets/js/transcribe.audio.js') =]] docs/ai_actions/extend_ai_actions.md@355:```	002⫶import TranscribeAudio from './transcribe.audio'; 003⫶ 004⫶addModule(TranscribeAudio); code_samples/ai_actions/assets/js/transcribe.audio.js docs/ai_actions/extend_ai_actions.md@353:``` js docs/ai_actions/extend_ai_actions.md@354:[[= include_file('code_samples/ai_actions/assets/js/transcribe.audio.js') =]] docs/ai_actions/extend_ai_actions.md@355:```
001⫶import BaseAIComponent from '../../vendor/ibexa/connector-ai/src/bundle/Resources/public/js/core/base.ai.component'; 002⫶ 003⫶export default class TranscribeAudio extends BaseAIComponent { 004⫶ constructor(mainElement, config) { 005⫶ super(mainElement, config); 006⫶ 007⫶ this.requestHeaders = { 008⫶ Accept: 'application/vnd.ibexa.api.ai.AudioText+json', 009⫶ 'Content-Type': 'application/vnd.ibexa.api.ai.TranscribeAudio+json', 010⫶ }; 011⫶ }	001⫶import BaseAIAssistantComponent from '@ibexa-connector-ai/src/bundle/Resources/public/js/core/base.ai.assistant.component'; 002⫶import Textarea from '@ibexa-connector-ai-modules/ai-assistant/fields/textarea/textarea'; 003⫶ 004⫶export default class TranscribeAudio extends BaseAIAssistantComponent { 005⫶ constructor(mainElement, extraConfig) { 006⫶ super(mainElement, extraConfig); 007⫶ 008⫶ this.requestHeaders = { 009⫶ Accept: 'application/vnd.ibexa.api.ai.AudioText+json', 010⫶ 'Content-Type': 'application/vnd.ibexa.api.ai.TranscribeAudio+json', 011⫶ };
012⫶	012⫶
013⫶ getAudioInBase64() { 014⫶ const request = new XMLHttpRequest(); 015⫶ request.open('GET', this.inputElement.href, false); 016⫶ request.overrideMimeType('text/plain; charset=x-user-defined'); 017⫶ request.send();	013⫶ this.getRequestBody = this.getRequestBody.bind(this); 014⫶ this.getResponseValue = this.getResponseValue.bind(this); 015⫶ 016⫶ this.replacedField = Textarea; 017⫶ }
018⫶	018⫶
019⫶ if (request.status === 200) { 020⫶ return this.convertToBase64(request.responseText); 021⫶ } else { 022⫶ this.processError('Error occured when decoding the file.'); 023⫶ } 024⫶ } 025⫶ 026⫶ getRequestBody() { 027⫶ const body = { 028⫶ TranscribeAudio: { 029⫶ Audio: { 030⫶ base64: this.getAudioInBase64(), 031⫶ }, 032⫶ RuntimeContext: {}, 033⫶ }, 034⫶ }; 035⫶ 036⫶ if (this.languageCode) { 037⫶ body.TranscribeAudio.RuntimeContext.languageCode = this.languageCode; 038⫶ } 039⫶ 040⫶ return JSON.stringify(body); 041⫶ } 042⫶ 043⫶ afterFetchData(response) { 044⫶ super.afterFetchData(); 045⫶ 046⫶ if (response) { 047⫶ this.outputElement.value = response.AudioText.Text.text[0]; 048⫶ } 049⫶ }	019⫶ getAudioInBase64() { 020⫶ const request = new XMLHttpRequest(); 021⫶ request.open('GET', this.inputElement.href, false); 022⫶ request.overrideMimeType('text/plain; charset=x-user-defined'); 023⫶ request.send(); 024⫶ 025⫶ if (request.status === 200) { 026⫶ return this.convertToBase64(request.responseText); 027⫶ } 028⫶ } 029⫶ 030⫶ getRequestBody() { 031⫶ const inputValue = this.getInputValue(); 032⫶ const body = { 033⫶ TranscribeAudio: { 034⫶ Audio: { 035⫶ base64: inputValue, 036⫶ }, 037⫶ RuntimeContext: {}, 038⫶ }, 039⫶ }; 040⫶ 041⫶ if (this.languageCode) { 042⫶ body.TranscribeAudio.RuntimeContext.languageCode = this.languageCode; 043⫶ } 044⫶ 045⫶ return JSON.stringify(body); 046⫶ } 047⫶ 048⫶ convertToBase64(data) { 049⫶ let binary = '';
050⫶	050⫶
051⫶ toggle(forceEnabled) { 052⫶ super.toggle(forceEnabled); 053⫶ 054⫶ this.outputElement.disabled = !forceEnabled || !this.outputElement.disabled; 055⫶ } 056⫶ 057⫶ convertToBase64(data) { 058⫶ let binary = ''; 059⫶ 060⫶ for (let i = 0; i < data.length; i++) { 061⫶ binary += String.fromCharCode(data.charCodeAt(i) & 0xff); 062⫶ } 063⫶ 064⫶ return btoa(binary); 065⫶ } 066⫶}	051⫶ for (let i = 0; i < data.length; i++) { 052⫶ binary += String.fromCharCode(data.charCodeAt(i) & 0xff); 053⫶ } 054⫶ 055⫶ return btoa(binary); 056⫶ } 057⫶ 058⫶ getResponseValue(response) { 059⫶ return response.AudioText.Text.text[0]; 060⫶ } 061⫶ 062⫶ handleAIDialogConfirm(responseText) { 063⫶ this.outputElement.value = responseText; 064⫶ this.outputElement.dispatchEvent(new Event('input')); 065⫶ 066⫶ super.handleAIDialogClose(responseText); 067⫶ } 068⫶}
code_samples/ai_actions/config/packages/ibexa_admin_ui.yaml docs/ai_actions/extend_ai_actions.md@332:``` yaml docs/ai_actions/extend_ai_actions.md@333:[[= include_file('code_samples/ai_actions/config/packages/ibexa_admin_ui.yaml') =]] docs/ai_actions/extend_ai_actions.md@334:``` 001⫶ibexa: 002⫶ system: 003⫶ admin_group: 004⫶ admin_ui_forms: 005⫶ content_edit: 006⫶ form_templates:	code_samples/ai_actions/config/packages/ibexa_admin_ui.yaml docs/ai_actions/extend_ai_actions.md@332:``` yaml docs/ai_actions/extend_ai_actions.md@333:[[= include_file('code_samples/ai_actions/config/packages/ibexa_admin_ui.yaml') =]] docs/ai_actions/extend_ai_actions.md@334:``` 001⫶ibexa: 002⫶ system: 003⫶ admin_group: 004⫶ admin_ui_forms: 005⫶ content_edit: 006⫶ form_templates:
007⫶ - { template: '@ibexadesign/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig', priority: -10 } }	007⫶ - { 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 docs/ai_actions/extend_ai_actions.md@327:``` twig docs/ai_actions/extend_ai_actions.md@328:[[= include_file('code_samples/ai_actions/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig') =]] docs/ai_actions/extend_ai_actions.md@329:``` 001⫶{% extends '@ibexadesign/ui/field_type/edit/ezbinaryfile.html.twig' %} 002⫶ 003⫶{% block ezbinaryfile_preview %} 004⫶ {{ parent() }} 005⫶	code_samples/ai_actions/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig docs/ai_actions/extend_ai_actions.md@327:``` twig docs/ai_actions/extend_ai_actions.md@328:[[= include_file('code_samples/ai_actions/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig') =]] docs/ai_actions/extend_ai_actions.md@329:``` 001⫶{% extends '@ibexadesign/ui/field_type/edit/ezbinaryfile.html.twig' %} 002⫶ 003⫶{% block ezbinaryfile_preview %} 004⫶ {{ parent() }} 005⫶
006⫶ {% set transcriptFieldIdentifier = 'transcript' %} 007⫶ {% set fieldTypeIdentifiers = form.parent.parent.vars.value|keys %} 008⫶ 009⫶ {% if transcriptFieldIdentifier in fieldTypeIdentifiers %} 010⫶ {% set module_id = 'TranscribeAudio' %} 011⫶ {% set ai_config_id = 'transcribe_audio' %} 012⫶ {% set container_selector = '.ibexa-edit-content' %} 013⫶ {% set input_selector = '.ibexa-field-edit-preview__action--preview' %} 014⫶ {% set output_selector = '#ezplatform_content_forms_content_edit_fieldsData_transcript_value' %} 015⫶ {% set cancel_wrapper_selector = '.ibexa-field-edit-preview__media-wrapper' %} 016⫶ 017⫶ {% embed '@ibexadesign/connector_ai/ui/ai_module/ai_component.html.twig' with { 018⫶ ai_config_id, 019⫶ container_selector, 020⫶ input_selector, 021⫶ output_selector, 022⫶ } %} 023⫶ {% endembed %} 024⫶ {% endif %} 025⫶{% endblock %}	006⫶ {% import '@ibexadesign/connector_ai/ui/ai_module/macros.html.twig' as ai_macros %} 007⫶ 008⫶ {% set transcriptFieldIdentifier = 'transcript' %} 009⫶ {% set fieldTypeIdentifiers = form.parent.parent.vars.value|keys %} 010⫶ 011⫶ {% if transcriptFieldIdentifier in fieldTypeIdentifiers %} 012⫶ {% set use_ai_btn_attr = { 013⫶ class: 'btn ibexa-btn ibexa-btn--secondary ibexa-ai-component--custom-btn', 014⫶ module_id: 'TranscribeAudio', 015⫶ scroll_selector: '.ibexa-edit-content', 016⫶ container_selector: '.ibexa-edit-content', 017⫶ input_selector: '.ibexa-field-edit-preview__action--preview', 018⫶ output_selector: '#ezplatform_content_forms_content_edit_fieldsData_transcript_value', 019⫶ ai_config_id: 'transcribe_audio', 020⫶ } %} 021⫶ 022⫶ <button {{ ai_macros.attributes(use_ai_btn_attr) }}> 023⫶ <svg class="ibexa-icon ibexa-icon--small ibexa-icon--primary"> 024⫶ <use xlink:href="{{ ibexa_icon_path('explore') }}"></use> 025⫶ </svg> 026⫶ {{ 'ibexa_connector_ai.use_ai.label'|trans({}, 'ibexa_connector_ai')|desc('Use AI') }} 027⫶ </button> 028⫶ {% endif %} 029⫶{% endblock %}

Download colorized diff