Assistants: UI tweaks for release (#764)
* increase settings visibility
* hideemojis = hide assistants avatars
* mobile
* text balance
* Revert "hideemojis = hide assistants avatars"
This reverts commit 6ec0d689cb
.
* always show assistant avatar
* mobile scroll to assistants
* rm comment
* full width start message
* /assistants thumbnail
* model selector
* width
* font-size
* lint
* min width on desktop too
---------
Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>
pull/763/head
parent
15ecf0697e
commit
8fe2aef977
|
@ -211,7 +211,7 @@
|
|||
</label>
|
||||
|
||||
<label>
|
||||
<span class="mb-1 text-sm font-semibold">Start messages</span>
|
||||
<span class="mb-1 text-sm font-semibold">User start messages</span>
|
||||
<div class="flex flex-col gap-2 md:max-h-32">
|
||||
<input
|
||||
name="exampleInput1"
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
{#if confirmDelete}
|
||||
<span class="mr-1 font-semibold"> Delete </span>
|
||||
{/if}
|
||||
{#if conv.avatarHash && !$settings.hideEmojiOnSidebar}
|
||||
{#if conv.avatarHash}
|
||||
<img
|
||||
src="{base}/settings/assistants/{conv.assistantId}/avatar?hash={conv.avatarHash}"
|
||||
alt="Assistant avatar"
|
||||
|
|
|
@ -16,7 +16,9 @@
|
|||
<div
|
||||
class="relative mt-auto rounded-2xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800/60 dark:text-gray-300"
|
||||
>
|
||||
<div class="flex items-center gap-4 p-4 pr-10 md:p-8 md:pt-10 xl:gap-8">
|
||||
<div
|
||||
class="flex min-w-[80dvw] items-center gap-4 p-4 pr-1 sm:min-w-[440px] md:p-8 md:pt-10 xl:gap-8"
|
||||
>
|
||||
{#if assistant.avatar}
|
||||
<img
|
||||
src={`${base}/settings/assistants/${assistant._id.toString()}/avatar?hash=${
|
||||
|
@ -33,14 +35,11 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex h-full flex-col gap-2">
|
||||
<p
|
||||
class="w-fit truncate text-ellipsis rounded-full border bg-white px-3 py-1 text-xs text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-400"
|
||||
>
|
||||
Assistant
|
||||
</p>
|
||||
<div class="flex h-full flex-col gap-2 text-balance">
|
||||
<p class="-mb-1">Assistant</p>
|
||||
|
||||
<p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
|
||||
<p class="line-clamp-6 text-balance text-sm text-gray-500 dark:text-gray-400">
|
||||
<p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
|
||||
{assistant.description}
|
||||
</p>
|
||||
|
||||
|
@ -60,15 +59,19 @@
|
|||
<div class="absolute right-3 top-3 md:right-4 md:top-4">
|
||||
<a
|
||||
href="{base}/settings/assistants/{assistant._id.toString()}"
|
||||
class="flex size-7 items-center justify-center rounded-full border bg-gray-200 p-1 text-xs hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600"
|
||||
><IconGear /></a
|
||||
class="flex items-center gap-1.5 rounded-full border bg-white py-1 pl-3 pr-2.5 text-xs text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
|
||||
><IconGear class="text-xxs" />Settings</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if assistant.exampleInputs}
|
||||
<div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
|
||||
<div class="md:col-span-2 md:mt-6">
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<div
|
||||
class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
|
||||
? 'md:grid-cols-2'
|
||||
: ''}"
|
||||
>
|
||||
{#each assistant.exampleInputs as example}
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
|
||||
import CarbonClose from "~icons/carbon/close";
|
||||
import CarbonCheckmark from "~icons/carbon/checkmark";
|
||||
import CarbonCaretDown from "~icons/carbon/caret-down";
|
||||
|
||||
import EosIconsLoading from "~icons/eos-icons/loading";
|
||||
|
||||
|
@ -256,8 +257,10 @@
|
|||
>{currentModel.displayName}</a
|
||||
>{:else}
|
||||
{@const model = models.find((m) => m.id === assistant?.modelId)}
|
||||
<a href="{base}/settings/assistants/{assistant._id}" class="hover:underline"
|
||||
>{model?.displayName}</a
|
||||
<a
|
||||
href="{base}/settings/assistants/{assistant._id}"
|
||||
class="inline-flex items-center border-b hover:text-gray-600 dark:border-gray-700 dark:hover:text-gray-300"
|
||||
>{model?.displayName}<CarbonCaretDown class="text-xxs" /></a
|
||||
>{/if} <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may
|
||||
be inaccurate or false.
|
||||
</p>
|
||||
|
|
|
@ -124,7 +124,7 @@
|
|||
|
||||
<!-- use those meta tags everywhere except on the share assistant page -->
|
||||
<!-- feel free to refacto if there's a better way -->
|
||||
{#if !$page.url.pathname.includes("/assistant/")}
|
||||
{#if !$page.url.pathname.includes("/assistant/") && $page.route.id !== "/assistants"}
|
||||
<meta property="og:title" content={PUBLIC_APP_NAME} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" />
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
|
||||
import { isHuggingChat } from "$lib/utils/isHuggingChat";
|
||||
|
||||
import { goto } from "$app/navigation";
|
||||
import { base } from "$app/paths";
|
||||
import { page } from "$app/stores";
|
||||
|
@ -22,6 +25,24 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if isHuggingChat}
|
||||
<title>HuggingChat - Assistants</title>
|
||||
<meta property="og:title" content="HuggingChat - Assistants" />
|
||||
<meta property="og:type" content="link" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Browse HuggingChat assistants made by the community."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{PUBLIC_ORIGIN ||
|
||||
$page.url.origin}{base}/{PUBLIC_APP_ASSETS}/assistants-thumbnail.png"
|
||||
/>
|
||||
<meta property="og:url" content={$page.url.href} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
|
||||
<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
|
||||
<div class="flex items-center">
|
||||
|
@ -33,7 +54,7 @@
|
|||
<h3 class="text-gray-500">Browse popular assistants made by the community</h3>
|
||||
<div class="mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
|
||||
<select
|
||||
class="mt-1 rounded-lg border border-gray-300 bg-gray-50 p-2 text-xs text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
|
||||
class="mt-1 h-[34px] rounded-lg border border-gray-300 bg-gray-50 px-2 text-sm text-gray-900 focus:border-blue-700 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
|
||||
bind:value={selectedModel}
|
||||
on:change={onModelChange}
|
||||
>
|
||||
|
@ -45,16 +66,16 @@
|
|||
|
||||
<a
|
||||
href={`${base}/settings/assistants/new`}
|
||||
class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 text-center shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
|
||||
class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
|
||||
>
|
||||
<CarbonAdd />Create New assistant
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-10 grid grid-cols-2 gap-4 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
|
||||
<div class="mt-10 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
|
||||
{#each data.assistants as assistant}
|
||||
<a
|
||||
href="{base}/assistant/{assistant._id}"
|
||||
class="flex flex-col items-center justify-center overflow-hidden rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
|
||||
class="flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
|
||||
>
|
||||
{#if assistant.avatar}
|
||||
<img
|
||||
|
@ -74,13 +95,11 @@
|
|||
>
|
||||
{assistant.name}
|
||||
</h3>
|
||||
<p
|
||||
class="line-clamp-4 text-balance text-xxs text-gray-700 sm:line-clamp-2 sm:text-xs dark:text-gray-400"
|
||||
>
|
||||
<p class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400">
|
||||
{assistant.description}
|
||||
</p>
|
||||
{#if assistant.createdByName}
|
||||
<p class="mt-auto pt-2 text-xxs text-gray-400 sm:text-xs dark:text-gray-500">
|
||||
<p class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500">
|
||||
Created by <a
|
||||
class="hover:underline"
|
||||
href="https://hf.co/{assistant.createdByName}"
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { base } from "$app/paths";
|
||||
import { clickOutside } from "$lib/actions/clickOutside";
|
||||
import { afterNavigate, goto } from "$app/navigation";
|
||||
|
@ -15,6 +16,13 @@
|
|||
export let data;
|
||||
|
||||
let previousPage: string = base;
|
||||
let assistantsSection: HTMLHeadingElement;
|
||||
|
||||
onMount(() => {
|
||||
if ($page.params?.assistantId) {
|
||||
assistantsSection.scrollIntoView();
|
||||
}
|
||||
});
|
||||
|
||||
afterNavigate(({ from }) => {
|
||||
if (!from?.url.pathname.includes("settings")) {
|
||||
|
@ -71,7 +79,9 @@
|
|||
{/each}
|
||||
<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
|
||||
{#if data.enableAssistants && (!isHuggingChat || data.assistants.length >= 1)}
|
||||
<h3 class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">Assistants</h3>
|
||||
<h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
|
||||
Assistants
|
||||
</h3>
|
||||
|
||||
{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
|
||||
<a
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
|
||||
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " /> Give your feedback on HuggingChat</a
|
||||
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
|
||||
>
|
||||
<button
|
||||
on:click|preventDefault={() => (isConfirmingDeletion = true)}
|
||||
|
|
|
@ -137,16 +137,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div>
|
||||
<h2 class="mb-2 text-lg font-semibold">Model used</h2>
|
||||
|
||||
<div
|
||||
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
|
||||
>
|
||||
<input disabled class="flex-1" value="Model" />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
|
||||
|
||||
<textarea
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 206 KiB |
Loading…
Reference in New Issue