haraldwolff
/
chat-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Misc UI (#616) 

* fix bottom gradient

* larger textarea

* dropzone

* lint

---------

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>
pull/619/head
Victor Muštar 2023-12-08 12:30:36 +01:00 committed by GitHub
parent 2cb745f234
commit e0c0b0e53f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/components/chat/ChatWindow.svelte
View File

@ -110,35 +110,35 @@
/>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center md:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
>
<div class="flex flex-row flex-wrap justify-center gap-2.5 max-md:pb-3">
{#each sources as source, index}
{#await source then src}
<div class="relative h-24 w-24 overflow-hidden rounded-lg shadow-lg">
<img
src={`data:image/*;base64,${src}`}
alt="input content"
class="h-full w-full rounded-lg bg-gray-400 object-cover dark:bg-gray-900"
/>
<!-- add a button on top that deletes this image from sources -->
<button
class="absolute left-1 top-1"
on:click={() => {
files = files.filter((_, i) => i !== index);
}}
>
<CarbonClose class="text-md font-black text-gray-300 hover:text-gray-100" />
</button>
</div>
{/await}
{/each}
</div>
{#if sources.length}
<div class="flex flex-row flex-wrap justify-center gap-2.5 max-md:pb-3">
{#each sources as source, index}
{#await source then src}
<div class="relative h-16 w-16 overflow-hidden rounded-lg shadow-lg">
<img
src={`data:image/*;base64,${src}`}
alt="input content"
class="h-full w-full rounded-lg bg-gray-400 object-cover dark:bg-gray-900"
/>
<!-- add a button on top that deletes this image from sources -->
<button
class="absolute left-1 top-1"
on:click={() => {
files = files.filter((_, i) => i !== index);
}}
>
<CarbonClose class="text-md font-black text-gray-300 hover:text-gray-100" />
</button>
</div>
{/await}
{/each}
</div>
{/if}
<div
class="dark:via-gray-80 w-full bg-gradient-to-t from-white via-white/80 to-white/0 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:px-4 max-md:dark:bg-gray-900"
>
<div class="flex w-full pb-3 max-md:pt-3">
<div class="w-full">
<div class="flex w-full pb-3">
{#if $page.data.settings?.searchEnabled}
<WebSearchToggle />
{/if}
@ -184,7 +184,7 @@
loginModalOpen = true;
}
}}
maxRows={4}
maxRows={6}
disabled={isReadOnly || lastIsError}
/>
{/if}

6
src/lib/components/chat/FileDropzone.svelte
View File

@ -63,7 +63,7 @@
id="dropzone"
role="form"
on:drop={dropHandle}
class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500"
class="relative flex w-full max-w-4xl flex-col items-center rounded-xl border border-dashed bg-gray-100 focus-within:border-gray-300 dark:border-gray-500 dark:bg-gray-700 dark:focus-within:border-gray-500"
>
<div class="object-center">
{#if file_error_message}
@ -82,10 +82,10 @@
</div>
{/if}
<div class="mt-3 flex justify-center" class:opacity-0={file_error_message}>
<CarbonImage class="text-5xl text-gray-500 dark:text-gray-400" />
<CarbonImage class="text-xl text-gray-500 dark:text-gray-400" />
</div>
<p
class="mb-3 mt-3 text-sm text-gray-500 dark:text-gray-400"
class="mb-3 mt-1.5 text-sm text-gray-500 dark:text-gray-400"
class:opacity-0={file_error_message}
>
Drag and drop <span class="font-semibold">one image</span> here