Hugging Face's logo

Spaces:
evijit
/
pluralchat
Sleeping

App Files Community
1
nsarrazin commited on
Commit
8229efc
·
1 Parent(s): d678639

feat: rework assistant intro UI

Browse files
Files changed (1) hide show
  1. src/lib/components/chat/AssistantIntroduction.svelte +125 -118
src/lib/components/chat/AssistantIntroduction.svelte CHANGED
@@ -58,138 +58,145 @@
58
  const settings = useSettingsStore();
59
  </script>
60
 
61
- <div class="flex h-full w-full flex-col content-center items-center justify-center pb-52">
62
- <div
63
- 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"
64
- >
65
- <div
66
- class="mt-3 flex min-w-[80dvw] items-center gap-4 p-4 pr-1 sm:min-w-[440px] md:p-8 xl:gap-8"
67
- >
68
- {#if assistant.avatar}
69
- <img
70
- src={`${base}/settings/assistants/${assistant._id.toString()}/avatar.jpg?hash=${
71
- assistant.avatar
72
- }`}
73
- alt="avatar"
74
- class="size-16 flex-none rounded-full object-cover max-sm:self-start md:size-32"
75
- />
76
- {:else}
77
- <div
78
- class="flex size-12 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 dark:bg-gray-600 max-sm:self-start sm:text-4xl md:size-32"
79
- >
80
- {assistant?.name[0]}
81
- </div>
82
- {/if}
83
-
84
- <div class="flex h-full flex-col gap-2 text-balance">
85
- <p class="-mb-1">Assistant</p>
86
-
87
- <p class="text-xl font-bold sm:text-2xl">{assistant.name}</p>
88
- {#if assistant.description}
89
- <p class="line-clamp-6 text-sm text-gray-500 dark:text-gray-400">
90
- {assistant.description}
91
- </p>
92
- {/if}
93
-
94
- {#if assistant?.tools?.length}
95
  <div
96
- class="flex h-5 w-fit items-center gap-1 rounded-full bg-purple-500/10 pl-1 pr-2 text-xs"
97
- title="This assistant uses the websearch."
98
  >
99
- <CarbonTools class="text-sm text-purple-600" />
100
- Has tools
101
  </div>
102
  {/if}
103
- {#if hasRag}
104
- <div
105
- class="flex h-5 w-fit items-center gap-1 rounded-full bg-blue-500/10 pl-1 pr-2 text-xs"
106
- title="This assistant uses the websearch."
107
- >
108
- <IconInternet classNames="text-sm text-blue-600" />
109
- Has internet access
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  </div>
111
- {/if}
112
-
113
- {#if assistant.createdByName}
114
- <div class="pt-1 text-sm text-gray-400 dark:text-gray-500">
115
- Created by
116
- <a class="hover:underline" href="{base}/assistants?user={assistant.createdByName}">
117
- {assistant.createdByName}
 
118
  </a>
119
- {#if assistant.userCount && assistant.userCount > 1}
120
- <span class="mx-1">·</span>
121
- <div
122
- class="inline-flex items-baseline gap-1 text-sm text-gray-400 dark:text-gray-500"
123
- title="Number of users"
124
- >
125
- <CarbonUserMultiple class="text-xxs" />{formatUserCount(assistant.userCount)} users
126
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
127
  {/if}
128
- </div>
129
- {/if}
 
 
 
 
 
 
 
130
  </div>
131
- </div>
 
 
 
 
 
 
 
 
 
 
132
 
133
- <div class="absolute right-3 top-3 md:right-4 md:top-4">
134
- <div class="flex flex-row items-center gap-1">
135
- <button
136
- class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800 max-sm:px-1.5 md:text-sm"
137
- onclick={() => {
138
- if (!isCopied) {
139
- share(shareUrl, assistant.name);
140
- isCopied = true;
141
- setTimeout(() => {
142
- isCopied = false;
143
- }, 2000);
144
- }
145
- }}
146
- >
147
- {#if isCopied}
148
- <CarbonCheckmark class="text-xxs text-green-600 max-sm:text-xs" />
149
- <span class="text-green-600 max-sm:hidden"> Link copied </span>
150
- {:else}
151
- <CarbonExport class="text-xxs max-sm:text-xs" />
152
- <span class="max-sm:hidden"> Share </span>
153
  {/if}
154
- </button>
155
- <a
156
- href="{base}/settings/assistants/{assistant._id.toString()}"
157
- class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800 md:text-sm"
158
- ><IconGear class="text-xxs" />Settings</a
159
- >
160
  </div>
161
  </div>
162
- <button
163
- onclick={() => {
164
- settings.instantSet({
165
- activeModel: models[0].name,
166
- });
167
- goto(`${base}/`);
168
- }}
169
- class="absolute -bottom-6 right-2 inline-flex items-center justify-center text-xs text-gray-600 underline hover:brightness-50 dark:text-gray-400 dark:hover:brightness-110"
170
- >
171
- <CarbonRenew class="mr-1.5 text-xxs" /> Reset to default model
172
- </button>
173
  </div>
174
- {#if assistant.exampleInputs}
175
- <div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
176
- <div class="md:col-span-2 md:mt-6">
177
- <div
178
- class="grid grid-cols-1 gap-3 {assistant.exampleInputs.length > 1
179
- ? 'md:grid-cols-2'
180
- : ''}"
181
- >
182
- {#each assistant.exampleInputs as example}
183
- <button
184
- type="button"
185
- class="truncate whitespace-nowrap rounded-xl border bg-gray-50 px-3 py-2 text-left text-smd text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
186
- onclick={() => dispatch("message", example)}
187
- >
188
- {example}
189
- </button>
190
- {/each}
191
- </div>
192
  </div>
193
  </div>
194
  {/if}
 
195
  </div>
 
58
  const settings = useSettingsStore();
59
  </script>
60
 
61
+ <div class="my-auto grid gap-8 lg:grid-cols-3">
62
+ <div class="lg:col-span-1">
63
+ <div>
64
+ <div class="mb-3 flex items-center">
65
+ {#if assistant.avatar}
66
+ <img
67
+ src={`${base}/settings/assistants/${assistant._id.toString()}/avatar.jpg?hash=${
68
+ assistant.avatar
69
+ }`}
70
+ alt="avatar"
71
+ class="mr-3 size-10 flex-none rounded-full object-cover"
72
+ />
73
+ {:else}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  <div
75
+ class="mr-3 flex size-10 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 dark:bg-gray-600"
 
76
  >
77
+ {assistant?.name[0]}
 
78
  </div>
79
  {/if}
80
+ <div class="text-2xl font-semibold">
81
+ {assistant.name}
82
+ </div>
83
+ </div>
84
+ <p class="line-clamp-5 text-base text-gray-600 dark:text-gray-400">
85
+ {assistant.description || "No description provided."}
86
+ </p>
87
+
88
+ <button
89
+ onclick={() => {
90
+ settings.instantSet({
91
+ activeModel: models[0].name,
92
+ });
93
+ goto(`${base}/`);
94
+ }}
95
+ class="mt-4 inline-flex w-fit items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
96
+ >
97
+ <CarbonRenew class="mr-1.5 text-xxs" /> Reset to default model
98
+ </button>
99
+ </div>
100
+ </div>
101
+ <div class="lg:col-span-2 lg:pl-24">
102
+ <div class="overflow-hidden rounded-xl border dark:border-gray-800">
103
+ <div class="flex flex-wrap items-center justify-between gap-2 p-3">
104
+ <div class="flex flex-wrap items-center gap-2">
105
+ <div class="hidden text-sm font-medium text-gray-600 dark:text-gray-400 sm:block">
106
+ About this Assistant
107
  </div>
108
+ {#if assistant.createdByName}
109
+ <span class="hidden text-gray-400 sm:block">•</span>
110
+ <a
111
+ class="text-sm text-gray-500 hover:underline"
112
+ href="{base}/assistants?user={assistant.createdByName}"
113
+ >
114
+ {#if !import.meta.env.SSR && window.innerWidth < 640}By
115
+ {/if}{assistant.createdByName}
116
  </a>
117
+ {/if}
118
+ </div>
119
+ <div class="flex gap-1 self-start">
120
+ <button
121
+ class="btn flex h-7 w-7 rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
122
+ onclick={() => {
123
+ if (!isCopied) {
124
+ share(shareUrl, assistant.name);
125
+ isCopied = true;
126
+ setTimeout(() => {
127
+ isCopied = false;
128
+ }, 2000);
129
+ }
130
+ }}
131
+ title="Share assistant"
132
+ >
133
+ {#if isCopied}
134
+ <CarbonCheckmark class="text-green-600" />
135
+ {:else}
136
+ <CarbonExport />
137
  {/if}
138
+ </button>
139
+ <a
140
+ href="{base}/settings/assistants/{assistant._id.toString()}"
141
+ aria-label="Settings"
142
+ title="Settings"
143
+ class="btn flex h-7 w-7 rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
144
+ ><IconGear /></a
145
+ >
146
+ </div>
147
  </div>
148
+ <div class="grid gap-3 bg-gray-50 p-3 text-sm dark:bg-gray-800/70">
149
+ <div class="flex flex-wrap gap-2">
150
+ {#if hasRag}
151
+ <div
152
+ class="flex h-6 items-center gap-1 rounded-full bg-blue-500/10 pl-1.5 pr-2.5 text-xs"
153
+ title="This assistant uses web search"
154
+ >
155
+ <IconInternet classNames="text-sm text-blue-600" />
156
+ Internet access
157
+ </div>
158
+ {/if}
159
 
160
+ {#if assistant?.tools?.length}
161
+ <div
162
+ class="flex h-6 items-center gap-1 rounded-full bg-purple-500/10 pl-1.5 pr-2.5 text-xs"
163
+ title="This assistant can use tools"
164
+ >
165
+ <CarbonTools class="text-sm text-purple-600" />
166
+ Has tools
167
+ </div>
168
+ {/if}
169
+
170
+ {#if assistant.userCount && assistant.userCount > 1}
171
+ <div
172
+ class="flex h-6 items-center gap-1 rounded-full bg-gray-500/10 pl-1.5 pr-2.5 text-xs"
173
+ title="Number of users"
174
+ >
175
+ <CarbonUserMultiple class="text-sm text-gray-600 dark:text-gray-400" />
176
+ {formatUserCount(assistant.userCount)} users
177
+ </div>
 
 
178
  {/if}
179
+ </div>
 
 
 
 
 
180
  </div>
181
  </div>
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
+ {#if assistant.exampleInputs && assistant.exampleInputs.length > 0}
184
+ <div class="lg:col-span-3 lg:mt-6">
185
+ <p class="mb-3 text-center text-gray-600 dark:text-gray-300 lg:text-left">Examples</p>
186
+ <div
187
+ class="flex max-h-60 gap-2 overflow-x-auto pb-2 text-center scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 lg:grid lg:grid-cols-3 lg:overflow-y-auto lg:text-left"
188
+ >
189
+ {#each assistant.exampleInputs as example}
190
+ <button
191
+ type="button"
192
+ class="flex-shrink-0 rounded-xl border bg-gray-50 px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:px-3 lg:w-full xl:px-3.5 xl:text-base"
193
+ onclick={() => dispatch("message", example)}
194
+ >
195
+ {example}
196
+ </button>
197
+ {/each}
 
 
 
198
  </div>
199
  </div>
200
  {/if}
201
+ <div class="h-40 sm:h-24"></div>
202
  </div>