WIP: New AI assistant

[mnocon]

Question	Answer
JIRA Ticket
Versions
Edition

Checklist

• Text renders correctly
• Text has been checked with vale
• Description metadata is up to date
• Redirects cover removed/moved pages
• Code samples are working
• PHP code samples have been fixed with PHP CS fixer
• Added link to this PR in relevant JIRA ticket or code PR

[github-actions]

code_samples/ change report

Before (on target branch)	After (in current PR)
code_samples/ai_actions/assets/js/transcribe.audio.js docs/ai_actions/extend_ai_actions.md@349:``` js docs/ai_actions/extend_ai_actions.md@350:[[= include_file('code_samples/ai_actions/assets/js/transcribe.audio.js') =]] docs/ai_actions/extend_ai_actions.md@351:```	code_samples/ai_actions/assets/js/transcribe.audio.js docs/ai_actions/extend_ai_actions.md@349:``` js docs/ai_actions/extend_ai_actions.md@350:[[= include_file('code_samples/ai_actions/assets/js/transcribe.audio.js') =]] docs/ai_actions/extend_ai_actions.md@351:```
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⫶ } 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(); 018⫶ 019⫶ if (request.status === 200) { 020⫶ return this.convertToBase64(request.responseText); 021⫶ } 022⫶ else { 023⫶ this.processError('Error occured when decoding the file.'); 024⫶ } 025⫶ } 026⫶ 027⫶ getRequestBody() { 028⫶ const body = { 029⫶ TranscribeAudio: { 030⫶ Audio: { 031⫶ base64: this.getAudioInBase64(), 032⫶ }, 033⫶ RuntimeContext: {}, 034⫶ }, 035⫶ }; 036⫶ 037⫶ if (this.languageCode) { 038⫶ body.TranscribeAudio.RuntimeContext.languageCode = this.languageCode; 039⫶ }	001⫶import BaseAIAssistantComponent from '../../vendor/ibexa/connector-ai/src/bundle/Resources/public/js/core/base.ai.assistant.component'; 002⫶import Textarea from '../../vendor/ibexa/connector-ai/src/bundle/ui-dev/src/modules/ai-assistant/fields/textarea/textarea.js'; 003⫶ 004⫶export class TranscribeAudio extends BaseAIAssistantComponent { 005⫶ 006⫶ constructor(mainElement) { 007⫶ super(mainElement); 008⫶ 009⫶ this.requestHeaders = { 010⫶ Accept: 'application/vnd.ibexa.api.ai.AudioText+json', 011⫶ 'Content-Type': 'application/vnd.ibexa.api.ai.TranscribeAudio+json', 012⫶ }; 013⫶ 014⫶ this.getRequestBody = this.getRequestBody.bind(this); 015⫶ this.getResponseValue = this.getResponseValue.bind(this); 016⫶ 017⫶ this.replacedField = Textarea; 018⫶ } 019⫶ 020⫶ getAudioInBase64() { 021⫶ const request = new XMLHttpRequest(); 022⫶ request.open('GET', this.inputElement.href, false); 023⫶ request.overrideMimeType('text/plain; charset=x-user-defined'); 024⫶ request.send(); 025⫶ 026⫶ if (request.status === 200) { 027⫶ return this.convertToBase64(request.responseText); 028⫶ } 029⫶ } 030⫶ 031⫶ getRequestBody() { 032⫶ const body = { 033⫶ TranscribeAudio: { 034⫶ Audio: { 035⫶ base64: this.getAudioInBase64(), 036⫶ }, 037⫶ RuntimeContext: {}, 038⫶ }, 039⫶ };
040⫶	040⫶
041⫶ return JSON.stringify(body); 042⫶ } 043⫶ 044⫶ afterFetchData(response) { 045⫶ super.afterFetchData(); 046⫶ 047⫶ if (response) { 048⫶ this.outputElement.value = response.AudioText.Text.text[0]; 049⫶ } 050⫶ } 051⫶ 052⫶ toggle(forceEnabled) { 053⫶ super.toggle(forceEnabled);	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⫶ 051⫶ for (let i = 0; i < data.length; i++) { 052⫶ binary += String.fromCharCode(data.charCodeAt(i) & 0xff); 053⫶ }
054⫶	054⫶
055⫶ this.outputElement.disabled = !forceEnabled || !this.outputElement.disabled;	055⫶ return btoa(binary);
056⫶ } 057⫶	056⫶ } 057⫶
058⫶ convertToBase64(data) { 059⫶ let binary = ''; 060⫶ 061⫶ for (let i = 0; i < data.length; i++) { 062⫶ binary += String.fromCharCode(data.charCodeAt(i) & 0xff); 063⫶ } 064⫶ 065⫶ return btoa(binary); 066⫶ } 067⫶}	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/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig docs/ai_actions/extend_ai_actions.md@323:``` twig docs/ai_actions/extend_ai_actions.md@324:[[= 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@325:``` 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⫶	code_samples/ai_actions/templates/themes/admin/admin/ui/fieldtype/edit/form_fields_binary_ai.html.twig docs/ai_actions/extend_ai_actions.md@323:``` twig docs/ai_actions/extend_ai_actions.md@324:[[= 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@325:``` 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 %}	017⫶ <div class="btn ibexa-btn ibexa-btn--secondary"> 018⫶ Use AI 019⫶ {% include '@ibexadesign/connector_ai/ui/ai_module/ai_assistant_component.html.twig' with { 020⫶ 'module_id': module_id, 021⫶ 'ai_config_id': ai_config_id, 022⫶ 'class': 'ibexa-input-text-wrapper__action-btn', 023⫶ 'scroll_selector': '.ibexa-edit-content', 024⫶ 'container_selector': container_selector, 025⫶ 'input_selector': input_selector, 026⫶ 'output_selector': output_selector 027⫶ } %} 028⫶ </div> 029⫶ 030⫶ {% endif %} 031⫶{% endblock %}

Download colorized diff