Merge project conversations and cloud coding teacher into main

src/components/coding/AgentCreationDialog.tsx

@@ -1,230 +0,0 @@
-import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
-import { Search, Trash2, Upload } from 'lucide-react';
-import { toast } from 'sonner';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { prepareAgentAvatar } from '@/lib/agent-avatar-upload';
-import { agentAvatarOptions } from '@/lib/agent-avatars';
-import { codingModelKey, type CodingModelOption } from '@/lib/coding-model-options';
-import { cn } from '@/lib/utils';
-import type { CodingProjectAgent } from '@/types/coding-project';
-
-export type AgentCreationSkillOption = {
-  id: string;
-  name: string;
-  description: string;
-  available?: boolean;
-  effective?: boolean;
-};
-
-export type AgentCreationInput = {
-  name: string;
-  avatarId: string;
-  avatarDataUrl?: string;
-  model: string;
-  responsibility: string;
-  prompt: string;
-  skillIds: string[];
-};
-
-type AgentCreationDialogProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  modelOptions: CodingModelOption[];
-  skills?: AgentCreationSkillOption[];
-  existingAgentNames?: string[];
-  agent?: CodingProjectAgent | null;
-  onCreate?: (input: AgentCreationInput) => Promise<void>;
-  onUpdate?: (input: AgentCreationInput) => Promise<void>;
-  onArchive?: () => void;
-  title?: string;
-  submitLabel?: string;
-};
-
-function createInitialInput(modelOptions: CodingModelOption[], agent?: CodingProjectAgent | null): AgentCreationInput {
-  if (agent) {
-    return {
-      name: agent.name,
-      avatarId: agent.avatarId,
-      avatarDataUrl: agent.avatarDataUrl,
-      model: agent.model ? codingModelKey(agent.model) : '',
-      responsibility: agent.responsibility.mission,
-      prompt: agent.prompt,
-      skillIds: [...agent.skillIds],
-    };
-  }
-
-  return {
-    name: '',
-    avatarId: agentAvatarOptions[0]?.id ?? 'avatar-01',
-    avatarDataUrl: undefined,
-    model: modelOptions[0]?.key ?? '',
-    responsibility: '',
-    prompt: '',
-    skillIds: [],
-  };
-}
-
-export function AgentCreationDialog({
-  open,
-  onOpenChange,
-  modelOptions,
-  skills = [],
-  existingAgentNames = [],
-  agent = null,
-  onCreate,
-  onUpdate,
-  onArchive,
-  title,
-  submitLabel,
-}: AgentCreationDialogProps) {
-  const editing = Boolean(agent);
-  const [input, setInput] = useState<AgentCreationInput>(() => createInitialInput(modelOptions, agent));
-  const [submitting, setSubmitting] = useState(false);
-  const [skillQuery, setSkillQuery] = useState('');
-  const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
-  const [avatarProcessing, setAvatarProcessing] = useState(false);
-  const avatarUploadInputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    setInput(createInitialInput(modelOptions, agent));
-    setSkillQuery('');
-    setAvatarPickerOpen(false);
-  }, [agent, editing, modelOptions, open]);
-
-  const handleAvatarFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    event.target.value = '';
-    if (!file) return;
-
-    setAvatarProcessing(true);
-    try {
-      const prepared = await prepareAgentAvatar(file);
-      setInput((current) => ({ ...current, avatarDataUrl: prepared.previewUrl }));
-      setAvatarPickerOpen(false);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : '智能体头像图片处理失败');
-    } finally {
-      setAvatarProcessing(false);
-    }
-  };
-
-  const filteredSkills = useMemo(() => {
-    const query = skillQuery.trim().toLocaleLowerCase();
-    if (!query) return skills;
-    return skills.filter((skill) => `${skill.name} ${skill.description}`.toLocaleLowerCase().includes(query));
-  }, [skillQuery, skills]);
-  const selectedAvatar = agentAvatarOptions.find((option) => option.id === input.avatarId) ?? agentAvatarOptions[0];
-  const selectedAvatarSrc = input.avatarDataUrl ?? selectedAvatar?.src;
-
-  const handleSubmit = async () => {
-    const name = input.name.trim();
-    const responsibility = input.responsibility.trim();
-    if (!name || !responsibility || !input.model) {
-      toast.error('请填写智能体名称和职责说明，并配置默认模型。');
-      return;
-    }
-    if (existingAgentNames.some((agentName) => agentName.trim() === name)) {
-      toast.error('智能体名称需要在当前项目内唯一。');
-      return;
-    }
-    const submit = editing ? onUpdate : onCreate;
-    if (!submit) return;
-    setSubmitting(true);
-    try {
-      await submit({ ...input, name, responsibility });
-      onOpenChange(false);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : String(error));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[min(820px,calc(100vh-2rem))] overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{title ?? (editing ? '编辑项目智能体' : '创建项目智能体')}</DialogTitle>
-          <DialogDescription>配置智能体的身份、默认模型、职责、系统指令和插件能力。</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-1">
-          <div>
-            <label htmlFor="agent-create-name" className="text-sm font-semibold">智能体名称 <span className="text-destructive">*</span></label>
-            <div className="mt-2 flex items-center gap-3">
-              <button type="button" aria-label="更换头像" title="更换头像" aria-haspopup="dialog" onClick={() => setAvatarPickerOpen(true)} className="motion-press h-10 w-10 shrink-0 overflow-hidden rounded-xl border border-brand bg-brand-soft p-0.5 shadow-soft">
-                <img src={selectedAvatarSrc} alt={input.avatarDataUrl ? '当前上传头像' : selectedAvatar?.label ?? '当前头像'} className="h-full w-full rounded-lg object-cover [image-rendering:pixelated]" />
-              </button>
-              <Input id="agent-create-name" value={input.name} maxLength={30} placeholder="例如：前端开发智能体" onChange={(event) => setInput((current) => ({ ...current, name: event.target.value }))} className="mt-0 flex-1" />
-            </div>
-          </div>
-          <div>
-            <label htmlFor="agent-create-model" className="text-sm font-semibold">默认模型 <span className="text-destructive">*</span></label>
-            <p className="mt-1 text-xs font-medium text-muted-foreground">新对话默认使用此模型；在对话中临时切换不会修改这里的配置。</p>
-            <select id="agent-create-model" value={input.model} onChange={(event) => setInput((current) => ({ ...current, model: event.target.value }))} className="mt-2 h-10 w-full rounded-xl border border-border bg-surface-input px-3 text-sm">
-              <option value="" disabled>请选择已配置模型</option>
-              {modelOptions.map((option) => <option key={option.key} value={option.key}>{option.label}</option>)}
-            </select>
-          </div>
-          <div>
-            <label htmlFor="agent-create-responsibility" className="text-sm font-semibold">职责说明 <span className="text-destructive">*</span></label>
-            <Input id="agent-create-responsibility" value={input.responsibility} maxLength={200} placeholder="例如：负责把想法拆成清晰的产品计划。" onChange={(event) => setInput((current) => ({ ...current, responsibility: event.target.value }))} className="mt-2" />
-          </div>
-          <section className="space-y-4 rounded-lg border border-border/80 bg-surface-subtle p-4">
-            <h3 className="font-semibold">高级设置</h3>
-            <div><label htmlFor="agent-create-system-instructions" className="text-sm font-semibold">系统指令</label><Textarea id="agent-create-system-instructions" value={input.prompt} onChange={(event) => setInput((current) => ({ ...current, prompt: event.target.value }))} className="mt-2 min-h-28 bg-background font-mono text-xs leading-5" placeholder="可选：定义智能体的工作方式、约束和输出要求。" /></div>
-            <div className="flex items-center justify-between gap-3"><h4 className="text-sm font-semibold">插件能力</h4><Badge className="border border-border/80 bg-background text-foreground">已选 {input.skillIds.length}</Badge></div>
-            {skills.length > 0 ? <>
-              <div className="relative"><Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /><Input aria-label="搜索插件能力" value={skillQuery} onChange={(event) => setSkillQuery(event.target.value)} placeholder="搜索插件能力" className="bg-background pl-9" /></div>
-              <div className="space-y-2">{filteredSkills.map((skill) => { const checked = input.skillIds.includes(skill.id); const unavailable = skill.available === false; return <label key={skill.id} className={cn('flex items-start gap-2 rounded-md border border-border/80 p-2.5', unavailable ? 'cursor-not-allowed opacity-70' : 'cursor-pointer', checked ? 'bg-background' : 'bg-surface-subtle')}><input type="checkbox" aria-label={`绑定插件能力：${skill.name}`} checked={checked} disabled={unavailable} onChange={() => setInput((current) => ({ ...current, skillIds: checked ? current.skillIds.filter((id) => id !== skill.id) : [...current.skillIds, skill.id] }))} /><span><span className="text-sm font-semibold">{skill.name}</span><span className="mt-0.5 block text-xs text-muted-foreground">{skill.description}</span>{unavailable ? <span className="mt-1 block text-xs font-medium text-amber-700">插件未启用；现有分配会保留，但当前不可用。</span> : null}</span></label>; })}{filteredSkills.length === 0 ? <p className="rounded-md border border-dashed border-border/80 p-3 text-center text-xs font-medium text-muted-foreground">没有匹配的插件能力</p> : null}</div>
-            </> : <p className="mt-3 rounded-md border border-dashed border-border/80 p-3 text-xs font-medium text-muted-foreground">当前暂无可分配能力，请先在插件模块完成添加与启用。</p>}
-          </section>
-        </div>
-        <DialogFooter className={cn(agent && onArchive && 'sm:justify-between')}>
-          {agent && onArchive ? <Button type="button" variant="outline" aria-label="归档智能体" className="border-border/80 bg-accent-soft" onClick={onArchive} disabled={submitting}><Trash2 className="mr-2 h-4 w-4" />归档智能体</Button> : null}
-          <div className="flex flex-col-reverse gap-2 sm:ml-auto sm:flex-row">
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>取消</Button>
-            <Button type="button" onClick={() => void handleSubmit()} disabled={submitting || modelOptions.length === 0}>{submitting ? (editing ? '保存中…' : '创建中…') : (submitLabel ?? (editing ? '保存智能体' : '创建并开始对话'))}</Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-      <Dialog open={avatarPickerOpen} onOpenChange={setAvatarPickerOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader><DialogTitle>选择头像</DialogTitle><DialogDescription>点击一个头像替换当前头像。</DialogDescription></DialogHeader>
-          <input
-            ref={avatarUploadInputRef}
-            type="file"
-            accept="image/png,image/jpeg,image/webp"
-            aria-label="上传智能体头像"
-            data-testid="agent-avatar-upload-input"
-            className="sr-only"
-            onChange={(event) => { void handleAvatarFileChange(event); }}
-          />
-          <div className="flex flex-col gap-2 rounded-lg border border-dashed border-brand/35 bg-brand-soft/40 p-3 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-sm font-semibold">上传本地图片</p>
-              <p className="mt-1 text-xs font-medium text-muted-foreground">自动裁剪为 256×256，并优先压缩为 WebP，减少项目配置体积。</p>
-            </div>
-            <Button type="button" variant="outline" className="shrink-0 border-brand/30 bg-background" onClick={() => avatarUploadInputRef.current?.click()} disabled={avatarProcessing}>
-              <Upload className="mr-2 h-4 w-4" />{avatarProcessing ? '处理中…' : '从本地上传'}
-            </Button>
-          </div>
-          {input.avatarDataUrl ? <Button type="button" variant="ghost" className="w-full text-xs text-muted-foreground" onClick={() => { setInput((current) => ({ ...current, avatarDataUrl: undefined })); setAvatarPickerOpen(false); }}>恢复内置头像</Button> : null}
-          <div className="grid grid-cols-8 gap-2">
-            {agentAvatarOptions.map((option) => (
-              <button key={option.id} type="button" aria-label={`选择头像：${option.label}`} aria-pressed={!input.avatarDataUrl && input.avatarId === option.id} onClick={() => { setInput((current) => ({ ...current, avatarId: option.id, avatarDataUrl: undefined })); setAvatarPickerOpen(false); }} className={cn('rounded-lg border p-1', !input.avatarDataUrl && input.avatarId === option.id ? 'border-brand bg-brand-soft shadow-soft' : 'border-border bg-background')}>
-                <img src={option.src} alt="" className="aspect-square w-full rounded object-cover [image-rendering:pixelated]" />
-              </button>
-            ))}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </Dialog>
-  );
-}

