import React, { useState } from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, useMotionValue, useMotionValueEvent, type MotionValue } from 'framer-motion'; import { Bell, Bot, Brain, Check, FileText, Folder, Home, LayoutDashboard, Link, LogOut, Menu, MessageSquare, PlayCircle, Plus, Search, Send, Settings, Sparkles, TrendingUp, User } from 'lucide-react'; import { Area, Bar } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); // ChannelLogo animation const fadeInLogo = useTransform(time, [0, 0.5], [0, 1]); const translateYLogo = useTransform(time, [0, 0.5], [20, 0]); // Main title animation const fadeInTitle = useTransform(time, [0.5, 1.5], [0, 1]); const translateYTitle = useTransform(time, [0.5, 1.5], [20, 0]); // Tag 1 animation const fadeInTag1 = useTransform(time, [4.5, 5.0], [0, 1]); const translateYTag1 = useTransform(time, [4.5, 5.0], [10, 0]); // Tag 2 animation const fadeInTag2 = useTransform(time, [6.0, 6.5], [0, 1]); const translateYTag2 = useTransform(time, [6.0, 6.5], [10, 0]); // Tag 3 animation const fadeInTag3 = useTransform(time, [7.5, 8.0], [0, 1]); const translateYTag3 = useTransform(time, [7.5, 8.0], [10, 0]); return (

NotebookLM: العقل الثاني لفريقك!

