vue模仿chatgpt官网聊天界面并免费调用chatgpt api实现ai智能问答效果代码
代码语言：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>
<div class="p-1 text-xs text-gray-500">When history is turned off, new chats on this browser won't appear in your history on any of your devices, be used to train our models, or stored for longer than 30 days. <strong>This setting does not sync across browsers or devices.</strong> <a href="" target="_blank" class="underline" rel="noreferrer">Learn more</a></div><button class="btn relative btn-primary mt-4 w-full"><div class="flex w-full gap-2 items-center justify-center"><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"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>Enable chat history</div></button></div>
<div class="h-24 bg-gradient-to-t from-gray-900/0 to-gray-900"></div>
</div>
<div class="flex-col flex-1 transition-opacity duration-500 overflow-y-auto -mr-2">
<div class="flex flex-col gap-2 pb-2 text-gray-100 text-sm">
<div><span><div class="relative" data-projection-id="41" style="height: auto; opacity: 1;"><ol></ol></div><div class="relative" data-projection-id="42" style="height: auto; opacity: 1;"><div class="sticky top-0 z-[16]" data-projection-id="43" style="opacity: 1;"><h3 class="h-9 pb-2 pt-3 px-3 text-xs text-gray-500 font-medium text-ellipsis overflow-hidden break-all bg-gray-900">Previous 7 Days</h3></div>
<ol>
<!-- <li @click="newchat">添加</li>
<li :class="{ active: contact.id === currentContact.id }" @click="setCurrentContact(contact)">
{{ contact.name }}
<button>Rename</button>
<button>Delete</button>
</li>
-->
<li v-for="contact in reversedContacts" @click="setCurrentContact(contact)" class="relative z-[15]" data-projection-id="44" style="opacity: 1; height: auto;">
<a :class="{ 'bg-gray-800': contact.id === currentContact.id }" class="flex py-3 px-3 items-center gap-3 relative rounded-md cursor-pointer break-all pr-[4.5rem] )} )} hover:bg-gray-800 group"><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"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<div class="flex-1 text-ellipsis max-h-5 overflow-hidden break-all relative">{{contact.name}}
<div class="absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-800"></div>
</div>
<div class="absolute flex right-1 z-10 text-gray-300 visible">
<button @click.stop="renameContact(contact)" class="p-1 hover:text-white"><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"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
<!-- <button type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:r3a:" data-state="closed" class="p-1 hover:text-white"><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"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg></button> -->
<button @click.stop="deleteContact(contact)" class="p-1 hover:text-white"><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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
</div></a></li>
</ol>
</div>
<div class="relative" data-projection-id="48" style="height: auto; opacity: 1;"><div class="sticky top-0 z-[14]" data-projection-id="49" style="opacity: 1;"><!-- <h3 class="h-9 pb-2 pt-3 px-3 text-xs text-gray-500 font-medium text-ellipsis overflow-hidden break-all bg-gray-900">Previous 30 Days</h3> --></div></div></span><span></span></div>
</div>
</div>
<div class="border-t border-white/20 pt-2"><a class="flex p-3 items-center gap-3 transition-colors duration-200 text-white cursor-pointer text-sm hover:bg-gray-800 rounded-md"><span class="flex w-full flex-row justify-between"><span class="gold-new-button flex items-center gap-3"><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"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>Upgrade to Plus</span><span class="rounded-md bg-yellow-200 px-1.5 py-0.5 text-xs font-medium uppercase text-gray-800">NEW</span></span></a>
<div class="group relative" data-headlessui-state=""><button class="flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800 group-ui-open:bg-gray-800" id="headlessui-menu-button-:r4g:" type="button" aria-haspopup="true"
aria-expanded="false" data-headlessui-state=""><div class="-ml-0.5 w-5 flex-shrink-0"><div class="relative flex"><span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><span style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"><img alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2720%27%20height=%2720%27/%3e" style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"></span><img alt="User" srcset="" src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" decoding="async" data-nimg="intrinsic" class="rounded-sm" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"></span></div></div><div class="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">test@openai.com</div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 flex-shrink-0 text-gray-500" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button></div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="relative flex h-full max-w-full flex-1 overflow-hidden">
<div class="flex h-full max-w-full flex-1 flex-col">
<main class="relative h-full w-full transition-width flex flex-col overflow-auto items-stretch flex-1">
<div class="absolute right-4 top-2 z-10 hidden flex-col gap-2 md:flex"></div>
<div class="flex-1 overflow-hidden">
<div class="react-scroll-to-bottom--css-egsyy-79elbk h-full dark:bg-gray-800" style="overflow:scroll;" id="msgcont">
<div class="react-scroll-to-bottom--css-egsyy-1n7m0yu">
<div class="flex flex-col text-sm dark:bg-gray-800" id="msgbody" ref="chatBody">
<template v-if="currentContact">
<template v-for="message in currentContact.messages">
<div v-if="message.sender==1" class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 dark:bg-gray-800">
<div class="flex p-4 gap-4 text-base md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl md:py-6 lg:px-0 m-auto">
<div class="flex-shrink-0 flex flex-col relative items-end">
<div class="w-[30px]">
<div class="relative flex"><span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0