feat: prepare Zhinian desktop pilot

src/pages/Chat/ChatInput.tsx

@@ -6,7 +6,7 @@
  * Files are staged to disk via IPC — only lightweight path references
  * are sent with the message (no base64 over WebSocket).
  */
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { Check, ChevronDown, SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2, BookOpen } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
@@ -14,6 +14,7 @@ import { hostApiFetch } from '@/lib/host-api';
 import { invokeIpc } from '@/lib/api-client';
 import { cn } from '@/lib/utils';
 import { useGatewayStore } from '@/stores/gateway';
+import { useQuickTasksStore, type QuickTaskConfig } from '@/stores/quick-tasks';
 import { useTranslation } from 'react-i18next';
 
 // ── Types ────────────────────────────────────────────────────────
@@ -44,7 +45,12 @@ interface ChatInputProps {
     text: string,
     attachments?: FileAttachment[],
     targetAgentId?: string | null,
-    options?: { useKnowledgeBase?: boolean; workspaceId?: string; selectedKnowledgeDocumentIds?: string[] },
+    options?: {
+      useKnowledgeBase?: boolean;
+      workspaceId?: string;
+      selectedKnowledgeDocumentIds?: string[];
+      quickTaskContext?: { taskNames: string[]; skillIds: string[]; prompt: string };
+    },
   ) => void;
   onStop?: () => void;
   disabled?: boolean;
@@ -96,6 +102,21 @@ function readFileAsBase64(file: globalThis.File): Promise<string> {
   });
 }
 
