Centralize search result processing and initial chart data generation in a new backend controller method.

Author: HassanDev13

app/Http/Controllers/Api/ChatV2Controller.php

@@ -28,6 +28,45 @@ public function index(): Response
         return Inertia::render('ChatV2/Index');
     }
 
+    public function search(Request $request): Response
+    {
+        if ($request->user()) {
+            $request->user()->checkAndResetDailyCredits();
+        }
+        
+        $q = $request->query('q');
+        $initialChartData = null;
+        
+        if (!empty($q)) {
+            $results = $this->searchService->searchTerms($q, false, true);
+            
+            if (!empty($results) && !isset($results['is_composition_fallback'])) {
+                $topGroup = $results[0];
+                
+                if (isset($topGroup['global_stats']) && count($topGroup['global_stats']) > 0) {
+                    $chartDataRows = [];
+                    foreach ($topGroup['global_stats'] as $stat) {
+                        $chartDataRows[] = [
+                            'name' => $stat['term'],
+                            'value' => $stat['total_count']
+                        ];
+                    }
+                    
+                    $initialChartData = [
+                        'type' => 'bar',
+                        'title' => 'توزيع انتشار التراجم (' . ($topGroup['display_term_en'] ?? $q) . ')',
+                        'data' => array_slice($chartDataRows, 0, 10)
+                    ];
+                }
+            }
+        }
+
+        return Inertia::render('ChatV2/Results', [
+            'q' => $q,
+            'initialChartData' => $initialChartData
+        ]);
+    }
+
     public function chat(Request $request)
     {
         $request->validate([
@@ -101,32 +140,18 @@ public function chat(Request $request)
 (CRITICAL INSTRUCTION: Look at the top-level `resource_count` field in the JSON data. DO NOT calculate counts yourself. DO NOT mention how many times the term appeared in total, ONLY mention the number of sources/resources! If 0 results, put 0 and explain from your knowledge base contextually.)
 **التعريف:** [Brief definition of the English term in Arabic to set context]
 
-## 1. الإحصائيات المرئية (Visual Statistics)
-You MUST generate a visual chart to show the frequency of the top Arabic translations FIRST. YOU MUST WRAP the JSON data inside a markdown code block starting with ` ```recharts ` and ending with ` ``` `.
-
-```recharts
-{
-  \"type\": \"bar\",
-  \"title\": \"توزيع انتشار التراجم\",
-  \"data\": [
-    {\"name\": \"[Arabic Term 1]\", \"value\": [total_count]}
-  ]
-}
-```
-**CRITICAL:** DO NOT FORGET the ```recharts and ``` tags around the JSON!
-
-## 2. ملخص الاستعمال الأكثر شيوعاً
+## 1. ملخص الاستعمال الأكثر شيوعاً
 [Provide a summary of the most used Arabic term and its acceptance level. Do not mention total frequency numbers, focus on the variety of sources.]
 
-## 3. التحليل التفصيلي حسب المصدر
+## 2. التحليل التفصيلي حسب المصدر
 [List each resource and the term it uses. CRITICAL: You MUST format every page number as a standard markdown clickable link EXACTLY using this format: `[ص. X](/resources/{resource_id}/pdf#page={page_number})`. 
 Example of CORRECT syntax: `[ص. 5](/resources/10/pdf#page=5)`
 Example of INCORRECT syntax: `(/resources/10/pdf#page=5)[ص. 5]` — NEVER do this!]
 
-## 4. التحليل اللغوي والدلالي (Linguistic and Semantic Analysis)
+## 3. التحليل اللغوي والدلالي (Linguistic and Semantic Analysis)
 [Provide a deep linguistic and semantic description for the most used term. Discuss its linguistic roots, morphology (e.g., verb weights, derivation like 'افتعل'), and the semantic nuances that make it an appropriate translation for the English term, similar to how Arabic language academies analyze terms.]
 
-## 5. تقييم وانتقاد الترجمة (Criticism and Evaluation)
+## 4. تقييم وانتقاد الترجمة (Criticism and Evaluation)
 [Provide a detailed, objective evaluation and criticism (إنتقاد) of the most used Arabic translation. Discuss its shortcomings, whether it truly captures the technical essence of the English Computer Science term, any potential confusion it might cause, and if there are better or more precise alternatives, even if less commonly used.]
 
 Note: Be professional and comprehensive. Ensure every cited page has a link.";
@@ -404,4 +429,4 @@ public function downloadPdf(Request $request) {
             'Content-Disposition' => 'attachment; filename="term_report_' . time() . '.pdf"',
         ]);
     }
-}
+}

