从”人工智障”到”AI全能助手”：CopilotKit让我见识了什么叫真正的人机协作

# 传统的AI集成方式 —— 每一个都是坑

# 坑1: 需要自己处理流式响应
def chat_with_ai(message):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[{"role": "user", "content": message}]
    )
    return response.choices[0].message.content
    # 问题：这是同步的，用户要等好几秒才能看到结果
    # 问题：没有流式输出，用户体验很差

# 坑2: 需要自己实现上下文管理
# 你得手动维护一个messages数组，处理token限制
# 处理历史消息的截断
# 处理不同角色的消息格式

# 坑3: 需要自己构建UI组件
# 打字机效果？消息气泡？输入框？加载状态？
# 这些看似简单的东西，做起来全是细节

# 坑4: 需要自己处理多轮对话
# 记忆管理？对话状态持久化？
# 如果用户刷新页面怎么办？

# 坑5: 需要自己实现agent能力
# 工具调用？插件系统？函数执行？
# 这部分代码量巨大，而且很容易出bug

# 使用CopilotKit后的代码 —— 简洁到不敢相信

# 只需要几行代码，就能创建一个完整的AI助手
from copilotkit import CopilotKitSDK

sdk = CopilotKitSDK(
    model="gpt-4",
    system_prompt="你是一个专业的客服助手"
)

# 然后在你的应用里直接使用
# <CopilotKit id="customer-service" />
# 就是这么简单！

# 检查Node.js版本（需要18.0或更高）
node --version
# v20.10.0

# 检查npm或yarn
npm --version
# 10.2.0

# 如果使用Python后端（可选）
python --version
# Python 3.10+

# 全局安装CopilotKit CLI
npm install -g @copilotkit/cli

# 创建一个新项目
copilotkit create my-first-ai-app

# 进入项目目录
cd my-first-ai-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 如果你已经有了一个React/Next.js项目，可以直接添加CopilotKit

# 安装核心包
npm install @copilotkit/react-core @copilotkit/react-ui

# 如果需要后端支持
npm install @copilotkit/langchain

# 如果使用Next.js
npm install @copilotkit/nextjs

my-first-ai-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # 根布局
│   │   ├── page.tsx            # 首页
│   │   └── api/
│   │       └── copilotkit/
│   │           └── route.ts    # CopilotKit API路由
│   ├── components/
│   │   ├── copilot/
│   │   │   ├── ChatWindow.tsx  # 聊天窗口组件
│   │   │   └── MessageBubble.tsx # 消息气泡组件
│   │   └── business/
│   │       └── Dashboard.tsx   # 你的业务组件
│   ├── lib/
│   │   ├── copilotkit.ts       # CopilotKit配置
│   │   └── tools.ts            # 自定义工具
│   └── styles/
│       └── globals.css
├── public/
├── package.json
├── next.config.js
├── tailwind.config.js
└── tsconfig.json

# OpenAI配置
OPENAI_API_KEY=sk-your-api-key-here

# 如果你想使用其他模型
# ANTHROPIC_API_KEY=sk-ant-your-api-key

# CopilotKit配置（可选）
COPILOT_CLOUD_API_KEY=cpk-your-cloud-key

# 应用配置
NEXT_PUBLIC_APP_URL=http://localhost:3000

┌─────────────────────────────────────────────────────────┐
│                    CopilotKit 架构                       │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │   React     │  │   Runtime   │  │    Agents       │  │
│  │   UI        │  │   Engine    │  │    Framework    │  │
│  ├─────────────┤  ├─────────────┤  ├─────────────────┤  │
│  │ • 聊天窗口  │  │ • 上下文管理 │  │ • 工具调用      │  │
│  │ • 消息气泡  │  │ • 流式处理  │  │ • 任务分解      │  │
│  │ • 输入框    │  │ • 状态管理  │  │ • 多步骤执行    │  │
│  │ • 侧边栏    │  │ • 记忆存储  │  │ • 循环控制      │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐    │
│  │              Provider Integration               │    │
│  │  OpenAI  │  Anthropic  │  Azure  │  自定义      │    │
│  └─────────────────────────────────────────────────┘    │
│                                                         │
└─────────────────────────────────────────────────────────┘

// src/components/copilot/BasicChat.tsx
"use client";

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export function BasicChat() {
  return (
    // CopilotKit 是所有AI功能的容器
    // 它需要包裹所有使用AI功能的组件
    <CopilotKit
      // API端点，指向你的后端
      url="/api/copilotkit"
      // 可选：默认的系统提示词
      defaultSystemMessage="你是一个友好、专业的AI助手。"
    >
      {/* CopilotPopup 是可弹出的聊天窗口 */}
      <CopilotPopup
        // 是否默认打开
        defaultOpen={false}
        // 自定义触发按钮的标签
        triggerLabel="💬 咨询AI助手"
        // 自定义样式（可选）
        className="my-custom-chat"
      />
    </CopilotKit>
  );
}

// src/components/copilot/InlineAssistant.tsx
"use client";

import { CopilotKit, useCopilotAction } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";

export function InlineAssistant() {
  return (
    <CopilotKit url="/api/copilotkit">
      <div className="flex">
        {/* 侧边栏模式 */}
        <CopilotSidebar
          // 侧边栏位置
          side="right"
          // 侧边栏宽度
          width="350px"
        >
          {/* 这里放你的主应用内容 */}
          <YourMainApp />
        </CopilotSidebar>
      </div>
    </CopilotKit>
  );
}

