(react)给AI回答的结果添加点赞/点踩功能

点赞

<ChatAction
  text="满意"
  icon={
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{
        transition: "fill 0.2s",
        fill: message.liked
          ? "#1890ff"
          : "none",
      }}
    >
      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
    </svg>
  }
  onClick={() => {
    const newLiked = !message.liked;
    // 获取当前消息及其对应的问题
    const messageIndex =
      session.messages.findIndex(
        (m) => m.id === message.id,
      ) || i;
    const currentMessage =
      session.messages[messageIndex];
    const questionMessage =
      messageIndex > 0
        ? session.messages[
            messageIndex - 1
          ]
        : null;

    // 构建问答对象
    const qaPair = {
      question: questionMessage
        ? questionMessage.content
        : "",
      answer: currentMessage.content,
      votes_type: newLiked ? "满意" : "",
    };

    const formData = new FormData();
    formData.append(
      "votes_type",
      qaPair.votes_type,
    );
    formData.append(
      "question",
      qaPair.question,
    );
    formData.append(
      "answer",
      qaPair.answer,
    );

    // 调用点赞/点踩 API
    satisfiedApi(formData)
      .then((res) => {
        console.log("API 响应:", res);
      })
      .catch((err) => {
        console.error(
          "API 调用失败:",
          err,
        );
        // 可以在这里添加重试逻辑或用户提示
        // showToast("操作失败，请稍后重试", "error");
      });

    chatStore.updateTargetSession(
      session,
      (s) => {
        const msg =
          s.messages.find(
            (m) => m.id === message.id,
          ) || s.messages[i];
        if (msg) {
          msg.liked = newLiked;
          msg.disliked = newLiked
            ? false
            : msg.disliked;
        }
      },
    );
    showToast(
      newLiked ? "已满意" : "已取消满意",
    );
  }}
/>

点踩

<ChatAction
  text="不满意"
  icon={
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{
        transition: "fill 0.2s",
        fill: message.disliked
          ? "#1890ff"
          : "none",
      }}
    >
      <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.28a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.64a2 2 0 0 1 2 1.8v7a2 2 0 0 1-2 2H17"></path>
    </svg>
  }
  onClick={() => {
    const newDisliked = !message.disliked;
    // 获取当前消息及其对应的问题
    const messageIndex =
      session.messages.findIndex(
        (m) => m.id === message.id,
      ) || i;
    const currentMessage =
      session.messages[messageIndex];
    const questionMessage =
      messageIndex > 0
        ? session.messages[
            messageIndex - 1
          ]
        : null;

    // 构建问答对象
    const qaPair = {
      question: questionMessage
        ? questionMessage.content
        : "",
      answer: currentMessage.content,
      votes_type: newDisliked
        ? "不满意"
        : "",
    };

    const formData = new FormData();
    formData.append(
      "votes_type",
      qaPair.votes_type,
    );
    formData.append(
      "question",
      qaPair.question,
    );
    formData.append(
      "answer",
      qaPair.answer,
    );

    // 调用点赞/点踩 API
    satisfiedApi(formData)
      .then((res) => {
        console.log("API 响应:", res);
      })
      .catch((err) => {
        console.error(
          "API 调用失败:",
          err,
        );
        // 可以在这里添加重试逻辑或用户提示
        // showToast("操作失败，请稍后重试", "error");
      });

    chatStore.updateTargetSession(
      session,
      (s) => {
        const msg =
          s.messages.find(
            (m) => m.id === message.id,
          ) || s.messages[i];
        if (msg) {
          msg.disliked = newDisliked;
          msg.liked = newDisliked
            ? false
            : msg.liked;
        }
      },
    );
    showToast(
      newDisliked
        ? "已不满意"
        : "已取消不满意",
    );
  }}
/>