Spaces:
Runtime error
Runtime error
File size: 5,764 Bytes
b4899ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<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>
|