feat: fork branch for main

[Wallgau]

This branch has the incremented implementation for the playground, I have created this draft PR to keep it up to date with main until the playground is ready to be merged to main

Summary by CodeRabbit

• New Features
  • Added chat session management with ability to create, rename, and manage multiple sessions per flow.
  • Added audio recording support for voice-to-text transcription in chat input.
  • Added image file upload capability directly in chat input with drag-and-drop support.
  • Added build duration tracking and display for operations and tool execution timing.
  • Added fullscreen chat mode and organized chat interface with improved sidebar layout.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

Introduces a comprehensive chat playground feature with build duration tracking, session management, and new UI components for message rendering, input handling, and chat headers. Includes backend timing updates and frontend store/hook integration for playground state.

Changes

Cohort / File(s)	Summary
Build Timing & Duration src/backend/base/langflow/api/build.py, src/backend/base/langflow/api/utils/core.py, src/backend/base/langflow/api/v1/chat.py, src/backend/base/langflow/schema/properties.py	Implements per-vertex timing collection via accumulator, computes total build_duration from vertex timedeltas, emits duration in end event, and adds build_duration field to Properties model. Reduced precision in formatElapsedTime from 2 to 1 decimal place. Removed client_request_time-based adjustment logic.
Build Timing Tests src/backend/tests/unit/test_build_timer.py	Adds test suite TestVertexDurationUsesOwnPerfCounter (with duplicate definitions) validating perf_counter-based vertex timing, sequential vertex durations, and per-vertex measurement accuracy.
Chat View - Core Components src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/*.tsx	Introduces ChatMessage router, UserMessage, BotMessage, ErrorView, ThinkingMessage, and supporting components (EditMessageField, FileCardWrapper, FlowRunningSqueleton). Handles message rendering, editing, evaluation, and file previews with rich content support.
Chat View - Input Components src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/*.tsx	Adds ChatInput orchestrator with file upload, audio transcription, paste handling, and send flow. Includes InputWrapper, TextAreaWrapper, AudioButton, UploadFileButton, ButtonSendWrapper, FilePreview, NoInputView components.
Chat View - Header & Sessions src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/components/*.tsx	Implements ChatHeader, ChatHeaderTitle, ChatHeaderActions, ChatSessionsDropdown, ChatSidebar, SessionSelector, SessionRename, SessionMoreMenu, SessionLogsModal with session management, dropdown menus, inline editing, and action menus.
Chat View - Hooks & Utilities src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/hooks/*.ts, src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/utils/*.ts	Provides useMessageDuration, useStreamingMessage, useToolDurations, useChatHistory, useThinkingDuration, useTypingEffect hooks and utilities for formatting (formatTime, formatSeconds, formatToolTitle, formatFileName), message sorting, error extraction, and content block state.
Chat View - Session Management & Handlers src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/hooks/*.ts, src/frontend/src/components/core/playgroundComponent/chat-view/chat-header/utils/*.ts	Introduces useEditSessionInfo, useGetAddSessions, useRenameSession, useSessionMoreMenuHandlers hooks and buildChatHeaderSessionMenuHandlers, buildSessionSelectorMenuHandlers factories for coordinating session operations and menu actions.
Message Cache Management src/frontend/src/components/core/playgroundComponent/chat-view/utils/message-utils.ts, src/frontend/src/components/core/playgroundComponent/chat-view/utils/message-event-handler.ts, src/frontend/src/components/core/playgroundComponent/chat-view/hooks/use-send-message.ts	Implements client-side React Query cache operations for message updates, streaming token accumulation, placeholder handling, session-scoped caching, and send orchestration with flow building integration.
File Management src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-utils.ts, src/frontend/src/components/core/playgroundComponent/chat-view/utils/file-preview-display.tsx, src/frontend/src/components/core/playgroundComponent/chat-input/hooks/use-drag-and-drop.ts	Provides file utilities for type detection, preview URL generation, display name formatting, blob fetching, and drag-and-drop handling for image attachments.
Playground Layout & Container src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx, src/frontend/src/components/ui/simple-sidebar.tsx	Introduces FlowPageSlidingContainerContent orchestrator with session management, fullscreen toggling, and drag-drop integration. Adds comprehensive SimpleSidebar system with resizable, toggleable sidebar, resize handles, keyboard/mouse interactions, and width constraints.
Playground State Management src/frontend/src/stores/playgroundStore.ts, src/frontend/src/stores/flowStore.ts, src/frontend/src/stores/utilityStore.ts	Adds usePlaygroundStore (selectedSession, isPlayground, isFullscreen, isOpen, reset), updates FlowStore with buildStartTime/buildDuration/setters, and extends utilityStore with awaitingBotResponse state.
Type System Updates src/frontend/src/types/chat/index.ts, src/frontend/src/types/messages/index.ts, src/frontend/src/types/components/index.ts, src/frontend/src/types/zustand/flow/index.ts, src/frontend/src/types/zustand/playground/index.ts, src/frontend/src/types/zustand/utility/index.ts	Extends ChatMessageType with flow_id, session_id, sender, text, and color fields; refines Message to allow null id and structured properties; adds JSONValue/JSONObject types; introduces PlaygroundStoreType and related playground/flow/utility store types.
UI Components & Styling src/frontend/src/components/ui/animated-close.tsx, src/frontend/src/components/ui/textarea.tsx, src/frontend/src/style/applies.css, src/frontend/src/style/index.css	Adds AnimatedConditional for width animations, updates textarea max-height constraints, adds session-more-menu-item and playground-slide-icon CSS utilities, and expands dark theme variables.
Icons & Imports src/frontend/src/icons/Indicator/Indicator.jsx, src/frontend/src/icons/Indicator/index.tsx, src/frontend/src/icons/lazyIconImports.ts	Introduces IndicatorComponent and IndicatorIcon components and registers in lazy icon mapping.
Constants & Configuration src/frontend/src/constants/constants.ts, src/frontend/tailwind.config.mjs, src/frontend/package.json	Adds DEFAULT_SESSION_NAME, NEW_SESSION_NAME, CHAT_INPUT_MIN_HEIGHT, SLIDING_TRANSITION_MS constants; integrates @tailwindcss/container-queries plugin; adds mdd screen breakpoint.
Integration & Refactoring src/frontend/src/contexts/index.tsx, src/frontend/src/controllers/API/queries/messages/use-get-messages.ts, src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx, src/frontend/src/modals/IOModal/components/session-view.tsx, src/frontend/src/pages/FlowPage/index.tsx, src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx, src/frontend/src/utils/buildUtils.ts, src/frontend/src/components/core/chatComponents/*.tsx	Exports queryClient from context, removes messages store mutation, simplifies IOModal input-wrapper, integrates useGetMessagesQuery in session-view, wraps FlowPage with SimpleSidebarProvider and FlowPageSlidingContainerContent, updates node toolbar event handling, refactors buildUtils to use handleMessageEvent and persist build duration, and simplifies ContentBlockDisplay/ContentDisplay with useToolDurations integration.
Tests & Documentation src/backend/tests/unit/test_build_timer.py, src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/__tests__/*, src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/components/__tests__/*, src/frontend/src/components/core/playgroundComponent/chat-view/chat-messages/hooks/__tests__/*, src/frontend/src/components/core/playgroundComponent/chat-view/utils/__tests__/*	Adds comprehensive test suites for AudioButton, ButtonSendWrapper, NoInputView, ChatMessage/ThinkingMessage, useAudioRecording, useThinkingDuration, formatSeconds, and message utilities with mocking and scenario coverage.
Secrets Baseline .secrets.baseline	Updates line number positions for three Secret Keyword entries in src/frontend/src/constants/constants.ts due to code additions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ChatInput
    participant SendMessage as useSendMessage
    participant FlowAPI as Build Flow API
    participant EventManager
    participant FlowStore
    participant MessageCache
    participant UI

    User->>ChatInput: Type & Send Message
    ChatInput->>SendMessage: sendMessage(inputValue, files)
    SendMessage->>MessageCache: addUserMessage (placeholder)
    MessageCache->>UI: Update cache (user msg)
    
    SendMessage->>FlowStore: setBuildStartTime(now)
    SendMessage->>FlowAPI: buildFlow(input, session)
    
    FlowAPI->>EventManager: Emit build_start
    EventManager->>FlowStore: Record startTime
    
    FlowAPI->>EventManager: Emit add_message/token
    EventManager->>MessageCache: handleMessageEvent (update)
    MessageCache->>UI: Stream bot message
    
    FlowAPI->>EventManager: Emit build_end + build_duration
    EventManager->>FlowStore: setBuildDuration(ms)
    EventManager->>MessageCache: updateMessageProperties (duration)
    EventManager->>FlowAPI: Persist duration (PUT)
    
    FlowAPI-->>SendMessage: Complete
    UI->>User: Display final message + timing

Loading

sequenceDiagram
    participant UI as Playground UI
    participant Header as ChatHeader
    participant SessionMgmt as useEditSessionInfo
    participant SessionAPI
    participant Cache as Message Cache
    participant Store as PlaygroundStore

    UI->>Header: Render with sessions
    Header->>SessionMgmt: handleDelete/handleRename
    
    SessionMgmt->>SessionAPI: Delete/Update session
    SessionAPI-->>SessionMgmt: Success
    
    SessionMgmt->>Store: setSelectedSession (if active)
    SessionMgmt->>Cache: clearSessionMessages (if deleted)
    
    Cache-->>UI: Clear old session msgs
    Store-->>UI: Update selection
    UI->>Header: Reflect changes

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR introduces 60+ new components/hooks/utilities but only includes 9 test files (~15% coverage). Critical features like useStreamingMessage, useSendMessage, useChatHistory, and BotMessage lack tests. test_build_timer.py contains duplicate test definitions.	Expand test coverage to 60-70% by adding unit tests for critical hooks and components, fix duplicate test definitions in test_build_timer.py, and add integration tests for core chat workflows.
Docstring Coverage	⚠️ Warning	Docstring coverage is 34.48% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	This PR introduces 100+ new files but provides minimal test coverage for critical components and hooks.	Add comprehensive tests for chat-input, session-management components, message hooks, and streaming/error scenarios; fix type-safety issues in existing tests; include integration tests for session lifecycle and message workflows.
Title check	❓ Inconclusive	The title 'feat: fork branch for main' is vague and does not clearly summarize the main changes in the PR, which implements a comprehensive playground feature with chat messaging, session management, and input handling.	Consider updating the title to be more descriptive of the main feature, such as 'feat: implement playground chat interface with session management and message handling' to better communicate the scope of changes.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Test File Naming And Structure	✅ Passed	Backend tests follow pytest standards with descriptive class-based organization; frontend tests use *.test.ts/tsx pattern with descriptive names, proper setup/teardown, extensive mocking, edge case coverage, and testing of both positive and negative scenarios.
Excessive Mock Usage Warning	✅ Passed	Component tests properly mock UI dependencies; hook tests appropriately mock external APIs; utility tests use minimal mocks. Mock usage follows best practices and doesn't obscure functionality.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch playground-main-fork

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}