refactor(webview): 重构输入组件并优化消息渲染与权限处理

- 将 Composer 组件重命名并替换为 InputPrompt，增加附件支持和粘贴处理
- 移除消息中的 html 字段，统一使用 content 字段存储文本内容
- 调整 ChatProvider 和路由层消息格式，去除多余的 renderMarkdown 调用
- 在 PlanRenderer 中支持有序列表任务项标记及图标展示优化
- 优化 DiffPreview 组件样式，增加换行与边距调整
- PermissionPrompt 改进权限决策映射，明确允许或拒绝权限权限类型
- Markdown 组件集成 highlight.js 和 taskLists 支持代码高亮及任务列表
- 向 body 标签添加 data-vscode-context 属性，防止默认上下文菜单项
- 更新单元测试适配 InputPrompt 组件及修改消息测试去除 html 内容
- 调整 SkillsTags、ThinkingBubble、ToolBubble 和 SystemBubble 等组件样式和结构
- 移除 extension 中 markdown-it 实例及相关渲染逻辑，保证消息内容安全文本渲染
- 升级 package.json 添加 highlight.js 和 markdown-it-task-lists 依赖支持新功能

Author: hqwlkj

package-lock.json

@@ -48,5 +48,8 @@
     "tsx": "^4.21.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.2"
+  },
+  "dependencies": {
+    "@adobe/css-tools": "^4.5.0"
   }
 }

package.json

@@ -73,7 +73,8 @@ export function createOpenAIClient(projectRoot: string = process.cwd()): {
     apiKey: settings.apiKey,
     baseURL: settings.baseURL || undefined,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    fetch: (url: any, init: any) => undiciFetch(url, { ...init, dispatcher: keepAliveAgent }),
+    fetch: ((url: any, init: any) =>
+      undiciFetch(url, { ...init, dispatcher: keepAliveAgent })) as unknown as typeof fetch,
   });
   cachedOpenAIKey = cacheKey;
 

packages/core/src/common/openai-client.ts

@@ -102,8 +102,10 @@
     "@webview-rpc/react-query": "^1.0.17",
     "cmdk": "^1.1.1",
     "framer-motion": "^12.42.2",
+    "highlight.js": "^11.11.1",
     "lucide-react": "^1.21.0",
     "markdown-it": "^14.2.0",
+    "markdown-it-task-lists": "^2.1.1",
     "radix-ui": "^1.6.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

packages/vscode-ide-companion/package.json

@@ -3,7 +3,6 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 import * as os from "node:os";
 import OpenAI from "openai";
