From 9c92f38eaa55ef536ef298b6f1b42b1b87fad332 Mon Sep 17 00:00:00 2001 From: Darren Zal Date: Wed, 31 Jan 2024 15:43:55 -0800 Subject: [PATCH] updates for darkmode, letting users not need a username to chat, and icons --- src/components/about/AboutThisTemplate.svelte | 40 +++- src/components/chat/chat.svelte | 206 +++++++++--------- src/components/home/Authed.svelte | 27 ++- src/components/home/Public.svelte | 26 +-- src/components/icons/Chat.svelte | 19 ++ src/components/nav/SidebarNav.svelte | 6 +- src/lib/app-info.ts | 2 +- 7 files changed, 193 insertions(+), 133 deletions(-) create mode 100644 src/components/icons/Chat.svelte diff --git a/src/components/about/AboutThisTemplate.svelte b/src/components/about/AboutThisTemplate.svelte index 35e67f1..01693c4 100644 --- a/src/components/about/AboutThisTemplate.svelte +++ b/src/components/about/AboutThisTemplate.svelte @@ -1,11 +1,29 @@
-

About This Template

+

About This App

+

+ This chatbot combines a knowledge graph with a Large Language Model (LLM) to provide verifiable responses to prompts. The data is stewarded by + ReFiDAO⎋ + and is stored on + OriginTrail + 's decentralized knowledge graph.
+ The LLM, an OpenAI GPT model, is used for reasoning and summarization.
+ Previous prompts & replies are not kept in context, to save costs.
+ + Feel free to + Submit Feedback + directly in the app, or reach out to + Darren Zal⎋ + .
+ + Check out the code on + GitHub⎋ +


- ⎋ - is a true local-first edge computing stack. -

-

+ ,a true local-first edge computing stack.
You can fork this

+ + diff --git a/src/components/chat/chat.svelte b/src/components/chat/chat.svelte index de97a1a..1f2bb2e 100644 --- a/src/components/chat/chat.svelte +++ b/src/components/chat/chat.svelte @@ -3,7 +3,17 @@ import axios from 'axios' import { sessionStore } from '$src/stores' - let username = $sessionStore.username; + // Initialize username as 'guest' by default + let username = 'guest'; + + // Reactive statement to update username if sessionStore changes + $: { + if ($sessionStore.username) { + username = $sessionStore.username; + } else { + username = 'guest'; + } + } const messages = writable([]) let newMessage = '' let isLoading = writable(false) // To track loading state @@ -16,26 +26,12 @@ let chatHistory = [] - // Ensure there are at least two messages (a query and a response) - /* if ($messages.length >= 2) { - // Extract the last query and response (excluding the current query) - const lastQueryIndex = $messages.length - 2 - chatHistory = $messages - .slice(lastQueryIndex - 1, lastQueryIndex + 1) - .map(msg => { - return { - role: msg.startsWith('Query:') ? 'user' : 'assistant', - content: msg.replace(/^Query: |^Result: /, '') - } - }) - } */ - // Send both the new message and the correct chat history const response = await axios.post('https://myseelia.life/query', { question: newMessage, history: chatHistory, username: username // Send username - }); + }) console.log('Response:', response.data) let resultText = '' @@ -98,78 +94,74 @@ return 'other' } - let feedbackMessage = ''; + let feedbackMessage = '' -async function sendFeedback() { - if (feedbackMessage.trim() !== '') { - // Send feedback to the server - await axios.post('https://myseelia.life/feedback', { - username: username, - feedback: feedbackMessage - }); + async function sendFeedback() { + if (feedbackMessage.trim() !== '') { + // Send feedback to the server + await axios.post('https://myseelia.life/feedback', { + username: username, + feedback: feedbackMessage + }) - // Reset feedbackMessage - feedbackMessage = ''; + // Reset feedbackMessage + feedbackMessage = '' + } + } + + function autoExpand(event) { + const textarea = event.target + textarea.style.height = 'auto' // Reset the height + textarea.style.height = textarea.scrollHeight + 'px' // Set the height to match scroll height } -} -{#if username} -
-
- {#each $messages as message} -
- {@html message} -
- {/each} -
-
+ +
+
+ {#each $messages as message} +
+ {@html message} + +
+ {/each} +
+
+ - - {#if $isLoading} -
Processing...
- {/if} + /> +
-
- -{:else} - -
-

Please connect to create a username before chatting.

-
-{/if} + diff --git a/src/components/home/Authed.svelte b/src/components/home/Authed.svelte index 0d1a902..78712a6 100644 --- a/src/components/home/Authed.svelte +++ b/src/components/home/Authed.svelte @@ -8,14 +8,20 @@

Welcome, {$sessionStore.username}!

+

ReFi Chat

- Myseelia is a decentralized knowledge graph for collective intelligence. + ReFi Chat is a chatbot that answers questions about Regenerative Finance (ReFi).
+

+ Try ReFi Chat +

+ Learn about this app + here +

- Try the Myseelia App
-

Device Connection Demo

+

Additional Device Connection

With Webnative SDK, a user’s account lives only on their connected devices — entirely under their control. It’s easy for them to connect as many @@ -27,3 +33,18 @@

+ + + diff --git a/src/components/home/Public.svelte b/src/components/home/Public.svelte index d179874..4ebe411 100644 --- a/src/components/home/Public.svelte +++ b/src/components/home/Public.svelte @@ -5,29 +5,13 @@
-

Welcome to the {appName}

- +

Welcome to {appName}

+ Try ReFi Chat

- Webnative SDK is a true local-first edge computing stack. Effortlessly - give your users: + This app uses passwordless login
+
+ Connect

- -
    -
  • - modern, passwordless accounts - , without a complex and costly cloud-native back-end -
    • -
  • - user-controlled data - , secured by default with our encrypted-at-rest file storage protocol -
    • -
  • - local-first functionality - , including the ability to work offline and collaborate across multiple devices -
    • -
- - Connect
diff --git a/src/components/icons/Chat.svelte b/src/components/icons/Chat.svelte new file mode 100644 index 0000000..58d1d0f --- /dev/null +++ b/src/components/icons/Chat.svelte @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/components/nav/SidebarNav.svelte b/src/components/nav/SidebarNav.svelte index 727921c..3559cac 100644 --- a/src/components/nav/SidebarNav.svelte +++ b/src/components/nav/SidebarNav.svelte @@ -9,7 +9,7 @@ import PhotoGallery from '$components/icons/PhotoGallery.svelte' import Settings from '$components/icons/Settings.svelte' import InfoThinIcon from '$components/icons/InfoThinIcon.svelte' - import Share from '$components/icons/Share.svelte' + import Chat from '$components/icons/Chat.svelte' const navItems = [ { @@ -20,7 +20,7 @@ { label: 'Chat', href: '/Chat', - icon: Share + icon: Chat }, /* { label: 'Profile', @@ -43,7 +43,7 @@ // icon: PhotoGallery // }, { - label: 'About This Template', + label: 'About This App', href: '/about/', icon: About }, diff --git a/src/lib/app-info.ts b/src/lib/app-info.ts index a88ee25..9a3ce3d 100644 --- a/src/lib/app-info.ts +++ b/src/lib/app-info.ts @@ -1,4 +1,4 @@ -export const appName = 'Myseelia' +export const appName = 'ReFiChat' export const appDescription = 'Knowledge Network for Collective Intelligence.' export const appURL = 'https://webnative.netlify.app' export const appImageURL = `${appURL}/preview.png`