react+tailwind实现一个chatgpt人工智能聊天对话ui界面效果代码-html代码-BFW代码库

代码语言：html

代码描述：react+tailwind实现一个chatgpt人工智能聊天对话ui界面效果代码

代码标签： react tailwind chatgpt 人工智能聊天对话 ui 界面

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

<!DOCTYPE html>
<html lang="en" >

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

  
<style>
.bg-input{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #111111 18.23%, #111111 100%)
}

body{
    background-color: #111111;
    color: white;
}
</style>

  
  
  
</head>

<body >
  <div id="root"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
      <script type="text/babel">
      const { useEffect, useRef, useState} = window.React;
  const { render } = window.ReactDOM;

tailwind.config = {
  theme: {
    extend: {
      colors:{
        body:'#111111',
        line:'#1e1e1e',
        item:'#181818',
        card:'#252527',
        brandGreen:'#e8fe4e',
        brandGray:'#737373',
        brandBlue:'#1a2cb8',
        brandOrange:'#cbbca6',
      }
    },
  }
}


const pinned = [
  {
    key: 1,
    title: "Benevolentia paciscor propinquus",
    desc: "Concilium munimentum curis competo sanctifico iaculator",
    date: "12 Jan",
    isSelected: false,
  },
  {
    key: 2,
    title: "Mollis furs sapiens",
    desc: "Andegavense infigo edoceo prohibeo vultuosus aer hactenus glorior informatio",
    date: "9 Mar",
    isSelected: true,
  },
];

const all = [
  {
    key: 1,
    title: "Transmitto pario dignitas",
    desc: "Promoveo lenocinor treverim etiam natio vespillo plaustrum eximius adicio iugis efficio ille",
    date: "21 Aug",
    isSelected: false,
  },
  {
    key: 2,
    title: "Gemblacensis intumesco adipiscor",
    desc: "Nitor articulus rhetor spolium insula hanc dedecus expedio spargo lasesco furor",
    date: "2 Dec",
    isSelected: false,
  },
  {
    key: 3,
    title:
      "Sustineo locupleto prohibeo testimonium epistula quaestio recito fugio defleo comedo pollicitus cedo",
    desc: "Commessatio intus paciscor redigo forte exspecto inflo mores, frux, ex",
    date: "15 Apr",
    isSelected: false,
  },
  {
    key: 4,
    title:
      "Macto parilis macero castellandum patria proinde demitto molestia ficus malum",
    desc: "Adulescentia nutus vestis pevela pertimesco procella berlinmonte quodammodo quartus nutrimens claro",
    date: "20 May",
    isSelected: false,
  },
];

const dataMain = [
  {
    key: 0,
    text: "Infirmus scaphium namucense vilis induco lacus. Piger distulo putus. Insula demo multus laboro cupressus.",
    isUser: true,
  },
  {
    key: 1,
    text: "Infirmus scaphium namucense vilis induco lacus. Piger distulo putus. Insula demo multus laboro cupressus.",
    isUser: false,
  },
  {
    key: 2,
    text: "Saeta prolatio impendeo sentio praevenio magnopere pertorqueo velociter aperte prolatio.",
    isUser: true,
  },
  {
    key: 3,
    text: "Plurimus laetor rogo. Maxime limen immortalis defaeco immerito decorus niveus puchre liberaliter huic. ",
    isUser: false,
    images: [
      { key: 0, url: "//repo.bfw.wiki/bfwrepo/image/64700adadc9a0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 1, url: "//repo.bfw.wiki/bfwrepo/image/649d3cf9c3795.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 2, url: "//repo.bfw.wiki/bfwrepo/image/64c4a32a55d4b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 3, url: "//repo.bfw.wiki/bfwrepo/image/62ff45c2ce421.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 4, url: "//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
    ],
  },
  {
    key: 4,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: true,
  },
  {
    key: 5,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: false,
  },
  {
    key: 6,
    text: "Quilibet forte spero mundus contages quaestio praebeo onero.",
    isUser: true,
  },
  {
    key: 7,
    text: "Sure, here is an example of NFTs",
    isUser: false,
    images: [
      { key: 0, url: "//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 1, url: "//repo.bfw.wiki/bfwrepo/image/629fea5a8b628.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 2, url: "//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 3, url: "//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
      { key: 4, url: "//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" },
    ],
  },
];

const trending = [
  {
    key: 1,
    text: "Web3 platform",
    isSelected: true,
  },
  {
    key: 2,
    text: "Crypto",
    isSelected: false,
  },
  {
    key: 3,
    text: "AI",
    isSelected: false,
  },
  {
    key: 4,
    text: "How to invest in crypto",
    isSelected: false,
  },
  {
    key: 5,
    text: "What NFTs are popular now",
    isSelected: false,
  },
];

function Options({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
      />
    </svg>
  );
}

function Times({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  );
}

function PencilSquareIcon({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
      />
    </svg>
  );
}

function SearchIcon({ className }) {
  return (
    <svg
      xmlns="htt.........完整代码请登录后点击上方下载按钮下载查看