Skip to content

Commit

Permalink
fix(front): add better responsive design to tools & assistants (#1473)
Browse files Browse the repository at this point in the history 
* fix(tool): responsive design for tool page

* fix(assistants): add responsive design to assistant page
  • Loading branch information
@nsarrazin
nsarrazin authored Sep 17, 2024
1 parent b5e5e4b commit bb38bf5
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 72 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/ToolLogo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
})();
</script>

<div class="flex {sizeClass} items-center justify-center">
<div class="flex {sizeClass} relative items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute {sizeClass} h-full" viewBox="0 0 52 58">
<defs>
<linearGradient id="gradient-{gradientColor}" gradientTransform="rotate(90)">
Expand Down
67 changes: 35 additions & 32 deletions src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,25 +47,26 @@
<ReportModal on:close={() => (displayReportModal = false)} />
{/if}
<div class="flex h-full flex-col gap-2">
<div class="flex gap-6">
{#if assistant?.avatar}
<!-- crop image if not square -->
<img
src={`${base}/settings/assistants/${assistant?._id}/avatar.jpg?hash=${assistant?.avatar}`}
alt="Avatar"
class="size-16 flex-none rounded-full object-cover sm:size-24"
/>
{:else}
<div
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"
>
{assistant?.name[0]}
</div>
{/if}
<div class="flex flex-col sm:flex-row sm:gap-6">
<div class="mb-4 flex justify-center sm:mb-0">
{#if assistant?.avatar}
<img
src={`${base}/settings/assistants/${assistant?._id}/avatar.jpg?hash=${assistant?.avatar}`}
alt="Avatar"
class="size-16 flex-none rounded-full object-cover sm:size-24"
/>
{:else}
<div
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"
>
{assistant?.name[0]}
</div>
{/if}
</div>

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

Expand All @@ -77,7 +78,7 @@
<IconInternet classNames="text-sm text-blue-600" />
</span>
{/if}
<span class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
<span class="rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
>public</span
>
</div>
Expand All @@ -96,21 +97,23 @@
</a>
</p>
<div
class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
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"
>
<button
class="my-2 flex w-fit items-center rounded-full bg-black px-3 py-1 text-base !text-white"
name="Activate model"
on:click|stopPropagation={() => {
settings.instantSet({
activeModel: $page.params.assistantId,
});
goto(`${base}/`);
}}
>
<CarbonChat class="mr-1.5 text-sm" />
New chat
</button>
<div class="w-full sm:w-auto">
<button
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"
name="Activate model"
on:click|stopPropagation={() => {
settings.instantSet({
activeModel: $page.params.assistantId,
});
goto(`${base}/`);
}}
>
<CarbonChat class="mr-1.5 text-sm" />
New chat
</button>
</div>
{#if assistant?.createdByMe}
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"
><CarbonPen class="mr-1.5 inline text-xs" />Edit
Expand Down
84 changes: 45 additions & 39 deletions src/routes/tools/[toolId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,31 @@
<Modal on:close={() => goto(previousPage)} width="min-w-xl">
<div class="w-full min-w-64 p-8">
<div class="flex h-full flex-col gap-2">
<div class="flex gap-6">
<ToolLogo color={data.tool.color} icon={data.tool.icon} size="lg" />
<div class="flex flex-col sm:flex-row sm:gap-6">
<div class="mb-4 flex justify-center sm:mb-0">
<ToolLogo color={data.tool.color} icon={data.tool.icon} size="lg" />
</div>

<div class="flex-1">
<div>
<h1 class="mr-1 inline text-xl font-semibold">
<div class="flex flex-wrap items-center gap-2">
<h1 class="break-words text-xl font-semibold">
{data.tool.displayName}
</h1>
<span class="ml-1 rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
<span class="inline rounded-full border px-2 py-0.5 text-sm leading-none text-gray-500"
>public</span
>
</div>

{#if data.tool?.baseUrl}
{#if data.tool.baseUrl.startsWith("https://")}
<p class="mb-2 line-clamp-2 font-mono text-gray-500">
<p class="mb-2 break-words font-mono text-gray-500">
{data.tool.baseUrl}
</p>
{:else}
<a
href="https://huggingface.co/spaces/{data.tool.baseUrl}"
target="_blank"
class="mb-2 line-clamp-2 font-mono text-gray-500 hover:underline"
class="mb-2 break-words font-mono text-gray-500 hover:underline"
>
{data.tool.baseUrl}
</a>
Expand All @@ -91,27 +93,29 @@
{/if}

<div
class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
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"
>
<button
class="{isActive
? 'bg-gray-100 text-gray-800'
: 'bg-black !text-white'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
name="Activate model"
on:click|stopPropagation={() => {
if (isActive) {
settings.instantSet({
tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
});
} else {
settings.instantSet({
tools: [...($settings?.tools ?? []), data.tool._id],
});
}
}}
>
{isActive ? "Deactivate" : "Activate"}
</button>
<div class="w-full sm:w-auto">
<button
class="{isActive
? 'bg-gray-100 text-gray-800'
: '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"
name="Activate model"
on:click|stopPropagation={() => {
if (isActive) {
settings.instantSet({
tools: ($settings?.tools ?? []).filter((t) => t !== data.tool._id),
});
} else {
settings.instantSet({
tools: [...($settings?.tools ?? []), data.tool._id],
});
}
}}
>
{isActive ? "Deactivate" : "Activate"}
</button>
</div>
{#if data.tool?.createdByMe}
<a href="{base}/tools/{data.tool?._id}/edit" class="underline"
><CarbonPen class="mr-1.5 inline text-xs" />Edit
Expand Down Expand Up @@ -182,8 +186,7 @@
</div>
</div>
</div>

<p class="text-sm">
<p class="text-sm max-sm:hidden">
Tools are applications that the model can choose to call while you are chatting with it.
</p>
{#if data.tool.description}
Expand All @@ -197,19 +200,22 @@
<h2 class="text-lg font-semibold">Direct URL</h2>

<p class="pb-2 text-sm text-gray-500">Share this link with people to use your tool.</p>

<div
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
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"
>
<input disabled class="flex-1 truncate bg-inherit" value={shareUrl} />
<CopyToClipBoardBtn
value={shareUrl}
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
>
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
<CarbonLink />Copy
<div class="relative flex-1 overflow-hidden">
<input disabled class="w-full truncate bg-inherit pr-16" value={shareUrl} />
<div class="absolute right-0 top-1/2 -translate-y-1/2">
<CopyToClipBoardBtn
value={shareUrl}
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
>
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
<CarbonLink />Copy
</div>
</CopyToClipBoardBtn>
</div>
</CopyToClipBoardBtn>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit bb38bf5

Please sign in to comment.