From 7d1181cce1347b37a61c8d44de0034f26b8b957d Mon Sep 17 00:00:00 2001
From: Coki <92775570+HashCookie@users.noreply.github.com>
Date: Tue, 25 Jun 2024 16:33:56 +0800
Subject: [PATCH] feat: Extract page content and send to AI assistant (#126)

* Feature: Extract page content and send to AI assistant

* Update UI

* fix: Optimize prompt words

* fix: update iframe src in SidePanelChat component

* feat: Implement standardized AI integration for remaining three panels
---
 app/components/SidePanelChat.tsx      | 41 ++++++++++++---
 app/components/editor/ButtonPlugin.ts | 45 ++++++++++++++++
 app/components/editor/index.tsx       | 75 +++++++++++++++++----------
 app/utils/contentExtractor.ts         | 56 ++++++++++++++++++++
 public/openai.svg                     |  1 +
 5 files changed, 184 insertions(+), 34 deletions(-)
 create mode 100644 app/components/editor/ButtonPlugin.ts
 create mode 100644 app/utils/contentExtractor.ts
 create mode 100644 public/openai.svg

diff --git a/app/components/SidePanelChat.tsx b/app/components/SidePanelChat.tsx
index 79622bb..2b75a95 100644
--- a/app/components/SidePanelChat.tsx
+++ b/app/components/SidePanelChat.tsx
@@ -1,17 +1,40 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { extractPageContent } from '../utils/contentExtractor';
 
-export const SidePanelChat: React.FC = () => {
+const SidePanelChat = forwardRef((props, ref) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [pageContent, setPageContent] = useState('');
+  const [boxType, setBoxType] = useState('');
 
   const toggleDrawer = () => {
     setIsOpen(!isOpen);
   };
 
+  const openDrawer = (message, boxType) => {
+    setMessage(message);
+    setBoxType(boxType);
+    setIsOpen(true);
+  };
+
+  useImperativeHandle(ref, () => {
+    return {
+      openDrawer,
+    };
+  });
+
+  useEffect(() => {
+    if (isOpen && boxType) {
+      const { extractedContent } = extractPageContent(boxType);
+      setPageContent(extractedContent);
+    }
+  }, [isOpen, boxType]);
+
   return (
     <>
-      <button className="text-red-600" onClick={toggleDrawer}>
-        Why this result?
-      </button>
+      <div className="text-red-600 flex items-center">
+        <span>Why this result?</span>
+      </div>
       {isOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40" onClick={toggleDrawer}></div>}
       <div
         className={`fixed top-0 right-0 w-[500px] h-full bg-white z-50 shadow-lg transform transition-transform duration-300 ease-in-out ${
@@ -33,7 +56,7 @@ export const SidePanelChat: React.FC = () => {
           <iframe
             id="iframeHelper"
             title="iframeHelper"
-            src="https://ai.casbin.com/?isRaw=1"
+            src={`https://ai.casbin.com/?isRaw=1&newMessage=${encodeURIComponent(message)}`}
             className="w-full h-full"
             scrolling="no"
             frameBorder="0"
@@ -42,4 +65,8 @@ export const SidePanelChat: React.FC = () => {
       </div>
     </>
   );
-};
+});
+
+SidePanelChat.displayName = 'SidePanelChat';
+
+export default SidePanelChat;
diff --git a/app/components/editor/ButtonPlugin.ts b/app/components/editor/ButtonPlugin.ts
new file mode 100644
index 0000000..9033c9e
--- /dev/null
+++ b/app/components/editor/ButtonPlugin.ts
@@ -0,0 +1,45 @@
+import { WidgetType, EditorView, Decoration } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+
+type OpenDrawerCallback = (message: string) => void;
+
+class ButtonWidget extends WidgetType {
+  openDrawerCallback: OpenDrawerCallback;
+  extractContentCallback: (boxType: string) => string;
+  boxType: string;
+
+  constructor(openDrawerCallback: OpenDrawerCallback, extractContentCallback: (boxType: string) => string, boxType: string) {
+    super();
+    this.openDrawerCallback = openDrawerCallback;
+    this.extractContentCallback = extractContentCallback;
+    this.boxType = boxType;
+  }
+
+  toDOM() {
+    const button = document.createElement('button');
+    button.className = `flex items-center rounded text-[#453d7d] px-1 border border-[#453d7d] 
+      bg-[#efefef] hover:bg-[#453d7d] hover:text-white transition-colors duration-500 
+      font-medium whitespace-nowrap overflow-hidden`;
+    button.innerHTML = '<img src="/openai.svg" alt="" class="w-4 h-4 mr-1" /> Ask AI';
+    button.style.position = 'absolute';
+    button.style.right = '1px';
+    button.style.top = '1px';
+
+    button.addEventListener('click', () => {
+      if (this.openDrawerCallback) {
+        const extractedContent = this.extractContentCallback(this.boxType);
+        this.openDrawerCallback(extractedContent);
+      }
+    });
+
+    return button;
+  }
+}
+
+export function buttonPlugin(openDrawerCallback: OpenDrawerCallback, extractContentCallback: (boxType: string) => string, boxType: string) {
+  return EditorView.decorations.compute([], (state) => {
+    const builder = new RangeSetBuilder<Decoration>();
+    builder.add(0, 0, Decoration.widget({ widget: new ButtonWidget(openDrawerCallback, extractContentCallback, boxType) }));
+    return builder.finish();
+  });
+}
diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx
index 918f45b..4a82bf2 100755
--- a/app/components/editor/index.tsx
+++ b/app/components/editor/index.tsx
@@ -1,19 +1,5 @@
-// Copyright 2024 The casbin Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
 'use client';
-import React, { isValidElement, useState, useEffect } from 'react';
+import React, { isValidElement, useState, useEffect, useRef } from 'react';
 import { example, ModelKind } from './casbin-mode/example';
 import { e, m, p, r } from '@/app/components/editor/hooks/useSetupEnforceContext';
 import { clsx } from 'clsx';
@@ -32,7 +18,9 @@ import useShareInfo from '@/app/components/editor/hooks/useShareInfo';
 import useCopy from '@/app/components/editor/hooks/useCopy';
 import useSetupEnforceContext from '@/app/components/editor/hooks/useSetupEnforceContext';
 import useIndex from '@/app/components/editor/hooks/useIndex';
-import { SidePanelChat } from '@/app/components/SidePanelChat';
+import SidePanelChat from '@/app/components/SidePanelChat';
+import { extractPageContent } from '../../utils/contentExtractor';
+import { buttonPlugin } from './ButtonPlugin';
 
 export const EditorScreen = () => {
   const {
@@ -50,6 +38,16 @@ export const EditorScreen = () => {
     data: enforceContextData,
   });
   const [casbinVersion, setCasbinVersion] = useState('');
+  const sidePanelChatRef = useRef<{ openDrawer: (message: string) => void } | null>(null);
+  const openDrawerWithMessage = (message: string) => {
+    if (sidePanelChatRef.current) {
+      sidePanelChatRef.current.openDrawer(message);
+    }
+  };
+  const extractContent = (boxType: string) => {
+    const { message } = extractPageContent(boxType);
+    return message;
+  };
 
   useEffect(() => {
     const fetchCasbinVersion = async () => {
@@ -75,9 +73,7 @@ export const EditorScreen = () => {
           } else if (Array.isArray(v)) {
             const formattedResults = v.map((res) => {
               if (typeof res === 'object') {
-                const reasonString = Array.isArray(res.reason) && res.reason.length > 0 
-                  ? ` Reason: ${JSON.stringify(res.reason)}` 
-                  : '';
+                const reasonString = Array.isArray(res.reason) && res.reason.length > 0 ? ` Reason: ${JSON.stringify(res.reason)}` : '';
                 return `${res.okEx}${reasonString}`;
               }
               return res;
@@ -194,7 +190,13 @@ export const EditorScreen = () => {
                     bracketMatching: true,
                     indentOnInput: true,
                   }}
-                  extensions={[basicSetup, CasbinConfSupport(), indentUnit.of('    '), EditorView.lineWrapping]}
+                  extensions={[
+                    basicSetup,
+                    CasbinConfSupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                    buttonPlugin(openDrawerWithMessage, extractContent, 'model'),
+                  ]}
                   className={'function flex-grow'}
                   value={modelText}
                 />
@@ -214,7 +216,13 @@ export const EditorScreen = () => {
               <div className="flex flex-col h-full">
                 <CodeMirror
                   height="100%"
-                  extensions={[basicSetup, CasbinPolicySupport(), indentUnit.of('    '), EditorView.lineWrapping]}
+                  extensions={[
+                    basicSetup,
+                    CasbinPolicySupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                    buttonPlugin(openDrawerWithMessage, extractContent, 'policy'),
+                  ]}
                   basicSetup={{
                     lineNumbers: true,
                     highlightActiveLine: true,
@@ -277,7 +285,13 @@ export const EditorScreen = () => {
                   onChange={(value) => {
                     setRequestPersistent(value);
                   }}
-                  extensions={[basicSetup, CasbinPolicySupport(), indentUnit.of('    '), EditorView.lineWrapping]}
+                  extensions={[
+                    basicSetup,
+                    CasbinPolicySupport(),
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                    buttonPlugin(openDrawerWithMessage, extractContent, 'request'),
+                  ]}
                   basicSetup={{
                     lineNumbers: true,
                     highlightActiveLine: true,
@@ -293,7 +307,9 @@ export const EditorScreen = () => {
           <div className="flex-1 flex flex-col h-full overflow-hidden">
             <div className={clsx('h-10 font-bold', 'flex items-center justify-between')}>
               <div>Enforcement Result</div>
-              <div className='mr-4'><SidePanelChat /></div>
+              <div className="mr-4">
+                <SidePanelChat ref={sidePanelChatRef} />
+              </div>
             </div>
             <div className="flex-grow overflow-auto h-full">
               <div className="flex flex-col h-full">
@@ -303,7 +319,14 @@ export const EditorScreen = () => {
                     return;
                   }}
                   theme={monokai}
-                  extensions={[basicSetup, javascriptLanguage, indentUnit.of('    '), EditorView.lineWrapping, EditorView.editable.of(false)]}
+                  extensions={[
+                    basicSetup,
+                    javascriptLanguage,
+                    indentUnit.of('    '),
+                    EditorView.lineWrapping,
+                    EditorView.editable.of(false),
+                    buttonPlugin(openDrawerWithMessage, extractContent, 'enforcementResult'),
+                  ]}
                   basicSetup={{
                     lineNumbers: true,
                     highlightActiveLine: true,
@@ -365,9 +388,7 @@ export const EditorScreen = () => {
                   } else if (Array.isArray(v)) {
                     const formattedResults = v.map((res) => {
                       if (typeof res === 'object') {
-                        const reasonString = Array.isArray(res.reason) && res.reason.length > 0 
-                          ? ` Reason: ${JSON.stringify(res.reason)}` 
-                          : '';
+                        const reasonString = Array.isArray(res.reason) && res.reason.length > 0 ? ` Reason: ${JSON.stringify(res.reason)}` : '';
                         return `${res.okEx}${reasonString}`;
                       }
                       return res;
diff --git a/app/utils/contentExtractor.ts b/app/utils/contentExtractor.ts
new file mode 100644
index 0000000..d74685a
--- /dev/null
+++ b/app/utils/contentExtractor.ts
@@ -0,0 +1,56 @@
+const cleanContent = (content: string) => {
+  return content.replace(/^\d+\s+/gm, '').trim();
+};
+
+export const extractPageContent = (boxType: string) => {
+  const mainContent = document.querySelector('main')?.innerText || 'No main content found';
+
+  const customConfigMatch = mainContent.match(/Custom config\s+([\s\S]*?)\s+Model/);
+  const modelMatch = mainContent.match(/Model\s+([\s\S]*?)\s+Policy/);
+  const policyMatch = mainContent.match(/Policy\s+([\s\S]*?)\s+Request/);
+  const requestMatch = mainContent.match(/Request\s+([\s\S]*?)\s+Enforcement Result/);
+  const enforcementResultMatch = mainContent.match(/Enforcement Result\s+([\s\S]*?)\s+SYNTAX VALIDATE/);
+
+  const customConfig = customConfigMatch ? cleanContent(customConfigMatch[1]) : 'No custom config found';
+  const model = modelMatch ? cleanContent(modelMatch[1].replace(/Select your model[\s\S]*?RESET/, '')) : 'No model found';
+  const policy = policyMatch ? cleanContent(policyMatch[1].replace(/Node-Casbin v[\d.]+/, '')) : 'No policy found';
+  const request = requestMatch ? cleanContent(requestMatch[1]) : 'No request found';
+  const enforcementResult = enforcementResultMatch
+    ? cleanContent(enforcementResultMatch[1].replace(/Why this result\?[\s\S]*?AI Assistant/, ''))
+    : 'No enforcement result found';
+
+  const extractedContent = `
+    Custom Config: ${customConfig}
+    Model: ${model}
+    Policy: ${policy}
+    Request: ${request}
+    Enforcement Result: ${enforcementResult}
+  `;
+
+  let message = '';
+  switch (boxType) {
+    case 'model':
+      message = `Briefly explain the Model content. 
+      no need to repeat the content of the question.\n${extractedContent}`;
+      break;
+    case 'policy':
+      message = `Briefly explain the Policy content.
+      no need to repeat the content of the question.\n${extractedContent}`;
+      break;
+    case 'request':
+      message = `Briefly explain the Request content. 
+      no need to repeat the content of the question.\n${extractedContent}`;
+      break;
+    case 'enforcementResult':
+      message = `Why this result? please provide a brief summary. 
+      no need to repeat the content of the question.\n${extractedContent}`;
+      break;
+    default:
+      message = extractedContent;
+  }
+
+  return {
+    extractedContent,
+    message,
+  };
+};
diff --git a/public/openai.svg b/public/openai.svg
new file mode 100644
index 0000000..964273d
--- /dev/null
+++ b/public/openai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719231641704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1645" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M939.795692 421.415385a248.832 248.832 0 0 0-21.385846-204.386462 251.667692 251.667692 0 0 0-271.064615-120.753231 248.832 248.832 0 0 0-187.687385-83.672615 251.687385 251.687385 0 0 0-240.088615 174.257231 248.910769 248.910769 0 0 0-166.4 120.713846 251.707077 251.707077 0 0 0 30.956307 295.108923 248.832 248.832 0 0 0 21.385847 204.386461 251.687385 251.687385 0 0 0 271.064615 120.753231 248.832 248.832 0 0 0 187.687385 83.672616 251.687385 251.687385 0 0 0 240.167384-174.355693 248.910769 248.910769 0 0 0 166.4-120.713846A251.707077 251.707077 0 0 0 939.795692 421.415385zM564.342154 946.195692a186.663385 186.663385 0 0 1-119.827692-43.323077c1.516308-0.827077 4.174769-2.284308 5.907692-3.347692l198.892308-114.884923a32.334769 32.334769 0 0 0 16.344615-28.297846V475.943385l84.066461 48.541538a2.993231 2.993231 0 0 1 1.634462 2.304v232.211692a187.431385 187.431385 0 0 1-187.017846 187.195077z m-402.195692-171.776a186.564923 186.564923 0 0 1-22.331077-125.44c1.476923 0.886154 4.056615 2.461538 5.907692 3.524923l198.892308 114.884923a32.374154 32.374154 0 0 0 32.669538 0l242.825846-140.20923v97.083077a3.012923 3.012923 0 0 1-1.201231 2.579692l-201.058461 116.086154a187.392 187.392 0 0 1-255.704615-68.509539z m-52.322462-434.195692a186.505846 186.505846 0 0 1 97.437538-82.077538c0 1.713231-0.098462 4.745846-0.098461 6.852923v229.769846a32.315077 32.315077 0 0 0 16.324923 28.278154L466.313846 663.236923l-84.066461 48.541539a3.012923 3.012923 0 0 1-2.835693 0.256l-201.078154-116.184616a187.392 187.392 0 0 1-68.509538-255.625846z m690.688 160.728615l-242.825846-140.20923 84.066461-48.521847a3.012923 3.012923 0 0 1 2.835693-0.256l201.078154 116.086154a187.234462 187.234462 0 0 1-28.928 337.821539V529.230769a32.295385 32.295385 0 0 0-16.226462-28.278154zM884.184615 375.020308c-1.476923-0.905846-4.056615-2.461538-5.907692-3.524923l-198.892308-114.884923a32.413538 32.413538 0 0 0-32.669538 0l-242.825846 140.20923v-97.083077a3.012923 3.012923 0 0 1 1.201231-2.579692l201.058461-115.987692A187.214769 187.214769 0 0 1 884.184615 375.020308z m-526.00123 173.036307l-84.086154-48.541538a2.993231 2.993231 0 0 1-1.634462-2.304V264.999385a187.214769 187.214769 0 0 1 307.003077-143.753847c-1.516308 0.827077-4.155077 2.284308-5.907692 3.347693l-198.892308 114.884923a32.315077 32.315077 0 0 0-16.344615 28.278154z m45.666461-98.461538L512 387.131077l108.150154 62.424615v124.888616L512 636.868923l-108.150154-62.424615z" fill="#202123" p-id="1646"></path></svg>
\ No newline at end of file