vue模仿chatgpt官网聊天界面并免费调用chatgpt api实现ai智能问答效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue模仿chatgpt官网聊天界面并免费调用chatgpt api实现ai智能问答效果代码，使用markdown及highlight高亮显示代码，实现localstorage实现会话消息本地存储，支持多个聊天自定义。

代码标签： vue 模仿 chatgpt 官网聊天界面免费调用 api ai 智能问答

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html class="light" style="color-scheme: light;">

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

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta property="og:title" content="ChatGPT">
    <meta property="og:image" content="https://chat.openai.com/images/chatgpt-share-og.png">
    <meta property="og:description" content="A conversational AI system that listens, learns, and challenges">
    <meta property="og:url" content="https://chat.openai.com">

    <meta name="next-head-count" content="8">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwind.3.2.4.js"></script>


</head>

<body class="antialiased">
    <div id="app">

        <div></div>
        <div class="overflow-hidden w-full h-full relative flex z-0">
            <div class="absolute left-2 top-2 z-10  md:inline-block" data-projection-id="176" style="opacity: 0;" id="showsliderbtn"><span class="" data-state="closed"><button aria-label="Show sidebar" class="flex p-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border bg-white dark:bg-gray-800 border-black/10 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-700 h-11"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-black dark:text-white" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg></button></span></div>
            <div class="dark flex-shrink-0 overflow-x-hidden bg-gray-900" data-projection-id="40" id="sidebar" style="width: 260px; visibility: visible;">
                <div class="h-full w-[260px]">
                    <div class="flex h-full min-h-0 flex-col ">
                        <div class="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20">
                            <h2 style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;">Chat history</h2>
                            <nav class="flex h-full w-full flex-col p-2" aria-label="Chat history">
                                <div class="mb-1 flex flex-row gap-2"><a @click="newchat" class="flex p-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 h-11 flex-shrink-0 flex-grow"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>New chat</a>


                                    <span class="" data-state="closed"><a class="flex p-3 gap-3 transition-colors duration-200 text-white cursor-pointer text-sm rounded-md border border-white/20 hover:bg-gray-500/10 h-11 w-11 flex-shrink-0 items-center justify-center" id="hidesidebar"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg><span style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;">Hide sidebar</span></a>
                                    </span>
                                </div>
                                <div class="absolute left-0 top-14 z-20 overflow-hidden transition-all duration-500 invisible max-h-0">
                                    <div class="bg-gray-900 px-4 py-3">
                                        <div class="p-1 text-sm text-gray-100">Chat History is off for this browser.</div>
                             .........完整代码请登录后点击上方下载按钮下载查看