diff --git a/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee b/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee
index ff466ae1b7..a7e36bdfe8 100644
--- a/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee
@@ -1,5 +1,7 @@
# coffeelint: disable=camel_case_classes
-class App.UiElement.richtext
+class App.UiElement.richtext extends Spine.Module
+ @extend App.TextTools
+
@render: (attributeConfig, params, form) ->
attribute = $.extend(true, {}, attributeConfig)
@@ -108,6 +110,13 @@ class App.UiElement.richtext
uploader.render()
, 100, undefined, 'form_upload')
+ @textToolsInit(
+ item,
+ attribute.disabled,
+ -> item.find('[contenteditable]').trigger('textToolsStart'),
+ -> item.find('[contenteditable]').trigger('textToolsStop'),
+ ) if attribute.text_tools
+
item
@toolButtonClicked: (event, form) ->
diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.coffee
index ce37f2f189..f026db2d76 100644
--- a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee
+++ b/app/assets/javascripts/app/controllers/agent_ticket_create.coffee
@@ -538,6 +538,8 @@ class App.TicketCreate extends App.Controller
events:
'fileUploadStart .richtext': => @submitDisable()
'fileUploadStop .richtext': => @submitEnable()
+ 'textToolsStart .richtext': => @submitDisable()
+ 'textToolsStop .richtext': => @submitEnable()
'change [name=customer_id]': @localUserInfo
'change [data-attribute-name=organization_id] .js-input': @localUserInfo
richTextUploadRenderCallback: @updateTaskManagerAttachments
diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.coffee
index 9e23b28d15..af4cb6660a 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.coffee
@@ -532,6 +532,8 @@ class App.TicketZoom extends App.Controller
richTextUploadDeleteCallback: (attachments) =>
@taskUpdateAttachments('article', attachments)
@delay(@markForm, 250, 'ticket-zoom-form-update')
+ richTextTextToolsStartCallback: @submitDisable
+ richTextTextToolsStopCallback: @submitEnable
)
@highlighter = new App.TicketZoomHighlighter(
diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee
index 569a298206..9242aa67e6 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee
@@ -508,6 +508,9 @@ class App.TicketZoomArticleNew extends App.Controller
when 'body:allowNoCaption'
@bodyAllowNoCaption = articleType.bodyAllowNoCaption
+ # (Re)initialize text tools on every article type change.
+ App.TextTools.textToolsInit(@textarea.parent(), false, @richTextTextToolsStartCallback, @richTextTextToolsStopCallback)
+
# convert remote src images to data uri
App.Utils.htmlImage2DataUrlAsyncInline(@$('[data-name=body]'))
@@ -630,6 +633,8 @@ class App.TicketZoomArticleNew extends App.Controller
options:
duration: duration
easing: 'easeOutQuad'
+ begin: => @$('.text-tools').hide().css('transform', "translateX(-#{@attachmentInputHolder.position().left}px)")
+ complete: => @$('.text-tools').fadeIn()
@attachmentHint.velocity
properties:
@@ -670,6 +675,7 @@ class App.TicketZoomArticleNew extends App.Controller
options:
duration: 300
easing: 'easeOutQuad'
+ begin: => @$('.text-tools').hide()
@attachmentHint.velocity
properties:
diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
index c059b2a87b..2b0434536b 100644
--- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
+++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js
@@ -326,6 +326,67 @@
})[0]
}
+ Plugin.prototype.getSelection = function() {
+ var result = {
+ content: '',
+ ranges: [],
+ }
+
+ if (window.getSelection || document.getSelection) {
+ var sel
+
+ if (window.getSelection) sel = window.getSelection()
+ else sel = document.getSelection()
+
+ if (sel.rangeCount) {
+ var container = $('')
+ for (var i = 0; i < sel.rangeCount; ++i) {
+ result.ranges.push(sel.getRangeAt(i))
+ container.append(sel.getRangeAt(i).cloneContents())
+ }
+ if ( this.options.mode === 'textonly' ) {
+ result.content = container.text().trim()
+ }
+ else {
+ result.content = container.html()
+ }
+ }
+ }
+ else if (document.selection) {
+ if (document.selection.type === 'Text') {
+ if ( this.options.mode === 'textonly' ) {
+ result.content = document.selection.createRange().text
+ }
+ else {
+ result.content = document.selection.createRange().htmlText
+ }
+ }
+ }
+
+ return result
+ }
+
+ Plugin.prototype.replaceSelection = function (ranges, content) {
+ if (ranges.length && (window.getSelection || document.getSelection)) {
+ this.log('restore selection')
+
+ var sel
+
+ if (window.getSelection) sel = window.getSelection()
+ else sel = document.getSelection()
+
+ sel.removeAllRanges()
+
+ for (var i = 0; i < ranges.length; i++) {
+ sel.addRange(ranges[i])
+ }
+ }
+
+ content = App.Utils.clipboardHtmlInsertPreperation(content, this.options)
+
+ this.paste(content)
+ }
+
Plugin.prototype.onPaste = function (e) {
e.preventDefault()
var clipboardData, clipboardImage, text, htmlRaw, htmlString
diff --git a/app/assets/javascripts/app/lib/mixins/text_tools.coffee b/app/assets/javascripts/app/lib/mixins/text_tools.coffee
new file mode 100644
index 0000000000..0e20b79810
--- /dev/null
+++ b/app/assets/javascripts/app/lib/mixins/text_tools.coffee
@@ -0,0 +1,96 @@
+# Methods for initializing and using text tools in a richtext editor
+
+App.TextTools =
+ textToolsInit: (el, disabled = false, startCallback = null, stopCallback = null) ->
+ return if not App.User.current()?.permission('ticket.agent')
+ return if not App.Config.get('ai_provider')
+ return if not App.Config.get('ai_assistance_text_tools')
+
+ # Remove any existing text tools, start from scratch.
+ # This is necessary to avoid duplication of text tools in article type switching context.
+ el.find('.text-tools').remove()
+
+ # If attachments are present, append text tools to the same container.
+ if el.find('.article-attachment:not(.hide)').length and not el.find('.article-attachment .text-tools').length
+ el.find('.article-attachment').append( $( App.view('generic/text_tools')(disabled: disabled) ) )
+ el.find('.text-tools').css('transform', el.find('.attachmentPlaceholder').css('transform'))
+
+ # Otherwise, append text tools into their own container.
+ else if not el.find('.text-tools--standalone').length
+ el.append( $( App.view('generic/text_tools')(disabled: disabled, no_attachment: true) ) )
+
+ # Initialize the dropdown menu.
+ # This seems to be necessary only in the article reply context.
+ el.find('[data-toggle="dropdown"]').dropdown()
+
+ # Handle text tool actions.
+ el.off('click.text-tools-actions', '.js-action').on('click.text-tools-actions', '.js-action', (e) ->
+ e.preventDefault()
+ action = $(e.target).data('type')
+ ce = el.find('[contenteditable]').data().plugin_ce
+
+ el.find('[data-toggle="dropdown"]').dropdown('toggle')
+
+ selection = ce?.getSelection()
+
+ if not selection?.content?.length
+ App.Event.trigger('notify', {
+ type: 'info'
+ msg: __('Please select some text first.')
+ timeout: 2000
+ })
+ return
+
+ params =
+ input: selection.content
+ service_type: action
+
+ App.TextTools.textToolsStartLoading(el, startCallback, stopCallback)
+
+ App.Ajax.request(
+ id: 'ai_assistance_text_tools'
+ type: 'POST'
+ url: "#{App.Config.get('api_path')}/ai_assistance/text_tools"
+ data: JSON.stringify(params)
+ processData: true
+ success: (data) ->
+ App.TextTools.textToolsStopLoading(el, stopCallback)
+ ce.replaceSelection(selection.ranges, data.output)
+ error: ->
+ App.TextTools.textToolsStopLoading(el, stopCallback)
+ )
+ )
+
+ textToolsStartLoading: (el, startCallback, stopCallback) ->
+ startCallback?() # callback is used to temporarily disable the submit button
+
+ loader = $( App.view('generic/text_tools_loading')() )
+
+ loader.off('click.text-tools-cancel', '.js-cancel').on('click.text-tools-cancel', '.js-cancel', (e) ->
+ e.preventDefault()
+ App.Ajax.abort('ai_assistance_text_tools')
+ App.TextTools.textToolsStopLoading(el, stopCallback)
+ )
+
+ el.find('[contenteditable]').prop('contenteditable', false)
+
+ if el.find('.article-attachment:not(.hide)').length > 0
+ el.find('.article-attachment').hide()
+ else
+ el.find('.text-tools').hide()
+
+ el.append(loader)
+
+ textToolsStopLoading: (el, stopCallback) ->
+ el.find('.js-loading').remove()
+
+ if el.find('.article-attachment:not(.hide)').length > 0
+ el.find('.article-attachment').show()
+ else
+ el.find('.text-tools').show()
+
+ el.find('[contenteditable]')
+ .prop('contenteditable', true)
+ .focus()
+
+ stopCallback?() # callback is used to re-enable the submit button
diff --git a/app/assets/javascripts/app/views/generic/text_tools.jst.eco b/app/assets/javascripts/app/views/generic/text_tools.jst.eco
new file mode 100644
index 0000000000..14e1ba70b8
--- /dev/null
+++ b/app/assets/javascripts/app/views/generic/text_tools.jst.eco
@@ -0,0 +1,20 @@
+<% if !@disabled: %>
+
+ <%- @Icon('smart-assist-elaborate') %>
+
+
+ <%- @Icon('smart-assist-elaborate') %><%- @T('Smart Assist is generating text…') %>
+
<%- @T('Cancel') %>
+
-
+
diff --git a/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantLoadingBanner.vue b/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantLoadingBanner.vue
new file mode 100644
index 0000000000..e3fc12ed5e
--- /dev/null
+++ b/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantLoadingBanner.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+ {{ $t('Generating text…') }}
+
+
+
+
diff --git a/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantTextTools.vue b/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantTextTools.vue
new file mode 100644
index 0000000000..1b9519b568
--- /dev/null
+++ b/app/frontend/shared/components/Form/fields/FieldEditor/AiAssistantTextTools/AiAssistantTextTools.vue
@@ -0,0 +1,229 @@
+
+
+
+
+
+
+
+ -
+
+
+
+