Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update(chat): update chat #27

Merged
merged 1 commit into from
Sep 15, 2024
Merged

update(chat): update chat #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions .firebase/hosting.ZGlzdA.cache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
index.html,1726206215334,25393176ff3ddf28ec46e13af8d4e432a54fdf29b5bf806d3b2c57a1c8b6fba5
assets/fa-v4compatibility-BX8XWJtE.woff2,1726206215334,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
data/cartoons.json,1726206215003,7fc09526226ac347c18f1e3e4506c1748c9eb1da294b7c4d521017df05a2be65
assets/fa-v4compatibility-B9MWI-E6.ttf,1726206215333,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
assets/FavoriteComponent-CU74GVyb.js,1726206215334,38dd6cb7bdbdab1751a0d6dc75ee681f148b5f6a32cca87d370ff5d2230cd091
assets/fa-regular-400-DgEfZSYE.woff2,1726206215331,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
assets/fa-regular-400-Bf3rG5Nx.ttf,1726206215334,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
assets/fa-brands-400-O7nZalfM.woff2,1726206215331,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
assets/fa-solid-900-DOQJEhcS.woff2,1726206215334,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
assets/fa-brands-400-Dur5g48u.ttf,1726206215334,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
assets/index-DJ_jKQnL.css,1726206215333,975c65ec679ed0e5f7d7955347d934f9e0c9de341190f1ada3adbfde4c8736a8
assets/index-BAYcpFy6.js,1726206215335,93ef0b5b97e8c5913cc5d2d53e285821f08b434426ab40660036f8651467be64
assets/fa-solid-900-BV3CbEM2.ttf,1726206215332,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
index.html,1726399403568,912d8525b8b728904b97d2ab83de9e5650a2384ace33ed9eee24bef7ae51a6cb
assets/fa-v4compatibility-BX8XWJtE.woff2,1726399403567,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
assets/fa-v4compatibility-B9MWI-E6.ttf,1726399403568,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
data/cartoons.json,1726399403242,7fc09526226ac347c18f1e3e4506c1748c9eb1da294b7c4d521017df05a2be65
assets/FavoriteComponent-BySKiWHV.js,1726399403567,4f14e81c8a97dfea3e994cf6e65f2554ee3db1ecf295394fbc0d49e1c5572379
assets/fa-regular-400-DgEfZSYE.woff2,1726399403567,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
assets/fa-regular-400-Bf3rG5Nx.ttf,1726399403568,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
assets/fa-brands-400-O7nZalfM.woff2,1726399403568,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
assets/fa-solid-900-DOQJEhcS.woff2,1726399403567,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
assets/fa-brands-400-Dur5g48u.ttf,1726399403567,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
assets/index-CgG86AI3.css,1726399403567,075812d1fe0967260c6c23f5ce9c85b812a3d91eacb8ae8b9789169f014b1a93
assets/index-D5R5qNIA.js,1726399403568,c73ee5ad7b32eee88607ee7417b9766cfd0266d37b46c8270fd499c83a94de32
assets/fa-solid-900-BV3CbEM2.ttf,1726399403568,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
108 changes: 74 additions & 34 deletions src/components/chat/ChatComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const displayedMessages = ref([]);
const maxDisplayedMessages = ref(10);
const isMobile = ref(window.innerWidth < 768);
const typingUsers = ref([]);
const showPasswordPrompt = ref(false);
const passwordInput = ref('');

