work-agent 0.1.0

package/components/chat/KnowledgePickerDialog.tsx

@@ -0,0 +1,464 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Search, X, ExternalLink, BookOpen, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import { MessageResponse } from '@/components/ai-elements/message';
+import { KnowledgePreviewPanel } from './KnowledgePreviewPanel';
+import { EmptyPreviewState } from './EmptyPreviewState';
+
+interface KnowledgeItem {
+	id: string;
+	title: string;
+	content?: string;
+	category?: string;
+	createdAt: string;
+	updatedAt: string;
+	author?: string;
+	marketStatus?: string;
+}
+
+interface KnowledgePickerDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSelect: (knowledge: KnowledgeItem) => void;
+}
+
+const PAGE_SIZE = 10;
+
+function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
+	let timeout: NodeJS.Timeout | null = null;
+	return ((...args: Parameters<T>) => {
+		if (timeout) clearTimeout(timeout);
+		timeout = setTimeout(() => func(...args), wait);
+	}) as T;
+}
+
+export function KnowledgePickerDialog({ open, onOpenChange, onSelect }: KnowledgePickerDialogProps) {
+	const [activeTab, setActiveTab] = useState<'my' | 'market'>('my');
+	const [search, setSearch] = useState('');
+	const [knowledge, setKnowledge] = useState<KnowledgeItem[]>([]);
+	const [total, setTotal] = useState(0);
+	const [page, setPage] = useState(1);
+	const [loading, setLoading] = useState(false);
+	const searchInputRef = useRef<HTMLInputElement>(null);
+	
+	const [selectedKnowledge, setSelectedKnowledge] = useState<KnowledgeItem | null>(null);
+	const [previewContent, setPreviewContent] = useState<string>('');
+	const [previewLoading, setPreviewLoading] = useState(false);
+	const [contentCache, setContentCache] = useState<Map<string, string>>(new Map());
+	const [isMobile, setIsMobile] = useState(false);
+
+	const fetchKnowledge = useCallback(async () => {
+		setLoading(true);
+		try {
+			const offset = (page - 1) * PAGE_SIZE;
+			const userId = localStorage.getItem('userId');
+			
+			let url = '';
+			if (activeTab === 'my') {
+				url = `/api/knowledge?author=${encodeURIComponent(userId || '')}&limit=${PAGE_SIZE}&offset=${offset}`;
+				if (search) {
+					url += `&search=${encodeURIComponent(search)}`;
+				}
+			} else {
+				url = `/api/market/knowledge?limit=${PAGE_SIZE}&offset=${offset}`;
+				if (search) {
+					url += `&search=${encodeURIComponent(search)}`;
+				}
+			}
+
+			const response = await fetch(url);
+			const data = await response.json();
+
+			if (activeTab === 'my') {
+				setKnowledge(data.documents || []);
+				setTotal(data.total || 0);
+			} else {
+				setKnowledge(data.documents || []);
+				setTotal(data.total || 0);
+			}
+		} catch (error) {
+			console.error('Failed to fetch knowledge:', error);
+		} finally {
+			setLoading(false);
+		}
+	}, [activeTab, search, page]);
+
+	useEffect(() => {
+		if (open) {
+			setPage(1);
+			setSearch('');
+			setSelectedKnowledge(null);
+			setPreviewContent('');
+			fetchKnowledge();
+		}
+	}, [open, activeTab]);
+
+	useEffect(() => {
+		fetchKnowledge();
+	}, [page]);
+
+	useEffect(() => {
+		if (open && searchInputRef.current) {
+			setTimeout(() => searchInputRef.current?.focus(), 100);
+		}
+	}, [open, search]);
+
+	const totalPages = Math.ceil(total / PAGE_SIZE);
+
+	useEffect(() => {
+		const checkMobile = () => setIsMobile(window.innerWidth < 768);
+		checkMobile();
+		window.addEventListener('resize', checkMobile);
+		return () => window.removeEventListener('resize', checkMobile);
+	}, []);
+
+	const loadPreviewContent = useCallback(async (id: string) => {
+		if (contentCache.has(id)) {
+			setPreviewContent(contentCache.get(id)!);
+			return;
+		}
+
+		setPreviewLoading(true);
+		try {
+			const response = await fetch(`/api/knowledge/${id}`);
+			const data = await response.json();
+			const content = data.document?.content || '';
+			
+			setContentCache(prev => new Map(prev).set(id, content));
+			setPreviewContent(content);
+		} catch (error) {
+			console.error('Failed to load preview:', error);
+			setPreviewContent('');
+		} finally {
+			setPreviewLoading(false);
+		}
+	}, [contentCache]);
+
+	const handlePreview = useCallback((item: KnowledgeItem) => {
+		setSelectedKnowledge(item);
+		loadPreviewContent(item.id);
+	}, [loadPreviewContent]);
+
+	const handleSelect = useCallback((item: KnowledgeItem) => {
+		onSelect(item);
+		onOpenChange(false);
+	}, [onSelect, onOpenChange]);
+
+	const debouncedSearch = useMemo(
+		() => debounce((value: string) => {
+			setPage(1);
+			fetchKnowledge();
+		}, 300),
+		[fetchKnowledge]
+	);
+
+	useEffect(() => {
+		if (!open) return;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				onOpenChange(false);
+				return;
+			}
+
+			if (knowledge.length === 0) return;
+
+			const currentIndex = selectedKnowledge 
+				? knowledge.findIndex(k => k.id === selectedKnowledge.id)
+				: -1;
+
+			if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+				e.preventDefault();
+				let newIndex: number;
+				
+				if (e.key === 'ArrowDown') {
+					newIndex = currentIndex < knowledge.length - 1 ? currentIndex + 1 : 0;
+				} else {
+					newIndex = currentIndex > 0 ? currentIndex - 1 : knowledge.length - 1;
+				}
+				
+				handlePreview(knowledge[newIndex]);
+			} else if (e.key === 'Enter' && selectedKnowledge) {
+				e.preventDefault();
+				if (e.ctrlKey || e.metaKey) {
+					handleSelect(selectedKnowledge);
+				} else {
+					handlePreview(selectedKnowledge);
+				}
+			}
+		};
+
+		window.addEventListener('keydown', handleKeyDown);
+		return () => window.removeEventListener('keydown', handleKeyDown);
+	}, [open, knowledge, selectedKnowledge, onOpenChange, handlePreview, handleSelect]);
+
+	return (
+		<>
+			{open && (
+				<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+					<div className={cn(
+						"bg-white rounded-xl shadow-2xl w-full flex flex-col overflow-hidden",
+						isMobile ? "max-w-2xl max-h-[90vh]" : "max-w-5xl max-h-[80vh]"
+					)}>
+						{/* Header */}
+						<div className="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+							<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+								<BookOpen className="w-5 h-5 text-amber-600" />
+								知识库
+							</h2>
+							<button
+								onClick={() => onOpenChange(false)}
+								className="p-1 text-gray-400 hover:text-gray-600 rounded"
+							>
+								<X className="w-5 h-5" />
+							</button>
+						</div>
+
+						{/* Tabs & Search */}
+						<div className="px-4 py-3 border-b border-gray-200 space-y-3">
+							<div className="flex gap-2">
+								<button
+									onClick={() => setActiveTab('my')}
+									className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+										activeTab === 'my'
+											? 'bg-amber-100 text-amber-700'
+											: 'text-gray-600 hover:bg-gray-100'
+									}`}
+								>
+									我的知识
+								</button>
+								<button
+									onClick={() => setActiveTab('market')}
+									className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+										activeTab === 'market'
+											? 'bg-amber-100 text-amber-700'
+											: 'text-gray-600 hover:bg-gray-100'
+									}`}
+								>
+									市场知识
+								</button>
+							</div>
+
+							<div className="relative">
+								<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+								<input
+									ref={searchInputRef}
+									type="text"
+									value={search}
+									onChange={(e) => {
+										setSearch(e.target.value);
+										setSelectedKnowledge(null);
+										setPreviewContent('');
+										debouncedSearch(e.target.value);
+									}}
+									placeholder="搜索知识..."
+									className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
+								/>
+							</div>
+						</div>
+
+						{/* Main Content - 桌面端左右分栏，移动端手风琴 */}
+						{isMobile ? (
+							<div className="flex-1 overflow-y-auto min-h-0">
+								{loading ? (
+									<div className="flex items-center justify-center py-12">
+										<Loader2 className="w-6 h-6 text-amber-600 animate-spin" />
+									</div>
+								) : knowledge.length === 0 ? (
+									<div className="flex flex-col items-center justify-center py-12 text-gray-500">
+										<BookOpen className="w-12 h-12 mb-3 text-gray-300" />
+										<p className="text-sm">暂无知识</p>
+										{activeTab === 'my' && (
+											<Link
+												href="/my/knowledge/new"
+												className="mt-2 text-sm text-amber-600 hover:text-amber-700"
+												onClick={() => onOpenChange(false)}
+											>
+												创建第一条知识
+											</Link>
+										)}
+									</div>
+								) : (
+									<div className="divide-y divide-gray-100">
+										{knowledge.map((item) => (
+											<div key={item.id}>
+												<div
+													className={cn(
+														"px-4 py-3 transition-colors cursor-pointer",
+														selectedKnowledge?.id === item.id 
+															? "bg-amber-50" 
+															: "hover:bg-gray-50"
+													)}
+													onClick={() => {
+														if (selectedKnowledge?.id === item.id) {
+															setSelectedKnowledge(null);
+															setPreviewContent('');
+														} else {
+															handlePreview(item);
+														}
+													}}
+												>
+													<div className="flex items-start justify-between gap-3">
+														<div className="min-w-0 flex-1">
+															<h3 className="font-medium text-gray-900 truncate">
+																{item.title}
+															</h3>
+															<div className="flex items-center gap-2 mt-1 text-xs text-gray-500 flex-wrap">
+																{item.category && (
+																	<span className="px-2 py-0.5 bg-gray-100 rounded">
+																		{item.category}
+																	</span>
+																)}
+																<span>
+																	{new Date(item.updatedAt).toLocaleDateString('zh-CN')}
+																</span>
+																{activeTab === 'market' && item.author && (
+																	<span>· {item.author}</span>
+																)}
+															</div>
+														</div>
+														<button
+															onClick={(e) => {
+																e.stopPropagation();
+																handleSelect(item);
+															}}
+															className="px-3 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded-lg hover:bg-amber-200 transition-colors shrink-0"
+														>
+															引用
+														</button>
+													</div>
+												</div>
+												
+												{selectedKnowledge?.id === item.id && (
+													<div className="px-4 py-3 bg-gray-50 border-t border-gray-200">
+														{previewLoading ? (
+															<div className="space-y-3 animate-pulse">
+																<div className="h-4 bg-gray-200 rounded w-3/4"></div>
+																<div className="h-4 bg-gray-200 rounded w-full"></div>
+																<div className="h-4 bg-gray-200 rounded w-5/6"></div>
+															</div>
+														) : (
+															<div className="prose prose-sm max-w-none">
+																<MessageResponse>{previewContent}</MessageResponse>
+															</div>
+														)}
+													</div>
+												)}
+											</div>
+										))}
+									</div>
+								)}
+							</div>
+						) : (
+							<div className="flex flex-1 overflow-hidden min-h-0">
+								<div className="w-2/5 border-r border-gray-200 overflow-y-auto">
+									{loading ? (
+										<div className="flex items-center justify-center py-12">
+											<Loader2 className="w-6 h-6 text-amber-600 animate-spin" />
+										</div>
+									) : knowledge.length === 0 ? (
+										<div className="flex flex-col items-center justify-center py-12 text-gray-500">
+											<BookOpen className="w-12 h-12 mb-3 text-gray-300" />
+											<p className="text-sm">暂无知识</p>
+											{activeTab === 'my' && (
+												<Link
+													href="/my/knowledge/new"
+													className="mt-2 text-sm text-amber-600 hover:text-amber-700"
+													onClick={() => onOpenChange(false)}
+												>
+													创建第一条知识
+												</Link>
+											)}
+										</div>
+									) : (
+										<div className="divide-y divide-gray-100">
+											{knowledge.map((item) => (
+												<div
+													key={item.id}
+													className={cn(
+														"px-4 py-3 transition-colors cursor-pointer",
+														selectedKnowledge?.id === item.id 
+															? "bg-amber-50 border-l-2 border-amber-600" 
+															: "hover:bg-gray-50 border-l-2 border-transparent"
+													)}
+													onClick={() => handlePreview(item)}
+													onDoubleClick={() => handleSelect(item)}
+												>
+													<div className="flex items-start justify-between gap-3">
+														<div className="min-w-0 flex-1">
+															<h3 className="font-medium text-gray-900 truncate">
+																{item.title}
+															</h3>
+															<div className="flex items-center gap-2 mt-1 text-xs text-gray-500 flex-wrap">
+																{item.category && (
+																	<span className="px-2 py-0.5 bg-gray-100 rounded">
+																		{item.category}
+																	</span>
+																)}
+																<span>
+																	{new Date(item.updatedAt).toLocaleDateString('zh-CN')}
+																</span>
+																{activeTab === 'market' && item.author && (
+																	<span>· {item.author}</span>
+																)}
+															</div>
+														</div>
+													</div>
+												</div>
+											))}
+										</div>
+									)}
+								</div>
+								
+								<div className="w-3/5 overflow-hidden bg-gray-50">
+									{selectedKnowledge ? (
+										<KnowledgePreviewPanel
+											knowledge={selectedKnowledge}
+											content={previewContent}
+											loading={previewLoading}
+											onCite={handleSelect}
+											activeTab={activeTab}
+										/>
+									) : (
+										<EmptyPreviewState />
+									)}
+								</div>
+							</div>
+						)}
+
+						{/* Pagination */}
+						{totalPages > 1 && (
+							<div className="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
+								<span className="text-xs text-gray-500">
+									共 {total} 条知识
+								</span>
+								<div className="flex items-center gap-1">
+									<button
+										onClick={() => setPage(p => Math.max(1, p - 1))}
+										disabled={page === 1}
+										className="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+									>
+										上一页
+									</button>
+									<span className="px-2 py-1 text-xs text-gray-600">
+										{page} / {totalPages}
+									</span>
+									<button
+										onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+										disabled={page === totalPages}
+										className="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+									>
+										下一页
+									</button>
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+			)}
+		</>
+	);
+}

