Skip to content

feat(tarko): reuse chat input in home page#1313

Merged
ulivz merged 38 commits intomainfrom
feat/homepage-reuse-message-input
Sep 4, 2025
Merged

feat(tarko): reuse chat input in home page#1313
ulivz merged 38 commits intomainfrom
feat/homepage-reuse-message-input

Conversation

@ulivz
Copy link
Member

@ulivz ulivz commented Aug 31, 2025

Summary

Refactored HomePage to reuse MessageInput component, enabling multimodal input capabilities (image upload, contextual file references) on the welcome page.

Checklist

  • Added or updated necessary tests (Optional).
  • Updated documentation to align with changes (Optional).
  • Verified no breaking changes, or prepared solutions for any occurring breaking changes (Optional).
  • My change does not involve the above items.

@netlify
Copy link

netlify bot commented Aug 31, 2025

Deploy Preview for agent-tars-docs ready!

Name Link
🔨 Latest commit 9268dff
🔍 Latest deploy log https://app.netlify.com/projects/agent-tars-docs/deploys/68b9c02f4e70130008a97d19
😎 Deploy Preview https://deploy-preview-1313--agent-tars-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ulivz ulivz changed the title feat(tarko): reuse MessageInput in HomePage for multimodal support feat(tarko): reuse chat input in home page Aug 31, 2025
@ulivz ulivz force-pushed the feat/homepage-reuse-message-input branch 2 times, most recently from 421a81a to 39397b0 Compare September 4, 2025 15:19
ulivz added 26 commits September 5, 2025 00:36
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.
ulivz added 12 commits September 5, 2025 00:36
- 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
@ulivz ulivz force-pushed the feat/homepage-reuse-message-input branch from 67ffcba to 9268dff Compare September 4, 2025 16:37
@ulivz ulivz merged commit 350364d into main Sep 4, 2025
9 of 10 checks passed
@ulivz ulivz deleted the feat/homepage-reuse-message-input branch September 4, 2025 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments