major ui overhaul adding skeletonlabs design system
This commit is contained in:
Samuel Andert
12
src/lib/components/AppBar.svelte
Normal file
12
src/lib/components/AppBar.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { AppBar } from '@skeletonlabs/skeleton';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
</script>
|
||||
|
||||
<AppBar>
|
||||
<svelte:fragment slot="lead"
|
||||
><Avatar src="logo.png" width="w-8" rounded="rounded-full" /></svelte:fragment
|
||||
>
|
||||
<h1 class="h4">Nova</h1>
|
||||
<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
|
||||
</AppBar>
|
||||
17
src/lib/components/Apps.svelte
Normal file
17
src/lib/components/Apps.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
const routes = [
|
||||
{ path: '/', name: 'Home', icon: '🏠' },
|
||||
{ path: '/wallet', name: 'Wallet', icon: '💼' },
|
||||
{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
|
||||
{ path: '/login', name: 'Login', icon: '🔑' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
|
||||
{#each routes as route, index}
|
||||
<a class="logo-item" href={route.path}>
|
||||
<span>{route.icon}</span>
|
||||
<span>{route.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
@ -1,14 +0,0 @@
|
||||
<script>
|
||||
import { clearMessages } from '$lib/services/messages/messages';
|
||||
|
||||
function handleClear() {
|
||||
clearMessages();
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="px-4 py-2 ml-2 text-white bg-red-500 rounded hover:bg-red-600"
|
||||
on:click={handleClear}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
@ -6,7 +6,7 @@
|
||||
import { createMessage } from '$lib/services/messages/messages';
|
||||
import { createLitSession } from '$lib/services/createLitSession/createLitSession';
|
||||
|
||||
const redirectUri = 'http://localhost:5173/';
|
||||
const redirectUri = 'http://localhost:5173/login';
|
||||
|
||||
export let services;
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
onMount(async () => {
|
||||
try {
|
||||
provider = await services.setupLit.connectProvider();
|
||||
console.log('Provider: ' + provider);
|
||||
|
||||
logMessage('Component mounted.');
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import Composite from '$lib/core/Composite.svelte';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
export let store;
|
||||
|
||||
@ -27,22 +28,22 @@
|
||||
{#if isStoreLoaded}
|
||||
{#if $store.messages}
|
||||
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
|
||||
{#each $store.messages as message}
|
||||
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
|
||||
<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 class="grid gap-2">
|
||||
{#each $store.messages as message}
|
||||
<div class="p-4 space-y-2 rounded-tl-none card variant-soft">
|
||||
<header class="flex items-center justify-between">
|
||||
<p class="font-bold">{message.type} | {message.sender}</p>
|
||||
<small class="opacity-50">{message.timestamp}</small>
|
||||
</header>
|
||||
<p>{message.text}</p>
|
||||
</div>
|
||||
<p class="mt-2 text-base text-gray-800">{message.text}</p>
|
||||
</div>
|
||||
{#if message.composite}
|
||||
<div class="overflow-y-auto max-h-80vh">
|
||||
<Composite composite={message.composite} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if message.composite}
|
||||
<div class="overflow-y-auto max-h-80vh">
|
||||
<Composite composite={message.composite} />
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
{/if}
|
||||
{:else}
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
<script>
|
||||
import { createMessage } from '$lib/services/messages/messages';
|
||||
|
||||
export function sendMessage(text) {
|
||||
if (text && text.trim() !== '') {
|
||||
const message = {
|
||||
text: text,
|
||||
sender: 'user',
|
||||
type: 'chat'
|
||||
};
|
||||
|
||||
const appCommandPattern = /@(\w+)/;
|
||||
const match = text.match(appCommandPattern);
|
||||
if (match && match[1]) {
|
||||
message.composite = {
|
||||
id: match[1],
|
||||
component: match[1]
|
||||
};
|
||||
}
|
||||
console.log(message);
|
||||
|
||||
createMessage(message);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSend() {
|
||||
sendMessage(text);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600" on:click={handleSend}>
|
||||
Send
|
||||
</button>
|
||||
@ -1,34 +1,69 @@
|
||||
<script>
|
||||
import { getContextStore } from '$lib/stores/contextStore.ts';
|
||||
import ClearMessages from './ClearMessages.svelte';
|
||||
import SendMessage from './SendMessage.svelte';
|
||||
<!-- TerminalComponent.svelte -->
|
||||
|
||||
<script lang="ts">
|
||||
import { createMessage, clearMessages } from '$lib/services/messages/messages';
|
||||
import { drawerStore } from '@skeletonlabs/skeleton';
|
||||
import type { DrawerSettings } from '@skeletonlabs/skeleton';
|
||||
|
||||
const drawerSettings: DrawerSettings = {
|
||||
position: 'bottom',
|
||||
id: 'drawer',
|
||||
meta: { id: 'apps', component: 'Apps' }
|
||||
};
|
||||
|
||||
const openDrawer = () => {
|
||||
drawerStore.open(drawerSettings);
|
||||
};
|
||||
|
||||
const store = getContextStore('MessageInput');
|
||||
let newMessageText = '';
|
||||
|
||||
let sendFunction; // To hold the sendMessage function from SendMessage component
|
||||
|
||||
function handleKeyDown(event) {
|
||||
if (event.key === 'Enter') {
|
||||
sendFunction(newMessageText);
|
||||
sendMessage(newMessageText);
|
||||
newMessageText = '';
|
||||
store.set({ newMessageText }); // Update the store directly
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// Reactive assignment to store when newMessageText changes
|
||||
$: store.set({ newMessageText });
|
||||
// Sending message logic
|
||||
function sendMessage(text) {
|
||||
if (text && text.trim() !== '') {
|
||||
const message = {
|
||||
text: text,
|
||||
sender: 'user',
|
||||
type: 'chat'
|
||||
};
|
||||
|
||||
const appCommandPattern = /@(\w+)/;
|
||||
const match = text.match(appCommandPattern);
|
||||
if (match && match[1]) {
|
||||
message.composite = {
|
||||
id: match[1],
|
||||
component: match[1]
|
||||
};
|
||||
}
|
||||
createMessage(message);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear messages logic
|
||||
function handleClear() {
|
||||
clearMessages();
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="flex justify-end p-4 bg-white">
|
||||
<input
|
||||
type="text"
|
||||
class="flex-grow px-3 py-2 mr-2 border rounded"
|
||||
placeholder="Type your message..."
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-12">
|
||||
<button class="input-group-shim" on:click={openDrawer}>+</button>
|
||||
|
||||
<textarea
|
||||
class="bg-transparent border-0 ring-0"
|
||||
name="prompt"
|
||||
id="prompt"
|
||||
placeholder="Write a message..."
|
||||
rows="1"
|
||||
bind:value={newMessageText}
|
||||
on:keydown={handleKeyDown}
|
||||
/>
|
||||
<SendMessage bind:sendMessage={sendFunction} />
|
||||
<ClearMessages />
|
||||
</footer>
|
||||
<button class="variant-filled-primary" on:click={() => sendMessage(newMessageText)}>Send</button>
|
||||
<!-- <button class="variant-filled-primary" on:click={handleClear}>clear</button> -->
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user