pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 12:21:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Highlight mentions in task header and messages

Browse Source
This commit is contained in:
Saoud Rizwan
2024-09-17 19:29:07 -04:00
parent 30ed938ded
commit 57b95acd11
3 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webview-ui/src/components/ChatRow.tsx
View File

@@ -8,6 +8,7 @@ import CodeAccordian, { formatFilePathForTruncation } from "./CodeAccordian"
import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock" import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
import Thumbnails from "./Thumbnails" import Thumbnails from "./Thumbnails"
import { vscode } from "../utils/vscode" import { vscode } from "../utils/vscode"
import { highlightMentions } from "./TaskHeader"
interface ChatRowProps { interface ChatRowProps {
message: ClaudeMessage message: ClaudeMessage
@@ -425,7 +426,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
whiteSpace: "pre-line", whiteSpace: "pre-line",
wordWrap: "break-word", wordWrap: "break-word",
}}> }}>
<span style={{ display: "block" }}>{message.text}</span> <span style={{ display: "block" }}>{highlightMentions(message.text)}</span>
{message.images && message.images.length > 0 && ( {message.images && message.images.length > 0 && (
<Thumbnails images={message.images} style={{ marginTop: "8px" }} /> <Thumbnails images={message.images} style={{ marginTop: "8px" }} />
)} )}

25
webview-ui/src/components/TaskHeader.tsx
View File

@@ -148,7 +148,9 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
minWidth: 0, // This allows the div to shrink below its content size minWidth: 0, // This allows the div to shrink below its content size
}}> }}>
<span style={{ fontWeight: "bold" }}>Task{!isTaskExpanded && ":"}</span> <span style={{ fontWeight: "bold" }}>Task{!isTaskExpanded && ":"}</span>
{!isTaskExpanded && <span style={{ marginLeft: 4 }}>{highlightMentions(task.text)}</span>} {!isTaskExpanded && (
<span style={{ marginLeft: 4 }}>{highlightMentions(task.text, false)}</span>
)}
</div> </div>
</div> </div>
{!isTaskExpanded && isCostAvailable && ( {!isTaskExpanded && isCostAvailable && (
@@ -194,7 +196,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
wordBreak: "break-word", wordBreak: "break-word",
overflowWrap: "anywhere", overflowWrap: "anywhere",
}}> }}>
{highlightMentions(task.text)} {highlightMentions(task.text, false)}
</div> </div>
{!isTextExpanded && showSeeMore && ( {!isTextExpanded && showSeeMore && (
<div <div
@@ -337,23 +339,26 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
) )
} }
const highlightMentions = (text?: string) => { export const highlightMentions = (text?: string, withShadow = true) => {
if (!text) return [] if (!text) return text
const parts = text.split(mentionRegexGlobal) const parts = text.split(mentionRegexGlobal)
return parts.reduce((acc, part, index) => { return parts.map((part, index) => {
if (index % 2 === 0) { if (index % 2 === 0) {
// This is regular text // This is regular text
acc.push(part) return part
} else { } else {
// This is a mention // This is a mention
acc.push( return (
<span style={{ backgroundColor: "yellow" }} key={`mention-${index}`}> <span
key={index}
className={`mention-context-highlight-${
withShadow ? "visible-with-shadow" : "visible-without-shadow"
}`}>
@{part} @{part}
</span> </span>
) )
} }
return acc })
}, [] as (string | JSX.Element)[])
} }
const ExportButton = () => ( const ExportButton = () => (

13
webview-ui/src/index.css
View File

@@ -146,7 +146,7 @@ vscode-dropdown::part(listbox) {
.mention-context-highlight { .mention-context-highlight {
background-color: var(--vscode-textLink-activeForeground, #3794ff); background-color: var(--vscode-textLink-activeForeground, #3794ff);
opacity: 0.3; opacity: 0.3;
border-radius: 2px; border-radius: 3px;
box-shadow: 0 0 0 0.5px var(--vscode-textLink-activeForeground, #3794ff); box-shadow: 0 0 0 0.5px var(--vscode-textLink-activeForeground, #3794ff);
color: transparent; color: transparent;
padding: 0.5px; padding: 0.5px;
@@ -154,3 +154,14 @@ vscode-dropdown::part(listbox) {
position: relative; position: relative;
bottom: -0.5px; bottom: -0.5px;
} }
.mention-context-highlight-visible-with-shadow {
background-color: color-mix(in srgb, var(--vscode-badge-foreground) 35%, transparent);
border-radius: 3px;
box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 35%, transparent);
}
.mention-context-highlight-visible-without-shadow {
background-color: color-mix(in srgb, var(--vscode-badge-foreground) 35%, transparent);
border-radius: 3px;
}