Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: settings page in dark mode #782

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

fix: settings page in dark mode #782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d741c2a
Fixes #746: settings page dark mode - rebase
KartikGS Feb 5, 2024
9737ef1
Fixes #746: dark mode - formatting
KartikGS Feb 6, 2024
1bc8316
Merge branch 'main' into front/setting_page_theme
KartikGS Feb 8, 2024
dd7415c
Merge branch 'main' into front/setting_page_theme
nsarrazin Feb 14, 2024
a56a3c3
Fixes #746: format and merge
KartikGS Feb 14, 2024
2d52d25
resolved conflits at src/routes/settings/assistants/[assistantId]/+pa…
KartikGS Feb 15, 2024
0c3ef14
Merge branch 'main' into front/setting_page_theme
Feb 19, 2024
f6badf3
Fix dark border for sign "public"
mishig25 Feb 19, 2024
14291a2
Fix avatar upload dark mode
mishig25 Feb 19, 2024
ed86754
active assisntat classes vice-versa
mishig25 Feb 19, 2024
690c14a
Merge branch 'main' of https://github.com/huggingface/chat-ui into fr…
KartikGS Feb 19, 2024
eba4c5c
Merge pull request #1 from huggingface/missing_dark_classes
KartikGS Feb 19, 2024
eafef66
Merge branch 'front/setting_page_theme' of https://github.com/KartikG…
KartikGS Feb 19, 2024
45bc1ff
Merge branch 'main' into front/setting_page_theme
Feb 19, 2024
10408b5
report modal dark mode
KartikGS Feb 19, 2024
a4df707
Merge branch 'front/setting_page_theme' of https://github.com/KartikG…
KartikGS Feb 19, 2024
bb768db
ReportModal dark mode format
KartikGS Feb 19, 2024
0675e59
letter thumbnail darkmode
KartikGS Feb 19, 2024
7842ea5
Merge branch 'main' into front/setting_page_theme
nsarrazin Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 31 additions & 23 deletions src/lib/components/AssistantSettings.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,23 +110,25 @@
}}
>
{#if assistant}
<h2 class="text-xl font-semibold">Edit assistant ({assistant?.name ?? ""})</h2>
<p class="mb-6 text-sm text-gray-500">
<h2 class="text-xl font-semibold dark:text-gray-300">
Edit assistant ({assistant?.name ?? ""})
</h2>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Modifying an existing assistant will propagate those changes to all users.
</p>
{:else}
<h2 class="text-xl font-semibold">Create new assistant</h2>
<p class="mb-6 text-sm text-gray-500">
<h2 class="text-xl font-semibold dark:text-gray-300">Create new assistant</h2>
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
Create and share your own AI Assistant. All assistants are <span
class="rounded-full border px-2 py-0.5 leading-none">public</span
class="rounded-full border px-2 py-0.5 leading-none dark:border-gray-600">public</span
>
</p>
{/if}

<div class="mx-1 grid flex-1 grid-cols-2 gap-4 max-sm:grid-cols-1">
<div class="flex flex-col gap-4">
<div>
<span class="mb-1 block pb-2 text-sm font-semibold">Avatar</span>
<span class="mb-1 block pb-2 text-sm font-semibold dark:text-gray-300">Avatar</span>
<input
type="file"
accept="image/*"
Expand Down Expand Up @@ -166,7 +168,7 @@
files = null;
deleteExistingAvatar = true;
}}
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline"
class="mx-auto w-max text-center text-xs text-gray-600 hover:underline dark:text-gray-400"
>
Delete
</button>
Expand All @@ -175,7 +177,7 @@
<div class="mb-1 flex w-max flex-row gap-4">
<label
for="avatar"
class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100"
class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-700"
>
<CarbonUpload class="mr-2 text-xs " /> Upload
</label>
Expand All @@ -185,30 +187,33 @@
</div>

<label>
<span class="mb-1 text-sm font-semibold">Name</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Name</span>
<input
name="name"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
placeholder="My awesome model"
value={assistant?.name ?? ""}
/>
<p class="text-xs text-red-500">{getError("name", form)}</p>
</label>

<label>
<span class="mb-1 text-sm font-semibold">Description</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Description</span>
<textarea
name="description"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
placeholder="He knows everything about python"
value={assistant?.description ?? ""}
/>
<p class="text-xs text-red-500">{getError("description", form)}</p>
</label>

