改进
This commit is contained in:
parent
2f9744d5a8
commit
de00770bff
@ -2,13 +2,18 @@
|
||||
<div>
|
||||
<h3 class="mb-3">聊天记录</h3>
|
||||
|
||||
<v-card v-for="message in messages.data" :key="message.id" class="mx-auto mt-3" width="100%">
|
||||
<v-card
|
||||
v-for="message in messages.data"
|
||||
:key="message.id"
|
||||
class="mx-auto mt-3"
|
||||
width="100%"
|
||||
>
|
||||
<template #title>
|
||||
<div class="font-weight-black">
|
||||
<div v-if="message.role == 'assistant'"> AI </div>
|
||||
<div v-else-if="message.role == 'system'"> 系统 </div>
|
||||
<div v-if="message.role == 'assistant'">AI</div>
|
||||
<div v-else-if="message.role == 'system'">系统</div>
|
||||
|
||||
<div v-else-if="message.role == 'user'" class="text-right"> 用户 </div>
|
||||
<div v-else-if="message.role == 'user'" class="text-right">用户</div>
|
||||
|
||||
<div v-else>
|
||||
{{ message.role }}
|
||||
@ -24,40 +29,52 @@
|
||||
|
||||
<div class="mt-3">
|
||||
<div v-if="toolError" class="mb-3">
|
||||
<v-alert density="compact" text="这个工具出现了异常，这应该不是我们的问题，如果你是此工具的开发者，请打开开发者控制台查看具体错误。"
|
||||
:title="'工具 ' + toolName + ' 出现异常'" type="warning"></v-alert>
|
||||
<v-alert
|
||||
density="compact"
|
||||
text="这个工具出现了异常，这应该不是我们的问题，如果你是此工具的开发者，请打开开发者控制台查看具体错误。"
|
||||
:title="'工具 ' + toolName + ' 出现异常'"
|
||||
type="warning"
|
||||
></v-alert>
|
||||
</div>
|
||||
|
||||
<div v-show="toolCalling">
|
||||
<v-progress-circular color="primary" indeterminate :size="16"></v-progress-circular>
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
:size="16"
|
||||
></v-progress-circular>
|
||||
正在执行 {{ toolName }}
|
||||
</div>
|
||||
<v-text-field v-model="input" label="输入消息" @keyup.enter="sendMessage"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="input"
|
||||
label="输入消息"
|
||||
@keyup.enter="sendMessage"
|
||||
></v-text-field>
|
||||
<v-btn color="primary" @click="sendMessage">发送</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ApiV1ChatsIdMessagesGet200Response } from "@/api"
|
||||
import { ref } from "vue"
|
||||
import { api, conf } from "@/plugins/api"
|
||||
import VueMarkdown from "vue-markdown-render"
|
||||
import { ApiV1ChatsIdMessagesGet200Response } from "@/api";
|
||||
import { ref } from "vue";
|
||||
import { api, conf } from "@/plugins/api";
|
||||
import VueMarkdown from "vue-markdown-render";
|
||||
|
||||
// @ts-ignore
|
||||
const chatId = parseInt(useRoute().params.id as string)
|
||||
const chatId = parseInt(useRoute().params.id as string);
|
||||
|
||||
const messages: Ref<ApiV1ChatsIdMessagesGet200Response> = ref({
|
||||
data: [],
|
||||
})
|
||||
const input = ref("")
|
||||
const toolName = ref("")
|
||||
const toolError = ref(false)
|
||||
const toolCalling = ref(false)
|
||||
});
|
||||
const input = ref("");
|
||||
const toolName = ref("");
|
||||
const toolError = ref(false);
|
||||
const toolCalling = ref(false);
|
||||
|
||||
function sendMessage() {
|
||||
if (input.value !== "") {
|
||||
toolError.value = false
|
||||
toolError.value = false;
|
||||
api.ChatMessage.apiV1ChatsIdMessagesPost(chatId, {
|
||||
message: input.value,
|
||||
})
|
||||
@ -65,109 +82,113 @@ function sendMessage() {
|
||||
const newMessage = {
|
||||
content: input.value,
|
||||
role: "user",
|
||||
}
|
||||
};
|
||||
|
||||
if (messages.value.data == null) {
|
||||
messages.value.data = [newMessage]
|
||||
messages.value.data = [newMessage];
|
||||
} else {
|
||||
messages.value.data?.push(newMessage)
|
||||
messages.value.data?.push(newMessage);
|
||||
}
|
||||
|
||||
const streamId = res.data.data?.stream_id
|
||||
const streamId = res.data.data?.stream_id;
|
||||
|
||||
if (streamId) {
|
||||
streamChat(streamId)
|
||||
streamChat(streamId);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// if 409
|
||||
if (err.response.status === 409) {
|
||||
const streamId = err.response.data.data?.stream_id
|
||||
const streamId = err.response.data.data?.stream_id;
|
||||
|
||||
if (streamId) {
|
||||
streamChat(streamId)
|
||||
streamChat(streamId);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function streamChat(streamId: String) {
|
||||
const url = conf.basePath + "/api/v1/stream/" + streamId
|
||||
const url = conf.basePath + "/api/v1/stream/" + streamId;
|
||||
|
||||
const evtSource = new EventSource(url)
|
||||
|
||||
let messageAdded = false
|
||||
const evtSource = new EventSource(url);
|
||||
|
||||
let messageAdded = false;
|
||||
|
||||
// 滚动页面到最底部
|
||||
window.scrollTo(0, document.body.scrollHeight)
|
||||
window.scrollTo(0, document.body.scrollHeight);
|
||||
|
||||
// set index
|
||||
const i = (messages.value.data?.length ?? 1) - 1
|
||||
const i = (messages.value.data?.length ?? 1) - 1;
|
||||
|
||||
evtSource.addEventListener("data", (e) => {
|
||||
const data = JSON.parse(e.data)
|
||||
console.log(data.state)
|
||||
|
||||
let append = true
|
||||
const data = JSON.parse(e.data);
|
||||
console.log(data.state);
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
toolCalling.value = false;
|
||||
}, 300);
|
||||
break;
|
||||
case "chunk":
|
||||
if (!messageAdded) {
|
||||
const newMessage = {
|
||||
content: "",
|
||||
role: "assistant",
|
||||
}
|
||||
};
|
||||
|
||||
if (messages.value.data == null) {
|
||||
messages.value.data = [newMessage]
|
||||
messages.value.data = [newMessage];
|
||||
} else {
|
||||
// add to messages
|
||||
messages.value.data?.push(newMessage)
|
||||
messages.value.data?.push(newMessage);
|
||||
}
|
||||
|
||||
messageAdded = true
|
||||
append = true
|
||||
messageAdded = true;
|
||||
append = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (append && messageAdded) {
|
||||
// @ts-ignore
|
||||
messages.value.data[i].content += data.content
|
||||
messages.value.data[i].content += data.content;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// close
|
||||
evtSource.addEventListener("close", () => {
|
||||
evtSource.close()
|
||||
})
|
||||
evtSource.close();
|
||||
});
|
||||
}
|
||||
|
||||
const getMessages = () => {
|
||||
api.ChatMessage.apiV1ChatsIdMessagesGet(chatId).then((res) => {
|
||||
messages.value = res.data
|
||||
})
|
||||
}
|
||||
messages.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
getMessages()
|
||||
getMessages();
|
||||
</script>
|
||||
|
||||
@ -2,82 +2,78 @@
|
||||
<h3>验证语法</h3>
|
||||
<p>目前处于测试阶段，不一定准确，但是能保证你添加成功。</p>
|
||||
|
||||
|
||||
|
||||
<!-- input -->
|
||||
<v-textarea v-model="input" label="你的 JSON 数据"></v-textarea>
|
||||
|
||||
<v-btn color="primary" class="mt-3 mb-3" @click="validate()">验证</v-btn>
|
||||
<v-btn class="mt-3 mb-3" color="primary" @click="validate()">验证</v-btn>
|
||||
<div v-show="checked">
|
||||
<p v-show="error" class="text-danger">错误：{{ errorReason }}</p>
|
||||
<p v-show="!error" class="text-success">正确</p>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RagNewInternalSchemaToolDiscoveryInput } from '@/api'
|
||||
import { api } from '@/plugins/api'
|
||||
import { RagNewInternalSchemaToolDiscoveryInput } from "@/api";
|
||||
import { api } from "@/plugins/api";
|
||||
|
||||
const exampleJSON = {
|
||||
"name": "My Functions",
|
||||
"description": "My Functions",
|
||||
"homepage_url": "https://ivampiresp.com/test",
|
||||
"callback_url": "https://ivampiresp.com/files/tool_test/index.php",
|
||||
"functions": [
|
||||
name: "My Functions",
|
||||
description: "My Functions",
|
||||
homepage_url: "https://ivampiresp.com/test",
|
||||
callback_url: "https://ivampiresp.com/files/tool_test/index.php",
|
||||
functions: [
|
||||
{
|
||||
"name": "get_current_time",
|
||||
"description": "当你想知道现在的时间时非常有用。",
|
||||
"parameters": {}
|
||||
name: "get_current_time",
|
||||
description: "当你想知道现在的时间时非常有用。",
|
||||
parameters: {},
|
||||
},
|
||||
{
|
||||
"name": "get_current_weather",
|
||||
"description": "当你想查询指定城市的天气时非常有用。",
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"location": {
|
||||
"type": "string",
|
||||
"description": "城市或县区，比如北京市、杭州市、余杭区等。"
|
||||
}
|
||||
}
|
||||
name: "get_current_weather",
|
||||
description: "当你想查询指定城市的天气时非常有用。",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: {
|
||||
location: {
|
||||
type: "string",
|
||||
description: "城市或县区，比如北京市、杭州市、余杭区等。",
|
||||
},
|
||||
"required": [
|
||||
"location"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
required: ["location"],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const input = ref("")
|
||||
const checked = ref(false)
|
||||
const error = ref(false)
|
||||
const errorReason = ref("")
|
||||
const input = ref("");
|
||||
const checked = ref(false);
|
||||
const error = ref(false);
|
||||
const errorReason = ref("");
|
||||
|
||||
// unmashal
|
||||
input.value = JSON.stringify(exampleJSON, null, 4)
|
||||
input.value = JSON.stringify(exampleJSON, null, 4);
|
||||
|
||||
function validate() {
|
||||
checked.value = true
|
||||
checked.value = true;
|
||||
// 如果能解析为 json
|
||||
try {
|
||||
JSON.parse(input.value)
|
||||
JSON.parse(input.value);
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
errorReason.value = "JSON 格式错误"
|
||||
return
|
||||
error.value = true;
|
||||
errorReason.value = "JSON 格式错误";
|
||||
return;
|
||||
}
|
||||
|
||||
// 强制类型转换
|
||||
const data: RagNewInternalSchemaToolDiscoveryInput = JSON.parse(input.value)
|
||||
const data: RagNewInternalSchemaToolDiscoveryInput = JSON.parse(input.value);
|
||||
|
||||
|
||||
api.Tool.apiV1ToolsSyntaxPost(data).then((res) => {
|
||||
error.value = false
|
||||
errorReason.value = ""
|
||||
}).catch((e) => {
|
||||
error.value = true
|
||||
errorReason.value = e.response.data.error
|
||||
api.Tool.apiV1ToolsSyntaxPost(data)
|
||||
.then(() => {
|
||||
error.value = false;
|
||||
errorReason.value = "";
|
||||
})
|
||||
.catch((e) => {
|
||||
error.value = true;
|
||||
errorReason.value = e.response.data.error;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user