Add markdown rendering for model description; fixes

webview-ui/src/components/settings/OpenRouterModelPicker.tsx

@@ -1,9 +1,12 @@
 import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"
 import React, { useMemo } from "react"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 import { useMount } from "react-use"
+import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
+import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
+import { memo, useEffect } from "react"
+import { useRemark } from "react-remark"
+import styled from "styled-components"
 
 interface OpenRouterModelPickerProps {}
 
@@ -27,8 +30,12 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = () => {
 		vscode.postMessage({ type: "refreshOpenRouterModels" })
 	})
 
+	const modelIds = useMemo(() => {
+		return Object.keys(openRouterModels).sort((a, b) => a.localeCompare(b))
+	}, [openRouterModels])
+
 	return (
-		<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+		<>
 			<div className="dropdown-container">
 				<label htmlFor="model-id">
 					<span style={{ fontWeight: 500 }}>Model</span>
@@ -39,7 +46,7 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = () => {
 					onChange={handleModelChange}
 					style={{ width: "100%" }}>
 					<VSCodeOption value="">Select a model...</VSCodeOption>
-					{Object.keys(openRouterModels).map((modelId) => (
+					{modelIds.map((modelId) => (
 						<VSCodeOption
 							key={modelId}
 							value={modelId}
@@ -54,15 +61,48 @@ const OpenRouterModelPicker: React.FC<OpenRouterModelPickerProps> = () => {
 				</VSCodeDropdown>
 			</div>
 
-			{selectedModelInfo.description && (
-				<p style={{ fontSize: "12px", marginTop: "2px", color: "var(--vscode-descriptionForeground)" }}>
-					{selectedModelInfo.description}
-				</p>
-			)}
-
 			<ModelInfoView selectedModelId={selectedModelId} modelInfo={selectedModelInfo} />
-		</div>
+		</>
 	)
 }
 
 export default OpenRouterModelPicker
+
+const StyledMarkdown = styled.div`
+	font-family: var(--vscode-font-family), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	font-size: 12px;
+	color: var(--vscode-descriptionForeground);
+
+	p,
+	li,
+	ol,
+	ul {
+		line-height: 1.25;
+		margin: 0;
+	}
+
+	ol,
+	ul {
+		padding-left: 1.5em;
+		margin-left: 0;
+	}
+
+	p {
+		white-space: pre-wrap;
+	}
+`
+
+export const ModelDescriptionMarkdown = memo(({ markdown, key }: { markdown?: string; key: string }) => {
+	const [reactContent, setMarkdown] = useRemark()
+
+	useEffect(() => {
+		setMarkdown(markdown || "")
+	}, [markdown, setMarkdown])
+
+	return (
+		<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 5 }}>
+			{reactContent}
+		</StyledMarkdown>
+	)
+})