feat: Add progress bar and AI thoughts to Market Research - Added dynamic progress bar below research parameters - Implemented cycling AI thought messages during processing - Localized thought messages in English, Russian, and Hebrew - Enhanced visual feedback for deep analysis process

components/MarketResearcher.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -25,6 +25,8 @@ const MarketResearcher = () => {
     const [specialInstructions, setSpecialInstructions] = useState("");
 
     const [isProcessing, setIsProcessing] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [thoughtIndex, setThoughtIndex] = useState(0);
     const [error, setError] = useState<string | null>(null);
 
     const selectedModel = selectedModels[selectedProvider];
@@ -61,6 +63,31 @@ const MarketResearcher = () => {
         return null;
     };
 
+    useEffect(() => {
+        let interval: NodeJS.Timeout;
+        if (isProcessing) {
+            setProgress(0);
+            setThoughtIndex(0);
+            interval = setInterval(() => {
+                setProgress(prev => {
+                    if (prev >= 95) return prev;
+                    return prev + (prev < 30 ? 2 : prev < 70 ? 1 : 0.5);
+                });
+            }, 300);
+
+            const thoughtInterval = setInterval(() => {
+                setThoughtIndex(prev => (prev < (t.thoughts?.length || 0) - 1 ? prev + 1 : prev));
+            }, 4000);
+
+            return () => {
+                clearInterval(interval);
+                clearInterval(thoughtInterval);
+            };
+        } else {
+            setProgress(0);
+        }
+    }, [isProcessing, t.thoughts]);
+
     const handleStartResearch = async () => {
         const validationError = validateUrls();
         if (validationError) {
@@ -93,6 +120,7 @@ const MarketResearcher = () => {
             }, selectedProvider, selectedModel);
 
             if (result.success && result.data) {
+                setProgress(100);
                 try {
                     const cleanJson = result.data.replace(/```json\s*([\s\S]*?)\s*```/i, '$1').trim();
                     const parsed = JSON.parse(cleanJson);
@@ -319,6 +347,37 @@ const MarketResearcher = () => {
                                 />
                             </div>
 
+                            {isProcessing && (
+                                <div className="space-y-4 animate-in fade-in slide-in-from-top-4 duration-500">
+                                    <div className="space-y-2">
+                                        <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
+                                            <span className="text-indigo-600 flex items-center gap-1.5">
+                                                <Loader2 className="h-3 w-3 animate-spin" /> {language === "ru" ? "Идет анализ" : language === "he" ? "מנתח..." : "Analysis in progress"}
+                                            </span>
+                                            <span className="text-slate-400">{Math.round(progress)}%</span>
+                                        </div>
+                                        <div className="h-2 w-full bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
+                                            <div
+                                                className="h-full bg-gradient-to-r from-indigo-500 via-violet-500 to-indigo-500 transition-all duration-300 ease-out"
+                                                style={{ width: `${progress}%` }}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div className="p-4 rounded-xl bg-slate-900 text-white shadow-lg relative overflow-hidden group">
+                                        <div className="absolute top-0 right-0 p-2 opacity-20">
+                                            <Rocket className="h-4 w-4 text-indigo-400 group-hover:block hidden" />
+                                        </div>
+                                        <h4 className="text-[9px] font-black uppercase tracking-[0.2em] text-indigo-400 mb-2 flex items-center gap-1.5">
+                                            <span className="h-1 w-1 bg-indigo-400 rounded-full animate-pulse" /> AI Thoughts & Actions
+                                        </h4>
+                                        <p className="text-xs font-bold leading-relaxed italic animate-in fade-in slide-in-from-left-2 duration-700">
+                                            "{t.thoughts?.[thoughtIndex] || t.researching}"
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+
                             {error && (
                                 <div className="p-3 rounded-xl bg-rose-50 border border-rose-100 flex items-start gap-3 animate-in fade-in slide-in-from-top-2">
                                     <AlertCircle className="h-4 w-4 text-rose-500 shrink-0 mt-0.5" />

lib/i18n/translations.ts

@@ -138,6 +138,16 @@ export const translations = {
             generate: "Start Research",
             researching: "Performing Deep Analysis...",
             emptyState: "Your comprehensive market research report will appear here",
+            thoughts: [
+                "Initializing deep scan of primary website...",
+                "Extracting product hierarchy and pricing structures...",
+                "Identifying competitor digital footprints...",
+                "Analyzing competitor feature sets and USPs...",
+                "Cross-referencing pricing data across target URLs...",
+                "Evaluating market positioning and landscape...",
+                "Synthesizing strategic advantages and identifying gaps...",
+                "Finalizing comprehensive intelligence report..."
+            ]
         }
     },
     ru: {
@@ -277,6 +287,16 @@ export const translations = {
             generate: "Начать исследование",
             researching: "Выполнение глубокого анализа...",
             emptyState: "Ваш подробный отчет об исследовании рынка появится здесь",
+            thoughts: [
+                "Инициализация глубокого сканирования основного сайта...",
+                "Извлечение иерархии продуктов и структур ценообразования...",
+                "Идентификация цифровых следов конкурентов...",
+                "Анализ наборов функций и УТП конкурентов...",
+                "Перекрестная проверка ценовых данных по целевым URL...",
+                "Оценка позиционирования на рынке и ландшафта...",
+                "Синтез стратегических преимуществ и выявление пробелов...",
+                "Финализация подробного отчета о разведке..."
+            ]
         }
     },
     he: {
@@ -416,6 +436,16 @@ export const translations = {
             generate: "התחל מחקר",
             researching: "מבצע ניתוח מעמיק...",
             emptyState: "דו\"ח מחקר השוק המקיף שלך יופיע כאן",
+            thoughts: [
+                "מאתחל סריקה עמוקה של אתר האינטרנט הראשי...",
+                "מחלץ היררכיית מוצרים ומבני תמחור...",
+                "מזהה טביעות רגל דיגיטליות של מתחרים...",
+                "מנתח סטים של תכונות ו-USP של מתחרים...",
+                "מצליב נתוני תמחור בין כתובות URL ממוקדות...",
+                "מעריך מיצוב שוק ונוף תחרותי...",
+                "מסנכרן יתרונות אסטרטגיים ומזהה פערים...",
+                "מגבש דו\"ח מודיעין מקיף סופי..."
+            ]
         }
     }
 };