Add markdown rendering for model description; fixes

2025-12-20 12:21:13 -05:00 · 2024-10-03 21:23:49 -04:00
parent 9ffe01888a
commit f6a14fdfb9
9 changed files with 159 additions and 117 deletions
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -7,7 +7,7 @@ import {
 	VSCodeRadioGroup,
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
-import { memo, useCallback, useEffect, useMemo, useState } from "react"
+import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
 import { useEvent, useInterval } from "react-use"
 import {
 	ApiConfiguration,
@@ -31,7 +31,7 @@ import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
-import OpenRouterModelPicker from "./OpenRouterModelPicker"
+import OpenRouterModelPicker, { ModelDescriptionMarkdown } from "./OpenRouterModelPicker"

 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -440,7 +440,6 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 							marginTop: 3,
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-						You can use any OpenAI compatible API with models that support tool use.{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
 							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts and works
 							best with Claude models. Less capable models may not work as expected.)
@@ -504,12 +503,6 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 							href="https://github.com/ollama/ollama/blob/main/README.md"
 							style={{ display: "inline", fontSize: "inherit" }}>
 							quickstart guide.
-						</VSCodeLink>{" "}
-						You can use any model that supports{" "}
-						<VSCodeLink
-							href="https://ollama.com/search?c=tools"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							tool use.
 						</VSCodeLink>
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
 							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts and works
@@ -570,80 +563,70 @@ export const formatPrice = (price: number) => {

 export const ModelInfoView = ({ selectedModelId, modelInfo }: { selectedModelId: string; modelInfo: ModelInfo }) => {
 	const isGemini = Object.keys(geminiModels).includes(selectedModelId)
-	const isO1 = selectedModelId && selectedModelId.includes("o1")
+
+	const infoItems = [
+		modelInfo.description && <ModelDescriptionMarkdown key="description" markdown={modelInfo.description} />,
+		<ModelInfoSupportsItem
+			key="supportsImages"
+			isSupported={modelInfo.supportsImages ?? false}
+			supportsLabel="Supports images"
+			doesNotSupportLabel="Does not support images"
+		/>,
+		!isGemini && (
+			<ModelInfoSupportsItem
+				key="supportsPromptCache"
+				isSupported={modelInfo.supportsPromptCache}
+				supportsLabel="Supports prompt caching"
+				doesNotSupportLabel="Does not support prompt caching"
+			/>
+		),
+		modelInfo.maxTokens !== undefined && modelInfo.maxTokens > 0 && (
+			<span key="maxTokens">
+				<span style={{ fontWeight: 500 }}>Max output:</span> {modelInfo.maxTokens?.toLocaleString()} tokens
+			</span>
+		),
+		modelInfo.inputPrice !== undefined && modelInfo.inputPrice > 0 && (
+			<span key="inputPrice">
+				<span style={{ fontWeight: 500 }}>Input price:</span> {formatPrice(modelInfo.inputPrice)}/million tokens
+			</span>
+		),
+		modelInfo.supportsPromptCache && modelInfo.cacheWritesPrice && (
+			<span key="cacheWritesPrice">
+				<span style={{ fontWeight: 500 }}>Cache writes price:</span>{" "}
+				{formatPrice(modelInfo.cacheWritesPrice || 0)}/million tokens
+			</span>
+		),
+		modelInfo.supportsPromptCache && modelInfo.cacheReadsPrice && (
+			<span key="cacheReadsPrice">
+				<span style={{ fontWeight: 500 }}>Cache reads price:</span>{" "}
+				{formatPrice(modelInfo.cacheReadsPrice || 0)}/million tokens
+			</span>
+		),
+		modelInfo.outputPrice !== undefined && modelInfo.outputPrice > 0 && (
+			<span key="outputPrice">
+				<span style={{ fontWeight: 500 }}>Output price:</span> {formatPrice(modelInfo.outputPrice)}/million
+				tokens
+			</span>
+		),
+		isGemini && (
+			<span key="geminiInfo" style={{ fontStyle: "italic" }}>
+				* Free up to {selectedModelId && selectedModelId.includes("flash") ? "15" : "2"} requests per minute.
+				After that, billing depends on prompt size.{" "}
+				<VSCodeLink href="https://ai.google.dev/pricing" style={{ display: "inline", fontSize: "inherit" }}>
+					For more info, see pricing details.
+				</VSCodeLink>
+			</span>
+		),
+	].filter(Boolean)
+
 	return (
 		<p style={{ fontSize: "12px", marginTop: "2px", color: "var(--vscode-descriptionForeground)" }}>
-			<ModelInfoSupportsItem
-				isSupported={modelInfo.supportsImages}
-				supportsLabel="Supports images"
-				doesNotSupportLabel="Does not support images"
-			/>
-			<br />
-			{!isGemini && (
-				<>
-					<ModelInfoSupportsItem
-						isSupported={modelInfo.supportsPromptCache}
-						supportsLabel="Supports prompt caching"
-						doesNotSupportLabel="Does not support prompt caching"
-					/>
-					<br />
-				</>
-			)}
-			<span style={{ fontWeight: 500 }}>Max output:</span> {modelInfo?.maxTokens?.toLocaleString()} tokens
-			{modelInfo.inputPrice > 0 && (
-				<>
-					<br />
-					<span style={{ fontWeight: 500 }}>Input price:</span> {formatPrice(modelInfo.inputPrice)}/million
-					tokens
-				</>
-			)}
-			{modelInfo.supportsPromptCache && modelInfo.cacheWritesPrice && modelInfo.cacheReadsPrice && (
-				<>
-					<br />
-					<span style={{ fontWeight: 500 }}>Cache writes price:</span>{" "}
-					{formatPrice(modelInfo.cacheWritesPrice || 0)}/million tokens
-					<br />
-					<span style={{ fontWeight: 500 }}>Cache reads price:</span>{" "}
-					{formatPrice(modelInfo.cacheReadsPrice || 0)}/million tokens
-				</>
-			)}
-			{modelInfo.outputPrice > 0 && (
-				<>
-					<br />
-					<span style={{ fontWeight: 500 }}>Output price:</span> {formatPrice(modelInfo.outputPrice)}/million
-					tokens
-				</>
-			)}
-			{isGemini && (
-				<>
-					<br />
-					<span
-						style={{
-							fontStyle: "italic",
-						}}>
-						* Free up to {selectedModelId && selectedModelId.includes("flash") ? "15" : "2"} requests per
-						minute. After that, billing depends on prompt size.{" "}
-						<VSCodeLink
-							href="https://ai.google.dev/pricing"
-							style={{ display: "inline", fontSize: "inherit" }}>
-							For more info, see pricing details.
-						</VSCodeLink>
-					</span>
-				</>
-			)}
-			{isO1 && (
-				<>
-					<br />
-					<span
-						style={{
-							fontStyle: "italic",
-							color: "var(--vscode-errorForeground)",
-						}}>
-						* This model does not support tool use or system prompts, so Claude Dev uses structured output
-						prompting to achieve similar results. Your mileage may vary.
-					</span>
-				</>
-			)}
+			{infoItems.map((item, index) => (
+				<Fragment key={index}>
+					{item}
+					{index < infoItems.length - 1 && <br />}
+				</Fragment>
+			))}
 		</p>
 	)
 }
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/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>
+	)
+})