package/components/chat/KnowledgePreview.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { KNOWLEDGE_TYPE_LABELS } from '@/lib/knowledge-types';
+
+const MDEditor = dynamic(
+	() => import('@uiw/react-md-editor'),
+	{ ssr: false }
+);
+
+interface KnowledgePreviewProps {
+	title: string;
+	content: string;
+	category?: string;
+	tags?: string[];
+	author: string;
+	updatedAt: string;
+	type?: string;
+}
+
+export function KnowledgePreview({
+	title,
+	content,
+	category,
+	tags,
+	author,
+	updatedAt,
+	type,
+}: KnowledgePreviewProps) {
+	return (
+		<div className="bg-white rounded-lg shadow-sm border p-6">
+			<div className="mb-6">
+				<h1 className="text-2xl font-bold text-gray-900 mb-2">{title}</h1>
+				<div className="flex items-center gap-3 text-sm text-gray-500">
+					{category && (
+						<span className="px-2 py-0.5 bg-gray-100 rounded text-xs">
+							{category}
+						</span>
+					)}
+					{type && KNOWLEDGE_TYPE_LABELS[type as keyof typeof KNOWLEDGE_TYPE_LABELS] && (
+						<span className="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">
+							{KNOWLEDGE_TYPE_LABELS[type as keyof typeof KNOWLEDGE_TYPE_LABELS]}
+						</span>
+					)}
+					<span>作者: {author}</span>
+					<span>更新于: {new Date(updatedAt).toLocaleDateString('zh-CN')}</span>
+				</div>
+			</div>
+
+			{tags && tags.length > 0 && (
+				<div className="flex flex-wrap gap-2 mb-6">
+					{tags.map((tag, index) => (
+						<span key={index} className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">
+							{tag}
+						</span>
+					))}
+				</div>
+			)}
+
+			<div className="prose max-w-none" data-color-mode="light" style={{ minHeight: '60vh' }}>
+				<MDEditor
+					value={content}
+					preview="preview"
+					hideToolbar
+					height={600}
+				/>
+			</div>
+		</div>
+	);
+}

