224 lines
28 KiB
TypeScript
224 lines
28 KiB
TypeScript
import React from 'react';
|
|
|
|
const ChatAIResponse: React.FC = () => {
|
|
return (
|
|
<div className="w-full h-[810px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
|
|
<div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
|
|
{/* Sidebar */}
|
|
<div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-between items-center overflow-hidden">
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-5">
|
|
{/* Company Selector */}
|
|
<div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex justify-between items-center overflow-hidden">
|
|
<div className="flex-1 flex justify-start items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
|
|
<div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
|
|
<div className="w-8 h-8 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
|
|
<div className="left-[8.80px] top-[7.20px] absolute">
|
|
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g filter="url(#filter0_d_1042_694)">
|
|
<path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M4.34342 10.6855C4.66998 11.0162 4.66998 11.5524 4.34341 11.8831L4.32669 11.9C4.00012 12.2307 3.47065 12.2307 3.14409 11.9C2.81753 11.5693 2.81753 11.0331 3.1441 10.7024L3.16082 10.6855C3.48739 10.3548 4.01686 10.3548 4.34342 10.6855Z" fill="url(#paint0_linear_1042_694)" />
|
|
</g>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_1042_694" x1="3.74376" y1="10.4375" x2="3.74376" y2="12.148" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="white" stopOpacity="0.8" />
|
|
<stop offset="1" stopColor="white" stopOpacity="0.5" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
|
|
<div className="self-stretch justify-start text-[--Text-Gray-950] text-base font-medium font-['Inter'] leading-normal">Zitlac Media</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5.83325 12.4987L9.99992 16.6654L14.1666 12.4987M5.83325 7.4987L9.99992 3.33203L14.1666 7.4987" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Menu */}
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-5">
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-1.5">
|
|
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.5 17.5016V11.3349C7.5 10.8682 7.5 10.6348 7.59083 10.4566C7.67072 10.2998 7.79821 10.1723 7.95501 10.0924C8.13327 10.0016 8.36662 10.0016 8.83333 10.0016H11.1667C11.6334 10.0016 11.8667 10.0016 12.045 10.0924C12.2018 10.1723 12.3293 10.2998 12.4092 10.4566C12.5 10.6348 12.5 10.8682 12.5 11.3349V17.5016M9.18141 2.30492L3.52949 6.70086C3.15168 6.99471 2.96278 7.14163 2.82669 7.32563C2.70614 7.48862 2.61633 7.67224 2.56169 7.86746C2.5 8.08785 2.5 8.32717 2.5 8.8058V14.8349C2.5 15.7683 2.5 16.235 2.68166 16.5916C2.84144 16.9052 3.09641 17.1601 3.41002 17.3199C3.76654 17.5016 4.23325 17.5016 5.16667 17.5016H14.8333C15.7668 17.5016 16.2335 17.5016 16.59 17.3199C16.9036 17.1601 17.1586 16.9052 17.3183 16.5916C17.5 16.235 17.5 15.7683 17.5 14.8349V8.8058C17.5 8.32717 17.5 8.08785 17.4383 7.86746C17.3837 7.67224 17.2939 7.48862 17.1733 7.32563C17.0372 7.14163 16.8483 6.99471 16.4705 6.70086L10.8186 2.30492C10.5258 2.07721 10.3794 1.96335 10.2178 1.91959C10.0752 1.88097 9.92484 1.88097 9.78221 1.91959C9.62057 1.96335 9.47418 2.07721 9.18141 2.30492Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="justify-start text-[--Text-Gray-500] text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
|
|
</div>
|
|
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M11.6666 9.16797H6.66659M8.33325 12.5013H6.66659M13.3333 5.83464H6.66659M16.6666 5.66797V14.3346C16.6666 15.7348 16.6666 16.4348 16.3941 16.9696C16.1544 17.44 15.772 17.8225 15.3016 18.0622C14.7668 18.3346 14.0667 18.3346 12.6666 18.3346H7.33325C5.93312 18.3346 5.23306 18.3346 4.69828 18.0622C4.22787 17.8225 3.84542 17.44 3.60574 16.9696C3.33325 16.4348 3.33325 15.7348 3.33325 14.3346V5.66797C3.33325 4.26784 3.33325 3.56777 3.60574 3.03299C3.84542 2.56259 4.22787 2.18014 4.69828 1.94045C5.23306 1.66797 5.93312 1.66797 7.33325 1.66797H12.6666C14.0667 1.66797 14.7668 1.66797 15.3016 1.94045C15.772 2.18014 16.1544 2.56259 16.3941 3.03299C16.6666 3.56777 16.6666 4.26784 16.6666 5.66797Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="justify-start text-[--Text-Gray-500] text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
|
|
</div>
|
|
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_1042_720)">
|
|
<path d="M10.0001 1.66797C11.0944 1.66797 12.1781 1.88352 13.1891 2.30231C14.2002 2.7211 15.1188 3.33493 15.8926 4.10875C16.6665 4.88257 17.2803 5.80123 17.6991 6.81228C18.1179 7.82332 18.3334 8.90696 18.3334 10.0013M10.0001 1.66797V10.0013M10.0001 1.66797C5.39771 1.66797 1.66675 5.39893 1.66675 10.0013C1.66675 14.6037 5.39771 18.3346 10.0001 18.3346C14.6025 18.3346 18.3334 14.6037 18.3334 10.0013M10.0001 1.66797C14.6025 1.66797 18.3334 5.39893 18.3334 10.0013M18.3334 10.0013L10.0001 10.0013M18.3334 10.0013C18.3334 11.3164 18.0222 12.6128 17.4251 13.7846C16.8281 14.9563 15.9622 15.9701 14.8983 16.7431L10.0001 10.0013" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_1042_720">
|
|
<rect width="20" height="20" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<div className="justify-start text-[--Text-Gray-500] text-sm font-medium font-['Inter'] leading-tight">Reports</div>
|
|
</div>
|
|
{/* Active Chat Item */}
|
|
<div className="w-60 px-4 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.4996 9.58333C17.4996 13.4953 14.3283 16.6667 10.4163 16.6667C9.51896 16.6667 8.66061 16.4998 7.87057 16.1954C7.72612 16.1398 7.6539 16.112 7.59647 16.0987C7.53998 16.0857 7.49908 16.0803 7.44116 16.0781C7.38226 16.0758 7.31764 16.0825 7.18841 16.0958L2.92089 16.537C2.51402 16.579 2.31059 16.6001 2.19058 16.5269C2.08606 16.4631 2.01487 16.3566 1.99592 16.2356C1.97416 16.0968 2.07138 15.9168 2.2658 15.557L3.62885 13.034C3.7411 12.8262 3.79723 12.7223 3.82265 12.6225C3.84776 12.5238 3.85383 12.4527 3.8458 12.3512C3.83766 12.2484 3.79258 12.1147 3.70241 11.8472C3.46281 11.1363 3.33294 10.375 3.33294 9.58333C3.33294 5.67132 6.50426 2.5 10.4163 2.5C14.3283 2.5 17.4996 5.67132 17.4996 9.58333Z" stroke="var(--Brand-Orange, #3399FF)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="justify-start text-[--Text-Gray-950] text-sm font-medium font-['Inter'] leading-tight">Chat</div>
|
|
</div>
|
|
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_1042_728)">
|
|
<path d="M7.57508 7.5013C7.771 6.94436 8.15771 6.47472 8.66671 6.17558C9.17571 5.87643 9.77416 5.76708 10.3561 5.8669C10.938 5.96671 11.4658 6.26924 11.846 6.72091C12.2262 7.17258 12.4343 7.74424 12.4334 8.33464C12.4334 10.0013 9.93342 10.8346 9.93342 10.8346M10.0001 14.168H10.0084M18.3334 10.0013C18.3334 14.6037 14.6025 18.3346 10.0001 18.3346C5.39771 18.3346 1.66675 14.6037 1.66675 10.0013C1.66675 5.39893 5.39771 1.66797 10.0001 1.66797C14.6025 1.66797 18.3334 5.39893 18.3334 10.0013Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div className="justify-start text-[--Text-Gray-500] text-sm font-medium font-['Inter'] leading-tight">Help</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Section */}
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
|
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_1042_733)">
|
|
<path d="M10.0001 12.5013C11.3808 12.5013 12.5001 11.382 12.5001 10.0013C12.5001 8.62059 11.3808 7.5013 10.0001 7.5013C8.61937 7.5013 7.50008 8.62059 7.50008 10.0013C7.50008 11.382 8.61937 12.5013 10.0001 12.5013Z" stroke="var(--Neutrals-NeutralSlate400)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div className="flex-1 justify-start text-[--Text-Gray-500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
|
|
</div>
|
|
|
|
{/* Company Report Card */}
|
|
<div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start overflow-hidden">
|
|
<div className="self-stretch h-24 relative">
|
|
<div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
|
|
<div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
|
|
<div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-[--Neutrals-NeutralSlate0] rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
|
|
</div>
|
|
<div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
|
|
<div className="self-stretch justify-start text-[--Text-Gray-800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
|
|
<div className="self-stretch justify-start text-[--Text-Gray-500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Orbitly.</div>
|
|
</div>
|
|
<div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
|
|
<div className="self-stretch inline-flex justify-start items-start gap-2">
|
|
<div className="flex-1 px-3 py-1.5 bg-[--Button-Secondary] rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
|
|
<div className="px-1 flex justify-center items-center">
|
|
<div className="justify-center text-[--Text-Gray-950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
|
|
</div>
|
|
<div className="relative">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7.99992 3.33203V12.6654M3.33325 7.9987H12.6666" stroke="var(--Neutrals-NeutralSlate950)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
|
|
<div className="relative">
|
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8.97179 12.2442L8.02898 13.1871C6.72723 14.4888 4.61668 14.4888 3.31493 13.1871C2.01319 11.8853 2.01319 9.77476 3.31493 8.47301L4.25774 7.5302M12.743 8.47301L13.6858 7.5302C14.9876 6.22845 14.9876 4.1179 13.6858 2.81615C12.3841 1.51441 10.2735 1.51441 8.97179 2.81615L8.02898 3.75896M6.16705 10.3349L10.8337 5.66826" stroke="var(--white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="px-1 flex justify-center items-center">
|
|
<div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Copy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Chat Area */}
|
|
<div className="flex-1 self-stretch py-6 bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-2.5">
|
|
<div className="w-[736px] flex-1 max-w-[736px] pt-48 flex flex-col justify-start items-center gap-6">
|
|
<div className="self-stretch flex flex-col justify-start items-end gap-4">
|
|
{/* User Question */}
|
|
<div className="px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl inline-flex justify-start items-center gap-3 overflow-hidden">
|
|
<div className="justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">What are the main characteristics?</div>
|
|
<div className="pl-1.5 pr-2 py-0.5 bg-[--Neutrals-NeutralSlate300] rounded-2xl flex justify-start items-center gap-1.5">
|
|
<div className="relative">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_818_20157)">
|
|
<path d="M9.33318 4.66761V7.58427C9.33318 8.0484 9.51755 8.49352 9.84574 8.82171C10.1739 9.1499 10.619 9.33427 11.0832 9.33427C11.5473 9.33427 11.9924 9.1499 12.3206 8.82171C12.6488 8.49352 12.8332 8.0484 12.8332 7.58427V7.00094C12.8331 5.68437 12.3876 4.40655 11.5693 3.37525C10.7509 2.34395 9.60767 1.61982 8.32555 1.32061C7.04343 1.02141 5.6978 1.16471 4.50746 1.72724C3.31712 2.28976 2.35207 3.23841 1.76924 4.41895C1.18641 5.59948 1.02007 6.94245 1.29727 8.22951C1.57447 9.51656 2.27891 10.672 3.29604 11.5079C4.31317 12.3439 5.58318 12.8111 6.89955 12.8338C8.21592 12.8564 9.50124 12.4331 10.5465 11.6326M9.33318 7.00094C9.33318 8.2896 8.28851 9.33427 6.99984 9.33427C5.71118 9.33427 4.66651 8.2896 4.66651 7.00094C4.66651 5.71228 5.71118 4.66761 6.99984 4.66761C8.28851 4.66761 9.33318 5.71228 9.33318 7.00094Z" stroke="var(--Text-Gray-600)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div className="text-center justify-start text-[--Text-Gray-600] text-sm font-medium font-['Inter'] leading-tight">Alex Green</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Response */}
|
|
<div className="self-stretch justify-start">
|
|
<span className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">Main characteristics refer to the most important features or qualities that define or distinguish something. These can be physical, emotional, mental, or moral attributes that help identify and differentiate a person, object, or concept. <br />Elaboration:<br /></span>
|
|
<span className="text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">Physical Characteristics:</span>
|
|
<span className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal"> These relate to the outward appearance of something, such as its shape, size, color, or material. For example, the physical characteristics of a chair might include its height, the material it's made of (wood, metal, etc.), and its color. <br /></span>
|
|
<span className="text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">Emotional Characteristics:</span>
|
|
<span className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal"> These describe how someone or something responds to situations or experiences. Examples include being happy, sad, angry, or calm. <br /></span>
|
|
<span className="text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">Mental Characteristics:</span>
|
|
<span className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal"> These relate to a person's cognitive abilities and thinking patterns. Examples include intelligence, creativity, and curiosity. <br /></span>
|
|
<span className="text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">Moral Characteristics:</span>
|
|
<span className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal"> These describe a person's ethical or value-based behavior. Examples include kindness, honesty, and generosity. </span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat Input */}
|
|
<div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-[--Neutrals-NeutralSlate50] rounded-3xl flex flex-col justify-start items-start gap-4">
|
|
<div className="self-stretch justify-start text-[--Text-Gray-500] text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div>
|
|
<div className="self-stretch inline-flex justify-between items-center">
|
|
<div className="flex justify-start items-center gap-4">
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.6271 9.08442L10.1141 16.5974C8.40556 18.306 5.63546 18.306 3.92692 16.5974C2.21837 14.8889 2.21837 12.1188 3.92692 10.4102L11.4399 2.89724C12.579 1.75821 14.4257 1.75821 15.5647 2.89724C16.7037 4.03627 16.7037 5.883 15.5647 7.02203L8.34633 14.2404C7.77682 14.8099 6.85345 14.8099 6.28394 14.2404C5.71442 13.6709 5.71442 12.7475 6.28394 12.178L12.6184 5.84352" stroke="var(--Text-Gray-500)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M13.5 17.5H5.77614C5.2713 17.5 5.01887 17.5 4.90199 17.4002C4.80056 17.3135 4.74674 17.1836 4.75721 17.0506C4.76927 16.8974 4.94776 16.7189 5.30474 16.3619L12.3905 9.27614C12.7205 8.94613 12.8855 8.78112 13.0758 8.7193C13.2432 8.66492 13.4235 8.66492 13.5908 8.7193C13.7811 8.78112 13.9461 8.94613 14.2761 9.27614L17.5 12.5V13.5M13.5 17.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5M13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V6.5C2.5 5.09987 2.5 4.3998 2.77248 3.86502C3.01217 3.39462 3.39462 3.01217 3.86502 2.77248C4.3998 2.5 5.09987 2.5 6.5 2.5H13.5C14.9001 2.5 15.6002 2.5 16.135 2.77248C16.6054 3.01217 16.9878 3.39462 17.2275 3.86502C17.5 4.3998 17.5 5.09987 17.5 6.5V13.5M8.75 7.08333C8.75 8.00381 8.00381 8.75 7.08333 8.75C6.16286 8.75 5.41667 8.00381 5.41667 7.08333C5.41667 6.16286 6.16286 5.41667 7.08333 5.41667C8.00381 5.41667 8.75 6.16286 8.75 7.08333Z" stroke="var(--Text-Gray-500)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div className="relative">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clipPath="url(#clip0_818_20047)">
|
|
<path d="M13.3334 6.66745V10.8341C13.3334 11.4972 13.5968 12.133 14.0657 12.6019C14.5345 13.0707 15.1704 13.3341 15.8334 13.3341C16.4965 13.3341 17.1324 13.0707 17.6012 12.6019C18.07 12.133 18.3334 11.4972 18.3334 10.8341V10.0008C18.3333 8.11998 17.6969 6.29452 16.5278 4.82123C15.3587 3.34794 13.7256 2.31347 11.894 1.88603C10.0624 1.45859 8.14003 1.66332 6.43955 2.46692C4.73906 3.27053 3.36042 4.62575 2.5278 6.31222C1.69519 7.99869 1.45756 9.91723 1.85356 11.7559C2.24956 13.5945 3.2559 15.2451 4.70895 16.4393C6.16199 17.6335 7.97628 18.3011 9.85681 18.3334C11.7373 18.3657 13.5735 17.761 15.0668 16.6175M13.3334 10.0008C13.3334 11.8417 11.841 13.3341 10.0001 13.3341C8.15914 13.3341 6.66676 11.8417 6.66676 10.0008C6.66676 8.15984 8.15914 6.66745 10.0001 6.66745C11.841 6.66745 13.3334 8.15984 13.3334 10.0008Z" stroke="var(--Text-Gray-500)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="p-2.5 bg-[--Neutrals-NeutralSlate300] rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden">
|
|
<div className="relative">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatAIResponse;
|