dsh-code-server-app 0.3.22 → 0.3.24

package/assets/extensions/dshcs-editor-bridge/webview/src/panel.css

@@ -16,26 +16,33 @@
   color-scheme: light dark;
 }
 
-html,
-body,
-#root {
+/* 面板根容器:
+ *  - webview 形态:body 带 .dshcs-panel(见 lib/ask-panel.js 的外壳 HTML);
+ *  - DSH 页面形态(0.2.5):对话框把 .dshcs-panel 放在自己的容器 div 上,
+ *    所有排版规则都挂在这个类下,**绝不碰 DSH 自己的 body**(注入样式不能改宿主界面)。
+ */
+.dshcs-panel {
   height: 100%;
-}
-
-body {
   margin: 0;
-  /* 官方令牌表会设 body 的背景与前景(DSH 的颜色);面板跟随编辑器主题,所以覆盖掉。 */
-  background: var(--vscode-editor-background);
-  color: var(--vscode-foreground);
-  font-family: var(--vscode-font-family);
+  background: var(--vscode-editor-background, var(--dsw-alias-bg-base, #1e1e1e));
+  color: var(--vscode-foreground, var(--dsw-alias-label-primary, #ccc));
+  font-family: var(--vscode-font-family, var(--dsw-font-family, sans-serif));
   font-size: var(--vscode-font-size, 13px);
   overflow: hidden;
 }
 
+.dshcs-panel #root {
+  height: 100%;
+}
+
 .dshcs-app {
   display: flex;
   flex-direction: column;
   height: 100%;
+  /* 对话框形状(0.2.4):面板开在编辑器区、占满工作台宽度,内容居中限宽。 */
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .dshcs-header {
@@ -48,6 +55,11 @@ body {
   opacity: 0.9;
 }
 
+.dshcs-header .dshcs-title {
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
 .dshcs-header .dshcs-where {
   flex: 1;
   overflow: hidden;
@@ -61,6 +73,60 @@ body {
   font-size: 11px;
 }
 
+.dshcs-header .dshcs-close {
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 4px;
+  opacity: 0.75;
+}
+
+.dshcs-header .dshcs-close:hover {
+  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.2));
+  opacity: 1;
+}
+
+/* ---- 思考行(默认收起;外形照抄官方 ReasoningRow 的排版语言) ---- */
+
+.dshcs-think {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 6px;
+}
+
+.dshcs-think .dshcs-think-separator {
+  flex: none;
+  width: 2px;
+  height: 2px;
+  margin: 0 8px;
+  border-radius: 1px;
+  background: var(--dsw-alias-label-caption, currentColor);
+  display: inline-block;
+}
+
+.dshcs-think .dshcs-think-summary {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+  color: var(--dsw-alias-label-tertiary, var(--vscode-descriptionForeground));
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dshcs-think .dshcs-think-body {
+  padding: 4px 0 4px calc(22px + var(--dsh-content-font-delta, 0px));
+  color: var(--dsw-alias-label-tertiary, var(--vscode-descriptionForeground));
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .dshcs-warn {
   margin: 8px 12px 0;
   padding: 6px 8px;
@@ -94,8 +160,39 @@ body {
   justify-content: flex-end;
 }
 
-.dshcs-bubble {
+/* 用户消息:注入的上下文(折叠行)+ 问题气泡,右对齐成一组。 */
+.dshcs-user-stack {
   max-width: 88%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+}
+
+.dshcs-context .dshcs-context-summary {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+  color: var(--dsw-alias-label-tertiary, var(--vscode-descriptionForeground));
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dshcs-context .dshcs-context-body {
+  margin: 2px 0 4px;
+  padding: 4px 0 4px calc(22px + var(--dsh-content-font-delta, 0px));
+  color: var(--dsw-alias-label-tertiary, var(--vscode-descriptionForeground));
+  font-size: var(--dsh-content-font-size-secondary, 12px);
+  font-family: var(--ds-font-family-code, monospace);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 40vh;
+  overflow: auto;
+}
+
+.dshcs-bubble {
   padding: 6px 10px;
   border-radius: 8px;
   background: var(--vscode-input-background, rgba(128, 128, 128, 0.12));

package/assets/extensions/dshcs-editor-bridge/webview/src/thread.jsx

@@ -1,14 +1,23 @@
-// dshcs-editor-bridge / webview/src/thread.jsx —— 一个对话条目的渲染(0.2.3)
+// dshcs-editor-bridge / webview/src/thread.jsx —— 一个对话条目的渲染(0.2.3 起;0.2.4 加思考行)
 //
 // 助手正文**不再自己排版**:直接调用 DSH 官方渲染器
 // (`@deepseek-ai/dsh-client-ui-primitives` 的 `MarkdownText` —— 与 DSH 界面同一份代码,
 // 同一套 mdast 管线、KaTeX、shiki 高亮、增量流式解析),面板只负责"外壳"。
 //
+// 思考过程(0.2.4):DSH 界面把它渲染成一行可折叠的「思考」(官方 `ReasoningRow` 用的就是
+// `DisclosureRow` + `IconThinkOutline14`,**默认收起**,收起时显示首行 / 流式时的最新一行)。
+// 面板用同一套官方部件重现它,差别只在文案与类名。
+//
 // 用户消息:DSH 界面里用户消息是纯文本气泡,这里保持一致(不渲染 markdown)。
-// 工具 / 授权:面板只给一行紧凑摘要(第 3 阶段的计划:不做逐工具的自定义卡片)。
+// 工具 / 授权:面板只给一行紧凑摘要(不做逐工具的自定义卡片)。
 
-import { memo } from 'react';
-import { MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives';
+import { memo, useState } from 'react';
+import {
+  DisclosureRow,
+  IconContextInjectionOutline16,
+  IconThinkOutline14,
+  MarkdownText,
+} from '@deepseek-ai/dsh-client-ui-primitives';
 
 /** 官方渲染器的界面文案(面板自己给中文;DSH 界面走它自己的 locale)。 */
 const LABELS = { code: { copyLabel: '复制', copiedLabel: '已复制' }, footnotes: '脚注' };
@@ -25,23 +34,93 @@ const APPROVAL_STATE = {
   unavailable: '无人处理',
 };
 
+/** 折叠摘要取首行(还在流式时取最新一行)—— 与官方 ReasoningRow 同一规则。 */
+function summaryLine(text, running) {
+  const source = running ? text.trimEnd() : text;
+  if (source === '') return '';
+  const index = running ? source.lastIndexOf('\n') : source.indexOf('\n');
+  const line = index === -1 ? source : (running ? source.slice(index + 1) : source.slice(0, index));
+  return line.replaceAll('**', '');
+}
+
+/**
+ * 一行「思考」(默认收起,点行即展开)—— 外形与交互照抄官方 `ReasoningRow`。
+ * @param {{text: string, running: boolean}} props running = 这一轮的正文还没开始落
+ */
+function ThinkingRow({ text, running }) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div className="dshcs-think" data-state={running ? 'running' : 'ok'} data-expanded={expanded || undefined}>
+      <DisclosureRow
+        icon={<IconThinkOutline14 size={14} />}
+        title={running ? '思考中' : '思考'}
+        open={expanded}
+        expandable
+        expandOnRowClick
+        onToggle={() => setExpanded((value) => !value)}
+        collapsedContent={(
+          <>
+            <span className="dshcs-think-separator" aria-hidden />
+            <span className="dshcs-think-summary">{summaryLine(text, running)}</span>
+          </>
+        )}
+      >
+        <div className="dshcs-think-body">{text}</div>
+      </DisclosureRow>
+    </div>
+  );
+}
+
+/**
+ * 一行「注入的上下文」(默认收起):桥拼进消息的位置行 + 选区代码块。
+ *
+ * 与 DSH 界面对注入上下文的处理一致 —— 默认折叠,只留一行摘要;点开才看得到那段代码。
+ * 摘要取位置行(第一行),去掉 `From the editor: ` 前缀(标题已经说了"来自编辑器")。
+ */
+function ContextRow({ text }) {
+  const [expanded, setExpanded] = useState(false);
+  const firstLine = text.split('\n')[0] ?? '';
+  const summary = firstLine.replace(/^From the editor:\s*/i, '');
+  return (
+    <div className="dshcs-context" data-expanded={expanded || undefined}>
+      <DisclosureRow
+        icon={<IconContextInjectionOutline16 size={16} />}
+        title="上下文"
+        open={expanded}
+        expandable
+        expandOnRowClick
+        onToggle={() => setExpanded((value) => !value)}
+        collapsedContent={<span className="dshcs-context-summary">{summary}</span>}
+      >
+        <pre className="dshcs-context-body">{text}</pre>
+      </DisclosureRow>
+    </div>
+  );
+}
+
 export const ThreadEntry = memo(function ThreadEntry({ entry }) {
   if (entry.role === 'user') {
+    const context = typeof entry.context === 'string' ? entry.context : '';
     return (
       <div className="dshcs-msg dshcs-user">
-        <div className="dshcs-bubble" data-status={entry.status ?? undefined}>{entry.text}</div>
+        <div className="dshcs-user-stack">
+          {context === '' ? null : <ContextRow text={context} />}
+          <div className="dshcs-bubble" data-status={entry.status ?? undefined}>{entry.text}</div>
+        </div>
       </div>
     );
   }
 
   if (entry.role === 'assistant') {
+    const thinking = typeof entry.thinking === 'string' ? entry.thinking : '';
+    // 正文还没到(整轮都是思考)→ 思考行标"思考中";正文到了就标"思考"(官方同一判据)。
+    const running = entry.streaming === true && entry.text === '';
     return (
       <div className="dshcs-msg dshcs-assistant">
-        <MarkdownText
-          text={entry.text}
-          streaming={entry.streaming === true}
-          labels={LABELS}
-        />
+        {thinking === '' ? null : <ThinkingRow text={thinking} running={running} />}
+        {entry.text === ''
+          ? null
+          : <MarkdownText text={entry.text} streaming={entry.streaming === true} labels={LABELS} />}
       </div>
     );
   }