add new setting view for UI settings, support markdown block lineheight

Author: KrabsWong

evals/packages/types/src/roo-code-defaults.ts

@@ -8,6 +8,7 @@ export const rooCodeDefaults: RooCodeSettings = {
 
 	pinnedApiConfigs: {},
 
+	markdownBlockLineheight: 1.25,
 	autoApprovalEnabled: true,
 	alwaysAllowReadOnly: true,
 	alwaysAllowReadOnlyOutsideWorkspace: false,

evals/packages/types/src/roo-code.ts

@@ -731,6 +731,7 @@ export const globalSettingsSchema = z.object({
 	customInstructions: z.string().optional(),
 	taskHistory: z.array(historyItemSchema).optional(),
 
+	markdownBlockLineheight: z.number().optional(),
 	autoApprovalEnabled: z.boolean().optional(),
 	alwaysAllowReadOnly: z.boolean().optional(),
 	alwaysAllowReadOnlyOutsideWorkspace: z.boolean().optional(),
@@ -810,6 +811,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customInstructions: undefined,
 	taskHistory: undefined,
 
+	markdownBlockLineheight: undefined,
 	autoApprovalEnabled: undefined,
 	alwaysAllowReadOnly: undefined,
 	alwaysAllowReadOnlyOutsideWorkspace: undefined,

src/core/webview/ClineProvider.ts

@@ -1268,6 +1268,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			maxReadFileLine,
 			terminalCompressProgressBar,
 			historyPreviewCollapsed,
+			markdownBlockLineheight,
 		} = await this.getState()
 
 		const telemetryKey = process.env.POSTHOG_API_KEY
@@ -1356,6 +1357,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			terminalCompressProgressBar: terminalCompressProgressBar ?? true,
 			hasSystemPromptOverride,
 			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
+			markdownBlockLineheight: markdownBlockLineheight ?? 1.25,
 		}
 	}
 
@@ -1446,6 +1448,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
 			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false,
+			markdownBlockLineheight: stateValues.markdownBlockLineheight ?? 1.25,
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -894,6 +894,10 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("maxReadFileLine", message.value)
 			await provider.postStateToWebview()
 			break
+		case "markdownBlockLineheight":
+			await updateGlobalState("markdownBlockLineheight", message.value ?? 1.25)
+			await provider.postStateToWebview()
+			break
 		case "setHistoryPreviewCollapsed": // Add the new case handler
 			await updateGlobalState("historyPreviewCollapsed", message.bool ?? false)
 			// No need to call postStateToWebview here as the UI already updated optimistically

src/exports/roo-code.d.ts

@@ -56,6 +56,7 @@ type GlobalSettings = {
 				workspace?: string | undefined
 		  }[]
 		| undefined
+	markdownBlockLineheight: number | undefined
 	autoApprovalEnabled?: boolean | undefined
 	alwaysAllowReadOnly?: boolean | undefined
 	alwaysAllowReadOnlyOutsideWorkspace?: boolean | undefined

src/exports/types.ts

@@ -56,6 +56,7 @@ type GlobalSettings = {
 				workspace?: string | undefined
 		  }[]
 		| undefined
+	markdownBlockLineheight?: number | undefined
 	autoApprovalEnabled?: boolean | undefined
 	alwaysAllowReadOnly?: boolean | undefined
 	alwaysAllowReadOnlyOutsideWorkspace?: boolean | undefined

src/schemas/index.ts

@@ -735,6 +735,7 @@ export const globalSettingsSchema = z.object({
 	customInstructions: z.string().optional(),
 	taskHistory: z.array(historyItemSchema).optional(),
 
+	markdownBlockLineheight: z.number().optional(),
 	autoApprovalEnabled: z.boolean().optional(),
 	alwaysAllowReadOnly: z.boolean().optional(),
 	alwaysAllowReadOnlyOutsideWorkspace: z.boolean().optional(),
@@ -815,6 +816,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customInstructions: undefined,
 	taskHistory: undefined,
 
+	markdownBlockLineheight: undefined,
 	autoApprovalEnabled: undefined,
 	alwaysAllowReadOnly: undefined,
 	alwaysAllowReadOnlyOutsideWorkspace: undefined,

src/shared/ExtensionMessage.ts

@@ -70,6 +70,7 @@ export interface ExtensionMessage {
 		| "commandExecutionStatus"
 		| "vsCodeSetting"
 		| "condenseTaskContextResponse"
+		| "markdownBlockLineheight"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -170,6 +171,7 @@ export type ExtensionState = Pick<
 	| "customModePrompts"
 	| "customSupportPrompts"
 	| "enhancementApiConfigId"
+	| "markdownBlockLineheight"
 > & {
 	version: string
 	clineMessages: ClineMessage[]

src/shared/WebviewMessage.ts

@@ -132,6 +132,7 @@ export interface WebviewMessage {
 		| "toggleApiConfigPin"
 		| "setHistoryPreviewCollapsed"
 		| "condenseTaskContextRequest"
+		| "markdownBlockLineheight"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

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

@@ -55,7 +55,7 @@ const remarkUrlToLink = () => {
 	}
 }
 
-const StyledMarkdown = styled.div`
+const StyledMarkdown = styled.div<{ lineheight: number | string }>`
 	code:not(pre > code) {
 		font-family: var(--vscode-editor-font-family, monospace);
 		filter: saturation(110%) brightness(95%);
@@ -95,7 +95,7 @@ const StyledMarkdown = styled.div`
 	li,
 	ol,
 	ul {
-		line-height: 1.25;
+		line-height: ${(props) => props.lineheight};
 	}
 
 	ol,
@@ -122,7 +122,7 @@ const StyledMarkdown = styled.div`
 `
 
 const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
-	const { theme } = useExtensionState()
+	const { theme, markdownBlockLineheight } = useExtensionState()
 	const [reactContent, setMarkdown] = useRemark({
 		remarkPlugins: [
 			remarkUrlToLink,
@@ -229,7 +229,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 
 	return (
 		<div style={{}}>
-			<StyledMarkdown>{reactContent}</StyledMarkdown>
+			<StyledMarkdown lineheight={markdownBlockLineheight || 1.25}>{reactContent}</StyledMarkdown>
 		</div>
 	)
 })