TAR-136: Revert "Merge pull request #133 from amplience/revert-130-ma…

…ster" This reverts commit 18eb6db, reversing changes made to 7857e83.
amplience · Feb 2, 2024 · aeadc90 · aeadc90
1 parent 18eb6db
commit aeadc90
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -169,10 +169,52 @@ Powered by ChatGPT, the AI Assistant allows users to quickly generate and edit c
 
 ![Generate content from prompt](media/aiPrompt.png)
 
-To get started, you will need to provide your own OpenAI API key which will be used by the extension to communicate with the ChatGPT API. Note, ChatGPT is not affiliated with Amplience and therefore any impact to ChatGPT services such as updates, busy periods, or outages are outside of Amplience control.
+You can use the Generative AI Assistant with Amplience credits or your own OpenAI account.
 
 By using this feature, you are solely responsible for ensuring that AI generated content complies with internal company policies, applicable laws and [OpenAI's Terms](https://openai.com/policies).
 
+#### Using Amplience credits
+
+Amplience credits provide an easy way to start using our AI features without the need for your own OpenAI account. See [Amplience credits](https://amplience.com/developers/docs/ai-services/credits/)
+
+To use Amplience credits with the Generative AI Assistant, add the following to the extension parameters:
+
+```json
+{
+  "tools": {
+    "ai": {}
+  }
+}
+```
+
+For example:
+
+```json
+{
+  "properties": {
+    "text": {
+      "title": "Markdown text",
+      "description": "Markdown text",
+      "type": "string",
+      "minLength": 0,
+      "maxLength": 32000,
+      "ui:extension": {
+        "url": "https://rich-text.extensions.content.amplience.net",
+        "params": {
+          "tools": {
+            "ai": {}
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### Using your own Open AI account
+
+To get started, you will need to provide your own OpenAI API key which will be used by the extension to communicate with the ChatGPT API. Note, ChatGPT is not affiliated with Amplience and therefore any impact to ChatGPT services such as updates, busy periods, or outages are outside of Amplience control.
+
 To create your key, you first need an OpenAI account which you can create [here](https://platform.openai.com/signup). Once you have an account you can create an API key [here](https://platform.openai.com/account/api-keys).
 
 Once you have your API key, you can enable the AI Assistant feature by adding your API key to the extension parameters as follows:
@@ -187,7 +229,33 @@ Once you have your API key, you can enable the AI Assistant feature by adding yo
 }
 ```
 
-#### ChatGPT 4
+For example:
+
+```json
+{
+  "properties": {
+    "text": {
+      "title": "Markdown text",
+      "description": "Markdown text",
+      "type": "string",
+      "minLength": 0,
+      "maxLength": 32000,
+      "ui:extension": {
+        "url": "https://rich-text.extensions.content.amplience.net",
+        "params": {
+          "tools": {
+            "ai": {
+              "key": "<OpenAI key>"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+#### Using ChatGPT 4
 
 If you have access to ChatGPT 4 or wish to use a different OpenAI model, you can choose the specific model the system should use as follows:
 

diff --git a/media/aiPrompt.png b/media/aiPrompt.png
diff --git a/packages/extension/public/index.html b/packages/extension/public/index.html
@@ -25,8 +25,32 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <!-- Google Tag Manager -->
+    <script>
+      (function(w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-MFBCGD8R");
+    </script>
+    <!-- End Google Tag Manager -->
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-MFBCGD8R"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.stories.tsx b/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.stories.tsx
@@ -11,7 +11,7 @@ import { ProseMirrorTool } from "@dc-extension-rich-text/common";
 import FormatBold from "@material-ui/icons/FormatBold";
 import {
   computeToolbarState,
-  ProseMirrorToolbarState
+  ProseMirrorToolbarState,
 } from "./ProseMirrorToolbarState";
 
 // tslint:disable-next-line
@@ -25,34 +25,34 @@ const tools: ProseMirrorTool[] = [
     label: "Bold",
     displayIcon: <FormatBold />,
     isActive: (state: any) => isMarkActive(state, schema.marks.strong),
-    apply: toggleMark(schema.marks.strong)
-  }
+    apply: toggleMark(schema.marks.strong),
+  },
 ];
 
 const layout: ToolbarElement[] = [
   {
     type: "button",
-    toolName: "strong"
+    toolName: "strong",
   },
 
   {
     type: "group",
     children: [
       {
         type: "button",
-        toolName: "strong"
+        toolName: "strong",
       },
       {
         type: "button",
-        toolName: "strong"
-      }
-    ]
+        toolName: "strong",
+      },
+    ],
   },
 
   {
     type: "dropdown",
-    toolNames: ["strong"]
-  }
+    toolNames: ["strong"],
+  },
 ];
 
 const Editor: React.SFC<{}> = (props: any) => {
@@ -70,7 +70,11 @@ const Editor: React.SFC<{}> = (props: any) => {
 
   return (
     <div>
-      <ProseMirrorToolbar toolbarState={toolbarState} layout={layout} />
+      <ProseMirrorToolbar
+        toolbarState={toolbarState}
+        layout={layout}
+        params={{}}
+      />
       <ProseMirror schema={schema} onUpdateState={handleUpdateState} />
     </div>
   );

diff --git a/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.tsx b/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.tsx
@@ -7,6 +7,7 @@ import {
   createStyles,
   withStyles,
 } from "@material-ui/core";
+import { isToolEnabled } from "@dc-extension-rich-text/common";
 
 import { ProseMirrorToolbarContext } from ".";
 import { ProseMirrorToolbarIconButton } from "../ProseMirrorToolbarIconButton";
@@ -65,15 +66,17 @@ export interface ProseMirrorToolbarProps extends WithStyles<typeof styles> {
   toolbarState: ProseMirrorToolbarState | undefined;
   layout: ToolbarElement[];
   isLocked?: boolean;
+  params: Record<string, unknown>;
 }
 
 const ProseMirrorToolbar: React.SFC<ProseMirrorToolbarProps> = (
   props: ProseMirrorToolbarProps
 ) => {
-  const { classes, layout, toolbarState } = props;
+  const { classes, layout, toolbarState, params } = props;
   const richTextEditorContext = useRichTextEditorContext();
   const group1 = layout.slice(0, 3);
   const group2 = layout.slice(3);
+  const isAiToolEnabled = (params?.tools as Record<string, unknown>)?.ai;
 
   const renderToolbarElement = (idx: number, element: ToolbarElement) => {
     switch (element.type) {
@@ -176,24 +179,32 @@ const ProseMirrorToolbar: React.SFC<ProseMirrorToolbarProps> = (
     >
       <MaterialToolbar className={classes.root} disableGutters={true}>
         <div className={classes.group}>
-          <Button
-            disabled={richTextEditorContext.isLocked}
-            onClick={showAIGenerateDialog}
-            className={classes.button}
-            size="small"
-            startIcon={
-              !richTextEditorContext.isLocked && (
-                <SparklesIcon style={{ width: 15, height: 15 }}></SparklesIcon>
-              )
-            }
-          >
-            {richTextEditorContext.isLocked ? (
-              <Loader></Loader>
-            ) : (
-              "AI Assistant"
-            )}
-          </Button>
-          <div className={classes.divider}></div>
+          {isAiToolEnabled ? (
+            <>
+              <Button
+                disabled={richTextEditorContext.isLocked}
+                onClick={showAIGenerateDialog}
+                className={classes.button}
+                size="small"
+                startIcon={
+                  !richTextEditorContext.isLocked && (
+                    <SparklesIcon
+                      style={{ width: 15, height: 15 }}
+                    ></SparklesIcon>
+                  )
+                }
+              >
+                {richTextEditorContext.isLocked ? (
+                  <Loader></Loader>
+                ) : (
+                  "AI Assistant"
+                )}
+              </Button>
+              <div className={classes.divider}></div>
+            </>
+          ) : (
+            ""
+          )}
           {group1.map((value, idx) => renderToolbarElement(idx, value))}
         </div>
         <div className={classes.group}>

diff --git a/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbarState.ts b/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbarState.ts
@@ -1,12 +1,13 @@
 import {
   ProseMirrorTool,
   ProseMirrorToolState,
-  RichTextEditorContextProps
+  RichTextEditorContextProps,
 } from "@dc-extension-rich-text/common";
 
 export interface ProseMirrorToolbarState {
   tools: ProseMirrorTool[];
   toolStates: { [toolName: string]: ProseMirrorToolState };
+  params: Record<string, unknown>;
 }
 
 export function computeToolbarState(
@@ -21,7 +22,7 @@ export function computeToolbarState(
       active: false,
       enabled: true,
       visible: true,
-      ...tool
+      ...tool,
     };
 
     if (tool.isActive) {
@@ -41,6 +42,7 @@ export function computeToolbarState(
 
   return {
     tools,
-    toolStates
+    toolStates,
+    params: {},
   };
 }
diff --git a/packages/extension/src/RichTextEditor/RichTextEditor.tsx b/packages/extension/src/RichTextEditor/RichTextEditor.tsx
@@ -217,6 +217,7 @@ const RichTextEditor: React.SFC<RichTextEditorProps> = (
                     toolbarState={toolbarState}
                     layout={toolbarLayout}
                     isLocked={editorContext.isLocked}
+                    params={params}
                   />
                 </>
               )}

diff --git a/packages/extension/src/RichTextEditorAIActionsBar/RichTextEditorAIActionsBar.tsx b/packages/extension/src/RichTextEditorAIActionsBar/RichTextEditorAIActionsBar.tsx
@@ -49,7 +49,7 @@ const RichTextEditorAIActionsBar: React.SFC<RichTextEditorAIActionsBarProps> = (
   } = useRichTextEditorContext();
 
   const configuration = new AIConfiguration(params);
-  const isAiToolEnabled = isToolEnabled("ai", params);
+  const isAiToolEnabled = (params?.tools as Record<string, unknown>)?.ai;
   const editPrompts = configuration.getEditPrompts();
 
   const handleEditPrompt = async (prompt: any) => {