From 207b154035cbc7ea4dc8271be276c0382d7c083d Mon Sep 17 00:00:00 2001 From: Samuel Andert Date: Fri, 21 Jul 2023 14:48:44 +0200 Subject: [PATCH] some ui updates --- src/lib/GoogleAuth.svelte | 2 +- src/lib/components/MessageInput.svelte | 3 +- src/lib/components/Messages.svelte | 19 ++++--- src/lib/interfaces/Message.ts | 8 +++ src/lib/services/messages.js | 68 ------------------------ src/lib/services/messages.ts | 71 ++++++++++++++++++++++++++ src/routes/+page.svelte | 19 +++++-- 7 files changed, 109 insertions(+), 81 deletions(-) create mode 100644 src/lib/interfaces/Message.ts delete mode 100644 src/lib/services/messages.js create mode 100644 src/lib/services/messages.ts diff --git a/src/lib/GoogleAuth.svelte b/src/lib/GoogleAuth.svelte index 238dc36..e15ec38 100644 --- a/src/lib/GoogleAuth.svelte +++ b/src/lib/GoogleAuth.svelte @@ -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; diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte index 441d56a..e4385d4 100644 --- a/src/lib/components/MessageInput.svelte +++ b/src/lib/components/MessageInput.svelte @@ -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 = ''; } } diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte index 793f797..7abbc21 100644 --- a/src/lib/components/Messages.svelte +++ b/src/lib/components/Messages.svelte @@ -3,13 +3,16 @@
-
- - {#each $messages as message} -
-

{message.text}

- {message.timestamp} + + {#each $messages as message} +
+
+

+ {message.type} | {message.sender} +

+

{message.timestamp}

- {/each} -
+

{message.text}

+
+ {/each}
diff --git a/src/lib/interfaces/Message.ts b/src/lib/interfaces/Message.ts new file mode 100644 index 0000000..225481e --- /dev/null +++ b/src/lib/interfaces/Message.ts @@ -0,0 +1,8 @@ +interface Message { + message: string; + date: Date; + sender: string; + type: string; +} + +export default Message; \ No newline at end of file diff --git a/src/lib/services/messages.js b/src/lib/services/messages.js deleted file mode 100644 index 602a168..0000000 --- a/src/lib/services/messages.js +++ /dev/null @@ -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([]); -} diff --git a/src/lib/services/messages.ts b/src/lib/services/messages.ts new file mode 100644 index 0000000..3de518f --- /dev/null +++ b/src/lib/services/messages.ts @@ -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([]); +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6a31967..ff77111 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -24,6 +24,19 @@ --> - - - + +
+
+
+ +
+ +
+ +
+ + +
+