forked from Leaf/amber-ui
重命名组件
This commit is contained in:
parent
2fbdae3816
commit
4a6cd454fe
540
src/components/chat/Chat.vue
Normal file
540
src/components/chat/Chat.vue
Normal file
@ -0,0 +1,540 @@
|
||||
<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 pb-10">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "../../stores/user";
|
||||
import { onMounted, 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";
|
||||
|
||||
// 获取组件传入的 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);
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// 完成
|
||||
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) {
|
||||
// 滚动到
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user