kubbo/chatai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

整理聊天函数

Browse Source
This commit is contained in:
aixianling
2023-05-12 17:32:54 +08:00
parent 912c7fb079
commit 795f6cd652
6 changed files with 182 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -454,9 +454,9 @@
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
"version": "1.4.14",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.18",
@@ -468,12 +468,6 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"peer": true
},
"node_modules/@popperjs/core": {
"name": "@sxzz/popperjs-es",
"version": "2.11.7",
@@ -2257,9 +2251,9 @@
}
},
"@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
"version": "1.4.14",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
},
"@jridgewell/trace-mapping": {
"version": "0.3.18",
@@ -2269,14 +2263,6 @@
"requires": {
"@jridgewell/resolve-uri": "3.1.0",
"@jridgewell/sourcemap-codec": "1.4.14"
},
"dependencies": {
"@jridgewell/sourcemap-codec": {
"version": "1.4.14",
"resolved": "http://192.168.1.87:4873/@jridgewell%2fsourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"peer": true
}
}
},
"@popperjs/core": {

21
src/components/chat.vue
View File

@@ -15,7 +15,7 @@
</el-row>
</el-row>
<thinking-bar v-show="loading"/>
<chat-content class="fill"/>
<chat-content class="fill" :list="chatHistory"/>
<el-row class="mar-t8" align="middle">
<chat-input class="fill mar-r8" v-model="inputText"/>
<el-button type="primary" @click="handleSend">发送</el-button>
@@ -24,9 +24,11 @@
</template>
<script>
import {dayjs} from "element-plus";
import ChatContent from "../components/chatContent";
import ChatInput from "../components/chatInput";
import ThinkingBar from "../components/thinkingBar";
import {USER_AVATAR} from "../utils/env";
export default {
name: "chat",
@@ -38,11 +40,26 @@ export default {
return {
loading: false,
inputText: "",
chatHistory: []
}
},
methods: {
handleSend() {
if (!!this.inputText) {
const myMsg = {
headImg: USER_AVATAR,
name: "我",
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
msg: this.inputText,
chatType: 0, //信息类型，0文字，1图片
uid: "me", //uid
}
this.chatHistory.push(myMsg)
this.loading = true
this.settings.model.chat().finally(() => this.loading = false)
} else {
this.$message.error("请不要发送空消息!")
}
}
}
}

158
src/components/chatContent.vue
View File

@@ -1,21 +1,9 @@
<template>
<section class="chatContent" @scroll="onScroll">
<div class="chat-wrapper" v-for="item in list" :key="item.id">
<div class="chat-friend" v-if="item.uid !== 'jcm'">
<div class="chat-friend" v-if="item.uid !== 'me'">
<div class="chat-text" v-if="item.chatType == 0">
<el-row :gutter="20">
<el-col :span="2">
<svg t="1679666016648" @click="$copy(item.msg, '已复制')" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
<path
d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
fill="#909399" p-id="6242"></path>
</svg>
</el-col>
<el-col :span="21">
</el-col>
</el-row>
<icon-copy @click="$copy(item.msg, '已复制')"/>
<markdown-it-vue :content="item.msg.trim()"/>
</div>
<div class="chat-img" v-if="item.chatType == 1">
@@ -36,18 +24,7 @@
</div>
<div class="chat-me" v-else>
<div class="chat-text" v-if="item.chatType == 0">
<span style="font-size:16px">{{ item.msg }}</span>
</div>
<div class="chat-img" v-if="item.chatType == 1">
<img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
<el-image style="max-width: 300px; border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList"
v-else>
</el-image>
</div>
<div class="chat-img" v-if="item.chatType == 2">
<div class="word-file">
<FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard>
</div>
<span v-text="item.msg"/>
</div>
<div class="info-time">
<span>{{ item.name }}</span>
@@ -60,12 +37,13 @@
</template>
<script>
import IconCopy from "../icons/iconCopy";
export default {
name: "chatContent",
data() {
return {
list:[]
}
components: {IconCopy},
props: {
list: {default: () => []}
},
methods: {
onScroll() {
@@ -90,5 +68,125 @@ export default {
padding: 16px;
box-sizing: border-box;
overflow-y: auto;
&::-webkit-scrollbar {
width: 3px;
/* 设置滚动条宽度 */
}
&::-webkit-scrollbar-thumb {
background-color: rgb(66, 70, 86);
/* 设置滚动条滑块的背景色 */
border-radius: 50%;
/* 设置滑块的圆角 */
}
.chat-friend {
width: 100%;
float: left;
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
.chat-text {
float: left;
padding: 15px;
max-width: max(650px, 90%);
border-radius: 4px;
background-color: #fff;
}
.chat-img {
img {
max-width: 300px;
max-height: 200px;
border-radius: 4px;
}
}
.info-time {
margin: 10px 0;
color: #fff;
font-size: 14px;
display: flex;
justify-content: flex-start;
img {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
}
span {
line-height: 30px;
}
span:last-child {
color: rgb(101, 104, 115);
margin-left: 10px;
vertical-align: middle;
}
}
}
.chat-me {
width: 100%;
float: right;
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
.chat-text {
float: right;
max-width: 90%;
padding: 15px;
border-radius: 4px;
background-color: #95ec69;
color: #000;
word-break: break-all;
}
.chat-img {
img {
max-width: 300px;
max-height: 200px;
border-radius: 4px;
}
}
.info-time {
margin: 10px 0;
color: #fff;
font-size: 14px;
display: flex;
justify-content: flex-end;
img {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-left: 10px;
}
span {
line-height: 30px;
}
span:first-child {
color: rgb(101, 104, 115);
margin-right: 10px;
vertical-align: middle;
}
}
}
}
</style>

7
src/components/chatInput.vue
View File

@@ -17,9 +17,6 @@ export default {
text: ""
}
},
methods: {},
created() {
}
}
</script>
@@ -36,6 +33,10 @@ export default {
background-color: rgb(66, 70, 86);
color: white;
border-color: #999;
&:focus {
outline: none;
}
}
}
}

22
src/icons/iconCopy.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<section class="iconCopy">
<svg t="1679666016648" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
<path
d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
fill="#909399" p-id="6242"></path>
</svg>
</section>
</template>
<script>
export default {
name: "iconCopy",
props: {}
}
</script>
<style lang="scss" scoped>
.iconCopy {
}
</style>

3
src/utils/models.js
View File

@@ -17,6 +17,9 @@ export class ChatGPT extends BaseModel {
desc: "ChatGPT-3.5所基于的模型"
});
}
async chat(){
}
}
export class ChatGLM extends BaseModel {