-import MarkdownIt from "markdown-it";
 import type { SessionMessage } from "@vegamo/deepcode-core";
 import {
   SessionManager,
@@ -32,27 +31,21 @@ export class DeepCodeViewProvider implements vscode.WebviewViewProvider {
 
   private readonly context: vscode.ExtensionContext;
   private webviewView: vscode.WebviewView | undefined;
-  private readonly md: MarkdownIt;
   private readonly sessionManager: SessionManager;
 
   constructor(context: vscode.ExtensionContext) {
     this.context = context;
-    this.md = new MarkdownIt({
-      html: false,
-      linkify: false,
-      breaks: true,
-    });
     this.sessionManager = new SessionManager({
       projectRoot: this.getWorkspaceRoot(),
       createOpenAIClient: () => this.createOpenAIClient(),
       getResolvedSettings: () => this.resolveCurrentSettings(),
-      renderMarkdown: (text) => this.md.render(text),
+      renderMarkdown: (text) => text,
       onAssistantMessage: (message: SessionMessage, shouldConnect: boolean) => {
         if (!this.webviewView) return;
-        if (message.visible === false) return;
+        if (!message.visible) return;
         if (message.role !== "tool") {
           const reasoningContent = (message.messageParams as ReasoningMessageParams | null)?.reasoning_content;
-          message.html = this.md.render(message.content || reasoningContent || "");
+          message.content = message.content || reasoningContent || "";
         }
         this.webviewView.webview.postMessage({ type: "appendMessage", message, shouldConnect });
       },
@@ -100,7 +93,6 @@ export class DeepCodeViewProvider implements vscode.WebviewViewProvider {
     const rpcContext: RouterContext = {
       sessionManager: this.sessionManager,
       postMessage: (message) => this.webviewView?.webview.postMessage(message),
-      renderMarkdown: (text) => this.md.render(text),
       copyToClipboard: (text) => void vscode.env.clipboard.writeText(text),
       openFileInEditor: (filePath, line) => this.openFileInEditor(filePath, line),
       getWorkspaceRoot: () => this.getWorkspaceRoot(),

packages/vscode-ide-companion/src/extension.ts

@@ -74,7 +74,7 @@ function createDevHTML(nonce: string, uris: DevUris, csp: string): string {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Deep Code (Dev)</title>
         </head>
-        <body>
+        <body data-vscode-context='{"preventDefaultContextMenuItems": true}'>
         <div id="root"></div>
 
         <script type="module" nonce="${nonce}">

packages/vscode-ide-companion/src/getWebviewContent.ts

@@ -5,7 +5,6 @@ import type { SessionManager, SkillInfo, UserToolPermission, PermissionScope } f
 export interface RouterContext {
   sessionManager: SessionManager;
   postMessage: (message: unknown) => void;
-  renderMarkdown: (text: string) => string;
   copyToClipboard: (text: string) => void;
   openFileInEditor: (filePath: string, line: number) => Promise<void>;
   getWorkspaceRoot: () => string;
@@ -81,9 +80,7 @@ export const appRouter = router({
           content: m.content,
           html:
             m.role !== "tool"
-              ? ctx.renderMarkdown(
-                  m.content || (m.messageParams as { reasoning_content?: string } | null)?.reasoning_content || ""
-                )
+              ? m.content || (m.messageParams as { reasoning_content?: string } | null)?.reasoning_content || ""
               : undefined,
           meta: m.meta,
         }));
@@ -145,7 +142,8 @@ export const appRouter = router({
 
     try {
       const userPrompt = {
-        text: prompt,
+        type: "userPrompt",
+        prompt: prompt,
         skills: skills.length > 0 ? (skills as SkillInfo[]) : undefined,
         imageUrls: normalizedImages.length > 0 ? normalizedImages : undefined,
         permissions: permissions && permissions.length > 0 ? (permissions as UserToolPermission[]) : undefined,
@@ -158,7 +156,7 @@ export const appRouter = router({
       const message = error instanceof Error ? error.message : String(error);
       ctx.postMessage({
         type: "assistant",
-        html: ctx.renderMarkdown(`Request failed: ${message}`),
+        content: `Request failed: ${message}`,
       });
       return { ok: false, error: message };
     } finally {
@@ -197,13 +195,7 @@ export const appRouter = router({
         .filter((m) => m.visible)
         .map((m) => ({
           role: m.role,
-          content: m.content,
-          html:
-            m.role !== "tool"
-              ? ctx.renderMarkdown(
-                  m.content || (m.messageParams as { reasoning_content?: string } | null)?.reasoning_content || ""
-                )
-              : undefined,
+          content: m.content || (m.messageParams as { reasoning_content?: string } | null)?.reasoning_content || "",
           meta: m.meta,
         })),
     };

packages/vscode-ide-companion/src/router.ts

@@ -1,6 +1,6 @@
 import Header from "@/webview/components/Header";
 import Messages from "@/webview/components/Messages";
-import Composer from "@/webview/components/Composer";
+import InputPrompt from "@/webview/components/InputPrompt";
 import ThinkingLiveBubble from "@/webview/components/ThinkingLiveBubble";
 import PermissionPrompt from "@/webview/components/PermissionPrompt";
 import { useChat } from "@/webview/context/ChatProvider";
@@ -40,7 +40,7 @@ export default function App() {
           shouldConnect={state.lastMessageRole !== null && state.lastMessageRole !== "user"}
         />
       )}
-      <Composer
+      <InputPrompt
         loading={state.loading}
         selectedSkills={state.selectedSkills}
         availableSkills={state.skills}

packages/vscode-ide-companion/src/webview/App.tsx

@@ -16,6 +16,7 @@ import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "./ui/card";
 import { buildAskUserQuestionReply } from "@/webview/utils";
+import { useChat } from "@/webview/context";
 
 interface QuestionOption {
   label: string;
@@ -66,6 +67,7 @@ const formSchema = z.object({
 export type AnswerFormValues = z.infer<typeof formSchema>;
 
 export default function AskUserQuestion({ toolData }: AskUserQuestionProps) {
+  const { actions } = useChat();
   const questions = toolData.metadata?.questions || [];
 
   const form = useForm<AnswerFormValues>({
@@ -99,8 +101,9 @@ export default function AskUserQuestion({ toolData }: AskUserQuestionProps) {
         return;
       }
       // sendUserPromptText(reply.text);
+      actions.sendPrompt(reply?.text || "");
     },
-    [form]
+    [form, actions]
   );
 
   if (questions.length === 0) {
@@ -144,7 +147,7 @@ export default function AskUserQuestion({ toolData }: AskUserQuestionProps) {
                           />
                           <FieldContent>
                             <FieldLabel htmlFor={`q-${qIdx}-${optIdx}`}>
-                              <span className="font-medium">{opt.label}</span>
+                              <span className="font-medium cursor-pointer">{opt.label}</span>
                             </FieldLabel>
                             {opt.description && (
                               <FieldDescription className="block text-xs text-muted-foreground">

packages/vscode-ide-companion/src/webview/components/AskUserQuestion.tsx

@@ -30,12 +30,12 @@ export default function DiffPreview({ toolData }: DiffPreviewProps) {
 
   return (
     <div className="space-y-2">
-      {toolData.output && <div className="text-xs text-muted-foreground">{toolData.output.trim()}</div>}
+      {toolData.output && <div className="text-xs text-muted-foreground pl-3">{toolData.output.trim()}</div>}
 
-      <div className="flex items-center gap-2 text-xs">
+      <div className="flex items-center gap-2 text-xs pl-3">
         <span className="text-muted-foreground">File</span>
         <Button
-          type="button"
+          variant="link"
           className="text-(--vscode-textLink-foreground) hover:underline cursor-pointer border-none bg-transparent p-0 text-xs truncate"
           title={meta.file_path}
         >
@@ -58,7 +58,7 @@ export default function DiffPreview({ toolData }: DiffPreviewProps) {
               return (
                 <div key={i} className={`flex px-2 py-0.5 ${cls}`}>
                   <span className="w-4 shrink-0 select-none">{prefix}</span>
-                  <span className="truncate">{line.slice(1)}</span>
+                  <div className="w-auto text-wrap break-all flex-1">{line.slice(1)}</div>
                 </div>
               );
             })}