+function buildQuickTaskPrompt(tasks: QuickTaskConfig[]): string {
+  return tasks
+    .map((task) => {
+      const skillNames = task.skills
+      .map((skill) => skill.name.trim())
+        .filter(Boolean);
+      const triggerNames = skillNames.length > 0 ? skillNames : [task.name.trim()].filter(Boolean);
+      return triggerNames
+        .map((skillName) => `使用${skillName} skill`)
+        .join(' ');
+    })
+    .filter(Boolean)
+    .join(' ');
+}
+
 // ── Component ────────────────────────────────────────────────────
 
 export function ChatInput({
@@ -112,11 +133,26 @@ export function ChatInput({
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
   const [knowledgePickerOpen, setKnowledgePickerOpen] = useState(false);
   const [selectedKnowledgeIds, setSelectedKnowledgeIds] = useState<string[]>([]);
+  const [selectedQuickTaskIds, setSelectedQuickTaskIds] = useState<string[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const knowledgePickerRef = useRef<HTMLDivElement>(null);
   const isComposingRef = useRef(false);
+  const quickTaskPromptRef = useRef('');
   const gatewayStatus = useGatewayStore((s) => s.status);
+  const quickTasks = useQuickTasksStore((state) => state.tasks);
   const knowledgeBaseAvailable = knowledgeDocuments.length > 0;
+  const composerQuickTasks = useMemo(
+    () => quickTasks.filter((task) => task.enabled && task.showInComposer),
+    [quickTasks],
+  );
+  const selectedQuickTasks = useMemo(
+    () => composerQuickTasks.filter((task) => selectedQuickTaskIds.includes(task.id)),
+    [composerQuickTasks, selectedQuickTaskIds],
+  );
+  const selectedQuickTaskPrompt = useMemo(
+    () => buildQuickTaskPrompt(selectedQuickTasks),
+    [selectedQuickTasks],
+  );
   const selectedKnowledgeDocuments = knowledgeDocuments.filter((doc) => selectedKnowledgeIds.includes(doc.id));
 
   // Auto-resize textarea
@@ -141,6 +177,34 @@ export function ChatInput({
     });
   }, [knowledgeDocuments]);
 
+  useEffect(() => {
+    setSelectedQuickTaskIds((current) => {
+      const next = current.filter((id) => composerQuickTasks.some((task) => task.id === id));
+      return next.length === current.length ? current : next;
+    });
+  }, [composerQuickTasks]);
+
+  useEffect(() => {
+    const previousPrompt = quickTaskPromptRef.current;
+    const nextPrompt = selectedQuickTaskPrompt.trim();
+    if (previousPrompt === nextPrompt) return;
+
+    setInput((current) => {
+      let body = current;
+      if (previousPrompt) {
+        if (body === previousPrompt) {
+          body = '';
+        } else if (body.startsWith(`${previousPrompt} `)) {
+          body = body.slice(previousPrompt.length + 1);
+        } else if (body.startsWith(`${previousPrompt}\n\n`)) {
+          body = body.slice(previousPrompt.length + 2);
+        }
+      }
+      return body.trimStart();
+    });
+    quickTaskPromptRef.current = nextPrompt;
+  }, [selectedQuickTaskPrompt]);
+
   useEffect(() => {
     if (!knowledgePickerOpen) return;
     const handlePointerDown = (event: MouseEvent) => {
@@ -288,7 +352,7 @@ export function ChatInput({
 
   const allReady = attachments.length === 0 || attachments.every(a => a.status === 'ready');
   const hasFailedAttachments = attachments.some((a) => a.status === 'error');
-  const canSend = (input.trim() || attachments.length > 0) && allReady && !disabled && !sending;
+  const canSend = (input.trim() || attachments.length > 0 || selectedQuickTasks.length > 0) && allReady && !disabled && !sending;
   const canStop = sending && !disabled && !!onStop;
 
   const handleSend = useCallback(() => {
@@ -296,7 +360,7 @@ export function ChatInput({
     const readyAttachments = attachments.filter(a => a.status === 'ready');
     // Capture values before clearing — clear input immediately for snappy UX,
     // but keep attachments available for the async send
-    const textToSend = input.trim();
+    const textToSend = [selectedQuickTaskPrompt, input.trim()].filter(Boolean).join(' ');
     const attachmentsToSend = readyAttachments.length > 0 ? readyAttachments : undefined;
     console.log(`[handleSend] text="${textToSend.substring(0, 50)}", attachments=${attachments.length}, ready=${readyAttachments.length}, sending=${!!attachmentsToSend}`);
     if (attachmentsToSend) {
@@ -305,6 +369,9 @@ export function ChatInput({
         stagedPath: a.stagedPath, status: a.status, hasPreview: !!a.preview,
       })));
     }
+    if (selectedQuickTasks.length > 0) {
+      console.log('[handleSend] Quick task prompt:', selectedQuickTaskPrompt);
+    }
     setInput('');
     setAttachments([]);
     if (textareaRef.current) {
@@ -316,7 +383,9 @@ export function ChatInput({
       selectedKnowledgeDocumentIds: selectedKnowledgeIds,
     });
     setKnowledgePickerOpen(false);
-  }, [input, attachments, canSend, onSend, selectedKnowledgeIds, workspaceId]);
+    setSelectedQuickTaskIds([]);
+    quickTaskPromptRef.current = '';
+  }, [input, attachments, canSend, onSend, selectedKnowledgeIds, workspaceId, selectedQuickTasks, selectedQuickTaskPrompt]);
 
   const handleStop = useCallback(() => {
     if (!canStop) return;
@@ -345,6 +414,14 @@ export function ChatInput({
     ));
   }, []);
 
+  const toggleQuickTask = useCallback((id: string) => {
+    setSelectedQuickTaskIds((current) => (
+      current.includes(id)
+        ? []
+        : [id]
+    ));
+  }, []);
+
   // Handle paste (Ctrl/Cmd+V with files)
   const handlePaste = useCallback(
     (e: React.ClipboardEvent) => {
@@ -417,8 +494,45 @@ export function ChatInput({
           </div>
         )}
 
+        {composerQuickTasks.length > 0 && (
+          <div className="mb-2 flex flex-wrap gap-1.5">
+            {composerQuickTasks.map((task) => {
+              const selected = selectedQuickTaskIds.includes(task.id);
+              const skillNames = task.skills.map((skill) => skill.name).filter(Boolean).join('、') || task.name;
+              return (
+                <div key={task.id} className="group relative">
+                  <button
+                    type="button"
+                    onClick={() => toggleQuickTask(task.id)}
+                    disabled={disabled || sending}
+                    className={cn(
+                      'inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[12px] font-medium shadow-sm transition-colors',
+                      selected
+                        ? 'border-[#7DBADB] bg-white text-[#075985]'
+                        : 'border-slate-200/80 bg-white/70 text-muted-foreground hover:bg-white dark:border-white/10 dark:bg-card dark:hover:bg-white/10',
+                    )}
+                  >
+                    <span className="truncate">{task.name}</span>
+                  </button>
+                  <div className="pointer-events-none absolute bottom-full left-0 z-30 mb-2 hidden w-72 rounded-xl border border-black/10 bg-white p-3 text-left shadow-xl group-hover:block dark:border-white/10 dark:bg-card">
+                    <div className="text-[13px] font-semibold text-foreground">{task.name}</div>
+                    <div className="mt-1 text-[12px] leading-5 text-muted-foreground">
+                      {task.description || t('composer.quickTaskHelp')}
+                    </div>
+                    {skillNames && (
+                      <div className="mt-2 rounded-lg bg-slate-50 px-2 py-1.5 text-[11px] leading-4 text-slate-600 dark:bg-white/5 dark:text-slate-300">
+                        {skillNames}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
         {/* Input Container */}
-        <div className={`relative bg-white dark:bg-card rounded-2xl shadow-sm border px-3 pt-2.5 pb-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
+        <div className={`relative rounded-lg border bg-white/80 px-3 pb-1.5 pt-2.5 shadow-[0_16px_36px_rgba(15,23,42,0.06)] backdrop-blur transition-all dark:bg-card ${dragOver ? 'border-[#0369A1] ring-1 ring-[#0369A1]' : 'border-slate-200/80 dark:border-white/10'}`}>
           {selectedKnowledgeDocuments.length > 0 && (
             <div className="flex flex-wrap gap-1.5 pb-1.5">
               {selectedKnowledgeDocuments.map((doc) => (
@@ -426,7 +540,7 @@ export function ChatInput({
                   key={doc.id}
                   type="button"
                   onClick={() => toggleKnowledgeDocument(doc.id)}
-                  className="inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border border-[#1E3A8A]/20 bg-[#1E3A8A]/5 px-2.5 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-[#1E3A8A]/10"
+                  className="inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border border-[#7DBADB]/70 bg-[#EAF5FA] px-2.5 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-[#DDF0F8]"
                   title={doc.name}
                 >
                   <BookOpen className="h-3 w-3 shrink-0 text-[#1E3A8A]" />
@@ -438,24 +552,34 @@ export function ChatInput({
           )}
 
           {/* Text Row — flush-left */}
-          <Textarea
-            ref={textareaRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onCompositionStart={() => {
-              isComposingRef.current = true;
-            }}
-            onCompositionEnd={() => {
-              isComposingRef.current = false;
-            }}
-            onPaste={handlePaste}
-            placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
-            disabled={disabled}
-            data-testid="chat-composer-input"
-            className="min-h-[48px] max-h-[240px] resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none bg-transparent p-0 text-[15px] placeholder:text-muted-foreground/60 leading-relaxed"
-            rows={1}
-          />
+          <div className="flex min-h-[48px] items-start text-[15px] font-normal leading-6">
+            {selectedQuickTaskPrompt && (
+              <span
+                onClick={() => textareaRef.current?.focus()}
+                className="mt-0 select-none whitespace-nowrap pr-1.5 font-sans text-[15px] font-normal leading-6 text-muted-foreground/60 md:text-[15px]"
+              >
+                {selectedQuickTaskPrompt}
+              </span>
+            )}
+            <Textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onCompositionStart={() => {
+                isComposingRef.current = true;
+              }}
+              onCompositionEnd={() => {
+                isComposingRef.current = false;
+              }}
+              onPaste={handlePaste}
+              placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
+              disabled={disabled}
+              data-testid="chat-composer-input"
+              className="block min-h-[48px] max-h-[240px] min-w-0 flex-1 resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 shadow-none bg-transparent p-0 font-sans text-[15px] font-normal leading-6 placeholder:text-muted-foreground/60 md:text-[15px]"
+              rows={1}
+            />
+          </div>
 
           {/* Action Row — icons on their own line */}
           <div className="mt-1.5 flex items-center gap-1">
@@ -463,7 +587,7 @@ export function ChatInput({
             <Button
               variant="ghost"
               size="icon"
-              className="shrink-0 h-8 w-8 rounded-lg text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors"
+              className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10"
               onClick={pickFiles}
               disabled={disabled || sending}
               title={t('composer.attachFiles')}
@@ -475,8 +599,8 @@ export function ChatInput({
               <Button
                 variant="ghost"
                 className={cn(
-                  'h-8 rounded-lg px-2 text-[12px] text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors',
-                  selectedKnowledgeIds.length > 0 && 'bg-[#1E3A8A]/10 text-[#1E3A8A] hover:bg-[#1E3A8A]/15',
+                  'h-8 rounded-lg px-2 text-[12px] text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10',
+                  selectedKnowledgeIds.length > 0 && 'bg-[#EAF5FA] text-[#075985] hover:bg-[#DDF0F8]',
                 )}
                 onClick={() => setKnowledgePickerOpen((open) => !open)}
                 disabled={!knowledgeBaseAvailable || disabled || sending}
@@ -494,7 +618,7 @@ export function ChatInput({
               {knowledgePickerOpen && (
                 <div
                   data-testid="chat-composer-knowledge-popover"
-                  className="absolute bottom-full left-0 z-30 mb-2 w-80 max-w-[calc(100vw-7rem)] overflow-hidden rounded-xl border border-black/10 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-card"
+                  className="absolute bottom-full left-0 z-30 mb-2 w-80 max-w-[calc(100vw-7rem)] overflow-hidden rounded-lg border border-slate-200/80 bg-white/95 p-2 shadow-[0_18px_48px_rgba(15,23,42,0.14)] backdrop-blur dark:border-white/10 dark:bg-card"
                 >
                   <div className="flex items-center justify-between px-2 py-1.5">
                     <div className="text-[12px] font-medium text-foreground">选择知识库上下文</div>
@@ -518,7 +642,7 @@ export function ChatInput({
                           onClick={() => toggleKnowledgeDocument(doc.id)}
                           className={cn(
                             'flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors',
-                            selected ? 'bg-[#1E3A8A]/10 text-foreground' : 'hover:bg-black/5 dark:hover:bg-white/5',
+                            selected ? 'bg-[#EAF5FA] text-foreground' : 'hover:bg-black/5 dark:hover:bg-white/5',
                           )}
                         >
                           <span className={cn(
@@ -547,9 +671,9 @@ export function ChatInput({
               disabled={sending ? !canStop : !canSend}
               size="icon"
               data-testid="chat-composer-send"
-              className={`ml-auto shrink-0 h-8 w-8 rounded-lg transition-colors ${
+              className={`ml-auto h-8 w-8 shrink-0 rounded-lg transition-colors ${
                 (sending || canSend)
-                  ? 'bg-black/5 dark:bg-white/10 text-foreground hover:bg-black/10 dark:hover:bg-white/20'
+                  ? 'bg-[#0369A1] text-white hover:bg-[#075985]'
                   : 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
               }`}
               variant="ghost"