victor's picture
victor HF staff
ui
b4899ca
raw
history blame
5.76 kB
<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>