resources/js/Pages/ChatV2/Results.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Head, Link, usePage } from "@inertiajs/react";
+import { Head, Link, usePage, router } from "@inertiajs/react";
 import { Button } from "@/Components/ui/button";
 import { Switch } from "@/Components/ui/switch";
 import { 
@@ -12,14 +12,14 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell, PieChart, Pie, Legend } from 'recharts';
 
-export default function Results({ q }) {
+export default function Results({ q, initialChartData }) {
     const [query, setQuery] = useState(q || "");
     const [result, setResult] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const [detailedMode, setDetailedMode] = useState(false);
     const { auth } = usePage().props;
-    const initialSearchDone = useRef(false);
+    const initialSearchDone = useRef(null);
 
     // Local state for credits to update immediately without waiting for page reload
     const [credits, setCredits] = useState(auth.user?.daily_credits ?? 0);
@@ -74,22 +74,26 @@ export default function Results({ q }) {
         return { chartData: null, cleanText: text };
     };
 
-    const { chartData, cleanText } = extractChartContent(result);
+    const { chartData: extractedChartData, cleanText } = extractChartContent(result);
+    // Use the backend-provided chart if available, otherwise fallback to extracted (if AI generated it)
+    const chartData = initialChartData || extractedChartData;
 
     useEffect(() => {
-        if (q && !initialSearchDone.current) {
-            initialSearchDone.current = true;
+        if (q && initialSearchDone.current !== q) {
+            initialSearchDone.current = q;
             performSearch(q);
         }
     }, [q]);
 
-    const performSearch = async (textToSearch) => {
+    const performSearch = async (textToSearch, modeOverride = undefined) => {
         if (!textToSearch.trim() || loading) return;
 
         setLoading(true);
         setResult("");
         setError(null);
 
+        const isDetailed = modeOverride !== undefined ? modeOverride : detailedMode;
+        
         try {
             // Read updated X-XSRF-TOKEN from cookies to prevent 419 errors after login navigations
             const getXsrfToken = () => {
@@ -106,7 +110,7 @@ export default function Results({ q }) {
                 },
                 body: JSON.stringify({ 
                     messages: [{ role: "user", content: textToSearch }],
-                    detailed_mode: detailedMode 
+                    detailed_mode: isDetailed 
                 }),
             });
 
@@ -138,16 +142,21 @@ export default function Results({ q }) {
                     if (!line.trim()) continue;
                     try {
                         const json = JSON.parse(line);
-                        if (json.chunk) {
-                            accumulatedContent += json.chunk;
-                            let displayContent = accumulatedContent;
-                            displayContent = displayContent.replace(/<think>[\s\S]*?<\/think>/gi, "");
-                            displayContent = displayContent.replace(/<[\|｜][\s\S]*?[\|｜]>/gu, "");
-                            displayContent = displayContent.replace(/<dsml>[\s\S]*?<\/dsml>/gi, "");
-                            if (displayContent.match(/^<think>/i)) displayContent = "";
-                            displayContent = displayContent.replace(/^Thinking\.\.\.\s*/i, "");
-                            setResult(displayContent.trim());
-                        }
+                            if (json.chunk) {
+                                accumulatedContent += json.chunk;
+                                let displayContent = accumulatedContent;
+                                displayContent = displayContent.replace(/<think>[\s\S]*?<\/think>/gi, "");
+                                displayContent = displayContent.replace(/<[\|｜].*?[\|｜]>/gu, "");
+                                displayContent = displayContent.replace(/<[\/]?([\|｜]DSML[\|｜])[^>]*>/gi, "");
+                                displayContent = displayContent.replace(/<dsml>[\s\S]*?<\/dsml>/gi, "");
+                                displayContent = displayContent.replace(/Let me try a different approach to search for this term\./gi, "");
+                                displayContent = displayContent.replace(/Let me search for this term\./gi, "");
+                                displayContent = displayContent.replace(/Let me look up this term\./gi, "");
+                                if (displayContent.match(/^<think>/i)) displayContent = "";
+                                displayContent = displayContent.replace(/^Thinking\.\.\.\s*/i, "");
+                                displayContent = displayContent.trim().replace(/^_+/g, '').trim(); 
+                                setResult(displayContent);
+                            }
                     } catch (e) {}
                 }
             }
@@ -166,13 +175,13 @@ export default function Results({ q }) {
     const handleSearchSubmit = (e) => {
         e.preventDefault();
 
-        // Update URL if changed
-        const currentParams = new URLSearchParams(window.location.search);
-        if (currentParams.get('q') !== query) {
-            window.history.pushState({}, '', `/search?q=${encodeURIComponent(query)}`);
-        }
-        
-        performSearch(query);
+        if (!query.trim() || loading) return;
+
+        // Perform an Inertia visit to fetch new props (like initialChartData) from backend
+        router.get(`/search`, { q: query }, {
+            preserveState: true,
+            preserveScroll: true
+        });
     };
 
     return (
@@ -269,14 +278,20 @@ export default function Results({ q }) {
                         </div>
 
                          <div 
-                                onClick={() => setDetailedMode(!detailedMode)}
+                                onClick={() => {
+                                    const newMode = !detailedMode;
+                                    setDetailedMode(newMode);
+                                    if (query) {
+                                        performSearch(query, newMode);
+                                    }
+                                }}
                                 className="flex items-center gap-1.5 md:gap-2 bg-white px-2.5 py-1.5 md:px-3 md:py-2 rounded-xl border border-slate-200 shadow-sm cursor-pointer select-none hover:bg-slate-50 transition-colors shrink-0"
                             >
                                 <span className="text-[10px] md:text-xs font-bold text-slate-600 flex items-center gap-1 md:gap-1.5">
                                     <FileText className={`h-3 w-3 md:h-3.5 md:w-3.5 ${detailedMode ? 'text-blue-500' : 'text-slate-400'}`} />
                                     <span>وضع تفصيلي</span>
                                 </span>
-                                <Switch checked={detailedMode} onCheckedChange={setDetailedMode} className="scale-[0.65] md:scale-75 data-[state=checked]:bg-blue-600 pointer-events-none origin-left rtl:origin-right" />
+                                <Switch checked={detailedMode} readOnly className="scale-[0.65] md:scale-75 data-[state=checked]:bg-blue-600 pointer-events-none origin-left rtl:origin-right" />
                         </div>
                      </div>
 

routes/web.php

@@ -17,14 +17,7 @@
     return inertia("ChatV2/Changelog");
 })->name("changelog");
 
-Route::get("/search", function (\Illuminate\Http\Request $request) {
-    if ($request->user()) {
-        $request->user()->checkAndResetDailyCredits();
-    }
-    return inertia("ChatV2/Results", [
-        'q' => $request->query('q')
-    ]);
-})->middleware(['auth', 'approved'])->name("search.results");
+Route::get("/search", [ChatV2Controller::class, "search"])->middleware(['auth', 'approved'])->name("search.results");
 
 Route::get("/thanks", function () {
     return inertia("Thanks");