✨ feat(vscode): 支持讨论评论引用与 macOS 系统级新评论桌面提醒

vscode/webview-ui/src/components/IssueChatPanel.tsx

@@ -1,8 +1,11 @@
 import type { IssueChatComment } from '../lib/messages'
 import type { Issue } from '../types'
-import { ExternalLink, Loader2, MessageCircle, RotateCw, Send } from 'lucide-react'
+import type { ParsedCommentQuote } from './commentQuote'
+import { ExternalLink, Loader2, MessageCircle, Quote, RotateCw, Send, X } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
+
 import { onMessage, postMessage } from '../lib/vscode'
+import { parseCommentQuote } from './commentQuote'
 
 export interface IssueChatPanelProps {
   issue: Issue | null
@@ -51,18 +54,53 @@ function ChatMessageBubble({
   comment,
   isMine,
   avatarSrc,
+  onQuote,
 }: {
   comment: IssueChatComment
   isMine: boolean
   avatarSrc?: string
+  onQuote: (comment: IssueChatComment) => void
 }) {
   const timeStr = formatCommentTime(comment.createdAt)
+  const { quote, replyText } = parseCommentQuote(comment.body)
+
+  const quoteBlock = quote && (
+    <div
+      className={`mb-1.5 rounded-r border-l-2 px-2 py-1 text-[11px] leading-relaxed select-text ${
+        isMine
+          ? 'border-l-blue-300 bg-white/10 text-white/90'
+          : 'border-l-[var(--vscode-focusBorder,#0078d4)] bg-black/15 dark:bg-white/5 text-[var(--vscode-descriptionForeground,#9d9d9d)]'
+      }`}
+    >
+      <span className="font-medium text-[var(--vscode-foreground)]">
+        {quote.author ? `${quote.author}: ` : ''}
+      </span>
+      <span className="whitespace-pre-wrap break-words opacity-85">
+        {quote.text}
+      </span>
+    </div>
+  )
+
+  const bodyBlock = (
+    <div className="whitespace-pre-wrap break-words">
+      {replyText || (!quote ? comment.body : '')}
+    </div>
+  )
 
   if (isMine) {
     return (
-      <div className="flex items-start justify-end gap-2 pl-8">
+      <div className="group flex items-start justify-end gap-2 pl-8">
         <div className="flex max-w-[85%] flex-col items-end">
           <div className="mb-1 flex items-center gap-2">
+            <button
+              type="button"
+              data-tooltip="引用"
+              aria-label="引用"
+              onClick={() => onQuote(comment)}
+              className="inline-flex items-center justify-center rounded p-0.5 text-[var(--vscode-descriptionForeground)] opacity-0 transition-opacity hover:bg-black/10 hover:text-[var(--vscode-foreground)] group-hover:opacity-100 dark:hover:bg-white/10"
+            >
+              <Quote className="size-3" />
+            </button>
             <span className="font-mono text-[10px] opacity-60">{timeStr}</span>
             <span className="text-xs font-medium text-[var(--vscode-foreground)]">
               {comment.author}
@@ -71,7 +109,8 @@ function ChatMessageBubble({
             </span>
           </div>
           <div className="whitespace-pre-wrap break-words rounded-md border border-blue-500/50 bg-[#0e3753] px-3 py-2 text-xs leading-relaxed text-[var(--vscode-foreground)]">
-            {comment.body}
+            {quoteBlock}
+            {bodyBlock}
           </div>
         </div>
         <div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--vscode-focusBorder,#0078d4)] text-[10px] font-medium text-white">
@@ -88,7 +127,7 @@ function ChatMessageBubble({
   }
 
   return (
-    <div className="flex items-start justify-start gap-2 pr-8">
+    <div className="group flex items-start justify-start gap-2 pr-8">
       <div className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--vscode-button-secondaryBackground,#3c3c3c)] text-[10px] font-medium text-[var(--vscode-foreground)]">
         {avatarSrc
           ? (
@@ -104,9 +143,19 @@ function ChatMessageBubble({
             {comment.authorName ? `${comment.authorName} (${comment.author})` : comment.author}
           </span>
           <span className="font-mono text-[10px] opacity-60">{timeStr}</span>
+          <button
+            type="button"
+            data-tooltip="引用"
+            aria-label="引用"
+            onClick={() => onQuote(comment)}
+            className="inline-flex items-center justify-center rounded p-0.5 text-[var(--vscode-descriptionForeground)] opacity-0 transition-opacity hover:bg-black/10 hover:text-[var(--vscode-foreground)] group-hover:opacity-100 dark:hover:bg-white/10"
+          >
+            <Quote className="size-3" />
+          </button>
         </div>
         <div className="whitespace-pre-wrap break-words rounded-md border border-[var(--vscode-panel-border,#383838)] bg-[var(--vscode-sideBar-background,#262626)] px-3 py-2 text-xs leading-relaxed text-[var(--vscode-foreground)]">
-          {comment.body}
+          {quoteBlock}
+          {bodyBlock}
         </div>
       </div>
     </div>
@@ -123,11 +172,14 @@ export function IssueChatPanel({
   const [loading, setLoading] = useState(false)
   const [sending, setSending] = useState(false)
   const [input, setInput] = useState('')
+  const [quoting, setQuoting] = useState<ParsedCommentQuote | null>(null)
   const streamEndRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const issueNumber = issue?.number
 
   useEffect(() => {
+    setQuoting(null)
     if (issueNumber == null) {
       setComments([])
       setLoading(false)
@@ -168,17 +220,34 @@ export function IssueChatPanel({
     })
   }
 
+  const handleQuote = (comment: IssueChatComment) => {
+    const { quote, replyText } = parseCommentQuote(comment.body)
+    const quoteText = (replyText || quote?.text || comment.body).trim()
+    setQuoting({
+      author: comment.author,
+      text: quoteText,
+    })
+    textareaRef.current?.focus()
+  }
+
   const handleSend = () => {
     const text = input.trim()
     if (!text || issueNumber == null || sending)
       return
+    let bodyToSend = text
+    if (quoting) {
+      const authorPart = quoting.author ? `@${quoting.author} ` : ''
+      const formattedQuote = quoting.text.split('\n').join('\n> ')
+      bodyToSend = `> ${authorPart}${formattedQuote}\n\n${text}`
+    }
     setSending(true)
     postMessage({
       type: 'issue/comment-post',
       issueNumber,
-      body: text,
+      body: bodyToSend,
     })
     setInput('')
+    setQuoting(null)
   }
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -258,6 +327,7 @@ export function IssueChatPanel({
               comment={comment}
               isMine={isMine}
               avatarSrc={avatarSrc}
+              onQuote={handleQuote}
             />
           )
         })}
@@ -265,30 +335,59 @@ export function IssueChatPanel({
       </div>
 
       {/* 底部输入栏 */}
-      <div className="flex items-end gap-2 border-t border-[var(--vscode-panel-border)] bg-[var(--vscode-sideBar-background,var(--vscode-editor-background))] p-2.5">
-        <textarea
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="发表对此工单的评论…（支持 Markdown，Enter 发送）"
-          rows={1}
-          className="max-h-24 min-h-[32px] flex-1 resize-none rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] px-2.5 py-1.5 text-xs leading-normal text-[var(--vscode-input-foreground)] placeholder:text-[var(--vscode-input-placeholderForeground)] focus:border-[var(--vscode-focusBorder)] focus:outline-none"
-        />
-        <button
-          type="button"
-          onClick={handleSend}
-          disabled={!input.trim() || sending}
-          className="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded bg-[var(--vscode-button-background)] px-3 text-xs font-medium text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50"
-        >
-          {sending
-            ? (
-                <Loader2 className="size-3.5 animate-spin" />
-              )
-            : (
-                <Send className="size-3.5" />
-              )}
-          <span>发送</span>
-        </button>
+      <div className="flex flex-col border-t border-[var(--vscode-panel-border)] bg-[var(--vscode-sideBar-background,var(--vscode-editor-background))] p-2.5">
+        {quoting && (
+          <div className="mb-2 flex items-center justify-between gap-2 rounded border border-[var(--vscode-panel-border,#383838)] bg-[var(--vscode-editor-lineHighlightBackground,rgba(255,255,255,0.04))] px-2.5 py-1 text-xs text-[var(--vscode-foreground)]">
+            <div className="flex min-w-0 items-center gap-1.5 border-l-2 border-l-[var(--vscode-focusBorder,#0078d4)] pl-2">
+              <Quote className="size-3 shrink-0 opacity-60" />
+              <span className="truncate">
+                <span className="font-medium text-[var(--vscode-foreground)]">
+                  引用
+                  {' '}
+                  {quoting.author ? `@${quoting.author}：` : '：'}
+                </span>
+                <span className="opacity-75">
+                  {quoting.text.replace(/\s+/g, ' ')}
+                </span>
+              </span>
+            </div>
+            <button
+              type="button"
+              data-tooltip="取消引用"
+              aria-label="取消引用"
+              onClick={() => setQuoting(null)}
+              className="shrink-0 rounded p-0.5 opacity-60 hover:bg-black/10 hover:opacity-100 dark:hover:bg-white/10"
+            >
+              <X className="size-3.5" />
+            </button>
+          </div>
+        )}
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="发表对此工单的评论…（支持 Markdown，Enter 发送）"
+            rows={1}
+            className="max-h-24 min-h-[32px] flex-1 resize-none rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] px-2.5 py-1.5 text-xs leading-normal text-[var(--vscode-input-foreground)] placeholder:text-[var(--vscode-input-placeholderForeground)] focus:border-[var(--vscode-focusBorder)] focus:outline-none"
+          />
+          <button
+            type="button"
+            onClick={handleSend}
+            disabled={!input.trim() || sending}
+            className="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded bg-[var(--vscode-button-background)] px-3 text-xs font-medium text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50"
+          >
+            {sending
+              ? (
+                  <Loader2 className="size-3.5 animate-spin" />
+                )
+              : (
+                  <Send className="size-3.5" />
+                )}
+            <span>发送</span>
+          </button>
+        </div>
       </div>
     </div>
   )