Chat popup
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<svg width="142" height="120" viewBox="0 0 142 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M31.24 61.0497C44.7506 50.638 58.0758 40.7095 72.1961 32.1817C75.1677 30.387 79.4824 26.5614 83.0196 26.5614C87.5966 26.5614 92.1062 25.4117 96.7005 25.4117C101.026 25.4117 94.8188 28.5581 93.0205 30.0741C87.3124 34.8858 80.9623 38.194 75.6596 44.061C70.1057 50.2059 65.0234 57.4468 60.2469 64.754C58.2651 67.7858 56.5333 75.5546 53.8394 77.1442C52.6708 77.8338 50.2461 84.0414 49.9863 85.7663C49.2203 90.8512 44.6132 99.2959 50.8522 95.9212C58.4337 91.8203 64.7746 83.1313 72.1528 78.2938C76.4801 75.4567 80.953 71.944 85.444 69.7356C90.9682 67.0192 97.1823 67.9473 102.935 67.9473" stroke="#FAFAFA" stroke-width="40" stroke-linecap="round"/>
|
||||
<path d="M45.7044 95.3878L43.2886 94.9074C43.2886 94.9074 42.9319 96.5011 42.3222 97.3093C40.8727 99.2307 41.3559 101.152 41.3559 101.152L43.7717 98.27L45.7044 95.3878Z" fill="#A3A5A4" stroke="black"/>
|
||||
<path d="M98.8534 95.8686C99.3793 94.0052 100.486 93.4148 102.719 92.5061C105.324 87.2221 102.695 81.8915 100.303 77.1343C99.6728 71.4959 98.8636 66.4424 96.9207 61.2543C95.4061 57.2098 93.6368 53.2486 91.9369 49.2729C88.8002 41.937 87.6177 33.4106 86.2104 25.6033C84.9214 18.4521 79.7453 11.3237 71.7958 11.3237C60.229 11.3237 56.3866 21.9268 55.11 31.4992C54.2646 37.8378 53.0932 45.3173 49.5039 50.714C46.1344 55.7801 40.8729 62.6795 40.8729 68.0072L37.9739 72.8109L41.3561 75.6931L40.2287 79.0557C39.7153 80.5869 40.731 81.929 41.3561 83.379C39.9066 85.3005 38.457 87.7024 41.8392 89.6238C39.6287 91.4336 40.6296 92.2642 42.3224 93.9472L46.671 94.9079L44.2551 98.2705C40.2287 100.192 42.7239 104.094 45.822 104.745C52.8876 106.228 59.6492 107.403 66.9641 107.397C66.9641 107.397 70.4896 108.31 72.7622 108.839C74.456 109.233 77.1107 109.799 77.1107 109.799L82.9088 107.397C82.9088 107.397 85.5502 108.691 87.2573 108.358C89.1089 107.997 91.1227 105.476 91.1227 105.476C93.7884 105.343 95.2971 105.633 97.8871 103.555C99.1325 102.07 99.0518 100.886 98.8534 98.7508V95.8686Z" fill="white"/>
|
||||
<path d="M51.0195 59.3603C48.4112 62.4486 46.6917 65.2542 44.7383 65.6051C49.4005 59.1649 51.9191 53.7252 56.3344 42.5474C55.1411 49.2093 53.7259 52.8627 51.0195 59.3603Z" fill="#E4E4E4"/>
|
||||
<path d="M62.6156 101.633C62.6156 101.633 70.3463 108.118 65.0315 105.956C59.7166 103.794 60.9583 107.206 57.7839 107.397C56.3341 106.572 52.6635 106.113 51.0195 105.956C48.2812 105.695 46.4285 103.495 44.7383 104.035C44.8919 103.112 45.177 102.851 45.7046 102.593H46.1878H48.1205L50.0532 103.074L53.9185 103.554L57.3007 103.074L60.1998 101.633H62.6156Z" fill="#E4E4E4"/>
|
||||
<path d="M84.365 103.249C85.5262 104.037 84.4623 105.507 83.3986 104.667C80.305 102.225 81.4384 95.8374 81.466 92.5052C81.8314 95.7748 81.2488 101.136 84.365 103.249Z" fill="#E4E4E4"/>
|
||||
<path d="M98.8546 98.7502V95.8679L99.821 94.9072V97.4874C100.304 105.475 96.4388 106.916 91.1239 105.956C89.6243 109.195 84.5155 110.258 81.4605 108.358C77.7239 112.256 71.8391 110.838 67.4485 108.838C58.0202 108.396 52.6712 107.755 46.6722 106.235C46.197 106.115 45.2316 105.988 44.7395 105.855C40.8741 104.81 39.2902 99.6802 42.3236 98.2698C43.9673 97.5055 44.2563 96.3483 45.2227 95.3876C42.731 94.9747 36.2842 92.8527 40.3909 89.6231C37.9751 88.182 38.9414 85.2998 40.3909 83.3784C38.2279 81.0919 39.389 78.6632 40.3909 76.1728C35.6468 74.2236 37.4919 69.4477 42.3236 67.5262H43.7731C40.8741 69.4477 38.2879 72.2174 39.4246 73.771C39.9306 74.4625 40.2567 74.7238 41.3573 75.6925C40.408 78.5237 39.4236 80.4951 41.8405 82.898C39.9078 84.8195 38.9414 87.7017 41.8404 89.6231C37.8685 92.8749 44.3224 94.3881 46.6722 94.9072L44.2563 98.2698C40.8741 99.7109 42.7251 104.093 45.8232 104.744C52.8889 106.227 59.6505 107.402 66.9653 107.397C66.9653 107.397 70.4908 108.309 72.7634 108.838C76.7552 109.767 78.5614 108.358 81.4605 106.916C84.9945 108.38 88.1866 108.067 90.6407 104.995C94.4659 104.805 97.8883 104.995 98.8546 98.7502Z" fill="black"/>
|
||||
<path d="M39.9066 68.4874L37.9739 71.85L38.9402 72.3304L40.3897 69.4482C49.1217 65.3683 52.1031 58.3631 54.8807 50.2334C56.0086 46.9321 56.3539 43.6028 56.8175 40.1457C56.0316 43.5316 55.2212 46.8098 54.0652 50.0864C51.3971 57.6482 47.1541 66.0856 39.9066 68.4874Z" fill="black"/>
|
||||
<path d="M63.6599 101.83C65.0606 101.457 66.2536 102.993 69.4579 106.153C67.1196 101.539 64.108 98.4221 59.1224 101.153C55.7774 102.985 52.3621 103.961 48.8071 102.379C47.1775 101.653 44.3405 102.355 44.8162 104.232C44.6275 102.171 47.1506 102.559 48.8071 103.207C52.6122 104.696 55.8834 105.017 59.3888 102.379C62.9203 99.7209 65.3962 106.729 67.9289 108.358L72.7606 108.839C68.6866 107.735 66.5442 104.824 63.6599 101.83Z" fill="black"/>
|
||||
<path d="M40.8729 68.0069L37.9739 72.8106C38.0569 72.673 38.0085 71.7926 37.9739 71.3695L39.4234 67.5266L39.9066 65.1247C40.263 62.9297 40.7886 61.6525 41.8392 59.3603C48.024 49.4437 51.9858 46.3904 53.9185 31.4989C55.3563 20.4206 60.1997 9.88232 71.7958 9.88232C79.5266 9.88232 86.2104 16.6075 87.2573 25.7345C88.653 37.9027 94.6451 51.3745 98.8534 64.1126C100.539 69.216 101.37 72.9075 101.752 79.0554L100.303 77.134C99.6728 71.4956 98.8636 66.4421 96.9207 61.254C95.4061 57.2095 93.6368 53.2483 91.9369 49.2726C88.8002 41.9367 87.6177 33.4103 86.2104 25.603C84.9214 18.4518 79.7453 11.3234 71.7958 11.3234C60.229 11.3234 56.3866 21.9265 55.11 31.4989C54.2646 37.8375 53.0932 45.317 49.5039 50.7137C46.1344 55.7798 40.8729 62.6792 40.8729 68.0069Z" fill="black"/>
|
||||
<path d="M98.3697 89.6233L94.9875 91.0644V93.4663L96.4371 94.9074C97.8866 92.9859 98.9106 90.844 101.752 91.5448C101.967 90.2657 101.689 90.0706 101.269 89.6233L100.786 89.143L98.3697 89.6233Z" fill="#E4E4E4"/>
|
||||
<ellipse cx="65.0309" cy="28.6172" rx="2.89902" ry="4.80369" fill="black"/>
|
||||
<path d="M86.2947 58.8803C84.5035 53.7605 84.4521 48.4062 84.8452 43.0281C83.6055 48.7886 83.5165 54.3925 85.5035 59.841C88.6848 68.5645 97.842 72.5127 101.491 80.6417C102.721 83.3825 105.675 90.676 101.756 92.3467C101.103 92.6253 95.947 95.2004 95.3088 92.7732C94.6605 90.3073 102.723 88.1828 101.756 91.5454C104.172 86.2613 94.6963 89.0933 94.0255 92.0257C93.4337 94.6127 95.9582 97.7902 98.8572 96.8294C99.3917 95.2039 100.685 94.2103 102.16 93.4669C106.186 91.4381 104.763 84.2189 103.206 80.9773C99.3748 73.0022 89.3274 67.5485 86.2947 58.8803Z" fill="black"/>
|
||||
<ellipse cx="76.628" cy="28.6172" rx="2.89902" ry="4.80369" fill="black"/>
|
||||
<path d="M93.0544 65.1243C89.6462 55.9379 88.2303 50.4303 86.783 42.1106C86.585 41.1509 86.4186 40.175 86.29 39.1844C86.4567 40.2016 86.62 41.1739 86.783 42.1106C89.5613 55.5766 98.5664 65.8413 96.7315 68.6589C96.1593 69.5376 94.5751 67.6441 94.1408 66.9244L93.0544 65.1243Z" fill="#E4E4E4"/>
|
||||
<path d="M86.29 38.7043C87.4917 48.792 90.4316 57.8166 94.0208 67.046C89.178 58.0187 86.8196 48.9339 86.29 38.7043Z" fill="black"/>
|
||||
<path d="M75.7919 36.3826C73.1327 37.477 69.5014 37.4832 66.8297 36.3806C66.054 36.0606 65.0635 36.588 65.1773 37.4193C65.7026 41.2544 67.6624 45.4298 71.3127 45.4298C74.9363 45.4298 76.894 41.1492 77.4363 37.4223C77.5573 36.5912 76.5686 36.063 75.7919 36.3826Z" fill="black"/>
|
||||
<path d="M76.6282 36.3032C76.3197 36.1613 75.6028 36.0261 74.6956 35.8228C75.6422 36.1787 75.7014 36.3771 76.1451 36.7836H77.1114C77.0746 36.5694 76.9915 36.458 76.6282 36.3032Z" fill="black"/>
|
||||
<path d="M65.997 36.3032C66.3055 36.1613 67.0225 36.0261 67.9297 35.8228C66.9831 36.1787 66.9238 36.3771 66.4802 36.7836H65.5138C65.5507 36.5694 65.6337 36.458 65.997 36.3032Z" fill="black"/>
|
||||
<path d="M71.0688 96.7379C73.9246 83.5536 75.9484 72.8799 75.4044 57.4783C77.1042 71.3244 76.8012 85.4085 71.0688 96.7379Z" fill="#E4E4E4"/>
|
||||
<path d="M71.072 96.7364C73.9278 83.5521 75.9691 72.3984 75.4252 56.9968C76.1471 71.3689 75.5734 83.5069 71.072 96.7364Z" fill="black"/>
|
||||
<path d="M83.3916 84.3392C84.1009 90.5936 86.8103 94.6949 92.5719 97.3091C88.2233 93.9465 84.3579 91.5447 83.3916 84.3392Z" fill="black"/>
|
||||
<path d="M90.639 104.515C82.9344 103.421 82.4251 92.5057 81.4587 85.7806C81.9696 92.7746 81.7317 104.515 90.639 104.515Z" fill="black"/>
|
||||
<path d="M50.0525 78.5752C57.3001 73.7715 61.1857 64.2831 63.0982 55.0372C61.7819 63.8627 59.0044 74.5762 50.0525 78.5752Z" fill="black"/>
|
||||
<path d="M59.2328 42.0672C57.2481 51.4291 54.8842 58.8801 48.603 66.0856C55.3735 59.3743 58.405 51.4427 59.2328 42.0672Z" fill="black"/>
|
||||
<path d="M74.2128 68.968C71.3137 83.379 65.5157 92.9864 56.3354 101.153C67.4085 93.804 72.211 81.4912 74.2128 68.968Z" fill="black"/>
|
||||
<path d="M41.8401 74.2517C42.8064 73.0985 43.7728 72.8106 46.6718 72.3302C44.5917 72.4572 42.6518 72.4614 41.8401 74.2517Z" fill="black"/>
|
||||
<path d="M43.2896 75.2124C44.0041 74.1554 44.9609 73.9241 46.1886 74.2517C45.1556 74.4124 44.0993 74.4127 43.2896 75.2124Z" fill="black"/>
|
||||
<path d="M46.6718 76.1732C45.769 77.0641 43.6766 78.0573 43.2896 76.1732C44.0703 77.2286 45.6908 76.6155 46.6718 76.1732Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,188 @@
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
import SendIcon from "../icons/SendIcon";
|
||||
import Button from "../ui/Button";
|
||||
import { useMe } from "../../hooks/useAuth";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function ChatPopup() {
|
||||
const [messages, setMessages] = useState<MessageItemProps[]>([
|
||||
{
|
||||
senderId: "1",
|
||||
timestamp: "12:22",
|
||||
content:
|
||||
"У меня все сломалось, ничего не работает, картинки нет, все пошло по пизде, помогите мне кто-нибудь, пожалуйста",
|
||||
},
|
||||
{
|
||||
senderId: "2",
|
||||
timestamp: "12:22",
|
||||
content: "🤡🤡🤡",
|
||||
},
|
||||
]);
|
||||
|
||||
function onMessageSend(message: string) {
|
||||
setMessages([
|
||||
...messages,
|
||||
{
|
||||
senderId: "1",
|
||||
timestamp: "12:22",
|
||||
content: message,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full relative">
|
||||
<MessageFeed messages={messages} />
|
||||
<MessageInput onMessageSend={onMessageSend} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageFeed({ messages }: { messages: MessageItemProps[] }) {
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Скролл к концу при получении нового сообщения
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col w-full h-[calc(100%-4.444vw)] bg-[#F0F0F0] p-[1.111vw] pb-[0] overflow-y-auto"
|
||||
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
|
||||
>
|
||||
<style>
|
||||
{`
|
||||
.flex::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
{messages.length === 0 ? (
|
||||
<div className="w-full flex flex-col gap-[1.667vw] items-center justify-center px-[2.778vw] m-auto">
|
||||
<img
|
||||
src="/img/popups/EmptyMessageFeed.svg"
|
||||
className="size-[8.333vw]"
|
||||
/>
|
||||
<span className="text-center text-s">
|
||||
Здесь пока нет сообщений. <br /> Можно начать беседу с приветствия
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-[1.111vw] items-end mt-auto">
|
||||
{messages.map((message, index) => (
|
||||
<MessageItem key={index} {...message} />
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MessageItemProps {
|
||||
senderId: string;
|
||||
timestamp: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
function MessageItem({ senderId, timestamp, content }: MessageItemProps) {
|
||||
const { data: user } = useMe();
|
||||
const isFromMe = senderId === "1";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex w-full items-end gap-[0.556vw] justify-end",
|
||||
isFromMe ? "" : "flex-row-reverse"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"p-[1.111vw] w-[16.667vw] flex items-end justify-between",
|
||||
isFromMe
|
||||
? "bg-[#7B60F3] rounded-[1.111vw_1.111vw_0_1.111vw] text-white"
|
||||
: "bg-[#FFFFFF] rounded-[1.111vw_1.111vw_1.111vw_0] c text-[#141414]"
|
||||
)}
|
||||
>
|
||||
<div className="break-words text-s w-[12.917vw]">
|
||||
{!isFromMe && (
|
||||
<div className="caption-s text-[#7B60F3] mb-[0.278vw]">
|
||||
{user?.fullName}
|
||||
</div>
|
||||
)}
|
||||
<div>{content}</div>
|
||||
</div>
|
||||
<span className="caption-xs opacity-30">{timestamp}</span>
|
||||
</div>
|
||||
|
||||
<div className="size-[2.222vw rounded-full">
|
||||
<img
|
||||
src="/img/popups/MessageUserPfp.png"
|
||||
className="size-full object-cover"
|
||||
alt="user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageInput({
|
||||
onMessageSend,
|
||||
}: {
|
||||
onMessageSend: (message: string) => void;
|
||||
}) {
|
||||
const [message, setMessage] = useState("");
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const textarea = textareaRef.current;
|
||||
if (!textarea) return;
|
||||
textarea.style.height = "auto";
|
||||
|
||||
const computedStyle = window.getComputedStyle(textarea);
|
||||
const lineHeight = parseInt(computedStyle.lineHeight);
|
||||
const maxHeight = lineHeight * 4;
|
||||
const newHeight = Math.min(textarea.scrollHeight, maxHeight);
|
||||
|
||||
textarea.style.height = `${newHeight}px`;
|
||||
textarea.style.overflowY =
|
||||
textarea.scrollHeight > maxHeight ? "auto" : "hidden";
|
||||
}, [message]);
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
|
||||
setMessage(e.target.value);
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
setMessage("");
|
||||
onMessageSend(message);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => textareaRef.current?.focus()}
|
||||
className="flex w-full min-h-[4.444vw] p-[1.111vw] items-end justify-between absolute bottom-0 left-0 bg-white"
|
||||
>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={message}
|
||||
onChange={handleChange}
|
||||
className="w-[80%] resize-none focus:outline-none my-auto text-s"
|
||||
rows={1}
|
||||
placeholder="Сообщение..."
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
variant="cta"
|
||||
disabled={message.length === 0}
|
||||
className="size-[2.222vw]"
|
||||
onClick={sendMessage}
|
||||
>
|
||||
<div className="size-full">
|
||||
<SendIcon />
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -2,7 +2,7 @@ import Button from "../ui/Button";
|
||||
import LinkShare from "../ui/LinkShare";
|
||||
import ShareFilledIcon from "../icons/ShareFilledIcon";
|
||||
|
||||
export default function ShareModal() {
|
||||
export default function SharePopup() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-[1.389vw]">
|
||||
@@ -1,4 +1,4 @@
|
||||
import ShareModal from "../components/modals/ShareModal";
|
||||
import ChatPopup from "../components/popups/ChatPopup";
|
||||
import Button from "../components/ui/Button";
|
||||
import { useMe, useLogout } from "../hooks/useAuth";
|
||||
import { useNavigate } from "react-router";
|
||||
@@ -19,12 +19,6 @@ function HomePage() {
|
||||
<div className="p-8 bg-white rounded-lg shadow-md">
|
||||
<h1 className="mb-6 text-3xl font-bold">Главная страница</h1>
|
||||
|
||||
{/* Потестить модалки */}
|
||||
|
||||
{/* <div className="w-[21.667vw] outline-1 outline">
|
||||
<ShareModal />
|
||||
</div> */}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<h2 className="mb-2 text-xl font-semibold">
|
||||
|
||||
Reference in New Issue
Block a user