المعرفة المشتركة الإنتاجية الذكاء الاصطناعي

); } function Scene1({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const cardOpacity = useTransform(time, [0, 1], [0, 1]); const cardY = useTransform(time, [0, 1], [20, 0]); const titleOpacity = useTransform(time, [0.5, 1.5], [0, 1]); const titleY = useTransform(time, [0.5, 1.5], [10, 0]); const item1Opacity = useTransform(time, [2.5, 3.5], [0, 1]); const item1Y = useTransform(time, [2.5, 3.5], [10, 0]); const item2Opacity = useTransform(time, [6.0, 7.0], [0, 1]); const item2Y = useTransform(time, [6.0, 7.0], [10, 0]); const item3Opacity = useTransform(time, [9.5, 10.5], [0, 1]); const item3Y = useTransform(time, [9.5, 10.5], [10, 0]); const item4Opacity = useTransform(time, [13.0, 14.0], [0, 1]); const item4Y = useTransform(time, [13.0, 14.0], [10, 0]); return ( ماذا ستتعلم

{/* Objective 1 */}

إنشاء وتنظيم مستودع معرفة الفريق الأساسي في NotebookLM

{/* Objective 2 */}

صياغة أسئلة فعالة لاستخراج الأفكار الرئيسية والإجابات الموثوقة من مستندات الفريق

{/* Objective 3 */}

توزيع المعرفة صوتياً باستخدام ميزة الملخصات الصوتية الفريدة لـ NotebookLM

{/* Objective 4 */}

الاعتماد كمصدر وحيد للحقيقة لربط المستندات وتوحيد المعرفة وتجنب تشتتها

); } function Scene2({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); // TIMING MAP: // [0.0s - 6.0s] "الخطوة الأولى نحو بناء العقل الثاني لفريقكم هي إنشاء دفتر ملاحظات جديد في NotebookLM." (Initial state: NotebookLM homepage with 'New Notebook' button visible). // [6.0s - 6.5s] Cursor moves to and clicks 'New Notebook' button. // [6.5s - 7.0s] New notebook modal appears over a dimmed backdrop. // [7.0s - 13.0s] The name field fills in with 'مستودع معرفة الفريق' (whole string at once, RTL). // [13.0s - 17.8s] "هذا يضمن أن جميع المستندات المتعلقة بعمل فريقكم ستكون في مكان واحد." (Remaining narration). const newNotebookButtonScale = useTransform( time, [6.0, 6.25, 6.5], // Start click, peak click, end click [1, 0.95, 1] ); const newNotebookModalOpacity = useTransform( time, [6.5, 7.0], // Start fade-in, end fade-in [0, 1] ); const newNotebookModalY = useTransform( time, [6.5, 7.0], // Start move-up, end move-up [20, 0] ); const inputFieldText = "مستودع معرفة الفريق"; // The field renders ONE string: the placeholder until the text lands, then the // text. Fading a copy over a live stacked both in the same box. const [fieldText, setFieldText] = useState(""); useMotionValueEvent(time, "change", (t: number) => { setFieldText(t >= 7.3 ? inputFieldText : ""); }); // Cursor animation const cursorX = useTransform( time, [0, 6.0, 6.4, 6.5, 7.0, 7.4, 13.0], // Initial, move to button, click, release, move to field, settle, stay [100, 300, 300, 300, 768, 588, 588] ); const cursorY = useTransform( time, [0, 6.0, 6.4, 6.5, 7.0, 7.4, 13.0], // Initial, move to button, click, release, move to field, stay [100, 350, 350, 350, 349, 349, 349] ); const showCursor = useTransform( time, [0, 17.8], // Cursor visible throughout interaction [1, 0] ); return ( {/* Sidebar */}

NotebookLM

{/* Main Content Area */}

دفاتر الملاحظات

مرحبًا بك في NotebookLM!

ابدأ بإنشاء دفتر ملاحظات جديد.

دفتر ملاحظات جديد

{/* Modal backdrop — without it the page behind reads as text overlapping the modal */} {/* New Notebook Modal */}

إنشاء دفتر ملاحظات جديد

اسم دفتر الملاحظات

{fieldText || "اسم دفتر الملاحظات"}

{/* Custom Cursor */}

); } function Scene3({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const uiOpacity = useTransform(time, [0, 0.5], [0, 1]); const uploadOptionsOpacity = useTransform(time, [0.5, 2.0], [0, 1]); const uploadButtonScale = useTransform( time, [4.0, 4.25, 4.5], [1, 0.95, 1] ); const doc1Opacity = useTransform(time, [6.0, 6.2], [0, 1]); const doc1Y = useTransform(time, [6.0, 6.2], [10, 0]); const doc2Opacity = useTransform(time, [6.5, 6.7], [0, 1]); const doc2Y = useTransform(time, [6.5, 6.7], [10, 0]); const doc3Opacity = useTransform(time, [7.0, 7.2], [0, 1]); const doc3Y = useTransform(time, [7.0, 7.2], [10, 0]); const documentItems = [ { name: "سياسة الإجازات 2024.pdf", icon: FileText, color: "text-red-500", opacity: doc1Opacity, y: doc1Y, }, { name: "دليل إجراءات المشروع الجديد.docx", icon: FileText, color: "text-blue-500", opacity: doc2Opacity, y: doc2Y, }, { name: "قالب تقرير الاجتماع.txt", icon: FileText, color: "text-slate-500", opacity: doc3Opacity, y: doc3Y, }, ]; return ( {/* Sidebar */}

NotebookLM

المصادر

{documentItems.map((doc, index) => ( {doc.name} ))}

{/* Main Content Area */}

رفع المستندات إلى NotebookLM

يمكن لـ NotebookLM استيعاب ملفات PDF ومستندات Google Docs والنصوص العادية.

{/* Upload PDF */}

ملف PDF

{/* Upload Google Doc */}

مستند Google

{/* Upload Text */}

نص عادي

الرفع من Google Drive

); } function Scene4({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); // TIMING MAP: // [0.0s - 3.6s] "بعد رفع المستندات، يمكننا البدء في طرح أسئلة استراتيجية لاستخلاص الأفكار الرئيسية." // [3.6s - 6.0s] "هذه هي قوة NotebookLM الحقيقية: القدرة على البحث في جميع وثائقكم وتقديم إجابات دقيقة وموثوقة." // [6.0s - 10.0s] "سأدخل هذا السؤال: "لخص سياسة الإجازات الجديدة وقارنها بالقديمة، مع التركيز على أي تغييرات رئيسية في الأهلية أو المزايا."" const promptText = "لخص سياسة الإجازات الجديدة وقارنها بالقديمة، مع التركيز على أي تغييرات رئيسية في الأهلية أو المزايا."; const promptOpacity = useTransform(time, [6.0, 9.0], [0, 1]); // Animate prompt appearance over 3 seconds return ( {/* Sidebar */}

NotebookLM

الإعدادات

{/* Main Chat Area */}

{/* Chat Header */}

مكتبتي المشتركة

{/* Chat Messages Area */}

{/* Placeholder for previous messages or welcome message */}

ابدأ بطرح سؤال حول مستنداتك...

{/* Input Field */}

); } function Scene5({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const responseOpacity = useTransform(time, [1.0, 1.5], [0, 1]); const citationOpacity = useTransform(time, [3.5, 4.0], [0, 1]); const sourceHighlightBg = useTransform(time, [3.5, 4.0], ['rgba(49, 134, 255, 0)', 'rgba(49, 134, 255, 0.1)']); // Full Arabic text for the response (no streaming due to RTL) const fullResponseContent = ( <>

لقد قمت بتحليل "سياسة الإجازات 2024.pdf" ومقارنتها بـ "سياسة الإجازات القديمة.pdf". إليك ملخص للتغييرات الرئيسية:

زيادة عدد أيام الإجازة السنوية: تم زيادة الحد الأقصى لأيام الإجازة السنوية من 21 يوماً إلى 25 يوماً للموظفين الذين أكملوا سنتين من الخدمة. (1)
تعديل شروط الإجازات المرضية: تتطلب الإجازات المرضية التي تتجاوز 3 أيام متتالية الآن شهادة طبية من طبيب معتمد. (2)
إضافة إجازة أبوة مدفوعة الأجر: تم تقديم إجازة أبوة مدفوعة الأجر لمدة 5 أيام للموظفين الذكور عند ولادة طفلهم. (1)

هذه التغييرات تهدف إلى تحسين بيئة العمل ودعم الموظفين بشكل أفضل.

); return ( {/* Left Sidebar - Sources Panel */}

NotebookLM

المصادر

سياسة الإجازات 2024.pdf سياسة الإجازات القديمة.pdf

دليل الموظف.pdf

عقود العمل.pdf

{/* Right Main Content - Chat Interface */}

{/* Chat History */}

{/* User Prompt */}

لخص التغييرات في سياسة الإجازات الجديدة لعام 2024 مقارنة بالسابقة.

{/* NotebookLM Response */}

ملخص التغييرات في سياسة الإجازات

{fullResponseContent}

{/* Input Area */}

); } function Scene6({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const questionText = "ما هي الخطوات الرئيسية لتنفيذ المشروع X، وما هي المخاطر المحتملة المذكورة في وثيقة التخطيط؟"; // Animation for the user's question to appear const questionOpacity = useTransform(time, [2.0, 2.5], [0, 1]); // Fade in over 0.5s starting at 2.0s return ( {/* Sidebar - Not mirrored for RTL, stays on left */}

NotebookLM

الإعدادات

{/* Main Chat Area */}

{/* Chat Header */}

مشروع X

{/* Chat Messages */}

{/* Example previous message (AI) */}

مرحباً! كيف يمكنني مساعدتك في مشروع X اليوم؟

{/* User's new question */}

{questionText}

{/* Chat Input */}

{/* Send icon rotated to point left for RTL visual consistency */}

); } function Scene7({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const answerOpacity = useTransform(time, [0.5, 2.0], [0, 1]); const citationOpacity = useTransform(time, [2.0, 3.0], [0, 1]); const sourcesOpacity = useTransform(time, [3.0, 4.0], [0, 1]); return ( {/* Top Bar */}

NotebookLM

{/* Main Content Area */}

{/* Left Panel: NotebookLM Answer */}

{/* Question */}

سؤال:

ما هي الخطوات الرئيسية والمخاطر المحتملة لمشروع X؟

{/* Answer */}

الإجابة:

تتضمن الخطوات الرئيسية لمشروع X ما يلي:

المرحلة الأولى: التخطيط الأولي - تحديد الأهداف، نطاق المشروع، والموارد المطلوبة. [1]
المرحلة الثانية: التنفيذ والتطوير - بناء المكونات الأساسية واختبارها.
المرحلة الثالثة: النشر والإطلاق - إطلاق المنتج أو الخدمة للمستخدمين.
المرحلة الرابعة: المراقبة والتحسين - جمع الملاحظات وإجراء التعديلات اللازمة.

تشمل المخاطر المحتملة:

مخاطر فنية: تحديات غير متوقعة في التكامل أو الأداء.
مخاطر مالية: تجاوز الميزانية المخصصة.
مخاطر الموارد البشرية: نقص الكفاءات أو تغييرات في الفريق. [2]
مخاطر السوق: عدم قبول المنتج من قبل السوق المستهدف.

{/* Right Panel: Sources */}

المصادر

{[ { icon: FileText, title: "دليل إجراءات المشروع الجديد.docx" }, { icon: FileText, title: "محضر اجتماع المشروع.pdf" }, { icon: FileText, title: "تحليل السوق التنافسي.xlsx" }, { icon: FileText, title: "ملاحظات اجتماع الفريق.txt" }, ].map((item, index) => (

{item.title}

))}

); } function Scene8({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const cursorStartX = 640; // Center of 1280px width const cursorStartY = 344; // Center of 688px height // Target for "استوديو" item (approximate center) const studioItemX = 120; // Half of sidebar width 240px const studioItemY = 240; // Approx vertical position // Target for "إنشاء ملخص صوتي" button (approximate center) const buttonX = 1088; // 896 (sources panel left) + 16 (px-4) + (384-32)/2 (button width / 2) const buttonY = 590; // Approx vertical position const cursorX = useTransform( time, [2.5, 4.0, 7.5], [cursorStartX, studioItemX, buttonX] ); const cursorY = useTransform( time, [2.5, 4.0, 7.5], [cursorStartY, studioItemY, buttonY] ); const cursorOpacity = useTransform(time, [2.0, 2.5, 8.5], [0, 1, 0]); const studioHighlightBg = useTransform( time, [2.5, 3.5, 7.5, 8.5], ["rgba(241, 245, 249, 0)", "rgb(219, 234, 254)", "rgb(219, 234, 254)", "rgba(241, 245, 249, 0)"] // slate-100 to blue-100 ); const generateButtonScale = useTransform( time, [7.5, 7.7, 8.0], [1, 0.95, 1] ); const generateButtonBg = useTransform( time, [7.5, 7.7, 8.0, 8.5], ["rgb(59, 130, 246)", "rgb(37, 99, 235)", "rgb(59, 130, 246)", "rgb(59, 130, 246)"] // blue-600 to blue-700 ); const [buttonText, setButtonText] = useState("إنشاء ملخص صوتي"); const [showSpinner, setShowSpinner] = useState(false); useMotionValueEvent(time, "change", (latest) => { if (latest >= 8.0) { setButtonText("جاري التوليد..."); setShowSpinner(true); } else { setButtonText("إنشاء ملخص صوتي"); setShowSpinner(false); } }); return (

{/* Left Sidebar */}

NotebookLM

الرئيسية

استوديو

المصادر

المستخدمون

الإعدادات

تسجيل الخروج

{/* Main Content Area */}

{/* Header */}

دفتر الملاحظات "مشروع X"

{/* Chat and Sources Panels */}

{/* Chat Panel */}

اطرح سؤالاً حول هذا الدفتر لتبدأ المحادثة

{/* Sources Panel */}

مصادر دفتر الملاحظات

دليل إجراءات المشروع الجديد.docx

خطة التسويق للربع الثالث.pdf

تقرير أبحاث السوق.pptx

ملاحظات اجتماع الفريق.txt

{showSpinner && ( )} {buttonText}

{/* Cursor */}

); } function Scene9({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const progressBarWidth = useTransform(time, [0, 2.0], [0, 100], { clamp: true }); const progressTextOpacity = useTransform(time, [0, 1.8, 2.0, 2.2], [1, 1, 0, 0], { clamp: true }); const completedTextOpacity = useTransform(time, [2.0, 2.2, 2.5, 2.7], [0, 1, 1, 0], { clamp: true }); const audioPlayerOpacity = useTransform(time, [2.7, 3.0], [0, 1], { clamp: true }); // Simulate waveform activity by animating general opacity const waveformActivity = useTransform(time, [3.0, 3.5, 4.0, 4.5, 5.0, 5.5], [0.5, 1, 0.7, 1, 0.6, 1], { clamp: false }); const playheadPosition = useTransform(time, [3.0, 15.0], [0, 100], { clamp: true }); // Simulate playhead moving const audioCurrentTime = useTransform(time, [3.0, 15.0], [0, 225], { clamp: true }); // 3:45 = 225 seconds total duration const formatTime = (seconds) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; }; const [displayCurrentTime, setDisplayCurrentTime] = useState("0:00"); useMotionValueEvent(audioCurrentTime, "change", (v) => setDisplayCurrentTime(formatTime(v))); // Generate static heights for waveform bars const waveformBars = Array.from({ length: 25 }).map((_, i) => { const minHeight = 10; const maxHeight = 80; // Introduce some pseudo-randomness for a natural look const seed = i * 0.1 + Math.sin(i * 0.5); const height = minHeight + ((Math.abs(Math.sin(seed)) * (maxHeight - minHeight)) * 0.7 + (Math.random() * (maxHeight - minHeight) * 0.3)); return Math.max(minHeight, Math.min(maxHeight, height)); }); return (

{/* Header */}

NotebookLM

{/* Content Area */}

ملخص سياسة الشركة الجديدة

{/* Audio Generation Progress */}

جاري إنشاء الملف الصوتي...

{/* Audio Generation Complete */}

اكتمل!

{/* Audio Player */}

{displayCurrentTime} 3:45

{/* Waveform Visualizer */}

{waveformBars.map((h, index) => ( ))}

); } function Scene10({ time }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); // Animation for the main card container const cardOpacity = useTransform(time, [0, 0.5], [0, 1]); const cardY = useTransform(time, [0, 0.5], [20, 0]); // Animation for bullet points const bullet1Opacity = useTransform(time, [1.0, 1.5], [0, 1]); const bullet1Y = useTransform(time, [1.0, 1.5], [10, 0]); const bullet2Opacity = useTransform(time, [2.0, 2.5], [0, 1]); const bullet2Y = useTransform(time, [2.0, 2.5], [10, 0]); const bullet3Opacity = useTransform(time, [3.0, 3.5], [0, 1]); const bullet3Y = useTransform(time, [3.0, 3.5], [10, 0]); const bullet4Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const bullet4Y = useTransform(time, [4.0, 4.5], [10, 0]); return (

NotebookLM: مصدر وحيد للحقيقة

يوحد المستندات المتشتتة يقلل من البحث عن المعلومات يعزز اتخاذ القرار المستنير يبني ذاكرة مؤسسية قوية

); } function Scene11({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); const __anim1 = useTransform(time, [0, 0.5], [20, 0]); const titleOpacity = useTransform(time, [0, 0.5], [0, 1]); const bullet1Opacity = useTransform(time, [0.5, 1.0], [0, 1]); const bullet2Opacity = useTransform(time, [1.5, 2.0], [0, 1]); return ( قابلية النقل

نفس سير العمل في ChatGPT أو Claude ابحث عن ميزة رفع الملفات والسياق الموسع

); } function Scene12({ time }: { time: MotionValue }) { const __anim0 = useTransform(time, [0, 0.5], [0, 1]); // Animation for the entire card content (summary points) const contentOpacity = useTransform(time, [0.5, 1.5], [0, 1]); return (

ما تعلمناه

{/* Point 1 */}

كيفية إنشاء وتنظيم مستودع معرفة الفريق

{/* Point 2 */}

صياغة أسئلة فعالة

{/* Point 3 */}

استخدام الملخصات الصوتية

{/* Point 4 */}

الاعتماد على NotebookLM كمصدر وحيد للحقيقة

توجهوا إلى aiunwrap.com

); } // ─── Channel Logo ───────────────────────────────────────────────────────── function ChannelLogo({ size = 40 }: { size?: number }) { // Bulb rendered at 70% of 'size' (height) — more visually balanced with the // "AI Unwrap" text beside it, and reduces the optical off-centre caused by // the bulb's left-side petals when the logo is flex-centred on a scene. const iconH = Math.round(size * 0.7); const iconW = Math.round(size * 0.5); const gap = Math.round(size * 0.12); // Optical-centering spacer: when the logo is rendered large (title/outro), // add an invisible mirror of the bulb on the right so the "AI Unwrap" text // becomes the true geometric centre of the flex row — this way it vertically // aligns with other centred text below it. Skipped for small corner watermarks. const balance = size >= 60; return (

