diff --git a/.github/workflows/gitleaks.yaml b/.github/workflows/gitleaks.yaml
new file mode 100644
index 0000000..9ae62e1
--- /dev/null
+++ b/.github/workflows/gitleaks.yaml
@@ -0,0 +1,44 @@
+name: Secret Value found!!
+on:
+ push:
+ public:
+jobs:
+ scan:
+ name: gitleaks
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4.2.2
+ - name: Install the gitleaks
+ run: wget https://github.com/zricethezav/gitleaks/releases/download/v8.15.2/gitleaks_8.15.2_linux_x64.tar.gz
+ shell: pwsh
+ - name: Extract the tar file
+ run: tar xzvf gitleaks_8.15.2_linux_x64.tar.gz
+ - name: Generate the report
+ id: gitleaks
+ run: $GITHUB_WORKSPACE/gitleaks detect -s $GITHUB_WORKSPACE -f json -r $GITHUB_WORKSPACE/leaksreport.json
+ shell: bash
+ continue-on-error: true
+ - name: Setup NuGet.exe
+ if: steps.gitleaks.outcome != 'success'
+ uses: nuget/setup-nuget@v2
+ with:
+ nuget-version: latest
+ - name: Install Mono
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ sudo apt update
+ sudo apt install -y mono-complete
+ - name: Install the dotnet SDK to a custom directory
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ mkdir -p $GITHUB_WORKSPACE/dotnet
+ curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir $GITHUB_WORKSPACE/dotnet --channel 6.0
+ - name: Install the report tool packages
+ if: steps.gitleaks.outcome != 'success'
+ run: |
+ export PATH=$GITHUB_WORKSPACE/dotnet:$PATH
+ nuget install "Syncfusion.Email" -source ${{ secrets.NexusFeedLink }} -ExcludeVersion
+ dir $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0
+ dotnet $GITHUB_WORKSPACE/Syncfusion.Email/lib/net6.0/GitleaksReportMail.dll ${{ secrets.CITEAMCREDENTIALS }} "$GITHUB_REF_NAME" ${{ secrets.NETWORKCREDENTIALS }} ${{ secrets.NETWORKKEY }} "$GITHUB_WORKSPACE" ${{ secrets.ORGANIZATIONNAME }}
+ exit 1
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4d29575
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
index 5c9fecd..def2963 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,71 @@
-# ai-powered-docx-editor-sample
+# ai-powered-react-docx-editor-sample
A sample project showcasing the DOCX Editor with AI assistance for generating, refining, and summarizing content.
+
+## Getting Started
+
+To get started, clone the `ai-powered-react-docx-editor-sample` repository.
+
+```
+git clone https://github.com/SyncfusionExamples/ai-powered-react-docx-editor-sample.git
+```
+
+## Installation
+
+All required packages are pre-configured in the `package.json` file. Install the dependencies by running:
+
+```
+npm install
+```
+
+## License Registration
+
+Before using the Syncfusion DOCX Editor, register your license key in the `src/index.tsx` file:
+
+```
+import { registerLicense } from '@syncfusion/ej2-base';
+
+// Registering Syncfusion license key
+registerLicense('Replace your generated license key here');
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+
+
+
+);
+```
+
+For more details on license registration, refer to the [official documentation](https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration#register-syncfusion-license-key-in-the-project).
+
+## Configuring AI Services
+
+To set up the AI services, navigate to `src/ai-models.ts` and replace the placeholders with your actual credentials:
+
+```
+const azure = createAzure({
+ resourceName: 'YOUR_RESOURCE_NAME',
+ apiKey: 'YOUR_API_KEY',
+});
+const aiModel = azure('YOUR_MODEL_NAME');
+
+// for gemini model
+const google = createGoogleGenerativeAI({
+ baseURL: "https://generativelanguage.googleapis.com/v1beta",
+ apiKey: "API_KEY"
+});
+const aiModel = google('YOUR_MODEL_NAME');
+```
+
+Your Azure endpoint should resemble: `https://{resource_name}.openai.azure.com/`
+
+For more information on Azure OpenAI configuration, consult the [Vercel AI SDK documentation](https://sdk.vercel.ai/providers/ai-sdk-providers/azure).
+
+## Development Server
+
+To run the application, use the following npm script:
+
+```
+npm start
+```
+
+This command will start the DOCX Editor and open it in your default web browser.
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3fa29d6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,70 @@
+{
+ "name": "my-app",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@syncfusion/ej2": "*",
+ "@syncfusion/ej2-base": "*",
+ "@syncfusion/ej2-react-base": "*",
+ "@syncfusion/ej2-react-buttons": "*",
+ "@syncfusion/ej2-react-documenteditor": "*",
+ "@syncfusion/ej2-react-dropdowns": "*",
+ "@syncfusion/ej2-react-inputs": "*",
+ "@syncfusion/ej2-react-interactive-chat": "*",
+ "@syncfusion/ej2-react-layouts": "*",
+ "@syncfusion/ej2-react-lists": "*",
+ "@syncfusion/ej2-react-navigations": "*",
+ "@syncfusion/ej2-react-notifications": "*",
+ "@syncfusion/ej2-react-popups": "*",
+ "@syncfusion/ej2-react-splitbuttons": "*",
+ "@xenova/transformers": "^2.17.2",
+ "@ai-sdk/azure": "^3.0.6",
+ "@ai-sdk/google": "^3.0.6",
+ "@azure/openai": "^2.0.0-beta.1",
+ "@google/generative-ai": "^0.13.0",
+ "ai": "^6.0.27",
+ "form-data": "^4.0.0",
+ "groq-sdk": "^0.5.0",
+ "openai": "^4.56.0",
+ "@testing-library/dom": "^10.4.0",
+ "@testing-library/jest-dom": "^6.6.3",
+ "@testing-library/react": "^16.3.0",
+ "@testing-library/user-event": "^13.5.0",
+ "@types/jest": "^27.5.2",
+ "@types/node": "^16.18.126",
+ "@types/react": "^19.1.6",
+ "@types/react-dom": "^19.1.5",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-scripts": "5.0.1",
+ "typescript": "^4.9.5",
+ "web-vitals": "^2.1.4"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@types/codemirror": "^5.60.16"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..a11777c
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..3121d5c
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AI-Powered React DOCX Editor
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/logo192.png b/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/public/logo512.png differ
diff --git a/src/AIPopup.css b/src/AIPopup.css
new file mode 100644
index 0000000..df79aba
--- /dev/null
+++ b/src/AIPopup.css
@@ -0,0 +1,351 @@
+.ai-assist-dialog,
+.e-stop-generating-dialog {
+ max-height: none !important;
+}
+
+.e-dlg-container.e-smart-editor-dialog,
+.ai-settings-menu .e-control.e-contextmenu,
+.ai-smart-menu ul {
+ position: fixed !important;
+}
+
+.ai-assist-dialog,
+.e-stop-generating-dialog,
+.e-smart-editor-dialog {
+ min-width: 280px !important;
+}
+
+.e-original-word .e-original-word {
+ color: #DC143C;
+ text-decoration: line-through;
+}
+
+.e-improved-word {
+ color: #228B22;
+}
+
+.ai-chat-btn.e-btn {
+ height: 40px;
+ width: 40px;
+ min-height: 40px;
+ min-width: 40px;
+}
+
+.ai-input-wrapper {
+ flex: 1;
+}
+
+.e-caret-hide .e-caret {
+ display: none;
+}
+
+.ai-input-wrapper .e-send.e-disabled {
+ pointer-events: none;
+}
+
+.ai-gc-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.e-smart-editor-dialog .pane-content-header {
+ display: flex;
+ height: 48px;
+ align-items: center;
+}
+
+.e-smart-editor-dialog .pane-text-area {
+ height: 280px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 6px 10px !important;
+ min-height: 280px;
+ overflow-y: auto;
+}
+
+.e-smart-editor-dialog .e-split-bar.e-resizable-split-bar,
+.e-smart-editor-dialog .e-resizable-split-bar.e-split-bar-hover,
+.e-smart-editor-dialog .e-resize-handler.e-icons {
+ display: none !important;
+}
+
+.e-smart-editor-dialog .e-dlg-header-content {
+ height: 56px;
+ padding: 12px 16px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-dlg-header-content {
+ height: 64px;
+ padding: 12px 20px;
+}
+
+.e-smart-editor-dialog .e-dlg-header-content .e-custom-header {
+ height: 32px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.e-bigger .e-smart-editor-dialog .e-dlg-header-content .e-custom-header {
+ height: 42px;
+}
+
+.e-ai-assist-toolbar,
+.e-ai-assist-toolbar .e-toolbar-items,
+.e-ai-assist-toolbar .e-toolbar-item,
+.e-ai-assist-toolbar .e-toolbar-item:hover,
+.e-ai-assist-toolbar .e-toolbar-item:focus,
+.e-ai-assist-toolbar .e-toolbar-item .e-tbar-btn,
+.e-ai-assist-toolbar .e-dropdown-btn.settings-btn {
+ background-color: #fff !important;
+}
+
+.e-ai-assist-toolbar .e-toolbar-item .e-tbar-btn,
+.e-ai-assist-toolbar .settings-btn {
+ box-shadow: none !important;
+}
+
+.e-ai-assist-toolbar .e-toolbar-item .e-tbar-btn-text,
+.e-ai-assist-toolbar .e-toolbar-item .e-btn-icon.e-icons {
+ color: #212529 !important;
+}
+
+.e-smart-editor-dialog .e-footer-content {
+ padding: 14px 16px 12px 16px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-footer-content {
+ padding: 16px 20px 16px 20px;
+}
+
+.e-smart-editor-dialog .e-splitter.e-splitter-vertical {
+ border: none;
+}
+
+.e-ai-chat-btn::before,
+.stop-popup-text-icon::before {
+ content: '\e903';
+}
+
+.ai-assist-btn .e-ai-assist-btn::before {
+ content: '\e950';
+}
+
+.e-bigger .ai-assist-btn .e-icons.e-ai-assist-btn {
+ height: 16px;
+ width: 16px;
+ margin: 10px;
+}
+
+.ai-assist-btn.e-btn {
+ background-color: #ffffff !important;
+ border-radius: 4px !important;
+ border: 1px solid #0F6CBD !important;
+ color: #0F6CBD !important;
+ min-height: 4px !important;
+ min-width: 4px !important;
+}
+
+.ai-generate-dialog .e-dlg-header-content {
+ display: none !important;
+}
+
+.settings-btn.e-dropdown-btn {
+ width: 36px;
+ height: 32px;
+ border: none;
+ color: #6b7280 !important;
+ box-shadow: none !important;
+ background: #fff !important;
+}
+
+.e-bigger .e-smart-editor-dialog .settings-btn {
+ height: 40px;
+ width: 40px;
+}
+
+.settings-btn .e-btn-icon {
+ color: #6b7280;
+}
+
+.e-smart-editor-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
+ height: 32px !important;
+ width: 32px !important;
+}
+
+.e-smart-editor-dialog .e-dlg-header-content .e-icon-dlg-close.e-icons {
+ position: static !important;
+}
+
+.e-stop-generating-dialog {
+ max-height: 100%;
+}
+
+.ai-stop-popup {
+ padding: 12px;
+ border-radius: 8px;
+ box-shadow: 0 0 16px 0 rgba(60, 60, 119, 0.11);
+}
+
+.e-bigger .ai-stop-popup {
+ height: 72px;
+ padding: 16px;
+}
+
+.ai-stop-popup .stop-popup-text {
+ margin: 0 6px;
+}
+
+.ai-stop-popup .stop-popup-text-icon {
+ color: #0F6CBD;
+ font-size: 18px;
+ vertical-align: middle;
+}
+
+.stop-popup-text-icon,
+.stop-popup-text {
+ line-height: 32px;
+}
+
+.e-bigger .stop-popup-text-icon,
+.e-bigger .stop-popup-text {
+ line-height: 40px;
+}
+
+.ai-stop-popup .ai-stop-btn {
+ height: 32px;
+ min-width: 151px;
+ line-height: 14px;
+ float: right;
+ z-index: 1000000001;
+}
+
+.e-bigger .ai-stop-popup .ai-stop-btn {
+ height: 40px;
+ min-width: 151px;
+ padding: 9px 16px;
+}
+
+.ai-stop-popup .ai-stop-btn,
+.ai-stop-popup .stop-popup-text,
+.e-ai-assist-toolbar .e-icons.e-btn,
+.e-smart-editor-dialog .translate-label,
+.e-smart-editor-dialog .e-icon-dlg-close,
+.ai-assist-dialog .e-dlg-content .e-icons.e-settings,
+.e-ai-assist-toolbar .e-toolbar-item.page-count span,
+.ai-assist-dialog .e-dlg-content .e-icons.e-reference,
+.ai-assist-dialog .e-dlg-content .e-icons.e-send,
+.ai-assist-dialog .e-dlg-content .e-textbox.e-input,
+.ai-assist-dialog .e-dlg-header-content .e-popup-header,
+.ai-assist-btn .e-icons.e-ai-assist-btn {
+ font-size: 14px !important;
+}
+
+.e-bigger .ai-stop-popup .ai-stop-btn,
+.e-bigger .e-ai-assist-toolbar .e-icons.e-btn,
+.e-bigger .ai-stop-popup .stop-popup-text,
+.e-bigger .e-smart-editor-dialog .translate-label,
+.e-smart-editor-dialog .e-dlg-header-content .e-popup-header,
+.e-bigger .e-ai-assist-toolbar .e-toolbar-item.page-count span,
+.e-bigger .e-smart-editor-dialog .e-icon-dlg-close,
+.e-bigger .ai-assist-dialog .e-dlg-content .e-icons.e-settings,
+.e-bigger .ai-assist-dialog .e-dlg-content .e-textbox.e-input,
+.e-bigger .ai-assist-dialog .e-dlg-header-content .e-popup-header,
+.ai-chat-btn .e-icons.e-ai-chat-btn,
+.e-bigger .ai-assist-btn .e-icons.e-ai-assist-btn {
+ font-size: 16px !important;
+}
+
+.ai-stop-popup .stop-popup-text-icon,
+.e-ai-assist-toolbar .e-toolbar-item.page-count span,
+.e-ai-assist-toolbar .e-icons.e-btn,
+.e-smart-editor-dialog .e-icon-dlg-close,
+.ai-assist-dialog .e-dlg-content .e-icons.e-settings,
+.ai-assist-dialog .e-dlg-content .e-icons.e-reference,
+.ai-assist-dialog .e-dlg-content .e-icons.e-send,
+.e-bigger .ai-assist-dialog .e-dlg-content .e-icons.e-reference,
+.e-bigger .ai-assist-dialog .e-dlg-content .e-icons.e-send,
+.ai-assist-dialog .e-dlg-content .e-textbox.e-input,
+.ai-chat-btn .e-icons.e-ai-chat-btn {
+ font-weight: 400 !important;
+}
+
+.e-smart-editor-dialog .translate-label,
+.ai-stop-popup .stop-popup-text,
+.e-bigger .ai-stop-popup .stop-popup-text,
+.e-smart-editor-dialog .e-dlg-header-content .e-popup-header {
+ font-weight: 600 !important;
+}
+
+.ai-settings-menu .e-menu-parent.e-ul .e-menu-item:not(.e-selected) {
+ padding-left: 34px;
+}
+
+.ai-settings-menu .e-menu-parent.e-ul .e-menu-item.e-selected {
+ padding-left: 8px;
+}
+
+.e-smart-editor-dialog .e-multiselect.e-control-wrapper,
+.e-smart-editor-dialog .e-ddl.e-control-wrapper {
+ margin-left: 8px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-ddl.e-control-wrapper {
+ margin-left: 12px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-multiselect.e-control-wrapper {
+ margin-left: 9px;
+}
+
+.e-smart-editor-dialog .e-header-toolbar {
+ height: 39px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-header-toolbar {
+ height: 48px;
+}
+
+.e-smart-editor-dialog .e-icons.e-settings {
+ vertical-align: baseline;
+}
+
+.e-bigger .e-smart-editor-dialog .e-icons.e-settings {
+ height: 16px;
+ width: 16px;
+}
+
+.e-bigger .e-smart-editor-dialog .e-dlg-closeicon-btn {
+ top: 1px;
+}
+
+.e-smart-editor-dialog .e-dlg-content {
+ padding: 0 16px !important;
+}
+
+.e-bigger .e-smart-editor-dialog .e-dlg-content {
+ padding: 0 20px !important;
+}
+
+.ai-settings-menu ul {
+ z-index: 1000000005 !important;
+}
+
+.e-ribbon-help-template.e-hide {
+ display: none !important;
+}
+
+.e-smart-editor-dialog .e-footer-content {
+ margin-top: 12px;
+}
+
+.ai-assist-dialog .settings-btn {
+ color: #6b7280;
+}
+
+.ai-assist-dialog .e-footer-content .e-discard-btn {
+ background-color: #fff !important;
+ border-color: #C50F1F !important;
+ color: #C50F1F !important;
+}
\ No newline at end of file
diff --git a/src/AIPopup.jsx b/src/AIPopup.jsx
new file mode 100644
index 0000000..8ac4bd2
--- /dev/null
+++ b/src/AIPopup.jsx
@@ -0,0 +1,1093 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
+import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
+import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-react-layouts';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { ComboBoxComponent, MultiSelectComponent, CheckBoxSelection, Inject } from '@syncfusion/ej2-react-dropdowns';
+import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+import { FabComponent } from '@syncfusion/ej2-react-buttons';
+import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import './editor-helpers.js';
+import './AIPopup.css';
+import { getAzureChatAIRequest } from './ai-models';
+
+const GrammarOptions = [
+ { Name: 'Subject-Verb Agreement' }, { Name: 'Tense Consistency' }, { Name: 'Pronoun Agreement' },
+ { Name: 'Comma Usage' }, { Name: 'Parallel Structure' }, { Name: 'Misplaced Modifiers' },
+ { Name: 'Dangling Modifiers' }, { Name: 'Word Choice' }, { Name: 'Redundancy' },
+ { Name: 'Use of Articles' }, { Name: 'Punctuation Marks' }, { Name: 'Apostrophes for Possessives and Contractions' },
+ { Name: 'Spelling Errors' },
+];
+
+const TranslateList = ['English', 'Simplified Chinese', 'Spanish', 'French', 'Arabic', 'Portuguese', 'Russian', 'Urdu', 'Indonesian', 'German', 'Japanese'];
+
+const AiTask = { Generate: 'Generate', Rephrase: 'Rephrase', Translate: 'Translate', Grammar: 'Grammar' };
+
+let aiResults = [];
+
+function levenshtein(a, b) {
+ const dp = Array(a.length + 1).fill(0).map(() => Array(b.length + 1).fill(0));
+ for (let i = 0; i <= a.length; i++) dp[i][0] = i;
+ for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+ for (let i = 1; i <= a.length; i++) {
+ for (let j = 1; j <= b.length; j++) {
+ const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+ dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost);
+ }
+ }
+ return dp[a.length][b.length];
+}
+
+function isSimilar(a, b, threshold = 1) {
+ if (!a || !b) return false;
+ return levenshtein(a, b) <= threshold;
+}
+
+function highlightDifferences(original, modified) {
+ const oWords = (original || '').split(/\s+/);
+ const mWords = (modified || '').split(/\s+/);
+ const lcs = Array(oWords.length + 1).fill(0).map(() => Array(mWords.length + 1).fill(0));
+ for (let i = 0; i < oWords.length; i++) {
+ for (let j = 0; j < mWords.length; j++) {
+ if (oWords[i] === mWords[j] || isSimilar(oWords[i], mWords[j])) lcs[i + 1][j + 1] = lcs[i][j] + 1;
+ else lcs[i + 1][j + 1] = Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+ }
+ }
+
+ const unchanged = new Set();
+ let x = oWords.length, y = mWords.length;
+
+ while (x > 0 && y > 0) {
+ if (oWords[x - 1] === mWords[y - 1] || isSimilar(oWords[x - 1], mWords[y - 1])) { unchanged.add(`${x - 1}|${y - 1}`); x--; y--; }
+ else if (lcs[x - 1][y] >= lcs[x][y - 1]) x--;
+ else y--;
+ }
+
+ const highlightedOriginal = oWords.map((w, i) =>
+ [...unchanged].some(k => k.startsWith(`${i}|`)) ? w : `${w}`).join(' ');
+
+ const highlightedModified = mWords.map((w, j) =>
+ [...unchanged].some(k => k.endsWith(`|${j}`)) ? w : `${w}`).join(' ');
+
+ return { highlightedOriginal, highlightedModified };
+}
+
+export default function AIPopup({ editorRef, onShowChatPane, chatOpen, assistInitialPos, isAIEnabled }) {
+ const [isSmartEditor, setIsSmartEditor] = useState(false);
+ const [popupType, setPopupType] = useState('');
+ const [tone, setTone] = useState('Professional');
+ const [format, setFormat] = useState('Paragraph');
+ const [length, setLength] = useState('Medium');
+ const [translateTo, setTranslateTo] = useState('French');
+ const [checks, setChecks] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [outHtml, setOutHtml] = useState('');
+ const [inHtml, setInHtml] = useState('');
+ const [suggestions, setSuggestions] = useState([]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [userPrompt, setUserPrompt] = useState('');
+ const [dialogPos, setDialogPos] = useState({ x: '200', y: '160' });
+ const cmAssistRef = useRef(null);
+ const gearRef = useRef(null);
+ const genDialogRef = useRef(null);
+ const smartDialogRef = useRef(null);
+ const textboxRef = useRef(null);
+ const stopDlgRef = useRef(null);
+ const [draftRange, setDraftRange] = useState({ start: null, end: null });
+ const [stopVisible, setStopVisible] = useState(false);
+ const [stopPos, setStopPos] = useState({ x: 0, y: 0 });
+ const canceledRef = useRef(false);
+ const gearHeaderRef = useRef(null);
+ const cmSettingsRef = useRef(null);
+ const [genVisible, setGenVisible] = useState(false);
+ const [smartVisible, setSmartVisible] = useState(false);
+ const assistFabRef = useRef(null);
+ const chatFabRef = useRef(null);
+ const [viewerHost, setViewerHost] = useState(null);
+ const [fabChatVisible, setFabChatVisible] = useState(false);
+ const [fabAssistVisible, setFabAssistVisible] = useState(false);
+
+ const [assistBtn, setAssistBtn] = useState({
+ left: 80,
+ top: 160,
+ width: 24,
+ height: 24,
+ visible: true
+ });
+
+ const isContentGenerated = popupType === AiTask.Generate && !isSmartEditor && !!outHtml;
+
+ const menuItems = [
+ { text: 'Rephrase', iconCss: 'e-icons e-rephrase' },
+ { text: 'Translate', iconCss: 'e-icons e-translate' },
+ { text: 'Grammar', iconCss: 'e-icons e-grammar-check' },
+ ];
+
+ const settingsMenuItems = [
+ {
+ id: 'parent-tone', text: 'Choose Tone', items: [
+ { id: 'child-tone-professional', text: 'Professional' },
+ { id: 'child-tone-friendly', text: 'Friendly' },
+ { id: 'child-tone-instructional', text: 'Instructional' },
+ { id: 'child-tone-marketing', text: 'Marketing' },
+ { id: 'child-tone-academic', text: 'Academic' },
+ { id: 'child-tone-legal', text: 'Legal' },
+ { id: 'child-tone-technical', text: 'Technical' },
+ { id: 'child-tone-narrative', text: 'Narrative' },
+ { id: 'child-tone-direct', text: 'Direct' }
+ ]
+ },
+ {
+ id: 'parent-format', text: 'Choose Format', items: [
+ { id: 'child-format-paragraph', text: 'Paragraph' },
+ { id: 'child-format-blog-post', text: 'Blog post' },
+ { id: 'child-format-technical-documentation', text: 'Technical Documentation' },
+ { id: 'child-format-report', text: 'Report' },
+ { id: 'child-format-research-papers', text: 'Research Papers' },
+ { id: 'child-format-tutorial', text: 'Tutorial' },
+ { id: 'child-format-meeting-notes', text: 'Meeting Notes' }
+ ]
+ },
+ {
+ id: 'parent-size', text: 'Choose Size', items: [
+ { id: 'child-size-short', text: 'Short' },
+ { id: 'child-size-medium', text: 'Medium' },
+ { id: 'child-size-long', text: 'Long' }
+ ]
+ }
+ ];
+
+ function buildPrompt(task, text, Regenerate, {
+ tone = 'Professional',
+ format = 'Paragraph',
+ length = 'Medium',
+ fromLang = 'English',
+ toLang = 'French',
+ checks = [],
+ userHint = ''
+ } = {}) {
+ const content = (text || '').trim().toLowerCase();
+ const toneValue = String(tone).toLowerCase();
+ const formatValue = String(format).toLowerCase();
+ const lengthValue = String(length).toLowerCase();
+ switch (task) {
+ case 'Generate': {
+ const currentResult = getSelectionText();
+ if (!Regenerate) {
+ return (currentResult.length > 0) ? {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and revise it based on the provided suggestion: '${content}'. Please adjust the text to reflect a tone of '${toneValue}', formatted in '${formatValue}' style, and maintain a length of '${lengthValue}'. Always respond in proper HTML format, excluding , , and tags.` },
+ { role: "user", content: currentResult }
+ ],
+ model: "gpt-4",
+ } : {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to generate content based on the provided text. Please adjust the text to reflect a tone of '${toneValue}', formatted in '${formatValue}' style, and maintain a length of '${lengthValue}'. Always respond in proper text format not a md format. Always respond in proper HTML format, excluding , , and tags.` },
+ { role: "user", content: content }
+ ],
+ model: "gpt-4",
+ };
+ } else {
+ return {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and rephrase it. Please adjust the text to reflect a tone of '${toneValue}', formatted in '${formatValue}' style, and maintain a length of '${lengthValue}'. Always respond in proper HTML format, excluding , , and tags.` },
+ { role: "user", content: currentResult }
+ ],
+ model: "gpt-4",
+ };
+ }
+ }
+
+ case 'Rephrase': {
+ if (!Regenerate) {
+ return {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and rephrase it. Please adjust the text to reflect a tone of '${toneValue}', formatted in '${formatValue}' style, and maintain a length of '${lengthValue}'. Always respond in proper HTML format, excluding , , and tags.` },
+ { role: "user", content: content }
+ ],
+ model: "gpt-4",
+ }
+ } else {
+ return {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and revise it based on the provided suggestion: '${aiResults}'. Please adjust the text to reflect a tone of '${toneValue}', formatted in '${formatValue}' style, and maintain a length of '${lengthValue}'. Always respond in proper HTML format, excluding , , and tags.` },
+ { role: "user", content: content }
+ ],
+ model: "gpt-4",
+ }
+ }
+ }
+
+ case 'Translate':
+ return {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to translate the provided text into '${toLang}'. Always respond in proper HTML format, excluding and tags.` },
+ { role: "user", content: content }
+ ],
+ model: "gpt-4",
+ };
+
+ case 'Grammar': {
+ let value = '';
+ let systemPrompt = '';
+ if (checks.length > 0) {
+ checks.forEach((item) => {
+ value += item + ', ';
+ });
+ systemPrompt = `You are a helpful assistant. Your task is to analyze the provided text and perform the following grammar checks: ${value}. Please ensure that the revised text reflects these corrections. Always respond in proper HTML format, but do not include , , or tags.`;
+ } else {
+ systemPrompt = "You are a helpful assistant. Your task is to analyze the provided text, check for and correct any grammatical errors, and rephrase it. Always respond in proper HTML format, but do not include , , or tags.";
+ }
+ return {
+ messages: [
+ { role: "system", content: systemPrompt },
+ { role: "user", content: content }
+ ],
+ model: "gpt-4",
+ };
+ }
+ default:
+ return content;
+ }
+ }
+
+ const generateContentOpen = (args) => {
+ if (isContentGenerated) {
+ const aiAssistBtnPosition = window?.getAIAssistPopupPosition?.();
+ const updatedPosition = window?.getRegeneratePopupPosition?.();
+ if (!aiAssistBtnPosition || !updatedPosition) return;
+ var x = String(Math.round(aiAssistBtnPosition.x));
+ var y = String(Math.round(updatedPosition.y));
+ genDialogRef.current.position.X = x;
+ genDialogRef.current.position.Y = y;
+ setDialogPos({ x: x, y: y });
+ }
+ }
+
+ const generateFooterTemplate = () => (
+
+
+ Keep it
+
+ runTask(AiTask.Generate, true)}>
+ Regenerate
+
+ Discard
+
+ );
+
+ useEffect(() => {
+ if (!assistInitialPos) return;
+ if (!isAIEnabled) {
+ setFabAssistVisible(false);
+ setFabChatVisible(false);
+ }
+ setAssistBtn(prev => ({
+ ...prev,
+ left: assistInitialPos.left ?? prev.left,
+ top: assistInitialPos.top ?? prev.top,
+ width: assistInitialPos.width ?? prev.width,
+ height: assistInitialPos.height ?? prev.height
+ }));
+ }, [
+ assistInitialPos?.left,
+ assistInitialPos?.top,
+ assistInitialPos?.width,
+ assistInitialPos?.height
+ ]);
+
+ useEffect(() => {
+ let mounted = true;
+ const pick = () => {
+ if (!mounted) return;
+ const el = document.querySelector('#document-editor #documentEditorDiv');
+ if (el && el !== viewerHost) {
+ setViewerHost(el);
+ }
+ };
+ pick();
+ const id = setInterval(pick, 300);
+ const onResize = () => pick();
+ window.addEventListener('resize', onResize);
+ return () => {
+ mounted = false;
+ clearInterval(id);
+ window.removeEventListener('resize', onResize);
+ };
+ }, [viewerHost]);
+
+
+ useEffect(() => {
+ if (isAIEnabled) {
+ setFabChatVisible(!chatOpen);
+ }
+ if (!chatOpen) {
+ requestAnimationFrame(positionChatFabByHelper);
+ }
+ }, [chatOpen]);
+
+ const getSelectionText = () => {
+ try {
+ return (editorRef?.current?.documentEditor?.selection?.text || '').trim();
+ } catch { return ''; }
+ };
+
+ const replaceSelectionWithPlainText = async (html) => {
+ const text = (html || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+ try {
+ const editor = editorRef?.current?.documentEditor;
+ if (editor?.selection?.text) editor.editor.delete();
+ editor?.editor?.insertText(text);
+ } catch (e) { alert('Replace failed: ' + e.message); }
+ };
+
+ const insertContent = async (out) => {
+ if (canceledRef.current) return;
+ closeStopDialog();
+ setInHtml('');
+ setOutHtml(out);
+ try {
+ const ed = editorRef?.current?.documentEditor;
+ if (ed) {
+ await ed.editor.delete();
+ ed.focusIn();
+ const { end: caretEndBefore } = getOffsets();
+ if (caretEndBefore != null) selectOffsets(caretEndBefore, caretEndBefore);
+ const plain = htmlToPlain(out);
+ if (canceledRef.current) {
+ return;
+ }
+ ed.editor.insertText(plain);
+ ed.editor.insertText('\n');
+ const { end: endAfter } = getOffsets();
+ if (caretEndBefore != null && endAfter != null && endAfter >= caretEndBefore) {
+ selectOffsets(caretEndBefore, endAfter);
+ setDraftRange({ start: caretEndBefore, end: endAfter });
+ } else {
+ setDraftRange({ start: null, end: null });
+ }
+ }
+ } catch (e) {
+ alert('Insert failed: ' + (e?.message || e));
+ }
+ setUserPrompt('');
+ }
+
+ async function runTask(task, isRegenerate = false, toLanguage) {
+ setIsLoading(true);
+ canceledRef.current = false;
+ var out = '';
+ aiResults = [];
+ try {
+ let sourceText = '';
+ let options = '';
+ if (task === AiTask.Generate) {
+ sourceText = userPrompt?.trim() || textboxRef.current.value?.trim();
+ setUserPrompt('');
+ window?.toggleSendIcon?.(false);
+ openStopDialog();
+ if (!isRegenerate && !sourceText) { setIsLoading(false); return; }
+ options = buildPrompt(AiTask.Generate, sourceText, isRegenerate, { tone, format, length });
+ setTimeout(async () => {
+ out = await getAzureChatAIRequest(options);
+ out = out.replace("```html\n", "").replace("\n```", "");
+ insertContent(out, isRegenerate);
+ }, 1000);
+ } else {
+ sourceText = getSelectionText();
+ if (!sourceText || sourceText.trim().length < 3) { setIsLoading(false); return; }
+ if (task === AiTask.Rephrase) {
+ const userHint = isRegenerate ? '' : (userPrompt?.trim() || '');
+ for (var i = 0; i < 3; i++) {
+ options = buildPrompt(AiTask.Rephrase, sourceText, isRegenerate, { tone, format, length, userHint });
+ out = await getAzureChatAIRequest(options);
+ out = out.replace("```html\n", "").replace("\n```", "");
+ if (!aiResults.includes(out)) {
+ aiResults.push(out);
+ }
+ }
+ }
+ else if (task === AiTask.Grammar) {
+ options = buildPrompt(AiTask.Grammar, sourceText, isRegenerate, { checks: checks });
+ out = await getAzureChatAIRequest(options);
+ out = out.replace("```html\n", "").replace("\n```", "");
+ }
+ else {
+ var toLang = toLanguage || translateTo;
+ options = buildPrompt(AiTask.Translate, sourceText, false, { fromLang: 'English', toLang: toLang });
+ out = await getAzureChatAIRequest(options);
+ out = out.replace("```html\n", "").replace("\n```", "");
+ }
+ out = aiResults.length > 0 ? aiResults[0] : out;
+ const { highlightedOriginal, highlightedModified } = highlightDifferences(`${sourceText}
`, out);
+ setInHtml(highlightedOriginal);
+ setOutHtml(highlightedModified);
+ setSuggestions(prev => {
+ setCurrentIndex(0);
+ return aiResults;
+ });
+ hideSpinner(document.getElementById('spinner-container'));
+ }
+ } catch (e) {
+ if (!canceledRef.current) alert('AI error: ' + (e?.message || e));
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ const onMenuSelect = (args) => {
+ const sel = args.item?.text;
+ const action = sel === 'Rephrase' ? AiTask.Rephrase : (sel === 'Translate' ? AiTask.Translate : AiTask.Grammar);
+ if (!sel) return;
+ setPopupType(action);
+ setSuggestions([]); setCurrentIndex(0); setUserPrompt('');
+ setIsSmartEditor(true);
+ setInHtml(`${getSelectionText()}
`);
+ setOutHtml('');
+ showSpinner(document.getElementById('spinner-container'));
+ setSmartVisible(true);
+ setTimeout(() => runTask(action), 100);
+ };
+
+
+ const openAssistMenu = (ev) => {
+ ev?.preventDefault?.();
+ ev?.stopPropagation?.();
+ const sel = getSelectionText();
+ if (!sel) {
+ if (stopVisible) return;
+ setPopupType(AiTask.Generate);
+ setIsSmartEditor(false);
+ setInHtml(''); setOutHtml(''); setUserPrompt(''); setSuggestions([]);
+ const pos = window.getAIAssistPopupPosition ? window?.getAIAssistPopupPosition?.() : { x: 200, y: 160 };
+ setDialogPos({ x: String(Math.round(pos.x)), y: String(Math.round(pos.y)) });
+ setGenVisible(true);
+ requestAnimationFrame(() => genDialogRef.current?.refreshPosition?.());
+ return;
+ }
+ if (genVisible || stopVisible) return;
+ const aiPos = window.getAIButtonPosition ? window.getAIButtonPosition() : null;
+ if (aiPos && cmAssistRef.current?.open) {
+ cmAssistRef.current.open(Math.round(aiPos.y), Math.round(aiPos.x + 24));
+ return;
+ }
+ const el = assistFabRef.current?.element || assistFabRef.current;
+ if (!el || !cmAssistRef.current?.open) return;
+ const r = el.getBoundingClientRect();
+ const x = Math.round(r.left + window.scrollX + 24);
+ const y = Math.round(r.top + window.scrollY);
+ cmAssistRef.current.open(x, y);
+ };
+
+ const openChat = () => {
+ document.querySelector('.e-ribbon-help-template')?.classList.add('e-hide');
+ document.querySelector('.e-fab.ai-assist-btn')?.classList.add('e-hide');
+ document.querySelector('.document-editor-container')?.classList.add('e-hide');
+ setFabChatVisible(false);
+ onShowChatPane?.();
+ };
+
+ const onReplace = async () => { await replaceSelectionWithPlainText(outHtml); setSmartVisible(false); };
+
+ const prevSuggestion = () => {
+ setCurrentIndex(i => {
+ const next = Math.max(i - 1, 0);
+ setOutHtml(suggestions[next] || outHtml);
+ return next;
+ });
+ };
+
+ const nextSuggestion = () => {
+ setCurrentIndex(i => {
+ const next = Math.min(i + 1, suggestions.length - 1);
+ setOutHtml(suggestions[next] || outHtml);
+ return next;
+ });
+ };
+
+ const headerText = useMemo(() => {
+ if (popupType === AiTask.Rephrase) return 'Rephrased Content';
+ if (popupType === AiTask.Translate) return 'Translate';
+ if (popupType === AiTask.Grammar) return 'Grammar Check';
+ return 'AI Assistant';
+ }, [popupType]);
+
+ const openHeaderSettingsMenu = () => {
+ const btn = gearHeaderRef.current;
+ if (!btn || !cmSettingsRef.current) return;
+ openMenuBesideButton(btn, cmSettingsRef);
+ };
+
+ const UpdateIconCss = (items) => {
+ items.forEach((item) => {
+ const id = item.id?.toLowerCase() || "";
+ var isChild = id.includes("child");
+
+ var match = id.includes(tone.toLowerCase()) ||
+ id.includes(format.split(" ").join('-').toLowerCase()) ||
+ id.includes(length.toLowerCase());
+
+ item.iconCss = (isChild && match) ? "e-icons e-check" : null;
+
+ if (Array.isArray(item.items) && item.items.length) {
+ UpdateIconCss(item.items);
+ }
+ })
+ }
+
+ const onSettingsMenuSelect = (args) => {
+ const id = args.item?.id || '';
+ const text = args.item?.text || '';
+ if (id.startsWith('child')) {
+ if (id.startsWith('child-tone-')) setTone(text);
+ else if (id.startsWith('child-format-')) setFormat(text);
+ else if (id.startsWith('child-size-')) setLength(text);
+ UpdateIconCss(settingsMenuItems);
+ }
+ };
+
+ const openGearMenu = (args) => {
+ const btn = gearRef.current;
+ if (!btn || !cmSettingsRef.current) return;
+ openMenuBesideButton(btn, cmSettingsRef);
+ };
+
+ const onSend = () => {
+ runTask(AiTask.Generate);
+ };
+
+ const changeLanguage = (e) => {
+ setTranslateTo(e.value);
+ setTimeout(() => {
+ runTask(AiTask.Translate, false, e.value);
+ }, 100);
+ };
+
+ const smartHeaderTemplate = () => (
+
+
{headerText}
+ {popupType === AiTask.Rephrase && (
+
+
+
+
+
+ = suggestions.length}
+ click={nextSuggestion}
+ />
+ (
+ { args.cancel = true; openHeaderSettingsMenu(); }}
+ />
+ )}
+ />
+
+
+
+ )}
+
+
+ Replace
+
+ {popupType === AiTask.Rephrase && (
+ { showSpinner(document.getElementById('spinner-container')); setTimeout(() => runTask(AiTask.Rephrase, true), 10); }}
+ isPrimary
+ >
+ Regenerate
+
+ )}
+ {popupType === AiTask.Grammar && (
+ { showSpinner(document.getElementById('spinner-container')); setTimeout(() => runTask(AiTask.Grammar, true), 10); }}
+ isPrimary
+ >
+ Regenerate
+
+ )}
+ setSmartVisible(false)}>Cancel
+
+ );
+
+ const positionChatFabByHelper = () => {
+ const position = window?.getAIChatBtnPosition?.();
+ if (!position) return;
+ window?.setAiAssistBtnPosition?.(Math.round(position.x), Math.round(position.y));
+ };
+
+ const onChatFabCreated = () => {
+ requestAnimationFrame(positionChatFabByHelper);
+ window.addEventListener('resize', positionChatFabByHelper);
+ };
+
+ useEffect(() => {
+ createSpinner({
+ target: document.getElementById('spinner-container'),
+ });
+ return () => window.removeEventListener('resize', positionChatFabByHelper);
+ }, []);
+
+ const positionAssistFabInitial = () => {
+ try {
+ const pos = window?.getAIAssistBtnPosition?.();
+ if (!pos) return;
+ setAssistBtn(s => ({
+ ...s,
+ left: Math.round(pos.x),
+ top: Math.round(pos.y),
+ width: 24,
+ height: 24,
+ visible: true
+ }));
+ } catch { }
+ };
+
+ useEffect(() => {
+ if (viewerHost) positionAssistFabInitial();
+ }, [viewerHost]);
+
+ useEffect(() => {
+ if (editorRef && editorRef?.current) {
+ const ed = editorRef?.current?.documentEditor;
+ if (!ed) return;
+ const onSelectionChange = () => {
+ try {
+ const pos = window?.getAIAssistBtnPosition?.();
+ if (pos) {
+ setAssistBtn(prev => ({
+ ...prev,
+ left: Math.round(pos.x),
+ top: Math.round(pos.y)
+ }));
+ }
+ } catch { }
+ };
+ ed.selectionChange = onSelectionChange;
+
+ }
+ }, [editorRef, viewerHost]);
+
+ useEffect(() => {
+ const viewerEl =
+ viewerHost || document.querySelector('#document-editor #documentEditorDiv');
+ if (!viewerEl) return;
+
+ let tracking = false;
+
+ const onMouseDown = () => {
+ tracking = true;
+ try {
+ const sel = editorRef?.current?.documentEditor?.selection?.text || '';
+ if (sel && isSmartEditor) setIsSmartEditor(false);
+ } catch { }
+ };
+
+ const onMouseUp = () => {
+ if (!tracking) return;
+ tracking = false;
+
+ setTimeout(() => {
+ try {
+ const selText = editorRef?.current?.documentEditor?.selection?.text || '';
+ if (!!selText && selText.trim().length > 0) {
+ setIsSmartEditor(true);
+ assistFabRef.title = 'Refine the content';
+ }
+
+ const pos = window?.getAIAssistBtnPosition?.();
+ if (pos && typeof pos.x === 'number' && typeof pos.y === 'number') {
+ setAssistBtn(prev => ({
+ ...prev,
+ left: Math.round(pos.x),
+ top: Math.round(pos.y)
+ }));
+ }
+ } catch { }
+ }, 10);
+ };
+
+ viewerEl.addEventListener('mousedown', onMouseDown, false);
+ viewerEl.addEventListener('mouseup', onMouseUp, false);
+ return () => {
+ viewerEl.removeEventListener('mousedown', onMouseDown, false);
+ viewerEl.removeEventListener('mouseup', onMouseUp, false);
+ };
+ }, [viewerHost, isSmartEditor, editorRef]);
+
+ useEffect(() => {
+ if (!genVisible) return;
+
+ const isInside = (el, target) => {
+ if (!el || !target) return false;
+ if (el.contains(target)) return true;
+ const path = typeof target.composedPath === 'function' ? target.composedPath() : [];
+ return path.includes(el);
+ };
+
+ const onOutsidePress = (e) => {
+ try {
+ const dlgEl = genDialogRef.current?.element;
+ const settingsEl = document.querySelector('.ai-settings-menu');
+
+ const inDialog = isInside(dlgEl, e.target);
+ const inSettings = isInside(settingsEl, e.target);
+
+ if (!inDialog && !inSettings) {
+ setGenVisible(false);
+ }
+ } catch { }
+ };
+
+ document.addEventListener('pointerdown', onOutsidePress, true);
+ document.addEventListener('touchstart', onOutsidePress, { capture: true, passive: true });
+ document.addEventListener('mousedown', onOutsidePress, true);
+ return () => {
+ document.removeEventListener('pointerdown', onOutsidePress, true);
+ document.removeEventListener('touchstart', onOutsidePress, true);
+ document.removeEventListener('mousedown', onOutsidePress, true);
+ };
+ }, [genVisible]);
+
+ function openMenuBesideButton(btnRef, cmRef) {
+ if (!btnRef || !cmRef?.current?.open) return;
+ const rect = btnRef.element.getBoundingClientRect();
+ const y = rect.bottom;
+ const x = rect.left;
+ cmRef.current.open(Math.round(y), Math.round(x));
+ }
+
+ const TextBoxCreated = () => {
+ const inst = textboxRef.current;
+ if (!inst) return;
+ const isDisabled = userPrompt?.trim() ? '' : 'e-disabled'
+ const className = 'e-icons e-send ' + isDisabled;
+ inst.addIcon('append', className);
+ const wrapper = inst.element?.parentElement;
+ const icon = wrapper?.querySelector('.e-input-group-icon.e-send');
+ if (icon) {
+ icon.setAttribute('title', 'Generate');
+ icon.setAttribute('role', 'button');
+ icon.setAttribute('aria-label', 'Generate');
+ icon.addEventListener('click', onSend);
+ }
+ return;
+ }
+
+ const textboxValueChange = (e) => {
+ const value = e.value;
+ setUserPrompt(value);
+ window?.toggleSendIcon?.(value.length > 0);
+ }
+
+ const htmlToPlain = (html) =>
+ (html || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+
+ const getDE = () => editorRef?.current?.documentEditor || null;
+
+ const getOffsets = () => {
+ const ed = getDE();
+ const sel = ed?.selection;
+ try {
+ const start = sel.startOffset;
+ const end = sel?.endOffset;
+ return { start, end };
+ } catch {
+ return { start: null, end: null };
+ }
+ };
+
+ const selectOffsets = (start, end) => {
+ const sel = getDE()?.selection;
+ if (sel?.select && start != null && end != null) sel.select(start, end);
+ };
+
+ const onKeepGenerated = () => {
+ const ed = getDE();
+ const { end } = draftRange || {};
+ if (ed && end != null) {
+ selectOffsets(end, end);
+ }
+ setDraftRange({ start: null, end: null });
+ setGenVisible(false);
+ };
+
+ const onDiscardGenerated = () => {
+ const ed = getDE();
+ const { start, end } = draftRange || {};
+ if (ed && start != null && end != null) {
+ selectOffsets(start, end);
+ ed.editor.delete();
+ }
+ setDraftRange({ start: null, end: null });
+ setGenVisible(false);
+ };
+
+ const openStopDialog = () => {
+ setGenVisible(false);
+ const pos = window?.getGeneratingDraftPosition?.() || { x: 200, y: 160 };
+ setStopPos({ x: Math.round(pos.x + 24), y: Math.round(pos.y) });
+ setStopVisible(true);
+ };
+
+ const closeStopDialog = () => {
+ setGenVisible(true);
+ setStopVisible(false);
+ }
+
+ const stopContentTemplate = () => (
+
+
+ Generating a draft...
+
+ );
+
+ useEffect(() => {
+ if (!isAIEnabled) {
+ setFabAssistVisible(false);
+ setFabChatVisible(false);
+ } else {
+ setFabAssistVisible(isAIEnabled);
+ setFabChatVisible(isAIEnabled);
+ }
+ }, [isAIEnabled]);
+
+ const shouldTick = (id) => {
+ const key = (id || '').toLowerCase();
+ const toneKey = (tone || '').toLowerCase();
+ const formatKey = (format || '').toLowerCase().replace(/\s+/g, '-');
+ const lengthKey = (length || '').toLowerCase();
+ const isChild = key.includes('child');
+ const match = key.includes(toneKey) || key.includes(formatKey) || key.includes(lengthKey);
+ return isChild && match;
+ };
+
+ const onSettingsBeforeItemRender = (args) => {
+ const id = args.item?.id || '';
+ const li = args.element;
+ const hasIcon = !!li.querySelector('.e-menu-icon');
+ if (shouldTick(id)) {
+ if (!hasIcon) {
+ const icon = document.createElement('span');
+ icon.className = 'e-menu-icon e-icons e-check';
+ li.insertBefore(icon, li.firstChild);
+ li.className = li.className + ' e-selected';
+ } else {
+ li.querySelector('.e-menu-icon').className = 'e-menu-icon e-icons e-check';
+ }
+ }
+ };
+
+ const floatFocus = (args) => {
+ args.target.parentElement.classList.add("e-input-focus");
+ };
+
+ const floatBlur = (args) => {
+ args.target.parentElement.classList.remove('e-input-focus');
+ };
+
+ return (
+
+
+
+
{ e.preventDefault(); e.stopPropagation(); }}
+ onClick={openAssistMenu}
+ style={{
+ position: 'absolute',
+ left: `${assistBtn.left}px`,
+ top: `${assistBtn.top}px`,
+ width: `${assistBtn.width}px`,
+ height: `${assistBtn.height}px`
+ }}
+ />
+
+
+
+
+
+
+
+ {
+ if (e.key === 'Enter' && userPrompt?.trim()) {
+ e.preventDefault();
+ onSend();
+ }
+ }}
+ />
+
+
{ args.cancel = true; openGearMenu(); }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {popupType === AiTask.Translate && (
+
+ )}
+ {popupType === AiTask.Grammar && (
+ setChecks(e.value || [])}
+ mode="CheckBox"
+ showSelectAll={true}
+ showDropDownIcon={true}
+ allowFiltering={true}
+ placeholder="e.g. Spelling Errors"
+ width="180px"
+ popupHeight="260px"
+ >
+
+
+ )}
+
+
+
+
+
+
+
+ {!initialized ? (
+
+
+
+
+
+
+ Create New Document
+
+
+
+ ) : (
+
+
+
+
+ {openChat && (
+
+
+
+
+
How can I help you?
+
No summary available.
';
+ assistInstance.current.addPromptResponse(args.response);
+ const suggestionsRaw = await getAzureChatAIRequest({
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Your task is to analyze the provided text and generate 3 short diverse questions and each question should not exceed 10 words` },
+ { role: "user", content: documentContent }
+ ],
+ model: "gpt-4",
+ });
+ if (suggestionsRaw) {
+ const next = (suggestionsRaw.split(/\d+\.\s*/).filter(x => x.trim() !== "")).map((text, index) => {
+ return `${index + 1}. ${text.trim()}`;
+ });
+ if (next.length) setAiSuggestions(next);
+ }
+ } else {
+
+ await new Promise(resolve => {
+ requestAnimationFrame(() => setTimeout(resolve, 10));
+ });
+
+ const options = {
+ messages: [
+ { role: "system", content: `You are a helpful assistant. Use the provided context to answer the user question. Always respond in proper HTML format, but do not include , , or tags. Context:` },
+ { role: "user", content: prompt }
+ ],
+ model: "gpt-4",
+ };
+ const answerHtml = await getAzureChatAIRequest(options);
+ var response = String(answerHtml ?? 'No answer.
');
+ args.response = response;
+ assistInstance.current.addPromptResponse(response);
+ }
+ } catch (e) {
+ args.response = `AI error: ${e?.message || e}
`;
+ }
+ }}
+ responseToolbarSettings={{
+ items: [
+ { iconCss: 'e-icons e-copy', tooltip: 'copy' },
+ { iconCss: 'e-btn-icon e-de-ctnr-new', tooltip: 'insert' }
+ ],
+ itemClicked: async (e) => {
+ const idx = typeof e?.dataIndex === 'number'
+ ? e.dataIndex
+ : (assistInstance.current?.prompts?.length ?? 1) - 1;
+ const resHtml = assistInstance.current?.prompts?.[idx]?.response ?? '';
+ if (!resHtml) return;
+ const tmp = document.createElement('div');
+ tmp.innerHTML = resHtml;
+ const plainText = (tmp.innerText || '').trim();
+ const tip = (e?.item?.tooltip || '').toLowerCase();
+ if (tip === 'copy') {
+ if (navigator.clipboard && window.ClipboardItem) {
+ const blobHtml = new Blob([resHtml], { type: 'text/html' });
+ const blobText = new Blob([plainText], { type: 'text/plain' });
+ await navigator.clipboard.write([
+ new ClipboardItem({
+ 'text/html': blobHtml,
+ 'text/plain': blobText
+ })
+ ]);
+ } else {
+ await navigator.clipboard?.writeText(plainText);
+ }
+ } else if (tip === 'insert') {
+ const editor = container?.current?.documentEditor?.editor;
+ if (editor && plainText) {
+ editor.insertText(plainText);
+ }
+ }
+ }
+ }}
+ >
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+
,
,