work-agent 0.1.0

package/components/chat/SaveToKnowledgeDialog.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState } from 'react';
+import { Save, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { KNOWLEDGE_TYPE_LABELS } from '@/lib/knowledge-types';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+}
+
+interface SaveToKnowledgeDialogProps {
+  messages: Message[];
+  sessionId?: string | null;
+  onSuccess?: () => void;
+}
+
+export function SaveToKnowledgeDialog({ messages, sessionId, onSuccess }: SaveToKnowledgeDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  const [category, setCategory] = useState('会话总结');
+  const [saving, setSaving] = useState(false);
+
+  // 生成会话摘要
+  const generateSummary = () => {
+    const userMessages = messages.filter(m => m.role === 'user');
+    const assistantMessages = messages.filter(m => m.role === 'assistant');
+
+    let summary = '# 会话总结\n\n';
+
+    // 添加主要话题
+    if (userMessages.length > 0) {
+      summary += '## 主要讨论\n\n';
+      userMessages.slice(0, 5).forEach((m, i) => {
+        summary += `${i + 1}. ${m.content.slice(0, 100)}${m.content.length > 100 ? '...' : ''}\n`;
+      });
+      summary += '\n';
+    }
+
+    // 添加关键回复
+    if (assistantMessages.length > 0) {
+      summary += '## 关键内容\n\n';
+      assistantMessages.slice(0, 3).forEach((m, i) => {
+        summary += `### 回复 ${i + 1}\n\n${m.content.slice(0, 500)}${m.content.length > 500 ? '...' : ''}\n\n`;
+      });
+    }
+
+    return summary;
+  };
+
+  const handleSave = async () => {
+    if (!title.trim()) {
+      alert('请输入知识标题');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const content = generateSummary();
+
+      const response = await fetch('/api/knowledge', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          content,
+          category,
+          type: 'conversation-summary',
+          sourceType: 'conversation-summary',
+          sessionId,
+          isActive: true,
+          author: 'user',
+        }),
+      });
+
+      if (response.ok) {
+        setTitle('');
+        setOpen(false);
+        onSuccess?.();
+      } else {
+        const data = await response.json();
+        alert(data.error || '保存失败');
+      }
+    } catch (error) {
+      console.error('Failed to save knowledge:', error);
+      alert('保存失败');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const hasMessages = messages.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={!hasMessages}
+          className="h-8"
+          title="保存会话到知识库"
+        >
+          <Save className="h-4 w-4 mr-1" />
+          保存为知识
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>保存会话到知识库</DialogTitle>
+          <DialogDescription>
+            将当前对话内容总结并保存为知识条目，保存后可在AI会话中被引用。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">标题</label>
+            <Input
+              placeholder="例如：Docker容器管理经验"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">分类</label>
+            <Select value={category} onValueChange={setCategory}>
+              <SelectTrigger>
+                <SelectValue placeholder="选择分类" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="会话总结">会话总结</SelectItem>
+                <SelectItem value="运维">运维</SelectItem>
+                <SelectItem value="开发">开发</SelectItem>
+                <SelectItem value="排查">排查</SelectItem>
+                <SelectItem value="最佳实践">最佳实践</SelectItem>
+                <SelectItem value="其他">其他</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="bg-muted/50 rounded-lg p-3 text-sm text-muted-foreground">
+            <p className="font-medium mb-1">将保存以下内容：</p>
+            <ul className="list-disc list-inside space-y-1 text-xs">
+              <li>用户提问摘要（最多5条）</li>
+              <li>AI回复要点（最多3条）</li>
+              <li>会话ID：{sessionId || '未分配'}</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            取消
+          </Button>
+          <Button onClick={handleSave} disabled={saving || !title.trim()}>
+            {saving ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                保存中...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 mr-1" />
+                保存
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/chat/SkillSelector.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { ChevronDown, X, Plus, Sparkles } from 'lucide-react';
+
+interface SkillMetadata {
+  name: string;
+  displayName?: string;
+  description?: string;
+  version?: string;
+  author?: string;
+  keywords?: string[];
+  scriptCount: number;
+  apiDocCount: number;
+  isBuiltIn: boolean;
+}
+
+interface SkillSelectorProps {
+  selectedSkills: string[];
+  onSkillsChange: (skills: string[]) => void;
+}
+
+export function SkillSelector({ selectedSkills, onSkillsChange }: SkillSelectorProps) {
+  const [availableSkills, setAvailableSkills] = useState<SkillMetadata[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    async function loadSkills() {
+      try {
+        const response = await fetch('/api/skills');
+        if (response.ok) {
+          const skills = await response.json();
+          setAvailableSkills(skills);
+        }
+      } catch (error) {
+        console.error('Failed to load skills:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadSkills();
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    if (buttonRef.current && isOpen) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = 420;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      
+      let top = rect.bottom + 8;
+      if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+        top = rect.top - 8 - dropdownHeight;
+      }
+      
+      setDropdownPosition({
+        top: Math.max(8, top),
+        left: Math.max(8, Math.min(rect.left, window.innerWidth - 400)),
+        width: Math.min(384, window.innerWidth - 16),
+      });
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, true);
+    }
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [isOpen, updatePosition]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
+          !buttonRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const getDisplayName = (skill: SkillMetadata): string => {
+    return skill.displayName || skill.name;
+  };
+
+  const getSelectedSkillObjects = (): SkillMetadata[] => {
+    return availableSkills.filter(s => selectedSkills.includes(s.name));
+  };
+
+  const toggleSkill = (skillName: string) => {
+    if (selectedSkills.includes(skillName)) {
+      onSkillsChange(selectedSkills.filter(s => s !== skillName));
+    } else {
+      onSkillsChange([...selectedSkills, skillName]);
+    }
+  };
+
+  const selectedSkillObjects = getSelectedSkillObjects();
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {selectedSkillObjects.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 mb-3 p-3 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg border border-purple-100">
+          <span className="text-xs font-semibold text-purple-700 flex items-center gap-1">
+            <Sparkles className="w-3.5 h-3.5" />
+            已激活:
+          </span>
+          
+          {selectedSkillObjects.map(skill => (
+            <span
+              key={skill.name}
+              className="inline-flex items-center gap-1.5 px-3 py-1 bg-white text-purple-700 rounded-full text-sm font-medium shadow-sm border border-purple-200"
+            >
+              {getDisplayName(skill)}
+              <button
+                onClick={() => toggleSkill(skill.name)}
+                className="ml-1 hover:text-purple-900 transition-colors"
+                title="移除"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </span>
+          ))}
+          
+          <button
+            onClick={() => onSkillsChange([])}
+            className="text-xs text-purple-500 hover:text-purple-700 ml-2"
+          >
+            清除全部
+          </button>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <button
+            ref={buttonRef}
+            onClick={() => setIsOpen(!isOpen)}
+            className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-lg hover:border-purple-300 hover:shadow-sm hover:bg-purple-50/50 transition-all duration-200"
+          >
+            <span className="text-lg">🔧</span>
+            <span className="text-sm font-medium text-gray-700">Skill</span>
+            {selectedSkills.length > 0 && (
+              <span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs font-semibold rounded-full">
+                {selectedSkills.length}
+              </span>
+            )}
+            <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+          </button>
+
+          {availableSkills.length > 0 && (
+            <button
+              onClick={() => {
+                console.log('智能推荐功能待实现');
+              }}
+              className="p-2.5 text-gray-400 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+              title="智能推荐 Skill"
+            >
+              <Sparkles className="w-5 h-5" />
+            </button>
+          )}
+        </div>
+
+        <a
+          href="/skills"
+          target="_blank"
+          className="flex items-center gap-1 text-sm text-gray-400 hover:text-purple-600 transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          <span>管理 Skill</span>
+        </a>
+      </div>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          <div
+            ref={dropdownRef}
+            className="fixed bg-white border border-gray-200 rounded-xl shadow-2xl z-50 overflow-hidden"
+            style={{
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+              width: dropdownPosition.width,
+              maxHeight: 'calc(100vh - 16px)',
+            }}
+          >
+            <div className="px-4 py-3 bg-gray-50 border-b border-gray-100">
+              <h3 className="text-sm font-semibold text-gray-900">
+                选择要激活的 Skill
+              </h3>
+              <p className="text-xs text-gray-500 mt-0.5">
+                选中的 Skill 将被注入到 AI 上下文中，帮助处理特定任务
+              </p>
+            </div>
+
+            {loading ? (
+              <div className="p-8 text-center">
+                <div className="inline-flex items-center gap-2 text-gray-500">
+                  <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  <span className="text-sm">加载中...</span>
+                </div>
+              </div>
+            ) : (
+              <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 180px)' }}>
+                {availableSkills.length === 0 ? (
+                  <div className="p-6 text-center">
+                    <p className="text-sm text-gray-500">暂无可用的 Skill</p>
+                    <a
+                      href="/skills/new"
+                      className="inline-flex items-center gap-1 mt-2 text-sm text-purple-600 hover:text-purple-700"
+                    >
+                      <Plus className="w-4 h-4" />
+                      创建第一个 Skill
+                    </a>
+                  </div>
+                ) : (
+                  availableSkills.map(skill => {
+                    const isSelected = selectedSkills.includes(skill.name);
+                    return (
+                      <label
+                        key={skill.name}
+                        className={`flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors ${
+                          isSelected ? 'bg-purple-50' : 'hover:bg-gray-50'
+                        }`}
+                      >
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => toggleSkill(skill.name)}
+                          className="mt-0.5 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium text-sm text-gray-900">
+                              {getDisplayName(skill)}
+                            </span>
+                            {skill.isBuiltIn && (
+                              <span className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
+                                内置
+                              </span>
+                            )}
+                            {skill.version && (
+                              <span className="text-xs text-gray-400">
+                                v{skill.version}
+                              </span>
+                            )}
+                          </div>
+                          <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">
+                            {skill.description}
+                          </p>
+                          {(skill.scriptCount > 0 || skill.apiDocCount > 0) && (
+                            <div className="flex items-center gap-2 mt-1">
+                              {skill.scriptCount > 0 && (
+                                <span className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
+                                  {skill.scriptCount} 脚本
+                                </span>
+                              )}
+                              {skill.apiDocCount > 0 && (
+                                <span className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
+                                  {skill.apiDocCount} API
+                                </span>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      </label>
+                    );
+                  })
+                )}
+              </div>
+            )}
+
+            <div className="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
+              <span className="text-xs text-gray-500">
+                {selectedSkills.length} / {availableSkills.length} 已选择
+              </span>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="px-4 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                确定
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/chat/SkillSwitcher.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { ChevronDown, Sparkles } from 'lucide-react';
+
+interface Skill {
+  name: string;
+  displayName?: string;
+  description?: string;
+}
+
+interface SkillSwitcherProps {
+  skills: Skill[];
+  selectedSkills: string[];
+  onSkillsChange: (skills: string[]) => void;
+}
+
+export function SkillSwitcher({ skills, selectedSkills, onSkillsChange }: SkillSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const getDisplayName = (skill: Skill) => skill.displayName || skill.name;
+
+  const currentSkill = selectedSkills.length === 1
+    ? skills.find(s => s.name === selectedSkills[0])
+    : null;
+
+  const updatePosition = useCallback(() => {
+    if (buttonRef.current && isOpen) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + 4,
+        left: Math.min(rect.left, window.innerWidth - 300),
+      });
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, true);
+    }
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [isOpen, updatePosition]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
+          !buttonRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const toggleSkill = (skillName: string) => {
+    if (selectedSkills.includes(skillName)) {
+      onSkillsChange(selectedSkills.filter(s => s !== skillName));
+    } else {
+      onSkillsChange([skillName]);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-50 hover:bg-purple-100 border border-purple-200 rounded-lg transition-colors"
+      >
+        <Sparkles className="w-4 h-4 text-purple-600" />
+        <span className="font-medium text-sm text-purple-900">
+          {currentSkill ? getDisplayName(currentSkill) : '默认助手'}
+        </span>
+        {selectedSkills.length > 1 && (
+          <span className="text-xs bg-purple-200 text-purple-700 px-1.5 py-0.5 rounded-full">
+            {selectedSkills.length}
+          </span>
+        )}
+        <ChevronDown className={`w-3.5 h-3.5 text-purple-400 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          <div
+            ref={dropdownRef}
+            className="fixed bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-64 overflow-hidden"
+            style={{
+              top: dropdownPosition.top,
+              left: dropdownPosition.left,
+            }}
+          >
+            <div className="px-3 py-2 bg-gray-50 border-b border-gray-100">
+              <span className="text-xs font-medium text-gray-600">选择对话 Skill</span>
+            </div>
+            <div className="max-h-64 overflow-y-auto">
+              <button
+                onClick={() => {
+                  onSkillsChange([]);
+                  setIsOpen(false);
+                }}
+                className={`w-full px-3 py-2 text-left flex items-center gap-2 hover:bg-gray-50 transition-colors ${
+                  selectedSkills.length === 0 ? 'bg-purple-50' : ''
+                }`}
+              >
+                <span className="w-6 h-6 rounded bg-gray-100 flex items-center justify-center text-gray-500 text-xs">🤖</span>
+                <div>
+                  <div className="font-medium text-sm text-gray-900">默认助手</div>
+                  <div className="text-xs text-gray-500">默认对话模式</div>
+                </div>
+                {selectedSkills.length === 0 && (
+                  <span className="ml-auto text-purple-600 text-xs">✓</span>
+                )}
+              </button>
+              {skills.map(skill => {
+                const isSelected = selectedSkills.includes(skill.name);
+                return (
+                  <button
+                    key={skill.name}
+                    onClick={() => {
+                      toggleSkill(skill.name);
+                      setIsOpen(false);
+                    }}
+                    className={`w-full px-3 py-2 text-left flex items-center gap-2 hover:bg-gray-50 transition-colors ${
+                      isSelected ? '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">
+                      {getDisplayName(skill).charAt(0).toUpperCase()}
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium text-sm text-gray-900 truncate">{getDisplayName(skill)}</div>
+                      {skill.description && (
+                        <div className="text-xs text-gray-500 truncate">{skill.description}</div>
+                      )}
+                    </div>
+                    {isSelected && (
+                      <span className="ml-auto text-purple-600 text-xs">✓</span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+            <div className="px-3 py-2 bg-gray-50 border-t border-gray-100 text-xs text-gray-400">
+              点击切换当前对话的 Skill
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/client-layout.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { LayoutWrapper } from '@/components/layout-wrapper';
+
+export function ClientLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname() || '';
+  
+  // 移动端路径不显示全局导航
+  if (pathname === '/h5' || pathname.startsWith('/h5/')) {
+    return <>{children}</>;
+  }
+  
+  return <LayoutWrapper>{children}</LayoutWrapper>;
+}