samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some ui updates

Browse Source
This commit is contained in:
Samuel Andert 2023-07-21 14:48:44 +02:00
parent 5be272d1f2
commit 207b154035
7 changed files with 109 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/GoogleAuth.svelte
View File

@ -13,7 +13,7 @@
import { ProviderType } from '@lit-protocol/constants';
import { LitAccessControlConditionResource, LitAbility } from '@lit-protocol/auth-helpers';
const redirectUri = 'http://localhost:5173/log';
const redirectUri = 'http://localhost:5173/';
let view = 'sign_in';
let error;
let litAuthClient;

3
src/lib/components/MessageInput.svelte
View File

@ -5,7 +5,8 @@
function handleSend() {
if (newMessageText.trim() !== '') {
createMessage(newMessageText);
// Create a new message with the default sender and type
createMessage(newMessageText, 'user', 'chat');
newMessageText = '';
}
}

19
src/lib/components/Messages.svelte
View File

@ -3,13 +3,16 @@
</script>
<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
<div class="flex flex-col space-y-4">
<!-- Your messages, displayed in chronological order -->
{#each $messages as message}
<div class="bg-white p-3 rounded-lg shadow-lg">
<p class="text-gray-800">{message.text}</p>
<small class="text-gray-600 text-sm">{message.timestamp}</small>
<!-- Your messages, displayed in chronological order -->
{#each $messages as message}
<div class="bg-white p-3 rounded-lg shadow-lg mb-2">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
</div>
{/each}
</div>
<p class="text-base text-gray-800 mt-2">{message.text}</p>
</div>
{/each}
</main>

8
src/lib/interfaces/Message.ts Normal file
View File

@ -0,0 +1,8 @@
interface Message {
message: string;
date: Date;
sender: string;
type: string;
}
export default Message;

68
src/lib/services/messages.js
View File

@ -1,68 +0,0 @@
import { writable } from 'svelte/store';
// Helper function to determine if we're running on the client side (browser) or server side.
function isClientSide() {
return typeof window !== "undefined";
}
// Safely get item from localStorage
function getFromLocalStorage(key, defaultValue) {
if (isClientSide()) {
return localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key))
: defaultValue;
}
return defaultValue;
}
// Safely set item to localStorage
function setToLocalStorage(key, value) {
if (isClientSide()) {
localStorage.setItem(key, JSON.stringify(value));
}
}
// Load messages from localStorage or set an empty array if not available
const initialMessages = getFromLocalStorage('chat-messages', []);
export const messages = writable(initialMessages);
// Subscribe to messages store to watch for changes and save them to localStorage
messages.subscribe(currentMessages => {
setToLocalStorage('chat-messages', currentMessages);
});
// Dummy messages
const messagesList = [
"Hello there!",
"How are you?",
"What's your favorite color?",
"Nice weather today!",
"Have a great day!",
"I love Svelte!",
"Svelte is awesome!",
"Learning Svelte is fun!",
"Greetings from Svelte!",
"Keep coding and stay awesome!"
];
export function addRandomMessage() {
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
const currentDate = new Date().toLocaleString();
messages.update(oldMessages => [
...oldMessages,
{ text: randomMessage, timestamp: currentDate }
]);
}
export function createMessage(text) {
const currentDate = new Date().toLocaleString();
messages.update(oldMessages => [
...oldMessages,
{ text: text, timestamp: currentDate }
]);
}
export function clearMessages() {
messages.set([]);
}

71
src/lib/services/messages.ts Normal file
View File

@ -0,0 +1,71 @@
import { writable } from 'svelte/store';
// Helper function to determine if we're running on the client side (browser) or server side.
function isClientSide() {
return typeof window !== "undefined";
}
// Safely get item from localStorage
function getFromLocalStorage(key: string, defaultValue: any) {
if (isClientSide()) {
return localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key)!)
: defaultValue;
}
return defaultValue;
}
// Safely set item to localStorage
function setToLocalStorage(key: string, value: any) {
if (isClientSide()) {
localStorage.setItem(key, JSON.stringify(value));
}
}
// Define the updated Message interface
interface Message {
text: string;
timestamp: string;
sender: string;
type: string;
}
// Load messages from localStorage or set an empty array if not available
const initialMessages: Message[] = getFromLocalStorage('chat-messages', []);
export const messages = writable(initialMessages);
// Subscribe to messages store to watch for changes and save them to localStorage
messages.subscribe(currentMessages => {
setToLocalStorage('chat-messages', currentMessages);
});
// Dummy messages
const messagesList: Message[] = [
{ text: "Hello there!", timestamp: new Date().toLocaleString(), sender: "John", type: "text" },
{ text: "How are you?", timestamp: new Date().toLocaleString(), sender: "Alice", type: "text" },
// Add more dummy messages here with the timestamp and sender properties
];
export function addRandomMessage() {
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
messages.update(oldMessages => [
...oldMessages,
{ ...randomMessage, timestamp: new Date().toLocaleString(), sender: "Bot", type: "chat" }
]);
}
export function createMessage(text: string, sender: string, type: string) {
const currentDate = new Date().toLocaleString();
const newMessageObj: Message = {
text: text,
timestamp: currentDate,
sender: sender,
type: type
};
messages.update(oldMessages => [...oldMessages, newMessageObj]);
}
export function clearMessages() {
messages.set([]);
}

19
src/routes/+page.svelte
View File

@ -24,6 +24,19 @@
<WalletConnect bind:pkpWallet bind:authSig bind:pkpPubKey />
</div> -->
<GoogleAuth />
<Messages />
<MessageInput />
<div class="fixed top-0 left-0 w-full h-full overflow-hidden">
<main class="grid grid-rows-[auto,1fr,auto] min-h-screen">
<header class="bg-gray-100 text-black p-4">
<GoogleAuth />
</header>
<main class="p-4">
<Messages />
</main>
<footer class="bg-gray-300 p-4">
<MessageInput />
</footer>
</main>
</div>