Skip to content

Commit bb38bf5

Browse files
nsarrazinnsarrazin
authored
fix(front): add better responsive design to tools & assistants (#1473)
* fix(tool): responsive design for tool page * fix(assistants): add responsive design to assistant page
1 parent b5e5e4b commit bb38bf5

File tree

3 files changed

+81
-72
lines changed

3 files changed

+81
-72
lines changed

‎src/lib/components/ToolLogo.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
})();
8383
</script>
8484

85-
<div class="flex {sizeClass} items-center justify-center">
85+
<div class="flex {sizeClass} relative items-center justify-center">
8686
<svg xmlns="http://www.w3.org/2000/svg" class="absolute {sizeClass} h-full" viewBox="0 0 52 58">
8787
<defs>
8888
<linearGradient id="gradient-{gradientColor}" gradientTransform="rotate(90)">

‎src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,26 @@
4747
<ReportModal on:close={() => (displayReportModal = false)} />
4848
{/if}
4949
<div class="flex h-full flex-col gap-2">
50-
<div class="flex gap-6">
51-
{#if assistant?.avatar}
52-
<!-- crop image if not square -->
53-
<img
54-
src={`${base}/settings/assistants/${assistant?._id}/avatar.jpg?hash=${assistant?.avatar}`}
55-
alt="Avatar"
56-
class="size-16 flex-none rounded-full object-cover sm:size-24"
57-
/>
58-
{:else}
59-
<div
60-
class="flex size-16 flex-none items-center justify-center rounded-full bg-gray-300 text-4xl font-semibold uppercase text-gray-500 sm:size-24"
61-
>
62-
{assistant?.name[0]}
63-
</div>
64-
{/if}
50+
<div class="flex flex-col sm:flex-row sm:gap-6">
51+
<div class="mb-4 flex justify-center sm:mb-0">
52+
{#if assistant?.avatar}
53+
<img
54+
src={`${base}/settings/assistants/${assistant?._id}/avatar.jpg?hash=${assistant?.avatar}`}
55+
alt="Avatar"
56+
class="size-16 flex-none rounded-full object-cover sm:size-24"
57+
/>
58+
{:else}
59+
<div
60+
class="flex size-16 flex-none items-center justify-center rounded-full bg-gray-300 text-4xl font-semibold uppercase text-gray-500 sm:size-24"
61+
>
62+
{assistant?.name[0]}
63+
</div>
64+
{/if}
65+
</div>
6566

6667
<div class="flex-1">
67-
<div class="mb-1.5">
68-
<h1 class="mr-1 inline text-xl font-semibold">
68+
<div class="flex flex-wrap items-center gap-2">
69+
<h1 class="break-words text-xl font-semibold">
6970
{assistant?.name}
7071
</h1>
7172

@@ -77,7 +78,7 @@
7778
<IconInternet classNames="text-sm text-blue-600" />
7879
</span>
7980
{/if}
80-
<span class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
81+
<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
8182
>public</span
8283
>
8384
</div>
@@ -96,21 +97,23 @@
9697
</a>
9798
</p>
9899
<div
99-
class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
100+
class="flex flex-wrap items-center gap-x-4 gap-y-2 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800 max-sm:justify-center"
100101
>
101-
<button
102-
class="my-2 flex w-fit items-center rounded-full bg-black px-3 py-1 text-base !text-white"
103-
name="Activate model"
104-
on:click|stopPropagation={() => {
105-
settings.instantSet({
106-
activeModel: $page.params.assistantId,
107-
});
108-
goto(`${base}/`);
109-
}}
110-
>
111-
<CarbonChat class="mr-1.5 text-sm" />
112-
New chat
113-
</button>
102+
<div class="w-full sm:w-auto">
103+
<button
104+
class="mx-auto my-2 flex w-full w-min items-center justify-center rounded-full bg-black px-3 py-1 text-base !text-white"
105+
name="Activate model"
106+
on:click|stopPropagation={() => {
107+
settings.instantSet({
108+
activeModel: $page.params.assistantId,
109+
});
110+
goto(`${base}/`);
111+
}}
112+
>
113+
<CarbonChat class="mr-1.5 text-sm" />
114+
New chat
115+
</button>
116+
</div>
114117
{#if assistant?.createdByMe}
115118
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"
116119
><CarbonPen class="mr-1.5 inline text-xs" />Edit

‎src/routes/tools/[toolId]/+page.svelte

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -46,29 +46,31 @@
4646
<Modal on:close={() => goto(previousPage)} width="min-w-xl">
4747
<div class="w-full min-w-64 p-8">
4848
<div class="flex h-full flex-col gap-2">
49-
<div class="flex gap-6">
50-
<ToolLogo color={data.tool.color} icon={data.tool.icon} size="lg" />
49+
<div class="flex flex-col sm:flex-row sm:gap-6">
50+
<div class="mb-4 flex justify-center sm:mb-0">
51+
<ToolLogo color={data.tool.color} icon={data.tool.icon} size="lg" />
52+
</div>
5153

5254
<div class="flex-1">
53-
<div>
54-
<h1 class="mr-1 inline text-xl font-semibold">
55+
<div class="flex flex-wrap items-center gap-2">
56+
<h1 class="break-words text-xl font-semibold">
5557
{data.tool.displayName}
5658
</h1>
57-
<span class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
59+
<span class="inline rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
5860
>public</span
5961
>
6062
</div>
6163

6264
{#if data.tool?.baseUrl}
6365
{#if data.tool.baseUrl.startsWith("https://")}
64-
<p class="mb-2 line-clamp-2 font-mono text-gray-500">
66+
<p class="mb-2 break-words font-mono text-gray-500">
6567
{data.tool.baseUrl}
6668
</p>
6769
{:else}
6870
<a
6971
href="https://huggingface.co/spaces/{data.tool.baseUrl}"
7072
target="_blank"
71-
class="mb-2 line-clamp-2 font-mono text-gray-500 hover:underline"
73+
class="mb-2 break-words font-mono text-gray-500 hover:underline"
7274
>
7375
{data.tool.baseUrl}
7476
</a>
@@ -91,27 +93,29 @@
9193
{/if}
9294

9395
<div
94-
class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
96+
class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
9597
>
96-
<button
97-
class="{isActive
98-
? 'bg-gray-100 text-gray-800'
99-
: 'bg-black !text-white'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
100-
name="Activate model"
101-
on:click|stopPropagation={() => {
102-
if (isActive) {
103-
settings.instantSet({
104-
tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
105-
});
106-
} else {
107-
settings.instantSet({
108-
tools: [...($settings?.tools ?? []), data.tool._id],
109-
});
110-
}
111-
}}
112-
>
113-
{isActive ? "Deactivate" : "Activate"}
114-
</button>
98+
<div class="w-full sm:w-auto">
99+
<button
100+
class="{isActive
101+
? 'bg-gray-100 text-gray-800'
102+
: 'bg-black !text-white'} mx-auto my-2 flex w-full w-min items-center justify-center rounded-full px-3 py-1 text-base"
103+
name="Activate model"
104+
on:click|stopPropagation={() => {
105+
if (isActive) {
106+
settings.instantSet({
107+
tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
108+
});
109+
} else {
110+
settings.instantSet({
111+
tools: [...($settings?.tools ?? []), data.tool._id],
112+
});
113+
}
114+
}}
115+
>
116+
{isActive ? "Deactivate" : "Activate"}
117+
</button>
118+
</div>
115119
{#if data.tool?.createdByMe}
116120
<a href="{base}/tools/{data.tool?._id}/edit" class="underline"
117121
><CarbonPen class="mr-1.5 inline text-xs" />Edit
@@ -182,8 +186,7 @@
182186
</div>
183187
</div>
184188
</div>
185-
186-
<p class="text-sm">
189+
<p class="text-sm max-sm:hidden">
187190
Tools are applications that the model can choose to call while you are chatting with it.
188191
</p>
189192
{#if data.tool.description}
@@ -197,19 +200,22 @@
197200
<h2 class="text-lg font-semibold">Direct URL</h2>
198201

199202
<p class="pb-2 text-sm text-gray-500">Share this link with people to use your tool.</p>
200-
201203
<div
202-
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
204+
class="flex flex-row items-center gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
203205
>
204-
<input disabled class="flex-1 truncate bg-inherit" value={shareUrl} />
205-
<CopyToClipBoardBtn
206-
value={shareUrl}
207-
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
208-
>
209-
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
210-
<CarbonLink />Copy
206+
<div class="relative flex-1 overflow-hidden">
207+
<input disabled class="w-full truncate bg-inherit pr-16" value={shareUrl} />
208+
<div class="absolute right-0 top-1/2 -translate-y-1/2">
209+
<CopyToClipBoardBtn
210+
value={shareUrl}
211+
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
212+
>
213+
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
214+
<CarbonLink />Copy
215+
</div>
216+
</CopyToClipBoardBtn>
211217
</div>
212-
</CopyToClipBoardBtn>
218+
</div>
213219
</div>
214220
</div>
215221
</div>

0 commit comments

Comments
 (0)