Feature: Extract page content and send to AI assistant

app/components/SidePanelChat.tsx

@@ -1,12 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { extractPageContent } from '../utils/contentExtractor';
 
 export const SidePanelChat: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [pageContent, setPageContent] = useState('');
 
   const toggleDrawer = () => {
     setIsOpen(!isOpen);
   };
 
+  useEffect(() => {
+    if (isOpen) {
+      const { extractedContent, message } = extractPageContent();
+      setPageContent(extractedContent);
+      setMessage(message);
+    }
+  }, [isOpen]);
+
   return (
     <>
       <button className="text-red-600" onClick={toggleDrawer}>
@@ -33,7 +44,7 @@ export const SidePanelChat: React.FC = () => {
           <iframe
             id="iframeHelper"
             title="iframeHelper"
-            src="https://ai.casbin.com/?isRaw=1"
+            src={`https://ai.casbin.com/?newMessage=${encodeURIComponent(message)}`}
             className="w-full h-full"
             scrolling="no"
             frameBorder="0"

app/utils/contentExtractor.ts

@@ -0,0 +1,34 @@
+const cleanContent = (content: string) => {
+  return content.replace(/^\d+\s+/gm, '').trim();
+};
+
+export const extractPageContent = () => {
+  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}
+    `;
+
+  return {
+    extractedContent,
+    message: `Why this result?\n${extractedContent}`,
+  };
+};