AI Unwrap {balance && ); } // ─── Scene Error Boundary ───────────────────────────────────────────────── class SceneErrorBoundary extends React.Component< { children: React.ReactNode; sceneIndex: number }, { error: string | null } > { constructor(props: { children: React.ReactNode; sceneIndex: number }) { super(props); this.state = { error: null }; } static getDerivedStateFromError(err: Error): { error: string } { return { error: err.message }; } componentDidCatch(err: Error) { // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {} } render() { if (this.state.error) { return (

⚠️

Scene {this.props.sceneIndex + 1} rendering error

{this.state.error}

); } return this.props.children; } } // ─── App Wrapper ───────────────────────────────────────────────────────── export default function App() { const { time, sceneIndex } = useVideoState(); return (

{sceneIndex === 0 && } {sceneIndex === 1 && } {sceneIndex === 2 && } {sceneIndex === 3 && } {sceneIndex === 4 && } {sceneIndex === 5 && } {sceneIndex === 6 && } {sceneIndex === 7 && } {sceneIndex === 8 && } {sceneIndex === 9 && } {sceneIndex === 10 && } {sceneIndex === 11 && } {sceneIndex === 12 && }

); }

بناء مستودع معرفة الفريق في NotebookLM: دليل سير العمل الكامل!

قراءات إضافية

أنشئ درسك التعليمي الخاص