work-agent 0.1.0

package/components/chat/MentionInput.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { AtSign, Sparkles, X, Paperclip, Loader2 } from 'lucide-react';
+
+interface Skill {
+	name: string;
+	displayName?: string;
+	description?: string;
+}
+
+interface AttachedFile {
+	id: string;
+	name: string;
+	size: number;
+}
+
+interface MentionInputProps {
+	skills: Skill[];
+	value: string;
+	onChange: (value: string) => void;
+	onSend: () => void;
+	disabled?: boolean;
+	attachedFiles?: AttachedFile[];
+	onFileAttach?: (file: File) => void;
+	onFileRemove?: (fileId: string) => void;
+	uploading?: boolean;
+}
+
+function formatFileSize(bytes: number): string {
+	if (bytes === 0) return '0 B';
+	const k = 1024;
+	const sizes = ['B', 'KB', 'MB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export function MentionInput({ 
+	skills, 
+	value, 
+	onChange, 
+	onSend, 
+	disabled,
+	attachedFiles = [],
+	onFileAttach,
+	onFileRemove,
+	uploading = false,
+}: MentionInputProps) {
+	const [showMentions, setShowMentions] = useState(false);
+	const [mentionIndex, setMentionIndex] = useState(0);
+	const [mentionQuery, setMentionQuery] = useState('');
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const mentionsRef = useRef<HTMLDivElement>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const detectedMention = useMemo(() => {
+		const cursor = textareaRef.current?.selectionStart || 0;
+		const textBefore = value.slice(0, cursor);
+		const match = textBefore.match(/@([\w\u4e00-\u9fa5]*)$/);
+		if (match) {
+			return {
+				query: match[1],
+				startIndex: cursor - match[1].length - 1,
+			};
+		}
+		return null;
+	}, [value]);
+
+	const filteredSkills = useMemo(() => {
+		if (!detectedMention) return [];
+		const query = mentionQuery || detectedMention.query;
+		if (!query) return skills.slice(0, 5);
+		return skills.filter(skill => {
+			const name = (skill.displayName || skill.name).toLowerCase();
+			const q = query.toLowerCase();
+			return name.includes(q) || skill.name.toLowerCase().includes(q);
+		}).slice(0, 5);
+	}, [skills, detectedMention, mentionQuery]);
+
+	const selectSkill = useCallback((skill: Skill) => {
+		if (!detectedMention) return;
+		
+		const before = value.slice(0, detectedMention.startIndex);
+		const after = value.slice(textareaRef.current?.selectionStart || 0);
+		const skillRef = `@${skill.name}`;
+		onChange(`${before}${skillRef}${after}`);
+		setShowMentions(false);
+		textareaRef.current?.focus();
+	}, [value, detectedMention, onChange]);
+
+	const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+		if (showMentions && filteredSkills.length > 0) {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				setShowMentions(false);
+				return;
+			}
+
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				setMentionIndex(i => Math.min(i + 1, filteredSkills.length - 1));
+				return;
+			}
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				setMentionIndex(i => Math.max(i - 1, 0));
+				return;
+			}
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				selectSkill(filteredSkills[mentionIndex]);
+				return;
+			}
+		}
+
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			onSend();
+		}
+	}, [showMentions, filteredSkills, mentionIndex, onSend, selectSkill]);
+
+	const extractMentions = useCallback((text: string): string[] => {
+		const skills: string[] = [];
+		const skillMatches = text.matchAll(/@(\w+)/g);
+		for (const match of skillMatches) {
+			skills.push(match[1]);
+		}
+		return skills;
+	}, []);
+
+	useEffect(() => {
+		if (detectedMention) {
+			setShowMentions(true);
+			setMentionQuery(detectedMention.query);
+			setMentionIndex(0);
+		} else {
+			setShowMentions(false);
+		}
+	}, [detectedMention]);
+
+	const mentionedSkills = useMemo(() => {
+		return extractMentions(value);
+	}, [value, extractMentions]);
+
+	const activeSkills = useMemo(() => {
+		return mentionedSkills
+			.map(s => {
+				const skill = skills.find(sk => sk.name === s);
+				return skill ? { name: s, displayName: skill.displayName || s } : null;
+			})
+			.filter(Boolean) as { name: string; displayName: string }[];
+	}, [mentionedSkills, skills]);
+
+	return (
+		<div className="relative">
+			{activeSkills.length > 0 && (
+				<div className="flex flex-wrap items-center gap-2 mb-2">
+					<span className="text-xs text-gray-500 flex items-center gap-1">
+						<Sparkles className="w-3 h-3" />
+						已激活:
+					</span>
+					{activeSkills.map((item) => (
+						<span
+							key={item.name}
+							className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-purple-100 text-purple-700"
+						>
+							@{item.displayName}
+						</span>
+					))}
+				</div>
+			)}
+
+			{attachedFiles.length > 0 && (
+				<div className="flex flex-wrap items-center gap-2 mb-2">
+					<span className="text-xs text-gray-500 flex items-center gap-1">
+						<Paperclip className="w-3 h-3" />
+						附件:
+					</span>
+					{attachedFiles.map((file) => (
+						<span
+							key={file.id}
+							className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-700"
+						>
+							{file.name} ({formatFileSize(file.size)})
+							{onFileRemove && (
+								<button
+									type="button"
+									onClick={() => onFileRemove(file.id)}
+									className="ml-1 hover:text-blue-900"
+								>
+									<X className="w-3 h-3" />
+								</button>
+							)}
+						</span>
+					))}
+				</div>
+			)}
+
+			<div className="relative">
+				<textarea
+					ref={textareaRef}
+					value={value}
+					onChange={(e) => onChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder={disabled ? 'AI 正在思考...' : '输入问题或命令... (输入 @ 呼出 Skill 列表)'}
+					disabled={disabled}
+					rows={1}
+					className="w-full px-3 py-2 pr-24 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none min-h-[40px] max-h-[120px]"
+				/>
+				
+				<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+					{onFileAttach && (
+						<>
+							<button
+								type="button"
+								onClick={() => fileInputRef.current?.click()}
+								disabled={disabled || uploading}
+								className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
+								title="添加附件"
+							>
+								{uploading ? (
+									<Loader2 className="w-4 h-4 animate-spin" />
+								) : (
+									<Paperclip className="w-4 h-4" />
+								)}
+							</button>
+							<input
+								ref={fileInputRef}
+								type="file"
+								className="hidden"
+								onChange={(e) => {
+									const file = e.target.files?.[0];
+									if (file) {
+										onFileAttach(file);
+									}
+									e.target.value = '';
+								}}
+							/>
+						</>
+					)}
+					<button
+						type="button"
+						onClick={() => {
+							const cursor = textareaRef.current?.selectionStart || 0;
+							const before = value.slice(0, cursor);
+							onChange(`${before}@`);
+							setTimeout(() => textareaRef.current?.focus(), 0);
+						}}
+						disabled={disabled}
+						className="p-1.5 text-gray-400 hover:text-purple-600 hover:bg-purple-50 rounded transition-colors"
+						title="插入 @ 提及"
+					>
+						<AtSign className="w-4 h-4" />
+					</button>
+				</div>
+			</div>
+
+			{showMentions && filteredSkills.length > 0 && (
+				<>
+					<div
+						className="fixed inset-0 z-40"
+						onClick={() => setShowMentions(false)}
+					/>
+					<div
+						ref={mentionsRef}
+						className="absolute bottom-full left-0 mb-2 w-80 bg-white border border-gray-200 rounded-lg shadow-lg z-50 overflow-hidden"
+					>
+						<div className="px-3 py-2 bg-gray-50 border-b border-gray-100">
+							<span className="text-xs text-gray-500">
+								选择要 @ 提及的 Skill
+							</span>
+						</div>
+						<div className="max-h-80 overflow-y-auto">
+							{filteredSkills.map((skill, index) => (
+								<button
+									key={`skill-${skill.name}`}
+									type="button"
+									onClick={() => selectSkill(skill)}
+									className={`w-full px-3 py-2 text-left flex items-start gap-2 hover:bg-purple-50 transition-colors ${
+										index === mentionIndex ? 'bg-purple-50' : ''
+									}`}
+								>
+									<span className="w-6 h-6 rounded bg-purple-100 flex items-center justify-center text-purple-600 text-xs font-medium shrink-0">
+										@{skill.name.charAt(0).toUpperCase()}
+									</span>
+									<div className="min-w-0">
+										<div className="font-medium text-sm text-gray-900 truncate">
+											{skill.displayName || skill.name}
+										</div>
+										{skill.description && (
+											<div className="text-xs text-gray-500 truncate">
+												{skill.description}
+											</div>
+										)}
+									</div>
+								</button>
+							))}
+						</div>
+						<div className="px-3 py-1.5 bg-gray-50 border-t border-gray-100 text-xs text-gray-400 flex items-center justify-between">
+							<span>↑↓ 选择</span>
+							<span>↵ 确认</span>
+							<span>Esc 关闭</span>
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

package/components/chat/OrganizeDialog.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Sparkles, Loader2, AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+}
+
+interface OrganizeDialogProps {
+  sessionId: string;
+  userId: string;
+  messages: Message[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConverted?: () => void;
+}
+
+interface PendingKnowledge {
+  title: string;
+  content: string;
+  category: string;
+  tags: string[];
+  type: string;
+}
+
+const ANALYSIS_PROMPT = `你是一个知识整理助手。请分析以下会话内容，提取有价值的知识并以JSON格式返回。
+
+会话内容：
+{messages}
+
+请直接返回以下JSON格式（不要有其他内容）：
+{{
+  "title": "知识标题（简洁明了，50字内）",
+  "content": "知识内容（问题分析 + 解决方案，完整详细，使用 Markdown 格式）",
+  "category": "分类（运维/开发/排查/其他）",
+  "tags": ["标签1", "标签2"]
+}}
+
+注意：
+- title 要简洁，能概括核心内容
+- content 要完整，包含问题描述、解决步骤、最佳实践
+- category 只选一个：运维、开发、排查、其他
+- tags 选2-4个标签`;
+
+const PROGRESS_MESSAGES = [
+  '正在分析会话...',
+  '正在提取关键信息...',
+  '正在生成知识内容...',
+  '正在整理知识结构...',
+];
+
+export function OrganizeDialog({ 
+  sessionId, 
+  userId, 
+  messages, 
+  open, 
+  onOpenChange,
+  onConverted 
+}: OrganizeDialogProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [progressIndex, setProgressIndex] = useState(0);
+
+  useEffect(() => {
+    if (!open) {
+      setError('');
+      setProgressIndex(0);
+    } else {
+      handleStartAnalysis();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!loading) return;
+
+    const interval = setInterval(() => {
+      setProgressIndex(prev => {
+        if (prev < PROGRESS_MESSAGES.length - 1) {
+          return prev + 1;
+        }
+        return prev;
+      });
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [loading]);
+
+  const handleStartAnalysis = async () => {
+    setLoading(true);
+    setError('');
+    setProgressIndex(0);
+
+    const formattedMessages = messages
+      .map((m) => `${m.role === 'user' ? '用户' : 'AI'}：${m.content}`)
+      .join('\n\n');
+
+    const prompt = ANALYSIS_PROMPT.replace('{messages}', formattedMessages);
+
+    try {
+      const response = await fetch('/api/pi-chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: prompt,
+          userId,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('请求失败');
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('无法读取响应');
+      }
+
+      const decoder = new TextDecoder();
+      let accumulatedContent = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split('\n');
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            try {
+              const event = JSON.parse(line.slice(6));
+
+              if (event.type === 'text') {
+                accumulatedContent += event.content;
+              }
+
+              if (event.type === 'agent_end') {
+                const messages = event.messages || [];
+                const lastMessage = messages[messages.length - 1];
+                
+                // 正确提取文本内容
+                let fullContent = accumulatedContent;
+                if (lastMessage?.content) {
+                  if (typeof lastMessage.content === 'string') {
+                    fullContent = lastMessage.content;
+                  } else if (Array.isArray(lastMessage.content)) {
+                    // 处理 [{ type: 'text', text: '...' }] 格式
+                    fullContent = lastMessage.content
+                      .map((c: any) => (typeof c === 'string' ? c : c?.text || ''))
+                      .join('');
+                  }
+                }
+                
+                parseAndNavigate(fullContent);
+                return;
+              }
+            } catch {
+              // 忽略解析错误
+            }
+          }
+        }
+      }
+
+      if (accumulatedContent) {
+        parseAndNavigate(accumulatedContent);
+      }
+    } catch (err: any) {
+      console.error('Analysis error:', err);
+      setError(err.message || '分析失败，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const parseAndNavigate = (content: string) => {
+    try {
+      console.log('[OrganizeDialog] Parsing content:', content.substring(0, 200));
+      
+      const jsonMatch = content.match(/\{[\s\S]*\}/);
+      let pendingKnowledge: PendingKnowledge;
+
+      if (jsonMatch) {
+        const data = JSON.parse(jsonMatch[0]);
+        console.log('[OrganizeDialog] Parsed JSON:', data);
+        
+        pendingKnowledge = {
+          title: data.title || '会话总结',
+          content: typeof data.content === 'string' ? data.content : JSON.stringify(data.content),
+          category: data.category || '其他',
+          tags: Array.isArray(data.tags) ? data.tags : [],
+          type: 'conversation-summary',
+        };
+      } else {
+        pendingKnowledge = {
+          title: '会话总结',
+          content: content,
+          category: '其他',
+          tags: [],
+          type: 'conversation-summary',
+        };
+      }
+
+      console.log('[OrganizeDialog] Saving to localStorage:', pendingKnowledge);
+      localStorage.setItem('pendingKnowledge', JSON.stringify(pendingKnowledge));
+      onOpenChange(false);
+      onConverted?.();
+      window.location.href = '/my/knowledge/new';
+    } catch (err) {
+      console.error('[OrganizeDialog] Parse error:', err);
+      setError('解析失败，请重试');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="w-5 h-5" />
+            整理保存
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="py-8">
+          {loading ? (
+            <div className="text-center">
+              <Loader2 className="w-10 h-10 mx-auto mb-4 animate-spin text-blue-500" />
+              <p className="text-gray-600 font-medium">{PROGRESS_MESSAGES[progressIndex]}</p>
+              <p className="text-gray-400 text-sm mt-2">即将跳转到编辑页面</p>
+            </div>
+          ) : error ? (
+            <div className="text-center">
+              <AlertCircle className="w-10 h-10 mx-auto mb-4 text-red-500" />
+              <p className="text-red-500 font-medium">{error}</p>
+              <div className="flex justify-center gap-3 mt-4">
+                <Button variant="outline" onClick={() => onOpenChange(false)}>
+                  取消
+                </Button>
+                <Button onClick={handleStartAnalysis}>
+                  重试
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="text-center">
+              <Loader2 className="w-8 h-8 mx-auto mb-3 animate-spin text-blue-500" />
+              <p className="text-gray-500">准备分析...</p>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/chat/RecommendationBanner.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Sparkles, ArrowRight, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface RecommendedSkill {
+  name: string;
+  displayName?: string;
+  description?: string;
+  score: number;
+  reason: string;
+}
+
+interface RecommendationBannerProps {
+  userId: string;
+  onInstallAndUse: (skillName: string) => void;
+}
+
+export function RecommendationBanner({ userId, onInstallAndUse }: RecommendationBannerProps) {
+  const [recommendations, setRecommendations] = useState<RecommendedSkill[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    if (!userId || dismissed) return;
+
+    const fetchRecommendations = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/recommend?type=personalized&userId=${userId}&limit=3`);
+        if (res.ok) {
+          const data = await res.json();
+          setRecommendations(data.recommendations || []);
+        }
+      } catch (error) {
+        console.error('Failed to fetch recommendations:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    // 延迟加载，让用户先开始对话
+    const timer = setTimeout(fetchRecommendations, 3000);
+    return () => clearTimeout(timer);
+  }, [userId, dismissed]);
+
+  if (loading || recommendations.length === 0 || dismissed) {
+    return null;
+  }
+
+  return (
+    <Card className="mb-4 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
+      <CardContent className="p-4">
+        <div className="flex items-start gap-3">
+          <Sparkles className="w-5 h-5 text-blue-600 mt-0.5" />
+          <div className="flex-1">
+            <div className="flex items-center justify-between mb-2">
+              <h4 className="font-medium text-sm text-blue-900">推荐Skill</h4>
+              <button 
+                onClick={() => setDismissed(true)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="space-y-2">
+              {recommendations.slice(0, 2).map((skill) => (
+                <div 
+                  key={skill.name}
+                  className="flex items-center justify-between bg-white rounded-lg p-2 border"
+                >
+                  <div>
+                    <div className="text-sm font-medium">{skill.displayName || skill.name}</div>
+                    <div className="text-xs text-gray-500">{skill.reason}</div>
+                  </div>
+                  <Button 
+                    size="sm" 
+                    variant="outline"
+                    onClick={() => onInstallAndUse(skill.name)}
+                  >
+                    安装并使用
+                    <ArrowRight className="w-3 h-3 ml-1" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}