// src/components/copilot/MessageBubble.tsx
"use client";

import { useCopilotChat } from "@copilotkit/react-core";
import { cn } from "@/lib/utils";

export function MessageList() {
  // useCopilotChat 是一个hook，用于获取聊天相关的状态和方法
  const { messages, isLoading } = useCopilotChat();

  return (
    <div className="flex flex-col gap-4 p-4">
      {messages.map((message, index) => (
        <div
          key={index}
          className={cn(
            "flex",
            message.role === "user" ? "justify-end" : "justify-start"
          )}
        >
          <div
            className={cn(
              "max-w-[80%] rounded-2xl px-4 py-2",
              message.role === "user"
                ? "bg-blue-500 text-white"
                : "bg-gray-100 text-gray-900"
            )}
          >
            {/* 支持Markdown渲染 */}
            <div className="prose prose-sm">
              {message.content}
            </div>

            {/* 显示时间戳 */}
            <div className="text-xs opacity-70 mt-1">
              {new Date(message.createdAt).toLocaleTimeString()}
            </div>
          </div>
        </div>
      ))}

      {/* 加载指示器 */}
      {isLoading && (
        <div className="flex justify-start">
          <div className="bg-gray-100 rounded-2xl px-4 py-2">
            <div className="flex gap-1">
              <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
              <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-75" />
              <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-150" />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// src/components/copilot/ContextAwareAssistant.tsx
"use client";

import { 
  CopilotKit, 
  useCopilotContext 
} from "@copilotkit/react-core";

export function ContextAwareAssistant() {
  // useCopilotContext 提供对上下文的访问
  const context = useCopilotContext();

  // 获取当前选中的文本
  const selectedText = context.selectedText;

  // 获取当前页面的URL
  const currentUrl = context.url;

  // 获取应用自定义的上下文数据
  const customContext = context.get("user_preferences");
  const documentContent = context.get("document_content");

  return (
    <CopilotKit url="/api/copilotkit">
      <div className="p-4">
        <h2>当前上下文信息</h2>
        <ul>
          <li>选中文本: {selectedText || "无"}</li>
          <li>当前页面: {currentUrl}</li>
          <li>用户偏好: {JSON.stringify(customContext)}</li>
          <li>文档内容: {documentContent?.substring(0, 100)}...</li>
        </ul>
      </div>
    </CopilotKit>
  );
}

// src/components/copilot/PersistentChat.tsx
"use client";

import { 
  CopilotKit, 
  useCopilotChat 
} from "@copilotkit/react-core";
import { useEffect } from "react";
import { useLocalStorage } from "@/hooks/useLocalStorage";

export function PersistentChat() {
  // 自定义的本地存储hook
  const [savedMessages, setSavedMessages] = useLocalStorage<
    Array<{role: string; content: string}>
  >("chat-history", []);

  const { messages, appendMessage, clearMessages } = useCopilotChat({
    // 启用消息持久化
    enablePersistence: true,
    // 持久化存储位置
    storageKey: "chat-history",
    // 加载历史消息
    initialMessages: savedMessages,
  });

  // 当消息变化时，自动保存
  useEffect(() => {
    setSavedMessages(messages);
  }, [messages, setSavedMessages]);

  return (
    <div className="flex flex-col h-[500px]">
      <div className="flex-1 overflow-y-auto">
        {messages.map((msg, i) => (
          <MessageItem key={i} message={msg} />
        ))}
      </div>

      <div className="flex gap-2 p-4 border-t">
        <button
          onClick={() => clearMessages()}
          className="px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded"
        >
          清空对话
        </button>
      </div>
    </div>
  );
}

// src/lib/tools.ts
"use client";

import { 
  Tool, 
  tool 
} from "@copilotkit/langchain";

// 定义一个简单的工具：获取天气
export const getWeatherTool = tool({
  // 工具名称，AI会看到这个名称
  name: "get_weather",

  // 工具描述，这非常重要！
  // AI会根据这个描述决定是否调用这个工具
  description: "获取指定城市的天气信息。当用户询问某个城市的天气时使用。",

  // 参数模式定义（使用Zod schema）
  parameters: {
    type: "object",
    properties: {
      city: {
        type: "string",
        description: "城市名称，例如：北京、上海、东京",
      },
      unit: {
        type: "string",
        enum: ["celsius", "fahrenheit"],
        description: "温度单位，默认是摄氏度",
        default: "celsius",
      },
    },
    required: ["city"],
  },

  // 工具的实际执行逻辑
  execute: async ({ city, unit }) => {
    // 这里是你的实际业务逻辑
    const response = await fetch(
      `https://api.weather.example.com?city=${city}&unit=${unit}`
    );
    const data = await response.json();

    return `当前${city}的天气是${data.condition}，温度为${data.temperature}°${
      unit === "celsius" ? "C" : "F"
    }。`;
  },
});

// src/lib/database-tools.ts
"use client";

import { tool } from "@copilotkit/langchain";
import { z } from "zod";

// 数据库查询工具
export const queryDatabaseTool = tool({
  name: "query_database",

  description: `在数据库中执行SQL查询。这个工具只能用于：
  - 查询用户请求的数据
  - 不能执行UPDATE、DELETE等危险操作
  - 每次查询最多返回100条记录

  当用户想要查看、分析数据报告时使用。`,

  parameters: z.object({
    sql: z.string().describe("要执行的SQL查询语句"),
    params: z.record(z.any()).optional().describe("查询参数"),
  }),

  execute: async ({ sql, params }) => {
    // 安全性检查
    const dangerousKeywords = ["DROP", "DELETE", "UPDATE", "INSERT", "TRUNCATE"];
    const upperSql = sql.toUpperCase();

    for (const keyword of dangerousKeywords) {
      if (upperSql.includes(keyword)) {
        return `错误：不允许执行包含 "${keyword}" 的操作。`;
      }
    }

    try {
      // 执行查询
      const results = await db.query(sql, params);

      // 格式化返回结果
      return {
        rowCount: results.rows.length,
        columns: results.fields.map(f => f.name),
        rows: results.rows,
      };
    } catch (error) {
      return `查询出错：${error.message}`;
    }
  },
});

// src/lib/file-tools.ts
"use client";

import { tool } from "@copilotkit/langchain";
import { z } from "zod";
import { writeFile, readFile, glob } from "fs/promises";
import path from "path";

export const fileSystemTools = {
  // 读取文件
  readFileTool: tool({
    name: "read_file",
    description: "读取指定路径的文件内容。用于查看代码、配置文件或文档。",
    parameters: z.object({
      filePath: z.string().describe("文件的完整路径"),
    }),
    execute: async ({ filePath }) => {
      try {
        const absolutePath = path.resolve(filePath);
        const content = await readFile(absolutePath, "utf-8");
        return content;
      } catch (error) {
        return `读取文件失败：${error.message}`;
      }
    },
  }),

  // 写入文件
  writeFileTool: tool({
    name: "write_file",
    description: "创建或更新文件内容。谨慎使用，仅用于用户明确要求的文件修改。",
    parameters: z.object({
      filePath: z.string().describe("文件的完整路径"),
      content: z.string().describe("要写入的内容"),
      createDirectories: z.boolean().optional().describe("是否自动创建目录"),
    }),
    execute: async ({ filePath, content, createDirectories = false }) => {
      try {
        const absolutePath = path.resolve(filePath);

        if (createDirectories) {
          const dir = path.dirname(absolutePath);
          await mkdir(dir, { recursive: true });
        }

        await writeFile(absolutePath, content, "utf-8");
        return `文件已成功写入：${absolutePath}`;
      } catch (error) {
        return `写入文件失败：${error.message}`;
      }
    },
  }),

  // 搜索文件
  searchFilesTool: tool({
    name: "search_files",
    description: "根据模式搜索文件。例如：搜索所有.tsx文件、查找包含特定内容的文件等。",
    parameters: z.object({
      pattern: z.string().describe("glob模式，例如：*.tsx、src/**/*.js"),
      basePath: z.string().optional().describe("搜索的起始路径"),
    }),
    execute: async ({ pattern, basePath = "." }) => {
      try {
        const files = await glob(pattern, { cwd: basePath });
        return {
          count: files.length,
          files: files.slice(0, 50), // 限制返回数量
        };
      } catch (error) {
        return `搜索失败：${error.message}`;
      }
    },
  }),
};

// src/app/api/copilotkit/route.ts
import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime";
import { NextRequest } from "next/server";

// 你的知识库数据（实际项目中可以从数据库获取）
const knowledgeBase = [
  {
    question: "如何重置密码？",
    answer: "请访问 /forgot-password 页面，输入您的注册邮箱，我们会发送重置链接。",
  },
  {
    question: "如何联系人工客服？",
    answer: "您可以通过以下方式联系我们：\n- 电话：400-123-4567\n- 邮箱：support@example.com\n- 工作时间：周一至周五 9:00-18:00",
  },
  {
    question: "如何开通会员？",
    answer: "请访问 /pricing 页面选择适合您的会员套餐，完成支付后即可开通。",
  },
];

const copilotKit = new CopilotRuntime({
  // 公开可访问的工具列表
  tools: [
    {
      name: "searchKnowledgeBase",
      description: "在知识库中搜索相关内容。当用户询问产品使用、常见问题时使用。",
      parameters: {
        type: "object",
        properties: {
          query: {
            type: "string",
            description: "用户的查询内容",
          },
        },
        required: ["query"],
      },
      handler: async ({ query }) => {
        // 简单的关键词匹配（实际项目可以用更复杂的算法）
        const results = knowledgeBase.filter(
          (item) =>
            item.question.includes(query) || item.answer.includes(query)
        );

        if (results.length === 0) {
          return "抱歉，我在知识库中没有找到相关内容。建议您联系人工客服获取帮助。";
        }

        return results.map((r) => `${r.question}\n${r.answer}`).join("\n\n");
      },
    },
    {
      name: "transferToHuman",
      description: "将对话转接给人工客服。当用户明确要求人工服务、AI无法回答或用户表示不满时使用。",
      parameters: {
        type: "object",
        properties: {
          reason: {
            type: "string",
            description: "转接原因",
          },
        },
      },
      handler: async ({ reason }) => {
        // 这里可以调用你的工单系统
        console.log("转接人工:", reason);
        return "好的，我将为您转接人工客服。请稍候...";
      },
    },
  ],
});

export async function POST(req: NextRequest) {
  const { headers } = req;

  const response = await copilotKit.generateText({
    messages: req.messages,
    systemPrompt: `你是公司的智能客服助手。你的职责是：
    1. 友好、专业地回答用户的问题
    2. 优先使用知识库回答问题
    3. 如果知识库无法回答，可以基于你的知识给出一般性建议
    4. 如果问题无法解决，主动建议转人工
    5. 永远保持耐心和礼貌
    6. 不要编造不存在的产品功能或政策`,
  });

  return response;
}

// src/components/customer-service/CustomerServiceChat.tsx
"use client";

import { CopilotKit, useCopilotChat } from "@copilotkit/react-core";
import { CopilotPopup } from "@copilotkit/react-ui";
import { useState, useRef, useEffect } from "react";
import "@copilotkit/react-ui/styles.css";

export function CustomerServiceChat() {
  return (
    <CopilotKit url="/api/copilotkit">
      <CopilotPopup
        defaultOpen={false}
        triggerLabel="在线咨询"
        // 自定义弹窗样式
        className="customer-service-popup"
        // 弹窗位置
        position="bottom-right"
      />
    </CopilotKit>
  );
}

// 更高级的客服组件 - 带有满意度评价
export function AdvancedCustomerService() {
  const { 
    messages, 
    isLoading, 
    sendMessage, 
    setMessages 
  } = useCopilotChat();
  const [inputValue, setInputValue] = useState("");
  const [showRating, setShowRating] = useState(false);
  const [rating, setRating] = useState(0);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到底部
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  // 当对话结束时显示评价
  useEffect(() => {
    if (!isLoading && messages.length > 0) {
      const lastMessage = messages[messages.length - 1];
      if (lastMessage.role === "assistant") {
        setShowRating(true);
      }
    }
  }, [isLoading, messages]);

  const handleSend = async () => {
    if (!inputValue.trim() || isLoading) return;

    const userMessage = inputValue;
    setInputValue("");

    await sendMessage(userMessage);
  };

  const handleRating = async (score: number) => {
    setRating(score);
    // 发送评价到服务器
    console.log("用户评价:", score, "对话历史:", messages);

    setTimeout(() => {
      setShowRating(false);
      setRating(0);
    }, 2000);
  };

  return (
    <div className="flex flex-col h-[600px] w-[400px] bg-white rounded-lg shadow-xl overflow-hidden">
      {/* 头部 */}
      <div className="bg-blue-600 text-white p-4 flex items-center gap-3">
        <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center text-blue-600 font-bold">
          AI
        </div>
        <div>
          <h3 className="font-semibold">智能客服助手</h3>
          <p className="text-xs text-blue-100">在线 · 随时为您服务</p>
        </div>
      </div>

      {/* 消息区域 */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((msg, index) => (
          <div
            key={index}
            className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
          >
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-3 ${
                msg.role === "user"
                  ? "bg-blue-500 text-white rounded-br-md"
                  : "bg-gray-100 text-gray-800 rounded-bl-md"
              }`}
            >
              <div className="text-sm whitespace-pre-wrap">
                {msg.content}
              </div>
              <div
                className={`text-xs mt-1 ${
                  msg.role === "user" ? "text-blue-100" : "text-gray-400"
                }`}
              >
                {new Date(msg.createdAt || Date.now()).toLocaleTimeString()}
              </div>
            </div>
          </div>
        ))}

        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-gray-100 rounded-2xl rounded-bl-md px-4 py-3">
              <div className="flex gap-1">
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-75" />
                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-150" />
              </div>
            </div>
          </div>
        )}

        {/* 评价组件 */}
        {showRating && !isLoading && rating === 0 && (
          <div className="bg-gray-50 rounded-lg p-4 text-center">
            <p className="text-sm text-gray-600 mb-2">本次服务满意吗？</p>
            <div className="flex justify-center gap-2">
              {[1, 2, 3, 4, 5].map((star) => (
                <button
                  key={star}
                  onClick={() => handleRating(star)}
                  className="text-2xl hover:scale-110 transition-transform"
                >
                  ⭐
                </button>
              ))}
            </div>
          </div>
        )}

        {rating > 0 && (
          <div className="bg-green-50 rounded-lg p-4 text-center">
            <p className="text-green-600 font-medium">感谢您的评价！</p>
          </div>
        )}

        <div ref={messagesEndRef} />
      </div>

      {/* 输入区域 */}
      <div className="border-t p-4">
        <div className="flex gap-2">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyPress={(e) => e.key === "Enter" && handleSend()}
            placeholder="请输入您的问题..."
            className="flex-1 px-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            onClick={handleSend}
            disabled={!inputValue.trim() || isLoading}
            className="px-6 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            发送
          </button>
        </div>
      </div>
    </div>
  );
}

// src/lib/analytics-tools.ts
"use client";

import { tool } from "@copilotkit/langchain";
import { z } from "zod";
import { analyzeCSV, generateChart } from "@/lib/data-processing";

// 数据分析工具
export const analyzeDataTool = tool({
  name: "analyze_data",
  description: `对上传的数据进行分析。这个工具可以：
  - 计算各种统计指标（平均值、中位数、总和等）
  - 按维度分组统计
  - 找出数据中的规律和异常
  - 生成数据洞察

  当用户询问数据分析、统计、趋势等问题时使用。`,

  parameters: z.object({
    action: z.enum([
      "summary",      // 总体统计
      "group_by",     // 分组统计
      "trend",        // 趋势分析
      "outlier",      // 异常检测
      "correlation",  // 相关性分析
    ]).describe("要执行的分析动作"),

    columns: z.array(z.string()).optional().describe("要分析的列"),

    groupBy: z.string().optional().describe("分组字段"),

    options: z.record(z.any()).optional().describe("其他选项"),
  }),

  execute: async ({ action, columns, groupBy, options }) => {
    // 获取当前加载的数据
    const data = getCurrentData();

    if (!data) {
      return "请先上传数据文件。";
    }

    switch (action) {
      case "summary":
        return calculateSummary(data, columns);

      case "group_by":
        return calculateGroupBy(data, groupBy, columns);

      case "trend":
        return analyzeTrend(data, columns, options);

      case "outlier":
        return detectOutliers(data, columns);

      case "correlation":
        return calculateCorrelation(data, columns);

      default:
        return "不支持的分析类型";
    }
  },
});

// 数据可视化工具
export const visualizeDataTool = tool({
  name: "visualize_data",
  description: `创建数据可视化图表。支持多种图表类型：
  - 折线图：展示趋势变化
  - 柱状图：比较不同类别
  - 饼图：展示占比
  - 散点图：展示相关性

  当用户需要图表来理解数据时使用。`,

  parameters: z.object({
    chartType: z.enum(["line", "bar", "pie", "scatter", "histogram"]),
    xAxis: z.string().describe("X轴字段"),
    yAxis: z.string().or(z.array(z.string())).describe("Y轴字段"),
    title: z.string().optional().describe("图表标题"),
    options: z.record(z.any()).optional().describe("其他配置"),
  }),

  execute: async ({ chartType, xAxis, yAxis, title, options }) => {
    const data = getCurrentData();

    if (!data) {
      return "请先上传数据文件。";
    }

    const chartConfig = {
      type: chartType,
      xAxis,
      yAxis,
      title: title || "数据可视化",
      data,
      ...options,
    };

    const chartHtml = generateChart(chartConfig);

    return {
      type: "chart",
      html: chartHtml,
      message: `已生成${getChartTypeName(chartType)}：${title || "数据可视化"}`,
    };
  },
});

// src/components/analytics/DataAssistant.tsx
"use client";

import { CopilotKit, useCopilotChat, useCopilotAction } from "@copilotkit/react-core";
import { useState, useRef } from "react";
import { Upload, FileSpreadsheet, MessageSquare, BarChart3 } from "lucide-react";
import "@copilotkit/react-ui/styles.css";

export function DataAssistant() {
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const [dataPreview, setDataPreview] = useState<any[]>([]);
  const [chartHtml, setChartHtml] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const { 
    messages, 
    isLoading, 
    sendMessage, 
    appendMessage 
  } = useCopilotChat();

  // 处理文件上传
  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    setUploadedFile(file);

    // 解析CSV文件
    const text = await file.text();
    const data = parseCSV(text);
    setDataPreview(data.slice(0, 10)); // 只显示前10行预览

    // 将数据注入到AI上下文中
    await appendMessage({
      role: "system",
      content: `用户上传了数据文件：${file.name}
      数据包含 ${data.length} 行。
      列名：${Object.keys(data[0] || {}).join(", ")}
      数据预览：
      ${JSON.stringify(data.slice(0, 5), null, 2)}`,
    });
  };

  // 处理自然语言查询
  const handleQuery = async (query: string) => {
    await sendMessage(query);
  };

  // 监听AI返回的图表
  useCopilotAction({
    name: "visualize_data",
    description: "创建数据可视化图表",
    handler: async (result) => {
      if (result.type === "chart" && result.html) {
        setChartHtml(result.html);
      }
      return result.message;
    },
  });

  return (
    <CopilotKit url="/api/copilotkit">
      <div className="flex h-screen">
        {/* 左侧：数据面板 */}
        <div className="w-1/3 border-r bg-gray-50 p-6 overflow-y-auto">
          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
            <FileSpreadsheet className="w-5 h-5" />
            数据面板
          </h2>

          {/* 文件上传 */}
          <div
            className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-500 cursor-pointer transition-colors"
            onClick={() => fileInputRef.current?.click()}
          >
            <Upload className="w-12 h-12 mx-auto text-gray-400 mb-2" />
            <p className="text-gray-600">
              {uploadedFile ? uploadedFile.name : "点击上传数据文件"}
            </p>
            <p className="text-sm text-gray-400 mt-1">
              支持 CSV、Excel 格式
            </p>
            <input
              ref={fileInputRef}
              type="file"
              accept=".csv,.xlsx,.xls"
              onChange={handleFileUpload}
              className="hidden"
            />
          </div>

          {/* 数据预览 */}
          {dataPreview.length > 0 && (
            <div className="mt-6">
              <h3 className="font-medium mb-2">数据预览（前10行）</h3>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr>
                      {Object.keys(dataPreview[0]).map((key) => (
                        <th key={key} className="px-2 py-1 bg-gray-200 text-left">
                          {key}
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {dataPreview.map((row, i) => (
                      <tr key={i} className="border-b">
                        {Object.values(row).map((val, j) => (
                          <td key={j} className="px-2 py-1">
                            {String(val)}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* 图表展示 */}
          {chartHtml && (
            <div className="mt-6">
              <h3 className="font-medium mb-2 flex items-center gap-2">
                <BarChart3 className="w-4 h-4" />
                可视化结果
              </h3>
              <div
                className="bg-white rounded-lg p-4"
                dangerouslySetInnerHTML={{ __html: chartHtml }}
              />
            </div>
          )}
        </div>

        {/* 右侧：聊天界面 */}
        <div className="flex-1 flex flex-col bg-white">
          <div className="flex-1 overflow-y-auto p-6 space-y-4">
            {messages.length === 0 && (
              <div className="text-center text-gray-400 mt-20">
                <MessageSquare className="w-16 h-16 mx-auto mb-4 opacity-50" />
                <p>上传数据后，用自然语言询问数据问题</p>
                <p className="text-sm mt-2">
                  例如："分析销售数据的趋势"
                </p>
              </div>
            )}

            {messages.map((msg, index) => (
              <div
                key={index}
                className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
              >
                <div
                  className={`max-w-[70%] rounded-2xl px-4 py-3 ${
                    msg.role === "user"
                      ? "bg-blue-500 text-white"
                      : "bg-gray-100 text-gray-800"
                  }`}
                >
                  <div className="prose prose-sm max-w-none">
                    {msg.content}
                  </div>
                </div>
              </div>
            ))}

            {isLoading && (
              <div className="flex justify-start">
                <div className="bg-gray-100 rounded-2xl px-4 py-3">
                  <div className="flex gap-1">
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-75" />
                    <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-150" />
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* 输入框 */}
          <div className="border-t p-4">
            <div className="flex gap-2 max-w-3xl mx-auto">
              <input
                type="text"
                placeholder="用自然语言询问数据..."
                className="flex-1 px-4 py-3 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
                onKeyPress={(e) => {
                  if (e.key === "Enter" && !isLoading) {
                    handleQuery(e.currentTarget.value);
                    e.currentTarget.value = "";
                  }
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </CopilotKit>
  );
}

// CSV解析辅助函数
function parseCSV(text: string): any[] {
  const lines = text.split("\n");
  const headers = lines[0].split(",").map(h => h.trim());

  return lines.slice(1).filter(line => line.trim()).map(line => {
    const values = line.split(",").map(v => v.trim());
    const row: any = {};
    headers.forEach((header, i) => {
      row[header] = values[i] || "";
    });
    return row;
  });
}

// src/lib/code-review-tools.ts
"use client";

import { tool } from "@copilotkit/langchain";
import { z } from "zod";
import { readFile, glob } from "fs/promises";
import path from "path";

// 代码审查工具
export const codeReviewTool = tool({
  name: "review_code",
  description: `对代码进行全面审查。检查内容包括：
  - 代码质量问题（复杂度、重复代码）
  - 安全漏洞（SQL注入、XSS、敏感信息泄露）
  - 性能问题（内存泄漏、无效循环）
  - 代码风格和最佳实践
  - 测试覆盖率

  当用户要求审查代码或指出代码问题时使用。`,

  parameters: z.object({
    filePath: z.string().describe("要审查的文件路径"),
    reviewTypes: z.array(
      z.enum(["security", "performance", "style", "best-practice"])
    ).optional().describe("要检查的类型"),
  }),

  execute: async ({ filePath, reviewTypes = ["security", "performance", "style"] }) => {
    try {
      const absolutePath = path.resolve(filePath);
      const content = await readFile(absolutePath, "utf-8");
      const extension = path.extname(filePath);

      const results: string[] = [];

      // 安全检查
      if (reviewTypes.includes("security")) {
        const securityIssues = checkSecurity(content, extension);
        results.push(...securityIssues);
      }

      // 性能检查
      if (reviewTypes.includes("performance")) {
        const performanceIssues = checkPerformance(content, extension);
        results.push(...performanceIssues);
      }

      // 代码风格
      if (reviewTypes.includes("style")) {
        const styleIssues = checkStyle(content, extension);
        results.push(...styleIssues);
      }

      if (results.length === 0) {
        return `✅ 代码审查通过！\n\n文件：${filePath}\n未发现问题。`;
      }

      return `🔍 代码审查报告\n\n文件：${filePath}\n\n发现问题 ${results.length} 个：\n\n${results.join("\n\n")}`;
    } catch (error) {
      return `无法读取文件：${error.message}`;
    }
  },
});

// 安全检查规则
function checkSecurity(content: string, extension: string): string[] {
  const issues: string[] = [];

  // 模板：SQL注入检测
  if (content.includes("SELECT") && content.includes("+") && extension === ".js") {
    issues.push(`⚠️ 安全风险：可能存在SQL注入\n行号：${findLineNumber(content, "SELECT")}\n建议：使用参数化查询`);
  }

  // 模板：硬编码密码
  if (content.match(/password\s*=\s*["'][^"']{1,50}["']/i)) {
    issues.push(`🔴 安全漏洞：发现硬编码密码\n建议：将敏感信息移至环境变量`);
  }

  // 模板：eval使用
  if (content.includes("eval(")) {
    issues.push(`⚠️ 安全风险：使用eval可能引发安全问题\n建议：考虑使用更安全的替代方案`);
  }

  return issues;
}

// 性能检查规则
function checkPerformance(content: string, extension: string): string[] {
  const issues: string[] = [];

  // 嵌套循环检测
  const nestedLoops = detectNestedLoops(content);
  if (nestedLoops > 2) {
    issues.push(`⚠️ 性能问题：发现${nestedLoops}层嵌套循环\n建议：考虑优化算法复杂度`);
  }

  // 大数组操作
  if (content.includes(".map(") && content.includes(".map(").length > 5) {
    issues.push(`💡 性能提示：连续使用多个map操作\n建议：考虑合并或使用流式处理`);
  }

  return issues;
}

// 代码风格检查
function checkStyle(content: string, extension: string): string[] {
  const issues: string[] = [];

  // 过长函数检测
  const functionLengths = detectFunctionLengths(content);
  for (const { name, length } of functionLengths) {
    if (length > 100) {
      issues.push(`📝 代码风格：函数 ${name} 过长 (${length}行)\n建议：考虑拆分为更小的函数`);
    }
  }

  // 缺少注释
  const linesWithoutComments = countUncommentedLines(content);
  if (linesWithoutComments > 100) {
    issues.push(`📝 代码风格：${linesWithoutComments}行代码缺少注释\n建议：添加必要的代码注释`);
  }

  return issues;
}

// 辅助函数
function findLineNumber(content: string, keyword: string): number {
  const lines = content.split("\n");
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].includes(keyword)) {
      return i + 1;
    }
  }
  return 0;
}

function detectNestedLoops(content: string): number {
  let maxDepth = 0;
  let currentDepth = 0;
  const lines = content.split("\n");

  for (const line of lines) {
    const forMatches = (line.match(/\bfor\s*\(/g) || []).length;
    const whileMatches = (line.match(/\bwhile\s*\(/g) || []).length;
    const openBraces = (line.match(/\{/g) || []).length;
    const closeBraces = (line.match(/\}/g) || []).length;

    currentDepth += forMatches + whileMatches;
    maxDepth = Math.max(maxDepth, currentDepth);
    currentDepth -= closeBraces;
  }

  return maxDepth;
}

function detectFunctionLengths(content: string): Array<{ name: string; length: number }> {
  const results: Array<{ name: string; length: number }> = [];
  const lines = content.split("\n");

  let inFunction = false;
  let functionName = "";
  let functionStart = 0;
  let braceCount = 0;

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    // 检测函数开始
    const funcMatch = line.match(/(?:function|def|const|let|var)\s+(\w+)\s*[=\(]/);
    if (funcMatch && !inFunction) {
      inFunction = true;
      functionName = funcMatch[1];
      functionStart = i;
      braceCount = 0;
    }

    // 统计大括号或缩进
    if (inFunction) {
      braceCount += (line.match(/\{/g) || []).length;
      braceCount -= (line.match(/\}/g) || []).length;

      if (braceCount === 0 && line.includes("}")) {
        results.push({
          name: functionName,
          length: i - functionStart + 1,
        });
        inFunction = false;
      }
    }
  }

  return results;
}

function countUncommentedLines(content: string): number {
  const lines = content.split("\n");
  let count = 0;

  for (const line of lines) {
    const trimmed = line.trim();
    if (
      trimmed.length > 0 &&
      !trimmed.startsWith("//") &&
      !trimmed.startsWith("#") &&
      !trimmed.startsWith("/*") &&
      !trimmed.startsWith("*")
    ) {
      count++;
    }
  }

  return count;
}

// src/components/code-review/CodeReviewPanel.tsx
"use client";

import { CopilotKit, useCopilotChat, useCopilotAction } from "@copilotkit/react-core";
import { useState } from "react";
import { FileCode, AlertTriangle, CheckCircle, Lightbulb } from "lucide-react";
import "@copilotkit/react-ui/styles.css";

interface ReviewResult {
  filePath: string;
  issues: Array<{
    type: "error" | "warning" | "info";
    message: string;
    line?: number;
    suggestion?: string;
  }>;
  summary: {
    total: number;
    errors: number;
    warnings: number;
    suggestions: number;
  };
}

export function CodeReviewPanel() {
  const [currentFile, setCurrentFile] = useState<string>("");
  const [reviewResults, setReviewResults] = useState<ReviewResult[]>([]);
  const [selectedResult, setSelectedResult] = useState<ReviewResult | null>(null);

  const { messages, isLoading, sendMessage } = useCopilotChat();

  // 监听AI的代码审查结果
  useCopilotAction({
    name: "review_code",
    description: "审查代码文件",
    handler: async (result) => {
      // 解析审查结果
      const parsed = parseReviewResult(result, currentFile);
      setReviewResults((prev) => [...prev, parsed]);
      setSelectedResult(parsed);
      return result;
    },
  });

  const handleReviewRequest = async () => {
    if (!currentFile) return;

    await sendMessage(`请审查这个文件：${currentFile}`);
  };

  return (
    <CopilotKit url="/api/copilotkit">
      <div className="flex h-screen">
        {/* 左侧：文件列表 */}
        <div className="w-64 border-r bg-gray-50 p-4">
          <h2 className="font-semibold mb-4 flex items-center gap-2">
            <FileCode className="w-5 h-5" />
            文件列表
          </h2>

          <input
            type="text"
            placeholder="输入文件路径..."
            value={currentFile}
            onChange={(e) => setCurrentFile(e.target.value)}
            className="w-full px-3 py-2 border rounded mb-4 text-sm"
          />

          <button
            onClick={handleReviewRequest}
            disabled={!currentFile || isLoading}
            className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 mb-4"
          >
            {isLoading ? "审查中..." : "开始审查"}
          </button>

          {/* 审查历史 */}
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-gray-500">审查历史</h3>
            {reviewResults.map((result, index) => (
              <button
                key={index}
                onClick={() => setSelectedResult(result)}
                className={`w-full text-left p-2 rounded text-sm ${
                  selectedResult === result
                    ? "bg-blue-100 border border-blue-300"
                    : "hover:bg-gray-100"
                }`}
              >
                <div className="truncate">{path.basename(result.filePath)}</div>
                <div className="flex gap-2 mt-1">
                  <span className="text-red-500">{result.summary.errors}</span>
                  <span className="text-yellow-500">{result.summary.warnings}</span>
                  <span className="text-blue-500">{result.summary.suggestions}</span>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* 中间：代码展示 */}
        <div className="flex-1 p-6 overflow-auto">
          {selectedResult ? (
            <div>
              <h2 className="text-xl font-semibold mb-4">
                审查报告：{selectedResult.filePath}
              </h2>

              {/* 统计摘要 */}
              <div className="grid grid-cols-4 gap-4 mb-6">
                <div className="bg-gray-100 rounded-lg p-4 text-center">
                  <div className="text-2xl font-bold">{selectedResult.summary.total}</div>
                  <div className="text-sm text-gray-600">总问题数</div>
                </div>
                <div className="bg-red-50 rounded-lg p-4 text-center">
                  <div className="text-2xl font-bold text-red-600">
                    {selectedResult.summary.errors}
                  </div>
                  <div className="text-sm text-red-600">错误</div>
                </div>
                <div className="bg-yellow-50 rounded-lg p-4 text-center">
                  <div className="text-2xl font-bold text-yellow-600">
                    {selectedResult.summary.warnings}
                  </div>
                  <div className="text-sm text-yellow-600">警告</div>
                </div>
                <div className="bg-blue-50 rounded-lg p-4 text-center">
                  <div className="text-2xl font-bold text-blue-600">
                    {selectedResult.summary.suggestions}
                  </div>
                  <div className="text-sm text-blue-600">建议</div>
                </div>
              </div>

              {/* 问题列表 */}
              <div className="space-y-3">
                {selectedResult.issues.map((issue, index) => (
                  <div
                    key={index}
                    className={`border rounded-lg p-4 ${
                      issue.type === "error"
                        ? "border-red-200 bg-red-50"
                        : issue.type === "warning"
                        ? "border-yellow-200 bg-yellow-50"
                        : "border-blue-200 bg-blue-50"
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      {issue.type === "error" ? (
                        <AlertTriangle className="w-5 h-5 text-red-500 flex-shrink-0" />
                      ) : issue.type === "warning" ? (
                        <AlertTriangle className="w-5 h-5 text-yellow-500 flex-shrink-0" />
                      ) : (
                        <Lightbulb className="w-5 h-5 text-blue-500 flex-shrink-0" />
                      )}
                      <div className="flex-1">
                        <p className="font-medium">{issue.message}</p>
                        {issue.line && (
                          <p className="text-sm text-gray-500 mt-1">
                            行号：{issue.line}
                          </p>
                        )}
                        {issue.suggestion && (
                          <p className="text-sm text-green-600 mt-2">
                            💡 建议：{issue.suggestion}
                          </p>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {selectedResult.summary.total === 0 && (
                <div className="text-center py-12 text-gray-400">
                  <CheckCircle className="w-16 h-16 mx-auto mb-4 text-green-500" />
                  <p className="text-lg">代码审查通过！</p>
                  <p>未发现问题</p>
                </div>
              )}
            </div>
          ) : (
            <div className="flex items-center justify-center h-full text-gray-400">
              <div className="text-center">
                <FileCode className="w-16 h-16 mx-auto mb-4 opacity-50" />
                <p>选择一个文件开始审查</p>
              </div>
            </div>
          )}
        </div>

        {/* 右侧：AI对话 */}
        <div className="w-80 border-l bg-gray-50 flex flex-col">
          <div className="p-4 border-b bg-white">
            <h3 className="font-semibold">AI 助手</h3>
          </div>

          <div className="flex-1 overflow-y-auto p-4 space-y-3">
            {messages.map((msg, index) => (
              <div
                key={index}
                className={`text-sm ${
                  msg.role === "user" ? "text-right" : "text-left"
                }`}
              >
                <div
                  className={`inline-block px-3 py-2 rounded-lg ${
                    msg.role === "user"
                      ? "bg-blue-500 text-white"
                      : "bg-white border"
                  }`}
                >
                  {msg.content}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </CopilotKit>
  );
}

// 解析审查结果
function parseReviewResult(text: string, filePath: string): ReviewResult {
  const issues: ReviewResult["issues"] = [];

  // 简单的文本解析（实际项目应该用更复杂的解析逻辑）
  const lines = text.split("\n");
  for (const line of lines) {
    if (line.includes("🔴")) {
      issues.push({
        type: "error",
        message: line.replace("🔴", "").trim(),
      });
    } else if (line.includes("⚠️")) {
      issues.push({
        type: "warning",
        message: line.replace("⚠️", "").trim(),
      });
    } else if (line.includes("📝") || line.includes("💡")) {
      issues.push({
        type: "info",
        message: line.replace("📝", "").replace("💡", "").trim(),
      });
    }
  }

  return {
    filePath,
    issues,
    summary: {
      total: issues.length,
      errors: issues.filter(i => i.type === "error").length,
      warnings: issues.filter(i => i.type === "warning").length,
      suggestions: issues.filter(i => i.type === "info").length,
    },
  };
}

// path.basename polyfill
const path = {
  basename: (p: string) => p.split(/[\\/]/).pop() || p,
};