package/components/chat/KnowledgePreviewPanel.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+import { MessageResponse } from '@/components/ai-elements/message';
+
+interface KnowledgeItem {
+	id: string;
+	title: string;
+	content?: string;
+	category?: string;
+	createdAt: string;
+	updatedAt: string;
+	author?: string;
+	marketStatus?: string;
+}
+
+interface KnowledgePreviewPanelProps {
+	knowledge: KnowledgeItem;
+	content: string;
+	loading: boolean;
+	onCite: (knowledge: KnowledgeItem) => void;
+	activeTab: 'my' | 'market';
+}
+
+export function KnowledgePreviewPanel({ 
+	knowledge, 
+	content, 
+	loading, 
+	onCite,
+	activeTab 
+}: KnowledgePreviewPanelProps) {
+	return (
+		<div className="h-full flex flex-col bg-white">
+			<div className="px-6 py-4 border-b border-gray-200">
+				<h3 className="text-lg font-semibold text-gray-900">{knowledge.title}</h3>
+				<div className="flex items-center gap-2 mt-2 text-xs text-gray-500 flex-wrap">
+					{knowledge.category && (
+						<span className="px-2 py-0.5 bg-amber-100 text-amber-700 rounded">
+							{knowledge.category}
+						</span>
+					)}
+					<span>更新于 {new Date(knowledge.updatedAt).toLocaleDateString('zh-CN')}</span>
+					{activeTab === 'market' && knowledge.author && (
+						<span>· 作者: {knowledge.author}</span>
+					)}
+				</div>
+			</div>
+			
+			<div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
+				{loading ? (
+					<div className="space-y-3 animate-pulse">
+						<div className="h-4 bg-gray-200 rounded w-3/4"></div>
+						<div className="h-4 bg-gray-200 rounded w-full"></div>
+						<div className="h-4 bg-gray-200 rounded w-5/6"></div>
+						<div className="h-4 bg-gray-200 rounded w-full"></div>
+						<div className="h-4 bg-gray-200 rounded w-2/3"></div>
+						<div className="h-4 bg-gray-200 rounded w-full"></div>
+						<div className="h-4 bg-gray-200 rounded w-4/5"></div>
+					</div>
+				) : (
+					<div className="prose prose-sm max-w-none">
+						<MessageResponse>{content}</MessageResponse>
+					</div>
+				)}
+			</div>
+			
+			<div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex items-center gap-2">
+				<button
+					onClick={() => onCite(knowledge)}
+					className="px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium"
+				>
+					引用此知识
+				</button>
+				<Link
+					href={activeTab === 'my' ? `/my/knowledge/${knowledge.id}` : `/market/knowledge/${knowledge.id}`}
+					target="_blank"
+					className="px-4 py-2 text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100 transition-colors text-sm font-medium flex items-center gap-1"
+				>
+					<ExternalLink className="w-4 h-4" />
+					在新窗口打开
+				</Link>
+			</div>
+		</div>
+	);
+}