DOC-2453: Port AI integration guides and gpt-4o upgrade into 6 Docs (#3369)

Author: Farzad Hayat

antora.yml

@@ -14,6 +14,8 @@ asciidoc:
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/6/tinydrive.min.js
     webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
     jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js
+    openai_proxy_url: https://openai.ai-demo-proxy.tiny.cloud/v1/chat/completions
+    openai_proxy_token: eyJhbGciOiJFUzM4NCJ9.eyJhdWQiOlsiaHR0cHM6Ly9vcGVuYWkuYWktZGVtby1wcm94eS50aW55LmNsb3VkLyJdLCJleHAiOjE3MTk3NTYwMDAsImh0dHBzOi8vb3BlbmFpLmFpLWRlbW8tcHJveHkudGlueS5jbG91ZC9yb2xlIjoicHVibGljLWRlbW8iLCJpc3MiOiJodHRwczovL2FpLWRlbW8tcHJveHkudGlueS5jbG91ZC8iLCJqdGkiOiJlYWU5MjBhMy05ZGQ0LTRkZjUtYTM4Yy04ODY5ZTJkZGIwYTQiLCJzdWIiOiJhaS1hc3Npc3RhbnQtZGVtbyJ9.hX44J5hPOCLOidK8mBAcnlAVh-ae4nVTq3W92xRLuGiF_4mGZWn1W3Ihgd7unlffz7GDayGxD_3hoQx8f64bTJg5hyHjwjKH1AZj1EKRal-NCNbqmoUa0TOm6_VXpRl2
     default_meta_keywords: tinymce, documentation, docs, plugins, customizable skins, configuration, examples, html, php, java, javascript, image editor, inline editor, distraction-free editor, classic editor, wysiwyg
     # product variables
     productname: TinyMCE

modules/ROOT/examples/live-demos/ai-demo/index.html

@@ -0,0 +1,149 @@
+const fetchApi = import(
+  'https://unpkg.com/@microsoft/[email protected]/lib/esm/index.js'
+).then((module) => module.fetchEventSource);
+
+// This example stores the 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 api_key = '<INSERT_API_KEY_HERE>';
+
+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 ${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);
+  });
+};
+
+tinymce.init({
+  selector: 'textarea', // change this value according to your HTML
+  plugins: 'ai advlist anchor autolink charmap advcode emoticons fullscreen help image link lists media preview searchreplace table',
+  toolbar: 'undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image | code',
+  height: 650,
+  ai_request,
+});

modules/ROOT/examples/live-demos/ai-demo/index.js

@@ -0,0 +1,13 @@
+<textarea id="ai">
+  <h1 class="p1"><span class="s1">🤖</span><span class="s2"><strong> Try out AI Assistant!</strong></span></h1>
+  <p class="p2"><span class="s2">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!</span></p>
+  <p class="p2"><span class="s2"><strong>&nbsp;</strong></span><span class="s3">🎭</span><span class="s2"><strong> Changing tone </strong>&ndash;<strong>&nbsp;</strong>Lighten up the sentence below by selecting the text, clicking <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Change tone &gt; Friendly</em>.</span></p>
+  <blockquote>
+  <p class="p2"><span class="s2">The 3Q23 financial results followed a predictable trend, reflecting the status quo from previous years.</span></p>
+  </blockquote>
+  <p class="p2"><span class="s3">📝</span><span class="s2"><strong> Summarizing&nbsp;</strong>&ndash; 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 <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Summarize content</em>.</span></p>
+  <blockquote>
+  <p class="p2"><span class="s2">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.</span></p>
+  </blockquote>
+  <p class="p2"><span class="s3">💡</span><span class="s2"><strong> Writing from scratch</strong> &ndash; Ask AI Assistant to generate content from scratch by clicking <img src="{{imagesdir}}/ai-plugin/ai-icon.svg" width="20" height="20"/>, and typing&nbsp;<em>Write a marketing email announcing TinyMCE's new AI Assistant plugin</em>.</span></p>
+</textarea>

modules/ROOT/examples/live-demos/ai/example.js

@@ -0,0 +1,145 @@
+const fetchApi = import(
+  'https://unpkg.com/@microsoft/[email protected]/lib/esm/index.js'
+).then((module) => module.fetchEventSource);
+
+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', // change this value according to your HTML
+  plugins: 'ai advlist anchor autolink charmap advcode emoticons fullscreen help image link lists media preview searchreplace table',
+  toolbar: 'undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image | code',
+  height: 650,
+  ai_request,
+});