const loadNewMessages = () => {
const allMessages = messages.value;
Expand All @@ -40,12 +42,16 @@ const scrollToBottom = () => {
};

const confirmClearChat = () => {
if (
confirm(
'Are you sure you want to clear the chat? This action cannot be undone.'
)
) {
showPasswordPrompt.value = true;
};

const handlePasswordSubmit = () => {
if (passwordInput.value === import.meta.env.VITE_CHAT_CLEAR_PASSWORD) {
clearChat();
showPasswordPrompt.value = false;
passwordInput.value = '';
} else {
alert('Невірний пароль!');
}
};

Expand Down Expand Up @@ -139,7 +145,7 @@ const toggleEmojiPicker = () => {
};

const replyMessage = (message) => {
newMessage.value = `@${message.user.name} ${message.text}`;
newMessage.value = `@${message.user.name} `;
replyingTo.value = message;
};

Expand Down Expand Up @@ -184,25 +190,47 @@ onBeforeUnmount(() => {
>
Очистити чат
</button>
<div
v-if="showPasswordPrompt"
class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50"
>
<div class="bg-gray-900 p-4 rounded-lg shadow-lg">
<p class="text-white mb-4">Введіть пароль для підтвердження:</p>
<input
v-model="passwordInput"
type="password"
placeholder="Пароль"
class="border border-gray-700 bg-gray-800 text-white p-2 rounded-lg w-full mb-4"
/>
<div class="flex justify-end">
<button
@click="handlePasswordSubmit"
class="bg-blue-600 text-white p-2 rounded-lg mr-2 hover:bg-blue-500"
>
Підтвердити
</button>
<button
@click="showPasswordPrompt = false"
class="bg-gray-600 text-white p-2 rounded-lg hover:bg-gray-500"
>
Скасувати
</button>
</div>
</div>
</div>
<div
ref="messagesContainer"
class="flex-1 overflow-y-auto p-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg"
>
<div
v-for="message in displayedMessages"
:key="message.timestamp"
:class="[
'flex items-start mb-4',
message.user.id === currentUserId.value
? 'justify-end'
: 'justify-start',
]"
class="flex mb-4"
:class="{
'justify-end': message.user.id === currentUserId.value,
'justify-start': message.user.id !== currentUserId.value,
}"
>
<img
:src="message.user?.avatar || 'https://via.placeholder.com/40'"
alt="avatar"
class="w-10 h-10 rounded-full mr-4 border-2 border-gray-700"
/>
<div
:class="[
'flex flex-col p-4 rounded-lg max-w-[75%] relative',
Expand All @@ -220,7 +248,7 @@ onBeforeUnmount(() => {
<p class="text-gray-300 whitespace-pre-wrap">
<span
v-if="message.replyTo"
class="text-gray-400 italic block mb-2"
class="block mb-2 p-2 bg-yellow-100 text-yellow-800 border border-yellow-300 rounded-md"
>
Відповідає на {{ message.replyTo.user.name }}: "{{
message.replyTo.text
Expand All @@ -239,40 +267,52 @@ onBeforeUnmount(() => {
</button>
</div>
</div>
<img
v-if="message.user.id !== currentUserId.value"
:src="message.user?.avatar || 'https://via.placeholder.com/40'"
alt="avatar"
class="w-10 h-10 rounded-full ml-4 border-2 border-gray-700"
/>
<img
v-if="message.user.id === currentUserId.value"
:src="message.user?.avatar || 'https://via.placeholder.com/40'"
alt="avatar"
class="w-10 h-10 rounded-full mr-4 border-2 border-gray-700"
/>
</div>

<div v-if="typingUsers.length" class="text-gray-400 italic mb-4">
<span v-for="(user, index) in typingUsers" :key="user.id">
<span v-for="(user, index) in typingUsers" :key="index">
{{ user.name }}{{ index < typingUsers.length - 1 ? ', ' : '' }}
</span>
друкує...
{{ typingUsers.length > 1 ? 'пишуть...' : 'пише...' }}
</div>
</div>
<div v-if="emojisVisible" class="absolute bottom-16 right-4 z-20">
<EmojiPicker @emoji-select="handleEmojiSelect" />
</div>
<div
class="flex items-center justify-between border-t border-gray-700 bg-gray-800 p-2"
>

<div class="flex items-center mt-4">
<button
@click="toggleEmojiPicker"
class="bg-gray-700 p-2 rounded-lg text-gray-300 mr-2 hover:bg-gray-600"
class="p-2 bg-gray-700 text-white rounded-lg mr-2 hover:bg-gray-600"
>
😊
</button>
<input
id="message-input"
type="text"
v-model="newMessage"
@keypress="handleKeyPress"
placeholder="Введіть повідомлення..."
class="flex-1 border border-gray-700 bg-gray-900 p-2 rounded-lg text-white"
@keydown="handleKeyPress"
@focus="startTyping"
@blur="stopTyping"
type="text"
placeholder="Ваше повідомлення..."
class="flex-1 p-2 border border-gray-700 bg-gray-800 text-white rounded-lg"
/>
<button
@click="sendMessage"
class="bg-blue-600 text-white p-2 rounded-lg ml-2 flex-shrink-0 hover:bg-blue-500"
class="ml-2 p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500"
>
<IconSend />
<IconSend class="w-6 h-6" />
</button>
</div>

<EmojiPicker v-if="emojisVisible" @select="handleEmojiSelect" />
</div>
</template>
3 changes: 2 additions & 1 deletion src/firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ const firebaseConfig = {
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const database = getDatabase(app);
export { app, database };
const CHAT_CLEAR_PASSWORD = import.meta.env.VITE_CHAT_CLEAR_PASSWORD;
export { app, database, CHAT_CLEAR_PASSWORD };
Loading