feat(chat): enhance user info display and file path highlighting

Author: mini2s

webview-ui/src/components/chat/BatchFilePermission.tsx

@@ -27,10 +27,10 @@ export const BatchFilePermission = memo(({ files = [], onPermissionResponse, ts
 	return (
 		<div className="pt-[5px]">
 			{/* Individual files */}
-			<div className="flex flex-col gap-0 border border-border rounded-md p-1">
+			<div className="flex flex-col gap-0 border border-border rounded-md p-1 pb-0">
 				{files.map((file) => {
 					return (
-						<div key={`${file.path}-${ts}`} className="flex items-center gap-2">
+						<div key={`${file.path}-${ts}`} className="flex items-center gap-2 mb-[4px]">
 							<ToolUseBlock className="flex-1">
 								<ToolUseBlockHeader
 									onClick={() => vscode.postMessage({ type: "openFile", text: file.content })}>

webview-ui/src/components/chat/ChatRow.tsx

@@ -67,6 +67,7 @@ import {
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { getLine } from "@/utils/path-mentions"
+import { useZgsmUserInfo } from "@/hooks/useZgsmUserInfo"
 
 interface ChatRowProps {
 	message: ClineMessage
@@ -148,8 +149,8 @@ export const ChatRowContent = ({
 	searchQuery,
 }: ChatRowContentProps) => {
 	const { t } = useTranslation()
-
 	const { mcpServers, alwaysAllowMcp, currentCheckpoint, mode, apiConfiguration } = useExtensionState()
+	const { logoPic, userInfo } = useZgsmUserInfo(apiConfiguration)
 	const { info: model } = useSelectedModel(apiConfiguration)
 	const [showCopySuccess, setShowCopySuccess] = useState(false)
 	const [isEditing, setIsEditing] = useState(false)
@@ -1200,15 +1201,29 @@ export const ChatRowContent = ({
 					return (
 						<div className="group">
 							<div style={headerStyle}>
-								<User className="w-4" aria-label="User icon" />
-								<span style={{ fontWeight: "bold" }}>{t("chat:feedback.youSaid")}</span>
+								{logoPic ? (
+									<img
+										src={logoPic}
+										title={userInfo?.name || t("chat:feedback.defaultUserName")}
+										alt={userInfo?.name || t("chat:feedback.defaultUserName")}
+										className="w-6 h-6 rounded-full object-cover"
+									/>
+								) : (
+									<User className="w-4" aria-label="User icon" />
+								)}
+								<span style={{ fontWeight: "bold" }}>
+									{t("chat:feedback.youSaid", {
+										username: userInfo?.name || t("chat:feedback.defaultUserName"),
+									})}
+								</span>
 							</div>
 							<div
 								className={cn(
-									"ml-6 border rounded-sm overflow-hidden whitespace-pre-wrap",
+									"ml-6 border rounded-sm whitespace-pre-wrap",
+									isEditing ? "" : "overflow-hidden",
 									isEditing
 										? "bg-vscode-editor-background text-vscode-editor-foreground"
-										: "cursor-text p-1 bg-vscode-editor-foreground/70 text-vscode-editor-background",
+										: "cursor-text p-1 bg-vscode-editor-foreground/50 text-vscode-editor-background",
 								)}>
 								{isEditing ? (
 									<div className="flex flex-col gap-2">

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -1316,7 +1316,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					<div
 						className={cn(
 							"flex items-center gap-2 min-w-0 overflow-clip flex-1",
-							isEditMode ? "ml-[20px] py-[14px]" : "",
+							isEditMode ? "ml-[42px] py-[14px]" : "",
 						)}>
 						<ModeSelector
 							value={mode}

webview-ui/src/components/chat/Mention.tsx

@@ -11,11 +11,28 @@ export const Mention = ({ text, withShadow = false }: MentionProps) => {
 	if (!text) {
 		return <>{text}</>
 	}
-
+	// Highlight file path with line numbers format: filePath:startLine-endLine
 	const parts = text.split(mentionRegexGlobal).map((part, index) => {
 		if (index % 2 === 0) {
 			// This is regular text.
-			return part
+			const textSegments = part.split(/\b([\w/\\.-]+:\d+-\d+)\b/)
+			return textSegments.map((segment, segmentIndex) => {
+				if (segmentIndex % 2 === 1) {
+					// This is a file path match
+					return (
+						<mark
+							key={`${index}-${segmentIndex}`}
+							className={`mention-context-highlight-with-shadow cursor-pointer`}
+							style={{
+								pointerEvents: "auto",
+								color: "var(--vscode-textPreformat-foreground) !important",
+							}}>
+							{segment}
+						</mark>
+					)
+				}
+				return segment
+			})
 		} else {
 			// This is a mention.
 			return (

webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx

@@ -36,7 +36,7 @@ export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps)
 
 	return (
 		<div className="group flex items-center justify-between gap-2 pt-2 pb-3 ">
-			<div className="flex items-center gap-2 text-blue-400">
+			<div className="flex items-center gap-2 text-blue-400 whitespace-nowrap">
 				<GitCommitVertical className="w-4" />
 				<span className="font-semibold">{t("chat:checkpoint.regular")}</span>
 				{isCurrent && <span className="text-muted">({t("chat:checkpoint.current")})</span>}

webview-ui/src/components/cloud/ZgsmAccountView.tsx

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback } from "react"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 
-import type { ProviderSettings, ZgsmUserInfo } from "@roo-code/types"
+import type { ProviderSettings } from "@roo-code/types"
 import { TelemetryEventName } from "@roo-code/types"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { vscode } from "@src/utils/vscode"
 import { telemetryClient } from "@src/utils/TelemetryClient"
-import axios from "axios"
 import { useEvent } from "react-use"
 import { ExtensionMessage } from "@roo/ExtensionMessage"
+import { useZgsmUserInfo } from "@src/hooks/useZgsmUserInfo"
 
 type AccountViewProps = {
 	apiConfiguration?: ProviderSettings
@@ -18,52 +18,10 @@ type AccountViewProps = {
 
 export const ZgsmAccountView = ({ apiConfiguration, onDone }: AccountViewProps) => {
 	const { t } = useAppTranslation()
-	const [userInfo, setUserInfo] = useState<ZgsmUserInfo | null>(null)
-	const [hash, setHash] = useState("")
-	const [logoPic, setLogoPic] = useState("")
-
-	const wasAuthenticatedRef = useRef(false)
+	const { userInfo, logoPic, hash } = useZgsmUserInfo(apiConfiguration)
 
 	const rooLogoUri = (window as any).COSTRICT_BASE_URI + "/logo.svg"
 
-	// Track authentication state changes to detect successful logout
-	useEffect(() => {
-		const token = apiConfiguration?.zgsmAccessToken
-
-		if (token) {
-			wasAuthenticatedRef.current = true
-
-			const jwt = parseJwt(token)
-
-			const basicInfo: ZgsmUserInfo = {
-				id: jwt.id,
-				name: jwt?.properties?.oauth_GitHub_username || jwt.id,
-				picture: undefined,
-				email: jwt.email,
-				phone: jwt.phone,
-				organizationName: jwt.organizationName,
-				organizationImageUrl: jwt.organizationImageUrl,
-			}
-			setUserInfo(basicInfo)
-
-			if (jwt.avatar) {
-				imageUrlToBase64(jwt.avatar).then((base64) => {
-					if (!base64) return
-					// Step 3: Update userInfo.picture, only update the picture field
-					setLogoPic(base64)
-				})
-			}
-
-			hashToken(token).then((result) => {
-				console.log("New Credit hash: ", result)
-				setHash(result)
-			})
-		} else if (wasAuthenticatedRef.current && !token) {
-			telemetryClient.capture(TelemetryEventName.ACCOUNT_LOGOUT_SUCCESS)
-			wasAuthenticatedRef.current = false
-		}
-	}, [apiConfiguration?.zgsmAccessToken])
-
 	const handleConnectClick = () => {
 		// Send telemetry for account connect action
 		telemetryClient.capture(TelemetryEventName.ACCOUNT_CONNECT_CLICKED)
@@ -193,42 +151,3 @@ export const ZgsmAccountView = ({ apiConfiguration, onDone }: AccountViewProps)
 		</div>
 	)
 }
-
-function parseJwt(token: string) {
-	const parts = token.split(".")
-	if (parts.length !== 3) {
-		throw new Error("Invalid JWT")
-	}
-	const payload = parts[1]
-	const decoded = atob(payload.replace(/-/g, "+").replace(/_/g, "/")) // base64url → base64 → decode
-	return JSON.parse(decoded)
-}
-
-async function hashToken(token: string) {
-	const encoder = new TextEncoder()
-	const data = encoder.encode(token)
-	const hashBuffer = await crypto.subtle.digest("SHA-256", data)
-	return Array.from(new Uint8Array(hashBuffer))
-		.map((b) => b.toString(16).padStart(2, "0"))
-		.join("")
-}
-
-export async function imageUrlToBase64(url: string): Promise<string | null> {
-	try {
-		const response = await axios.get(url, {
-			responseType: "blob", // Key! Ensure axios returns Blob
-		})
-
-		const blob = response.data as Blob
-
-		return await new Promise<string>((resolve, reject) => {
-			const reader = new FileReader()
-			reader.onloadend = () => resolve(reader.result as string)
-			reader.onerror = () => reject("Failed to convert blob to base64")
-			reader.readAsDataURL(blob) // Automatically adds data:image/png;base64,...
-		})
-	} catch (error) {
-		console.error("Failed to convert image to base64", error)
-		return null
-	}
-}

webview-ui/src/components/common/CodeAccordian.tsx

@@ -89,7 +89,7 @@ const CodeAccordian = ({
 			)}
 			{(!hasHeader || isExpanded) && (
 				<div className="overflow-x-auto overflow-y-hidden max-w-full">
-					<CodeBlock source={source} language={inferredLanguage} />
+					<CodeBlock source={source} language={inferredLanguage} onDoubleClick={onToggleExpand} />
 				</div>
 			)}
 		</ToolUseBlock>

webview-ui/src/components/common/CodeBlock.tsx

@@ -39,6 +39,7 @@ interface CodeBlockProps {
 	collapsedHeight?: number
 	initialWindowShade?: boolean
 	onLanguageChange?: (language: string) => void
+	onDoubleClick?: (e: React.MouseEvent) => void
 }
 
 const CodeBlockButton = styled.button`
@@ -222,6 +223,7 @@ const CodeBlock = memo(
 		initialWordWrap = false,
 		initialWindowShade = true,
 		collapsedHeight,
+		onDoubleClick,
 		onLanguageChange,
 	}: CodeBlockProps) => {
 		const [wordWrap, setWordWrap] = useState(initialWordWrap)
@@ -692,7 +694,7 @@ const CodeBlock = memo(
 		}
 
 		return (
-			<CodeBlockContainer ref={codeBlockRef}>
+			<CodeBlockContainer ref={codeBlockRef} onDoubleClick={onDoubleClick}>
 				<MemoizedStyledPre
 					preRef={preRef}
 					preStyle={preStyle}