From 92b30a605914ea2a8e7eb38273333ad6b9571d5b Mon Sep 17 00:00:00 2001
From: ivamp <im@ivampiresp.com>
Date: Fri, 13 Sep 2024 18:54:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=20=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts          |   2 +-
 src/components/chat/Chat.vue |  20 +-
 src/components/chat/chat.vue | 606 -----------------------------------
 3 files changed, 19 insertions(+), 609 deletions(-)
 delete mode 100644 src/components/chat/chat.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 2b42f87..f47bdb4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,7 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AssistantMenu: typeof import('./components/AssistantMenu.vue')['default']
     Assistants: typeof import('./components/assistants/index.vue')['default']
-    Chat: typeof import('./components/chat/chat.vue')['default']
+    Chat: typeof import('./components/chat/Chat.vue')['default']
     ChatMenu: typeof import('./components/ChatMenu.vue')['default']
     ChatSettings: typeof import('./components/ChatSettings.vue')['default']
     LeftSettings: typeof import('./components/LeftSettings.vue')['default']
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 5241944..8c5095b 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -292,6 +292,13 @@ function sendText() {
   input.innerText = "";
 
   updateInputHeight();
+
+  // 滚动
+  // @ts-ignore ignore
+  element.mainContainer?.scrollTo({
+    top: "999999",
+    behavior: "smooth",
+  });
 }
 
 async function sendMessage(
@@ -395,6 +402,14 @@ async function getChatMessages() {
 
     chatMessages.value = cm.data.data;
 
+    // 滚动
+    setTimeout(() => {
+      // @ts-ignore ignore
+      element.mainContainer?.scrollTo({
+        top: "999999",
+        behavior: "smooth",
+      });
+    }, 400);
     // 完成
     return true;
   }
@@ -478,6 +493,7 @@ function streamChat(streamId: String, redirect = false) {
         }
 
         if (autoScroll.value) {
+          // @ts-ignore ignore
           element.mainContainer?.scrollTo({
             top: "999999",
             behavior: "smooth",
@@ -515,14 +531,14 @@ onUnmounted(() => {
 });
 
 const uploadFile = () => {
-  if (!fileUpload.value) {
+  if (!fileUpload.value || !chatId.value) {
     return;
   }
 
   uploading.value = true;
   getApi()
     .ChatMessage.apiV1ChatsIdFilesPost(
-      chatId,
+      Number(chatId.value),
       {
         file: fileUpload.value,
         url: "",
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
deleted file mode 100644
index 6ce750c..0000000
--- a/src/components/chat/chat.vue
+++ /dev/null
@@ -1,606 +0,0 @@
-<template>
-  <div class="relative flex flex-col items-center">
-    <div class="w-4/5">
-      <div>
-        <div
-          class="flex-grow mt-3 mb-1 text-5xl select-none"
-          v-if="!chatMessages?.length"
-        >
-          <n-gradient-text type="info" class="pr-3 pb-2 pt-2">
-            你好，{{ userStore.user.name }}
-          </n-gradient-text>
-          <br />
-          <div class="pr-3 mt-8 text-2xl">
-            <n-text depth="3"> 有什么我可以帮您的吗？ </n-text>
-          </div>
-        </div>
-
-        <div v-else>
-          <MessageList :chat_messages="chatMessages" />
-        </div>
-      </div>
-
-      <div
-        class="fixed bottom-0 left-0 right-0"
-        :class="onBottom ? 'hidden' : 'mb-6'"
-      >
-        <div
-          class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg"
-          v-if="toolCalling"
-        >
-          <n-gradient-text type="info">
-            {{ toolName }}
-          </n-gradient-text>
-        </div>
-        <div
-          ref="inputContainer"
-          class="mx-auto w-2xl max-w-xs lg:max-w-2xl outline-none input-color input-bg rounded-full flex pl-5 pr-5 bg-white shadow-lg items-center p-4 pb-4 transition-all"
-        >
-          <div class="overflow-x-hidden h-full w-full flex items-center">
-            <n-scrollbar class="max-h-96">
-              <div
-                ref="inputText"
-                :class="{ 'has-placeholder': isPlaceholderVisible }"
-                contenteditable="true"
-                placeholder="请输入文本..."
-                class="input-text max-w-full outline-none text-lg text-pretty pl-2 min-h-6"
-                @keydown="onKeydown"
-                @input="updateInputHeight"
-                @compositionstart="handleCompositionStart"
-                @compositionend="handleCompositionEnd"
-              ></div>
-            </n-scrollbar>
-          </div>
-          <n-spin :show="processing">
-            <div
-              ref="actionContainer"
-              class="flex [&>button]:ml-2 pr-4 justify-end"
-            >
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-button tertiary circle size="large">
-                    <template #icon>
-                      <n-icon><DocumentAttachOutline /></n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                <span> 在做了在做了 </span>
-              </n-tooltip>
-
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-button tertiary circle size="large">
-                    <template #icon>
-                      <n-icon><MicOutline /></n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                <span> 在做了在做了 </span>
-              </n-tooltip>
-
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-button
-                    tertiary
-                    circle
-                    size="large"
-                    v-show="chatMessages?.length"
-                    @click="clearChatHistory"
-                  >
-                    <template #icon>
-                      <n-icon><TrashBinOutline /></n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                <span> 清空历史 </span>
-              </n-tooltip>
-
-              <n-tooltip trigger="hover">
-                <template #trigger>
-                  <n-button
-                    tertiary
-                    circle
-                    size="large"
-                    v-show="showSendBtn"
-                    @click="sendText"
-                  >
-                    <template #icon>
-                      <n-icon><SendOutline /></n-icon>
-                    </template>
-                  </n-button>
-                </template>
-                <span> 发送 </span>
-              </n-tooltip>
-            </div>
-          </n-spin>
-        </div>
-        <n-text
-          depth="3"
-          class="text-center block mt-2 mb-2 text-sm select-none"
-          v-show="onBottom"
-        >
-          AI 也有可能犯错误，请在使用之前核查信息。
-        </n-text>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { useUserStore } from "../../stores/user";
-import { onMounted, onUnmounted, Ref, ref } from "vue";
-import {
-  SendOutline,
-  MicOutline,
-  DocumentAttachOutline,
-  TrashBinOutline,
-} from "@vicons/ionicons5";
-import { EntityChatMessage, SchemaChatMessageAddRequestRoleEnum } from "@/api";
-import getApi from "@/plugins/api";
-import MessageList from "./MessageList.vue";
-import { useChatStore } from "@/stores/chat";
-import router from "@/router";
-import { useAppStore } from "@/stores/app";
-import element from "@/config/element";
-
-// 获取组件传入的 chatId
-const chatId: Ref<string | number | undefined | null> = ref(null);
-
-// const props = defineProps<{
-//   chatId: string | number | undefined | null;
-// }>();
-
-// 定义 prop, chatId 是可选的
-const props = defineProps({
-  chatId: {
-    type: [String, Number],
-    required: false,
-    default: null,
-  },
-});
-
-const userStore = useUserStore();
-const chatStore = useChatStore();
-const compositionStart = ref(false);
-const inputContainer: any = ref(null);
-const inputText: any = ref(null);
-const actionContainer: any = ref(null);
-const isPlaceholderVisible = ref(true);
-const triggerTimes = ref(0);
-const showSendBtn = ref(false);
-const content = ref("");
-const inputExpanded = ref(false);
-const chatMessages: Ref<EntityChatMessage[] | undefined> = ref([]);
-const processing = ref(false);
-const toolName = ref("");
-const toolError = ref(false);
-const toolCalling = ref(false);
-const fileUpload = ref();
-const uploading = ref(false);
-const autoScroll = ref(true);
-const onBottom = ref(false);
-
-function onKeydown(e: KeyboardEvent) {
-  // 带 shift 不触发
-  if (e.shiftKey || inputExpanded.value) {
-    return;
-  }
-
-  // 如果 content.value 是空的，但是同时按了 Shift 和 Enter，则阻止
-  if (content.value.trim() === "" && e.code === "Enter") {
-    e.preventDefault();
-    return;
-  }
-
-  // 禁止换行起手
-  if (!compositionStart.value && e.code === "Enter") {
-    e.preventDefault();
-    sendText();
-  }
-}
-
-function updateInputHeight() {
-  if (!inputText?.value || !inputContainer.value || !actionContainer.value) {
-    return;
-  }
-
-  const input = inputText.value;
-  const container = inputContainer.value;
-  const action = actionContainer.value;
-
-  content.value = input.innerText;
-  const trimContent = input.innerText.trim();
-
-  const isEmpty = trimContent === "";
-  isPlaceholderVisible.value = isEmpty;
-  if (isEmpty || trimContent.length < 30) {
-    triggerTimes.value = 0;
-  }
-
-  if (trimContent.length > 30) {
-    triggerTimes.value = 10;
-  }
-
-  // 获取元素实际占用高度
-  const height = input.scrollHeight;
-
-  const lines = input.innerText.split("\n").length;
-
-  if (lines > 1) {
-    triggerTimes.value += 8;
-  }
-  if (height > 50) {
-    triggerTimes.value += 1;
-  } else {
-    triggerTimes.value -= 1;
-  }
-
-  if (triggerTimes.value > 8) {
-    container.classList.add("rounded-lg");
-    container.classList.remove("rounded-full");
-    // container.classList.remove("max-w-2xl");
-    // container.classList.remove("w-2xl");
-    container.classList.add("flex-col");
-    // action.classList.add("w-full");
-    action.classList.add("text-right");
-    action.classList.add("pt-4");
-    action.classList.add("pb-0");
-    action.classList.add("mt-2");
-    showSendBtn.value = true;
-    inputExpanded.value = true;
-  } else {
-    container.classList.remove("rounded-lg");
-    container.classList.add("rounded-full");
-    container.classList.remove("flex-col");
-    // container.classList.add("w-2xl");
-    // container.classList.add("max-w-2xl");
-
-    // action.classList.remove("w-full");
-    action.classList.remove("text-right");
-    action.classList.remove("pt-4");
-    action.classList.remove("pt-0");
-    action.classList.remove("mt-2");
-    showSendBtn.value = false;
-    inputExpanded.value = false;
-  }
-}
-
-function handleCompositionStart() {
-  compositionStart.value = true;
-}
-
-function handleCompositionEnd() {
-  compositionStart.value = false;
-}
-
-function sendText() {
-  if (!inputText?.value) {
-    return;
-  }
-
-  const input = inputText.value;
-  const textContent = input.innerText.trim();
-
-  if (textContent === "") {
-    return;
-  }
-
-  // 发送文本到服务器
-  sendMessage("user", textContent);
-
-  // 清空输入框
-  input.innerText = "";
-
-  updateInputHeight();
-
-  // 滚动
-  // @ts-ignore ignore
-  element.mainContainer?.scrollTo({
-    top: "999999",
-    behavior: "smooth",
-  });
-}
-
-async function sendMessage(
-  role: SchemaChatMessageAddRequestRoleEnum,
-  text: string
-) {
-  if (processing.value) {
-    return;
-  }
-  if (role.trim() === "") {
-    role = "user";
-  }
-  if (text.trim() === "") {
-    return;
-  }
-
-  let redirect = false;
-
-  if (!chatId.value) {
-    await getApi()
-      .Chat.apiV1ChatsPost({
-        name: text.slice(0, 10),
-      })
-      .then(async (res) => {
-        chatId.value = res.data.data?.id;
-
-        if (chatId.value) {
-          chatStore.currentChatId = chatId.value;
-          redirect = true;
-        }
-        await getChatMessages();
-      });
-  }
-
-  toolError.value = false;
-  getApi()
-    .ChatMessage.apiV1ChatsIdMessagesPost(Number(chatId.value), {
-      message: text,
-      role: role,
-    })
-    .then(async (res) => {
-      // const newMessage = {
-      //   content: text,
-      //   role: role,
-      // };
-
-      // if (chatMessages.value) {
-      //   chatMessages.value = [newMessage];
-      // }
-
-      // if (chatMessages.value && chatMessages.value.length) {
-      //   chatMessages.value?.push(newMessage);
-      // }
-
-      const streamId = res.data.data?.stream_id;
-
-      if (streamId) {
-        await getChatMessages();
-        streamChat(streamId, redirect);
-      }
-    })
-    .catch(async (err) => {
-      // if 409
-      if (err.response.status === 409) {
-        const streamId = err.response.data.data?.stream_id;
-
-        if (streamId) {
-          await getChatMessages();
-          streamChat(streamId, redirect);
-        }
-      }
-    });
-}
-
-// function onFocused() {
-//   if (!inputContainer.value) {
-//     return;
-//   }
-
-//   const container = inputContainer.value;
-//   container.classList.remove("max-w-2xl");
-//   container.classList.add("max-w-full");
-// }
-
-// function onBlurred() {
-//   if (!inputContainer.value) {
-//     return;
-//   }
-
-//   const container = inputContainer.value;
-//   container.classList.remove("max-w-full");
-//   container.classList.add("max-w-2xl");
-// }
-
-async function getChatMessages() {
-  // 获取当前聊天记录
-  if (chatId.value) {
-    const cm = await getApi().ChatMessage.apiV1ChatsIdMessagesGet(
-      Number(chatId.value)
-    );
-
-    chatMessages.value = cm.data.data;
-
-    // 滚动
-    setTimeout(() => {
-      // @ts-ignore ignore
-      element.mainContainer?.scrollTo({
-        top: "999999",
-        behavior: "smooth",
-      });
-    }, 400);
-    // 完成
-    return true;
-  }
-
-  return false;
-}
-
-function streamChat(streamId: String, redirect = false) {
-  const url = getApi().conf.basePath + "/api/v1/stream/" + streamId;
-
-  const evtSource = new EventSource(url);
-
-  let messageAdded = false;
-
-  let i = 0;
-  processing.value = true;
-
-  evtSource.addEventListener("data", (e) => {
-    if (e.data === "[DONE]") {
-      evtSource.close();
-      processing.value = false;
-
-      if (redirect && chatId.value != undefined) {
-        // 改变 URL
-        router.replace({
-          name: "/chat/[id]/",
-          params: {
-            id: chatId.value,
-          },
-        });
-      }
-
-      return;
-    }
-
-    const data = JSON.parse(e.data);
-
-    let append = true;
-
-    switch (data.state) {
-      case "tool_calling":
-        toolCalling.value = true;
-        toolName.value =
-          data.tool_call_message.tool_name +
-          " 中的 " +
-          data.tool_call_message.function_name;
-        break;
-      case "tool_response":
-        setTimeout(() => {
-          toolName.value = "";
-          toolCalling.value = false;
-        }, 300);
-        break;
-      case "tool_failed":
-        toolName.value =
-          data.tool_response_message.tool_name +
-          " 中的 " +
-          data.tool_response_message.function_name;
-        toolError.value = true;
-        append = false;
-        setTimeout(() => {
-          toolCalling.value = false;
-        }, 300);
-        break;
-      case "chunk":
-        if (!messageAdded) {
-          const newMessage = {
-            content: "",
-            role: "assistant",
-          };
-
-          if (!chatMessages.value) {
-            chatMessages.value = [newMessage];
-          } else {
-            chatMessages.value?.push(newMessage);
-          }
-
-          messageAdded = true;
-          append = true;
-          i = (chatMessages.value?.length ?? 1) - 1;
-        }
-
-        if (autoScroll.value) {
-          // @ts-ignore ignore
-          element.mainContainer?.scrollTo({
-            top: "999999",
-            behavior: "smooth",
-          });
-        }
-    }
-
-    if (append && messageAdded && chatMessages.value?.length) {
-      chatMessages.value[i].content += data.content;
-    }
-  });
-
-  // close
-  evtSource.addEventListener("close", () => {
-    evtSource.close();
-  });
-}
-
-const clearChatHistory = async () => {
-  processing.value = true;
-  await getApi().ChatMessage.apiV1ChatsIdClearPost(chatStore.currentChatId);
-  chatMessages.value = [];
-  processing.value = false;
-};
-
-onMounted(() => {
-  chatId.value = props.chatId;
-  chatStore.currentChatId = Number(chatId.value);
-  updateInputHeight();
-  getChatMessages();
-});
-
-onUnmounted(() => {
-  chatStore.currentChatId = 0;
-});
-
-const uploadFile = () => {
-  if (!fileUpload.value || !chatId.value) {
-    return;
-  }
-
-  uploading.value = true;
-  getApi()
-    .ChatMessage.apiV1ChatsIdFilesPost(
-      Number(chatId.value),
-      {
-        file: fileUpload.value,
-        url: "",
-      },
-      {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      }
-    )
-    .then((r) => {
-      // 如果成功
-      if (r.status === 200 || r.status === 201) {
-        fileUpload.value = null;
-        getChatMessages();
-      }
-    })
-    .catch((err) => {
-      alert(err.response.data.message);
-    })
-    .finally(() => {
-      uploading.value = false;
-    });
-};
-</script>
-
-<style scoped>
-.input-color {
-  color: #3a3a3a;
-}
-.input-bg {
-  background-color: #eeeeee;
-}
-.input-text {
-  flex-grow: 1;
-  padding-right: 10px; /* 为按钮区域留出一些空间 */
-}
-.input-text {
-  position: relative;
-}
-
-.input-text.has-placeholder::before {
-  content: attr(placeholder);
-  color: #999; /* 可以自定义颜色 */
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none; /* 确保用户点击时不会触发 placeholder */
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 8px; /* 根据实际布局调整内边距 */
-}
-
-/* 如果是暗黑模式 */
-@media (prefers-color-scheme: dark) {
-  .input-color {
-    color: #d4d4d4;
-  }
-  .input-bg {
-    background-color: #1e1f20;
-  }
-}
-</style>