victor HF staff nsarrazin HF staff commited on
Commit
8fe2aef
1 Parent(s): 15ecf06

Assistants: UI tweaks for release (#764)

Browse files

* increase settings visibility

* hideemojis = hide assistants avatars

* mobile

* text balance

* Revert "hideemojis = hide assistants avatars"

This reverts commit 6ec0d689cb2f446590cf2b137e9c3d0482a16a81.

* 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 <[email protected]>

src/lib/components/AssistantSettings.svelte CHANGED
@@ -211,7 +211,7 @@
211
  </label>
212
 
213
  <label>
214
- <span class="mb-1 text-sm font-semibold">Start messages</span>
215
  <div class="flex flex-col gap-2 md:max-h-32">
216
  <input
217
  name="exampleInput1"
 
211
  </label>
212
 
213
  <label>
214
+ <span class="mb-1 text-sm font-semibold">User start messages</span>
215
  <div class="flex flex-col gap-2 md:max-h-32">
216
  <input
217
  name="exampleInput1"
src/lib/components/NavConversationItem.svelte CHANGED
@@ -37,7 +37,7 @@
37
  {#if confirmDelete}
38
  <span class="mr-1 font-semibold"> Delete </span>
39
  {/if}
40
- {#if conv.avatarHash && !$settings.hideEmojiOnSidebar}
41
  <img
42
  src="{base}/settings/assistants/{conv.assistantId}/avatar?hash={conv.avatarHash}"
43
  alt="Assistant avatar"
 
37
  {#if confirmDelete}
38
  <span class="mr-1 font-semibold"> Delete </span>
39
  {/if}
40
+ {#if conv.avatarHash}
41
  <img
42
  src="{base}/settings/assistants/{conv.assistantId}/avatar?hash={conv.avatarHash}"
43
  alt="Assistant avatar"
src/lib/components/chat/AssistantIntroduction.svelte CHANGED
@@ -16,7 +16,9 @@
16
  <div
17
  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"
18
  >
19
- <div class="flex items-center gap-4 p-4 pr-10 md:p-8 md:pt-10 xl:gap-8">
 
 
20
  {#if assistant.avatar}
21
  <img
22
  src={`${base}/settings/assistants/${assistant._id.toString()}/avatar?hash=${
@@ -33,14 +35,11 @@
33
  </div>
34
  {/if}
35
 
36
- <div class="flex h-full flex-col gap-2">
37
- <p
38
- 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"
39
- >
40
- Assistant
41
- </p>
42
  <p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
43
- <p class="line-clamp-6 text-balance text-sm text-gray-500 dark:text-gray-400">
44
  {assistant.description}
45
  </p>
46
 
@@ -60,15 +59,19 @@
60
  <div class="absolute right-3 top-3 md:right-4 md:top-4">
61
  <a
62
  href="{base}/settings/assistants/{assistant._id.toString()}"
63
- 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"
64
- ><IconGear /></a
65
  >
66
  </div>
67
  </div>
68
  {#if assistant.exampleInputs}
69
  <div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
70
  <div class="md:col-span-2 md:mt-6">
71
- <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
 
 
 
 
72
  {#each assistant.exampleInputs as example}
73
  <button
74
  type="button"
 
16
  <div
17
  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"
18
  >
19
+ <div
20
+ 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"
21
+ >
22
  {#if assistant.avatar}
23
  <img
24
  src={`${base}/settings/assistants/${assistant._id.toString()}/avatar?hash=${
 
35
  </div>
36
  {/if}
37
 
38
+ <div class="flex h-full flex-col gap-2 text-balance">
39
+ <p class="-mb-1">Assistant</p>
40
+
 
 
 
41
  <p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
42
+ <p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
43
  {assistant.description}
44
  </p>
45
 
 
59
  <div class="absolute right-3 top-3 md:right-4 md:top-4">
60
  <a
61
  href="{base}/settings/assistants/{assistant._id.toString()}"
62
+ 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"
63
+ ><IconGear class="text-xxs" />Settings</a
64
  >
65
  </div>
66
  </div>
67
  {#if assistant.exampleInputs}
68
  <div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
69
  <div class="md:col-span-2 md:mt-6">
70
+ <div
71
+ class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
72
+ ? 'md:grid-cols-2'
73
+ : ''}"
74
+ >
75
  {#each assistant.exampleInputs as example}
76
  <button
77
  type="button"
src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -7,6 +7,7 @@
7
  import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
8
  import CarbonClose from "~icons/carbon/close";
9
  import CarbonCheckmark from "~icons/carbon/checkmark";
 
10
 
11
  import EosIconsLoading from "~icons/eos-icons/loading";
12
 
@@ -256,8 +257,10 @@
256
  >{currentModel.displayName}</a
257
  >{:else}
258
  {@const model = models.find((m) => m.id === assistant?.modelId)}
259
- <a href="{base}/settings/assistants/{assistant._id}" class="hover:underline"
260
- >{model?.displayName}</a
 
 
261
  >{/if} <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may
262
  be inaccurate or false.
263
  </p>
 
7
  import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
8
  import CarbonClose from "~icons/carbon/close";
9
  import CarbonCheckmark from "~icons/carbon/checkmark";
10
+ import CarbonCaretDown from "~icons/carbon/caret-down";
11
 
12
  import EosIconsLoading from "~icons/eos-icons/loading";
13
 
 
257
  >{currentModel.displayName}</a
258
  >{:else}
259
  {@const model = models.find((m) => m.id === assistant?.modelId)}
260
+ <a
261
+ href="{base}/settings/assistants/{assistant._id}"
262
+ class="inline-flex items-center border-b hover:text-gray-600 dark:border-gray-700 dark:hover:text-gray-300"
263
+ >{model?.displayName}<CarbonCaretDown class="text-xxs" /></a
264
  >{/if} <span class="max-sm:hidden">·</span><br class="sm:hidden" /> Generated content may
265
  be inaccurate or false.
266
  </p>
src/routes/+layout.svelte CHANGED
@@ -124,7 +124,7 @@
124
 
125
  <!-- use those meta tags everywhere except on the share assistant page -->
126
  <!-- feel free to refacto if there's a better way -->
127
- {#if !$page.url.pathname.includes("/assistant/")}
128
  <meta property="og:title" content={PUBLIC_APP_NAME} />
129
  <meta property="og:type" content="website" />
130
  <meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" />
 
124
 
125
  <!-- use those meta tags everywhere except on the share assistant page -->
126
  <!-- feel free to refacto if there's a better way -->
127
+ {#if !$page.url.pathname.includes("/assistant/") && $page.route.id !== "/assistants"}
128
  <meta property="og:title" content={PUBLIC_APP_NAME} />
129
  <meta property="og:type" content="website" />
130
  <meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" />
src/routes/assistants/+page.svelte CHANGED
@@ -1,6 +1,9 @@
1
  <script lang="ts">
2
  import type { PageData } from "./$types";
3
 
 
 
 
4
  import { goto } from "$app/navigation";
5
  import { base } from "$app/paths";
6
  import { page } from "$app/stores";
@@ -22,6 +25,24 @@
22
  };
23
  </script>
24
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  <div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
26
  <div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
27
  <div class="flex items-center">
@@ -33,7 +54,7 @@
33
  <h3 class="text-gray-500">Browse popular assistants made by the community</h3>
34
  <div class="mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
35
  <select
36
- 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"
37
  bind:value={selectedModel}
38
  on:change={onModelChange}
39
  >
@@ -45,16 +66,16 @@
45
 
46
  <a
47
  href={`${base}/settings/assistants/new`}
48
- 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"
49
  >
50
  <CarbonAdd />Create New assistant
51
  </a>
52
  </div>
53
- <div class="mt-10 grid grid-cols-2 gap-4 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
54
  {#each data.assistants as assistant}
55
  <a
56
  href="{base}/assistant/{assistant._id}"
57
- 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"
58
  >
59
  {#if assistant.avatar}
60
  <img
@@ -74,13 +95,11 @@
74
  >
75
  {assistant.name}
76
  </h3>
77
- <p
78
- class="line-clamp-4 text-balance text-xxs text-gray-700 sm:line-clamp-2 sm:text-xs dark:text-gray-400"
79
- >
80
  {assistant.description}
81
  </p>
82
  {#if assistant.createdByName}
83
- <p class="mt-auto pt-2 text-xxs text-gray-400 sm:text-xs dark:text-gray-500">
84
  Created by <a
85
  class="hover:underline"
86
  href="https://hf.co/{assistant.createdByName}"
 
1
  <script lang="ts">
2
  import type { PageData } from "./$types";
3
 
4
+ import { PUBLIC_APP_ASSETS, PUBLIC_ORIGIN } from "$env/static/public";
5
+ import { isHuggingChat } from "$lib/utils/isHuggingChat";
6
+
7
  import { goto } from "$app/navigation";
8
  import { base } from "$app/paths";
9
  import { page } from "$app/stores";
 
25
  };
26
  </script>
27
 
28
+ <svelte:head>
29
+ {#if isHuggingChat}
30
+ <title>HuggingChat - Assistants</title>
31
+ <meta property="og:title" content="HuggingChat - Assistants" />
32
+ <meta property="og:type" content="link" />
33
+ <meta
34
+ property="og:description"
35
+ content="Browse HuggingChat assistants made by the community."
36
+ />
37
+ <meta
38
+ property="og:image"
39
+ content="{PUBLIC_ORIGIN ||
40
+ $page.url.origin}{base}/{PUBLIC_APP_ASSETS}/assistants-thumbnail.png"
41
+ />
42
+ <meta property="og:url" content={$page.url.href} />
43
+ {/if}
44
+ </svelte:head>
45
+
46
  <div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
47
  <div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
48
  <div class="flex items-center">
 
54
  <h3 class="text-gray-500">Browse popular assistants made by the community</h3>
55
  <div class="mt-6 flex justify-between gap-2 max-sm:flex-col sm:items-center">
56
  <select
57
+ 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"
58
  bind:value={selectedModel}
59
  on:change={onModelChange}
60
  >
 
66
 
67
  <a
68
  href={`${base}/settings/assistants/new`}
69
+ 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"
70
  >
71
  <CarbonAdd />Create New assistant
72
  </a>
73
  </div>
74
+ <div class="mt-10 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
75
  {#each data.assistants as assistant}
76
  <a
77
  href="{base}/assistant/{assistant._id}"
78
+ 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"
79
  >
80
  {#if assistant.avatar}
81
  <img
 
95
  >
96
  {assistant.name}
97
  </h3>
98
+ <p class="line-clamp-4 text-xs text-gray-700 sm:line-clamp-2 dark:text-gray-400">
 
 
99
  {assistant.description}
100
  </p>
101
  {#if assistant.createdByName}
102
+ <p class="mt-auto pt-2 text-xs text-gray-400 dark:text-gray-500">
103
  Created by <a
104
  class="hover:underline"
105
  href="https://hf.co/{assistant.createdByName}"
src/routes/settings/+layout.svelte CHANGED
@@ -1,4 +1,5 @@
1
  <script lang="ts">
 
2
  import { base } from "$app/paths";
3
  import { clickOutside } from "$lib/actions/clickOutside";
4
  import { afterNavigate, goto } from "$app/navigation";
@@ -15,6 +16,13 @@
15
  export let data;
16
 
17
  let previousPage: string = base;
 
 
 
 
 
 
 
18
 
19
  afterNavigate(({ from }) => {
20
  if (!from?.url.pathname.includes("settings")) {
@@ -71,7 +79,9 @@
71
  {/each}
72
  <!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
73
  {#if data.enableAssistants && (!isHuggingChat || data.assistants.length >= 1)}
74
- <h3 class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">Assistants</h3>
 
 
75
 
76
  {#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
77
  <a
 
1
  <script lang="ts">
2
+ import { onMount } from "svelte";
3
  import { base } from "$app/paths";
4
  import { clickOutside } from "$lib/actions/clickOutside";
5
  import { afterNavigate, goto } from "$app/navigation";
 
16
  export let data;
17
 
18
  let previousPage: string = base;
19
+ let assistantsSection: HTMLHeadingElement;
20
+
21
+ onMount(() => {
22
+ if ($page.params?.assistantId) {
23
+ assistantsSection.scrollIntoView();
24
+ }
25
+ });
26
 
27
  afterNavigate(({ from }) => {
28
  if (!from?.url.pathname.includes("settings")) {
 
79
  {/each}
80
  <!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
81
  {#if data.enableAssistants && (!isHuggingChat || data.assistants.length >= 1)}
82
+ <h3 bind:this={assistantsSection} class="pb-3 pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
83
+ Assistants
84
+ </h3>
85
 
86
  {#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
87
  <a
src/routes/settings/+page.svelte CHANGED
@@ -56,7 +56,7 @@
56
  target="_blank"
57
  rel="noreferrer"
58
  class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
59
- ><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " /> Give your feedback on HuggingChat</a
60
  >
61
  <button
62
  on:click|preventDefault={() => (isConfirmingDeletion = true)}
 
56
  target="_blank"
57
  rel="noreferrer"
58
  class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
59
+ ><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
60
  >
61
  <button
62
  on:click|preventDefault={() => (isConfirmingDeletion = true)}
src/routes/settings/assistants/[assistantId]/+page.svelte CHANGED
@@ -137,16 +137,6 @@
137
  </div>
138
  </div>
139
 
140
- <!-- <div>
141
- <h2 class="mb-2 text-lg font-semibold">Model used</h2>
142
-
143
- <div
144
- class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
145
- >
146
- <input disabled class="flex-1" value="Model" />
147
- </div>
148
- </div> -->
149
-
150
  <h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
151
 
152
  <textarea
 
137
  </div>
138
  </div>
139
 
 
 
 
 
 
 
 
 
 
 
140
  <h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
141
 
142
  <textarea
static/huggingchat/assistants-thumbnail.png ADDED