added basic messaging mockup

This commit is contained in:
Samuel Andert 2023-07-21 12:24:08 +02:00
parent f11a208f56
commit 4056f3ef8d
5 changed files with 108 additions and 8 deletions

View File

@ -8,7 +8,7 @@
getProviderFromUrl getProviderFromUrl
} from '@lit-protocol/lit-auth-client'; } from '@lit-protocol/lit-auth-client';
import { LitNodeClient } from '@lit-protocol/lit-node-client'; import { LitNodeClient } from '@lit-protocol/lit-node-client';
import { IRelayPKP, AuthMethod, SessionSigs } from '@lit-protocol/types'; import { IRelayPKP } from '@lit-protocol/types';
import { ProviderType } from '@lit-protocol/constants'; import { ProviderType } from '@lit-protocol/constants';
import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers'; import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
@ -24,14 +24,22 @@
let sessionSigs; let sessionSigs;
let isLoading = false; let isLoading = false;
// Add an array to store chat messages
let messages: string[] = [];
// Helper function to add a message to the chat
function addMessage(message: string) {
messages = [...messages, message];
}
async function authWithGoogle() { async function authWithGoogle() {
isLoading = true; isLoading = true;
error = null; error = null;
// Add chat message updates
addMessage('Starting authentication with Google...');
try { try {
console.log('Starting authentication with Google...');
const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google); const provider = litAuthClient.initProvider<GoogleProvider>(ProviderType.Google);
await provider.signIn(); await provider.signIn();
console.log('Handling Google authentication...'); addMessage('Handling Google authentication...');
await handleRedirect(ProviderType.Google); await handleRedirect(ProviderType.Google);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -82,6 +90,9 @@
} }
console.log(`Handling redirect for ${providerName}`); console.log(`Handling redirect for ${providerName}`);
console.log(`Fetched PKPs: ${pkps.length}`); console.log(`Fetched PKPs: ${pkps.length}`);
// Add chat message updates
addMessage(`Handling redirect for ${providerName}`);
addMessage(`Fetched PKPs: ${pkps.length}`);
} }
async function mint() { async function mint() {
isLoading = true; isLoading = true;
@ -237,3 +248,9 @@
</div> </div>
{/if} {/if}
</main> </main>
{#each messages as message, index}
<div class="chat-message">
<p>{message}</p>
</div>
{/each}

View File

@ -0,0 +1,71 @@
<!-- components/Chat.svelte -->
<script>
import { dummyMessages } from '$lib/data/dummyMessages.js';
let messages = [];
const addRandomMessage = () => {
const randomMessage = generateRandomMessage();
messages = [randomMessage, ...messages];
saveMessagesToLocalStorage(messages);
};
const generateRandomMessage = () => {
const randomIndex = Math.floor(Math.random() * dummyMessages.length);
const randomMessage = dummyMessages[randomIndex];
const timestamp = new Date().toLocaleString(); // Get the current date and time
return { ...randomMessage, timestamp };
};
const loadMessages = () => {
if (typeof window !== 'undefined') {
const storedMessages = localStorage.getItem('chat_messages');
messages = storedMessages ? JSON.parse(storedMessages) : [];
}
};
const saveMessagesToLocalStorage = (messages) => {
if (typeof window !== 'undefined') {
localStorage.setItem('chat_messages', JSON.stringify(messages));
}
};
const clearMessages = () => {
messages = [];
saveMessagesToLocalStorage(messages);
};
// Load messages when the component mounts
loadMessages();
</script>
<main class="p-4 flex flex-col-reverse overflow-y-auto pb-16">
{#each messages as message}
<div class="bg-white p-3 rounded-lg shadow-lg mb-4">
<p class="text-gray-800">{message.text}</p>
<small class="text-gray-600 text-sm">{message.timestamp}</small>
</div>
{/each}
</main>
<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
<button
class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded mr-2"
on:click={clearMessages}
>
Clear
</button>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
on:click={addRandomMessage}
>
Send Random Message
</button>
</footer>
<style>
main {
/* Set the minimum height of the main container to prevent the footer from overlapping the messages */
min-height: calc(100vh - 70px); /* Account for the fixed footer height */
}
</style>

View File

@ -0,0 +1,12 @@
export const dummyMessages = [
{ text: "Believe you can, and you're halfway there.", timestamp: '2023-07-21 12:34:56' },
{ text: "The only way to do great work is to love what you do.", timestamp: '2023-07-21 12:36:22' },
{ text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", timestamp: '2023-07-21 12:40:10' },
{ text: "The best way to predict the future is to create it.", timestamp: '2023-07-21 12:45:34' },
{ text: "Your time is limited, don't waste it living someone else's life.", timestamp: '2023-07-21 13:01:05' },
{ text: "Every moment is a fresh beginning.", timestamp: '2023-07-21 13:10:22' },
{ text: "Don't watch the clock; do what it does. Keep going.", timestamp: '2023-07-21 13:25:45' },
{ text: "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.", timestamp: '2023-07-21 13:40:15' },
{ text: "You are never too old to set another goal or to dream a new dream.", timestamp: '2023-07-21 14:05:07' },
{ text: "The future belongs to those who believe in the beauty of their dreams.", timestamp: '2023-07-21 14:20:59' },
];

View File

@ -1,5 +0,0 @@
<script>
import GoogleAuth from '$lib/GoogleAuth.svelte';
</script>
<GoogleAuth />

View File

@ -0,0 +1,5 @@
<script>
import Messages from '$lib/components/Messages.svelte';
</script>
<Messages />