Files
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NY c0afce2507 T23a: AI chat, messages
- messages: yours in a quiet bubble, the assistant's as prose beside its mark,
  system notes, errors; avatars, headers with model and time, footers
- MessageList over gpui's bottom-aligned list: drawn near the view, held at the
  newest, counting arrivals while away; a way back down; day separators
- streaming text and markdown reveal toward the text as it grows, with a caret;
  a blinking cursor before the first words
- CodeBlock with language, copy, run, apply, download and folding;
  MarkdownRenderer::code lets messages draw fences with it
- pictures, grids, files, voice notes, video over host frames, link previews
- quotes, actions, an editor that takes focus, versions, regenerate, stop and
  continue
- errors with retry, a rate limit counting down, feedback, thinking blocks
- gallery: the AI Chat page with scripted states
2026-09-26 05:35:09 -04:00

335 lines
9.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Chapters 21–30
## T21a Documents · Editing — `src/documents`
- [x] RichTextEditor
- [x] MarkdownEditor — visual, source, split
- [x] BlockEditor
- [x] Block types — paragraph, heading, list, todo, quote, code, divider, table, image, video, embed, math, callout, toggle, columns, synced; video and embed open as cards the app plays or shows
- [x] BlockHandle → the block editor's handle, a `menus::OverflowMenu` that drags its block
- [x] SlashMenu → `/` in `BlockEditor`
- [x] FloatingFormatToolbar → `overlays::FloatingToolbar`
- [x] FixedFormatToolbar
- [x] LinkEditor
- [x] MentionMenu → `@` in `RichTextEditor` and `BlockEditor`; `forms::MentionInput` in a field
- [x] EmojiAutocomplete → a colon and two letters in `RichTextEditor` and `BlockEditor`
- [x] TableEditor → the block editor's table: rows and columns added and removed, cells merged across
- [x] ImageEditorBlock → the block editor's picture: resized by its edges, aligned, captioned
- [x] MathEditor / LatexBlock → the block editor's math block over `typography::Latex`
- [x] MermaidBlock / DiagramBlock — host renders the SVG → `BlockEditor::diagrams`
- [x] CodeBlockEditor → the block editor's code block
- [x] TodoItem / Checklist
- [x] PlaceholderText → each kind's hint in `BlockEditor`
- [x] WordCount / CharacterCount → `WordCount`, with `limit` for characters
- [x] ReadingTime
## T21b Documents · Reading
- [x] MarkdownRenderer
- [x] DocumentViewer — host pages
- [x] PDFViewer — host pages; thumbnails, search, zoom, notes → `documents::DocumentViewer` with `thumbnails`, `find` (an `editor::FindWidget`) and `notes`
- [x] EpubReader — host chapters
- [x] OfficePreview — host pages → `documents::DocumentViewer`
- [x] PageThumbnailList
- [x] TableOfContents → `navigation::TableOfContents`; `MarkdownRenderer::sections` and `outline` feed it
- [x] DocumentOutline → `navigation::TableOfContents`
- [x] Footnote
- [x] Glossary / TooltipTerm
- [x] ReadingProgress
- [x] FocusMode / ZenMode → `documents::ZenMode`
- [x] PrintPreview — host pages
## T21c Documents · Knowledge
- [x] PageTree → `lists::Tree`, a page's emoji leading its label
- [x] Backlinks
- [x] GraphView → `charts::NetworkGraph`
- [x] PageCover / PageIcon
- [x] PageProperties → `data_display::PropertyGrid`
- [x] DatabaseView — table, board, gallery, calendar, timeline → lands with Project (T31): its board is the KanbanBoard, its calendar the CalendarMonthView (T30)
- [x] TemplatePicker
- [x] TrashBin
- [x] VersionHistory
- [x] PageHistoryDiff
- [x] Favorites / Pinned → `documents::Favorites`
## T22 Collaboration — `src/collab`
- [x] PresenceAvatars
- [x] RemoteCursor → over a `forms::TextInput`, placed where its offset sits as the field paints
- [x] RemoteSelection → over a `forms::TextInput`, from `TextInput::bounds_for_range`
- [x] CommentThread
- [x] CommentBubble / CommentMarker → `collab::CommentMarker`, its thread in an `overlays::Popover`
- [x] CommentSidebar
- [x] Reply / ReactionPicker
- [x] Reactions
- [x] Annotation / Highlight → `collab::AnnotatedText`; a plain mark is `typography::Highlight`
- [x] SuggestionMode → edits become suggestions through `collab::suggested`
- [x] TrackChanges
- [x] ShareDialog → with `collab::LinkAccess` for who the link lets in
- [x] PermissionSelect
- [x] InviteInput → a `forms::TagInput` that checks each address
- [x] AccessList
- [x] ActivityLog → `data_display::ActivityFeed`
- [x] FollowMode
- [x] LiveIndicator
## T23a AI Chat · Messages — `src/chat`
- [x] ChatContainer
- [x] MessageList — virtualized, stick to bottom, new-message hint
- [x] MessageBubble — user, assistant, system, error
- [x] MessageAvatar
- [x] MessageHeader
- [x] MessageFooter
- [x] StreamingText
- [x] StreamingMarkdown
- [x] StreamingCursor
- [x] CodeBlock — language, copy, download, run, fold, apply
- [x] MathBlock → `typography::Latex`
- [x] TableBlock → `documents::MarkdownRenderer`
- [x] MermaidRenderer → the host draws the SVG; `chat::ImageMessage` shows it
- [x] ImageMessage / ImageGrid
- [x] FileMessage
- [x] AudioMessage
- [x] VideoMessage — host frames
- [x] LinkPreviewCard
- [x] QuoteReply
- [x] MessageActions
- [x] MessageEditor
- [x] BranchNavigator
- [x] RegenerateButton → `chat::regenerate_button`
- [x] StopGeneratingButton → `chat::stop_button`
- [x] ContinueButton → `chat::continue_button`
- [x] ErrorMessage / RetryMessage → `chat::ErrorMessage`, over `feedback::Alert`
- [x] RateLimitNotice
- [x] FeedbackForm
- [x] ScrollToBottomButton
- [x] DateSeparator
- [x] ThinkingBlock / ReasoningPanel → `chat::ThinkingBlock`
- [x] ThinkingIndicator
- [x] ThinkingDuration
## T23b AI Chat · Citations
- [ ] CitationBadge / InlineCitation
- [ ] SourceCard
- [ ] SourceList / SourcesPanel
- [ ] SearchProgress
- [ ] WebResultCard
- [ ] DocumentChunkPreview
## T23c AI Chat · Input
- [ ] PromptInput / Composer
- [ ] AttachmentButton
- [ ] AttachmentChip / AttachmentPreview
- [ ] PasteImagePreview
- [ ] DragDropOverlay
- [ ] VoiceInputButton
- [ ] VoiceWaveform / RecordingIndicator
- [ ] SlashCommandMenu → `documents::SlashMenu`
- [ ] PromptTemplateMenu
- [ ] ContextMentionMenu
- [ ] ContextChips
- [ ] ModelSelector
- [ ] ModeSelector
- [ ] ToolToggleMenu
- [ ] TemperatureSlider / ParameterPanel
- [ ] SystemPromptEditor
- [ ] TokenCounter
- [ ] ContextWindowMeter
- [ ] CostEstimator
- [ ] SendButton
- [ ] InputHint
## T23d AI Chat · Conversations
- [ ] ConversationList
- [ ] ConversationItem
- [ ] ConversationSearch
- [ ] NewChatButton
- [ ] FolderList / ProjectList
- [ ] ProjectKnowledgePanel
- [ ] SharedConversationView
- [ ] ConversationExport
## T23e AI Chat · Welcome
- [ ] WelcomeScreen / Greeting
- [ ] SuggestionChips / StarterPrompts
- [ ] PromptLibrary
- [ ] FollowUpSuggestions
- [ ] CapabilityCards
## T24 Agent — `src/agent`
- [ ] ToolCallCard
- [ ] ToolCallGroup
- [ ] ToolApprovalDialog
- [ ] PermissionPrompt
- [ ] AgentStepList / TaskTimeline
- [ ] AgentPlan / TodoList
- [ ] AgentStatus
- [ ] AgentProgress
- [ ] SubAgentTree
- [ ] FileChangeCard
- [ ] MultiFileDiff Review
- [ ] CommandExecutionCard
- [ ] BrowserPreview / ScreenshotStream — host frames
- [ ] ComputerUseViewer — host frames
- [ ] ArtifactPanel
- [ ] ArtifactVersionSwitcher
- [ ] LivePreview — host content
- [ ] SandboxStatus
- [ ] MCPServerList / ConnectorList
- [ ] ToolRegistry Panel
- [ ] MemoryPanel
- [ ] CheckpointList / Rewind
- [ ] InterruptButton
- [ ] HumanInputRequest
- [ ] TokenUsageChart
- [ ] CostBreakdown
- [ ] TraceViewer
- [ ] EvalResultTable
## T25 Generative — `src/generative`
- [ ] ImageGenerationPanel
- [ ] GenerationQueue
- [ ] GenerationGrid
- [ ] VariationPicker
- [ ] PromptEnhancer
- [ ] NegativePromptInput
- [ ] StylePresetPicker
- [ ] SeedInput
- [ ] AspectRatioPicker
- [ ] InpaintCanvas
- [ ] MaskBrush
- [ ] ImageCompare → `data_display::BeforeAfter`
- [ ] AudioGenerationPlayer
- [ ] VideoGenerationTimeline
- [ ] TTSVoicePicker
- [ ] ModelCard
- [ ] ModelDownloadManager
- [ ] ModelStatus
- [ ] HardwareMonitor
- [ ] FineTuneJobCard
- [ ] DatasetViewer
- [ ] EmbeddingVisualizer — 2D, 3D projection
- [ ] PromptPlayground
- [ ] PromptDiff / PromptVersionHistory
- [ ] ABCompareView
## T26 Media — `src/media`
- [ ] ImageViewer — zoom, pan, rotate, fit
- [ ] ImageCropper — also T06e ImageUpload
- [ ] ImageAnnotator
- [ ] ImageThumbnail
- [ ] Lightbox / Gallery Viewer → `overlays::Lightbox`
- [ ] VideoPlayer — host frames
- [ ] VideoTimeline / Scrubber
- [ ] VideoThumbnailStrip
- [ ] AudioPlayer — host playback
- [ ] AudioWaveform
- [ ] AudioSpectrum / Visualizer
- [ ] VolumeControl
- [ ] PlaybackSpeedControl
- [ ] MediaControls
- [ ] Playlist
- [ ] SubtitleEditor
- [ ] ScreenRecorderControls
- [ ] CameraPreview — host frames
- [ ] MicLevelMeter
- [ ] DeviceSelector
- [ ] 3DModelViewer — host frames, orbit input
## T27 Files — `src/files`
- [ ] FileExplorer — list, icons, columns
- [ ] FileGrid
- [ ] FileList
- [ ] FileItem
- [ ] FileIcon
- [ ] FilePreview / QuickLook
- [ ] FileBreadcrumb / PathBar → `navigation::Breadcrumb`
- [ ] FolderTree → `lists::FileTree`
- [ ] FileContextMenu → `menus::ContextMenu`
- [ ] RenameInline → `forms::InlineEdit`
- [ ] DragDropFiles → `forms::DropZone`
- [ ] FileOperationProgress
- [ ] TransferQueue
- [ ] DownloadManager
- [ ] StorageUsage → `data_display::UsageBar`
- [ ] RecentFiles
- [ ] Favorites / Bookmarks → `documents::Favorites`
- [ ] FileSearch
- [ ] DuplicateFinder
- [ ] ArchiveViewer — host entries
- [ ] HexViewer → `debug::HexViewer`
## T28 Messaging — `src/messaging`
- [ ] ChannelList / ChatList
- [ ] ChannelItem
- [ ] DirectMessageItem
- [ ] MessageThread
- [ ] ThreadPanel
- [ ] ChatMessage
- [ ] UnreadDivider
- [ ] MessageReactions → `collab::Reactions`
- [ ] ReadReceipt
- [ ] TypingIndicator → `motion::TypingIndicator`
- [ ] MemberList
- [ ] UserProfileCard
- [ ] OnlineStatus
- [ ] StatusSetter
- [ ] VoiceCallBar
- [ ] VideoCallGrid — host frames
- [ ] ScreenShareView — host frames
- [ ] CallControls
- [ ] ParticipantTile
- [ ] IncomingCallDialog
- [ ] StickerPicker
- [ ] GifPicker — host images
- [ ] PinnedMessages
- [ ] ChannelHeader
- [ ] HuddleIndicator
## T29 Mail — `src/mail`
- [ ] MailboxList / FolderList
- [ ] MailList
- [ ] MailItem
- [ ] MailReader
- [ ] MailComposer
- [ ] RecipientInput
- [ ] MailThreadView
- [ ] QuotedText
- [ ] SignatureEditor
- [ ] LabelPicker
- [ ] SnoozePicker
- [ ] ScheduleSend
- [ ] InboxZeroState
## T30 Calendar — `src/calendar`
- [ ] CalendarMonthView
- [ ] CalendarWeekView
- [ ] CalendarDayView
- [ ] AgendaView
- [ ] YearView
- [ ] MiniCalendar → `forms::Calendar`
- [ ] EventCard / EventChip
- [ ] EventEditor
- [ ] EventPopover
- [ ] TimeGrid — drag to create, resize
- [ ] AllDayRow
- [ ] CurrentTimeIndicator
- [ ] RecurrenceEditor
- [ ] AvailabilityPicker
- [ ] TimezoneOverlay
- [ ] ReminderPicker
- [ ] AttendeeList