diff --git a/webview-ui/src/components/ChatTextArea.tsx b/webview-ui/src/components/ChatTextArea.tsx index cab9a2b..be17507 100644 --- a/webview-ui/src/components/ChatTextArea.tsx +++ b/webview-ui/src/components/ChatTextArea.tsx @@ -372,7 +372,7 @@ const ChatTextArea = forwardRef( highlightLayerRef.current.innerHTML = text .replace(/\n$/, "\n\n") .replace(/[<>&]/g, (c) => ({ "<": "<", ">": ">", "&": "&" }[c] || c)) - .replace(mentionRegexGlobal, '$&') + .replace(mentionRegexGlobal, '$&') highlightLayerRef.current.scrollTop = textAreaRef.current.scrollTop highlightLayerRef.current.scrollLeft = textAreaRef.current.scrollLeft diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx index bbbd496..2b928e3 100644 --- a/webview-ui/src/components/TaskHeader.tsx +++ b/webview-ui/src/components/TaskHeader.tsx @@ -351,9 +351,7 @@ export const highlightMentions = (text?: string, withShadow = true) => { return ( + className={withShadow ? "mention-context-highlight-with-shadow" : "mention-context-highlight"}> @{part} ) diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index cf47f52..7544c11 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -143,7 +143,9 @@ vscode-dropdown::part(listbox) { opacity: 0.4; } -.mention-context-highlight { +/* Context mentions */ + +.mention-context-textarea-highlight { background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); border-radius: 3px; box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); @@ -154,13 +156,13 @@ vscode-dropdown::part(listbox) { bottom: -0.5px; */ } -.mention-context-highlight-visible-with-shadow { +.mention-context-highlight { + background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); + border-radius: 3px; +} + +.mention-context-highlight-with-shadow { background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); border-radius: 3px; box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); } - -.mention-context-highlight-visible-without-shadow { - background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent); - border-radius: 3px; -}