create

dashboard-v4/dashboard/src/components/chat/AiChat.tsx

@@ -0,0 +1,640 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import {
+  Input,
+  Button,
+  Avatar,
+  Dropdown,
+  message,
+  Tooltip,
+  Space,
+  Spin,
+  MenuProps,
+  Card,
+  Affix,
+} from "antd";
+import {
+  SendOutlined,
+  CopyOutlined,
+  EditOutlined,
+  ReloadOutlined,
+  DownOutlined,
+  UserOutlined,
+  RobotOutlined,
+  PaperClipOutlined,
+} from "@ant-design/icons";
+import Marked from "../general/Marked";
+import { IAiModel, IAiModelListResponse } from "../api/ai";
+import { get } from "../../request";
+
+const { TextArea } = Input;
+
+// 类型定义
+interface Message {
+  id: number;
+  type: "user" | "ai";
+  content: string;
+  timestamp: string;
+  model?: string;
+}
+
+interface OpenAIMessage {
+  role: "system" | "user" | "assistant";
+  content: string;
+}
+
+interface AIModel {
+  key: string;
+  label: string;
+}
+
+interface StreamTypeController {
+  addToken: (token: string) => void;
+  complete: () => void;
+}
+
+interface OpenAIStreamResponse {
+  choices?: Array<{
+    delta?: {
+      content?: string;
+    };
+  }>;
+}
+
+interface IWidget {
+  initMessage?: string;
+  systemPrompt?: string;
+  onChat?: () => void;
+}
+const AIChatComponent = ({
+  initMessage,
+  systemPrompt = "你是一个巴利语专家",
+  onChat,
+}: IWidget) => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [selectedModel, setSelectedModel] = useState<string>("");
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [isTyping, setIsTyping] = useState<boolean>(false);
+  const [currentTypingMessage, setCurrentTypingMessage] = useState<string>("");
+  const [models, setModels] = useState<IAiModel[]>(); // 可用的AI模型
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+  }, []);
+
+  useEffect(() => {
+    const url = `/v2/ai-model?view=chat`;
+    console.info("api request", url);
+    get<IAiModelListResponse>(url).then((json) => {
+      if (json.ok) {
+        setModels(json.data.rows);
+        if (json.data.rows.length > 0) {
+          setSelectedModel(json.data.rows[0].uid);
+        }
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, currentTypingMessage, scrollToBottom]);
+
+  useEffect(() => {
+    if (initMessage) {
+      setMessages([]);
+      setInputValue(initMessage);
+      sendMessage();
+    }
+  }, [initMessage]);
+  // 打字机效果 - 支持流式输入
+  const typeWriter = useCallback(
+    (text: string, callback: () => void): NodeJS.Timeout => {
+      setIsTyping(true);
+      setCurrentTypingMessage("");
+      let index = 0;
+
+      const timer = setInterval(() => {
+        if (index < text.length) {
+          setCurrentTypingMessage((prev) => prev + text.charAt(index));
+          index++;
+        } else {
+          clearInterval(timer);
+          setIsTyping(false);
+          setCurrentTypingMessage("");
+          callback();
+        }
+      }, 30);
+
+      return timer;
+    },
+    []
+  );
+
+  // 流式打字机效果
+  const streamTypeWriter = useCallback(
+    (
+      onToken?: (content: string) => void,
+      onComplete?: (finalContent: string) => void
+    ): StreamTypeController => {
+      setIsTyping(true);
+      setCurrentTypingMessage("");
+
+      return {
+        addToken: (token: string) => {
+          setCurrentTypingMessage((prev) => {
+            const newContent = prev + token;
+            onToken && onToken(newContent);
+            return newContent;
+          });
+        },
+        complete: () => {
+          setIsTyping(false);
+          setCurrentTypingMessage((prev) => {
+            const finalContent = prev;
+            setCurrentTypingMessage("");
+            onComplete && onComplete(finalContent);
+            return "";
+          });
+        },
+      };
+    },
+    []
+  );
+
+  // 调用OpenAI API - 支持流式输出
+  const callOpenAI = useCallback(
+    async (messages: OpenAIMessage[]): Promise<void> => {
+      setIsLoading(false); // 开始流式输出时取消loading状态
+      if (typeof process.env.REACT_APP_OPENAI_PROXY === "undefined") {
+        console.error("no REACT_APP_OPENAI_PROXY");
+        return;
+      }
+      try {
+        const payload = {
+          model: selectedModel,
+          messages: messages,
+          stream: true,
+          temperature: 0.7,
+          max_tokens: 2000,
+        };
+        const response = await fetch(process.env.REACT_APP_OPENAI_PROXY, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer AIzaSyCzr8KqEdaQ3cRCxsFwSHh8c7kF3RZTZWw`, // 或你的API密钥
+          },
+          body: JSON.stringify({
+            model_id: selectedModel,
+            payload: payload,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        // 处理流式响应
+        const reader = response.body?.getReader();
+        if (!reader) {
+          throw new Error("无法获取响应流");
+        }
+
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        // 创建流式打字机效果
+        const typeController = streamTypeWriter(
+          (content: string) => {
+            // 每次添加token时的回调
+          },
+          (finalContent: string) => {
+            // 完成时的回调
+            const aiMessage: Message = {
+              id: Date.now(),
+              type: "ai",
+              content: finalContent,
+              timestamp: new Date().toLocaleTimeString(),
+              model: selectedModel,
+            };
+            setMessages((prev) => [...prev, aiMessage]);
+          }
+        );
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+
+            if (done) {
+              typeController.complete();
+              break;
+            }
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+              if (line.trim() === "") continue;
+              if (line.startsWith("data: ")) {
+                const data = line.slice(6);
+
+                if (data === "[DONE]") {
+                  typeController.complete();
+                  return;
+                }
+
+                try {
+                  const parsed: OpenAIStreamResponse = JSON.parse(data);
+                  const delta = parsed.choices?.[0]?.delta;
+
+                  if (delta?.content) {
+                    typeController.addToken(delta.content);
+                  }
+                } catch (e) {
+                  console.warn("解析SSE数据失败:", e);
+                }
+              }
+            }
+          }
+        } catch (error) {
+          console.error("读取流数据失败:", error);
+          typeController.complete();
+          throw error;
+        }
+      } catch (error) {
+        console.error("API调用失败:", error);
+
+        // 如果真实API失败，回退到模拟响应
+        const mockResponse = await simulateAIResponse(messages);
+        typeWriter(mockResponse, () => {
+          const aiMessage: Message = {
+            id: Date.now(),
+            type: "ai",
+            content: mockResponse,
+            timestamp: new Date().toLocaleTimeString(),
+            model: selectedModel,
+          };
+          setMessages((prev) => [...prev, aiMessage]);
+        });
+      }
+    },
+    [selectedModel, streamTypeWriter, typeWriter]
+  );
+
+  // 模拟AI响应（作为备用方案）
+  const simulateAIResponse = useCallback(
+    async (conversationHistory: OpenAIMessage[]): Promise<string> => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const lastUserMessage =
+            conversationHistory[conversationHistory.length - 1]?.content || "";
+          const responses = [
+            '这是一个很好的问题。让我来为你详细解答这个关于 "' +
+              lastUserMessage +
+              '" 的问题。\n\n首先，我需要说明的是，这个话题涉及多个方面的考虑。从技术层面来看，我们需要考虑实现的可行性和复杂度。从用户体验的角度，我们要确保解决方案既实用又易于理解。\n\n希望这个回答对你有帮助！',
+            '我理解你的意思。根据我的知识，关于 "' +
+              lastUserMessage +
+              '" 这个问题，我可以从以下几个角度来分析：\n\n1. 首先是基本概念的理解\n2. 然后是实际应用场景\n3. 最后是注意事项和建议\n\n这样的分析方法能够帮助我们更全面地理解这个问题。',
+            '感谢你的提问。关于 "' +
+              lastUserMessage +
+              '" 这个话题，我的看法是这样的：\n\n这确实是一个值得深入探讨的问题。在我看来，解决这类问题的关键在于找到平衡点，既要考虑效率，也要考虑可维护性。\n\n让我知道如果你需要更详细的解释！',
+          ];
+          resolve(responses[Math.floor(Math.random() * responses.length)]);
+        }, 1000);
+      });
+    },
+    []
+  );
+
+  // 发送消息到AI
+  const sendMessage = useCallback(
+    async (messageText: string = inputValue): Promise<void> => {
+      if (!messageText.trim()) return;
+
+      const userMessage: Message = {
+        id: Date.now(),
+        type: "user",
+        content: messageText,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue("");
+      setIsLoading(true);
+      onChat && onChat();
+      try {
+        // 构建对话历史
+        const conversationHistory: OpenAIMessage[] = [
+          { role: "system", content: systemPrompt },
+          ...messages.map((msg) => {
+            const newMsg: OpenAIMessage = {
+              role: msg.type === "user" ? "user" : "assistant",
+              content: msg.content,
+            };
+            return newMsg;
+          }),
+          { role: "user", content: messageText },
+        ];
+
+        // 调用OpenAI API
+        await callOpenAI(conversationHistory);
+      } catch (error) {
+        console.error("发送消息失败:", error);
+        message.error("发送消息失败，请重试");
+        setIsLoading(false);
+        setIsTyping(false);
+      }
+    },
+    [inputValue, messages, systemPrompt, callOpenAI]
+  );
+
+  // 复制消息内容
+  const copyMessage = useCallback(async (content: string): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(content);
+      message.success("已复制到剪贴板");
+    } catch (error) {
+      console.error("复制失败:", error);
+      message.error("复制失败");
+    }
+  }, []);
+
+  // 刷新AI回答
+  const refreshAIResponse = useCallback(
+    async (messageIndex: number): Promise<void> => {
+      const userMessage = messages[messageIndex - 1];
+      if (userMessage && userMessage.type === "user") {
+        // 重新构建到该消息为止的对话历史
+        const conversationHistory: OpenAIMessage[] = [
+          { role: "system", content: systemPrompt },
+          ...messages.slice(0, messageIndex - 1).map((msg) => {
+            const newMsg: OpenAIMessage = {
+              role: msg.type === "user" ? "user" : "assistant",
+              content: msg.content,
+            };
+            return newMsg;
+          }),
+          { role: "user", content: userMessage.content },
+        ];
+
+        // 移除旧的AI回答
+        setMessages((prev) => prev.slice(0, messageIndex));
+
+        try {
+          await callOpenAI(conversationHistory);
+        } catch (error) {
+          console.error("刷新回答失败:", error);
+          message.error("刷新回答失败，请重试");
+        }
+      }
+    },
+    [messages, systemPrompt, callOpenAI]
+  );
+
+  // 编辑用户消息
+  const editUserMessage = useCallback(
+    (messageIndex: number, newContent: string): void => {
+      const updatedMessages = [...messages];
+      updatedMessages[messageIndex].content = newContent;
+      setMessages(updatedMessages);
+    },
+    [messages]
+  );
+
+  // 处理键盘事件
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    },
+    [sendMessage]
+  );
+
+  // 模型选择菜单
+  const modelMenu: MenuProps = {
+    selectedKeys: [selectedModel],
+    onClick: ({ key }) => setSelectedModel(key),
+    items: models?.map((model) => ({
+      key: model.uid,
+      label: model.name,
+    })),
+  };
+
+  // 刷新按钮的下拉菜单
+  const refreshMenu = useCallback(
+    (messageIndex: number): MenuProps => ({
+      onClick: ({ key }) => {
+        if (key === "refresh") {
+          refreshAIResponse(messageIndex);
+        }
+      },
+      items: [
+        {
+          key: "refresh",
+          label: "重新生成",
+        },
+        {
+          type: "divider",
+        },
+        {
+          key: "model-submenu",
+          label: "选择模型重新生成",
+          children: models?.map((model) => ({
+            key: model.uid,
+            label: model.name,
+            onClick: () => {
+              setSelectedModel(model.uid);
+              refreshAIResponse(messageIndex);
+            },
+          })),
+        },
+      ],
+    }),
+    [refreshAIResponse, models]
+  );
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      {/* 聊天显示窗口 */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((msg, index) => (
+          <div
+            key={msg.id}
+            className={`flex ${
+              msg.type === "user" ? "justify-end" : "justify-start"
+            }`}
+          >
+            <div
+              className={`group max-w-[70%] ${
+                msg.type === "user"
+                  ? "bg-blue-500 text-white rounded-l-lg rounded-tr-lg"
+                  : "bg-white border rounded-r-lg rounded-tl-lg shadow-sm"
+              } p-4 relative`}
+            >
+              <div className="flex items-start space-x-3">
+                <Avatar
+                  size={32}
+                  icon={
+                    msg.type === "user" ? <UserOutlined /> : <RobotOutlined />
+                  }
+                  className={
+                    msg.type === "user" ? "bg-blue-600" : "bg-gray-500"
+                  }
+                />
+                <div className="flex-1">
+                  <div className="text-sm font-medium mb-1">
+                    {msg.type === "user"
+                      ? "你"
+                      : msg.model
+                      ? models?.find((m) => m.uid === msg.model)?.name
+                      : "AI助手"}
+                  </div>
+                  <div className="text-sm leading-relaxed whitespace-pre-wrap">
+                    <Marked text={msg.content} />
+                  </div>
+                  <div className="text-xs opacity-60 mt-2">{msg.timestamp}</div>
+                </div>
+              </div>
+
+              {/* 悬浮工具按钮 */}
+              <div
+                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+                style={{ textAlign: "right" }}
+              >
+                <Space size="small">
+                  <Tooltip title="复制">
+                    <Button
+                      size="small"
+                      type="text"
+                      icon={<CopyOutlined />}
+                      onClick={() => copyMessage(msg.content)}
+                    />
+                  </Tooltip>
+                  {msg.type === "user" ? (
+                    <Tooltip title="编辑">
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<EditOutlined />}
+                        onClick={() => {
+                          const newContent = prompt("编辑消息:", msg.content);
+                          if (newContent !== null) {
+                            editUserMessage(index, newContent);
+                          }
+                        }}
+                      />
+                    </Tooltip>
+                  ) : (
+                    <Dropdown menu={refreshMenu(index)} trigger={["hover"]}>
+                      <Button
+                        size="small"
+                        type="text"
+                        icon={<ReloadOutlined />}
+                      />
+                    </Dropdown>
+                  )}
+                </Space>
+              </div>
+            </div>
+          </div>
+        ))}
+
+        {/* 显示AI正在输入的消息 */}
+        {isTyping && (
+          <div className="flex justify-start">
+            <div className="max-w-[70%] bg-white border rounded-r-lg rounded-tl-lg shadow-sm p-4">
+              <div className="flex items-start space-x-3">
+                <Avatar
+                  size={32}
+                  icon={<RobotOutlined />}
+                  className="bg-gray-500"
+                />
+                <div className="flex-1">
+                  <div className="text-sm font-medium mb-1">
+                    {models?.find((m) => m.uid === selectedModel)?.name ||
+                      "AI助手"}
+                  </div>
+                  <Marked text={currentTypingMessage} />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {isLoading && !isTyping && (
+          <div className="flex justify-start">
+            <div className="max-w-[70%] bg-white border rounded-r-lg rounded-tl-lg shadow-sm p-4">
+              <div className="flex items-center space-x-3">
+                <Avatar
+                  size={32}
+                  icon={<RobotOutlined />}
+                  className="bg-gray-500"
+                />
+                <Spin size="small" />
+                <span className="text-sm text-gray-500">正在思考...</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* 用户输入区域 */}
+      <Affix offsetBottom={10}>
+        <Card bordered={true} style={{ borderRadius: 10, borderColor: "gray" }}>
+          <div className="max-w-4xl mx-auto">
+            {/* 输入框 */}
+            <div style={{ display: "flex" }}>
+              <TextArea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="提出你的问题，如：总结下面的内容..."
+                autoSize={{ minRows: 1, maxRows: 6 }}
+                className="resize-none pr-12"
+              />
+            </div>
+
+            {/* 功能按钮和模型选择 */}
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <Space>
+                <Tooltip title="附加文件">
+                  <Button
+                    size="small"
+                    type="text"
+                    icon={<PaperClipOutlined />}
+                  />
+                </Tooltip>
+              </Space>
+              <div>
+                <Dropdown menu={modelMenu} trigger={["click"]}>
+                  <Button size="small" type="text">
+                    {models?.find((m) => m.uid === selectedModel)?.name}
+                    <DownOutlined />
+                  </Button>
+                </Dropdown>
+                <Button
+                  type="primary"
+                  icon={<SendOutlined />}
+                  onClick={() => sendMessage()}
+                  disabled={!inputValue.trim() || isLoading}
+                  className="absolute right-2 bottom-2"
+                />
+              </div>
+            </div>
+          </div>
+        </Card>
+      </Affix>
+    </div>
+  );
+};
+
+export default AIChatComponent;