Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(front): add better responsive design to tools & assistants #1473

Merged
merged 2 commits into from
Sep 17, 2024
Merged

fix(front): add better responsive design to tools & assistants #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d35d6d9
fix(tool): responsive design for tool page
nsarrazin Sep 17, 2024
d2d5fdd
fix(assistants): add responsive design to assistant page
nsarrazin Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/components/ToolLogo.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading