vue编写本地ollama支持插件工具调用、多智能体、语音通话功能的ai聊天助手代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：vue编写本地ollama支持插件工具调用、多智能体、语音通话功能的ai聊天助手代码，支持代码高亮和流式输出打字动画、支持代码复制、支持语音朗读、支持语音识别、支持语音唤醒通话、支持选择本地模型和参数设置，支持工具插件本地调用，支持pdf、word、excel、ppt等文件拖拽加入问答对话。
代码标签： vue 编写本地 ollama 支持插件工具调用智能体语音通话功能 ai 聊天助手
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet"
        href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chinese_lunar_calendar.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.umd.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/localforage.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xlsx.full.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdf.2.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mammoth.browser.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jszip.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pptxgen.bundle.js"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
            transition: background-color 0.3s ease;

        }

        .filebox img {
            height: 60px;
            width: auto;
        }

        .filebox p {
            margin: 0 !important;
            padding: 0 !important;
        }

        .filebox .fname {
            font-size: 12px;
            color: grey;
        }

        .cont {

            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        .historylist {

            flex: 1;
            overflow-y: scroll;

        }

        .historylist img {
            max-width: 100px;
        }

        .mesay,
        .aisay {
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
            line-height: 30px;
        }

        .mesay {
            background-color: #d0e7ff;
            text-align: right;
        }

        .aisay {
            background-color: aliceblue;
            text-align: left;
        }

        .inputpannel {
            display: flex;
            margin: 10px;
            background: white;
            align-items: flex-end;
            border: 2px solid grey;
            border-radius: 14px;
        }

        .footer {
            position: relative;

        }

        .inputpannel:focus-within {
            border-color: blue;
        }

        .inputtext {
            margin-top: 4px;

            width: 100%;
            background: white;
            line-height: 20px;
            box-sizing: border-box;
            padding: 8px;
            font-family: inherit;
            font-size: 16px;
            resize: none;
            overflow: hidden;
            border: none;
            outline: none;
            height: 40px;

            min-height: 40px;
            overflow-y: auto;
            max-height: calc(24px * 5);

        }

        .inputtext:focus {
            border: none;
            outline: none;
        }


        textarea::placeholder {}


        .historylist pre {
            white-space: pre-wrap;
            color: #ececec;
            background: black;
            border-radius: 4px;
            padding: 10px;
            margin: 0;

        }

        .historylist p {
            margin: 0;
            padding: 2px;
        }

        .typing-text {
            font-size: 24px;
            white-space: pre-wrap;
            border-right: 2px solid black;
            animation: blink 0.7s steps(2, start) infinite;
        }

        @keyframes blink {
            to {
                border-color: transparent;
            }
        }

        .code-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            color: #cdcdcd;
            height: 24px;
            background: #6767;


        }

        .language-label {
            position: absolute;
            top: -4px;
            left: 0;
            padding: 0 10px;

            font-size: 0.8em;

        }

        .copy-button {
            position: absolute;
            top: 0;
            right: 0px;
            padding: 0.3em 0.6em;


            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.8em;
        }

        .code-content {
            line-height: 20px;
            display: block;
            text-wrap: nowrap;
            margin-top: -40px;
            margin-bottom: -63px;
            overflow-x: scroll;
        }

        .historylist pre {
            position: relative;
            background: black;
            color: white;
            border-radius: 6px;
            padding: 1em;
            margin: 1em 0;
        }

        .file-upload {
            position: relative;
            width: 30px;
            height: 30px;
            margin: 6px -1px 3px 10px;

            overflow: hidden;



        }

        .sendbtn {
            margin: 13px;
        }

        .file-upload input[type=file] {
            position: absolute;
            top: 0;
            left: 0;


            opacity: 0;
            cursor: pointer;
        }



        ol {
            list-style: none;
            padding: 0;
            margin: 10px;
        }

        i {
            cursor: pointer;

        }

        .recomminput li {
            background: aliceblue;
            border: 1px solid aliceblue;
            margin: 2px 0 4px 0;
            padding: 5px;

            width: 64%;
            font-size: 12px;
            cursor: pointer;
            border-radius: 5px;
        }

        .copybtn,
        .regenbtn {
            cursor: pointer;
            margin-right: 20px;
        }

        .scrollbar {
            position: absolute;
            top: -20px;
            width: 100%;
            right: 0;
            left: 0;
        }

        .scrollbar i {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background: white;
            line-height: 30px;
        }

        .attachpannel {
            position: absolute;

            border-radius: 20px;
            display: flex;

            width: 100%;
            height: 100px;

            left: 0;
            top: -80px;
        }

        /* 隐藏默认滚动条 */
        textarea::-webkit-scrollbar {
            display: none;
        }

        /* 添加自定义滚动条 */
        textarea {
            scrollbar-width: thin;
            /* 调整滚动条宽度 */
            scrollbar-color: #ccc transparent;
            /* 调整滚动条颜色 */
            overflow-y: auto;
            /* 确保溢出时出现滚动条 */
        }

        /* Firefox 上的滚动条样式 */
        textarea {
            scrollbar-width: thin;
        }

        /* WebKit 上的滚动条样式 */
        textarea::-webkit-scrollbar {
            width: 8px;
            /* 调整滚动条宽度 */
        }

        textarea::-webkit-scrollbar-track {
            background-color: transparent;
            /* 滚动条背景颜色 */
        }

        textarea::-webkit-scrollbar-thumb {
            background-color: #ccc;
            /* 滚动条颜色 */
            border-radius: 4px;
            /* 滚动条圆角 */
        }

        textarea::-webkit-scrollbar-thumb:hover {

            background-color: #999;
            /* 鼠标悬停时的滚动条颜色 */
        }


        /* 隐藏默认滚动条 */
        .historylist::-webkit-scrollbar {
            display: none;
        }

        /* 添加自定义滚动条 */
        .historylist {
            scrollbar-width: thin;
            /* 调整滚动条宽度 */
            scrollbar-color: #ccc transparent;
            /* 调整滚动条颜色 */
            overflow-y: auto;
            /* 确保溢出时出现滚动条 */
        }

        /* Firefox 上的滚动条样式 */
        .historylist {
            scrollbar-width: thin;
        }

        /* WebKit 上的滚动条样式 */
        .historylist::-webkit-scrollbar {
            width: 8px;
            /* 调整滚动条宽度 */
        }

        .historylist::-webkit-scrollbar-track {
            background-color: transparent;
            /* 滚动条背景颜色 */
        }

        .historylist::-webkit-scrollbar-thumb {
            background-color: #ccc;
            /* 滚动条颜色 */
            border-radius: 4px;
            /* 滚动条圆角 */
        }

        .historylist::-webkit-scrollbar-thumb:hover {

            background-color: #999;
            /* 鼠标悬停时的滚动条颜色 */
        }

        /* 隐藏默认滚动条 */
        .code-content::-webkit-scrollbar {
            display: none;
        }

        /* 添加自定义滚动条 */
        .code-content {
            scrollbar-width: thin;
            /* 调整滚动条宽度 */
            scrollbar-color: #ccc transparent;
            /* 调整滚动条颜色 */
            overflow-y: auto;
            /* 确保溢出时出现滚动条 */
        }

        /* Firefox 上的滚动条样式 */
        .code-content {
            scrollbar-width: thin;
        }

        /* WebKit 上的滚动条样式 */
        .code-content::-webkit-scrollbar {
            width: 8px;
            /* 调整滚动条宽度 */
        }

        .code-content::-webkit-scrollbar-track {
            background-color: transparent;
            /* 滚动条背景颜色 */
        }

        .code-content::-webkit-scrollbar-thumb {
            background-color: #ccc;
            /* 滚动条颜色 */
            border-radius: 4px;
            /* 滚动条圆角 */
        }

        .code-content::-webkit-scrollbar-thumb:hover {

            background-color: #999;
            /* 鼠标悬停时的滚动条颜色 */
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        #overlay img {
            max-width: 100%;
            max-height: 100%;
        }

        #closeBtn {
            position: absolute;
            top: 10px;
            right: 10px;

            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
        }

        .feedbackpanel {
            font-size: 12px;
        }

        #chatlist {

            width: 200px;
            padding: 10px;
            height: 90vh;
            overflow-y: scroll;
            background: aliceblue;

        }

        #setting {

            width: 300px;
            height: 90vh;
            background: white;
            padding: 4px;
            overflow-y: scroll;

        }

        .bodycont {
            display: flex;
            flex-direction: row;
        }

        #bodychat {
            flex: 1;
        }

        #voicechat {
            flex: 1;
            text-align: center;
            vertical-align: middle;
            margin-top: 100px;

        }

        .del {
            display: none;
            margin-top: 5px;

            margin-right: 7px;

        }

        .agentname {
            font-weight: bold;
            font-size: 14px;
            margin-right: 4px;

        }

        .hischatitem .messagetext {

            width: 84px;
            flex: 1;
        }

        .hischatitem {
            overflow: hidden;
            margin: 5px;
            display: flex;
            border-radius: 5px;
            cursor: pointer;
            height: 26px;
            font-size: 12px;

            display: flex;
            padding: 2px 4px;
            line-height: 26px;
            color: grey;
        }


        .hischatitem:hover .del {
            display: block;


        }

        .nowchatitem {
            background: #d0e7ff;
        }

        .hischatitem:hover {
            background: #d0e7ff;
        }

        /* Range styling */
        input[type="range"] {
            -webkit-appearance: none;
            /* 移除默认样式 */
            width: 100%;
            height: 10px;
            background: #ddd;
            outline: none;
            opacity: 0.7;
            transition: opacity .2s;
        }

        input[type="range"]:hover {
            opacity: 1;
        }

        input[type="range"]::-webkit-slider-runnable-track {
            width: 100%;
            height: 20px;
            background: #ddd;
            border-radius: 5px;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: blue;
            /* 设置滑块颜色为蓝色 */
            cursor: pointer;
            border-radius: 50%;
        }

        input[type="range"]::-moz-range-track {
            width: 100%;
            height: 10px;
            background: #ddd;
            border-radius: 5px;
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: blue;
            /* 设置滑块颜色为蓝色 */
            cursor: pointer;
            border-radius: 50%;
        }

        input[type="range"]::-ms-track {
            width: 100%;
            height: 10px;
            background: #ddd;
            border-radius: 5px;
        }

        input[type="range"]::-ms-thumb {
            width: 20px;
            height: 20px;
            background: blue;
            /* 设置滑块颜色为蓝色 */
            cursor: pointer;
            border-radius: 50%;
        }

        /* Select styling */
        select {
            width: 100%;
            padding: 10px;
            border: 2px solid blue;
            /* 设置边框颜色为蓝色 */
            border-radius: 5px;
            background-color: white;
            color: black;
            font-size: 16px;
            appearance: none;
            /* 移除默认箭头 */
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        /* 基本表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            margin: 20px 0;
        }

        /* 表头样式 */
        thead {
            background-color: #007BFF;
            color: white;
        }

        th,
        td {
            padding: 12px 15px;
            text-align: left;
        }

        /* 表格行样式 */
        tbody tr {
            border-bottom: 1px solid #ddd;
        }

        tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        tbody tr:last-of-type {
            border-bottom: 2px solid #007BFF;
        }

        /* 悬停效果 */
        tbody tr:hover {
            background-color: #e0e0e0;
            cursor: pointer;
        }

        select:hover {
            border-color: darkblue;
        }

        select:focus {
            outline: none;
            border-color: darkblue;
        }

        /* Custom arrow */
        .select-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .select-wrapper::after {
            content: '▼';
            position: absolute;
            top: 67%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
            color: blue;
            /* 设置箭头颜色为蓝色 */
        }


        .promptinput {
            width: 280px;
            min-height: 150px;
            border: 2px solid grey;
            /* 设置边框颜色为蓝色 */
            border-radius: 5px;
            background-color: white;
            color: black;
            font-size: 16px;
            resize: vertical;
            /* 允许垂直调整大小 */
        }

        .promptinput:hover {
            border-color: blue;
        }

        .promptinput:focus {
            outline: none;
            border-color: blue;
        }

        .textinput {
            padding: 8px 6px;
            border-radius: 5px;
            width: 270px;
            background-color: white;
            color: black;
            font-size: 16px;
            border: 2px solid grey;
        }

        .textinput:hover {
            border-color: blue;
        }

        .textinput:focus {
            outline: none;
            border-color: blue;
        }

        .recomlist {
            display: flex;

            margin: 20vh;
        }

        .recomlist .item {
            cursor: pointer;
            flex: 1;
            border: 1px solid #d0e7ff;
            border-radius: 6px;
            padding: 10px;
            text-align: center;
            line-height: 30px;
            margin: 20px;
        }

        .recomlist>.item:hover {
            background: #d0e7ff;
        }

        #micinput {
            position: absolute;

            top: -360px;
            left: calc(50% - 100px);
            background: aliceblue;
            border-radius: 6px;
            border: 2px solid blue;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            width: 200px;

        }

        .hangoverbtn {
            margin-top: 14px;
            border-radius: 10px;
            background: red;
            color: white;
            border: none;
            padding: 10px 40px;
            text-align: center;
        }

        .tooldia {

            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: aliceblue;
            border-radius: 6px;
            border: 2px solid blue;
            padding: 20px;
            z-index: 111;

        }

        .subbtn {
            background: blue;
            color: white;
            padding: 4px 10px;
            margin: 10px;

        }
    </style>