<label>
<span class="mb-1 text-sm font-semibold">Model</span>
<select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2">
<span class="mb-1 text-sm font-semibold dark:text-gray-300">Model</span>
<select
name="modelId"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
>
{#each models.filter((model) => !model.unlisted) as model}
<option
value={model.id}
Expand All @@ -222,32 +227,32 @@
</label>

<label>
<span class="mb-1 text-sm font-semibold">User start messages</span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">User start messages</span>
<div class="flex flex-col gap-2 md:max-h-32">
<input
name="exampleInput1"
bind:value={inputMessage1}
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
/>
{#if !!inputMessage1 || !!inputMessage2}
<input
name="exampleInput2"
bind:value={inputMessage2}
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
/>
{/if}
{#if !!inputMessage2 || !!inputMessage3}
<input
name="exampleInput3"
bind:value={inputMessage3}
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
/>
{/if}
{#if !!inputMessage3 || !!inputMessage4}
<input
name="exampleInput4"
bind:value={inputMessage4}
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
/>
{/if}
</div>
Expand All @@ -256,10 +261,12 @@
</div>

<label class="flex flex-col">
<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
<span class="mb-1 text-sm font-semibold dark:text-gray-300">
Instructions (system prompt)
</span>
<textarea
name="preprompt"
class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300"
placeholder="You'll act as..."
value={assistant?.preprompt ?? ""}
/>
Expand All @@ -270,13 +277,14 @@
<div class="mt-5 flex justify-end gap-2">
<a
href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600">Cancel</a
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300"
>Cancel</a
>
<button
type="submit"
disabled={loading}
aria-disabled={loading}
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20"
class="rounded-full bg-black px-8 py-2 font-semibold md:px-20 dark:bg-gray-300 dark:text-gray-900"
class:bg-gray-200={loading}
class:text-gray-600={loading}
class:text-white={!loading}
Expand Down
49 changes: 31 additions & 18 deletions src/routes/settings/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,34 +42,38 @@
use:clickOutside={() => {
goto(previousPage);
}}
class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-8 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh] dark:bg-gray-900"
>
<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
<h2 class="text-xl font-bold">Settings</h2>
<h2 class="text-xl font-bold dark:text-gray-300">Settings</h2>
<button
class="btn rounded-lg"
on:click={() => {
goto(previousPage);
}}
>
<CarbonClose class="text-xl text-gray-900 hover:text-black" />
<CarbonClose
class="text-xl text-gray-900 hover:text-black dark:text-gray-400 dark:hover:text-gray-200"
/>
</button>
</div>
<div
class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
>
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300">Models</h3>

{#each data.models.filter((el) => !el.unlisted) as model}
<a
href="{base}/settings/{model.id}"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
{model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
{model.id === $page.params.model
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-500 dark:text-gray-400'}"
>
<div class="truncate">{model.displayName}</div>
{#if model.id === $settings.activeModel}
<div
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
>
Active
</div>
Expand All @@ -78,14 +82,19 @@
{/each}
<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
{#if data.enableAssistants}
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
<h3
bind:this={assistantsSection}
class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1 dark:text-gray-300"
>
Assistants
</h3>
{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
<a
href="{base}/settings/assistants/new"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
{$page.url.pathname === `${base}/settings/assistants/new`
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-500 dark:text-gray-400'}"
>
<CarbonAdd />
<div class="truncate">Create new assistant</div>
Expand All @@ -94,8 +103,10 @@
{#each data.assistants as assistant}
<a
href="{base}/settings/assistants/{assistant._id.toString()}"
class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm hover:bg-gray-100 md:rounded-xl dark:hover:bg-gray-800
{assistant._id.toString() === $page.params.assistantId
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-500 dark:text-gray-400'}"
>
{#if assistant.avatar}
<img
Expand All @@ -105,15 +116,15 @@
/>
{:else}
<div
class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500 dark:bg-gray-700"
>
{assistant.name[0]}
</div>
{/if}
<div class="truncate">{assistant.name}</div>
{#if assistant._id.toString() === $settings.activeModel}
<div
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white dark:bg-gray-300 dark:text-gray-900"
>
Active
</div>
Expand All @@ -122,16 +133,18 @@
{/each}
<a
href="{base}/assistants"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl"
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl dark:text-gray-400 dark:hover:bg-gray-800"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
<div class="truncate">Browse Assistants</div>
</a>
{/if}

<a
href="{base}/settings"
class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
class="group mt-auto flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm hover:bg-gray-100 max-md:order-first md:rounded-xl dark:hover:bg-gray-800
{$page.url.pathname === `${base}/settings`
? 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100'
: 'text-gray-500 dark:text-gray-400'}"
>
<UserIcon class="text-sm" />
Application Settings
Expand All @@ -143,7 +156,7 @@

{#if $settings.recentlySaved}
<div
class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black dark:border-gray-500 dark:bg-gray-600 dark:text-gray-300"
>
<CarbonCheckmark class="text-green-500" />
Saved
Expand Down
28 changes: 17 additions & 11 deletions src/routes/settings/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
</script>

<div class="flex w-full flex-col gap-5">
<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
<div
class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
>
<h2>Application Settings</h2>
</div>

Expand All @@ -33,19 +35,19 @@
name="shareConversationsWithModelAuthors"
bind:checked={$settings.shareConversationsWithModelAuthors}
/>
<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
Share conversations with model authors
</div>
</label>

<p class="text-sm text-gray-500">
<p class="text-sm text-gray-500 dark:text-gray-400">
Sharing your data will help improve the training data and make open models better over time.
</p>
{/if}
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="mt-6 flex items-center">
<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
<div class="inline cursor-pointer select-none items-center gap-2 pl-2 dark:text-gray-300">
Hide emoticons in conversation topics
</div>
</label>
Expand All @@ -55,13 +57,13 @@
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
target="_blank"
rel="noreferrer"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
>
<button
on:click|preventDefault={() => (isConfirmingDeletion = true)}
type="submit"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700 dark:text-gray-300 dark:decoration-gray-700 dark:hover:decoration-gray-300"
><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
>
</div>
Expand All @@ -75,24 +77,28 @@
}}
method="post"
action="{base}/conversations?/delete"
class="flex w-full flex-col gap-5 p-6"
class="flex w-full flex-col gap-5 p-6 dark:bg-gray-900"
>
<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
<div
class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-300"
>
<h2>Are you sure?</h2>
<button
type="button"
class="group"
on:click|stopPropagation={() => (isConfirmingDeletion = false)}
>
<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
<CarbonClose
class="text-gray-900 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-200"
/>
</button>
</div>
<p class="text-gray-800">
<p class="text-gray-800 dark:text-gray-300">
This action will delete all your conversations. This cannot be undone.
</p>
<button
type="submit"
class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring dark:text-gray-300 dark:ring-offset-gray-900"
>
Confirm deletion
</button>
Expand Down
Loading
Loading