shortened ChatView.tsx

fixed wrong html formatting for prompt suggestion
blakkd · Feb 20, 2025 · 3b35414 · 3b35414
1 parent eb09c47
commit 3b35414
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -4,20 +4,26 @@ This fork focuses solely on compressing the system prompt to make Cline accessib
 
 With this lightened system prompt, locally loaded models such as:
 
-- **[Qwen2.5-Coder-32B-Instruct](https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct)**: Tested with Q4_K_M quantization and offering good overall performance
-- **[Mistral-Small-24B-Instruct](https://huggingface.co/bartowski/Mistral-Small-24B-Instruct)**: Finetuned for tools use, making it a useful "Jarvis" assistant. Tested with Q5_K_L quantization
+- **[Qwen2.5-Coder-32B-Instruct](https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct)** - Tested with Q4_K_M quantization and offering good overall performance
+- **[Mistral-Small-24B-Instruct](https://huggingface.co/bartowski/Mistral-Small-24B-Instruct)** - Finetuned for tools use, making it a useful "Jarvis" assistant. Tested with Q5_K_L quantization
 
 Additionally, reasoning models like:
 
-- **[FuseO1's models\*](https://huggingface.co/collections/FuseAI/fuseo1-preview-678eb56093649b2688bc9977)**: Tested with Q4_K_M quantization. Flash and coder variants can complement each other
+- **[FuseO1's models\*](https://huggingface.co/collections/FuseAI/fuseo1-preview-678eb56093649b2688bc9977)** - Tested with Q4_K_M quantization. Flash and coder variants can complement each other
+- **[Mistral-Small-24B-Instruct-2501-reasoning](https://huggingface.co/yentinglin/Mistral-Small-24B-Instruct-2501-reasoning/)** - Not tested yet
 
 can now power Cline too!
 
 For more about Cline, visit their [repository](https://github.com/cline/cline).
 
 PS: Note that web scraping is only available for Claude.
 
+
 \* Recommended system prompt:
 
 `When replying, always format your reply with <think>{Reasoning}</think>{Response}.
 Match your effort to the task. And when it gets tough, take as long as you need to think before you start answering.`
+
+or just
+
+`Match your effort to the task. And when it gets tough, take as long as you need to think before you start answering.`
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
@@ -793,39 +793,60 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					<div style={{ padding: "0 20px", flexShrink: 0 }}>
 						<h2>What can I do for you?</h2>
 						<p>
-							This Cline fork only focuses on prompt compression, to make it usable on memory restricted
-							environments. Locally loaded models like
-							<VSCodeLink
-								href="https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct-GGUF"
-								style={{ display: "inline" }}>
-								Qwen2.5-Coder-32B-Instruct
-							</VSCodeLink>
-							and
-							<VSCodeLink
-								href="https://huggingface.co/bartowski/Mistral-Small-24B-Instruct-2501-GGUF"
-								style={{ display: "inline" }}>
-								Mistral-Small-24B-Instruct
-							</VSCodeLink>
-							and even reasoning models like
-							<VSCodeLink
-								href="https://huggingface.co/collections/FuseAI/fuseo1-preview-678eb56093649b2688bc9977"
-								style={{ display: "inline" }}>
-								FuseO1's models*
-							</VSCodeLink>
-							can now power Cline too! But note web scraping mode is only available for Claude.
+							This fork focuses solely on compressing the system prompt to make Cline accessible to local inference.
+							The prompt has been shortened as much as possible while preserving the original information.
 						</p>
-						<p style={{ fontSize: "0.8em", margin: "5px 0 0" }}>
-							{`* Recommended system prompt:
-<br />
-						<code>When replying, always format your reply with &lt;think&gt;{{Reasoning}}&lt;/think&gt;{Response}.</code>
-						<br />
-Match your effort to the task. And when it gets tough, take as long as you need to think before you start answering.`}
+						<p>Locally loaded models such as:</p>
+						<ul>
+							<li>
+								<strong>
+									<a href="https://huggingface.co/Qwen/Qwen2.5-Coder-32B-Instruct" target="_blank">
+										Qwen2.5-Coder-32B-Instruct
+									</a>
+								</strong>
+							</li>
+							<li>
+								<strong>
+									<a href="https://huggingface.co/bartowski/Mistral-Small-24B-Instruct" target="_blank">
+										Mistral-Small-24B-Instruct
+									</a>
+								</strong>
+							</li>
+						</ul>
+						<p>Additionally, reasoning models like:</p>
+						<ul>
+							<li>
+								<strong>
+									<a
+										href="https://huggingface.co/collections/FuseAI/fuseo1-preview-678eb56093649b2688bc9977"
+										target="_blank">
+										FuseO1's models
+									</a>
+									*
+								</strong>
+							</li>
+							<li>
+								<strong>
+									<a
+										href="https://huggingface.co/yentinglin/Mistral-Small-24B-Instruct-2501-reasoning/"
+										target="_blank">
+										Mistral-Small-24B-Instruct-2501-reasoning
+									</a>
+								</strong>
+							</li>
+						</ul>
+						<p>can now power Cline too!</p>
+						<p>That said, note that the browser tool is only available for Claude.</p>
+						<p></p>
+						<p style={{ fontSize: "0.8em" }}>* Recommended system prompt:</p>
+						<p style={{ fontSize: "0.8em" }}>
+							Match your effort to the task. And when it gets tough, take as long as you need to think before you
+							start answering.
 						</p>
 					</div>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
 			)}
-
 			{/* 
 			// Flex layout explanation:
 			// 1. Content div above uses flex: "1 1 0" to:

diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
@@ -82,11 +82,7 @@ const WelcomeView = () => {
 						can now power Cline too! But note web scraping mode is only available for Claude.
 					</p>
 					<p style={{ fontSize: "0.8em", margin: "5px 0 0" }}>
-						{`* Recommended system prompt:
-<br />
-						<code>When replying, always format your reply with &lt;think&gt;{{Reasoning}}&lt;/think&gt;{Response}.</code>
-						<br />
-Match your effort to the task. And when it gets tough, take as long as you need to think before you start answering.`}
+						{`* Recommended system prompt: Match your effort to the task. And when it gets tough, take as long as you need to think before you start answering.`}
 					</p>
 				</div>
 				<div