</head>

<body>

    <div id="overlay" onclick="hideImage()">

        <i id="closeBtn" onclick="hideImage()" class="fa fa-lg fa-times-circle"></i>
        <img id="overlayImage" src="" alt="Fullscreen Image">
    </div>



    <div id="app" class="bodycont">

        <div class="tooldia" v-show="showtooldiaforagent" style="z-index: 113;">

            <i @click="showtooldiaforagent=false" class="fa fa-lg fa-times-circle" style="margin: 0; float: right;"></i>
            <div style="font-weight: bold;">选择你想要的工具</div>
            <p v-for="item in alltoollist" :key="item.toolname" style="cursor: pointer;;">
                <label>
                    <input type="checkbox" v-model="agentformdata.bottoollist" :value="item" />
                    {{item.toolname}}(<span style="color: grey;font-size: 12px;"> {{item.desc}}</span>)
                </label>
            </p>


        </div>
        <div class="tooldia" v-show="showaddagentdia" style="z-index: 112;max-height: 60vh;overflow: scroll;">
            <i @click="showaddagentdia=false" class="fa fa-lg fa-times-circle" style="margin: 0; float: right;"></i>
            <div style="font-weight: bold;">添加智能体 </div>
            <div>
                <p>智能体名称:</p>
                <input type="text" class="textinput" v-model="agentformdata.agentname" placeholder="智能体名称" />
            </div>
            <div>
                <p>智能体描述:</p>
                <textarea type="text" class="promptinput" v-model="agentformdata.desc" placeholder="智能体描述"></textarea>
            </div>
            <div class="select-wrapper">
                <p>模型</p>
                <p>
                    <select v-model="agentformdata.aimodel">
                        <option v-for="item in modellist" :key="item.model" :value="item.model">
                            {{ item.model }}
                        </option>
                    </select>
                </p>
            </div>
            <div>
                <p>随机性:{{agen.........完整代码请登录后点击上方下载按钮下载查看