Skip to content

Commit 69c223d

Browse files
gary149gary149
committed
layout
1 parent f6c61eb commit 69c223d

File tree

6 files changed

+78
-58
lines changed

6 files changed

+78
-58
lines changed

‎src/lib/components/AssistantSettings.svelte

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959

6060
<form
6161
method="POST"
62-
class="h-full w-full overflow-x-clip"
62+
class="flex flex-col"
6363
enctype="multipart/form-data"
6464
use:enhance={async ({ formData }) => {
6565
loading = true;
@@ -82,19 +82,19 @@
8282
}}
8383
>
8484
{#if assistant}
85-
<h2 class="text-xl font-semibold">Edit {assistant?.name ?? ""}</h2>
86-
<p class="mb-8 text-sm text-gray-500">
85+
<h2 class="text-xl font-semibold">Edit assistant ({assistant?.name ?? ""})</h2>
86+
<p class="mb-6 text-sm text-gray-500">
8787
Modifying an existing assistant will propagate those changes to all users.
8888
</p>
8989
{:else}
9090
<h2 class="text-xl font-semibold">Create new assistant</h2>
91-
<p class="mb-8 text-sm text-gray-500">
91+
<p class="mb-6 text-sm text-gray-500">
9292
Assistants are public, and can be accessed by anyone with the link.
9393
</p>
9494
{/if}
9595

96-
<div class="grid grid-cols-2 gap-2 max-sm:grid-cols-1">
97-
<div class="flex flex-col gap-4 px-2">
96+
<div class="grid flex-1 grid-cols-2 gap-4 max-sm:grid-cols-1">
97+
<div class="flex flex-col gap-4">
9898
<label class="truncate">
9999
<span class="mb-1 block text-sm font-semibold">Avatar</span>
100100
<input
@@ -194,7 +194,7 @@
194194

195195
<label>
196196
<span class="mb-1 text-sm font-semibold">Start messages</span>
197-
<div class="flex flex-col gap-2 md:max-h-32 md:overflow-y-scroll">
197+
<div class="flex flex-col gap-2 md:max-h-32">
198198
<input
199199
name="exampleInput1"
200200
bind:value={inputMessage1}
@@ -226,23 +226,21 @@
226226
</label>
227227
</div>
228228

229-
<div class="flex flex-col gap-4 px-2">
230-
<label class="h-full">
231-
<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
229+
<label class="flex flex-col">
230+
<span class="mb-1 text-sm font-semibold"> Instructions (system prompt) </span>
232231

233-
<textarea
234-
name="preprompt"
235-
class="h-64 w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
236-
placeholder="You'll act as..."
237-
value={assistant?.preprompt ?? ""}
238-
/>
232+
<textarea
233+
name="preprompt"
234+
class="flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
235+
placeholder="You'll act as..."
236+
value={assistant?.preprompt ?? ""}
237+
/>
239238

240-
<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
241-
</label>
242-
</div>
239+
<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
240+
</label>
243241
</div>
244242

245-
<div class="my-3">
243+
<div class="mt-5 flex justify-end gap-2">
246244
<a
247245
href={assistant ? `${base}/settings/assistants/${assistant?._id}` : `${base}/settings`}
248246
class="rounded-full bg-gray-200 px-8 py-2 font-semibold text-gray-600">Cancel</a

‎src/lib/components/NavConversationItem.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
? 'bg-gray-100 dark:bg-gray-700'
3434
: ''}"
3535
>
36-
<div class="flex-1 truncate">
36+
<div class="flex flex-1 items-center truncate">
3737
{#if confirmDelete}
3838
<span class="font-semibold"> Delete </span>
3939
{/if}

‎src/lib/components/chat/AssistantIntroduction.svelte

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,28 @@
1414

1515
<div class="flex h-full w-full flex-col content-center items-center justify-center">
1616
<div
17-
class="relative mt-auto rounded-xl bg-gray-100 text-gray-600 md:px-5 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300"
17+
class="relative mt-auto rounded-2xl bg-gray-100 text-gray-600 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300"
1818
>
19-
<div class="flex items-center gap-2 p-4 pr-10 pt-10 md:gap-4 md:p-8">
19+
<div class="flex items-center gap-4 p-4 pr-10 pt-10 md:gap-4 md:p-8">
2020
{#if assistant.avatar}
2121
<img
2222
src={`${base}/settings/assistants/${assistant._id.toString()}/avatar?hash=${
2323
assistant.avatar
2424
}`}
2525
alt="avatar"
26-
class="mr-4 h-12 w-12 rounded-full object-cover md:h-32 md:w-32"
26+
class="mr-4 size-14 rounded-full object-cover md:size-32 md:h-32"
2727
/>
2828
{:else}
2929
<div
30-
class="mr-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-300 object-cover text-4xl font-bold uppercase text-gray-500 md:h-32 md:w-32"
30+
class="flex size-12 items-center justify-center rounded-full bg-gray-300 object-cover text-4xl font-bold uppercase text-gray-500 md:h-32 md:w-32 dark:bg-gray-600"
3131
>
3232
{assistant?.name[0]}
3333
</div>
3434
{/if}
3535

36-
<div class="flex h-full flex-col content-end">
36+
<div class="flex h-full flex-col">
3737
<p
38-
class="mb-2 w-fit truncate text-ellipsis rounded-full bg-gray-200 px-4 py-2 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-400"
38+
class="mb-2 w-fit truncate text-ellipsis rounded-full bg-gray-200 px-3 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-400"
3939
>
4040
{assistant.modelId}
4141
</p>
@@ -58,19 +58,19 @@
5858
<div class="absolute right-2 top-2">
5959
<a
6060
href="{base}/settings/assistants/{assistant._id.toString()}"
61-
class="flex h-7 w-7 items-center justify-center rounded-full border bg-gray-200 p-1 text-xs hover:bg-gray-100 dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
61+
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"
6262
><IconGear /></a
6363
>
6464
</div>
6565
</div>
6666
{#if assistant.exampleInputs}
67-
<div class="mx-auto mt-auto w-full gap-8">
67+
<div class="mx-auto mt-auto w-full gap-8 sm:-mb-8">
6868
<div class="md:col-span-2 md:mt-6">
69-
<div class="grid gap-3 overflow-y-scroll max-md:h-32 md:grid-cols-2 md:gap-5">
69+
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
7070
{#each assistant.exampleInputs as example}
7171
<button
7272
type="button"
73-
class="rounded-xl border bg-gray-50 p-2.5 text-left text-gray-600 hover:bg-gray-100 sm:p-4 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
73+
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"
7474
on:click={() => dispatch("message", example)}
7575
>
7676
{example}

‎src/lib/components/chat/ChatMessages.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,19 +49,19 @@
4949
{#each messages as message, i}
5050
{#if i === 0 && $page.data?.assistant}
5151
<a
52-
class="text-md mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 py-1 pl-1 pr-3 font-semibold text-gray-800 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
52+
class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 py-1 pl-1 pr-3 text-sm text-gray-800 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
5353
href="{base}/settings/assistants/{$page.data.assistant._id}"
5454
>
5555
{#if $page.data?.assistant.avatar}
5656
<img
5757
src="{base}/settings/assistants/{$page.data?.assistant._id.toString()}/avatar?hash=${$page
5858
.data?.assistant.avatar}"
5959
alt="Avatar"
60-
class="h-6 w-6 rounded-full object-cover"
60+
class="size-5 rounded-full object-cover"
6161
/>
6262
{:else}
6363
<div
64-
class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
64+
class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
6565
>
6666
{$page.data?.assistant.name[0]}
6767
</div>

‎src/routes/settings/+layout.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
</button>
4848
</div>
4949
<div
50-
class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap border-b-gray-400 max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
50+
class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
5151
>
5252
<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
5353

@@ -72,7 +72,7 @@
7272
{#each data.assistants as assistant}
7373
<a
7474
href="{base}/settings/assistants/{assistant._id.toString()}"
75-
class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
75+
class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
7676
{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
7777
>
7878
{#if assistant.avatar}
@@ -83,7 +83,7 @@
8383
/>
8484
{:else}
8585
<div
86-
class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
86+
class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
8787
>
8888
{assistant.name[0]}
8989
</div>
@@ -120,15 +120,15 @@
120120
Application Settings
121121
</a>
122122
</div>
123-
<div class="col-span-1 overflow-y-auto md:col-span-2">
123+
<div class="col-span-1 overflow-y-auto max-md:pt-6 md:col-span-2">
124124
<slot />
125125
</div>
126126

127127
{#if $settings.recentlySaved}
128128
<div
129129
class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
130130
>
131-
<CarbonCheckmark />
131+
<CarbonCheckmark class="text-green-500" />
132132
Saved
133133
</div>
134134
{/if}

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

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import CarbonCopy from "~icons/carbon/copy-file";
1212
import CarbonFlag from "~icons/carbon/flag";
1313
import CarbonFollow from "~icons/carbon/user-follow";
14+
import CarbonLink from "~icons/carbon/link";
1415
import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
1516
1617
export let data: PageData;
@@ -27,7 +28,7 @@
2728
</script>
2829

2930
<div class="flex h-full flex-col gap-2">
30-
<div class="flex flex-row gap-8">
31+
<div class="flex gap-6">
3132
{#if assistant?.avatar}
3233
<!-- crop image if not square -->
3334
<img
@@ -37,20 +38,22 @@
3738
/>
3839
{:else}
3940
<div
40-
class="flex h-24 w-24 items-center justify-center rounded-full bg-gray-300 text-4xl font-bold uppercase text-gray-500"
41+
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"
4142
>
4243
{assistant?.name[0]}
4344
</div>
4445
{/if}
4546

4647
<div>
47-
<h1 class="text-xl font-bold">
48+
<h1 class="text-xl font-semibold">
4849
{assistant?.name}
4950
</h1>
5051

51-
<p class="pb-2 text-sm text-gray-500">
52-
{assistant?.description}
53-
</p>
52+
{#if assistant?.description}
53+
<p class="pb-2 text-sm text-gray-500">
54+
{assistant.description}
55+
</p>
56+
{/if}
5457

5558
<p class="text-sm text-gray-500">
5659
Model: <span class="font-semibold"> {assistant?.modelId} </span>
@@ -65,17 +68,17 @@
6568
$settings.activeModel = $page.params.assistantId;
6669
}}
6770
>
68-
{isActive ? "Active model" : "Activate"}
71+
{isActive ? "Active" : "Activate"}
6972
</button>
7073
</div>
7174
</div>
7275

7376
<div>
74-
<h2 class="text-lg font-bold">Direct URL</h2>
77+
<h2 class="text-lg font-semibold">Direct URL</h2>
7578

7679
<p class="pb-2 text-sm text-gray-500">
7780
{#if assistant?.createdByMe}
78-
By sharing this URL, other people can use your assistant.
81+
People with this link will be able to use your assistant.
7982
{:else}
8083
Created by <a
8184
class=" hover:underline"
@@ -88,30 +91,49 @@
8891
{/if}
8992
</p>
9093

91-
<div class="flex flex-row gap-2 rounded-full border-2 border-gray-200 bg-gray-100">
92-
<input disabled class="w-full px-3 py-1" value={shareUrl} />
93-
<CopyToClipBoardBtn value={shareUrl} classNames="border-0 text-gray-500 text-lg mr-4" />
94+
<div
95+
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
96+
>
97+
<input disabled class="flex-1 truncate" value={shareUrl} />
98+
<CopyToClipBoardBtn
99+
value={shareUrl}
100+
classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
101+
>
102+
<div class="flex items-center gap-1.5 text-gray-500 hover:underline">
103+
<CarbonLink />Copy
104+
</div>
105+
</CopyToClipBoardBtn>
94106
</div>
95107
</div>
96108

97-
<h2 class="text-lg font-bold">System Instructions</h2>
109+
<!-- <div>
110+
<h2 class="mb-2 text-lg font-semibold">Model used</h2>
98111
99-
<textarea disabled class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
112+
<div
113+
class="flex flex-row gap-2 rounded-lg border-2 border-gray-200 bg-gray-100 py-2 pl-3 pr-1.5"
114+
>
115+
<input disabled class="flex-1" value="Model" />
116+
</div>
117+
</div> -->
118+
119+
<h2 class="mt-4 text-lg font-semibold">System Instructions</h2>
120+
121+
<textarea disabled class="h-[8lh] w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
100122
>{assistant?.preprompt}</textarea
101123
>
102124

103-
<div class="mt-5 flex w-full flex-row justify-around gap-4">
125+
<div class="mt-5 flex gap-4">
104126
{#if assistant?.createdByMe}
127+
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline">
128+
<CarbonPen class="mr-1.5 inline" />
129+
Edit assistant
130+
</a>
105131
<form method="POST" action="?/delete" use:enhance>
106132
<button type="submit" class="flex items-center underline">
107133
<CarbonTrash class="mr-1.5 inline" />
108134
Delete assistant</button
109135
>
110136
</form>
111-
<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline">
112-
<CarbonPen class="mr-1.5 inline" />
113-
Edit assistant
114-
</a>
115137
{:else}
116138
<form method="POST" action="?/unsubscribe" use:enhance>
117139
<button type="submit" class="underline">

0 commit comments

Comments
 (0)