Fix truncated URLs in web search results opening broken links

[marksftw]

When web search results are collapsed, URLs were being truncated for display but the truncated text was also used as the href. Now URLs that would be cut by truncation are converted to markdown links that preserve the full URL in the href while showing truncated display text.

Fixes #387

Summary by CodeRabbit

• Bug Fixes
  • Preview truncation for tool and function call outputs now preserves URLs and markdown links, preventing broken or unclickable links when content is shortened.

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

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Adds a helper truncateMarkdownPreservingLinks(text, maxLength) to truncate preview text while preserving full URLs and markdown links; replaces prior ad-hoc truncation in tool call and function call output previews to avoid broken links.

Changes

Cohort / File(s)	Summary
Link-preserving truncation & preview updates frontend/src/components/UnifiedChat.tsx	Added truncateMarkdownPreservingLinks(text, maxLength) to detect plain URLs and markdown links, convert truncated plain-URL tails into markdown links pointing to full URLs, and avoid partial truncation of existing markdown links. Replaced prior simple string truncation in tool call and function_call output previews with truncateMarkdownPreservingLinks(..., 150).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 I nibble text with careful paws,

I tuck full links inside the claws,
When previews shrink, I mend the seam,
No broken URLs—just hop and beam. 🥕🔗

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing truncated URLs in web search results that were opening broken links, which matches the core objective in the PR.
Linked Issues check	✅ Passed	The code changes implement the objective from issue #387 by adding truncateMarkdownPreservingLinks() helper that preserves full URLs while displaying truncated text for web search results.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing truncated URLs in tool call outputs and function call output previews, directly addressing issue #387 without introducing unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b44d30 and 06dab27.

📒 Files selected for processing (1)

• frontend/src/components/UnifiedChat.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Use path aliases (@/* maps to ./src/*) for imports in TypeScript/React files
Use 2-space indentation, double quotes, and enforce 100-character line limit in TypeScript/React code
Maintain strict TypeScript and avoid using any type
Use PascalCase for component names and camelCase for variables and function names
Use functional components with React hooks instead of class components
Use React context for global state management and TanStack Query for server state management
Run just format, just lint, and just build after making TypeScript/React changes to ensure code quality and compilation

Files:

• frontend/src/components/UnifiedChat.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: rust-build (x86_64-linux-android, x86_64_linux_android, X86_64_LINUX_ANDROID, x86_64, x86_64-linu...
• GitHub Check: rust-build (i686-linux-android, i686_linux_android, I686_LINUX_ANDROID, x86, i686-linux-android24...
• GitHub Check: rust-build (armv7-linux-androideabi, armv7_linux_androideabi, ARMV7_LINUX_ANDROIDEABI, armeabi-v7...
• GitHub Check: rust-build (aarch64-linux-android, aarch64_linux_android, AARCH64_LINUX_ANDROID, arm64-v8a, aarch...
• GitHub Check: build-ios
• GitHub Check: build-linux
• GitHub Check: build-macos (universal-apple-darwin)

🔇 Additional comments (2)

frontend/src/components/UnifiedChat.tsx (2)

384-414: Correct integration for web search results.

The helper is properly integrated here, ensuring that truncated web search previews display shortened URLs while maintaining clickable links to the full destination. The markdown rendering via <Markdown content={...}> correctly interprets the generated [truncated...](full-url) syntax.

---

470-496: Consistent handling for standalone tool outputs.

Good consistency with the grouped tool call rendering. Both preview paths now use the same truncation helper, ensuring URLs remain functional regardless of how the tool output is displayed.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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.}

[greptile-apps]

Greptile Summary

Fixed broken links in collapsed web search results by preserving full URLs in markdown link hrefs while showing truncated display text.

• Replaced naive substring truncation with truncateMarkdownPreservingLinks function
• Detects plain URLs that would be cut by truncation and converts them to markdown links [truncated...](full-url)
• Handles existing markdown links by truncating before them to avoid breaking the syntax
• Applied to both web search results and generic tool call outputs at the 150-character limit

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• The fix addresses a clear UX issue with a focused solution. The regex logic correctly identifies plain URLs and markdown links, though the markdown link detection could be more robust for edge cases (already noted in previous thread). The function is well-tested in two call sites and doesn't modify any core logic.
• No files require special attention

Important Files Changed

Filename	Overview
frontend/src/components/UnifiedChat.tsx	Replaced simple truncation with markdown-aware function that converts truncated URLs to markdown links, preserving full hrefs

Sequence Diagram

sequenceDiagram
    participant User
    participant ToolCallRenderer
    participant truncateMarkdownPreservingLinks
    participant Markdown
    
    User->>ToolCallRenderer: View web search result
    ToolCallRenderer->>truncateMarkdownPreservingLinks: truncate(output, 150)
    
    alt Text length <= 150
        truncateMarkdownPreservingLinks-->>ToolCallRenderer: Return original text
    else Contains plain URL that would be truncated
        truncateMarkdownPreservingLinks->>truncateMarkdownPreservingLinks: Find plain URLs
        truncateMarkdownPreservingLinks->>truncateMarkdownPreservingLinks: Check if URL spans truncation point
        truncateMarkdownPreservingLinks->>truncateMarkdownPreservingLinks: Convert to [truncated...](full-url)
        truncateMarkdownPreservingLinks-->>ToolCallRenderer: Return markdown link
    else Contains existing markdown link at truncation point
        truncateMarkdownPreservingLinks->>truncateMarkdownPreservingLinks: Detect markdown link
        truncateMarkdownPreservingLinks->>truncateMarkdownPreservingLinks: Truncate before link
        truncateMarkdownPreservingLinks-->>ToolCallRenderer: Return truncated text + "..."
    else Safe to truncate
        truncateMarkdownPreservingLinks-->>ToolCallRenderer: Return text.substring(0, 150) + "..."
    end
    
    ToolCallRenderer->>Markdown: Render preview
    Markdown-->>User: Display with clickable full URL

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	06dab27
Status:	✅  Deploy successful!
Preview URL:	https://46371433.maple-ca8.pages.dev
Branch Preview URL:	https://linkfix.maple-ca8.pages.dev

View logs

[greptile-apps]

Greptile's behavior is changing!

From now on, if a review finishes with no comments, we will not post an additional "statistics" comment to confirm that our review found nothing to comment on. However, you can confirm that we reviewed your changes in the status check section.

_{This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR".}

[AnthonyRonning]

I think these should move to a utility file