From 4d1589f957d5f6fa9ce4c9576a5225de817fcd33 Mon Sep 17 00:00:00 2001 From: Farzad Hayat Date: Thu, 22 Aug 2024 09:10:10 +1000 Subject: [PATCH] DOC-2494: Add AI Assistant to full-featured demo (6 Docs) (#3427) * DOC-2494: Add AI Assistant to full-featured demo * DOC-2494: Remove AI Assistant from Excluded plugins in full-featured-premium-demo.adoc --- .../live-demos/full-featured/example.js | 143 +++++++++++++++++- .../live-demos/full-featured/index.html | 14 ++ .../live-demos/full-featured/index.js | 141 ++++++++++++++++- .../pages/full-featured-premium-demo.adoc | 3 - 4 files changed, 292 insertions(+), 9 deletions(-) diff --git a/modules/ROOT/examples/live-demos/full-featured/example.js b/modules/ROOT/examples/live-demos/full-featured/example.js index 01efbdd4ae..c926d22390 100644 --- a/modules/ROOT/examples/live-demos/full-featured/example.js +++ b/modules/ROOT/examples/live-demos/full-featured/example.js @@ -1,15 +1,23 @@ +const fetchApi = import( + "https://unpkg.com/@microsoft/fetch-event-source@2.0.1/lib/esm/index.js" +).then((module) => module.fetchEventSource); + +// This example stores the OpenAI API key in the client side integration. This is not recommended for any purpose. +// Instead, an alternate method for retrieving the API key should be used. +const openai_api_key = ""; + const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches; tinymce.init({ selector: 'textarea#full-featured', - plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export footnotes mergetags autocorrect typography advtemplate', + plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export footnotes mergetags autocorrect typography advtemplate', tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER', tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY', tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY', tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID', mobile: { - plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate', + plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate', }, menu: { tc: { @@ -148,5 +156,134 @@ tinymce.init({ value: 'Salutation', title: 'Salutation' } - ] + ], + ai_request: (request, respondWith) => { + respondWith.stream((signal, streamMessage) => { + // Adds each previous query and response as individual messages + const conversation = request.thread.flatMap((event) => { + if (event.response) { + return [ + { role: "user", content: event.request.query }, + { role: "assistant", content: event.response.data }, + ]; + } else { + return []; + } + }); + + // System messages provided by the plugin to format the output as HTML content. + const systemMessages = request.system.map((content) => ({ + role: "system", + content, + })); + + // Forms the new query sent to the API + const content = + request.context.length === 0 || conversation.length > 0 + ? request.query + : `Question: ${request.query} Context: """${request.context}"""`; + + const messages = [ + ...conversation, + ...systemMessages, + { role: "user", content }, + ]; + + let hasHead = false; + let markdownHead = ""; + + const hasMarkdown = (message) => { + if (message.includes("`") && markdownHead !== "```") { + const numBackticks = message.split("`").length - 1; + markdownHead += "`".repeat(numBackticks); + if (hasHead && markdownHead === "```") { + markdownHead = ""; + hasHead = false; + } + return true; + } else if (message.includes("html") && markdownHead === "```") { + markdownHead = ""; + hasHead = true; + return true; + } + return false; + }; + + const requestBody = { + model: "gpt-4o", + temperature: 0.7, + max_tokens: 4000, + messages, + stream: true, + }; + + const openAiOptions = { + signal, + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${openai_api_key}`, + }, + body: JSON.stringify(requestBody), + }; + + const onopen = async (response) => { + if (response) { + const contentType = response.headers.get("content-type"); + if (response.ok && contentType?.includes("text/event-stream")) { + return; + } else if (contentType?.includes("application/json")) { + const data = await response.json(); + if (data.error) { + throw new Error(`${data.error.type}: ${data.error.message}`); + } + } + } else { + throw new Error("Failed to communicate with the ChatGPT API"); + } + }; + + // This function passes each new message into the plugin via the `streamMessage` callback. + const onmessage = (ev) => { + const data = ev.data; + if (data !== "[DONE]") { + const parsedData = JSON.parse(data); + const firstChoice = parsedData?.choices[0]; + const message = firstChoice?.delta?.content; + if (message && message !== "") { + if (!hasMarkdown(message)) { + streamMessage(message); + } + } + } + }; + + const onerror = (error) => { + // Stop operation and do not retry by the fetch-event-source + throw error; + }; + + // Use microsoft's fetch-event-source library to work around the 2000 character limit + // of the browser `EventSource` API, which requires query strings + return fetchApi + .then((fetchEventSource) => + fetchEventSource("https://api.openai.com/v1/chat/completions", { + ...openAiOptions, + openWhenHidden: true, + onopen, + onmessage, + onerror, + }) + ) + .then(async (response) => { + if (response && !response.ok) { + const data = await response.json(); + if (data.error) { + throw new Error(`${data.error.type}: ${data.error.message}`); + } + } + }) + .catch(onerror); + }); + }, }); diff --git a/modules/ROOT/examples/live-demos/full-featured/index.html b/modules/ROOT/examples/live-demos/full-featured/index.html index 3a8a663ee2..f80b8da010 100644 --- a/modules/ROOT/examples/live-demos/full-featured/index.html +++ b/modules/ROOT/examples/live-demos/full-featured/index.html @@ -54,6 +54,20 @@

Character strings to demonstrate some of the Advanced Typography plugin’s
  • 30C is 86F
    • +

    🤖 Try out AI Assistant!

    + +

    Below are just a few of the ways you can use AI Assistant within your app. Since you can define your own custom prompts, the sky really is the limit!

    +

     🎭 Changing tone – Lighten up the sentence below by selecting the text, clicking , and choosing Change tone > Friendly.

    +
    +

    The 3Q23 financial results followed a predictable trend, reflecting the status quo from previous years.

    +
    +

    📝 Summarizing – Below is a long paragraph that people may not want to read from start to finish. Get a quick summary by selecting the text, clicking , and choosing Summarize content.

    +
    +

    Population growth in the 17th century was marked by significant increment in the number of people around the world. Various factors contributed to this demographic trend. Firstly, advancements in agriculture and technology resulted in increased food production and improved living conditions. This led to decreased mortality rates and better overall health, allowing for more individuals to survive and thrive. Additionally, the exploration and expansion of European powers, such as colonization efforts, fostered migration and settlement in new territories.

    +
    +

    💡 Writing from scratch – Ask AI Assistant to generate content from scratch by clicking , and typing Write a marketing email announcing TinyMCE's new AI Assistant plugin.

    +

     

    +

    Note on the included Advanced Template demonstration

    The included Advanced Template demonstration uses the advtemplate_list configuration option to return a local promise containing a basic Template structure with self-contained examples.

    diff --git a/modules/ROOT/examples/live-demos/full-featured/index.js b/modules/ROOT/examples/live-demos/full-featured/index.js index 48b7a81366..9a8849a6f8 100644 --- a/modules/ROOT/examples/live-demos/full-featured/index.js +++ b/modules/ROOT/examples/live-demos/full-featured/index.js @@ -1,3 +1,7 @@ +const fetchApi = import( + "https://unpkg.com/@microsoft/fetch-event-source@2.0.1/lib/esm/index.js" +).then((module) => module.fetchEventSource); + /* Script to import faker.js for generating random data for demonstration purposes */ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/faker.min.js']).then(() => { @@ -140,9 +144,139 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches; + const ai_request = (request, respondWith) => { + respondWith.stream((signal, streamMessage) => { + // Adds each previous query and response as individual messages + const conversation = request.thread.flatMap((event) => { + if (event.response) { + return [ + { role: "user", content: event.request.query }, + { role: "assistant", content: event.response.data }, + ]; + } else { + return []; + } + }); + + // System messages provided by the plugin to format the output as HTML content. + const systemMessages = request.system.map((content) => ({ + role: "system", + content, + })); + + // Forms the new query sent to the API + const content = + request.context.length === 0 || conversation.length > 0 + ? request.query + : `Question: ${request.query} Context: """${request.context}"""`; + + const messages = [ + ...conversation, + ...systemMessages, + { role: "user", content }, + ]; + + let hasHead = false; + let markdownHead = ""; + + const hasMarkdown = (message) => { + if (message.includes("`") && markdownHead !== "```") { + const numBackticks = message.split("`").length - 1; + markdownHead += "`".repeat(numBackticks); + if (hasHead && markdownHead === "```") { + markdownHead = ""; + hasHead = false; + } + return true; + } else if (message.includes("html") && markdownHead === "```") { + markdownHead = ""; + hasHead = true; + return true; + } + return false; + }; + + const requestBody = { + model: "gpt-4o", + temperature: 0.7, + max_tokens: 4000, + messages, + stream: true, + }; + + const openAiOptions = { + signal, + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer {{ openai_proxy_token }}`, + }, + body: JSON.stringify(requestBody), + }; + + const onopen = async (response) => { + if (response) { + const contentType = response.headers.get("content-type"); + if (response.ok && contentType?.includes("text/event-stream")) { + return; + } else if (contentType?.includes("application/json")) { + const data = await response.json(); + if (data.error) { + throw new Error(`${data.error.type}: ${data.error.message}`); + } + } + } else { + throw new Error("Failed to communicate with the ChatGPT API"); + } + }; + + // This function passes each new message into the plugin via the `streamMessage` callback. + const onmessage = (ev) => { + const data = ev.data; + if (data !== "[DONE]") { + const parsedData = JSON.parse(data); + const firstChoice = parsedData?.choices[0]; + const message = firstChoice?.delta?.content; + if (message && message !== "") { + if (!hasMarkdown(message)) { + streamMessage(message); + } + } + } + }; + + const onerror = (error) => { + // Stop operation and do not retry by the fetch-event-source + throw error; + }; + + // Use microsoft's fetch-event-source library to work around the 2000 character limit + // of the browser `EventSource` API, which requires query strings + return fetchApi + .then((fetchEventSource) => + fetchEventSource("{{ openai_proxy_url }}", { + ...openAiOptions, + openWhenHidden: true, + onopen, + onmessage, + onerror, + }) + ) + .then(async (response) => { + if (response && !response.ok) { + const data = await response.json(); + if (data.error) { + throw new Error(`${data.error.type}: ${data.error.message}`); + } + } + }) + .catch(onerror); + }); + }; + tinymce.init({ selector: 'textarea#full-featured', - plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export footnotes mergetags autocorrect typography advtemplate', + plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable export footnotes mergetags autocorrect typography advtemplate', editimage_cors_hosts: ['picsum.photos'], tinydrive_token_provider: (success, failure) => { success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' }); @@ -152,7 +286,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak tinydrive_google_drive_key: 'AIzaSyAsVRuCBc-BLQ1xNKtnLHB3AeoK-xmOrTc', tinydrive_google_drive_client_id: '748627179519-p9vv3va1mppc66fikai92b3ru73mpukf.apps.googleusercontent.com', mobile: { - plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate', + plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate', }, menu: { tc: { @@ -291,6 +425,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak value: 'Salutation', title: 'Salutation' } - ] + ], + ai_request, }); }); diff --git a/modules/ROOT/pages/full-featured-premium-demo.adoc b/modules/ROOT/pages/full-featured-premium-demo.adoc index 25e04c9ab3..d95bf5c609 100644 --- a/modules/ROOT/pages/full-featured-premium-demo.adoc +++ b/modules/ROOT/pages/full-featured-premium-demo.adoc @@ -18,9 +18,6 @@ The following plugins are excluded from this example: |Excluded plugins |Notes -|xref:ai.adoc[AI Assistant] -|Logistical concerns regarding exposing API keys preclude adding this. - |xref:autoresize.adoc[Autoresize] |Resizes the editor to fit the content.