Spaces:
Sleeping
Sleeping
| <div class="flex bg-black/95 text-gray-300/90"> | |
| <div class="w-64"> | |
| <button class="text-white p-4 border border-white">New chat</button> | |
| </div> | |
| <div class="relative flex-1 overflow-y-auto"> | |
| <div class="mx-auto flex h-screen max-h-screen max-w-4xl flex-col gap-8 pt-12"> | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40" | |
| /> | |
| <div | |
| class="text-blue-00 group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" | |
| > | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, | |
| dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet consectetur | |
| adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit | |
| amet consectetur adipisicing elit. Dolorum maiores quo officiis? | |
| </div> | |
| </div> | |
| <div class="mb-2 flex items-start justify-start gap-4 text-gray-300/70"> | |
| <div class="mt-4 h-4 w-4 flex-none rounded-full" /> | |
| <div class="rounded-2xl px-4 py-3.5"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-3 w-3 flex-none rounded-full bg-white" | |
| /> | |
| <div | |
| class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" | |
| > | |
| <p> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem | |
| ipsum, dolor sit | |
| </p> | |
| <div class="mt-4 flex flex-wrap gap-4 first:mt-0"> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-3 w-3 flex-none rounded-full bg-white" | |
| /> | |
| <div | |
| class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" | |
| > | |
| <p> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem | |
| ipsum, dolor sit | |
| </p> | |
| <div class="mt-4 flex flex-wrap gap-4 first:mt-0"> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-3 w-3 flex-none rounded-full bg-white" | |
| /> | |
| <div | |
| class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5" | |
| > | |
| <p> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem | |
| ipsum, dolor sit | |
| </p> | |
| <div class="mt-4 flex flex-wrap gap-4 first:mt-0"> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| <img | |
| src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7" | |
| alt="" | |
| class="max-h-[360px] rounded-xl" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-start gap-4 text-gray-300"> | |
| <div class="mt-4 h-4 w-4 flex-none rounded-full" /> | |
| <div class="rounded-2xl px-4 py-3.5"> | |
| Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet | |
| consectetur adipisicing eLorem ipsum | |
| </div> | |
| </div> | |
| <div class="flex items-start justify-start gap-4 leading-relaxed"> | |
| <img | |
| src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg" | |
| class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40" | |
| /> | |
| <div | |
| class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5 text-blue-900" | |
| > | |
| <div class="h-4 w-2 animate-pulse bg-white/20" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fixed inset-x-0 bottom-12 mx-auto max-w-4xl"> | |
| <div | |
| class="w-full rounded-2xl border border-black bg-gradient-to-br from-gray-800/40 to-gray-800/50 px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1" | |
| role="textbox" | |
| contenteditable | |
| > | |
| Ask anything... | |
| </div> | |
| <!-- <textarea class="w-full rounded-2xl bg-slate-800/80 px-4 py-3.5 shadow-xl" rows="1" placeholder="Write anything..."></textarea> --> | |
| </div> | |
| </div> | |
| </div> | |