new tool files

wax-prosemirror-services/src/AiService/AiToolGroupService/AiToolGroupService.js

 import { Service } from 'wax-prosemirror-core';
-import ToggleAiTool from './ToggleAiTool';
+import ToggleAi from './ToggleAi';
 
 class AiToolGroupService extends Service {
   register() {
-    this.container.bind('ToggleAiTool').to(ToggleAiTool);
+    this.container.bind('ToggleAi').to(ToggleAi);
   }
 }
 

wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAiTool.js → wax-prosemirror-services/src/AiService/AiToolGroupService/ToggleAi.js

@@ -2,13 +2,13 @@ import { injectable, inject } from 'inversify';
 import { ToolGroup } from 'wax-prosemirror-core';
 
 @injectable()
-class ToggleAiTool extends ToolGroup {
+class ToggleAi extends ToolGroup {
   tools = [];
 
-  constructor() {
+  constructor(@inject('ToggleAiTool') toggleAiTool) {
     super();
-    this.tools = [];
+    this.tools = [toggleAiTool];
   }
 }
 
-export default ToggleAiTool;
+export default ToggleAi;

wax-prosemirror-services/src/AiService/AskAiContentService.js

@@ -2,6 +2,7 @@ import { Service } from 'wax-prosemirror-core';
 import AskAIOverlay from './components/AskAIOverlay';
 import AskAiSelectionPlugin from './plugins/AskAiSelectionPlugin';
 import AiToolGroupService from './AiToolGroupService/AiToolGroupService';
+import ToggleAiTool from './ToggleAiTool';
 import './AskAiContent.css';
 
 class AskAiContentService extends Service {
@@ -29,6 +30,10 @@ class AskAiContentService extends Service {
     );
   }
 
+  register() {
+    this.container.bind('ToggleAiTool').to(ToggleAiTool);
+  }
+
   dependencies = [new AiToolGroupService()];
 }
 

wax-prosemirror-services/src/AiService/ToggleAiTool.js

+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Tools } from 'wax-prosemirror-core';
+import ToggleAiComponent from './components/ToggleAiComponent';
+
+class ToggleAiTool extends Tools {
+  title = 'Toggle Ai';
+  icon = '';
+  name = 'ToggleAi';
+
+  renderTool(view) {
+    return (
+      <ToggleAiComponent item={this.toJSON()} key={uuidv4()} view={view} />
+    );
+  }
+}
+
+export default ToggleAiTool;

wax-prosemirror-services/src/AiService/components/ToggleAiComponent.js

+import React, { useMemo, useState, useContext } from 'react';
+import styled from 'styled-components';
+import { WaxContext } from 'wax-prosemirror-core';
+
+const ToggleAiComponent = ({ item }) => {
+  const { icon, title } = item;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    pmViews: { main },
+  } = useContext(WaxContext);
+
+  let isDisabled = false;
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
+  if (!isEditable) isDisabled = true;
+
+  return useMemo(() => <span> Toggle Ai</span>, [isOpen, isDisabled]);
+};
+
+export default ToggleAiComponent;