feat: add collapsed code snippet display in chat input

[roomote]

This PR attempts to address Issue #10085.

Summary

Implements a feature to show code context as compact chips in the chat input box rather than displaying full code text. When selecting code and adding to context via the "Add to Roo Code" code action, it now appears as a collapsed chip showing the file path and line range (e.g., file.ts:1-10).

Changes

New Files

• packages/types/src/code-snippet.ts - CodeSnippet type and helper functions for:
  • Creating unique IDs
  • Formatting labels (fileName:startLine-endLine)
  • Expanding snippets to full markdown code blocks
• webview-ui/src/components/chat/CodeSnippetChip.tsx - Compact chip component for collapsed display

Modified Files

• packages/types/src/index.ts - Export code-snippet module
• src/shared/ExtensionMessage.ts - Add addCodeSnippet invoke type and codeSnippet field
• src/core/webview/ClineProvider.ts - Send structured CodeSnippet instead of formatted text
• webview-ui/src/components/chat/ChatView.tsx - Handle code snippet state and expand on send
• webview-ui/src/components/chat/ChatTextArea.tsx - Display code snippet chips

Features

• Code snippets appear as compact chips showing fileName:startLine-endLine
• Multiple code snippets can be added
• Each chip has a remove button
• Full code content is expanded when sending to AI
• Prevents duplicate snippets (same file/lines)

How It Works

1. User selects code and uses "Add to Roo Code" context menu
2. Extension creates a CodeSnippet object with file path, line range, and content
3. Chip is displayed in the chat input area
4. When sending message, snippets are expanded to full markdown code blocks and prepended

Feedback and guidance are welcome!

---

Important

Adds feature to display code snippets as compact chips in chat input, enhancing UI by preventing clutter from large code blocks.

• Behavior:
  • Code snippets added via "Add to Roo Code" appear as collapsed chips in chat input, showing fileName:startLine-endLine.
  • Multiple snippets can be added, each with a remove button.
  • Full code content is expanded when sending to AI.
  • Prevents duplicate snippets (same file/lines).
• Components:
  • CodeSnippetChip and CodeSnippetChips in CodeSnippetChip.tsx for displaying and managing snippet chips.
  • ChatTextArea.tsx and ChatView.tsx updated to handle code snippet state and display.
• Types and Functions:
  • CodeSnippet type and helper functions in code-snippet.ts for ID creation, label formatting, and snippet expansion.
  • Tests for code-snippet.ts in code-snippet.test.ts.
• Integration:
  • ClineProvider.ts modified to send structured CodeSnippet objects.
  • ExtensionMessage.ts updated to include addCodeSnippet invoke type and codeSnippet field.

^{This description was created by for b760452. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Rooviewer   See task on Roo Cloud

Re-reviewed the changes since commit 5e9ea62. All previously flagged issues have been resolved. No new issues found.

• Use substring instead of deprecated substr in packages/types/src/code-snippet.ts
• Replace unsafe type casting with proper Number() conversion in src/core/webview/ClineProvider.ts

Previous reviews

• 5e9ea62: Review #1
• 5e9ea62: Review #2
• 5e9ea62: Review #3
• a88e8bc: Review #4

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

[roomote]

String.prototype.substr() is deprecated. Use substring(2, 11) instead since substr(start, length) is equivalent to substring(start, start + length).

Suggested change

	return `snippet-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
	return `snippet-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`

_{Fix it with Roo Code or mention @roomote and request a fix.}

[roomote]

Rooviewer   See task on Roo Cloud

Re-reviewed the PR. The 2 previously flagged issues remain unresolved:

• Use substring instead of deprecated substr in packages/types/src/code-snippet.ts
• Replace unsafe type casting with proper Number() conversion in src/core/webview/ClineProvider.ts

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

[roomote]

Rooviewer   See task on Roo Cloud

Re-reviewed the PR. No new issues found. The 2 previously flagged issues remain unresolved:

• Use substring instead of deprecated substr in packages/types/src/code-snippet.ts
• Replace unsafe type casting with proper Number() conversion in src/core/webview/ClineProvider.ts

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}