src/components/layout/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { CodingProjectConversations } from '@/pages/Chat/CodingProjectConversations';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +18,6 @@ import { Button } from '@/components/ui/button';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { DisclosureContent } from '@/components/ui/disclosure';
-import { getAgentAvatarSrc } from '@/lib/agent-avatars';
 import { getAiHardwareOverview, type AiHardwareOverview } from '@/lib/ai-hardware';
 import {
   AI_HARDWARE_NAVIGATION_EVENT,
@@ -93,7 +93,6 @@ export function Sidebar({
   const setActiveProject = useCodingWorkspaceStore((state) => state.setActiveProject);
   const removeProject = useCodingWorkspaceStore((state) => state.removeProject);
   const createProject = useCodingWorkspaceStore((state) => state.createProject);
-  const projectConfigs = useProjectConfigStore((state) => state.configsByProjectId);
   const loadProjectConfig = useProjectConfigStore((state) => state.load);
   const removeProjectConfig = useProjectConfigStore((state) => state.remove);
   const authUser = useAuthStore((state) => state.user);
@@ -121,6 +120,7 @@ export function Sidebar({
   const [robotSelectedAgentId, setRobotSelectedAgentId] = useState<string | null>(() => readAiHardwareAgentId());
   const accountButtonRef = useRef<HTMLButtonElement | null>(null);
   const accountMenuRef = useRef<HTMLDivElement | null>(null);
+  const projectEntryIntentRef = useRef(0);
   const navigate = useNavigate();
   const location = useLocation();
   const activeModule = getAiModuleForPath(location.pathname);
@@ -274,13 +274,15 @@ export function Sidebar({
   }, []);
 
   const enterProject = useCallback(async (project: CodingProjectSummary) => {
+    const intent = ++projectEntryIntentRef.current;
     const result = await loadProjectConfig(project.id);
+    if (intent !== projectEntryIntentRef.current) return;
     if (result.status !== 'valid' || !result.config) {
       showProjectEntryError(project, result.status === 'missing' ? '项目缺少必要的配置文件' : result.error ?? '项目配置无效');
       return;
     }
     await setActiveProject(project.id);
-    navigate('/chat');
+    if (intent === projectEntryIntentRef.current) navigate('/chat');
   }, [loadProjectConfig, navigate, setActiveProject, showProjectEntryError]);
 
   const readAndEnterProject = useCallback(async (project: CodingProjectSummary) => {
@@ -447,12 +449,10 @@ export function Sidebar({
               ) : null}
 
               {visibleProjects.map((project) => {
-                const projectConfig = projectConfigs[project.id];
                 const active = activeProject?.id === project.id;
                 return (
-                  <button
+                  <div key={project.id}><button
                     type="button"
-                    key={project.id}
                     data-testid={`sidebar-course-project-${project.id}`}
                     aria-label={`进入项目 ${project.name}`}
                     aria-current={active ? 'page' : undefined}
@@ -465,23 +465,10 @@ export function Sidebar({
                     )}
                   >
                     <span className="min-w-0 flex-1 truncate text-sm font-semibold">{project.name}</span>
-                    <div className="flex shrink-0 -space-x-1.5" aria-label="项目智能体">
-                      {projectConfig?.agents.map((agent) => (
-                        <span
-                          key={agent.id}
-                          title={agent.name.trim() || agent.roleName}
-                          className="h-5 w-5 overflow-hidden rounded-full border border-background bg-white"
-                        >
-                          <img
-                            src={getAgentAvatarSrc(agent.avatarId, agent.avatarDataUrl)}
-                            alt=""
-                            className="h-full w-full object-cover [image-rendering:pixelated]"
-                          />
-                        </span>
-                      ))}
-                    </div>
                     <ChevronRight aria-hidden="true" className="h-3.5 w-3.5 shrink-0 -translate-x-0.5 text-muted-foreground opacity-50 transition-[opacity,transform,color] duration-200 ease-out group-hover/project:translate-x-0 group-hover/project:text-foreground group-hover/project:opacity-100 group-focus-visible/project:translate-x-0 group-focus-visible/project:text-foreground group-focus-visible/project:opacity-100" />
                   </button>
+                  {active && <CodingProjectConversations key={project.id} projectId={project.id} />}
+                  </div>
                 );
               })}