function MainComponent() { const [language, setLanguage] = useState("ar"); const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(false); const [page, setPage] = useState(1); const translations = { ar: { home: "الرئيسية", about: "من نحن", work: "أعمالنا", services: "خدماتنا", blog: "المدونة", contact: "اتصل بنا", blogTitle: "مدونة Vaistars للذكاء الاصطناعي", blogDescription: "آخر الأخبار والتطورات في عالم الذكاء الاصطناعي", loadMore: "تحميل المزيد", loading: "جاري التحميل...", readMore: "اقرأ المزيد", categories: { aiTools: "أدوات الذكاء الاصطناعي", aiNews: "أخبار الذكاء الاصطناعي", latest: "التطورات الحديثة", future: "مستقبل الذكاء الاصطناعي" } }, en: { home: "Home", about: "About", work: "Our Work", services: "Services", blog: "Blog", contact: "Contact", blogTitle: "Vaistars AI Blog", blogDescription: "Latest News and Developments in AI", loadMore: "Load More", loading: "Loading...", readMore: "Read More", categories: { aiTools: "AI Tools", aiNews: "AI News", latest: "Latest Developments", future: "Future of AI" } } }; const [streamingArticles, setStreamingArticles] = useState(""); const [error, setError] = useState(null); const handleStreamResponse = useHandleStreamResponse({ onChunk: (chunk)=>{ setStreamingArticles(chunk); }, onFinish: (message)=>{ try { const parsedContent = JSON.parse(message); const newArticles = parsedContent.articles.map((article)=>({ ...article, date: new Date().toLocaleDateString(language === "ar" ? "ar-EG" : "en-US") })); setArticles((prev)=>[ ...prev, ...newArticles ]); setStreamingArticles(""); } catch (error) { setError("حدث خطأ في معالجة البيانات"); } } }); const generateArticles = async ()=>{ setLoading(true); setError(null); const categories = [ translations[language].categories.aiTools, translations[language].categories.aiNews, translations[language].categories.latest, translations[language].categories.future ]; try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: language === "ar" ? `أنت مساعد متخصص في كتابة مقالات عن الذكاء الاصطناعي باللغة العربية. يجب أن تكون المقالات: - موضوعية وغنية بالمعلومات - تتناول آخر التطورات في مجال الذكاء الاصطناعي - مكتوبة بأسلوب عربي سلس وجذاب - تستخدم مصطلحات عربية دقيقة للمفاهيم التقنية - تراعي السياق الثقافي العربي قواعد مهمة: - استخدم لغة عربية فصحى معاصرة سهلة الفهم - قدم أمثلة عملية من واقع العالم العربي - اذكر إحصائيات وأرقام حديثة عن كل موضوع - اربط المواضيع بتأثيرها على المجتمعات العربية - تجنب الترجمة الحرفية للمصطلحات التقنية - ركز على الابتكارات والتطورات الحديثة في 2025` : `You are an AI assistant specialized in writing articles about artificial intelligence in English. Articles should be: - Objective and rich in information - Cover the latest developments in AI - Written in a smooth and engaging style - Use accurate technical terminology - Consider global context Important rules: - Use clear, contemporary language - Provide practical real-world examples - Include recent statistics and numbers - Connect topics to societal impact - Avoid technical jargon - Focus on 2025 innovations and developments` }, { role: "user", content: language === "ar" ? `اكتب ${4} مقالات عن الذكاء الاصطناعي باللغة العربية. يجب أن تحتوي كل مقالة على: - عنوان جذاب ومبتكر يثير اهتمام القارئ العربي - ملخص شيق (100-150 كلمة) يوضح أهم النقاط في المقال - تصنيف من: ${categories.join(", ")} - وقت قراءة تقديري المواضيع المقترحة: - كيف يغير الذكاء الاصطناعي الحياة اليومية في العالم العربي 2025 - تطبيقات الذكاء الاصطناعي في التعليم والصحة في المنطقة العربية - مستقبل العمل: تأثير الذكاء الاصطناعي على الوظائف في الشرق الأوسط - الابتكارات الرائدة في مجال الذكاء الاصطناعي في المنطقة العربية 2025 يجب أن تكون المقالات: - مرتبطة بالسياق العربي لعام 2025 - غنية بالمعلومات والأمثلة العملية من المنطقة - مكتوبة بأسلوب عربي سلس وجذاب - موضوعية ودقيقة علمياً - تتضمن إحصائيات وأرقام حديثة عن المنطقة العربية - تركز على التأثير العملي على حياة المجتمعات العربية` : `Write ${4} articles about artificial intelligence in English. Each article should contain: - An engaging and innovative title that captures reader interest - An interesting summary (100-150 words) highlighting key points - Category from: ${categories.join(", ")} - Estimated reading time Suggested topics: - How AI is Transforming Daily Life in 2025 - Latest AI Applications in Healthcare and Education - Future of Work: How AI is Reshaping Jobs and Skills - Leading AI Innovations in 2025 Articles should be: - Relevant to 2025 - Rich in information and practical examples - Written in a smooth and engaging style - Objective and scientifically accurate - Include recent statistics and numbers - Focus on practical impact on people's lives` } ], json_schema: { name: "articles", schema: { type: "object", properties: { articles: { type: "array", items: { type: "object", properties: { title: { type: "string" }, summary: { type: "string" }, category: { type: "string" }, readTime: { type: "string" }, date: { type: "string" } }, required: [ "title", "summary", "category", "readTime", "date" ], additionalProperties: false } } }, required: [ "articles" ], additionalProperties: false } }, stream: true }) }); handleStreamResponse(response); } catch (error) { setError(language === "ar" ? "عذراً، حدث خطأ في توليد المقالات. يرجى المحاولة مرة أخرى" : "Error generating articles. Please try again"); console.error("Error generating articles:", error); } finally{ setLoading(false); } }; useEffect(()=>{ generateArticles(); }, [ language ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#0a192f] to-[#112240]", dir: language === "ar" ? "rtl" : "ltr", __source: { fileName: "", lineNumber: 217, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#0a192f] border-b border-[#233554] px-4 py-4", __source: { fileName: "", lineNumber: 221, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 222, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/9cb6b471-ed94-47c6-bfeb-dc8eb6254d94/-/format/auto/", alt: "Vaistars Logo", className: "h-12", __source: { fileName: "", lineNumber: 223, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8 text-white font-cairo items-center", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, translations[language].home), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, translations[language].about), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 235, columnNumber: 13 }, __self: this }, translations[language].work), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, translations[language].services), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, translations[language].blog), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, translations[language].contact), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLanguage(language === "ar" ? "en" : "ar"), className: "bg-[#64ffda] text-[#0a192f] px-4 py-2 rounded-lg hover:bg-[#4cd8b2] transition-colors", __source: { fileName: "", lineNumber: 247, columnNumber: 13 }, __self: this }, language === "ar" ? "EN" : "عربي")))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 257, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-4 font-cairo", __source: { fileName: "", lineNumber: 259, columnNumber: 11 }, __self: this }, translations[language].blogTitle), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0] text-xl font-cairo", __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, translations[language].blogDescription)), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center mb-8 font-cairo", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, error), streamingArticles && /*#__PURE__*/ React.createElement("div", { className: "text-[#8892b0] text-center mb-8 font-cairo", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, streamingArticles), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this }, articles.map((article, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#112240] rounded-lg p-6 hover:transform hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#64ffda] text-sm mb-2 font-cairo", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, article.category), /*#__PURE__*/ React.createElement("h2", { className: "text-white text-xl font-bold mb-4 font-cairo", __source: { fileName: "", lineNumber: 288, columnNumber: 15 }, __self: this }, article.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0] mb-4 font-cairo", __source: { fileName: "", lineNumber: 291, columnNumber: 15 }, __self: this }, article.summary), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-[#8892b0] text-sm font-cairo", __source: { fileName: "", lineNumber: 294, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, article.readTime), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, article.date)), /*#__PURE__*/ React.createElement("button", { className: "mt-4 text-[#64ffda] hover:underline font-cairo", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, translations[language].readMore)))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-[#64ffda]", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0] mt-2 font-cairo", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, translations[language].loading)), !loading && articles.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 315, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateArticles, className: "bg-[#64ffda] text-[#0a192f] px-6 py-3 rounded-lg hover:bg-[#4cd8b2] transition-colors font-cairo", __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this }, translations[language].loadMore)))); }