feat: AI language should match UI language (#135)

* feat: enhance content extraction with localization support

* feat: add language support in content extraction and update message handling

app/components/SidePanelChat.tsx

@@ -7,7 +7,7 @@ const SidePanelChat = forwardRef((props, ref) => {
   const [message, setMessage] = useState('');
   const [pageContent, setPageContent] = useState('');
   const [boxType, setBoxType] = useState('');
-  const { t } = useLang();
+  const { t, lang } = useLang();
 
   const toggleDrawer = () => {
     setIsOpen(!isOpen);
@@ -27,10 +27,11 @@ const SidePanelChat = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (isOpen && boxType) {
-      const { extractedContent } = extractPageContent(boxType);
+      const { extractedContent, message } = extractPageContent(boxType, t, lang);
       setPageContent(extractedContent);
+      setMessage(message);
     }
-  }, [isOpen, boxType]);
+  }, [isOpen, boxType, t, lang]);
 
   return (
     <>

app/components/editor/index.tsx

@@ -47,10 +47,10 @@ export const EditorScreen = () => {
     }
   };
   const extractContent = (boxType: string) => {
-    const { message } = extractPageContent(boxType);
+    const { message } = extractPageContent(boxType, t, lang);
     return message;
   };
-  const { t } = useLang();
+  const { t, lang } = useLang();
 
   useEffect(() => {
     const fetchCasbinVersion = async () => {

app/utils/contentExtractor.ts

@@ -1,52 +1,65 @@
 const cleanContent = (content: string) => {
-  return content.replace(/^\d+\s+/gm, '').trim();
+  return content
+    .replace(/^\d+\s+/gm, '')
+    .replace(/Ask AI/g, '')
+    .trim();
 };
 
-export const extractPageContent = (boxType: string) => {
+export const extractPageContent = (boxType: string, t: (key: string) => string, lang: 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 customConfigMatch = mainContent.match(new RegExp(`${t('Custom config')}\\s+([\\s\\S]*?)\\s+${t('Model')}`));
+  const modelMatch = mainContent.match(new RegExp(`${t('Model')}\\s+([\\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('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 model = modelMatch
+    ? cleanContent(modelMatch[1].replace(new RegExp(`${t('Select your model')}[\\s\\S]*?${t('RESET')}`, 'i'), ''))
+    : '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/, ''))
+    ? cleanContent(enforcementResultMatch[1].replace(new RegExp(`${t('Why this result')}[\\s\\S]*?AI Assistant`, 'i'), ''))
     : 'No enforcement result found';
 
-  const extractedContent = `
-    Custom Config: ${customConfig}
-    Model: ${model}
-    Policy: ${policy}
-    Request: ${request}
-    Enforcement Result: ${enforcementResult}
-  `;
+  const removeEmptyLines = (content: string) => {
+    return content
+      .split('\n')
+      .filter((line) => {
+        return line.trim() !== '';
+      })
+      .join('\n');
+  };
+  const extractedContent = removeEmptyLines(`
+    Custom config: ${cleanContent(customConfig)}
+    Model: ${cleanContent(model)}
+    Policy: ${cleanContent(policy)}
+    Request: ${cleanContent(request)}
+    Enforcement Result: ${cleanContent(enforcementResult)}
+  `);
 
-  let message = '';
+  let message = `Please explain in ${lang} language.：\n`;
   switch (boxType) {
     case 'model':
-      message = `Briefly explain the Model content. 
+      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.
+      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. 
+      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. 
+      message += `Why this result? please provide a brief summary. 
       no need to repeat the content of the question.\n${extractedContent}`;
       break;
     default:
-      message = extractedContent;
+      message += extractedContent;
   }
 
   return {

messages/de.json

@@ -2,13 +2,14 @@
   "Custom config": "Benutzerdefinierte Konfiguration",
   "Model": "Modell",
   "Select your model": "Wählen Sie Ihr Modell",
-  "RESET": "ZURÜCKSETZEN",
-  "Policy": "Strategie",
+  "RESET": "Zurücksetzen",
+  "Policy": "Richtlinie",
   "Request": "Anfrage",
   "Enforcement Result": "Durchsetzungsergebnis",
   "Why this result": "Warum dieses Ergebnis?",
-  "SYNTAX VALIDATE": "SYNTAX VALIDIEREN",
-  "RUN THE TEST": "DEN TEST AUSFÜHREN",
-  "SHARE": "TEILEN",
-  "COPY": "KOPIEREN"
+  "SYNTAX VALIDATE": "Syntax validieren",
+  "RUN THE TEST": "Test ausführen",
+  "SHARE": "Teilen",
+  "Copied": "Kopiert",
+  "COPY": "Kopieren"
 }

messages/en.json

@@ -6,9 +6,10 @@
   "Policy": "Policy",
   "Request": "Request",
   "Enforcement Result": "Enforcement Result",
-  "Why this result": "Why this result?",
+  "Why this result": "Why this result",
   "SYNTAX VALIDATE": "SYNTAX VALIDATE",
   "RUN THE TEST": "RUN THE TEST",
   "SHARE": "SHARE",
+  "Copied": "Copied",
   "COPY": "COPY"
 }

messages/fr.json

@@ -2,13 +2,14 @@
   "Custom config": "Configuration personnalisée",
   "Model": "Modèle",
   "Select your model": "Sélectionnez votre modèle",
-  "RESET": "RÉINITIALISER",
-  "Policy": "Stratégie",
-  "Request": "Demande",
-  "Enforcement Result": "Résultat de l'exécution",
-  "Why this result": "Pourquoi ce résultat?",
-  "SYNTAX VALIDATE": "VALIDER LA SYNTAXE",
-  "RUN THE TEST": "EXÉCUTER LE TEST",
-  "SHARE": "PARTAGER",
-  "COPY": "COPIER"
+  "RESET": "Réinitialiser",
+  "Policy": "Politique",
+  "Request": "Requête",
+  "Enforcement Result": "Résultat d'application",
+  "Why this result": "Pourquoi ce résultat ?",
+  "SYNTAX VALIDATE": "Valider la syntaxe",
+  "RUN THE TEST": "Exécuter le test",
+  "SHARE": "Partager",
+  "Copied": "Copié",
+  "COPY": "Copier"
 }

messages/ja.json

@@ -3,12 +3,13 @@
   "Model": "モデル",
   "Select your model": "モデルを選択",
   "RESET": "リセット",
-  "Policy": "戦略",
+  "Policy": "ポリシー",
   "Request": "リクエスト",
   "Enforcement Result": "実行結果",
   "Why this result": "なぜこの結果？",
   "SYNTAX VALIDATE": "構文検証",
-  "RUN THE TEST": "テストを実行",
+  "RUN THE TEST": "テスト実行",
   "SHARE": "共有",
+  "Copied": "コピー完了",
   "COPY": "コピー"
 }

messages/zh-Hant.json

@@ -1,14 +1,15 @@
 {
-  "Custom config": "自訂設定",
+  "Custom config": "自定義配置",
   "Model": "模型",
-  "Select your model": "選擇您的模型",
+  "Select your model": "選擇模型",
   "RESET": "重置",
   "Policy": "策略",
   "Request": "請求",
   "Enforcement Result": "執行結果",
-  "Why this result": "為什麼這個結果？",
-  "SYNTAX VALIDATE": "語法驗證",
-  "RUN THE TEST": "運行測試",
+  "Why this result": "為何此結果？",
+  "SYNTAX VALIDATE": "驗證語法",
+  "RUN THE TEST": "運行",
   "SHARE": "分享",
+  "Copied": "已複製",
   "COPY": "複製"
 }