From 8497457edba02b59045373c8d22a0eba404acfa7 Mon Sep 17 00:00:00 2001
From: Coki <hashcookie404@gmail.com>
Date: Sat, 14 Dec 2024 17:20:50 +0800
Subject: [PATCH 1/3] feat: enhance ModelEditor with new features and UI
 improvements

---
 app/components/ModelEditor.tsx   | 71 ++++++++++++++++++++++++++++++++
 app/components/SidePanelChat.tsx |  3 --
 app/components/editor/index.tsx  |  3 ++
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/app/components/ModelEditor.tsx b/app/components/ModelEditor.tsx
index d628916..8013baa 100644
--- a/app/components/ModelEditor.tsx
+++ b/app/components/ModelEditor.tsx
@@ -10,11 +10,32 @@ import { linter, lintGutter } from '@codemirror/lint';
 import { casbinLinter } from '@/app/utils/casbinLinter';
 import { newModel } from 'casbin';
 import { setError } from '@/app/utils/errorManager';
+import { buttonPlugin } from '@/app/components/editor/ButtonPlugin';
+import { extractPageContent } from '@/app/utils/contentExtractor';
+import { useLang } from '@/app/context/LangContext';
+import SidePanelChat from '@/app/components/SidePanelChat';
+import { example, ModelKind } from '@/app/components/editor/casbin-mode/example';
+import { clsx } from 'clsx';
 
 export const ModelEditor = () => {
   const [modelText, setModelText] = useState('');
+  const [modelKind, setModelKind] = useState<ModelKind>('basic');
   const editorRef = useRef<EditorView | null>(null);
   const cursorPosRef = useRef<{ from: number; to: number } | null>(null);
+  const sidePanelChatRef = useRef<{ openDrawer: (message: string) => void } | null>(null);
+  const { t, lang, theme } = useLang();
+  const textClass = clsx(theme === 'dark' ? 'text-gray-200' : 'text-gray-800');
+
+  const openDrawerWithMessage = (message: string) => {
+    if (sidePanelChatRef.current) {
+      sidePanelChatRef.current.openDrawer(message);
+    }
+  };
+
+  const extractContent = (boxType: string) => {
+    const { message } = extractPageContent(boxType, t, lang);
+    return message;
+  };
 
   const validateModel = useCallback(async (text: string) => {
     try {
@@ -73,9 +94,55 @@ export const ModelEditor = () => {
     }
   }, [modelText]);
 
+  useEffect(() => {
+    if (modelKind && example[modelKind]) {
+      setModelText(example[modelKind].model);
+    }
+  }, [modelKind]);
+
   return (
     <div className="flex-grow overflow-auto h-full">
       <div className="flex flex-col h-full">
+        <div className={clsx('h-10 pl-2', 'flex items-center justify-start gap-2')}>
+          <div className={clsx(textClass, 'font-bold')}>{t('Model')}</div>
+          <select
+            value={modelKind}
+            onChange={(e) => {
+              setModelKind(e.target.value as ModelKind);
+            }}
+            className={'border-[#767676] border rounded'}
+          >
+            <option value="" disabled>
+              {t('Select your model')}
+            </option>
+            {Object.keys(example).map((n) => {
+              return (
+                <option key={n} value={n}>
+                  {example[n as ModelKind].name}
+                </option>
+              );
+            })}
+          </select>
+          <button
+            className={clsx(
+              'rounded',
+              'text-[#453d7d]',
+              'px-1',
+              'border border-[#453d7d]',
+              'bg-[#efefef]',
+              'hover:bg-[#453d7d] hover:text-white',
+              'transition-colors duration-500',
+            )}
+            onClick={() => {
+              const ok = window.confirm('Confirm Reset?');
+              if (ok) {
+                window.location.reload();
+              }
+            }}
+          >
+            {t('RESET')}
+          </button>
+        </div>
         <CodeMirror
           height="100%"
           theme={monokai}
@@ -93,6 +160,7 @@ export const ModelEditor = () => {
             EditorView.lineWrapping,
             linter(casbinLinter),
             lintGutter(),
+            buttonPlugin(openDrawerWithMessage, extractContent, 'model'),
             EditorView.updateListener.of((update) => {
               if (update.docChanged) {
                 editorRef.current = update.view;
@@ -102,6 +170,9 @@ export const ModelEditor = () => {
           className={'function flex-grow h-[300px]'}
           value={modelText}
         />
+        <div className="mr-4">
+          <SidePanelChat ref={sidePanelChatRef} />
+        </div>
       </div>
     </div>
   );
diff --git a/app/components/SidePanelChat.tsx b/app/components/SidePanelChat.tsx
index 279ad2d..9a52f29 100644
--- a/app/components/SidePanelChat.tsx
+++ b/app/components/SidePanelChat.tsx
@@ -35,9 +35,6 @@ const SidePanelChat = forwardRef((props, ref) => {
 
   return (
     <>
-      <div className="text-red-600 flex items-center">
-        <span>{t('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-full sm:w-[500px] h-full bg-white z-50 shadow-lg transform transition-transform duration-300 ease-in-out ${
diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx
index 67148d6..6c392c0 100755
--- a/app/components/editor/index.tsx
+++ b/app/components/editor/index.tsx
@@ -325,6 +325,9 @@ export const EditorScreen = () => {
             <div className={clsx('h-10 pl-2 font-bold', 'flex items-center justify-between')}>
               <div className={textClass}>{t('Enforcement Result')}</div>
               <div className="mr-4">
+                <div className="text-red-600 flex items-center">
+                  <span>{t('Why this result')}</span>
+                </div>
                 <SidePanelChat ref={sidePanelChatRef} />
               </div>
             </div>

From 512354069f8e49704e15530b7ea0337e5d6e2e60 Mon Sep 17 00:00:00 2001
From: Coki <hashcookie404@gmail.com>
Date: Sat, 14 Dec 2024 17:58:50 +0800
Subject: [PATCH 2/3] fix: ensure modelText is set only if event.data.modelText
 exists

---
 app/components/ModelEditor.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/components/ModelEditor.tsx b/app/components/ModelEditor.tsx
index 8013baa..1a16340 100644
--- a/app/components/ModelEditor.tsx
+++ b/app/components/ModelEditor.tsx
@@ -19,7 +19,7 @@ import { clsx } from 'clsx';
 
 export const ModelEditor = () => {
   const [modelText, setModelText] = useState('');
-  const [modelKind, setModelKind] = useState<ModelKind>('basic');
+  const [modelKind, setModelKind] = useState<ModelKind>('');
   const editorRef = useRef<EditorView | null>(null);
   const cursorPosRef = useRef<{ from: number; to: number } | null>(null);
   const sidePanelChatRef = useRef<{ openDrawer: (message: string) => void } | null>(null);
@@ -52,14 +52,18 @@ export const ModelEditor = () => {
 
   const handleMessage = useCallback((event: MessageEvent) => {
     if (event.data.type === 'initializeModel') {
-      setModelText(event.data.modelText);
+      if (event.data.modelText) {
+        setModelText(event.data.modelText);
+      }
     } else if (event.data.type === 'getModelText') {
       window.parent.postMessage({
         type: 'modelUpdate',
         modelText: modelText
       }, '*');
     } else if (event.data.type === 'updateModelText') {
-      setModelText(event.data.modelText);
+      if (event.data.modelText) {
+        setModelText(event.data.modelText);
+      }
     }
   }, [modelText]);
 
@@ -108,7 +112,15 @@ export const ModelEditor = () => {
           <select
             value={modelKind}
             onChange={(e) => {
-              setModelKind(e.target.value as ModelKind);
+              const selectedKind = e.target.value as ModelKind;
+              if (selectedKind && example[selectedKind]) {
+                setModelText(example[selectedKind].model);
+                setModelKind('');
+                window.parent.postMessage({
+                  type: 'modelUpdate',
+                  modelText: example[selectedKind].model
+                }, '*');
+              }
             }}
             className={'border-[#767676] border rounded'}
           >

From 505deabe6219b44ec92ebda74ea2e3977d523059 Mon Sep 17 00:00:00 2001
From: Coki <hashcookie404@gmail.com>
Date: Sun, 15 Dec 2024 00:30:34 +0800
Subject: [PATCH 3/3] refactor: update page structure and content extraction
 logic

---
 app/model-editor/page.tsx     | 4 ++--
 app/utils/contentExtractor.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/model-editor/page.tsx b/app/model-editor/page.tsx
index 732b3a2..4aaf1df 100644
--- a/app/model-editor/page.tsx
+++ b/app/model-editor/page.tsx
@@ -5,8 +5,8 @@ import { ModelEditor } from '../components/ModelEditor';
 
 export default function ModelEditorPage() {
   return (
-    <div style={{ width: '100%', height: '100vh' }}>
+    <main style={{ width: '100%', height: '100vh' }}>
       <ModelEditor />
-    </div>
+    </main>
   );
 }
diff --git a/app/utils/contentExtractor.ts b/app/utils/contentExtractor.ts
index 377bb11..b0f5855 100644
--- a/app/utils/contentExtractor.ts
+++ b/app/utils/contentExtractor.ts
@@ -9,7 +9,7 @@ export const extractPageContent = (boxType: string, t: (key: string) => string,
   const mainContent = document.querySelector('main')?.innerText || 'No main content found';
 
   const customConfigMatch = mainContent.match(new RegExp(`${t('Custom Functions')}\\s+([\\s\\S]*?)\\s+${t('Model')}`));
-  const modelMatch = mainContent.match(new RegExp(`${t('Model')}\\s+([\\s\\S]*?)\\s+${t('Policy')}`));
+  const modelMatch = mainContent.match(new RegExp(`${t('Model')}\\s+([\\s\\S]*?)(?:${t('Policy')}|$)`));
   const policyMatch = mainContent.match(new RegExp(`${t('Policy')}\\s+([\\s\\S]*?)\\s+${t('Request')}`));
   const requestMatch = mainContent.match(new RegExp(`${t('Request')}\\s+([\\s\\S]*?)\\s+${t('Enforcement Result')}`));
   const enforcementResultMatch = mainContent.match(new RegExp(`${t('Enforcement Result')}\\s+([\\s\\S]*?)\\s+${t('RUN THE TEST')}`));