SmartBoard Component

Relevant source files

The following files were used as context for generating this wiki page:

• components/SmartBoard.tsx
• App.tsx
• types.ts
• hooks/useContentGenerator.ts
• services/geminiService.ts
• components/NoteCard.tsx
• hooks/useNotes.ts
• README.md

The SmartBoard is a core UI component in the Nota application, designed to function as a "Random Access Intelligence" engine. It serves as a centralized dashboard for displaying various forms of AI-generated content derived from a YouTube video's transcript. Its primary purpose is to transform long-form video content into structured, actionable intelligence, such as key takeaways, social media posts, and blog outlines.

The component features a multi-tabbed interface that organizes different types of generated content and user-created "margin notes". It dynamically displays loading states, progress indicators, and the final content as it becomes available from the Gemini AI service. It is a key part of the main application view, sitting alongside the transcript column.

Sources: README.md, components/SmartBoard.tsx, App.tsx:100-115

Architecture and Data Flow

The SmartBoard component is a presentational component that receives its state and logic via props from the main App.tsx component. The App component orchestrates several custom hooks (useContentGenerator, useNotes) to manage state and passes the data down to SmartBoard.

This diagram illustrates the flow of data and props from parent components and hooks into the SmartBoard.

Component Props

The SmartBoard's behavior is controlled entirely by the props it receives.

Prop	Type	Source	Description
content	ContentOutput | null	useContentGenerator	Contains all AI-generated content like threads, posts, and outlines.
notes	Note[]	useNotes	An array of user-generated margin notes.
isGenerating	boolean	useContentGenerator	A global flag indicating if any AI content generation is active.
progress	GenerationProgress	useContentGenerator	An object tracking the loading status ('loading', 'done', 'error') for each content type.
onDeleteNote	(id: string) => void	useNotes	Callback function to delete a specific note.
onJumpToTime	(time: number) => void	App.tsx	Callback to seek the video player to a specific timestamp.
processingStatus	ProcessingStatus	useNotes	The status of a "margin note" being created (e.g., PROCESSING).
currentDraft	string	App.tsx	The raw text selected by the user, shown while a note is being summarized.

Sources: components/SmartBoard.tsx:11-20, types.ts

Core Functionality

Tabbed Interface

The SmartBoard uses a tabbed layout to organize different categories of content. A local state variable, activeTab, controls which content pane is visible. The tabs are rendered using a reusable TabButton sub-component.

Sources: components/SmartBoard.tsx:51, components/SmartBoard.tsx:70-109

The TabButton displays:

• An icon and label for the content type.
• A loading spinner (Loader2) if the status prop is 'loading'.
• A checkmark icon if the status is 'done'.
• A count of items (e.g., number of notes or takeaways).

Sources: components/SmartBoard.tsx:22-48

The available tabs are:

• Takeaways: Shows core insights as atomic points.
• Thread: For a viral-ready Twitter thread.
• LinkedIn: A professional summary post.
• Blog: A blog post outline.
• Notes: User-created "margin notes".

Content Display Panes

Each tab corresponds to a specific pane that renders the data from the content or notes props.

Takeaways Tab

This tab maps over the content.keyTakeaways array and displays each takeaway with its associated emoji and text. It includes a "Copy" button for each item and a "Copy All" button for the entire list.

Sources: components/SmartBoard.tsx:114-142, types.ts:40-43

Twitter Thread Tab

This pane shows a preview of the first 3 tweets from content.twitterThread. If there are more than 3 tweets, it displays a "View Full Thread" button which opens the ThreadModal for viewing the complete thread.

Sources: components/SmartBoard.tsx:145-173

LinkedIn Tab

Renders the content.linkedInPost object, breaking it down into its constituent parts: hook, body, cta, and hashtags. A "Copy Full Post" button is provided to copy the formatted post to the clipboard.

Sources: components/SmartBoard.tsx:176-218, types.ts:21-26

Blog Tab

Displays the content.blogOutline, including the title, seoKeywords, and a list of sections with headings and bullet points. An "Export as Markdown" button formats the outline into a Markdown string for copying.

Sources: components/SmartBoard.tsx:221-263, types.ts:28-38

Notes Tab

This tab displays a list of user-generated notes.

• It shows a loading indicator if processingStatus is PROCESSING, indicating that Gemini is summarizing a selected piece of text.
• If no notes exist, it shows a placeholder message.
• Otherwise, it maps over the notes array in reverse chronological order and renders a NoteCard component for each note.

Sources: components/SmartBoard.tsx:266-298, hooks/useNotes.ts:14

AI Content Generation Flow

The content displayed in the SmartBoard is generated automatically when a video's transcript is loaded. This process is managed by the useContentGenerator hook and geminiService.

The following sequence diagram shows the end-to-end flow from transcript loading to content display.

This diagram shows how App.tsx triggers the useContentGenerator hook, which in turn calls multiple functions in geminiService.ts to generate different content types in parallel.

Sources: App.tsx:40-46, hooks/useContentGenerator.ts:88-151, services/geminiService.ts

Sub-components and Interactions

NoteCard Integration

The "Notes" tab renders a list of NoteCard components. Each NoteCard is responsible for displaying a single note's cleaned text, its timestamp, and action buttons for jumping to the video time (onJumpToTime) and deleting the note (onDelete).

Sources: components/SmartBoard.tsx:289-295, components/NoteCard.tsx

ThreadModal

The SmartBoard manages the visibility of the ThreadModal using the isThreadModalOpen local state. When the "View Full Thread" button is clicked, this state is set to true, and the modal is rendered, receiving the full array of tweets to display.

Sources: components/SmartBoard.tsx:52, components/SmartBoard.tsx:168, components/SmartBoard.tsx:301-305

Copy Functionality

A local CopyButton component and a handleCopy utility function provide a consistent way to copy content to the clipboard. This feature uses the navigator.clipboard.writeText API and gives user feedback by temporarily changing the button's icon to a checkmark and showing a toast notification.

Sources: components/SmartBoard.tsx:53-62, components/SmartBoard.tsx:64-70