xiongzhu
/
chat-api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!DOCTYPE html>
<html lang="en" class="h-full">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <title>ChatPDF(客服)</title>
        <script type="text/javascript" src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/eruda@3.0.0/eruda.js"></script>
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                corePlugins: {
                    preflight: false
                },
                theme: {
                    extend: {
                        colors: {
                            clifford: "#da373d"
                        }
                    }
                }
            };
        </script>
        <!-- Import style -->
        <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
        <!-- Import Vue 3 -->
        <script src="//unpkg.com/vue@3"></script>
        <!-- Import component library -->
        <script src="//unpkg.com/element-plus"></script>
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
            }
            ::-webkit-scrollbar {
                width: 0;
                height: 0;
                display: none;
            }
        </style>
    </head>
    <body class="h-full">
        <div id="app" class="h-full">
            <el-container class="h-full">
                <el-main class="flex flex-col">
                    <el-alert v-if="name" :title="fileName" type="success" effect="dark" @close="clear"></el-alert>
                    <el-upload
                        v-else
                        class="upload-demo"
                        drag
                        v-model:file-list="fileList"
                        action="/api/chat-pdf/upload"
                        accept="application/pdf"
                        :on-success="onSuccess"
                    >
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">请上传客服回答文档</div>
                    </el-upload>
                    <div id="list" class="flex flex-col flex-1 overflow-auto">
                        <div
                            v-for="(item,i) in conversations"
                            :key="i"
                            class="mt-4 p-3 rounded-t-xl"
                            :class="item.value.role==='system' ? 'mr-10 bg-slate-300	 rounded-r-xl' : 'ml-10 bg-neutral-200 rounded-l-xl'"
                        >
                            <el-icon v-if="item.value.loading" class="is-loading">
                                <Loading />
                            </el-icon>
                            <span v-else>\{{item.value.content}}</span>
                        </div>
                    </div>
                </el-main>
                <el-footer class="py-4 flex items-end" @keyup.enter.stop.prevent="ask">
                    <el-input v-model="q" :disabled="!name" placeholder="提问"></el-input>
                    <el-button class="ml-3" type="primary" :disabled="!name" @click="ask">发送</el-button>
                </el-footer>
            </el-container>
        </div>
    </body>
    <script>
        var app = Vue.createApp({
            data() {
                return {
                    name: "",
                    fileName: "",
                    fileList: [],
                    q: "",
                    conversations: []
                };
            },

            methods: {
                onSuccess(res, file) {
                    console.log(res, file);
                    this.name = res.name;
                    this.fileName = file.name;
                },
                clear() {
                    this.fileList = [];
                    this.name = "";
                    this.fileName = "";
                    this.q = "";
                    this.conversations = [];
                },
                ask(e) {
                    console.log(this.q);
                    if (this.q) {
                        this.conversations.push(
                            Vue.ref({
                                role: "user",
                                content: this.q
                            })
                        );
                        var msg = Vue.ref({
                            role: "system",
                            loading: true,
                            content: ""
                        });
                        this.conversations.push(msg);

                        setTimeout(function () {
                            $("#list").scrollTop($("#list")[0].scrollHeight);
                        }, 50);
                        $.post(
                            "/api/chat-pdf/customerServiceAsk",
                            {
                                name: this.name,
                                q: this.q
                            },
                            function (res) {
                                console.log(res);
                                msg.value.loading = false;
                                msg.value.content = res.answer;
                                setTimeout(function () {
                                    $("#list").scrollTop($("#list")[0].scrollHeight);
                                }, 50);
                            }
                        );
                        this.q = "";
                    }
                }
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount("#app");
    </script>
</html>