Add see more button to model description

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

@@ -574,10 +574,18 @@ export const formatPrice = (price: number) => {
 }
 
 export const ModelInfoView = ({ selectedModelId, modelInfo }: { selectedModelId: string; modelInfo: ModelInfo }) => {
+	const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 	const isGemini = Object.keys(geminiModels).includes(selectedModelId)
 
 	const infoItems = [
-		modelInfo.description && <ModelDescriptionMarkdown key="description" markdown={modelInfo.description} />,
+		modelInfo.description && (
+			<ModelDescriptionMarkdown
+				key="description"
+				markdown={modelInfo.description}
+				isExpanded={isDescriptionExpanded}
+				setIsExpanded={setIsDescriptionExpanded}
+			/>
+		),
 		<ModelInfoSupportsItem
 			key="supportsImages"
 			isSupported={modelInfo.supportsImages ?? false}

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

@@ -1,14 +1,14 @@
 import { VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import Fuse from "fuse.js"
-import React, { memo, useEffect, useMemo, useRef, useState, KeyboardEvent } from "react"
+import React, { KeyboardEvent, memo, useEffect, useMemo, useRef, useState } from "react"
 import { useRemark } from "react-remark"
 import { useMount } from "react-use"
 import styled from "styled-components"
+import { openRouterDefaultModelId } from "../../../../src/shared/api"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
-import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 import { highlight } from "../history/HistoryView"
-import { openRouterDefaultModelId } from "../../../../src/shared/api"
+import { ModelInfoView, normalizeApiConfiguration } from "./ApiOptions"
 
 const OpenRouterModelPicker: React.FC = () => {
 	const { apiConfiguration, setApiConfiguration, openRouterModels } = useExtensionState()
@@ -269,16 +269,108 @@ const StyledMarkdown = styled.div`
 	}
 `
 
-export const ModelDescriptionMarkdown = memo(({ markdown, key }: { markdown?: string; key: string }) => {
+export const ModelDescriptionMarkdown = memo(
-	const [reactContent, setMarkdown] = useRemark()
+	({
+		markdown,
+		key,
+		isExpanded,
+		setIsExpanded,
+	}: {
+		markdown?: string
+		key: string
+		isExpanded: boolean
+		setIsExpanded: (isExpanded: boolean) => void
+	}) => {
+		const [reactContent, setMarkdown] = useRemark()
+		// const [isExpanded, setIsExpanded] = useState(false)
+		const [showSeeMore, setShowSeeMore] = useState(false)
+		const textContainerRef = useRef<HTMLDivElement>(null)
+		const textRef = useRef<HTMLDivElement>(null)
 
-	useEffect(() => {
+		useEffect(() => {
-		setMarkdown(markdown || "")
+			setMarkdown(markdown || "")
-	}, [markdown, setMarkdown])
+		}, [markdown, setMarkdown])
 
-	return (
+		useEffect(() => {
-		<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 5 }}>
+			if (textRef.current && textContainerRef.current) {
-			{reactContent}
+				const { scrollHeight } = textRef.current
-		</StyledMarkdown>
+				const { clientHeight } = textContainerRef.current
-	)
+				const isOverflowing = scrollHeight > clientHeight
-})
+				setShowSeeMore(isOverflowing)
+				// if (!isOverflowing) {
+				// 	setIsExpanded(false)
+				// }
+			}
+		}, [reactContent, setIsExpanded])
+
+		return (
+			<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 5 }}>
+				<div
+					ref={textContainerRef}
+					style={{
+						overflowY: isExpanded ? "auto" : "hidden",
+						position: "relative",
+						wordBreak: "break-word",
+						overflowWrap: "anywhere",
+					}}>
+					<div
+						ref={textRef}
+						style={{
+							display: "-webkit-box",
+							WebkitLineClamp: isExpanded ? "unset" : 3,
+							WebkitBoxOrient: "vertical",
+							overflow: "hidden",
+							// whiteSpace: "pre-wrap",
+							// wordBreak: "break-word",
+							// overflowWrap: "anywhere",
+						}}>
+						{reactContent}
+					</div>
+					{!isExpanded && showSeeMore && (
+						<div
+							style={{
+								position: "absolute",
+								right: 0,
+								bottom: 0,
+								display: "flex",
+								alignItems: "center",
+							}}>
+							<div
+								style={{
+									width: 30,
+									height: "1.2em",
+									background:
+										"linear-gradient(to right, transparent, var(--vscode-sideBar-background))",
+								}}
+							/>
+							<div
+								style={{
+									cursor: "pointer",
+									color: "var(--vscode-textLink-foreground)",
+									paddingRight: 0,
+									paddingLeft: 3,
+									backgroundColor: "var(--vscode-sideBar-background)",
+								}}
+								onClick={() => setIsExpanded(true)}>
+								See more
+							</div>
+						</div>
+					)}
+				</div>
+				{/* {isExpanded && showSeeMore && (
+				<div
+					style={{
+						cursor: "pointer",
+						color: "var(--vscode-textLink-foreground)",
+						marginLeft: "auto",
+						textAlign: "right",
+						paddingRight: 2,
+					}}
+					onClick={() => setIsExpanded(false)}>
+					See less
+				</div>
+			)} */}
+			</StyledMarkdown>
+		)
+	}
+)