feat(tarko): reuse chat input in home page#1313
Merged
Conversation
✅ Deploy Preview for agent-tars-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
421a81a to
39397b0
Compare
Move image previews inside input container to prevent layout shift Improve close button styling with elegant design and better colors
Move image previews inside ChatInput container for homepage consistency Ensure both MessageInput and ChatInput have the same improved UX
…image submission - Create ImagePreviewInline component to eliminate code duplication - Fix ChatInput image submission bug where images were cleared before sending - Both ChatInput and MessageInputField now use the same preview logic - Ensure images are properly included in multimodal message content
…rchitecture - Remove MessageInput and MessageInputField components (redundant) - Unify on ChatInput as the single input component for both pages - Update ChatPanel to use ChatInput directly with proper props - Clean up exports and remove unused component files - Reduce bundle size and improve maintainability Before: ChatPanel → MessageInput → MessageInputField (3 layers) After: ChatPanel → ChatInput (1 layer)
…mepage - Pass initial message via navigation state instead of immediate sendMessage call - Handle initial message in ChatPanel after page load to avoid premature processing state - Remove artificial 500ms setTimeout delay from welcome page submission - Clear navigation state after message is sent to prevent duplicates - Improve user experience with instant navigation and proper state management Before: Homepage → sendMessage (sets isProcessing) → navigate → 1s delay After: Homepage → navigate with state → ChatPanel → sendMessage (smooth)
- Add initialMessageSent state flag to track if message was already sent - Reset flag when switching between sessions to allow fresh sends - Remove problematic dependencies from useEffect to prevent re-triggers - Add early return guard to prevent execution when message already sent - Ensure location state is cleared immediately after processing Fixes: Multiple duplicate messages causing 'Agent already executing' errors Root cause: useEffect re-triggering on every state change
…avigation" This reverts commit aa0f908a0b0ddcaf64bcc2862a48941b2b5d3a89.
… from homepage" This reverts commit fe59f822a10c72a6e55692abf2d4b421380f0e04.
- Keep uploaded images visible in input after submission - Clear images only when isProcessing becomes true (agent starts responding) - Improve user experience by eliminating visual gap between send and response - Handle submission errors gracefully without clearing images Before: Send → Images disappear immediately → Wait ~1s → Agent responds After: Send → Images stay visible → Agent starts → Images clear smoothly
- Set isProcessing=false for homepage ChatInput to prevent premature image clearing - Separate loading state (navigation) from processing state (agent responding) - Images now stay visible during navigation and only clear when agent actually starts Root cause: isLoading was incorrectly passed as isProcessing, causing images to disappear immediately on submit instead of waiting for agent response
- Add utils.ts for message composition logic (DRY principle) - Remove redundant createNewSession wrapper function - Improve async handling in WelcomePage with requestIdleCallback - Reduce hardcoded delays and improve performance
This reverts commit 505144b8d94bf017ccf0a6d5859b7c66de7bea53.
Add z-10 to image preview delete button to prevent it from being occluded by input container elements.
… button Move overflow-hidden from container to image element to maintain rounded corners while allowing delete button positioned outside to be visible.
- Increase button size from 5x5 to 6x6 - Change color to red for better UX (indicates delete action) - Add white border for better contrast - Increase icon size and adjust positioning - Enhanced shadow for better depth
- Use same gradient colors as send button (indigo to purple) - Reduce size from 6x6 to 4x4 for subtlety - Remove motion animations for cleaner interaction - Keep only opacity transition - Smaller icon (8px) for proportional design
- Replace gradient with simple white/gray background - Use subtle gray icon with hover darkening - Add border for better definition - Increase size to 5x5 for better usability - More minimal and cohesive with overall design
Replace indigo hover border with gray for consistent monochrome styling that matches the clean delete button design.
- Remove border from image container for cleaner look - Add border with hover effect to delete button - Remove shadow from delete button to match border style - More consistent visual hierarchy
- Remove useEffect that kept images during processing - Clear both text and images in handleSubmit - Remove unused prevProcessingRef - Ensures clean input state after message submission
- Set loading state immediately to prevent duplicate submissions - Remove 100ms setTimeout delay before sending message - Navigate and send message immediately for faster response - Ensure instant transition to chat interface
- Navigate immediately with temp ID for instant UI response - Create session and replace URL in background - No waiting for async operations before navigation - Fallback to home on session creation error
- Remove temp session ID approach that caused router redirects - Create real session first, then navigate immediately - Prevent SessionRouter from redirecting due to non-existent session - Maintain loading state to prevent duplicate submissions
- Allow 'creating' sessionId to bypass SessionRouter redirect - Show loading state in ChatPanel when sessionId is 'creating' - Navigate immediately to /creating then replace with real session - Provides instant UI response while session creates in background - Fallback to home on session creation error
…state - Detect sessionId === 'creating' and clear activeSessionId immediately - Prevents showing previous session content before switching to creating state - Eliminates flickering from old session -> creating -> new session - Ensures clean transition to loading state
…reating state" This reverts commit 1619bb243beaed2778bcefc5c37a85f3353fa851.
- Read sessionId directly from URL params instead of relying on activeSessionId - Prevents showing old session content when navigating to /creating - Immediately shows creating state without waiting for session state updates - Eliminates flickering between old session -> creating -> new session - Clean separation between URL state and session state
- Format ChatPanel.tsx and WelcomePage.tsx - Consistent code style across modified files
- Extract parseContextualReferences to shared utils to avoid duplication - Remove duplicate ContextualItem import - Clean up unused comments and dead code - Improve code organization and maintainability
67ffcba to
9268dff
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refactored
HomePageto reuseMessageInputcomponent, enabling multimodal input capabilities (image upload, contextual file references) on the welcome page.Checklist